diff --git a/post6.html b/post6.html index 5b51c53..6c50b51 100644 --- a/post6.html +++ b/post6.html @@ -3235,7 +3235,12 @@ if (location.search.indexOf("nur=anim") >= 0) /* Das Absperrband der Website, components/sections/ChatDemoSection.tsx: accent-yellow auf dunklen Kanten. Mehr wird von dort nicht gebraucht -- der Chat auf den Ausschnitten kommt aus dem Pitch-Paket. */ - const WEB = { band: "#F1B729", bandDunkel: "#171106" }; + const WEB = { + band: "#F1B729", bandDunkel: "#171106", + /* Die Enden knicken nach hinten weg und liegen damit im Schatten. Zwei + Stufen, nicht eine: die Knickflaeche und dahinter die Spitze. */ + bandKnick: "#D6A11E", bandSpitze: "#B98914", + }; /* ─── Slide 5 · Der Chat für unterwegs ────────────────────────────────── Kein Geraet mehr. Vorbild ist die Machart, die Signal und Slack fuer @@ -3314,25 +3319,60 @@ if (location.search.indexOf("nur=anim") >= 0) Schutzhelm und "BALD VERFUEGBAR" im Wechsel. Es liegt ueber beiden Platten und ragt beidseitig hinaus -- es sperrt die ganze Sache ab, nicht eine Flaeche darin. */ + /* Das Absperrband. Es liegt nicht flach auf der Flaeche, sondern knickt + an beiden Enden nach hinten weg: die Aussenkanten laufen zur Mitte + zusammen, die Knickflaechen sind dunkler, und an der Knickstelle steht + eine Kante. Das ist der ganze Trick -- ein Band, das perspektivisch + wegfuehrt, hat schmalere Enden und weniger Licht darauf. + + Vorher war es ein Rechteck mit gleichmaessig durchlaufender Schrift. + Das las sich als Aufkleber und nicht als Band. */ const UEBER = 84, bh = 92, ty = H / 2 - bh / 2 + 24; const bogen = 13 * Math.PI / 180; const bL = (W + 2 * UEBER - bh * Math.sin(bogen)) / Math.cos(bogen); - const bA = (W - bL) / 2; - let band = '' + - '' + - ''; + const bA = (W - bL) / 2, bE = bA + bL; + + // Wo geknickt wird, und wie stark die Enden zusammenlaufen. + const kL = bA + bL * 0.12, kR = bE - bL * 0.12; + const ein = bh * 0.10; // Verjuengung je Kante am Ende + const oT = ty, uT = ty + bh; // Ober- und Unterkante in der Mitte + const oA = ty + ein, uA = ty + bh - ein; // dieselben an der Spitze + + const flaeche = (x1, o1, u1, x2, o2, u2, f) => + ''; + + let band = + flaeche(bA, oA, uA, kL, oT, uT, WEB.bandKnick) + + flaeche(kL, oT, uT, kR, oT, uT, WEB.band) + + flaeche(kR, oT, uT, bE, oA, uA, WEB.bandKnick); + + /* Die dunklen Laengskanten folgen dem Knick mit, sonst schwebten sie ueber + der Form. */ + const kante = (a1, a2, a3, a4) => + ''; + band += kante(oA, oT, oT, oA) + kante(uA, uT, uT, uA); + + // Die Knickkanten selbst: eine Spur dunkler als die Flaeche daneben. + [kL, kR].forEach(kx => { + band += ''; + }); + + /* Schrift und Helm einmal, mittig auf der geraden Flaeche. Vorher lief + der Satz wiederholt ueber das ganze Band und begann links am Rand -- + auf einem Band, dessen Enden wegknicken, gehoert er in die Mitte. */ const wort = "BALD VERFÜGBAR", gr = 34; - const wb = messen(wort, gr, 800) + gr * 0.16 * wort.length; - let bx = bA + 20; - while (bx + wb + 40 < bA + bL) { - band += ikon("hard-hat", bx + 18, ty + bh / 2, 36, WEB.bandDunkel); - band += uiText(bx + 44, ty + bh / 2 + 12, wort, gr, 800, WEB.bandDunkel, - { sperr: "0.16em" }); - bx += wb + 96; - } + const tw = messen(wort, gr, 800) + gr * 0.16 * wort.length; + const ganz = 44 + tw; + const bx = bA + bL / 2 - ganz / 2; + band += ikon("hard-hat", bx + 18, ty + bh / 2, 36, WEB.bandDunkel); + band += uiText(bx + 44, ty + bh / 2 + 12, wort, gr, 800, WEB.bandDunkel, + { sperr: "0.16em" }); + /* Um die eigene Mitte drehen, nicht um die der Zeichnung: das Band liegt 24 Einheiten tiefer, und beim Drehen um einen anderen Punkt wandert sein Kasten seitlich aus -- fuenf Einheiten ueber den Rand. */