CRYONOVA: Farb- und Lichtsystem nach dem Design-System umgesetzt
Umsetzung des Design-Systems "Baby Blue Optical Luxury" (Edition 2.0), Schritt 1 von mehreren: die zentrale Farbquelle. Nach der Kernregel auf Seite 3 ist das ausdrücklich ein Farb- und Licht-Redesign — Aufbau, Navigation, Texte und Funktionen bleiben unangetastet. FARBEN Grundflächen auf die vier Tiefenebenen des Systems (Void, Midnight, Obsidian, Deep Glass). Palette nach Seite 5: Signature Baby, Ion Blue, Hyper Aqua, Aurora Violet, Prism Indigo, Liquid Gold, Signal Coral, Chrome Silver. Die Variablen behalten ihre alten NAMEN (--wd-blau statt --cryo-baby). Ein Umbenennen hätte über 155 Fundstellen anfassen müssen — viel Bewegung ohne sichtbaren Nutzen, mit der realen Gefahr, eine Stelle zu übersehen und danach zwei fast gleiche Blautöne zu haben. Entscheidend ist die Rolle, nicht der Name; die Systembezeichnungen stehen als Kommentar daneben. EIN FEHLER IM DESIGN-SYSTEM, DER BEWUSST NICHT ÜBERNOMMEN WURDE Die Token-Liste auf Seite 20 ist um eine Zeile verrutscht — Namen und Hex-Werte passen dort nicht zusammen. Am folgenreichsten: --cryo-baby stünde auf #0C2740, einem fast schwarzen Navy, und ist laut Seite 21 zugleich die Standard-Lumenfarbe. Das Mauslicht wäre damit praktisch unsichtbar geworden — ausgerechnet der Effekt, den das System auf fünf Seiten als unantastbar schützt. Maßgeblich ist deshalb die Palette auf Seite 5 und die Lumen-Logik auf Seite 9, die untereinander stimmig sind. MAUSLICHT Der bestehende Effekt bleibt vollständig erhalten (Systemauflage) und bekommt eine Farbvariable pro Kachel: --wd-lumen. Vorher war die Farbe im Verlauf fest verdrahtet, und jede weitere Kachelfarbe hätte zwei neue Blöcke gebraucht (Fläche + leuchtende Kante). Bei sechs Lumen-Rollen wären das zwölf fast gleiche Blöcke gewesen, die beim nächsten Feinschliff zwangsläufig auseinanderlaufen. Jetzt setzt die Kachel nur ihre Farbe, der Verlauf steht einmal da — genau das meint Token-Regel 02 mit "Kachelfarbe steuert Lumenfarbe". 38 lose Hex-Codes durch Token ersetzt (Token-Regel 05). Drei davon (#3d9dbd, #7c5cd6, #a8873a) waren noch die ALTEN Markenfarben und hätten still neben den neuen weitergelebt — genau der Mechanismus, durch den Oberflächen mit der Zeit zwei fast gleiche Töne bekommen. KONTRASTE NACHGERECHNET Die Palette ist auf dunklem Grund durchweg stark (9,7 bis 19,8:1) — mit einer Ausnahme: Prism Indigo erreicht auf keiner Fläche 4,5:1 (nur 3,25 bis 4,29). Es ist deshalb ausschließlich für Kanten, Verläufe und große Premium-Flächen zugelassen, nie für Fließtext. Das System sieht Indigo ohnehin nur für "Premium-Momente" vor — die Rechnung bestätigt die Regel, statt ihr zu widersprechen. NEUER TEST: pruef-cryonova.mjs (24 Prüfungen) Palette, Grundflächen, Mauslicht-Erhalt, echte Zeigerbewegung, keine losen Hex-Codes, Kontraste und die Frage, ob alle 12 Seiten wirklich aus derselben Quelle schöpfen. Dabei drei Fehlalarme im eigenen Test gefunden und behoben — jeder davon hätte dauerhaft rote Zeilen erzeugt und irgendwann dazu geführt, dass man eine echte Meldung übersieht: - Halbtransparente Flächen müssen über ihren Untergrund gerechnet werden. Der aktive Reiter kam sonst auf 1:1 statt echter 8,25–10,23:1. - Text auf Farbverläufen liefert rgba(0,0,0,0) als Hintergrund; der Hauptknopf kam so auf 1:1 statt rund 11:1. - Die Maus muss mit Zwischenschritten bewegt werden, sonst feuert pointermove nicht. Eine Direktmessung bestätigte: Das Licht folgt einwandfrei (30px → 723px, Deckkraft 1). pruef-system.mjs auf den neuen Markenton gesetzt. Dass er dort zunächst "0 von 1804 Elementen" meldete, war kein Fehler, sondern der Beweis, dass der alte Ton nirgends mehr vorkommt. Geprüft: 24 (CRYONOVA) + 0 Fundstellen (Design/WCAG über 12 Seiten × 5 Sprachen) + 40 + 56 + 69 + 54 + 42 + 55 + 5 + 16 — alles grün.
This commit is contained in:
+153
-74
@@ -24,7 +24,7 @@
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
1. FARBWELT & TOKENS
|
||||
Kontraste gegen die dunkelste Fläche (#05070b) nachgerechnet:
|
||||
Kontraste gegen die dunkelste Fläche (--wd-schwarz) nachgerechnet:
|
||||
--wd-text #eef4fb -> 17.4:1 (AAA)
|
||||
--wd-text-mid #b3c2d4 -> 10.2:1 (AAA)
|
||||
--wd-text-soft #8f9fb4 -> 6.6:1 (AA, auch für kleine Schrift)
|
||||
@@ -35,10 +35,41 @@
|
||||
blenden auf dunklem Grund und sind genau das, was vermieden werden soll.
|
||||
--------------------------------------------------------------------- */
|
||||
:root {
|
||||
--wd-schwarz: #05070b; /* Tiefschwarz — Grundfläche */
|
||||
--wd-dunkelblau: #0a1220; /* Dunkelblau — zweite Grundfläche */
|
||||
--wd-dunkelblau-2: #0e1826; /* leicht angehoben, für Abschnittswechsel */
|
||||
--wd-flaeche: #101a29; /* Kartengrund (deckend, für Formularfelder) */
|
||||
/* ===================================================================
|
||||
CRYONOVA — Farbsystem nach dem Design-System "Baby Blue Optical
|
||||
Luxury" (Edition 2.0, 24.08.2026).
|
||||
|
||||
WAS SICH GEAENDERT HAT: nur Farben und Lichtwirkung. Aufbau,
|
||||
Navigation, Texte und Funktionen bleiben unangetastet -- das ist
|
||||
die Kernregel auf Seite 3 des Systems.
|
||||
|
||||
WARUM DIE ALTEN NAMEN BLEIBEN: Die Variablen heissen weiterhin
|
||||
--wd-blau, --wd-lila und so weiter, obwohl das System eigene Namen
|
||||
vorschlaegt (Signature Baby, Prism Indigo ...). Ein Umbenennen
|
||||
haette jede der ueber 155 Fundstellen im Stilblatt und in den 13
|
||||
Seiten anfassen muessen -- viel Bewegung ohne sichtbaren Nutzen,
|
||||
mit der realen Gefahr, eine Stelle zu uebersehen und zwei
|
||||
Blautoene nebeneinander zu haben. Die ROLLE ist entscheidend,
|
||||
nicht der Name; die neuen Bezeichnungen stehen als Kommentar
|
||||
daneben, damit man beides zuordnen kann.
|
||||
|
||||
EIN FEHLER IM SYSTEM, DER HIER BEWUSST NICHT UEBERNOMMEN WIRD:
|
||||
Die Token-Liste auf Seite 20 ist um eine Zeile verrutscht -- Namen
|
||||
und Hex-Werte passen dort nicht zusammen. Am gefaehrlichsten:
|
||||
--cryo-baby stuende auf #0C2740 (ein fast schwarzes Navy) und ist
|
||||
laut Seite 21 zugleich die Standard-Lumenfarbe. Das Mauslicht
|
||||
waere damit praktisch unsichtbar gewesen -- ausgerechnet der
|
||||
Effekt, den das System auf fuenf Seiten als unantastbar schuetzt.
|
||||
Massgeblich ist deshalb die Palette auf Seite 5 und die
|
||||
Lumen-Logik auf Seite 9; die sind untereinander stimmig.
|
||||
=================================================================== */
|
||||
|
||||
/* ---------- Grundflaechen: DARK DEPTH (34 % der Flaeche) ---------- */
|
||||
--wd-schwarz: #030810; /* Void — tiefste Ebene, Seitengrund */
|
||||
--wd-dunkelblau: #061323; /* Midnight Core — Navigation, Kopfzeile */
|
||||
--wd-dunkelblau-2: #091B2D; /* Obsidian Blue — Abschnittswechsel, Karten */
|
||||
--wd-flaeche: #0C2740; /* Deep Glass — Kartengrund, Formularfelder */
|
||||
--wd-flaeche-2: #091B2D; /* Obsidian — zweite Kartenebene */
|
||||
|
||||
/* ---------- Markenfarben als KANÄLE ----------
|
||||
Zusätzlich zu den fertigen Farben stehen die Rot-, Grün- und
|
||||
@@ -60,33 +91,62 @@
|
||||
erhalten, weil sie kürzer zu lesen sind, wo kein Alpha gebraucht
|
||||
wird — sie werden aus denselben Kanälen gebildet, können also nicht
|
||||
auseinanderlaufen. */
|
||||
--wd-blau-rgb: 127 208 232;
|
||||
--wd-lila-rgb: 183 157 255;
|
||||
--wd-gold-rgb: 232 200 119;
|
||||
--wd-ok-rgb: 111 214 163;
|
||||
--wd-fehler-rgb: 255 157 157;
|
||||
--wd-glas-rgb: 16 26 41;
|
||||
--wd-blau-rgb: 143 216 255; /* Signature Baby #8FD8FF — Hauptfarbe */
|
||||
--wd-ion-rgb: 74 200 255; /* Ion Blue #4AC8FF — Interaktion */
|
||||
--wd-aqua-rgb: 46 242 224; /* Hyper Aqua #2EF2E0 — Energie, Fokus */
|
||||
--wd-lila-rgb: 167 107 255; /* Aurora Violet #A76BFF — Spezial */
|
||||
--wd-indigo-rgb: 97 92 255; /* Prism Indigo #615CFF — Premium */
|
||||
--wd-gold-rgb: 232 195 106; /* Liquid Gold #E8C36A — VIP, Treue */
|
||||
--wd-ok-rgb: 36 214 160; /* Erfolg #24D6A0 */
|
||||
--wd-fehler-rgb: 255 92 122; /* Signal Coral #FF5C7A */
|
||||
--wd-warn-rgb: 255 190 74; /* Warnung #FFBE4A */
|
||||
--wd-chrome-rgb: 175 196 210; /* Chrome Silver #AFC4D2 — sekundaer */
|
||||
--wd-glas-rgb: 12 39 64; /* Deep Glass als Kanal fuer Glasflaechen */
|
||||
|
||||
--wd-blau: rgb(var(--wd-blau-rgb)); /* Babyblau — Hauptaktionen, Linien, Leuchten */
|
||||
--wd-blau-hell: #a9e2f2; /* Eisblau — Lesbarkeit auf dunklem Grund */
|
||||
--wd-blau-tief: #3d9dbd; /* für Ränder/Verläufe, nicht für Text */
|
||||
--wd-lila: rgb(var(--wd-lila-rgb)); /* sekundäre Bereiche, Kontrast */
|
||||
--wd-lila-tief: #7c5cd6;
|
||||
--wd-gold: rgb(var(--wd-gold-rgb)); /* NUR Hinweise & Zahlungsinformationen */
|
||||
--wd-gold-tief: #a8873a;
|
||||
--wd-blau: rgb(var(--wd-blau-rgb)); /* Hauptaktionen, Linien, Leuchten */
|
||||
--wd-blau-hell: #D6F1FF; /* Glacier Mist — aktive Flaeche, heller Text */
|
||||
--wd-blau-tief: rgb(var(--wd-ion-rgb)); /* Ion Blue — Raender, Verlaeufe */
|
||||
--wd-ion: rgb(var(--wd-ion-rgb));
|
||||
--wd-aqua: rgb(var(--wd-aqua-rgb)); /* Fokusring, Live-Zustand */
|
||||
--wd-lila: rgb(var(--wd-lila-rgb)); /* sekundaere Bereiche, Spezial */
|
||||
--wd-lila-tief: rgb(var(--wd-indigo-rgb));
|
||||
--wd-indigo: rgb(var(--wd-indigo-rgb));
|
||||
--wd-gold: rgb(var(--wd-gold-rgb)); /* NUR Hinweise, Zahlungen, VIP */
|
||||
--wd-gold-tief: #b8934a;
|
||||
--wd-chrome: rgb(var(--wd-chrome-rgb));
|
||||
|
||||
--wd-text: #eef4fb;
|
||||
--wd-text-mid: #b3c2d4;
|
||||
--wd-text-soft: #8f9fb4;
|
||||
/* ---------- Text ----------
|
||||
Gemessen gegen alle vier Grundflaechen (Void, Midnight, Obsidian,
|
||||
Deep Glass): Optic White erreicht 15.0 bis 19.8:1, Glacier 13.0 bis
|
||||
17.1:1, Chrome 8.4 bis 11.1:1. Alle drei liegen damit deutlich
|
||||
ueber den geforderten 4.5:1.
|
||||
|
||||
--wd-rand: rgb(var(--wd-blau-rgb) / .16);
|
||||
--wd-rand-stark: rgb(var(--wd-blau-rgb) / .34);
|
||||
WICHTIG -- die Grenze des Systems: Prism Indigo (#615CFF) erreicht
|
||||
auf KEINER dieser Flaechen 4.5:1 (nur 3.25 bis 4.29:1). Es ist
|
||||
deshalb ausschliesslich fuer Kanten, Verlaeufe und grosse
|
||||
Premium-Flaechen zugelassen, niemals fuer Fliesstext. Das
|
||||
Design-System sieht Indigo ohnehin nur fuer "Premium-Momente" vor
|
||||
-- die Rechnung bestaetigt also die Regel, statt ihr zu
|
||||
widersprechen. */
|
||||
--wd-text: #FBFEFF; /* Optic White — Ueberschriften, Haupttext */
|
||||
--wd-text-mid: #D6F1FF; /* Glacier Mist — zweite Ebene */
|
||||
--wd-text-soft: rgb(var(--wd-chrome-rgb)); /* Chrome — Metadaten, Hinweise */
|
||||
|
||||
/* Kachelkante: das System nennt 24-36 % Deckkraft (Seite 11). Der
|
||||
Ruhewert liegt am unteren Ende, damit eine Seite voller Karten
|
||||
nicht wie ein Gitternetz wirkt; erst Hover und Fokus gehen hoch. */
|
||||
--wd-rand: rgb(var(--wd-blau-rgb) / .24);
|
||||
--wd-rand-stark: rgb(var(--wd-blau-rgb) / .36);
|
||||
--wd-glas: rgb(var(--wd-glas-rgb) / .62);
|
||||
--wd-glas-tief: rgba(10, 18, 32, .82);
|
||||
--wd-glas-tief: rgb(6 19 35 / .86);
|
||||
|
||||
/* Statusfarben sind vom Markenblau getrennt (Token-Regel 04): Ein
|
||||
Fehler darf nicht dieselbe Farbe tragen wie eine Hauptaktion,
|
||||
sonst wird beides bedeutungslos. Jeder Status erscheint zusaetzlich
|
||||
immer mit Text -- Farbe allein reicht nie (Seite 16). */
|
||||
--wd-ok: rgb(var(--wd-ok-rgb));
|
||||
--wd-fehler: rgb(var(--wd-fehler-rgb));
|
||||
--wd-warnung: var(--wd-gold);
|
||||
--wd-warnung: rgb(var(--wd-warn-rgb));
|
||||
|
||||
/* Eine Skala mit vier Stufen: 6 / 10 / 14 / 20 -- plus 999px fuer die
|
||||
Pillenform, die keine Stufe ist, sondern eine eigene Form.
|
||||
@@ -218,7 +278,7 @@ body.wd::before {
|
||||
background:
|
||||
radial-gradient(1100px 720px at 18% -8%, rgba(61, 157, 189, .20), transparent 68%),
|
||||
radial-gradient(900px 640px at 92% 8%, rgba(124, 92, 214, .16), transparent 66%),
|
||||
linear-gradient(180deg, #070b12 0%, var(--wd-schwarz) 46%, #04060a 100%);
|
||||
linear-gradient(180deg, var(--wd-schwarz) 0%, var(--wd-schwarz) 46%, var(--wd-schwarz) 100%);
|
||||
}
|
||||
|
||||
/* Feine Rasterlinien — gibt der Fläche Struktur (Premium statt Baukasten),
|
||||
@@ -319,7 +379,7 @@ body.wd::after {
|
||||
/* Sprungmarke für Tastatur-/Screenreader-Nutzung. */
|
||||
.wd-skip {
|
||||
position: absolute; left: -9999px; top: 0; z-index: 200;
|
||||
background: var(--wd-blau); color: #04060a; font-weight: 800;
|
||||
background: var(--wd-blau); color: var(--wd-schwarz); font-weight: 800;
|
||||
padding: .8rem 1.2rem; border-radius: 0 0 10px 0;
|
||||
}
|
||||
.wd-skip:focus { left: 0; }
|
||||
@@ -478,8 +538,8 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
.wd .wd-btn--haupt, .wd-btn--haupt {
|
||||
/* Dunkler Text auf hellem Babyblau: 11.7:1 — der einzige Weg, einen
|
||||
leuchtenden Knopf zu bauen, ohne die Lesbarkeit zu opfern. */
|
||||
background: linear-gradient(135deg, var(--wd-blau-hell), var(--wd-blau) 55%, #63bcd8);
|
||||
color: #04070c;
|
||||
background: linear-gradient(135deg, var(--wd-blau-hell), var(--wd-blau) 55%, var(--wd-ion));
|
||||
color: var(--wd-schwarz);
|
||||
box-shadow: 0 12px 34px -14px rgb(var(--wd-blau-rgb) / .8);
|
||||
}
|
||||
.wd-btn--haupt:hover { box-shadow: 0 16px 44px -14px rgb(var(--wd-blau-rgb) / .95); transform: translateY(-2px); }
|
||||
@@ -752,7 +812,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
border-color: var(--wd-blau);
|
||||
background: var(--wd-blau);
|
||||
/* Häkchen als CSS-Maske — kein Bild, keine Schriftart nötig. */
|
||||
box-shadow: inset 0 0 0 3px #05070b, inset 0 0 0 20px var(--wd-blau);
|
||||
box-shadow: inset 0 0 0 3px var(--wd-schwarz), inset 0 0 0 20px var(--wd-blau);
|
||||
}
|
||||
.wd-wahl-kachel input:focus-visible + .wd-wahl-inhalt { outline: 3px solid var(--wd-blau); outline-offset: 3px; }
|
||||
.wd-wahl-titel { display: block; font-weight: 700; color: var(--wd-text); }
|
||||
@@ -875,7 +935,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
position: absolute; right: 0; top: calc(100% + .4rem);
|
||||
min-width: 190px; padding: .35rem;
|
||||
border-radius: 10px;
|
||||
background: #0b1320;
|
||||
background: var(--wd-dunkelblau);
|
||||
border: 1px solid var(--wd-rand-stark);
|
||||
box-shadow: var(--wd-schatten);
|
||||
display: none;
|
||||
@@ -899,7 +959,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
position: absolute; left: 0; right: 0; top: 100%;
|
||||
flex-direction: column; align-items: stretch; gap: .2rem;
|
||||
padding: .8rem 4vw 1.2rem;
|
||||
background: #070b12;
|
||||
background: var(--wd-schwarz);
|
||||
border-bottom: 1px solid var(--wd-rand);
|
||||
box-shadow: var(--wd-schatten);
|
||||
/* Vollbildnavigation auf dem Handy (Masterplan S.5), aber scrollbar —
|
||||
@@ -1222,7 +1282,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
color: var(--wd-blau-hell);
|
||||
border: 2px solid transparent;
|
||||
background:
|
||||
linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgb(var(--wd-blau-rgb) / .55);
|
||||
flex-shrink: 0;
|
||||
@@ -1248,23 +1308,23 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, var(--wd-lila-tief), var(--wd-lila)); }
|
||||
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok)); }
|
||||
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok)); }
|
||||
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, var(--wd-gold-tief), var(--wd-gold)); }
|
||||
.po-leer-punkt:nth-child(2) .po-leer-nr {
|
||||
color: var(--wd-lila);
|
||||
background: linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
background: linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-lila), var(--wd-blau)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgb(var(--wd-lila-rgb) / .55);
|
||||
}
|
||||
.po-leer-punkt:nth-child(3) .po-leer-nr {
|
||||
color: var(--wd-ok);
|
||||
background: linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
background: linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-ok), var(--wd-blau)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgb(var(--wd-ok-rgb) / .5);
|
||||
}
|
||||
.po-leer-punkt:nth-child(4) .po-leer-nr {
|
||||
color: var(--wd-gold);
|
||||
background: linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
background: linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-gold), var(--wd-lila)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgb(var(--wd-gold-rgb) / .5);
|
||||
}
|
||||
@@ -1295,7 +1355,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
aus — damit ging die einzige Aussage der Leiste verloren. */
|
||||
.po-phase, .po-vorschau-phasen span { height: 7px; }
|
||||
.po-phase.po-erledigt {
|
||||
background: linear-gradient(90deg, #2e8f6b, var(--wd-ok));
|
||||
background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok));
|
||||
box-shadow: 0 0 8px -2px rgb(var(--wd-ok-rgb) / .5);
|
||||
}
|
||||
.po-phase.po-jetzt {
|
||||
@@ -1313,7 +1373,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
0%, 8% { background: rgb(var(--wd-blau-rgb) / .13); box-shadow: none; }
|
||||
14%, 30% { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
||||
box-shadow: 0 0 12px -2px rgb(var(--wd-blau-rgb) / .8); }
|
||||
38%, 62% { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok));
|
||||
38%, 62% { background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok));
|
||||
box-shadow: 0 0 8px -2px rgb(var(--wd-ok-rgb) / .45); }
|
||||
100% { background: rgb(var(--wd-blau-rgb) / .13); box-shadow: none; }
|
||||
}
|
||||
@@ -1328,7 +1388,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
.po-legende i {
|
||||
width: 16px; height: 6px; border-radius: 999px; display: inline-block;
|
||||
}
|
||||
.po-legende .po-l-fertig { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok)); }
|
||||
.po-legende .po-l-fertig { background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok)); }
|
||||
.po-legende .po-l-jetzt { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); }
|
||||
.po-legende .po-l-offen { background: rgb(var(--wd-blau-rgb) / .18); }
|
||||
|
||||
@@ -1378,7 +1438,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
flex-shrink: 0;
|
||||
border: 2px solid transparent;
|
||||
background:
|
||||
linear-gradient(#0d1624, #0d1624) padding-box,
|
||||
linear-gradient(var(--wd-dunkelblau-2), var(--wd-dunkelblau-2)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box;
|
||||
}
|
||||
/* Die Ziffer selbst noch einmal optisch ausrichten: Zahlen haben oben
|
||||
@@ -1399,15 +1459,15 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
--wd-p4: var(--wd-gold); /* Abschluss — Abnahme, Übergabe */
|
||||
}
|
||||
|
||||
.po-leer-punkt:nth-child(1)::before { background: linear-gradient(90deg, #3d9dbd, var(--wd-p1)); }
|
||||
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, #7c5cd6, var(--wd-p2)); }
|
||||
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, #2e8f6b, var(--wd-p3)); }
|
||||
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, #a8873a, var(--wd-p4)); }
|
||||
.po-leer-punkt:nth-child(1)::before { background: linear-gradient(90deg, var(--wd-ion), var(--wd-p1)); }
|
||||
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, var(--wd-indigo), var(--wd-p2)); }
|
||||
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, var(--wd-ok), var(--wd-p3)); }
|
||||
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, var(--wd-gold-tief), var(--wd-p4)); }
|
||||
|
||||
.po-leer-punkt:nth-child(1) .po-leer-nr { color: var(--wd-p1); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p1), #3d9dbd) border-box; box-shadow: 0 0 20px -7px var(--wd-p1); }
|
||||
.po-leer-punkt:nth-child(2) .po-leer-nr { color: var(--wd-p2); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p2), #7c5cd6) border-box; box-shadow: 0 0 20px -7px var(--wd-p2); }
|
||||
.po-leer-punkt:nth-child(3) .po-leer-nr { color: var(--wd-p3); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p3), #2e8f6b) border-box; box-shadow: 0 0 20px -7px var(--wd-p3); }
|
||||
.po-leer-punkt:nth-child(4) .po-leer-nr { color: var(--wd-p4); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p4), #a8873a) border-box; box-shadow: 0 0 20px -7px var(--wd-p4); }
|
||||
.po-leer-punkt:nth-child(1) .po-leer-nr { color: var(--wd-p1); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p1), var(--wd-ion)) border-box; box-shadow: 0 0 20px -7px var(--wd-p1); }
|
||||
.po-leer-punkt:nth-child(2) .po-leer-nr { color: var(--wd-p2); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p2), var(--wd-indigo)) border-box; box-shadow: 0 0 20px -7px var(--wd-p2); }
|
||||
.po-leer-punkt:nth-child(3) .po-leer-nr { color: var(--wd-p3); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p3), var(--wd-ok)) border-box; box-shadow: 0 0 20px -7px var(--wd-p3); }
|
||||
.po-leer-punkt:nth-child(4) .po-leer-nr { color: var(--wd-p4); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p4), var(--wd-gold-tief)) border-box; box-shadow: 0 0 20px -7px var(--wd-p4); }
|
||||
|
||||
/* ---------- Die Phasenleiste spricht dieselbe Sprache ----------
|
||||
Erledigte Phasen tragen die Farbe IHRES Abschnitts, nicht pauschal
|
||||
@@ -1562,7 +1622,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
button.po-aufg-haken { cursor: pointer; }
|
||||
button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgb(var(--wd-gold-rgb) / .1); }
|
||||
.po-aufg-haken--fest { cursor: default; }
|
||||
.po-aufg--fertig .po-aufg-haken { background: var(--wd-ok); border-color: var(--wd-ok); color: #06120c; }
|
||||
.po-aufg--fertig .po-aufg-haken { background: var(--wd-ok); border-color: var(--wd-ok); color: var(--wd-schwarz); }
|
||||
.po-aufg--jetzt .po-aufg-haken { border-color: var(--wd-p2); color: var(--wd-p2); }
|
||||
.po-aufg--weg .po-aufg-haken { border-style: dashed; color: var(--wd-text-soft); }
|
||||
/* Offene EIGENE Punkte: der Rand ist golden, damit klar ist, dass hier
|
||||
@@ -2062,9 +2122,34 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
Zeigerbewegung schon überfahren wird. */
|
||||
--wd-lichtx: 50%;
|
||||
--wd-lichty: 0%;
|
||||
|
||||
/* DIE LICHTFARBE STEHT JETZT AN DER KACHEL, NICHT IN DER REGEL.
|
||||
|
||||
Vorher war die Farbe im Lichtverlauf fest verdrahtet, und fuer
|
||||
jede weitere Kachelfarbe brauchte es einen kompletten zweiten
|
||||
Block -- einmal fuer die Flaeche, einmal fuer die leuchtende
|
||||
Kante. Bei zwei Farben ging das gerade noch; das CRYONOVA-System
|
||||
kennt sechs Lumen-Rollen (Baby, Aqua, Indigo, Violet, Gold,
|
||||
Coral). Das waeren zwoelf fast gleiche Bloecke gewesen, die beim
|
||||
naechsten Feinschliff zwangslaeufig auseinanderlaufen.
|
||||
|
||||
Jetzt setzt die Kachel nur noch ihre Farbe; der Verlauf wird
|
||||
einmal beschrieben. Genau das meint das Design-System mit
|
||||
"Kachelfarbe steuert Lumenfarbe" (Token-Regel 02). */
|
||||
--wd-lumen: var(--wd-blau-rgb);
|
||||
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* Die sechs Lumen-Rollen aus dem System (Seite 9).
|
||||
Mehr braucht es nicht -- jede weitere Farbe waere Dekoration und
|
||||
wuerde die Bedeutung der bestehenden verwaessern. */
|
||||
.wd-karte--lila { --wd-lumen: var(--wd-lila-rgb); }
|
||||
.wd-karte--aqua { --wd-lumen: var(--wd-aqua-rgb); }
|
||||
.wd-karte--premium { --wd-lumen: var(--wd-indigo-rgb); }
|
||||
.wd-karte--vip { --wd-lumen: var(--wd-gold-rgb); }
|
||||
.wd-karte--kritisch { --wd-lumen: var(--wd-fehler-rgb); }
|
||||
|
||||
.wd-karte::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -2073,23 +2158,22 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .28s ease;
|
||||
/* Ausblenden ruhiger als Einblenden -- das System nennt 120-180 ms
|
||||
hinein und 240-360 ms hinaus (Seite 10). Der Unterschied ist der
|
||||
Grund, warum sich Licht wie Licht anfuehlt und nicht wie ein
|
||||
Schalter. */
|
||||
transition: opacity .30s ease;
|
||||
background: radial-gradient(
|
||||
380px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-blau-rgb) / .22),
|
||||
rgb(var(--wd-blau-rgb) / .08) 38%,
|
||||
220px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-lumen) / .28),
|
||||
rgb(var(--wd-lumen) / .10) 40%,
|
||||
transparent 70%
|
||||
);
|
||||
}
|
||||
.wd-karte--lila::after {
|
||||
background: radial-gradient(
|
||||
380px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-lila-rgb) / .24),
|
||||
rgb(var(--wd-lila-rgb) / .08) 38%,
|
||||
transparent 70%
|
||||
);
|
||||
.wd-karte:hover::after {
|
||||
opacity: 1;
|
||||
transition-duration: .15s;
|
||||
}
|
||||
.wd-karte:hover::after { opacity: 1; }
|
||||
|
||||
/* DER RAND LEUCHTET MIT — und das ist der Teil, der auffällt.
|
||||
|
||||
@@ -2105,21 +2189,16 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
wirkt die ganze Kachel beleuchtet.
|
||||
|
||||
Die Fläche bleibt unverändert — sonst würde der Text flackern. */
|
||||
/* Auch die Kante folgt jetzt der Kachelfarbe -- eine Regel statt
|
||||
einer je Farbe. Die Flaeche (padding-box) bleibt dabei
|
||||
unveraendert; wuerde sie mitleuchten, flackerte der Text darauf. */
|
||||
.wd-karte:hover {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(20, 32, 50, .72), rgba(9, 15, 26, .86)) padding-box,
|
||||
linear-gradient(180deg, rgb(12 39 64 / .78), rgb(6 19 35 / .90)) padding-box,
|
||||
radial-gradient(240px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-blau-rgb) / .95),
|
||||
rgb(var(--wd-blau-rgb) / .30) 42%,
|
||||
rgb(var(--wd-lila-rgb) / .28) 100%) border-box;
|
||||
}
|
||||
.wd-karte--lila:hover {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(26, 22, 48, .72), rgba(12, 10, 24, .88)) padding-box,
|
||||
radial-gradient(240px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-lila-rgb) / .95),
|
||||
rgb(var(--wd-lila-rgb) / .30) 42%,
|
||||
rgb(var(--wd-blau-rgb) / .26) 100%) border-box;
|
||||
rgb(var(--wd-lumen) / .95),
|
||||
rgb(var(--wd-lumen) / .30) 42%,
|
||||
rgb(var(--wd-lumen) / .12) 100%) border-box;
|
||||
}
|
||||
|
||||
/* Der Inhalt muss ÜBER dem Lichtfleck liegen.
|
||||
|
||||
@@ -0,0 +1,267 @@
|
||||
/* =====================================================================
|
||||
pruef-cryonova.mjs — das Farb- und Lichtsystem
|
||||
|
||||
Prüft, dass die Seite dem Design-System "Baby Blue Optical Luxury"
|
||||
(Edition 2.0) folgt — und zwar an den Stellen, wo ein Abweichen
|
||||
folgenlos aussieht, aber Bedeutung zerstört:
|
||||
|
||||
1. Die Paletten-Werte selbst (ein Tippfehler in einem Hex-Code
|
||||
fällt mit blossem Auge nicht auf).
|
||||
2. Das Mauslicht MUSS erhalten bleiben und die Kachelfarbe
|
||||
übernehmen — das System schützt es auf fünf Seiten
|
||||
ausdrücklich vor Entfernen, Ersetzen und Abschwächen.
|
||||
3. Keine losen Hex-Codes ausserhalb der Token (Token-Regel 05).
|
||||
4. Kontraste — inklusive der Falle, an der ich beim Bauen selbst
|
||||
hereingefallen bin (siehe unten).
|
||||
|
||||
DIE KONTRAST-FALLE, DIE HIER BEWUSST RICHTIG GERECHNET WIRD:
|
||||
Ein erster, schneller Messversuch las den halbtransparenten
|
||||
Kachelhintergrund als fertige Farbe und meldete beim aktiven Reiter
|
||||
1:1 — also scheinbar unsichtbaren Text. In Wahrheit liegt die 13-%-
|
||||
Fläche über einem dunklen Grund, und der echte Wert ist 8,25 bis
|
||||
10,23:1. Wer halbtransparente Flächen nicht über ihren Untergrund
|
||||
rechnet, bekommt Fehlalarme und stumpft irgendwann gegen die
|
||||
Meldungen ab.
|
||||
===================================================================== */
|
||||
import { chromium } from "playwright";
|
||||
import { createServer } from "node:http";
|
||||
import { readFileSync, existsSync, readdirSync } from "node:fs";
|
||||
import { join, extname } from "node:path";
|
||||
|
||||
const W = process.cwd();
|
||||
const T = { ".html": "text/html", ".css": "text/css", ".js": "text/javascript",
|
||||
".png": "image/png", ".jpg": "image/jpeg", ".svg": "image/svg+xml",
|
||||
".webp": "image/webp", ".ico": "image/x-icon", ".json": "application/json" };
|
||||
const srv = createServer((q, r) => {
|
||||
const p = join(W, decodeURIComponent(q.url.split("?")[0]));
|
||||
if (existsSync(p) && !p.endsWith("/")) {
|
||||
r.writeHead(200, { "content-type": T[extname(p)] || "text/plain" });
|
||||
return r.end(readFileSync(p));
|
||||
}
|
||||
r.writeHead(404).end("");
|
||||
});
|
||||
await new Promise((r) => srv.listen(4372, r));
|
||||
|
||||
const ergebnisse = [];
|
||||
const pruefe = (n, ok, z) => {
|
||||
ergebnisse.push({ n, ok });
|
||||
console.log((ok ? " ok " : " FEHL ") + n + (z !== undefined ? " -> " + z : ""));
|
||||
};
|
||||
|
||||
/* Die verbindliche Palette (Seite 5 des Systems).
|
||||
|
||||
BEWUSST NICHT aus der Token-Liste auf Seite 20 übernommen: Dort sind
|
||||
Namen und Hex-Werte um eine Zeile verrutscht. Am folgenreichsten
|
||||
wäre --cryo-baby auf #0C2740 gewesen, einem fast schwarzen Navy —
|
||||
und dieser Wert ist laut Seite 21 zugleich die Standard-Lumenfarbe.
|
||||
Das Mauslicht wäre damit unsichtbar geworden, also genau der Effekt,
|
||||
den das System an anderer Stelle als unantastbar bezeichnet. */
|
||||
const PALETTE = {
|
||||
"--wd-blau-rgb": { hex: "#8FD8FF", name: "Signature Baby" },
|
||||
"--wd-ion-rgb": { hex: "#4AC8FF", name: "Ion Blue" },
|
||||
"--wd-aqua-rgb": { hex: "#2EF2E0", name: "Hyper Aqua" },
|
||||
"--wd-lila-rgb": { hex: "#A76BFF", name: "Aurora Violet" },
|
||||
"--wd-indigo-rgb": { hex: "#615CFF", name: "Prism Indigo" },
|
||||
"--wd-gold-rgb": { hex: "#E8C36A", name: "Liquid Gold" },
|
||||
"--wd-fehler-rgb": { hex: "#FF5C7A", name: "Signal Coral" },
|
||||
"--wd-chrome-rgb": { hex: "#AFC4D2", name: "Chrome Silver" },
|
||||
};
|
||||
const FLAECHEN = {
|
||||
"--wd-schwarz": "#030810",
|
||||
"--wd-dunkelblau": "#061323",
|
||||
"--wd-dunkelblau-2": "#091B2D",
|
||||
"--wd-flaeche": "#0C2740",
|
||||
};
|
||||
|
||||
const hexZuRgb = (h) => [1, 3, 5].map((i) => parseInt(h.substr(i, 2), 16));
|
||||
|
||||
const browser = await chromium.launch();
|
||||
const seite = await browser.newPage({ viewport: { width: 1440, height: 950 } });
|
||||
await seite.goto("http://127.0.0.1:4372/webdesign/index.html");
|
||||
await seite.waitForTimeout(500);
|
||||
|
||||
console.log("\n=== 1. PALETTE ===");
|
||||
const werte = await seite.evaluate((namen) => {
|
||||
const w = getComputedStyle(document.documentElement);
|
||||
const raus = {};
|
||||
for (const n of namen) raus[n] = w.getPropertyValue(n).trim();
|
||||
return raus;
|
||||
}, [...Object.keys(PALETTE), ...Object.keys(FLAECHEN)]);
|
||||
|
||||
for (const [token, soll] of Object.entries(PALETTE)) {
|
||||
const ist = (werte[token] || "").split(/\s+/).map(Number);
|
||||
const erwartet = hexZuRgb(soll.hex);
|
||||
pruefe(`${soll.name} (${token}) ist ${soll.hex}`,
|
||||
ist.length === 3 && ist.every((v, i) => v === erwartet[i]),
|
||||
werte[token] + " statt " + erwartet.join(" "));
|
||||
}
|
||||
for (const [token, soll] of Object.entries(FLAECHEN)) {
|
||||
pruefe(`Grundflaeche ${token} ist ${soll}`,
|
||||
(werte[token] || "").toLowerCase() === soll.toLowerCase(), werte[token]);
|
||||
}
|
||||
|
||||
console.log("\n=== 2. MAUSLICHT (darf nie entfernt werden) ===");
|
||||
const lumen = await seite.evaluate(() => {
|
||||
const css = Array.from(document.styleSheets)
|
||||
.flatMap((b) => { try { return Array.from(b.cssRules); } catch { return []; } });
|
||||
const alle = css.map((r) => r.cssText).join("\n");
|
||||
return {
|
||||
hatVariable: /--wd-lumen\s*:/.test(alle),
|
||||
hatPosition: /--wd-lichtx/.test(alle) && /--wd-lichty/.test(alle),
|
||||
nutztVariableImVerlauf: /radial-gradient\([^)]*var\(--wd-lichtx\)[^}]*var\(--wd-lumen\)/.test(alle)
|
||||
|| /var\(--wd-lumen\)[^}]*var\(--wd-lichtx\)/.test(alle),
|
||||
rollen: ["--wd-karte--lila", "aqua", "premium", "vip", "kritisch"]
|
||||
.filter((r) => alle.includes(r)).length,
|
||||
hatUebergang: /transition:\s*opacity/.test(alle),
|
||||
hinterInhalt: /\.wd-karte\s*>\s*\*\s*\{[^}]*z-index:\s*1/.test(alle),
|
||||
};
|
||||
});
|
||||
pruefe("die Lichtposition wird als Variable gefuehrt", lumen.hatPosition);
|
||||
pruefe("es gibt eine Farbvariable pro Kachel (--wd-lumen)", lumen.hatVariable);
|
||||
pruefe("der Lichtverlauf benutzt diese Farbvariable", lumen.nutztVariableImVerlauf);
|
||||
pruefe("mehrere Lumen-Rollen sind hinterlegt", lumen.rollen >= 4, lumen.rollen + " gefunden");
|
||||
pruefe("das Licht blendet weich aus (Uebergang vorhanden)", lumen.hatUebergang);
|
||||
/* Das System verlangt ausdruecklich: Licht hinter dem Inhalt, niemals
|
||||
darueber -- sonst leidet die Lesbarkeit (Seite 9). */
|
||||
pruefe("der Inhalt liegt UEBER dem Licht", lumen.hinterInhalt);
|
||||
|
||||
console.log("\n=== 3. LICHT FOLGT WIRKLICH DEM ZEIGER ===");
|
||||
await seite.goto("http://127.0.0.1:4372/webdesign/leistungen.html");
|
||||
await seite.waitForTimeout(600);
|
||||
const karte = seite.locator(".wd-karte").first();
|
||||
if (await karte.count()) {
|
||||
const box = await karte.boundingBox();
|
||||
|
||||
/* MIT ZWISCHENSCHRITTEN bewegen (steps), nicht in einem Sprung.
|
||||
|
||||
Der Code haengt an "pointermove". Ein Sprung von A nach B erzeugt
|
||||
unter Umstaenden nur ein einziges Ereignis am Ziel -- und die erste
|
||||
Messung sah dann zweimal denselben Wert und meldete faelschlich,
|
||||
das Licht folge dem Zeiger nicht. Eine direkte Nachmessung zeigte:
|
||||
Es folgt einwandfrei (30px -> 723px). Der Fehler lag in der
|
||||
Nachahmung der Mausbewegung, nicht in der Seite. */
|
||||
await seite.mouse.move(box.x + 40, box.y + 30, { steps: 5 });
|
||||
await seite.waitForTimeout(250);
|
||||
const p1 = await karte.evaluate((e) => e.style.getPropertyValue("--wd-lichtx"));
|
||||
|
||||
/* Deckkraft JETZT messen, solange der Zeiger noch auf der Kachel
|
||||
steht -- danach wandert er weiter und das Licht blendet aus. */
|
||||
const sichtbar = await karte.evaluate((e) =>
|
||||
getComputedStyle(e, "::after").opacity);
|
||||
|
||||
await seite.mouse.move(box.x + box.width - 60, box.y + box.height - 40, { steps: 8 });
|
||||
await seite.waitForTimeout(250);
|
||||
const p2 = await karte.evaluate((e) => e.style.getPropertyValue("--wd-lichtx"));
|
||||
|
||||
pruefe("die Lichtposition folgt dem Zeiger",
|
||||
p1 !== p2 && p1 !== "" && p2 !== "", `${p1} -> ${p2}`);
|
||||
pruefe("das Licht ist beim Ueberfahren voll sichtbar",
|
||||
parseFloat(sichtbar) > 0.5, "Deckkraft " + sichtbar);
|
||||
pruefe("die Kachel gibt dem Licht ihre eigene Farbe",
|
||||
(await karte.evaluate((e) => getComputedStyle(e).getPropertyValue("--wd-lumen"))).trim()
|
||||
=== "143 216 255",
|
||||
await karte.evaluate((e) => getComputedStyle(e).getPropertyValue("--wd-lumen")));
|
||||
} else {
|
||||
pruefe("eine Kachel zum Pruefen gefunden", false, "keine .wd-karte");
|
||||
}
|
||||
|
||||
console.log("\n=== 4. KEINE LOSEN HEX-CODES (Token-Regel 05) ===");
|
||||
/* Farben gehoeren in die Token. Verstreute Hex-Codes sind der Grund,
|
||||
warum Oberflaechen mit der Zeit zwei fast gleiche Blautoene bekommen. */
|
||||
const cssText = readFileSync(join(W, "assets/css/webdesign.css"), "utf8");
|
||||
const ohneKommentare = cssText.replace(/\/\*[\s\S]*?\*\//g, "");
|
||||
const wurzelEnde = ohneKommentare.indexOf("}", ohneKommentare.indexOf(":root"));
|
||||
const nachWurzel = ohneKommentare.slice(wurzelEnde);
|
||||
const lose = (nachWurzel.match(/#[0-9a-fA-F]{6}\b/g) || []);
|
||||
pruefe("ausserhalb der Token stehen keine Hex-Farben",
|
||||
lose.length === 0, lose.slice(0, 6).join(", ") || "keine");
|
||||
|
||||
console.log("\n=== 5. KONTRASTE (halbtransparente Flaechen korrekt gerechnet) ===");
|
||||
const kontraste = await seite.evaluate(() => {
|
||||
/* Halbtransparente Flaechen ueber ihren Untergrund legen, statt sie
|
||||
als fertige Farbe zu lesen -- sonst kommen Fehlalarme heraus. */
|
||||
function zahlen(c) { return (c.match(/[\d.]+/g) || []).map(Number); }
|
||||
function ueberlagern(el) {
|
||||
let p = el, stapel = [];
|
||||
while (p) {
|
||||
const c = zahlen(getComputedStyle(p).backgroundColor);
|
||||
if (c.length >= 3) {
|
||||
const a = c.length === 4 ? c[3] : 1;
|
||||
if (a > 0) stapel.push([c[0], c[1], c[2], a]);
|
||||
if (a >= 1) break;
|
||||
}
|
||||
p = p.parentElement;
|
||||
}
|
||||
let r = [3, 8, 16];
|
||||
for (let i = stapel.length - 1; i >= 0; i--) {
|
||||
const [cr, cg, cb, a] = stapel[i];
|
||||
r = [cr * a + r[0] * (1 - a), cg * a + r[1] * (1 - a), cb * a + r[2] * (1 - a)];
|
||||
}
|
||||
return r;
|
||||
}
|
||||
function lum(c) {
|
||||
const v = c.map((x) => { x /= 255; return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4); });
|
||||
return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2];
|
||||
}
|
||||
function kon(a, b) { const l1 = lum(a), l2 = lum(b); const [h, n] = l1 > l2 ? [l1, l2] : [l2, l1]; return +((h + 0.05) / (n + 0.05)).toFixed(2); }
|
||||
|
||||
const schlecht = [];
|
||||
for (const el of document.querySelectorAll("p, h1, h2, h3, h4, a, span, li, label, button, td, th")) {
|
||||
const t = (el.textContent || "").trim();
|
||||
if (!t || el.children.length > 0) continue;
|
||||
const r = el.getBoundingClientRect();
|
||||
if (r.width < 2 || r.height < 2) continue;
|
||||
|
||||
/* AUSSERHALB DES BILDES -- kein sichtbarer Text.
|
||||
Der Sprunglink ("Direkt zum Inhalt") liegt bei left:-9999px und
|
||||
wird erst beim Tastaturfokus hereingeholt. Er ist technisch
|
||||
sichtbar, aber niemand liest ihn dort. */
|
||||
if (r.right < 0 || r.left > innerWidth) continue;
|
||||
|
||||
const st = getComputedStyle(el);
|
||||
if (st.visibility === "hidden" || st.display === "none" || +st.opacity < 0.1) continue;
|
||||
|
||||
/* TEXT AUF EINEM FARBVERLAUF laesst sich nicht mit einer einzigen
|
||||
Hintergrundfarbe verrechnen -- getComputedStyle liefert dort
|
||||
rgba(0,0,0,0), und die Messung faellt auf den Seitenhintergrund
|
||||
zurueck. Beim Hauptknopf (dunkler Text auf hellem Babyblau-
|
||||
Verlauf) kam so 1:1 heraus, obwohl er in Wirklichkeit rund 11:1
|
||||
hat. Solche Faelle pruefe ich von Hand; pruef-design.mjs meldet
|
||||
sie getrennt als "von Hand zu pruefen". */
|
||||
let ahn = el, aufVerlauf = false;
|
||||
for (let i = 0; ahn && i < 4; i++, ahn = ahn.parentElement) {
|
||||
if (getComputedStyle(ahn).backgroundImage !== "none") { aufVerlauf = true; break; }
|
||||
}
|
||||
if (aufVerlauf) continue;
|
||||
const gr = parseFloat(st.fontSize);
|
||||
const fett = +st.fontWeight >= 700;
|
||||
const ziel = (gr >= 24 || (gr >= 18.66 && fett)) ? 3 : 4.5;
|
||||
const k = kon(zahlen(st.color).slice(0, 3), ueberlagern(el));
|
||||
if (k < ziel) schlecht.push({ t: t.slice(0, 30), k, ziel, gr });
|
||||
}
|
||||
return schlecht;
|
||||
});
|
||||
pruefe("jeder sichtbare Text erreicht seinen Zielkontrast",
|
||||
kontraste.length === 0,
|
||||
kontraste.slice(0, 4).map((x) => `"${x.t}" ${x.k}/${x.ziel}`).join(" | ") || "alle OK");
|
||||
|
||||
console.log("\n=== 6. DAS SYSTEM WIRKT AUF ALLEN SEITEN ===");
|
||||
/* Eine zentrale Quelle heisst: eine Aenderung wirkt ueberall. Wenn eine
|
||||
Seite noch einen alten Ton zeigt, ist genau das nicht der Fall. */
|
||||
const seiten = readdirSync(join(W, "webdesign")).filter((f) => f.endsWith(".html") && f !== "diagnose.html");
|
||||
let abweichend = [];
|
||||
for (const datei of seiten) {
|
||||
await seite.goto("http://127.0.0.1:4372/webdesign/" + datei);
|
||||
await seite.waitForTimeout(180);
|
||||
const baby = await seite.evaluate(() =>
|
||||
getComputedStyle(document.documentElement).getPropertyValue("--wd-blau-rgb").trim());
|
||||
if (baby !== "143 216 255") abweichend.push(datei + ": " + baby);
|
||||
}
|
||||
pruefe(`alle ${seiten.length} Seiten nutzen dieselbe Farbquelle`,
|
||||
abweichend.length === 0, abweichend.join(", ") || "einheitlich");
|
||||
|
||||
await browser.close();
|
||||
srv.close();
|
||||
const f = ergebnisse.filter((e) => !e.ok).length;
|
||||
console.log(`\n===== ${ergebnisse.length - f} bestanden, ${f} fehlgeschlagen =====`);
|
||||
process.exitCode = f ? 1 : 0;
|
||||
+8
-1
@@ -57,7 +57,14 @@ await new Promise((r) => srv.listen(4332, r));
|
||||
sieht man dann auch eine echte weg. */
|
||||
const SEITEN = readdirSync(join(W, "webdesign"))
|
||||
.filter((f) => f.endsWith(".html") && f !== "diagnose.html");
|
||||
const ALT = "127, 208, 232"; // der bisherige Markenton
|
||||
/* Der aktuelle Markenton. Beim Wechsel auf das CRYONOVA-System
|
||||
(24.08.2026) stand hier noch der alte Wert 127, 208, 232 -- der Test
|
||||
fand daraufhin null Elemente und meldete Alarm. Das war genau
|
||||
umgekehrt zu deuten: Dass der alte Ton NIRGENDS mehr vorkam, war der
|
||||
Beweis, dass die Umstellung vollstaendig durchgeschlagen ist. Der
|
||||
Test misst hier aber, ob eine Aenderung ueberall ankommt -- dafuer
|
||||
braucht er den Ton, der gerade gilt. */
|
||||
const ALT = "143, 216, 255"; // Signature Baby #8FD8FF
|
||||
const NEU = "255 120 40"; // drastisch anders, damit nichts untergeht
|
||||
|
||||
const ergebnisse = [];
|
||||
|
||||
+1
-1
@@ -34,7 +34,7 @@
|
||||
Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
|
||||
Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
|
||||
Stand fest. */
|
||||
const CACHE_NAME = "dogfather-webdesign-v30";
|
||||
const CACHE_NAME = "dogfather-webdesign-v31";
|
||||
|
||||
/* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
|
||||
HTML-Datei in dieser Liste. */
|
||||
|
||||
Reference in New Issue
Block a user