From 9cc82e59eed9a038b1f57c38d4b304fc535650de Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Wed, 12 Aug 2026 02:34:01 +0200 Subject: [PATCH] Post 2: Titel-Slide gezeichnet, Helmlage umschaltbar Das Foto bleibt roh, gezeichnet wird drumherum. Der Rahmen ist die Markenform, dazu ein versetzter Zweitzug und eine schraffierte Kante. Die drei greifen ineinander statt nebeneinanderher zu laufen: der versetzte Zug ist die Aussenkante des Schattens, die Schraffur fuellt das Band dazwischen. Zur Schattenfrage steht ein Hinweis im Code -- Paragraf 5 in rules.md verbietet weichgezeichnete Schatten, und die dort notierte Ausnahme sagt, eine Linie ist kein Schatten. Eine Schraffur besteht aus Linien. Der Helm sitzt wahlweise an der abgeschnittenen Rahmenecke oder auf Noahs Kopf. Das haengt am Layout-Schalter der Slide, also am vorhandenen Geruest, und nicht an einem eigenen Sonderschalter. In der Ecken-Lage kippt er nach rechts, damit die Oeffnung ueber der Ecke liegt: nach links gekippt sah er aus, als falle er herunter. Drei Anlaeufe stecken im Helm, die Zwischenschritte stehen als Kommentar dabei. Erst war die Kuppel flach und die Krempe eine geschlossene Scheibe darunter, zusammen eine Schirmmuetze. Dann kam Schraffur dazu, und die Waagerechten kreuzten die Grate zu einem Gitter, also einem Korb. Was traegt, sind viele Stuetzpunkte, ein First, zwei Nebenrippen und eine Krempe mit Dicke. Drei Dinge waren technisch noetig: Die Zeichenebene ist rechts breiter geworden, von 114,8 auf 128,4 Prozent. In der Ecken-Lage ragt der Helm ueber den Rahmen hinaus und waere sonst beim Export abgeschnitten worden. renderPage erneuerte bisher nur den Textblock. Ein Layoutwechsel haette die Zeichnung nicht angefasst und der Schalter waere wirkungslos geblieben. Jetzt wird die Visualisierung mitgezogen; der Zufallskeim ist gesetzt, es kommt derselbe Strich heraus. VIS-Funktionen bekommen den Slide-Index, sonst kann eine Zeichnung ihren eigenen Layout-Zustand nicht lesen. Im Foto ist der Eckenradius von 38 auf 8 runter und der Navy-Rand entfallen. Mit dem gezeichneten Rahmen waeren das sonst drei Rahmen uebereinander gewesen. Das weicht vom Nachbau der Website-Karte ab und ist bewusst so. Der Projektstand kommt mit: Slide 1 traegt jetzt manuelle Anpassungen aus dem Generator. Der Fliesstext ist geleert, Ueberschrift und Karte sind verschoben, das Foto steht dadurch allein. Co-Authored-By: Claude Opus 5 (1M context) --- post2.html | 127 ++++++++++++++++++++++++++++++++++++++++++++--- state/post2.json | 28 +++++++++-- 2 files changed, 144 insertions(+), 11 deletions(-) diff --git a/post2.html b/post2.html index 3305493..958fae9 100644 --- a/post2.html +++ b/post2.html @@ -397,13 +397,26 @@ Namensschild sichtbar. Werte aus TeamCards.tsx uebernommen. Ohne die weichgezeichnete Ellipse aus dem Original: die haengt an backdrop-filter, und was der Export daraus macht, ist nicht verlaesslich. */ + /* Der Halter traegt das Foto und darueber die Zeichenebene. Die Ebene + ragt bewusst ueber das Foto hinaus, oben am weitesten: dort sitzt der + Helm. Ihre Masse sind Prozent und keine Pixel, damit sie mitwaechst, + wenn die Karte im Canvas breiter gezogen wird. */ + .karte-halter { position: relative; } + /* Der Selektor muss ".vis svg" schlagen, sonst zieht die allgemeine Regel + die Ebene auf Containerbreite und der Rahmen sitzt zu klein und + verschoben. Deshalb hier svg.karte-skizze und nicht nur die Klasse. */ + .vis svg.karte-skizze { + position: absolute; z-index: 6; pointer-events: none; + left: -7.42%; width: 128.39%; + top: -19.35%; height: 125.29%; + } .karte { position: relative; aspect-ratio: 4/5; overflow: hidden; - border-radius: 38px; background: #0f1a2e; isolation: isolate; + border-radius: 8px; background: #0f1a2e; isolation: isolate; } .karte-grund { - position: absolute; inset: 4.2%; z-index: 1; overflow: hidden; - border-radius: 27px; background: #2b2d2a; + position: absolute; inset: 0; z-index: 1; overflow: hidden; + border-radius: 8px; background: #2b2d2a; filter: grayscale(.04) saturate(.74) brightness(.73); } .karte-grund img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @@ -1093,7 +1106,8 @@ const VORLAGEN = [ { key: "titel", type: "feature", - layouts: [{ id: "standard", label: "Standard" }], + layouts: [{ id: "ecke", label: "Helm auf der Ecke" }, + { id: "kopf", label: "Helm auf dem Kopf" }], eyebrow: "Titel", head: 'Die Geschichte fängt
auf der Baustelle an.', body: "Noah Geerkens, SHK-Betrieb in vierter Generation.", @@ -1657,6 +1671,98 @@ '" xmlns="http://www.w3.org/2000/svg">' + raus + ''; } + /* ─── Slide 1: Foto im gezeichneten Rahmen ─────────────────────────────── + Das Foto bleibt roh, gezeichnet wird nur drumherum. Der Helm sitzt wie + die Krone beim Zeichenspiel auf der oberen rechten Ecke, angeschraegt und + halb ueber der Kante. + + Er ist ganz in Gelb gezogen, Umriss wie Schraffur. Das hat einen Grund: + er liegt zur Haelfte auf dem hellen Grund und zur Haelfte auf dem dunklen + Foto. Eine Tintenlinie waere auf dem Foto verschwunden. Gelb traegt auf + beidem, und ein Bauhelm ist ohnehin gelb. */ + /* Der Helm. Drei Anlaeufe stecken drin, und die Zwischenschritte stehen + hier, weil sie lehrreich sind: erst war die Kuppel flach und die Krempe + eine geschlossene Scheibe darunter, zusammen eine Schirmmuetze. Dann kam + Schraffur dazu, und die Waagerechten kreuzten die Grate zu einem Gitter, + also einem Korb. Was traegt, sind viele Stuetzpunkte in der Kuppel, ein + First von vorn nach hinten, zwei Nebenrippen und eine Krempe mit Dicke. + + Alles in Gelb, Umriss wie Rippen: der Helm liegt je nach Lage auf hellem + Grund oder auf dem dunklen Foto. Eine Tintenlinie waere dort verschwunden, + und ein Bauhelm ist ohnehin gelb. */ + function bauhelm(breite) { + const b = breite / 2, kd = b * 0.76, h = b * 1.0; + + const kuppel = glatt([ + [-kd, 2], [-kd * 1.03, -h * 0.28], [-kd * 0.93, -h * 0.58], + [-kd * 0.62, -h * 0.86], [-kd * 0.22, -h * 0.99], [kd * 0.22, -h * 0.99], + [kd * 0.62, -h * 0.86], [kd * 0.93, -h * 0.58], [kd * 1.03, -h * 0.28], [kd, 2], + ], false); + + const first = glatt([[-kd * 0.04, -h * 0.99], [0, -h * 0.62], + [kd * 0.03, -h * 0.22], [kd * 0.04, 1]], false); + let rippen = ""; + [-1, 1].forEach(v => { + rippen += glatt([[v * kd * 0.36, -h * 0.92], [v * kd * 0.58, -h * 0.56], + [v * kd * 0.68, -h * 0.17], [v * kd * 0.7, 1]], false); + }); + + // Krempe: unten und oben ein Zug, dadurch bekommt sie Dicke. + const krempeU = glatt([[-b, 4], [-b * 0.62, 16], [0, 21], [b * 0.62, 16], [b, 4]], false); + const krempeO = glatt([[-b, 4], [-b * 0.62, 7], [0, 10], [b * 0.62, 7], [b, 4]], false); + + // Schattierung links: vier Boegen parallel zur Aussenkante. + let schatten = ""; + for (let i = 0; i < 4; i++) { + const f = 0.94 - i * 0.1; + schatten += glatt([[-kd * f, -h * 0.16], [-kd * f * 0.94, -h * 0.46], + [-kd * f * 0.7, -h * 0.72]], false); + } + + return zug(schatten, { f: GELB, w: 2.1, op: .45 }) + + zug(kuppel, { f: GELB, w: 5 }) + + zug(first, { f: GELB, w: 3, op: .8 }) + + zug(rippen, { f: GELB, w: 2.3, op: .55 }) + + zug(krempeU, { f: GELB, w: 5 }) + + zug(krempeO, { f: GELB, w: 3.4, op: .85 }); + } + + /* Zwei Lagen, umschaltbar ueber den Layout-Schalter der Slide. + "ecke": der Helm haengt an der abgeschnittenen Rahmenecke. Er kippt dafuer + nach rechts, damit die Oeffnung ueber der Ecke liegt und nicht von ihr + weg zeigt. Nach links gekippt sah er aus, als falle er herunter. + "kopf": er sitzt auf Noahs Stirn, groesser, damit er getragen wirkt und + nicht wie eine Kappe aufliegt. */ + function visKarte(lage) { + keim(20260811); + const W = 796, H = 971; + // Das Foto liegt bei x 46..666 und y 150..925, der Rahmen 16 px aussen + // herum. Rechts ist die Ebene breiter als noetig, weil der Helm in der + // Lage "ecke" ueber den Rahmen hinausragt. + let band = ""; + for (let y = 178; y < 928; y += 13) band += strich(683, y, 699, y + 16, { j: .7, b: .7 }); + for (let x = 72; x < 666; x += 13) band += strich(x, 942, x + 16, 958, { j: .7, b: .7 }); + + /* Drei Sachen greifen ineinander statt nebeneinanderher zu laufen: der + versetzte Zug ist die Aussenkante des Schattens, die Schraffur fuellt + das Band dazwischen, und beides folgt der Markenform. + + Zur Schattenfrage: rules.md Paragraf 5 verbietet Schatten, meint damit + aber weichgezeichnete. Die dort notierte Ausnahme sagt, eine Linie ist + kein Schatten. Eine Schraffur besteht aus Linien. */ + const rahmen = + zug(chamfer(48, 152, 652, 807, 30, { ue: 5 }), { w: 3, op: .38 }) + + zug(band, { w: 1.9, op: .34 }) + + zug(chamfer(30, 134, 652, 807, 30, { ue: 9 }), { w: 6 }); + + const helm = lage === "kopf" + ? '' + bauhelm(222) + '' + : '' + bauhelm(196) + ''; + + return '' + rahmen + helm + ''; + } + /* ─── Slide 3: wechseln kannst du vergessen ────────────────────────────── Der Fliesstext hat zwei Haelften, und beide brauchen ein Bild: "Jahre an Daten und Wissen haengen drin" wird zu Wurzeln im Boden, "am Ende @@ -1904,14 +2010,15 @@ } const VIS = { - karte: () => + karte: j => + '
' + visKarte(layoutState[j]) + '
' + '
' + '
' + 'Noah Geerkens' + '
NoahCEO
' + - '
', + '
', schiene: () => visProzesse(), @@ -2534,7 +2641,7 @@ v.style.cssText = "--vis-w:" + (sl.visW || 900) + "px;--vis-left:" + (sl.visLeft || 92) + "px;--vis-bottom:" + (sl.visBottom || 96) + "px"; - v.innerHTML = VIS[sl.vis](); + v.innerHTML = VIS[sl.vis](j); page.appendChild(v); } @@ -2609,6 +2716,12 @@ // Das Layout hängt an der Seite, damit eine Titel-Seite auch in einer // Nachbar-Slide korrekt aussieht. page.dataset.layout = layoutState[j]; + /* Der Layout-Schalter ruft rebuildPage. Das erneuerte bisher nur den + Textblock, nicht die Visualisierung -- ein Umschalten der Helmlage waere + dadurch wirkungslos geblieben. Der Zufallskeim ist gesetzt, das erneute + Zeichnen liefert also denselben Strich. */ + const vv = page.querySelector(".vis"); + if (vv && SLIDES[j].vis && VIS[SLIDES[j].vis]) vv.innerHTML = VIS[SLIDES[j].vis](j); tagEditable(page); applyEdits(page, j); } diff --git a/state/post2.json b/state/post2.json index 6768aaf..15053a5 100644 --- a/state/post2.json +++ b/state/post2.json @@ -29,7 +29,9 @@ "deck": [ { "ref": "titel", - "werte": {} + "werte": { + "body": "
" + } }, { "ref": "prozesse", @@ -53,8 +55,26 @@ } ], "edits": [ - {}, - {}, + { + "body": { + "dx": 102, + "dy": -95 + }, + "headline": { + "dx": 102, + "dy": -96 + }, + "vis": { + "dx": 3, + "dy": -146 + } + }, + { + "vis": { + "dx": 0, + "dy": 0 + } + }, {}, {}, {}, @@ -62,7 +82,7 @@ ], "frameStyle": "rund", "layoutState": [ - "standard", + "ecke", "standard", "standard", "standard",