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

Startseite: aus siebzehn gleichen Rechtecken wird eine Uebersicht

Browse Source 
Sie war eine Wand: siebzehn identische Kaesten, auf jedem stand "OEFFNEN".
Wenn alles gleich aussieht, ist alles gleich wichtig -- also nichts. Und
"OEFFNEN" ist keine Information; dass eine Kachel sich oeffnen laesst,
weiss man.

Drei Aenderungen, jede mit einem Grund:

1. GRUPPEN statt einer Liste. "Taeglich" (was man sowieso jeden Tag
   aufmacht), "Rund um den Creator" (die Betreuungsakte), "Team & System"
   (was den Laden am Laufen haelt). Das sind drei verschiedene Absichten.

2. ZAHLEN STATT "OEFFNEN". Auf der Kachel steht jetzt, wo Arbeit liegt --
   "Aufgaben 4", rot markiert, weil etwas ueberfaellig ist. Gespeist aus
   DERSELBEN Quelle wie die Hinweisliste darueber, kein zweiter Zaehler:
   Zwei verschiedene Wahrheiten uebereinander auf einem Bildschirm waeren
   schlimmer als gar keine Zahl.

3. ZEICHEN UND FARBE. Siebzehn eigene Linienzeichen (eigene Pfade, keine
   Fremdbibliothek -- kleiner als jede Schriftart und keine zusaetzliche
   Lieferkette) und acht Farbtoene.

Warum acht Toene und nicht siebzehn: Ich hatte zuerst eine eigene Farbe
je Kachel gebaut und das Ergebnis pruefen lassen. Zwei Paare hatten einen
Abstand von 1.4 und 5.6 -- also praktisch dieselbe Farbe. Das sieht nach
Zufall aus, nicht nach Absicht. Die acht jetzt verwendeten sind gegen
genau diesen Hintergrund gerechnet und bestehen alle Pruefungen
(Helligkeitsband, Farbstaerke, Farbfehlsichtigkeit dE 8.4,
Normalsicht 19.3, Kontrast). Verteilt so, dass in einer Zeile nie
zweimal derselbe Ton steht. Die Farbe stuetzt nur -- WAS eine Kachel
ist, sagen Zeichen und Name.

Dazu:
- Begruessung nach Tageszeit statt immer "Willkommen".
- Sechs Nullen nebeneinander sind Rauschen: Ist wirklich nichts offen,
  steht dort ein Satz und der Platz gehoert den Bereichen.
- Die Hinweisliste stand mit sieben Zeilen im Weg. Jetzt vier sichtbar,
  Rest auf Knopfdruck -- derselbe Helfer wie im Protokoll und im Verlauf.
- Gestaffelter Einlauf, aber in einer no-preference-Abfrage: Bei
  "weniger Bewegung" entsteht gar keine Animation, nicht nur eine ohne
  Dauer. Geprueft mit reducedMotion.

Beim Ansehen des ersten Bildes fielen abgeschnittene Untertitel auf
("Stammdaten, Ziele, 90-..."). Abgeschnittener Text ist der haeufigste
stille Fehler in einer Kachel, weil er nach Absicht aussieht. Texte
gekuerzt -- und der Test misst jetzt die tatsaechliche Textbreite gegen
die verfuegbare, damit es nicht wiederkommt.

