From b1810ddbc59bc479389c26e10c8af891c0f0e4b8 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 9 Sep 2026 01:01:13 +0200 Subject: [PATCH] screen6: Die beiden Bestaetigungen werden zu Unterschriften Filipe, mit Bildschirmfoto der beiden Felder: "die sollen geiler sein." WAS SIE WIRKLICH SIND, stand nur im Klassennamen. Auf einer Unterweisung bestaetigen ZWEI Personen, dass sie sie durchgegangen sind -- der Creator und seine Betreuung. Das ist kein Statusfeld, das ist eine Gegenzeichnung. Gezeichnet waren sie als zwei graue Kaesten mit runden Ecken, die man auf dem dunklen Grund kaum sah. Zwei Rechtecke sagen "hier steht etwas". Eine Unterschriftszeile sagt "hier fehlt jemand". ZWEI ZUSTAENDE, ZWEI BILDER -- und beide gab es im Code laengst als `data-da="ja"/"nein"`, nur unterschieden sie sich um einen Hauch Gruen: OFFEN eine gestrichelte Linie mit einem leeren Platz darauf. Sie WARTET sichtbar. Der Federstrich links deutet an, wo man ansetzt. DA eine durchgezogene gruene Linie, der Name darueber, und ein gepraegtes Siegel mit Haken -- wie ein abgestempeltes Formular. GLEICHE HOEHE IN BEIDEN ZUSTAENDEN, und das ist keine Kosmetik: Die Felder stehen nebeneinander in einem Raster. Waere das unterschriebene hoeher, spraenge die Karte in dem Moment, in dem jemand unterschreibt -- unter dem Finger dessen, der gerade gedrueckt hat. KEINE ZWEITE FASE. Die Karte drumherum steht schon in der Modulliste. Eine abgeschraegte Ecke IN einer abgeschraegten Ecke liest sich als Fehler, nicht als Absicht. Das Feld traegt deshalb die andere Formensprache des Hauses: die Linie. DER HAKEN IST EINE MASKE, kein Zeichensatz-Haken (der sieht in jeder Schrift anders aus und faellt weg, wenn eine fehlt) und kein Bild (eine Datei mehr fuer fuenfzehn Pixel). Erst stand er nur im Kommentar, waehrend im Code eine leere Muenze lag -- nachgebaut, bevor es committet wurde. Ein Kommentar, der mehr behauptet als der Code tut, ist schlimmer als keiner. ZWEI ANSICHTEN NACHGEMESSEN: Auf 1400 px nebeneinander, auf 390 px untereinander. Das Siegel sass im ersten Anlauf mit `translate(100%)` AUSSERHALB des Feldes -- breit sah das gut aus, schmal waere es aus der Karte gelaufen. Jetzt sitzt es innen; die Seite laesst sich bei 390 px nicht seitlich schieben. (Fuer die Ansicht musste ich Testdaten anlegen -- ohne Unterweisung gibt es keine Unterschriften, und ein Bildschirmfoto von einem leeren Bereich beweist nichts. Die Daten liegen in der Wegwerf-Datenbank der Pruefung, nicht im echten System.) Geprueft: pruef-schulung, pruef-css-klassen -- beide in Ordnung. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/bereich.css | 124 +++++++++++++++++++++++++++++-- workspace/aufgaben.html | 18 ++--- workspace/automation.html | 20 ++--- workspace/bereich.html | 28 +++---- workspace/calls.html | 22 +++--- workspace/chat.html | 20 ++--- workspace/content.html | 24 +++--- workspace/dateien.html | 20 ++--- workspace/index.html | 4 +- workspace/kalender.html | 22 +++--- workspace/leistung.html | 20 ++--- workspace/personen.html | 20 ++--- workspace/profil.html | 22 +++--- workspace/report.html | 22 +++--- workspace/scouting.html | 20 ++--- workspace/start.html | 18 ++--- workspace/startcheck.html | 22 +++--- workspace/steckbrief.html | 20 ++--- workspace/uebersicht.html | 20 ++--- workspace/wissen.html | 20 ++--- 20 files changed, 309 insertions(+), 197 deletions(-) diff --git a/workspace/assets/css/bereich.css b/workspace/assets/css/bereich.css index e1ca6f61..8678f60c 100644 --- a/workspace/assets/css/bereich.css +++ b/workspace/assets/css/bereich.css @@ -132,16 +132,75 @@ grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-bottom: 12px; } +/* ===================================================================== + SIE SIND UNTERSCHRIFTEN -- ALSO SEHEN SIE JETZT AUCH SO AUS + (screen6, 09.09.2026) + + Filipe, mit Bildschirmfoto der beiden Felder: "die sollen geiler + sein." + + WAS SIE WIRKLICH SIND, stand nur im Klassennamen: Auf einer + Unterweisung bestaetigen ZWEI Personen, dass sie sie gelesen haben + -- der Creator und seine Betreuung. Das ist kein Statusfeld, das ist + eine Gegenzeichnung. Gezeichnet waren sie aber als zwei graue + Kaesten mit abgerundeten Ecken, die man auf dem dunklen Grund kaum + sah. Zwei Rechtecke sagen "hier steht etwas". Eine Unterschriftszeile + sagt "hier fehlt jemand". + + ZWEI ZUSTAENDE, ZWEI BILDER -- und beide gab es im Code schon als + `data-da="ja"/"nein"`, nur unterschieden sie sich um einen Hauch + Gruen: + + OFFEN eine gestrichelte Linie mit einem leeren Platz darauf. + Sie WARTET sichtbar. Der Federstrich links davor deutet + an, wo man ansetzt. + DA eine durchgezogene gruene Linie, der Name darueber, und + rechts oben ein gepraegtes Siegel mit Haken -- wie ein + abgestempeltes Formular. + + GLEICHE HOEHE IN BEIDEN ZUSTAENDEN, und das ist keine Kosmetik: Die + beiden Felder stehen nebeneinander in einem Raster. Waere das + unterschriebene hoeher, spraenge die Karte in dem Moment, in dem + jemand unterschreibt -- und zwar unter dem Finger dessen, der gerade + auf den Knopf gedrueckt hat. + + KEINE ZWEITE FASE. Die Karte drumherum (`.unterweisung`) hat schon + eine aus der Modulliste. Eine abgeschraegte Ecke IN einer + abgeschraegten Ecke liest sich als Fehler, nicht als Absicht. Das + Feld traegt deshalb die andere Formensprache des Hauses: die Linie. + ================================================================== */ .unterschrift { - display: grid; gap: 2px; - padding: 9px 12px; - border: 1px solid var(--rand); border-radius: 8px; - background: rgba(0, 0, 0, .18); + position: relative; + display: grid; gap: 3px; + padding: 9px 12px 11px 15px; + border: 0; + border-radius: 0; + background: linear-gradient(100deg, rgba(255, 255, 255, .035), transparent 60%); } +/* Der Federstrich links: ein kurzer senkrechter Anstrich, der zeigt, + wo eine Unterschrift beginnt. Offen ist er blass, gesetzt traegt er + das Gruen der Bestaetigung. */ +.unterschrift::before { + content: ""; + position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; + background: rgba(150, 186, 220, .22); + transition: background .18s ease; +} +/* Die Zeile selbst -- unter der Angabe, nicht um sie herum. */ +.unterschrift::after { + content: ""; + position: absolute; left: 15px; right: 12px; bottom: 6px; height: 0; + border-bottom: 1px dashed rgba(150, 186, 220, .30); +} + .unterschrift[data-da="ja"] { - border-color: rgba(80, 167, 130, .32); - background: rgba(80, 167, 130, .07); + background: linear-gradient(100deg, rgba(95, 201, 154, .11), transparent 62%); } +.unterschrift[data-da="ja"]::before { background: rgba(95, 201, 154, .8); } +.unterschrift[data-da="ja"]::after { + border-bottom: 1px solid rgba(95, 201, 154, .55); +} + .unterschrift__wer { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-still); @@ -149,6 +208,59 @@ .unterschrift__wann { font-size: .84rem; color: var(--text); } .unterschrift[data-da="nein"] .unterschrift__wann { color: var(--text-still); font-style: italic; } +/* DAS SIEGEL. Es sitzt in der oberen rechten Ecke des Feldes und ist + nur da, wenn wirklich unterschrieben wurde. + + Gebaut aus zwei Radialverlaeufen und einem Haken als Maske -- kein + Element, kein Bild, kein Zeichensatz. Ein Zeichensatz-Haken (✓) sieht + in jeder Schrift anders aus und faellt weg, wenn eine fehlt; ein + `mask-image` mit einem SVG-Pfad sieht ueberall gleich aus. + + `content: ""` auf einem dritten Pseudoelement geht nicht -- es gibt + nur zwei. Deshalb haengt es am Wer-Text, der ohnehin oben steht. */ +.unterschrift[data-da="ja"] .unterschrift__wer { position: relative; } +.unterschrift[data-da="ja"] .unterschrift__wer::after { + content: ""; + /* INNERHALB des Feldes, nicht daneben. Der erste Anlauf schob es mit + `translate(100%)` ueber die rechte Kante hinaus -- bei der breiten + Ansicht sah das gut aus, auf einem schmalen Feld waere es aus der + Karte gelaufen. Ein Siegel gehoert auf das Blatt, nicht daneben. */ + position: absolute; right: 0; top: 50%; + transform: translateY(-50%); + width: 15px; height: 15px; border-radius: 50%; + background: + radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .2), transparent 60%), + radial-gradient(circle at 50% 50%, rgba(95, 201, 154, .3) 55%, rgba(10, 24, 19, .95) 100%); + box-shadow: + inset 0 0 0 1px rgba(95, 201, 154, .6), + inset 0 1px 2px -1px rgba(255, 255, 255, .25); +} +/* DER HAKEN IM SIEGEL. Als Maske ueber einer hellgruenen Flaeche -- + kein Zeichensatz-Haken (der sieht in jeder Schrift anders aus und + faellt weg, wenn eine fehlt) und kein Bild (eine Datei mehr fuer + fuenfzehn Pixel). + + Er liegt auf `::before` desselben Elements, weil es nur zwei + Pseudoelemente je Element gibt und `::after` schon die Muenze + traegt. Beide sind absolut gesetzt und liegen deshalb genau + uebereinander. */ +.unterschrift[data-da="ja"] .unterschrift__wer::before { + content: ""; + position: absolute; right: 0; top: 50%; + transform: translateY(-50%); + width: 15px; height: 15px; + z-index: 1; + background: #a8ecc8; + -webkit-mask: center / 9px 9px no-repeat + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + mask: center / 9px 9px no-repeat + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); +} + +@media (prefers-reduced-motion: reduce) { + .unterschrift::before { transition: none; } +} + .unterweisung__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .unterweisung__fest { font-size: .82rem; color: #6fbd95; } .unterweisung__wartet { font-size: .82rem; color: #e0b45c; } diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 8828f905..18d8b482 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -14,10 +14,10 @@ - - - - + + + + @@ -217,10 +217,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index 14a35689..9cc65045 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -140,10 +140,10 @@ - - - - - + + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index 911df1d4..c93d7b1d 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -149,14 +149,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index 369c1122..856ff9b2 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -82,11 +82,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index 9c977719..81966cbe 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -14,17 +14,17 @@ - - + + - - - + + + @@ -160,10 +160,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index 9647993a..c94317a3 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -172,12 +172,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index a3bcd90f..c90b0f12 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -101,10 +101,10 @@ - - - - - + + + + + diff --git a/workspace/index.html b/workspace/index.html index 15e32939..554c078d 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -32,7 +32,7 @@ - + @@ -382,6 +382,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index 60a8887b..bbb0a208 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -340,11 +340,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index 40f00e2d..1ddbc978 100644 --- a/workspace/leistung.html +++ b/workspace/leistung.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -217,10 +217,10 @@ - - - - - + + + + + diff --git a/workspace/personen.html b/workspace/personen.html index 90a22fc6..1166db55 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -305,10 +305,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index f0548a1f..1985bd9f 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -207,11 +207,11 @@ - - - - - - + + + + + + diff --git a/workspace/report.html b/workspace/report.html index 36a99ae7..d37102c7 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -99,11 +99,11 @@ - - - - - - + + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index 6cc2957b..a0464d9e 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -132,10 +132,10 @@ - - - - - + + + + + diff --git a/workspace/start.html b/workspace/start.html index 8a853ac9..86177363 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -14,12 +14,12 @@ - - + + - - + + @@ -522,10 +522,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 21edd87e..27b3fd9a 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -78,11 +78,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index 72db194a..125ebbd9 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -119,10 +119,10 @@ - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index ff2ad726..d76f4146 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -14,13 +14,13 @@ - - + + - - - + + + @@ -142,11 +142,11 @@ - + - - - - + + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index e1037d2b..13f276ad 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -183,10 +183,10 @@ - - - - - + + + + +