DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Verwaltung: jeder Bereich bekommt eine eigene Signatur

Browse Source 
Aus einem festen Streifen werden sechs. Jeder Reiter hat jetzt ein
eigenes Motiv UND eine eigene Leitfarbe, beides wechselt beim Klick.

Die Zuordnung ist gelesen, nicht ausgewuerfelt:

  Uebersicht  Wappen     Die Zentrale, wo alles zusammenlaeuft.
  Anfragen    Portal     Ein Tor. Hier kommt Neues herein.
  Projekte    Monolith   Etwas, das aufrecht steht und gebaut wird.
  Kunden      Thron      Wer bestellt, steht auf dem Podest.
  Zahlungen   Kristall   Der Wert selbst. Dazu Liquid Gold.
  Postfach    Portal     Wieder ein Tor -- Nachrichten gehen durch.

Farben: Baby Blue, Hyper Aqua, Aurora Violet, Prism Indigo, Liquid Gold,
Ion Blue. Nach ein paar Tagen erkennt man den Bereich an der Farbe,
bevor man den Titel gelesen hat. Aus Deko wird Orientierung.

Das neue Thron-Motiv ist aus dem vierten Bild aufbereitet, im selben
Mass wie die bestehenden (1672x941) und mit kleiner Fassung fuers Handy.

DIE ENTSCHEIDENDE IDEE: Bild und Text teilen sich nicht mehr denselben
Platz. Eine Deckschicht ist links voll deckend und oeffnet sich nach
rechts. Links stehen Titel und Reiter, rechts ist die Flaeche leer --
dort darf das Motiv mit 82 % auftreten statt mit 17 %.

Der erste Versuch war gleichmaessig bei 17 %: ueberall gleich schwach zu
ahnen, ein Fleck statt eines Bildes, und trotzdem hinter der Schrift.
Kurz und kraeftig ist beides besser -- mehr Wirkung dort, wo Platz ist,
null Stoerung dort, wo gearbeitet wird. Der Streifen ist jetzt auch
kuerzer und endet, BEVOR die erste Kachel anfaengt.

Drei Fehler, die der Test gefunden hat und nicht das Auge:

- Alle sechs Bereiche zeigten dasselbe Bild. Die Variablen hingen an
  #vw-bereich, der Schmuckstreifen liegt aber ausserhalb davon -- er
  erbte sie nie und fiel auf den Rueckfallwert zurueck. Die Farben
  wechselten (Reiter und Titel liegen drinnen), die Motive nicht.
- Die waagerechten Ausschnitte bewirkten nichts. Bei "cover" skaliert
  der Browser auf die Breite des Streifens, die volle Bildbreite ist
  immer sichtbar. Erst ein Zoom ueber 100 % schafft Spielraum.
- Das Thron-Motiv schob seine hellen Kristallfluegel bis unter die
  Reiter. Deshalb deckt die Schicht jetzt bis 46 % statt 34 % -- der
  Wert ist gemessen, nicht geschaetzt.

Dazu zwei Dinge, die erst der Screenshot zeigte: angeschnittene Logos im
Streifen (sieht nach Versehen aus, und das Logo steht ohnehin oben
links), und die Knoepfe Suchen/Abmelden lagen ueber dem hellsten Teil
des Bildes. Sie haben jetzt einen eigenen dichten Grund -- Bedienelemente
muessen lesbar sein, egal was dahinter liegt.

Der Test misst nicht mehr "Deckkraft unter 20 %". Dieser Massstab ist
hinfaellig, seit das Motiv nach rechts gerueckt ist: Es darf kraeftig
sein, WEIL es nicht mehr hinter der Schrift liegt. Geprueft wird
stattdessen, wie ruhig der Grund unter der Reiterzeile ist -- mit Motiv
gegen ohne Motiv, in allen sechs Bereichen. Gemessen: plus 0 bis plus 6.

Unveraendert gilt: kein Motiv hinter Listen, Tabellen oder Zahlen. Ein
Bild hinter einer Zahlenspalte ist genau die Art von Schoenheit, die ein
Werkzeug unbrauchbar macht.

