From c597753abf00724f381b71da41bf80bfac406983 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sat, 22 Aug 2026 22:14:00 +0200 Subject: [PATCH] Portal: Zahlenkreise, Typografie und eine echte Farblogik fuer Phasen Drei Rueckmeldungen vom 22.08.2026, alle drei berechtigt. 1) "die kisten sollen auch eine spezielle farbe bekommen wenn sie fertig sind" -- das war inhaltlich der wichtigste Punkt. Vorher sahen erledigte und gerade laufende Phase fast gleich blau aus. Damit ging die einzige Aussage verloren, die die Leiste ueberhaupt traegt: naemlich WO man steht. Jetzt drei klar getrennte Zustaende: erledigt gruen, ruhig laeuft grad leuchtendes Blau mit langsamem Puls kommt noch gedaempft Die Vorschau erklaert die Logik gleich mit: ihre Leiste wandert von blau nach gruen, statt nur an- und auszugehen. Dazu eine Legende in Worten. Farbe allein ist nie Information -- wer sie nicht unterscheiden kann, liest hier trotzdem, was sie bedeutet. 2) "die zahlen sollen besser im kreis sein" -- vorher ein flacher Kreis mit Zahl. Jetzt ein doppelter Ring: aussen ein Farbverlauf als Rand, innen die dunkle Flaeche, dazu ein weicher Schein. Derselbe Kniff wie bei den Karten (Verlauf ueber border-box); der Kreis wirkt dadurch plastisch statt aufgemalt. Jede der vier Kacheln hat ihre eigene Farbe -- vier gleiche Kacheln wirken wie eine Aufzaehlung, vier unterscheidbare wie ein System. 3) "schrift soll spezieller sein" -- die Kachel-Ueberschrift war so gross wie der Text darunter und ging unter. Jetzt groesser, in der Headline-Schrift, enger gesetzt mit leicht negativer Laufweite. Die Ueberschrift "Gleich geht es los" bekommt einen Farbverlauf. 45/45 Handy-Abnahme, i18n vollstaendig, prefers-reduced-motion beachtet. Co-Authored-By: Claude Opus 5 --- assets/css/webdesign.css | 137 ++++++++++++++++++++++++++++++++++++ assets/js/i18n-wd-portal.js | 4 ++ assets/js/wd-portal.js | 7 ++ 3 files changed, 148 insertions(+) diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css index 4f14f2be..f94aeaad 100644 --- a/assets/css/webdesign.css +++ b/assets/css/webdesign.css @@ -1050,3 +1050,140 @@ a.wd-karte:hover, .wd-karte--klickbar:hover { background: linear-gradient(135deg, rgba(127,208,232,.22), rgba(183,157,255,.18)); color: var(--wd-blau-hell); border-color: var(--wd-rand-stark); } + +/* --------------------------------------------------------------------- + 20. LEERER ZUSTAND — GEHOBENE FASSUNG + + Drei Rückmeldungen vom 22.08.2026, alle drei berechtigt: + "Schrift und Kacheln sollen viel spezieller sein", "die Zahlen sollen + besser im Kreis sein", "die Kisten sollen eine spezielle Farbe + bekommen wenn sie fertig sind". + + Der letzte Punkt war der wichtigste und inhaltlich der schwerste: + Vorher waren erledigte und laufende Phase fast gleich blau. Damit ging + die einzige Information verloren, die die Leiste überhaupt trägt — + nämlich WO man gerade steht. Jetzt sind es drei klar verschiedene + Zustände: erledigt (grün), gerade dran (leuchtendes Blau mit Puls), + kommt noch (gedämpft). + --------------------------------------------------------------------- */ + +/* ---------- Zahlenkreise ---------- + Vorher ein flacher Kreis mit Zahl. Jetzt ein doppelter Ring: außen ein + Farbverlauf als Rand, innen die dunkle Fläche. Das ist derselbe Kniff + wie bei den Karten (Verlauf über border-box) und lässt den Kreis + plastisch wirken, statt aufgemalt. */ +.po-leer-nr { + width: 40px; height: 40px; border-radius: 50%; + font-size: 1.02rem; font-weight: 800; + color: var(--wd-blau-hell); + border: 2px solid transparent; + background: + linear-gradient(#0c1523, #0c1523) padding-box, + linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box; + box-shadow: 0 0 18px -6px rgba(127, 208, 232, .55); + flex-shrink: 0; + font-variant-numeric: tabular-nums; + letter-spacing: -.02em; +} + +/* ---------- Merkmalskacheln ---------- + Jede bekommt oben eine eigene Farbkante. Vier gleiche Kacheln wirken + wie eine Aufzählung; vier unterscheidbare wirken wie ein System. */ +.po-leer-punkt { + position: relative; + overflow: hidden; + padding: 1.1rem 1.15rem 1.15rem; + border-radius: 16px; + gap: 1rem; + background: linear-gradient(180deg, rgba(20, 32, 50, .58), rgba(9, 15, 26, .74)); +} +.po-leer-punkt::before { + content: ""; + position: absolute; top: 0; left: 0; right: 0; height: 3px; + background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); + 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(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, + linear-gradient(140deg, var(--wd-lila), var(--wd-blau)) border-box; + box-shadow: 0 0 18px -6px rgba(183, 157, 255, .55); +} +.po-leer-punkt:nth-child(3) .po-leer-nr { + color: var(--wd-ok); + background: linear-gradient(#0c1523, #0c1523) padding-box, + linear-gradient(140deg, var(--wd-ok), var(--wd-blau)) border-box; + box-shadow: 0 0 18px -6px rgba(111, 214, 163, .5); +} +.po-leer-punkt:nth-child(4) .po-leer-nr { + color: var(--wd-gold); + background: linear-gradient(#0c1523, #0c1523) padding-box, + linear-gradient(140deg, var(--wd-gold), var(--wd-lila)) border-box; + box-shadow: 0 0 18px -6px rgba(232, 200, 119, .5); +} + +/* ---------- Typografie ---------- + Die Überschrift der Kachel war so groß wie der Fließtext darunter und + ging dadurch unter. Jetzt größer, enger gesetzt und mit einem Hauch + negativer Laufweite — das ist der Unterschied, den man als "wertig" + empfindet, ohne ihn benennen zu können. */ +.po-leer-punkt strong { + font-family: var(--font-head); + font-size: 1.06rem; font-weight: 800; + letter-spacing: -.015em; line-height: 1.25; + margin-bottom: .3rem; +} +.po-leer-punkt span { font-size: .9rem; line-height: 1.6; } + +.po-leer h3 { + font-size: clamp(1.5rem, 3.6vw, 2rem); + letter-spacing: -.02em; + background: linear-gradient(120deg, var(--wd-text), var(--wd-blau-hell) 70%); + -webkit-background-clip: text; background-clip: text; color: transparent; +} +.po-leer > p { font-size: 1.02rem; } + +/* ---------- Phasen: drei klar verschiedene Zustände ---------- + Das war der eigentliche Mangel. Erledigt und laufend sahen fast gleich + 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)); + box-shadow: 0 0 8px -2px rgba(111, 214, 163, .5); +} +.po-phase.po-jetzt { + background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); + box-shadow: 0 0 14px -2px rgba(127, 208, 232, .85); + animation: po-jetzt-puls 2.4s ease-in-out infinite; +} +@keyframes po-jetzt-puls { 0%, 100% { opacity: .82; } 50% { opacity: 1; } } +@media (prefers-reduced-motion: reduce) { .po-phase.po-jetzt { animation: none; opacity: 1; } } + +/* Dieselbe Logik in der Vorschau: die durchlaufende Leiste wechselt von + "gerade dran" (blau) nach "erledigt" (grün), statt einfach nur an- und + auszugehen. Damit erklärt die Vorschau die Farblogik gleich mit. */ +@keyframes po-phase-lauf { + 0%, 8% { background: rgba(127, 208, 232, .13); box-shadow: none; } + 14%, 30% { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); + box-shadow: 0 0 12px -2px rgba(127, 208, 232, .8); } + 38%, 62% { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok)); + box-shadow: 0 0 8px -2px rgba(111, 214, 163, .45); } + 100% { background: rgba(127, 208, 232, .13); box-shadow: none; } +} + +/* Kleine Legende unter der Vorschau, damit die Farben nicht geraten + werden müssen. Farbe allein ist nie Information. */ +.po-legende { + display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; + margin-top: .9rem; font-size: .78rem; color: var(--wd-text-soft); +} +.po-legende span { display: inline-flex; align-items: center; gap: .4rem; } +.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-jetzt { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); } +.po-legende .po-l-offen { background: rgba(127, 208, 232, .18); } diff --git a/assets/js/i18n-wd-portal.js b/assets/js/i18n-wd-portal.js index ba7c1100..df2684cd 100644 --- a/assets/js/i18n-wd-portal.js +++ b/assets/js/i18n-wd-portal.js @@ -94,6 +94,10 @@ window.I18N_WD = { pt: "Ver o esboço e dar feedback", }, + po_l_fertig: { de: "erledigt", "de-CH": "erledigt", en: "done", fr: "terminé", pt: "concluído" }, + po_l_jetzt: { de: "läuft gerade", "de-CH": "lauft grad", en: "in progress", fr: "en cours", pt: "em curso" }, + po_l_offen: { de: "kommt noch", "de-CH": "chunnt no", en: "still to come", fr: "à venir", pt: "ainda por vir" }, + po_leer_h3: { de: "Gleich geht es los", "de-CH": "Glii gohts los", diff --git a/assets/js/wd-portal.js b/assets/js/wd-portal.js index d82052fb..491fb3d8 100644 --- a/assets/js/wd-portal.js +++ b/assets/js/wd-portal.js @@ -196,6 +196,13 @@ "" + '

' + s(window.WD.t("po_naechster_schritt")) + ": " + s(window.WD.t("po_vorschau_schritt")) + "

" + + /* Legende: Farbe allein ist nie Information. Wer sie nicht + unterscheiden kann, liest hier trotzdem, was sie bedeutet. */ + '
' + + '' + s(window.WD.t("po_l_fertig")) + "" + + '' + s(window.WD.t("po_l_jetzt")) + "" + + '' + s(window.WD.t("po_l_offen")) + "" + + "
" + "" + '
' +