From af40b79a8cd239ca3c69a1277102ac649e2f12fa Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 9 Sep 2026 00:34:13 +0200 Subject: [PATCH] screen30 + screen32: Der leere Zustand wird ein Siegel, die Kennung ein Ausweis --- Und ein Fund unterwegs: Cigdems Kennung war kaputt --- `--rollen-ton` faerbt Kennung und Rollenplakette in der Kopfleiste. Die Liste dahinter kannte admin, manager, scout und creator -- SPICY MEDIA nicht. Die Rolle kam am 07.09. dazu, diese Liste ist nicht mitgegangen. Was dabei passiert, ist schlimmer als eine falsche Farbe: Die Variable war GAR NICHT gesetzt, und `color-mix(in srgb, var(--rollen-ton) 62%, transparent)` ist mit einer leeren Variablen ungueltig -- der Browser wirft die ganze Deklaration weg. Nachgemessen im Browser: Hintergrund `none`, Rand `rgb(234,243,255)` (also currentColor, weil auch die Randfarbe fiel), Plakette grau statt rot. Cigdems Kennung war ein weisser Kasten in einer roten Leiste. DESHALB STEHT JETZT EINE VORGABE DAVOR, und die ist wichtiger als der nachgetragene Eintrag: Wer die naechste Rolle anlegt und diese Liste wieder vergisst, bekommt eine Kennung in der Hausfarbe -- nicht mehr eine kaputte. Ein fehlender Eintrag darf zu etwas Schlichterem fuehren, nie zu etwas Ungueltigem. --- screen30: der leere Zustand --- "das muss auch viel spezieller sein und auch nicht wie alle anderen kacheln da sondern wirklich krasser und geiler aber so dass es vom aussehen trotzdem noch zu seite passt." Das Gruen lief als Verlauf nach 60 Prozent ins Nichts, dahinter das Hintergrundbild -- auf Filipes Bild scheint ein Chili mitten durch die gute Nachricht. Eine Fassung, die nur auf der linken Haelfte existiert, ist keine. "Nicht wie alle anderen Kacheln" ist inhaltlich richtig: Alles andere auf dieser Seite ist eine AUFGABE, etwas, das man noch tun muss. Das hier ist die Quittung, dass nichts mehr offen ist. Es waere falsch, wenn es wie eine weitere Aufgabe aussaehe. Also die Form eines SIEGELS: die Fase sitzt rechts unten statt links oben -- spiegelverkehrt zur Kachelsprache --, links eine breite gruene Lichtschiene wie ein Stempelrand, und der Haken ist eine gepraegte Muenze statt eines Kreises mit einem Strich darin. Die Flaeche ist deckend; eine gute Nachricht, durch die man das Hintergrundbild sieht, liest sich wie ein Platzhalter. Leise bleibt es trotzdem: gedecktes Gruen, hoechstens 14 Prozent Flaeche, nichts pulsiert. Wer nichts offen hat, braucht kein Feuerwerk. Kontrast gemessen: 14,47:1 (fett) und 7,39:1 (still). --- screen32: die Kennung in der Kopfleiste --- "das sieht schon richtig gut aus aber ich will dass es noch krasser und spezieller aussieht." Sie sass als flaches, abgerundetes Quadrat zwischen vier Knoepfen und sah damit aus wie ein fuenfter Knopf, der sich nicht druecken laesst. Sie ist aber etwas anderes: Sie sagt, WER hier ist, nicht, was man tun kann. Jetzt die Fase des Hauses statt der Rundung (sie gehoert zur Seite, nicht zur Knopfreihe), ein gepraegter Ring statt eines gezeichneten Randes (Lichtkante oben, Schattenkante unten) und ein sehr leiser Schein in der Rollenfarbe. KEINE GROESSENAENDERUNG -- 28x28 bleibt. Die Kopfleiste ist am 06.09.2026 schon einmal an einem zusaetzlichen Element zerbrochen; was hier waechst, drueckt dort etwas heraus. Geprueft: pruef-workspace-seiten (18 Seiten, Ueberstand ueberall 0 px), pruef-handy, pruef-start-ansicht, pruef-css-klassen -- alle in Ordnung. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/start.css | 149 +++++++++++++++++++++++++++++---- 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, 322 insertions(+), 209 deletions(-) diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index 6d70d97b..4e8dbe18 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -1289,24 +1289,77 @@ body.start > main { position: relative; z-index: 1; } /* Der leere Zustand ist kein Fehler, sondern das Ziel -- deshalb ein ruhiges Gruen statt gestrichelter Leere. Gedeckt gehalten, kein Signalgruen: Es soll freuen, nicht blenden. */ +/* ===================================================================== + ER IST EIN SIEGEL, KEINE KACHEL (screen30, 09.09.2026) + + Filipe: "das muss auch viel spezieller sein und auch nicht wie alle + anderen kacheln da sondern wirklich krasser und geiler aber so dass + es vom aussehen trotzdem noch zu seite passt." + + WAS VORHER SCHIEFLIEF: Das Gruen lief als Verlauf nach 60 Prozent + ins Nichts, und dahinter liegt das Hintergrundbild der Seite. Auf + Filipes Bildschirmfoto ist von dem Kasten fast nichts zu sehen -- + ein Chili scheint mitten durch die gute Nachricht. Eine Fassung, die + nur auf der linken Haelfte existiert, ist keine. + + "NICHT WIE ALLE ANDEREN KACHELN" IST DIE EIGENTLICHE ANSAGE, und sie + ist hier inhaltlich richtig: Alles andere auf dieser Seite ist eine + AUFGABE -- etwas, das man noch tun muss. Das hier ist das Gegenteil, + die Quittung dafuer, dass nichts mehr offen ist. Es waere falsch, + wenn es wie eine weitere Aufgabe aussaehe. + + Deshalb die Form eines SIEGELS statt einer Kachel: + * Die Fase sitzt RECHTS unten statt links oben -- spiegelverkehrt + zur Kachelsprache des Hauses. Man erkennt sofort, dass das etwas + anderes ist, ohne dass es fremd wirkt. + * Eine breite gruene Lichtschiene links, wie ein Stempelrand. + * Der Haken ist eine gepraegte Muenze: Ring, Woelbung, Schatten -- + kein Kreis mit einem Strich darin. + * Die Flaeche ist DECKEND. Eine gute Nachricht, durch die man das + Hintergrundbild sieht, liest sich wie ein Platzhalter. + + AUGENSCHONEND UND LEISE: Es soll freuen, nicht feiern. Kein + Signalgruen, kein Puls, keine Bewegung -- das Gruen liegt bei einem + gedeckten #5fc99a, dem Scout-Ton des Hauses, und traegt hoechstens + 14 Prozent Flaeche. Wer nichts offen hat, braucht kein Feuerwerk, + sondern eine ruhige Bestaetigung. */ .zahlen-leer { - display: flex; align-items: center; gap: 13px; - margin: 0; padding: 14px 17px; + position: relative; + display: flex; align-items: center; gap: 14px; + margin: 0; padding: 15px 18px 15px 17px; font-size: .9rem; color: var(--text); - border: 1px solid rgba(80, 167, 130, .28); - border-radius: var(--radius-klein); - background: linear-gradient(90deg, rgba(80, 167, 130, .1), transparent 60%); + border: 0; + border-radius: 0; + /* Spiegelverkehrt zur Modulliste: dort oben links, hier unten rechts. */ + clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); + background: + linear-gradient(90deg, rgba(95, 201, 154, .14), rgba(95, 201, 154, .04) 38%, transparent 66%), + linear-gradient(178deg, rgba(19, 30, 26, .94), rgba(10, 17, 15, .96)); + box-shadow: + inset 3px 0 0 rgba(95, 201, 154, .75), + inset 0 1px 0 rgba(255, 255, 255, .06), + 0 10px 24px -18px rgba(0, 0, 0, .9); } +/* Der Haken ist eine gepraegte Muenze: ein Ring aussen, eine Woelbung + von oben, ein Schatten darunter. Der Unterschied zu einem Kreis mit + einem Strich ist klein zu beschreiben und gross zu sehen. */ .zahlen-leer__haken { flex: none; display: grid; place-items: center; - width: 30px; height: 30px; border-radius: 50%; - border: 1px solid rgba(80, 167, 130, .38); - background: rgba(80, 167, 130, .14); + width: 32px; height: 32px; border-radius: 50%; + border: 0; + background: + radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .16), transparent 58%), + radial-gradient(circle at 50% 50%, rgba(95, 201, 154, .22) 58%, rgba(12, 26, 21, .95) 100%); + box-shadow: + inset 0 0 0 1px rgba(95, 201, 154, .55), + inset 0 2px 4px -2px rgba(255, 255, 255, .22), + 0 2px 6px -3px rgba(0, 0, 0, .9); } .zahlen-leer__haken svg { - width: 16px; height: 16px; - fill: none; stroke: #6fbd95; stroke-width: 2; + width: 17px; height: 17px; + fill: none; stroke: #8fe0bb; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; + filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); } /* Pflicht, sobald hier ein display steht: Das display der Klasse ist staerker als das hidden des Browsers -- ohne diese Zeile stuende der @@ -1813,6 +1866,34 @@ body.start > main { position: relative; z-index: 1; } display: flex; align-items: center; gap: 9px; max-width: none; overflow: visible; } +/* DIE KENNUNG IST EIN AUSWEIS, KEIN FARBFELD (screen32, 09.09.2026). + + Filipe: "das sieht schon richtig gut aus aber ich will dass es noch + krasser und spezieller aussieht, noch viel geiler bitte." + + Sie sass als flaches, abgerundetes Quadrat zwischen vier Knoepfen -- + und sah damit aus wie ein fuenfter Knopf, der sich nicht druecken + laesst. Sie ist aber etwas anderes: Sie sagt, WER hier ist, und + nicht, was man tun kann. + + Drei Aenderungen, jede mit einem Grund: + * DIE FASE STATT DER RUNDUNG -- dieselbe abgeschraegte Ecke wie + jede Kachel im Haus. Sie gehoert damit sichtbar zur Seite und + nicht zur Knopfreihe. + * EIN GEPRAEGTER RAND statt eines gezeichneten: Lichtkante oben, + Schattenkante unten, ein feiner Ring in der Rollenfarbe. Ein + `border` sieht aufgemalt aus, ein Ring aus Schatten sieht + gefertigt aus. + * EIN SCHEIN IN DER ROLLENFARBE nach aussen, sehr leise (18 + Prozent). Er hebt die Kennung aus der Reihe, ohne zu leuchten -- + dieselbe Entscheidung wie ueberall: naeherkommen statt + aufleuchten. + + KEINE GROESSENAENDERUNG. 28x28 bleibt, und das ist Absicht: Die + Kopfleiste ist am 06.09.2026 schon einmal an einem zusaetzlichen + Element zerbrochen, und bei 412 px Breite lag der Sicht-Umschalter + quer ueber dem Chat-Knopf. Was hier waechst, drueckt dort etwas + heraus. */ .wer__zeichen { flex: none; /* overflow: hidden ist hier PFLICHT, nicht Kosmetik: Darin liegt das @@ -1823,13 +1904,23 @@ body.start > main { position: relative; z-index: 1; } overflow: hidden; position: relative; display: grid; place-items: center; - width: 28px; height: 28px; border-radius: 9px; - font-size: .8rem; font-weight: 700; color: #eaf3ff; - background: linear-gradient(150deg, - color-mix(in srgb, var(--rollen-ton) 62%, transparent), - color-mix(in srgb, var(--rollen-ton) 24%, transparent)); - border: 1px solid color-mix(in srgb, var(--rollen-ton) 55%, transparent); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); + width: 28px; height: 28px; + border-radius: 0; + clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); + font-size: .8rem; font-weight: 700; color: #f2f8ff; + background: + linear-gradient(150deg, + color-mix(in srgb, var(--rollen-ton) 72%, transparent), + color-mix(in srgb, var(--rollen-ton) 28%, transparent) 62%, + color-mix(in srgb, var(--rollen-ton) 14%, transparent)), + linear-gradient(180deg, #121a26, #0a0f18); + border: 0; + box-shadow: + inset 0 0 0 1px color-mix(in srgb, var(--rollen-ton) 62%, transparent), + inset 0 1.5px 0 rgba(255, 255, 255, .26), + inset 0 -1.5px 0 rgba(0, 0, 0, .5), + 0 0 10px -3px color-mix(in srgb, var(--rollen-ton) 18%, transparent); + text-shadow: 0 1px 2px rgba(0, 0, 0, .7); } /* Das Profilbild in der Kopfleiste. @@ -1864,7 +1955,29 @@ body.start > main { position: relative; z-index: 1; } background: color-mix(in srgb, var(--rollen-ton) 15%, transparent); border: 1px solid color-mix(in srgb, var(--rollen-ton) 38%, transparent); } -/* Eine Farbe je Rolle -- dieselbe Sprache wie in der Personenliste. */ +/* Eine Farbe je Rolle -- dieselbe Sprache wie in der Personenliste. + + SPICY MEDIA HAT HIER GEFEHLT (behoben 09.09.2026, gemessen). + + Die Rolle kam am 07.09. dazu; DIESE Liste ist nicht mitgegangen. Was + dabei passiert, ist schlimmer als eine falsche Farbe: `--rollen-ton` + war fuer sie GAR NICHT gesetzt, und `color-mix(in srgb, + var(--rollen-ton) 62%, transparent)` ist mit einer leeren Variablen + ungueltig -- der Browser wirft die ganze Deklaration weg. Nachgemessen + im Browser: Hintergrund `none`, Rand `rgb(234,243,255)` (also + `currentColor`, weil auch die Randfarbe fiel), Plakette grau statt + rot. Cigdems Kennung in der Kopfleiste war ein weisser Kasten. + + DESHALB STEHT JETZT EINE VORGABE DAVOR. Sie ist wichtiger als der + fehlende Eintrag: Wer die naechste Rolle anlegt und diese Liste + wieder vergisst, bekommt dann eine Kennung in der Hausfarbe -- + nicht mehr eine kaputte. Ein fehlender Eintrag darf zu etwas + Schlichterem fuehren, nie zu etwas Ungueltigem. + + (Dieselbe Sorte Fehler wie `--rton` am 08.09.: eine zweite Liste + fuer dieselbe Sache, und nur eine umgestellt.) */ +.wer { --rollen-ton: var(--akzent); } +.wer[data-rolle="spicy"] { --rollen-ton: var(--spicy-haupt); } .wer[data-rolle="admin"] { --rollen-ton: var(--dogi-haupt); } .wer[data-rolle="manager"] { --rollen-ton: var(--manager-haupt); } .wer[data-rolle="scout"] { --rollen-ton: var(--scout-haupt); } diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 4d8cadf2..d37625d8 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 2816de60..86543fb0 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 8c45870d..9f8c6abd 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 1524024f..21ebec86 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 53b0fcb2..4488de01 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 14c8f586..3f44bb0f 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 9366c198..e1fe3ba1 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 679c0e3d..82f37348 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 611cda29..096dd66e 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -331,11 +331,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index 42540dd8..1a596b33 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 de092c20..317daf3c 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 13614d70..ed2d6527 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 ba9c4d70..044cc12e 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 eef4c529..feaf3f72 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 8d1e278d..328bed48 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 1afe1dfc..86509f54 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 53790f4e..02aa3e80 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 7665023a..b59c5644 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 699074e6..83bc7be5 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -183,10 +183,10 @@ - - - - - + + + + +