40 Pruefungen, Computer und Handy, alle vier Rollen: Ein Creator sieht
"Mein Profil" statt der Liste aller Creator, keine Personenverwaltung,
keine Pipeline, keine Automationen -- und trotzdem drei saubere Gruppen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-08-31 22:36:29 +02:00
co-authored by Claude Opus 5
parent 43ce6551e2
commit d05a772ee4
22 changed files with 805 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/start.css
+186 -32
View File
@@ -214,52 +214,206 @@ body.start {
.zahl[data-warn="ja"] { border-color: rgba(255, 154, 162, .42); background: rgba(255, 154, 162, .07); }
.zahl[data-warn="ja"] .zahl__wert { color: var(--warn); }
/* ---------- Bereiche --------------------------------------------------- */
/* ---------- Bereiche: Gruppen und Kacheln --------------------------------
.bereiche {
Vorher: siebzehn gleiche Rechtecke mit "ÖFFNEN" darauf. Wenn alles
gleich aussieht, ist alles gleich wichtig -- also nichts.
Drei Dinge tragen jetzt die Gestaltung:
1. Die Kachel ist ruhig, bis man sie ansieht. Der Farbton sitzt im
Zeichen und in einer schmalen Kante -- nicht als Fläche. Siebzehn
farbige Flächen wären ein Bonbonglas, kein Werkzeug.
2. Beim Überfahren geht ein sehr weicher Schimmer aus der oberen
linken Ecke an. Kein Blitzen, kein Springen: Alphawerte unter 0.25,
Bewegung unter einem Pixel.
3. Der Einlauf ist gestaffelt -- genau EINE Bewegung beim Aufbau,
danach Ruhe. Bei "weniger Bewegung" fällt sie ersatzlos weg.
Die acht Farbtöne sind gegen genau diesen Hintergrund gerechnet:
Helligkeitsband, Farbstärke, Abstand bei Farbfehlsichtigkeit
(schlechtestes Paar dE 8.4), Normalsicht-Abstand (19.3) und Kontrast
-- alle Prüfungen bestanden. Warum acht und nicht siebzehn: Siebzehn
unterscheidbare Farben gibt es nicht; ein Versuch mit einer eigenen
Farbe je Kachel ergab Paare mit Abstand 1.4, also praktisch dieselbe
Farbe. Sie stützen nur -- WAS eine Kachel ist, sagen Zeichen und Name.
------------------------------------------------------------------------- */
.gruppe { margin-bottom: 34px; }
.gruppe:last-child { margin-bottom: 0; }
.gruppe__kopf {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px; padding-bottom: 9px;
border-bottom: 1px solid var(--rand);
}
.gruppe__name {
margin: 0; font-size: .76rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise);
}
.gruppe__unter { font-size: .78rem; color: var(--text-still); }
.kacheln {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bereich {
display: flex; align-items: baseline; gap: 10px;
padding: 13px 15px;
background: rgba(255, 255, 255, .03);
/* Die acht geprüften Töne. Zugewiesen wird der PLATZ, nicht der Rang --
so behält ein Bereich seine Farbe, auch wenn andere dazukommen. */
.kachel[data-ton="1"] { --ton: #3987e5; }
.kachel[data-ton="2"] { --ton: #d95926; }
.kachel[data-ton="3"] { --ton: #199e70; }
.kachel[data-ton="4"] { --ton: #c98500; }
.kachel[data-ton="5"] { --ton: #d55181; }
.kachel[data-ton="6"] { --ton: #4d9e4d; }
.kachel[data-ton="7"] { --ton: #9085e9; }
.kachel[data-ton="8"] { --ton: #e66767; }
.kachel {
--ton: var(--akzent);
position: relative;
border-radius: 15px;
background:
linear-gradient(155deg,
color-mix(in srgb, var(--ton) 9%, transparent),
rgba(255, 255, 255, .022) 45%);
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
overflow: hidden;
transition: border-color var(--tempo), transform var(--tempo);
}
.kachel[data-gross="ja"] { grid-column: span 2; }
/* Die farbige Kante links. Sie ist das Einzige, was den Ton kräftig
zeigt -- drei Pixel reichen, um eine Kachel wiederzuerkennen. */
.kachel::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--ton), transparent 90%);
opacity: .5;
transition: opacity var(--tempo);
}
.bereich__name { font-weight: 600; font-size: .95rem; }
.bereich__stand {
margin-left: auto;
font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
color: var(--text-still);
white-space: nowrap;
/* Der Schimmer beim Überfahren. Liegt still auf 0 und wird nur
eingeblendet -- nichts bewegt sich, es wird nur heller. */
.kachel::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120% 130% at 0% 0%,
color-mix(in srgb, var(--ton) 16%, transparent), transparent 62%);
opacity: 0;
transition: opacity var(--tempo);
}
/* Phase 1 ist in Arbeit - das wird hervorgehoben, der Rest bleibt ruhig. */
.bereich[data-phase="1"] { border-color: rgba(63, 189, 245, .34); }
.bereich[data-phase="1"] .bereich__stand { color: var(--akzent); }
/* Fertige Bereiche sind anklickbar und heben sich deutlich ab. */
.bereich[data-fertig="ja"] {
padding: 0;
border-color: rgba(63, 189, 245, .5);
background: linear-gradient(100deg, rgba(63, 189, 245, .10), rgba(138, 118, 255, .07));
transition: border-color var(--tempo), background var(--tempo);
.kachel:hover {
border-color: color-mix(in srgb, var(--ton) 42%, var(--rand));
transform: translateY(-1px);
}
.bereich[data-fertig="ja"]:hover { border-color: rgba(63, 189, 245, .8); }
.kachel:hover::before { opacity: 1; }
.kachel:hover::after { opacity: 1; }
.kachel:has(:focus-visible) { border-color: var(--ton); }
.bereich__link {
display: flex; align-items: baseline; gap: 10px; width: 100%;
padding: 13px 15px;
.kachel__link {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 12px;
padding: 14px 15px 14px 17px;
color: inherit; text-decoration: none;
border-radius: var(--radius-klein);
}
.bereich__link:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bereich[data-fertig="ja"] .bereich__stand { color: var(--akzent); font-weight: 600; }
.kachel__link:focus-visible {
outline: 2px solid var(--ton); outline-offset: -3px; border-radius: 13px;
}
/* Das Zeichen sitzt in einem eigenen kleinen Feld -- dadurch bekommt der
Ton eine Fläche, ohne dass die ganze Kachel farbig wird. */
.kachel__zeichen {
flex: none;
display: grid; place-items: center;
width: 38px; height: 38px; border-radius: 11px;
background: color-mix(in srgb, var(--ton) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--ton) 28%, transparent);
transition: background var(--tempo), border-color var(--tempo);
}
.kachel:hover .kachel__zeichen {
background: color-mix(in srgb, var(--ton) 24%, transparent);
border-color: color-mix(in srgb, var(--ton) 52%, transparent);
}
.kachel[data-gross="ja"] .kachel__zeichen { width: 44px; height: 44px; border-radius: 13px; }
.kachel__svg {
width: 20px; height: 20px;
fill: none; stroke: var(--ton);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.kachel[data-gross="ja"] .kachel__svg { width: 23px; height: 23px; }
.kachel__text { display: grid; gap: 1px; min-width: 0; }
.kachel__name {
font-size: .93rem; font-weight: 650; letter-spacing: -.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kachel[data-gross="ja"] .kachel__name { font-size: 1.02rem; }
.kachel__unter {
font-size: .74rem; color: var(--text-still);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Zahl auf der Kachel. Sie ersetzt den Pfeil, wenn dort Arbeit
liegt -- eine Kachel, die "3" sagt, ist zehnmal mehr wert als eine,
die "öffnen" sagt. */
.kachel__zahl {
flex: none; margin-left: auto;
min-width: 26px; padding: 3px 9px;
text-align: center; font-size: .82rem; font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ton);
background: color-mix(in srgb, var(--ton) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--ton) 34%, transparent);
border-radius: 999px;
}
.kachel__zahl[data-warn="ja"] {
color: var(--warn);
background: rgba(255, 154, 162, .12);
border-color: rgba(255, 154, 162, .42);
}
.kachel__pfeil {
flex: none; margin-left: auto;
color: var(--text-still); font-size: .9rem;
transition: color var(--tempo), transform var(--tempo);
}
.kachel:hover .kachel__pfeil { color: var(--ton); transform: translateX(3px); }
/* Gestaffelter Einlauf. Die Verzögerung kommt aus --nr, das start.js je
Kachel setzt. Steht in einer no-preference-Abfrage, damit bei
"weniger Bewegung" gar keine Animation entsteht -- nicht nur eine
ohne Dauer. */
@media (prefers-reduced-motion: no-preference) {
.kachel {
animation: kachel-ein .38s cubic-bezier(.32, 0, .2, 1) backwards;
animation-delay: calc(var(--nr, 0) * 26ms);
}
@keyframes kachel-ein {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
.zahlen-leer {
margin: 0; padding: 15px 17px;
font-size: .88rem; color: var(--text-still);
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
}
@media (max-width: 900px) {
.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kachel[data-gross="ja"] { grid-column: span 2; }
}
@media (max-width: 560px) {
.kacheln { grid-template-columns: 1fr; }
.kachel[data-gross="ja"] { grid-column: span 1; }
.gruppe__kopf { gap: 4px; }
.gruppe__unter { flex-basis: 100%; }
}
.inhalt .fuss { margin-top: 40px; text-align: left; }