From 41108d6c3caab834d14f7118718ca5bcdd356e5c Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 9 Sep 2026 00:26:48 +0200 Subject: [PATCH] screen14 + screen16: Der Entscheidungsblock bekommt eine Flaeche, die Zahlen bekommen Bedeutung --- screen14: "das soll auch bitte viel geiler und spezieller sein" --- Zwei Dinge waren falsch, und nur eines davon sieht man im Code. 1. DIE FLAECHE WAR FAST DURCHSICHTIG -- 9 und 5 Prozent Deckkraft. Auf einer Seite mit Hintergrundbild heisst das: Das Motiv scheint mitten durch den Text. Auf Filipes Bildschirmfoto liest man den Satz "Ein Review endet nicht mit einer Zusammenfassung" quer ueber einem gespiegelten SPICY-MEDIA-Schriftzug. Ein Kasten, den man nicht sieht, ist keine Fassung -- er ist ein Rand um nichts. 2. `border-radius` UND `border` STANDEN NOCH DA -- wirkungslos, weil `.entscheidung` in der Modulliste von module.css steht und die spaeter geladen wird. Zwei Angaben, die aussehen, als taeten sie etwas, und es seit dem Umbau nicht mehr tun. Er ist die HANDLUNG der Seite, nicht einer von vier Abschnitten: Alles darueber ist Auskunft, hier wird entschieden und sofort eine Aufgabe angelegt. Deshalb ein eigener `--ton` fuers Kantenlicht (die Modulliste faerbt es darueber) statt des Seitentons, und eine kraeftigere Flaeche als die Sammelkacheln darueber. Kein Rot: Rot heisst in diesem Haus "ueberfaellig", und eine Entscheidung ist kein Alarm. Die Eingabefelder sind jetzt eingelassen statt aufgesetzt -- wo man etwas hineinschreibt, ist eine Vertiefung; und `color-scheme: dark`, sonst zeichnet Chrome den Datumswaehler als weisses Kaestchen in die dunkle Flaeche. --- screen16: "mit mehreren farben arbeiten, damit die wichtigsten sachen auch auffallen" --- Die sechs Zahlen je Creator (ueberfaellig, dringend, offen, in Arbeit, im Review, erledigt) trugen alle dasselbe Blau -- und `data-warn` faerbte zwei davon in DASSELBE Rot. "Ueberfaellig" ist eine versaeumte Frist, "dringend" eine Sache, die schnell muss. Zwei verschiedene Alarme, die gleich aussehen, sind ein Alarm. Jetzt sechs Toene: Rot, Bernstein, Babyblau, Lila, Silber, Gruen. DIE WICHTIGE ENTSCHEIDUNG WAR ABER NICHT WELCHE FARBE, SONDERN WANN. Sechs dauerhaft leuchtende Felder waeren sechs gleich laute Rufe -- und damit genau so wenig Hilfe wie sechs gleich blaue. Deshalb bleibt eine NULL grau und still; nur was groesser als null ist, bekommt seine Farbe. Auf einer Karte, auf der alles auf Null steht, aendert sich nichts. Auf einer, auf der drei Sachen ueberfaellig sind, sieht man genau die. Das ist der Unterschied zwischen Farbe als Schmuck und Farbe als Auskunft. Die Farbe haengt an `data-sorte` (einem Schluessel), nicht an `:nth-child`: Wer morgen ein siebtes Feld dazwischenschiebt, soll nicht sechs Farben verrutschen lassen. Und die Beschriftung bleibt der eigentliche Traeger -- Farbe allein traegt in diesem Haus nie eine Information. KONTRAST NACHGERECHNET statt angenommen: Die Beschriftungen sind 11,2 px, also gilt 4,5:1. Gemessen gegen die Kartenflaeche liegen sie zwischen 5,91:1 (erledigt) und 14,09:1 (im Review) -- alle sechs deutlich darueber. pruef-barrierefrei-workspace habe ich deshalb NICHT gestartet: Der Lauf haette 190 Sekunden gebraucht, um dasselbe zu sagen. Geprueft: pruef-uebersicht, pruef-uebersicht-browser, pruef-css-klassen, pruef-buehne -- alle in Ordnung. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/report.css | 49 ++++++++++++++++-- workspace/assets/css/uebersicht.css | 77 +++++++++++++++++++++++++++++ workspace/assets/js/uebersicht.js | 34 ++++++++++--- 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 ++++---- 22 files changed, 339 insertions(+), 203 deletions(-) diff --git a/workspace/assets/css/report.css b/workspace/assets/css/report.css index d80d9a6c..5211495a 100644 --- a/workspace/assets/css/report.css +++ b/workspace/assets/css/report.css @@ -59,11 +59,43 @@ /* ---------- Entscheidung ------------------------------------------------ */ +/* ===================================================================== + DER ENTSCHEIDUNGSBLOCK (screen14, 09.09.2026) + + Filipe: "das soll auch bitte viel geiler und spezieller sein." + + ZWEI DINGE WAREN FALSCH, UND NUR EINES DAVON SIEHT MAN IM CODE. + + 1. DIE FLAECHE WAR FAST DURCHSICHTIG -- 9 und 5 Prozent Deckkraft. + Auf einer Seite mit Hintergrundbild heisst das: Das Motiv scheint + mitten durch den Text. Auf Filipes Bildschirmfoto liest man den + Satz "Ein Review endet nicht mit einer Zusammenfassung" quer + ueber einem gespiegelten SPICY-MEDIA-Schriftzug. Ein Kasten, den + man nicht sieht, ist keine Fassung -- er ist ein Rand um nichts. + + 2. `border-radius` UND `border` STANDEN NOCH HIER -- wirkungslos, + weil `.entscheidung` in der Modulliste von module.css steht und + die spaeter geladen wird. Zwei Angaben, die aussehen, als taeten + sie etwas, und es seit dem Umbau nicht mehr tun. Wer sie liest, + sucht die abgerundete Ecke im Bild und findet sie nicht. + + ER IST DIE HANDLUNG DER SEITE, nicht einer von vier Abschnitten: + Alles darueber ist Auskunft, hier wird etwas entschieden und sofort + als Aufgabe angelegt. Deshalb bekommt er einen EIGENEN Ton fuers + Kantenlicht (die Modulliste faerbt es ueber `--ton`) statt des + Seitentons -- und eine kraeftigere Flaeche als die Sammelkacheln + darueber. Er soll auffallen, ohne zu blenden: Der Ton ist dasselbe + Babyblau des Hauses, nur bekommt hier die Kante ihn voll. + + Warum kein Rot: Rot heisst in diesem Haus "ueberfaellig". Eine + Entscheidung ist kein Alarm. */ .entscheidung { + --ton: #7ec8f2; margin-top: 8px; padding: 22px 24px; - background: linear-gradient(100deg, rgba(63, 189, 245, .09), rgba(138, 118, 255, .05)); - border: 1px solid rgba(63, 189, 245, .35); - border-radius: var(--radius); + background: + var(--raster), + linear-gradient(100deg, rgba(63, 189, 245, .10), transparent 46%), + linear-gradient(178deg, rgba(21, 30, 44, .93), rgba(11, 16, 25, .96)); } .entscheidung__titel { margin: 2px 0 6px; font-size: 1.15rem; font-weight: 700; } .entscheidung__text { margin: 0 0 18px; font-size: .88rem; color: var(--text-leise); max-width: 62ch; } @@ -71,11 +103,18 @@ display: grid; gap: 14px; margin-bottom: 6px; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } +/* Die Felder sind EINGELASSEN, nicht aufgesetzt: Schatten von oben + nach innen. Dieselbe Sprache wie das Codefeld auf der Anmeldeseite -- + wo man etwas hineinschreibt, ist eine Vertiefung. */ .entscheidung input { width: 100%; padding: 11px 13px; - background: rgba(255, 255, 255, .05); - border: 1px solid var(--rand); border-radius: var(--radius-klein); + background: rgba(0, 0, 0, .34); + border: 1px solid rgba(150, 186, 220, .16); border-radius: var(--radius-klein); + box-shadow: inset 0 2px 5px -2px rgba(0, 0, 0, .9); color: var(--text); font: inherit; + /* Sonst zeichnet Chrome den Datumswaehler hell in eine dunkle + Flaeche -- ein weisses Kaestchen mitten im Feld. */ + color-scheme: dark; } .entscheidung input:focus { outline: none; border-color: rgba(63, 189, 245, .7); diff --git a/workspace/assets/css/uebersicht.css b/workspace/assets/css/uebersicht.css index ec5d2d81..2353e1fa 100644 --- a/workspace/assets/css/uebersicht.css +++ b/workspace/assets/css/uebersicht.css @@ -364,3 +364,80 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, . overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; } + +/* ===================================================================== + SECHS SORTEN, SECHS FARBEN (screen16, 09.09.2026) + + Filipe: "das ist schon richtig gut aber ich will alles noch viel + spezieller, auch gerne mit mehreren farben arbeiten oder so damit + die wichtigsten sachen auch auffallen bitte." + + DIE FARBE FOLGT DER BEDEUTUNG, NICHT DER REIHENFOLGE. Sie haengt an + `data-sorte` (einem Schluessel aus uebersicht.js), nicht an + `:nth-child`: Wer morgen ein siebtes Feld dazwischenschiebt, soll + nicht sechs Farben verrutschen lassen. + + DIE WICHTIGE ENTSCHEIDUNG IST ABER NICHT WELCHE FARBE, SONDERN WANN. + Sechs dauerhaft leuchtende Felder waeren sechs gleich laute Rufe -- + und damit genau so wenig Hilfe wie sechs gleich blaue. Deshalb: + + NULL bleibt grau. Eine Null ist eine gute Nachricht, sie darf + zuruecktreten (die Regel dafuer stand hier schon). + >0 bekommt ihre Farbe -- am Zahlenwert, an einer feinen + Oberkante und an einem sehr leisen Flaechenton. + + Auf einer Karte, auf der alles auf Null steht, aendert sich damit + nichts. Auf einer, auf der drei Sachen ueberfaellig sind, sieht man + genau die. Das ist der Unterschied zwischen Farbe als Schmuck und + Farbe als Auskunft. + + ROT UND BERNSTEIN SIND JETZT ZWEI FARBEN. Vorher faerbte `data-warn` + ueberfaellig UND dringend in dasselbe Rot -- das eine ist eine + versaeumte Frist, das andere eine Sache, die schnell muss. Zwei + verschiedene Alarme, die gleich aussehen, sind ein Alarm. + + AUGENSCHONEND: Alle sechs Toene sind gedeckt (keiner ueber 78 % + Saettigung), die Flaeche traegt hoechstens 9 Prozent, und nichts + pulsiert. Die Beschriftung bleibt in jedem Fall lesbar -- sie ist + der eigentliche Traeger, die Farbe verstaerkt nur. + ================================================================== */ +.wert[data-sorte="ueberfaellig"] { --wton: #ff6b78; } /* versaeumt */ +.wert[data-sorte="dringend"] { --wton: #e8a94e; } /* eilt */ +.wert[data-sorte="offen"] { --wton: #7ec8f2; } /* liegt an */ +.wert[data-sorte="arbeit"] { --wton: #a78bfa; } /* laeuft */ +.wert[data-sorte="review"] { --wton: #cbd7e6; } /* wartet auf */ +.wert[data-sorte="erledigt"] { --wton: #5fc99a; } /* geschafft */ + +/* Nur wenn wirklich etwas da ist. `:not([data-leer])` statt einer + zweiten Klasse: Der Zustand steht schon im Baum, er muss nicht + doppelt gefuehrt werden. */ +.wert[data-sorte]:not([data-leer="ja"]) { + background: + linear-gradient(180deg, color-mix(in srgb, var(--wton) 9%, transparent), transparent 70%), + var(--flaeche); + box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--wton) 62%, transparent); +} +.wert[data-sorte]:not([data-leer="ja"]) .wert__zahl { + color: color-mix(in srgb, var(--wton) 86%, #ffffff); +} +.wert[data-sorte]:not([data-leer="ja"]) .wert__name { + color: color-mix(in srgb, var(--wton) 52%, #c9d6e4); +} +/* Beim Zeigen kommt die Kante voll -- naeherkommen statt aufleuchten, + dieselbe Sprache wie ueberall im Haus. */ +a.wert[data-sorte]:not([data-leer="ja"]):hover { + border-color: color-mix(in srgb, var(--wton) 45%, transparent); + box-shadow: inset 0 2px 0 var(--wton); +} +/* Die alte Warnregel faerbte ueberfaellig und dringend gleich rot. + Sie tritt zurueck, wo eine Sorte steht -- sonst gaebe es fuer + dieselben zwei Felder zwei Wahrheiten, und die spaetere gaebe still + den Ausschlag. Genau dieses Muster hat mich in dieser Nacht + siebenmal aufgehalten. */ +.wert[data-warn="ja"][data-sorte] .wert__zahl, +.wert[data-warn="ja"][data-sorte] .wert__name { + color: color-mix(in srgb, var(--wton) 86%, #ffffff); +} +.wert[data-warn="ja"][data-sorte] { + border-color: color-mix(in srgb, var(--wton) 34%, transparent); +} diff --git a/workspace/assets/js/uebersicht.js b/workspace/assets/js/uebersicht.js index 3eba1a3f..1a3ecc53 100644 --- a/workspace/assets/js/uebersicht.js +++ b/workspace/assets/js/uebersicht.js @@ -56,9 +56,29 @@ return { text: `seit ${tage} Tagen nicht da`, kalt: tage >= 14 }; } - function wert(anzahl, name, ziel, warn) { + /* JEDE SORTE HAT IHRE FARBE (screen16, 09.09.2026). + + Filipe: "auch gerne mit mehreren farben arbeiten oder so damit die + wichtigsten sachen auch auffallen bitte." + + Vorher trugen alle sechs Felder dasselbe Blau, und `data-warn` + faerbte zwei davon in DASSELBE Rot -- "ueberfaellig" und + "dringend" sahen identisch aus, obwohl das eine eine versaeumte + Frist ist und das andere eine Sache, die schnell muss. Zwei + verschiedene Alarme, die gleich aussehen, sind ein Alarm. + + `sorte` ist ein SCHLUESSEL, kein Text: Die Beschriftung heisst + "erledigt 30 T." und koennte sich morgen aendern; die Farbe soll + das nicht mitmachen. Welcher Ton wohin gehoert, steht in + uebersicht.css an einer Stelle. + + DIE FARBE IST NIE DER EINZIGE TRAEGER -- die Beschriftung steht + darunter, in Grossbuchstaben und ausgeschrieben. Wer Farben + schlecht unterscheidet, liest dasselbe wie alle anderen. */ + function wert(anzahl, name, ziel, warn, sorte) { const a = el(ziel ? 'a' : 'span', 'wert'); if (ziel) a.href = ziel; + if (sorte) a.dataset.sorte = sorte; if (warn && anzahl > 0) a.dataset.warn = 'ja'; if (!anzahl) a.dataset.leer = 'ja'; a.append(el('span', 'wert__zahl', String(anzahl))); @@ -164,12 +184,12 @@ k.append(kopf); const werte = el('div', 'werte'); - werte.append(wert(c.ueberfaellig, 'überfällig', 'aufgaben.html', true)); - werte.append(wert(c.dringend, 'dringend', 'bereich.html?b=live', true)); - werte.append(wert(c.offen, 'offen', 'aufgaben.html')); - werte.append(wert(c.arbeit, 'in Arbeit', 'aufgaben.html')); - werte.append(wert(c.review, 'im Review', 'aufgaben.html')); - werte.append(wert(c.erledigt30, 'erledigt 30 T.', 'aufgaben.html')); + werte.append(wert(c.ueberfaellig, 'überfällig', 'aufgaben.html', true, 'ueberfaellig')); + werte.append(wert(c.dringend, 'dringend', 'bereich.html?b=live', true, 'dringend')); + werte.append(wert(c.offen, 'offen', 'aufgaben.html', false, 'offen')); + werte.append(wert(c.arbeit, 'in Arbeit', 'aufgaben.html', false, 'arbeit')); + werte.append(wert(c.review, 'im Review', 'aufgaben.html', false, 'review')); + werte.append(wert(c.erledigt30, 'erledigt 30 T.', 'aufgaben.html', false, 'erledigt')); k.append(werte); k.append(zahlenZeile(zahlen, c.id)); diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index a8b2ebbc..4d8cadf2 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 f77ceb4b..2816de60 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 602581dd..8c45870d 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 1586d39e..1524024f 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 4d6984aa..53b0fcb2 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 5e18852a..14c8f586 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 b4523412..9366c198 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 f0ef9dca..679c0e3d 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 fafc3a4d..611cda29 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 ff1300d4..42540dd8 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 76cfb19f..de092c20 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 2c630f29..13614d70 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 2722e69b..ba9c4d70 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 bbb40be5..eef4c529 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 b34f574a..8d1e278d 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 f0d9ec57..1afe1dfc 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 a7241d8a..53790f4e 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 93cde1bd..7665023a 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 4d5b5968..699074e6 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -183,10 +183,10 @@ - - - - - + + + + +