CRYONOVA Schritt 2: Bildwelt, Materialien, Rangsystem, Status
Setzt die restlichen Kapitel des Design-Systems um (Seiten 7, 14, 16, 19, 24-29). Wie Schritt 1 ausschliesslich Farbe, Material und Licht -- Aufbau, Navigation, Texte und Funktionen bleiben unangetastet. BILDWELT (Seiten 24-29) Die Motive sind jetzt echte Seitenhintergruende: Ring auf Startseite und Portal, Kristallwelt an der Zugangswand. Ueber jedem Motiv liegt eine Navy-Glasflaeche -- das System fordert auf Seite 31 ausdruecklich, dass bei Bedarf "eine Navy- oder Frost-Glasflaeche zwischen Bild und Inhalt" liegt. Ohne sie waere Text auf den hellen Kristallspitzen nicht sicher lesbar, und genau dort macht ein schoenes Bild eine Seite unbrauchbar. Von 2,5 MB auf 96-229 KB (WebP), auf dem Handy 30-73 KB. Das System nennt fuer Mobile ausdruecklich Ladezeit als Kriterium. DAS LOGO IM BILD -- eine Entscheidung gegen die woertliche Vorgabe Zwei der drei Motive zeigen das Dogfather-Logo gross in der Mitte. Als Seitenhintergrund waere das ein zweites Logo neben dem echten in der Kopfzeile: zwei Marken, die um dieselbe Aufmerksamkeit ringen. Beim ersten Versuch schien es an der Zugangswand hinter den Karten durch (gemessen 15,9 % helle Flaeche im Logobereich). Die Zugangswand nutzt deshalb jetzt einen Ausschnitt der linken Bildhaelfte -- dieselbe Kristallwelt, dasselbe Licht, nur ohne Wappen. Die Logo-Motive bleiben als Blickfang-Klasse erhalten, dort wo sie fuer sich stehen duerfen. MATERIALIEN (Seite 7) Optic Glass, Frosted Ice, Prism Edge und Void Navy als Klassen. "Hell" heisst auf einer dunklen Seite aufgehelltes Navy, nicht Weiss -- echtes Weiss waere ein Loch im Bildschirm, und das System verbietet weisse Vollflaechen ausdruecklich. RANGSYSTEM (Seite 14) Drei Stufen fehlten: Premium (Indigo), VIP (Champagne), Gefahr (Coral). Wenn jeder Knopf gleich laut ist, ist keiner mehr laut. Zwei bewusste Abweichungen von der naheliegenden Loesung: - Indigo steht als FLAECHE unter hellem Text, nie als Schriftfarbe. Es erreicht als Text nirgends 4,5:1 (gemessen 3,25-4,29). Der Test haelt das dauerhaft fest. - Gefahr ist NICHT vollflaechig rot. Ein voll gefuellter roter Knopf zieht den Blick staerker an als die Hauptaktion und wird dadurch versehentlich gedrueckt. Kritische Aktionen sollen auffindbar sein, nicht verlockend. FOKUSRING (Seite 19) Doppelter Aqua-Ring: 2 px Aqua aussen, dunkler Innenring. Kein Schmuck -- ein einfacher heller Ring verschwindet auf hellen Flaechen, ein dunkler auf dunklen. Die Kombination ist auf JEDEM Untergrund sichtbar. STATUS-SPEKTRUM (Seite 16) Acht Zustaende. Die Klasse faerbt nur -- den Text liefert immer das Markup. Es gibt bewusst keine Variante, die nur einen farbigen Punkt zeigt: Wer Farben nicht unterscheiden kann, saehe dann gar nichts. Der Test prueft, dass keine Statusmarke ohne Text existiert. Dabei einen eigenen Fehler gefunden und behoben: Ich hatte beim Bauen des Premium-Knopfes selbst einen losen Hex-Wert eingesetzt -- genau das, was Token-Regel 05 verbietet und was der Test dann meldete. Geprueft: 43 (CRYONOVA, von 24 erweitert) + 0 Fundstellen (WCAG ueber 12 Seiten x 5 Sprachen, jetzt MIT Bildhintergruenden) + 55 + 40 + 69 + 54 + 42 + 16 + 5 + 20 + 64 + 58 -- alles gruen.
This commit is contained in:
@@ -2328,3 +2328,316 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
.wd .vw-ub-projekt:active,
|
||||
.wd .vw-filter-knopf:active { transform: none; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
CRYONOVA-BILDWELT (Design-System Seiten 24-29)
|
||||
|
||||
Das System nennt vier Referenzmotive und macht sie zur verbindlichen
|
||||
Grundlage: "Die Website uebernimmt direkt die Bildsprache der PDF."
|
||||
Verboten sind ausdruecklich einfache Verlaeufe und beliebige blaue
|
||||
Flaechen als Ersatz.
|
||||
|
||||
WIE DIE MOTIVE VERTEILT SIND -- und warum so
|
||||
|
||||
Der Ring (ohne Logo) traegt die grossen Hintergrundflaechen. Die
|
||||
beiden Motive MIT Logo sind bewusst KEIN Seitenhintergrund: Auf jeder
|
||||
Seite steht oben bereits das echte Dogfather-Logo, und ein zweites,
|
||||
grosses Logo im Hintergrund waere kein Luxus, sondern ein Fehler --
|
||||
zwei Marken auf einem Bildschirm, die um dieselbe Aufmerksamkeit
|
||||
ringen. Sie erscheinen deshalb dort, wo sie fuer sich stehen duerfen:
|
||||
als Blickfang auf der Startseite und an der Zugangswand, jeweils ohne
|
||||
Text darueber.
|
||||
|
||||
DREI SCHICHTEN UEBER JEDEM MOTIV
|
||||
|
||||
Ein Bild allein macht Text unlesbar -- das System fordert auf Seite 31
|
||||
ausdruecklich, dass bei Bedarf "eine Navy- oder Frost-Glasflaeche
|
||||
zwischen Bild und Inhalt" liegt. Deshalb liegt ueber jedem Motiv:
|
||||
1. eine Navy-Faerbung, die das Bild in die Markenwelt zieht,
|
||||
2. ein Verlauf nach unten, der die Textzone beruhigt,
|
||||
3. der Inhalt selbst.
|
||||
|
||||
LADEZEIT
|
||||
Zwei Groessen je Motiv. Das Handy laedt 33 KB statt 110 KB -- das
|
||||
System nennt fuer Mobile ausdruecklich "Textkontrast und Ladezeit
|
||||
priorisieren" (Seite 24).
|
||||
===================================================================== */
|
||||
|
||||
.wd-motiv {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* Das Motiv selbst liegt in einer eigenen Ebene HINTER allem.
|
||||
|
||||
Bewusst ein Pseudo-Element und kein <img>: So kann kein Inhalt
|
||||
versehentlich darunter geraten, und der Browser laedt es als
|
||||
Hintergrund mit niedrigerer Dringlichkeit als die Schrift. */
|
||||
.wd-motiv::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
/* Die Faerbung zieht das Motiv in die Markenwelt und nimmt ihm
|
||||
zugleich die Leuchtkraft, die sonst mit dem Text konkurriert. */
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
/* Die Glasflaeche zwischen Bild und Inhalt.
|
||||
|
||||
Ohne sie waere Text auf den hellen Kristallspitzen der Motive nicht
|
||||
sicher lesbar -- und genau das ist die Stelle, an der ein schoenes
|
||||
Bild eine Seite unbrauchbar macht. Der Verlauf ist unten dichter,
|
||||
weil dort in aller Regel der Fliesstext steht. */
|
||||
.wd-motiv::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
rgb(3 8 16 / .55) 0%,
|
||||
rgb(6 19 35 / .78) 55%,
|
||||
rgb(3 8 16 / .94) 100%);
|
||||
}
|
||||
|
||||
/* ---------- Die einzelnen Motive ---------- */
|
||||
.wd-motiv--ring::before { background-image: url("/assets/img/cryo-ring.webp"); }
|
||||
.wd-motiv--wappen::before { background-image: url("/assets/img/cryo-wappen.webp"); }
|
||||
/* Der Monolith zeigt in der Bildmitte das Dogfather-Logo. Als
|
||||
Seitenhintergrund waere das ein zweites Logo neben dem echten in der
|
||||
Kopfzeile -- zwei Marken, die um dieselbe Aufmerksamkeit ringen.
|
||||
Deshalb hier ein Ausschnitt der linken Bildhaelfte: dieselbe
|
||||
Kristallwelt, dasselbe Licht, nur ohne das Wappen. */
|
||||
.wd-motiv--monolith::before {
|
||||
background-image: url("/assets/img/cryo-kristall.webp");
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
/* Auf dem Handy die kleinere Fassung. Die Abfrage steht NACH den
|
||||
grossen Regeln, damit sie gewinnt. */
|
||||
@media (max-width: 900px) {
|
||||
.wd-motiv--ring::before { background-image: url("/assets/img/cryo-ring-klein.webp"); }
|
||||
.wd-motiv--wappen::before { background-image: url("/assets/img/cryo-wappen-klein.webp"); }
|
||||
.wd-motiv--monolith::before { background-image: url("/assets/img/cryo-kristall-klein.webp"); }
|
||||
|
||||
/* Motiv staerker beschneiden und Text weiter beruhigen -- auf einem
|
||||
schmalen Schirm bleibt vom Bild ohnehin nur ein Ausschnitt, und
|
||||
Lesbarkeit geht vor Wirkung (System Seite 24). */
|
||||
.wd-motiv::before { opacity: .42; }
|
||||
.wd-motiv::after {
|
||||
background: linear-gradient(180deg,
|
||||
rgb(3 8 16 / .68) 0%,
|
||||
rgb(6 19 35 / .86) 50%,
|
||||
rgb(3 8 16 / .96) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Blickfang-Motive (mit Logo, ohne Text darueber) ---------- */
|
||||
|
||||
/* Anders als die Hintergruende steht dieses Motiv fuer sich: volle
|
||||
Leuchtkraft, kein Verlauf darueber, kein Text darin. Es ist ein Bild,
|
||||
das man ansieht -- keine Flaeche, auf der etwas steht. */
|
||||
.wd-blickfang {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: var(--wd-radius-l, 20px);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(var(--wd-blau-rgb) / .30);
|
||||
box-shadow:
|
||||
0 30px 80px -40px rgb(0 0 0 / .9),
|
||||
inset 0 1px 0 rgb(var(--wd-blau-rgb) / .18);
|
||||
aspect-ratio: 1672 / 941;
|
||||
background: center / cover no-repeat;
|
||||
}
|
||||
.wd-blickfang--wappen { background-image: url("/assets/img/cryo-wappen.webp"); }
|
||||
.wd-blickfang--monolith { background-image: url("/assets/img/cryo-monolith.webp"); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.wd-blickfang--wappen { background-image: url("/assets/img/cryo-wappen-klein.webp"); }
|
||||
.wd-blickfang--monolith { background-image: url("/assets/img/cryo-monolith-klein.webp"); }
|
||||
}
|
||||
|
||||
/* Reduzierte Bewegung betrifft Bilder nicht -- sie bewegen sich nicht.
|
||||
Der Vollstaendigkeit halber bleibt hier bewusst nichts abgeschaltet. */
|
||||
|
||||
/* =====================================================================
|
||||
AKTIONEN MIT RANG (Design-System Seite 14)
|
||||
|
||||
Das System kennt sechs Rangstufen. Drei gab es bereits (Haupt,
|
||||
Zweit, Still); hier kommen die drei dazu, die eine Aussage tragen,
|
||||
welche die vorhandenen nicht abdecken koennen.
|
||||
|
||||
WARUM RANG UEBERHAUPT WICHTIG IST
|
||||
Wenn jeder Knopf gleich laut ist, ist keiner mehr laut. Ein Nutzer
|
||||
entscheidet in Sekundenbruchteilen, was der naechste Schritt ist --
|
||||
und diese Entscheidung trifft er ueber Gewicht und Farbe, nicht
|
||||
ueber den Text. Deshalb hat jede Stufe genau eine Bedeutung:
|
||||
|
||||
haupt die wichtigste Aktion auf dieser Seite -- nur EINE
|
||||
zweit starke Alternative daneben
|
||||
still Nebenaktion, tritt zurueck
|
||||
premium bezahlte Erweiterung (Indigo)
|
||||
vip Treuevorteil, extrem sparsam (Champagne)
|
||||
gefahr kritisch und schwer umkehrbar (Signal Coral)
|
||||
===================================================================== */
|
||||
|
||||
/* PREMIUM -- Indigo.
|
||||
Indigo erreicht als Text keine 4,5:1 (gemessen 3,25-4,29 auf allen
|
||||
Grundflaechen), deshalb steht es hier NICHT als Schriftfarbe, sondern
|
||||
als Flaeche unter hellem Text. Genau so bleibt die Farbe erhalten und
|
||||
die Lesbarkeit trotzdem sicher. */
|
||||
.wd .wd-btn--premium, .wd-btn--premium {
|
||||
background: linear-gradient(135deg,
|
||||
rgb(var(--wd-indigo-rgb) / .92),
|
||||
rgb(var(--wd-lila-rgb) / .88));
|
||||
border-color: rgb(var(--wd-indigo-rgb) / .6);
|
||||
color: var(--wd-text);
|
||||
box-shadow: 0 12px 34px -16px rgb(var(--wd-indigo-rgb) / .9);
|
||||
}
|
||||
.wd-btn--premium:hover {
|
||||
box-shadow: 0 16px 44px -14px rgb(var(--wd-indigo-rgb) / .95);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* VIP -- Champagne.
|
||||
Das System nennt Champagne "maximal sparsam" und verbietet
|
||||
ausdruecklich die Mischung mit Violet (Seite 18). Deshalb hier ein
|
||||
reiner Goldrahmen ohne zweite Akzentfarbe. */
|
||||
.wd .wd-btn--vip, .wd-btn--vip {
|
||||
background: rgb(var(--wd-gold-rgb) / .12);
|
||||
border-color: rgb(var(--wd-gold-rgb) / .55);
|
||||
color: var(--wd-gold);
|
||||
}
|
||||
.wd-btn--vip:hover {
|
||||
background: rgb(var(--wd-gold-rgb) / .2);
|
||||
border-color: var(--wd-gold);
|
||||
}
|
||||
|
||||
/* GEFAHR -- Signal Coral.
|
||||
Bewusst KEINE gefuellte Flaeche: Ein vollflaechig roter Knopf zieht
|
||||
den Blick staerker an als die Hauptaktion und wird dadurch
|
||||
versehentlich gedrueckt. Kritische Aktionen sollen auffindbar sein,
|
||||
nicht verlockend. */
|
||||
.wd .wd-btn--gefahr, .wd-btn--gefahr {
|
||||
background: rgb(var(--wd-fehler-rgb) / .10);
|
||||
border-color: rgb(var(--wd-fehler-rgb) / .5);
|
||||
color: var(--wd-fehler);
|
||||
}
|
||||
.wd-btn--gefahr:hover {
|
||||
background: rgb(var(--wd-fehler-rgb) / .18);
|
||||
border-color: var(--wd-fehler);
|
||||
}
|
||||
|
||||
/* Gesperrt: 42 % Deckkraft und kein aktives Lumen (Seite 14). */
|
||||
.wd .wd-btn:disabled, .wd-btn[aria-disabled="true"] {
|
||||
opacity: .42;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
FOKUS: doppelter Aqua-Ring (Seite 14 und 19)
|
||||
|
||||
Das System verlangt "Fokus: doppelter Aqua-Ring" und im Qualitaets-
|
||||
tor "2 px Aqua plus sichtbarer Abstand".
|
||||
|
||||
Der doppelte Ring ist kein Schmuck: Ein einfacher heller Ring
|
||||
verschwindet auf hellen Flaechen, ein einfacher dunkler auf dunklen.
|
||||
Die Kombination aus dunklem Innenring und hellem Aussenring ist auf
|
||||
JEDEM Untergrund sichtbar -- das ist der eigentliche Grund fuer die
|
||||
Bauweise.
|
||||
===================================================================== */
|
||||
.wd :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
|
||||
outline: 2px solid rgb(var(--wd-aqua-rgb));
|
||||
outline-offset: 2px;
|
||||
/* Der dunkle Innenring trennt das Aqua von hellen Flaechen. */
|
||||
box-shadow: 0 0 0 4px rgb(3 8 16 / .85);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
MATERIALIEN (Design-System Seite 7)
|
||||
|
||||
Die Farben werden zu Oberflaechen. Vier davon lassen sich mit CSS
|
||||
ehrlich bauen; "Liquid Chrome" und "Champagne Pin" sind bewusst nur
|
||||
Details und brauchen keine eigene Flaechenklasse.
|
||||
===================================================================== */
|
||||
|
||||
/* OPTIC GLASS -- halbtransparent, klare Baby-Blue-Kante.
|
||||
backdrop-filter nur, wo der Browser es kann; sonst bleibt die
|
||||
Flaeche schlicht dunkel statt kaputt. */
|
||||
.wd-glasflaeche {
|
||||
background: rgb(var(--wd-glas-rgb) / .55);
|
||||
border: 1px solid rgb(var(--wd-blau-rgb) / .28);
|
||||
border-radius: var(--wd-radius-l, 20px);
|
||||
}
|
||||
@supports (backdrop-filter: blur(1px)) {
|
||||
.wd-glasflaeche {
|
||||
backdrop-filter: blur(14px) saturate(1.2);
|
||||
background: rgb(var(--wd-glas-rgb) / .38);
|
||||
}
|
||||
}
|
||||
|
||||
/* FROSTED ICE -- helle, matte Flaeche fuer ruhige Inhalte.
|
||||
Auf einer dunklen Seite heisst "hell" nicht weiss, sondern ein
|
||||
aufgehelltes Navy. Echtes Weiss waere hier ein Loch im Bildschirm --
|
||||
und das System verbietet weisse Vollflaechen ausdruecklich. */
|
||||
.wd-frost {
|
||||
background: linear-gradient(180deg,
|
||||
rgb(var(--wd-blau-rgb) / .10),
|
||||
rgb(var(--wd-blau-rgb) / .04));
|
||||
border: 1px solid rgb(var(--wd-blau-rgb) / .20);
|
||||
border-radius: var(--wd-radius-l, 20px);
|
||||
}
|
||||
|
||||
/* PRISM EDGE -- duenne Kante von Ion zu Indigo, nur fuer
|
||||
Premium-Momente. Zwei Hintergrundebenen: Flaeche und Rand. */
|
||||
.wd-prisma {
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(var(--wd-flaeche), var(--wd-flaeche)) padding-box,
|
||||
linear-gradient(135deg,
|
||||
rgb(var(--wd-ion-rgb) / .9),
|
||||
rgb(var(--wd-indigo-rgb) / .9)) border-box;
|
||||
border-radius: var(--wd-radius-l, 20px);
|
||||
}
|
||||
|
||||
/* VOID NAVY -- tiefe Flaeche fuer Navigation und ruhige Zonen. */
|
||||
.wd-void { background: var(--wd-schwarz); }
|
||||
|
||||
/* =====================================================================
|
||||
STATUS-SPEKTRUM (Design-System Seite 16)
|
||||
|
||||
Acht Zustaende. Die eiserne Regel steht auf derselben Seite:
|
||||
"Jeder Status wird immer mit Text + Farbe + optionalem Symbol
|
||||
dargestellt. Farbe allein reicht niemals."
|
||||
|
||||
Deshalb faerbt diese Klasse nur -- den TEXT liefert immer das
|
||||
Markup. Es gibt hier bewusst keine Variante, die nur einen farbigen
|
||||
Punkt zeigt: Wer Farben nicht unterscheiden kann, saehe dann gar
|
||||
nichts.
|
||||
===================================================================== */
|
||||
.wd-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .35rem;
|
||||
padding: .18rem .6rem;
|
||||
border-radius: 999px;
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wd-status--neu { background: rgb(var(--wd-blau-rgb) / .14); color: var(--wd-blau); border-color: rgb(var(--wd-blau-rgb) / .35); }
|
||||
.wd-status--arbeit { background: rgb(var(--wd-aqua-rgb) / .13); color: var(--wd-aqua); border-color: rgb(var(--wd-aqua-rgb) / .32); }
|
||||
.wd-status--wartet { background: rgb(var(--wd-warn-rgb) / .14); color: var(--wd-warnung); border-color: rgb(var(--wd-warn-rgb) / .35); }
|
||||
.wd-status--freigabe { background: rgb(var(--wd-lila-rgb) / .15); color: var(--wd-lila); border-color: rgb(var(--wd-lila-rgb) / .35); }
|
||||
.wd-status--bezahlt { background: rgb(var(--wd-ok-rgb) / .13); color: var(--wd-ok); border-color: rgb(var(--wd-ok-rgb) / .32); }
|
||||
.wd-status--kritisch { background: rgb(var(--wd-fehler-rgb) / .13); color: var(--wd-fehler); border-color: rgb(var(--wd-fehler-rgb) / .35); }
|
||||
.wd-status--pausiert { background: rgb(var(--wd-chrome-rgb) / .12); color: var(--wd-chrome); border-color: rgb(var(--wd-chrome-rgb) / .30); }
|
||||
.wd-status--vip { background: rgb(var(--wd-gold-rgb) / .13); color: var(--wd-gold); border-color: rgb(var(--wd-gold-rgb) / .35); }
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
@@ -260,6 +260,136 @@ for (const datei of seiten) {
|
||||
pruefe(`alle ${seiten.length} Seiten nutzen dieselbe Farbquelle`,
|
||||
abweichend.length === 0, abweichend.join(", ") || "einheitlich");
|
||||
|
||||
console.log("\n=== 7. AKTIONEN MIT RANG (Seite 14) ===");
|
||||
await seite.goto("http://127.0.0.1:4372/webdesign/index.html");
|
||||
await seite.waitForTimeout(400);
|
||||
|
||||
const raenge = await seite.evaluate(() => {
|
||||
const alle = Array.from(document.styleSheets)
|
||||
.flatMap((b) => { try { return Array.from(b.cssRules); } catch { return []; } })
|
||||
.map((r) => r.cssText).join("\n");
|
||||
return ["haupt", "zweit", "still", "premium", "vip", "gefahr"]
|
||||
.filter((r) => alle.includes(".wd-btn--" + r));
|
||||
});
|
||||
pruefe("alle sechs Rangstufen sind hinterlegt", raenge.length === 6, raenge.join(", "));
|
||||
|
||||
/* Prism Indigo erreicht als SCHRIFT nirgends 4,5:1 (3,25-4,29 gemessen).
|
||||
Es darf deshalb nur als Flaeche unter hellem Text vorkommen. Diese
|
||||
Pruefung haelt genau das fest -- sonst rutscht die Farbe beim
|
||||
naechsten Feinschliff doch in eine Textregel. */
|
||||
const indigoAlsText = await seite.evaluate(() => {
|
||||
const alle = Array.from(document.styleSheets)
|
||||
.flatMap((b) => { try { return Array.from(b.cssRules); } catch { return []; } })
|
||||
.filter((r) => r.style && r.style.color)
|
||||
.filter((r) => /--wd-indigo/.test(r.style.color));
|
||||
return alle.map((r) => r.selectorText);
|
||||
});
|
||||
pruefe("Prism Indigo wird NIE als Schriftfarbe benutzt",
|
||||
indigoAlsText.length === 0, indigoAlsText.join(", ") || "keine");
|
||||
|
||||
console.log("\n=== 8. MATERIALIEN (Seite 7) ===");
|
||||
const materialien = await seite.evaluate(() => {
|
||||
const alle = Array.from(document.styleSheets)
|
||||
.flatMap((b) => { try { return Array.from(b.cssRules); } catch { return []; } })
|
||||
.map((r) => r.cssText).join("\n");
|
||||
return {
|
||||
glas: alle.includes(".wd-glasflaeche"),
|
||||
frost: alle.includes(".wd-frost"),
|
||||
prisma: alle.includes(".wd-prisma"),
|
||||
void_: alle.includes(".wd-void"),
|
||||
/* Das System verbietet weisse Vollflaechen ausdruecklich (Seite 23
|
||||
und 31). Auf einer dunklen Seite waere echtes Weiss ein Loch. */
|
||||
keinWeiss: !/background:\s*(#fff|#ffffff|white)\b/i.test(alle),
|
||||
};
|
||||
});
|
||||
pruefe("Optic Glass ist gebaut", materialien.glas);
|
||||
pruefe("Frosted Ice ist gebaut", materialien.frost);
|
||||
pruefe("Prism Edge ist gebaut", materialien.prisma);
|
||||
pruefe("Void Navy ist gebaut", materialien.void_);
|
||||
pruefe("keine weisse Vollflaeche als Hintergrund", materialien.keinWeiss);
|
||||
|
||||
console.log("\n=== 9. STATUS: NIE NUR FARBE (Seite 16) ===");
|
||||
const status = await seite.evaluate(() => {
|
||||
const alle = Array.from(document.styleSheets)
|
||||
.flatMap((b) => { try { return Array.from(b.cssRules); } catch { return []; } })
|
||||
.map((r) => r.cssText).join("\n");
|
||||
return ["neu", "arbeit", "wartet", "freigabe", "bezahlt", "kritisch", "pausiert", "vip"]
|
||||
.filter((n) => alle.includes(".wd-status--" + n));
|
||||
});
|
||||
pruefe("alle acht Zustaende sind hinterlegt", status.length === 8, status.length + " von 8");
|
||||
|
||||
/* Der Kern der Regel: Eine Statusmarke muss Text enthalten. Eine
|
||||
Variante, die nur einen farbigen Punkt zeigt, waere fuer jeden
|
||||
unlesbar, der Farben nicht unterscheiden kann. */
|
||||
const statusOhneText = await seite.evaluate(() => {
|
||||
const raus = [];
|
||||
for (const el of document.querySelectorAll("[class*='wd-status--'], [class*='vw-status--'], .po-frist")) {
|
||||
if (!(el.textContent || "").trim()) raus.push(el.className);
|
||||
}
|
||||
return raus;
|
||||
});
|
||||
pruefe("keine Statusmarke ohne Text", statusOhneText.length === 0,
|
||||
statusOhneText.join(", ") || "alle mit Text");
|
||||
|
||||
console.log("\n=== 10. FOKUSRING (Seite 19) ===");
|
||||
const fokus = await seite.evaluate(() => {
|
||||
const el = document.querySelector("a[href], button");
|
||||
if (!el) return null;
|
||||
el.focus();
|
||||
const st = getComputedStyle(el);
|
||||
return { breite: st.outlineWidth, abstand: st.outlineOffset, farbe: st.outlineColor };
|
||||
});
|
||||
pruefe("der Fokusring ist mindestens 2px breit",
|
||||
fokus && parseFloat(fokus.breite) >= 2, fokus && fokus.breite);
|
||||
pruefe("er hat sichtbaren Abstand zum Element",
|
||||
fokus && parseFloat(fokus.abstand) >= 2, fokus && fokus.abstand);
|
||||
pruefe("er ist in Aqua gehalten",
|
||||
fokus && /46,\s*242,\s*224/.test(fokus.farbe), fokus && fokus.farbe);
|
||||
|
||||
console.log("\n=== 11. BILDWELT (Seiten 24-29) ===");
|
||||
/* Das System verlangt: keine leere weisse Vollflaeche, jede Seite
|
||||
zeigt ein Motiv oder eine erkennbare Ableitung. Geprueft wird, dass
|
||||
die Motive wirklich laden -- ein Tippfehler im Dateinamen faellt
|
||||
sonst erst live auf. */
|
||||
for (const [seitenname, datei] of [
|
||||
["Startseite", "index.html"],
|
||||
["Zugangswand", "zugang.html"],
|
||||
["Portal", "portal.html"],
|
||||
]) {
|
||||
await seite.goto("http://127.0.0.1:4372/webdesign/" + datei);
|
||||
await seite.waitForTimeout(500);
|
||||
const motiv = await seite.evaluate(() => {
|
||||
const el = document.querySelector(".wd-motiv");
|
||||
if (!el) return null;
|
||||
const vor = getComputedStyle(el, "::before");
|
||||
return { bild: vor.backgroundImage, deckkraft: vor.opacity };
|
||||
});
|
||||
pruefe(`${seitenname}: ein Motiv ist gesetzt`,
|
||||
motiv && /cryo-/.test(motiv.bild), motiv ? motiv.bild.slice(0, 50) : "keins");
|
||||
/* Das Motiv darf den Text nicht ueberstrahlen -- deshalb gedaempft. */
|
||||
pruefe(`${seitenname}: das Motiv ist gedaempft, nicht voll`,
|
||||
motiv && parseFloat(motiv.deckkraft) < 0.7, motiv && motiv.deckkraft);
|
||||
}
|
||||
|
||||
/* Die Bilddateien muessen wirklich existieren und klein genug sein.
|
||||
Ein 2,5-MB-Hintergrund waere auf dem Handy inakzeptabel -- das
|
||||
System nennt fuer Mobile ausdruecklich Ladezeit als Kriterium. */
|
||||
/* cryo-kristall ist der logofreie Ausschnitt fuer die Zugangswand --
|
||||
siehe Begruendung im Stilblatt: zwei Logos auf einem Bildschirm
|
||||
waeren keine Wirkung, sondern ein Fehler. */
|
||||
const bilder = ["cryo-ring", "cryo-wappen", "cryo-monolith", "cryo-kristall"];
|
||||
let zuGross = [];
|
||||
for (const b of bilder) {
|
||||
for (const variante of [b + ".webp", b + "-klein.webp"]) {
|
||||
const pfad = join(W, "assets/img", variante);
|
||||
if (!existsSync(pfad)) { zuGross.push(variante + " FEHLT"); continue; }
|
||||
const kb = readFileSync(pfad).length / 1024;
|
||||
if (kb > 300) zuGross.push(variante + " " + Math.round(kb) + " KB");
|
||||
}
|
||||
}
|
||||
pruefe("alle Motive sind vorhanden und unter 300 KB",
|
||||
zuGross.length === 0, zuGross.join(", ") || "alle schlank");
|
||||
|
||||
await browser.close();
|
||||
srv.close();
|
||||
const f = ergebnisse.filter((e) => !e.ok).length;
|
||||
|
||||
@@ -128,7 +128,13 @@
|
||||
<!-- ================= 01 HERO =================
|
||||
Hero-Regel (Masterplan S.7): ein starkes Versprechen, ein kurzer
|
||||
Nutzen, EINE eindeutige Aktion — ohne Scrollen sichtbar. -->
|
||||
<section class="wd-hero">
|
||||
<!-- Motiv "Liquid Portal" (Referenz B) als Hero-Hintergrund.
|
||||
|
||||
Das System weist diesem Motiv unter anderem "HERO / START" zu
|
||||
(Seite 24) und verlangt fuer die Startseite eine "grosse
|
||||
CRYONOVA-Glasarchitektur mit dunkler Textzone". Genau das leistet
|
||||
.wd-motiv: Bild hinten, Glasflaeche darueber, Text obenauf. -->
|
||||
<section class="wd-hero wd-motiv wd-motiv--ring">
|
||||
<div class="wd-container">
|
||||
<div class="wd-hero-inhalt">
|
||||
<span class="wd-eyebrow" data-i18n="hero_eyebrow">Dogfather Webdesign</span>
|
||||
|
||||
@@ -136,7 +136,7 @@
|
||||
|
||||
<div id="wd-kopf" data-wd-kopf="minimal"></div>
|
||||
|
||||
<main id="wd-inhalt">
|
||||
<main id="wd-inhalt" class="wd-motiv wd-motiv--ring">
|
||||
<section class="wd-abschnitt" style="padding-top:1.6rem">
|
||||
<div class="wd-container wd-container--schmal">
|
||||
|
||||
|
||||
+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-v31";
|
||||
const CACHE_NAME = "dogfather-webdesign-v32";
|
||||
|
||||
/* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
|
||||
HTML-Datei in dieser Liste. */
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
|
||||
<div id="wd-kopf" data-wd-kopf="minimal"></div>
|
||||
|
||||
<main class="zg-buehne">
|
||||
<main class="zg-buehne wd-motiv wd-motiv--monolith">
|
||||
<div class="zg-mitte">
|
||||
|
||||
<div class="zg-logo">
|
||||
|
||||
Reference in New Issue
Block a user