diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css index e2ab846f..58c08ccc 100644 --- a/assets/css/webdesign.css +++ b/assets/css/webdesign.css @@ -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 : 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); } diff --git a/assets/img/cryo-kristall-klein.webp b/assets/img/cryo-kristall-klein.webp new file mode 100644 index 00000000..038672de Binary files /dev/null and b/assets/img/cryo-kristall-klein.webp differ diff --git a/assets/img/cryo-kristall.webp b/assets/img/cryo-kristall.webp new file mode 100644 index 00000000..bd370fc8 Binary files /dev/null and b/assets/img/cryo-kristall.webp differ diff --git a/assets/img/cryo-monolith-klein.webp b/assets/img/cryo-monolith-klein.webp new file mode 100644 index 00000000..5d0d1f9c Binary files /dev/null and b/assets/img/cryo-monolith-klein.webp differ diff --git a/assets/img/cryo-monolith.webp b/assets/img/cryo-monolith.webp new file mode 100644 index 00000000..0bd760e2 Binary files /dev/null and b/assets/img/cryo-monolith.webp differ diff --git a/assets/img/cryo-ring-klein.webp b/assets/img/cryo-ring-klein.webp new file mode 100644 index 00000000..853bcaff Binary files /dev/null and b/assets/img/cryo-ring-klein.webp differ diff --git a/assets/img/cryo-ring.webp b/assets/img/cryo-ring.webp new file mode 100644 index 00000000..e63ff1e6 Binary files /dev/null and b/assets/img/cryo-ring.webp differ diff --git a/assets/img/cryo-wappen-klein.webp b/assets/img/cryo-wappen-klein.webp new file mode 100644 index 00000000..4698590d Binary files /dev/null and b/assets/img/cryo-wappen-klein.webp differ diff --git a/assets/img/cryo-wappen.webp b/assets/img/cryo-wappen.webp new file mode 100644 index 00000000..58a5a5d9 Binary files /dev/null and b/assets/img/cryo-wappen.webp differ diff --git a/pruef-cryonova.mjs b/pruef-cryonova.mjs index 170faea9..0163b23b 100644 --- a/pruef-cryonova.mjs +++ b/pruef-cryonova.mjs @@ -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; diff --git a/webdesign/index.html b/webdesign/index.html index 65b6f1ca..a0bf85f6 100644 --- a/webdesign/index.html +++ b/webdesign/index.html @@ -128,7 +128,13 @@ -
+ +
Dogfather Webdesign diff --git a/webdesign/portal.html b/webdesign/portal.html index ac10ab89..8923c105 100644 --- a/webdesign/portal.html +++ b/webdesign/portal.html @@ -136,7 +136,7 @@
-
+
diff --git a/webdesign/sw.js b/webdesign/sw.js index ce4a037d..bfca6ed4 100644 --- a/webdesign/sw.js +++ b/webdesign/sw.js @@ -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. */ diff --git a/webdesign/zugang.html b/webdesign/zugang.html index c88363f1..a0426df6 100644 --- a/webdesign/zugang.html +++ b/webdesign/zugang.html @@ -111,7 +111,7 @@
-
+