Geprueft: 237 Pruefungen gruen (Verwaltung 39, Portfolio 15, CRYONOVA 53,
Blickfang 13, System 5, Abmelden 16, Abbruch 42, Angebot 54).

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-08-25 00:26:23 +02:00
co-authored by Claude Opus 5
parent 9df21fabe1
commit 09bd6330f7
7 changed files with 571 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webdesign/verwaltung.html
+281 -13
View File
@@ -50,28 +50,265 @@
Tabellen oder Zahlen. Ein Bild hinter einer Zahlenspalte ist genau
die Art von Schoenheit, die ein Werkzeug unbrauchbar macht. */
/* ---------- DIE BEREICHS-SIGNATUR ----------
Jeder der sechs Bereiche bekommt ein eigenes Motiv UND eine eigene
Leitfarbe. Beides wechselt beim Reiterklick.
Die Zuordnung ist nicht ausgewuerfelt, sondern gelesen:
Uebersicht Wappen Die Zentrale, wo alles zusammenlaeuft.
Anfragen Portal Ein Tor. Hier kommt Neues herein.
Projekte Monolith Etwas, das aufrecht steht und gebaut wird.
Kunden Thron Wer bestellt, steht auf dem Podest.
Zahlungen Kristall Der Wert selbst. Dazu Liquid Gold.
Postfach Portal Wieder ein Tor -- Nachrichten gehen durch.
Anderer Ausschnitt, andere Farbe, damit es
trotzdem nicht wie "Anfragen" aussieht.
Warum das mehr ist als Deko: Nach ein paar Tagen erkennt man den
Bereich an der Farbe, bevor man den Titel gelesen hat. Der Schmuck
wird zur Orientierung.
Die Regel von vorher gilt unveraendert weiter: NIE ein Motiv hinter
Listen, Tabellen oder Zahlen. Der Streifen ist verschwunden, bevor
die erste Tabelle anfaengt. Ein Bild hinter einer Zahlenspalte ist
genau die Art von Schoenheit, die ein Werkzeug unbrauchbar macht. */
/* Die Variablen haengen am WURZELELEMENT, nicht am Arbeitsbereich.
Beim Bauen hingen sie an #vw-bereich -- und alle sechs Bereiche
zeigten dasselbe Bild. Grund: Der Schmuckstreifen liegt ausserhalb
von #vw-bereich, erbt die Variablen also nie und faellt auf den
Rueckfallwert zurueck. Die Farben wechselten (Reiter und Titel
liegen drinnen), die Motive nicht. */
:root {
/* Rueckfall, falls das Kennzeichen mal fehlt: Dann sieht es aus wie
die Uebersicht, statt gar nicht. */
--vw-motiv: url("/assets/img/cryo-wappen.webp");
--vw-motiv-klein: url("/assets/img/cryo-wappen-klein.webp");
--vw-farbe: var(--wd-blau-rgb);
--vw-blick: center top;
}
[data-vw-bereich="uebersicht"] {
--vw-motiv: url("/assets/img/cryo-wappen.webp");
--vw-motiv-klein: url("/assets/img/cryo-wappen-klein.webp");
--vw-farbe: var(--wd-blau-rgb);
--vw-blick: 76% 52%;
}
[data-vw-bereich="anfragen"] {
--vw-motiv: url("/assets/img/cryo-ring.webp");
--vw-motiv-klein: url("/assets/img/cryo-ring-klein.webp");
--vw-farbe: var(--wd-aqua-rgb);
--vw-blick: 72% 46%;
}
[data-vw-bereich="projekte"] {
--vw-motiv: url("/assets/img/cryo-monolith.webp");
--vw-motiv-klein: url("/assets/img/cryo-monolith-klein.webp");
--vw-farbe: var(--wd-lila-rgb);
--vw-blick: 80% 46%;
}
[data-vw-bereich="kunden"] {
--vw-motiv: url("/assets/img/cryo-thron.webp");
--vw-motiv-klein: url("/assets/img/cryo-thron-klein.webp");
/* Prism Indigo -- hier unbedenklich, weil es NUR Flaeche und Kante
faerbt. Als Schriftfarbe faellt es durch (3,25:1), deshalb steht
weiter unten ausdruecklich, dass die Schrift davon unberuehrt
bleibt. */
--vw-farbe: var(--wd-indigo-rgb);
--vw-blick: 84% 52%;
}
[data-vw-bereich="zahlungen"] {
--vw-motiv: url("/assets/img/cryo-kristall.webp");
--vw-motiv-klein: url("/assets/img/cryo-kristall-klein.webp");
--vw-farbe: var(--wd-gold-rgb);
--vw-blick: center 38%;
}
[data-vw-bereich="postfach"] {
--vw-motiv: url("/assets/img/cryo-ring.webp");
--vw-motiv-klein: url("/assets/img/cryo-ring-klein.webp");
--vw-farbe: var(--wd-ion-rgb);
/* Bewusst der andere Bildrand als bei "Anfragen": gleiches Bild,
voellig anderer Ausschnitt. */
--vw-blick: 12% 54%;
}
/* Warum 190% statt cover: Bei "cover" skaliert der Browser das Bild
auf die Breite des Streifens -- die volle Bildbreite ist dann immer
sichtbar, und eine waagerechte Ausschnittsangabe bewirkt schlicht
nichts. Genau das ist hier passiert: Alle Werte von 62% bis 84%
zeigten dasselbe Bild. Erst mit einem Zoom ueber 100% entsteht
ueberhaupt Spielraum, den --vw-blick verschieben kann.
190% ist so gewaehlt, dass der Streifen auf jeder Bildschirmbreite
gefuellt bleibt: Die Bildbreite ist immer 1,9-mal so breit wie der
Streifen, die Hoehe waechst proportional mit.
Zu den Ausschnitten (--vw-blick): Sie sind so gewaehlt, dass KEIN
Logo angeschnitten im Streifen haengt. Ein halber Hundekopf mitten
im Bild sieht nach Versehen aus, nicht nach Absicht -- und das Logo
steht ohnehin schon oben links in der Kopfleiste. Gezeigt werden
stattdessen die Kristallformationen, also das, was an den Motiven
tatsaechlich spektakulaer ist. */
.vw-schmuck {
position: absolute;
top: 0; left: 0; right: 0;
height: clamp(220px, 34vh, 380px);
/* Genau die Kopfzone: Titel plus Reiterreihe, mehr nicht. Der
Streifen ist zu Ende, BEVOR die erste Kachel anfaengt.
Vorher war er fast doppelt so hoch und reichte in den
Kachelbereich hinein. Dadurch musste er blass bleiben, sonst
haette er durch die halbdurchsichtigen Kacheln geschienen. Kurz
und kraeftig ist beides besser: mehr Wirkung dort, wo Platz ist,
und null Stoerung dort, wo gearbeitet wird. */
height: clamp(186px, 25vh, 250px);
z-index: -1;
pointer-events: none;
background: url("/assets/img/cryo-ring.webp") center top / cover no-repeat;
/* Sehr leise. Der Wert ist bewusst niedriger als bei den
oeffentlichen Motiven (.55): Dort traegt das Bild die Stimmung,
hier darf es die Kopfzeile nur andeuten. */
opacity: .16;
/* Nach unten sauber ausblenden, damit es keine sichtbare Kante
gibt, an der das Bild einfach aufhoert. */
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
/* ZWEI Ebenen, und die Reihenfolge ist der ganze Trick:
oben eine Deckschicht, darunter das Motiv.
Die Deckschicht ist LINKS fast undurchsichtig und wird nach
rechts hin offen. Links stehen Titel und Reiter -- dort bleibt es
ruhig. Rechts ist die Flaeche leer, dort darf das Bild richtig
auftreten.
Der erste Versuch war gleichmaessig bei 17 % Deckkraft. Ergebnis:
Das Wappen war ueberall gleich schwach zu ahnen, ein Fleck statt
eines Bildes -- und trotzdem lag es hinter der Schrift. Diese
Loesung ist beides zugleich staerker und ruhiger, weil Bild und
Text sich schlicht nicht mehr denselben Platz teilen. */
background:
/* Bis 46 % voll deckend -- das ist genau die Zone, in der Titel
und Reiterreihe liegen. Der Wert ist gemessen, nicht geschaetzt:
Bei 34 % schob das Thron-Motiv seine hellen Kristallfluegel bis
unter die Reiter und machte den Grund dort merklich unruhiger
als ohne Bild. */
linear-gradient(100deg,
rgb(3 8 16 / 1) 0%,
rgb(3 8 16 / 1) 46%,
rgb(3 8 16 / .52) 64%,
rgb(3 8 16 / .05) 86%,
rgb(3 8 16 / 0) 100%),
var(--vw-motiv, url("/assets/img/cryo-wappen.webp"))
var(--vw-blick, center top) / 190% auto no-repeat;
opacity: .82;
/* Unten ausblenden, damit es keine sichtbare Kante gibt, an der das
Bild einfach aufhoert. */
-webkit-mask-image:
linear-gradient(180deg, #000 0%, #000 55%, rgb(0 0 0 / .45) 82%, transparent 100%);
mask-image:
linear-gradient(180deg, #000 0%, #000 55%, rgb(0 0 0 / .45) 82%, transparent 100%);
}
/* Die Kristallkante als eigene Ebene: ein sehr schmaler Leuchtsaum in
der Leitfarbe, der den Streifen nach unten abschliesst. */
.vw-schmuck::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgb(var(--vw-farbe) / .55) 22%,
rgb(var(--vw-farbe) / .18) 50%,
rgb(var(--vw-farbe) / .55) 78%,
transparent 100%);
clip-path: polygon(
0% 0%, 6% 100%, 13% 0%, 21% 100%, 29% 0%, 37% 100%, 45% 0%,
53% 100%, 61% 0%, 69% 100%, 77% 0%, 85% 100%, 93% 0%, 100% 100%);
}
/* Beim Bereichswechsel blendet die Signatur kurz aus und wieder ein.
Ohne das springt das Bild hart um -- mit sieht es aus, als wuerde
der Raum wechseln. */
@keyframes vw-signatur-ein {
from { opacity: 0; transform: scale(1.05); }
to { opacity: .82; transform: none; }
}
.vw-schmuck { animation: vw-signatur-ein .55s ease-out both; }
@media (max-width: 900px) {
/* Auf dem Handy die kleine Fassung -- 34 KB statt 113 KB fuer ein
Bild, das ohnehin nur angedeutet ist. */
.vw-schmuck { background-image: url("/assets/img/cryo-ring-klein.webp"); opacity: .13; }
/* Auf dem Handy die kleine Fassung -- ein Bruchteil der Datenmenge
fuer ein Bild, das ohnehin nur angedeutet ist. */
/* Auf dem Handy ist links kein Platz, den man freihalten koennte --
die Reiter laufen ueber die ganze Breite. Deshalb hier eine
gleichmaessige Deckschicht und deutlich weniger Bild. */
.vw-schmuck {
background:
linear-gradient(180deg,
rgb(3 8 16 / .82) 0%,
rgb(3 8 16 / .88) 60%,
rgb(3 8 16 / .95) 100%),
var(--vw-motiv-klein, url("/assets/img/cryo-wappen-klein.webp"))
var(--vw-blick, center top) / 190% auto no-repeat;
opacity: .62;
height: clamp(200px, 30vh, 300px);
}
@keyframes vw-signatur-ein {
from { opacity: 0; transform: scale(1.04); }
to { opacity: .62; transform: none; }
}
}
/* Wer Bewegung reduziert haben will, bekommt den Wechsel ohne
Animation -- das Motiv ist trotzdem da. */
@media (prefers-reduced-motion: reduce) {
.vw-schmuck { animation: none; }
}
/* Suchen und Abmelden sitzen oben rechts -- also genau dort, wo das
Motiv am hellsten ist. Bedienelemente muessen immer lesbar sein,
egal was dahinter liegt. Deshalb bekommen sie hier einen eigenen,
dichten Grund statt der sonst halbdurchsichtigen Flaeche.
backdrop-filter ist bewusst nur eine Zugabe: Wo der Browser es
nicht kann, traegt schon die Farbe allein. */
#vw-bereich .vw-wer {
background: rgb(3 8 16 / .82);
border-radius: 999px;
padding: .3rem .5rem;
-webkit-backdrop-filter: blur(9px);
backdrop-filter: blur(9px);
}
/* ---------- Die Leitfarbe faerbt mit ---------- */
/* Der aktive Reiter traegt die Farbe seines Bereichs. Das ist der
Moment, in dem aus Deko Orientierung wird. */
#vw-bereich .vw-filter-knopf.vw-an {
border-color: rgb(var(--vw-farbe) / .55);
background: rgb(var(--vw-farbe) / .14);
box-shadow: 0 0 18px -6px rgb(var(--vw-farbe) / .5);
}
/* Die Schrift bleibt ABSICHTLICH hell und wird NICHT eingefaerbt.
Sonst waere der Reiter im Bereich "Kunden" in Prism Indigo
geschrieben -- die einzige Farbe der Palette, die als Text
durchfaellt (3,25:1 gegen die dunklen Flaechen). */
#vw-bereich .vw-filter-knopf.vw-an { color: var(--wd-text); }
/* Ein feiner Leuchtstrich unter dem Titel, in der Leitfarbe.
Traegt keine Bedeutung, die nur ueber Farbe laeuft -- der Titel
daneben sagt dasselbe in Worten. */
#vw-bereich .vw-leiste h1 { position: relative; }
#vw-bereich .vw-leiste h1::after {
content: "";
position: absolute;
left: 0; bottom: -.32em;
width: clamp(46px, 22%, 120px);
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg,
rgb(var(--vw-farbe) / .95), rgb(var(--vw-farbe) / 0));
}
/* Das Licht, das den Kacheln unter dem Mauszeiger folgt, nimmt
ebenfalls die Leitfarbe an. Dadurch fuehlt sich jeder Bereich
anders an, ohne dass irgendwo ein zweites Bild noetig waere. */
#vw-bereich .wd-karte { --wd-lumen: var(--vw-farbe); }
/* Die Anmeldekarte bekommt das Wappen. Sie ist halbdurchsichtig,
das Motiv scheint also durch die Glasflaeche hindurch.
@@ -3067,9 +3304,40 @@
var aktiverTab = "uebersicht";
document.getElementById("vw-titel").textContent = ANSICHTEN[aktiverTab].titel;
/* ---------------------------------------------------------------------
Die Bereichs-Signatur umschalten.
Das Kennzeichen sitzt am Wurzelelement, nicht am Reiter: So kann das
Stilblatt allein daraus Motiv UND Leitfarbe ableiten, und es gibt
genau eine Stelle, an der sich der Bereich aendert.
Der Umweg ueber "animation neu ausloesen" ist noetig, weil eine
CSS-Animation nicht von selbst neu startet, wenn sich nur eine
Variable aendert. Ohne ihn springt das Bild hart um, statt sanft
zu wechseln.
--------------------------------------------------------------------- */
function signaturSetzen(bereich) {
if (!ANSICHTEN[bereich]) return; // unbekannt: lieber nichts tun
document.documentElement.setAttribute("data-vw-bereich", bereich);
var schmuck = document.querySelector(".vw-schmuck");
if (!schmuck) return;
/* Wer Bewegung reduziert haben will, bekommt keinen Neustart -- die
Animation ist fuer ihn ohnehin abgeschaltet. */
try {
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
} catch (e) { /* aeltere Browser: dann eben mit Animation */ }
schmuck.style.animation = "none";
void schmuck.offsetWidth; // erzwingt das Neuberechnen
schmuck.style.animation = "";
}
signaturSetzen(aktiverTab);
document.querySelectorAll("[data-tab]").forEach(function (b) {
b.addEventListener("click", function () {
aktiverTab = b.dataset.tab;
signaturSetzen(aktiverTab);
document.querySelectorAll("[data-tab]").forEach(function (x) {
x.classList.toggle("vw-an", x.dataset.tab === aktiverTab);
});