DogFatherGitandClaude Opus 5
953c3f5721
Der Server konnte seit gestern rechnen -- und niemand konnte etwas
eintragen. Ein Rechenwerk ohne Oberflaeche ist kein Modul, sondern ein
Versprechen. Das ist jetzt eingeloest:
* leistung.html: Wochenkarten (Wert, Vergleich zur Vorwoche,
Verlaufslinie), Ziele als Fortschrittsbalken, die letzten 14 Tage
zum Eintragen -- auch die LEEREN, denn eine Luecke ist selbst die
Auskunft. Import aus dem TikTok-Export mit Vorschau VOR dem
Schreiben.
* Kachel "Zahlen" als erste der Gruppe "Rund um den Creator", eigenes
Zeichen (steigende Linie, kein zweites Balkendiagramm).
* Dashboard: jede Creator-Karte traegt jetzt Diamanten, LIVE-Tage und
Verweildauer. Bis heute zeigte sie ausschliesslich ARBEIT -- ein
Creator konnte null ueberfaellige Aufgaben haben und gleichzeitig
seit drei Wochen einbrechen, und die Karte sah tadellos aus.
* Die Fruehwarnung steht oben im Dashboard. Sechs benannte Signale im
Klartext mit Beleg, bewusst OHNE Punktzahl -- ein Wert wie
"Abwanderungsrisiko 73" klingt nach Wissenschaft und ist eine
Behauptung, der man nicht widersprechen kann.
* chat.html?mit=<person>: der Weg von der Warnung ins Gespraech. Gab
es vorher nicht; ein Hinweis ohne Weg dahin ist nur ein schlechtes
Gewissen.
GEFUNDEN VON DEN PRUEFUNGEN, nicht von der Theorie:
1. Die Verlaufslinie zeichnete fuer vier der sieben Groessen NICHTS.
Der Server liefert im Verlauf nur drei Reihen; fuer den Rest kam
undefined an. `=== null` faengt das nicht, Number(undefined) ist
NaN, und ein <polyline points="NaN,NaN"> ist im DOM vorhanden und
auf dem Bildschirm unsichtbar -- ohne Fehlermeldung. Die Pruefung
misst deshalb die PUNKTE, nicht die Anwesenheit des Elements.
2. Fuenf Schriftgroessen im CHAT lagen unter 11,5 px (.68/.7 rem) und
waren seit vorgestern drin. Die Grundlinie der Groessenpruefung
stand auf 43, gemessen wurden 48. Nicht die Grundlinie angehoben,
sondern die fuenf Stellen behoben: Eine Grundlinie, die mitwaechst,
ist keine mehr.
pruef-leistung-optik.mjs: 57 Pruefungen, zwei echte Browser, Gegenprobe
zu jeder Aussage -- auch dazu, dass die Vorschau vor dem Bestaetigen
wirklich noch nichts geschrieben hat und dass ein Creator seine Zahlen
zwar SIEHT, sie aber weder eintragen noch die Fruehwarnung ueber sich
lesen kann (auch nicht ueber eine von Hand gebaute Anfrage).
Co-Authored-By: Claude Opus 5 <[email protected]>
300 lines
12 KiB
CSS
300 lines
12 KiB
CSS
/* ===================================================================
|
|
Dashboard -- die Gesamtuebersicht je Creator.
|
|
|
|
Grundgedanke: eine Karte je Person, in der Reihenfolge des Drucks.
|
|
Ruhige Karten fuer alles, was laeuft; nur was Handlung braucht,
|
|
bekommt Farbe. Waere jede Zahl bunt, waere keine mehr auffaellig --
|
|
und die Augen haetten nichts, worauf sie sich ausruhen koennen.
|
|
=================================================================== */
|
|
|
|
/* ---------- Summen oben ---------------------------------------------------- */
|
|
|
|
.summen {
|
|
display: grid; gap: 8px; margin-bottom: 26px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
|
|
}
|
|
.summe {
|
|
display: grid; gap: 2px; padding: 14px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.summe[data-warn="ja"] {
|
|
border-color: rgba(255, 154, 162, .32);
|
|
background: rgba(255, 154, 162, .05);
|
|
}
|
|
.summe__zahl {
|
|
font-size: 1.6rem; font-weight: 700; line-height: 1.1;
|
|
font-variant-numeric: tabular-nums; color: var(--text);
|
|
}
|
|
.summe[data-warn="ja"] .summe__zahl { color: var(--warn); }
|
|
.summe__name {
|
|
font-size: .72rem; font-weight: 600; letter-spacing: .06em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
|
|
/* ---------- Karten --------------------------------------------------------- */
|
|
|
|
.creator-liste {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
|
|
}
|
|
.creator {
|
|
position: relative; overflow: hidden;
|
|
padding: 18px 20px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
/* Ein schmaler Streifen an der Kante statt einer eingefaerbten Karte:
|
|
sichtbar genug zum Ueberfliegen, ruhig genug zum Lesen. */
|
|
.creator::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--akzent), transparent 85%);
|
|
opacity: .35;
|
|
}
|
|
.creator[data-achtung="ja"] {
|
|
border-color: rgba(255, 154, 162, .26);
|
|
}
|
|
.creator[data-achtung="ja"]::before {
|
|
background: linear-gradient(180deg, var(--warn), transparent 85%);
|
|
opacity: .75;
|
|
}
|
|
|
|
.creator__kopf {
|
|
display: flex; gap: 18px; align-items: flex-start;
|
|
justify-content: space-between; flex-wrap: wrap;
|
|
margin-bottom: 15px;
|
|
}
|
|
.creator__wer { min-width: 0; }
|
|
.creator__name {
|
|
margin: 0 0 3px; font-size: 1.14rem; font-weight: 700;
|
|
letter-spacing: -.01em; color: var(--text);
|
|
}
|
|
.creator__unter { margin: 0; font-size: .8rem; color: var(--text-still); }
|
|
.creator__unter[data-kalt="ja"] { color: var(--warn); opacity: .82; }
|
|
|
|
.naechstes { display: grid; gap: 2px; justify-items: end; text-align: right; flex: none; }
|
|
.naechstes__schild {
|
|
font-size: .66rem; font-weight: 700; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.naechstes__wert {
|
|
font-size: .92rem; font-weight: 650; color: var(--text);
|
|
text-decoration: none; font-variant-numeric: tabular-nums;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
a.naechstes__wert:hover { color: var(--akzent); border-bottom-color: rgba(63, 189, 245, .45); }
|
|
.naechstes__wert--leer { color: var(--text-still); font-weight: 500; }
|
|
|
|
/* ---------- Zahlenreihe ---------------------------------------------------- */
|
|
|
|
.werte {
|
|
display: grid; gap: 6px;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
.wert {
|
|
display: grid; gap: 1px; padding: 9px 4px 8px;
|
|
text-align: center; text-decoration: none;
|
|
border: 1px solid transparent; border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .06); }
|
|
.wert__zahl {
|
|
font-size: 1.22rem; font-weight: 700; line-height: 1.15;
|
|
font-variant-numeric: tabular-nums; color: var(--text);
|
|
}
|
|
/* Eine Zeile, ohne Umbruch: "ERLEDIGT 30 T." brach sonst als einziges
|
|
Feld um und zog die ganze Reihe in die Hoehe. Lieber eine Spur
|
|
kleiner als sechs Kaesten, von denen einer aus der Reihe faellt. */
|
|
/* 0,7 rem = 11,2 px statt 9,6. Unter 10 px ist auch auf einem grossen
|
|
Bildschirm keine Beschriftung mehr, sondern ein Muster -- und es sind
|
|
ausgerechnet die Woerter, die den Zahlen darueber ihre Bedeutung
|
|
geben ("ueberfaellig", "dringend", "offen"). Auf dem Handy stand
|
|
laengst eine Ausnahme auf 0,75 rem; nur der Rechner war vergessen
|
|
worden. */
|
|
.wert__name {
|
|
font-size: .7rem; font-weight: 600; letter-spacing: .03em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
/* Eine Null ist eine gute Nachricht -- sie darf zuruecktreten. */
|
|
.wert[data-leer="ja"] { background: rgba(255, 255, 255, .016); }
|
|
.wert[data-leer="ja"] .wert__zahl { color: var(--text-still); font-weight: 600; }
|
|
.wert[data-warn="ja"] {
|
|
border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .07);
|
|
}
|
|
.wert[data-warn="ja"] .wert__zahl { color: var(--warn); }
|
|
.wert[data-warn="ja"] .wert__name { color: rgba(255, 154, 162, .8); }
|
|
|
|
/* ---------- Start-Check ---------------------------------------------------- */
|
|
|
|
.fortschritt {
|
|
display: block; margin-top: 13px; padding: 11px 13px 12px;
|
|
text-decoration: none;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
transition: border-color var(--tempo);
|
|
}
|
|
.fortschritt:hover { border-color: var(--rand-hell); }
|
|
.fortschritt__zeile {
|
|
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
|
margin: 0 0 8px;
|
|
}
|
|
.fortschritt__schild {
|
|
font-size: .66rem; font-weight: 700; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.fortschritt__text { font-size: .8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
|
|
.fortschritt__warn {
|
|
margin-left: auto; padding: 1px 8px;
|
|
font-size: .7rem; font-weight: 650; color: var(--warn);
|
|
background: rgba(255, 154, 162, .1);
|
|
border: 1px solid rgba(255, 154, 162, .26); border-radius: 999px;
|
|
}
|
|
.fortschritt__balken {
|
|
display: block; height: 5px; border-radius: 999px; overflow: hidden;
|
|
background: rgba(255, 255, 255, .07);
|
|
}
|
|
.fortschritt__fuellung {
|
|
display: block; height: 100%; border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
|
|
transition: width .4s cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
.fortschritt__fuellung[data-warn="ja"] {
|
|
background: linear-gradient(90deg, rgba(255, 154, 162, .55), var(--warn));
|
|
}
|
|
.fortschritt[data-fertig="ja"] .fortschritt__text { color: var(--akzent); }
|
|
|
|
.creator__luecke {
|
|
display: block; margin: 10px 0 0; padding: 8px 12px;
|
|
font-size: .78rem; color: var(--text-leise); text-decoration: none;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
.creator__luecke:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
|
|
|
|
/* ---------- Die Zahlen in der Karte (06.09.2026) --------------------------
|
|
|
|
Eine eigene Zeile unter den Arbeitszahlen, durch eine feine Linie
|
|
abgesetzt: Es sind zwei verschiedene Sorten Auskunft. Oben steht, was
|
|
WIR schulden (überfällig, im Review), unten, was der Kanal HERGIBT.
|
|
Ohne die Trennung liest man sie als eine Reihe und vergleicht Zahlen,
|
|
die nichts miteinander zu tun haben. */
|
|
.kzahlen {
|
|
display: flex; flex-wrap: wrap; gap: 8px 26px;
|
|
margin: 12px 0 0; padding: 12px 0 0;
|
|
border-top: 1px solid var(--rand);
|
|
text-decoration: none; color: inherit;
|
|
}
|
|
.kzahlen:hover .kzahlen__wert, .kzahlen:focus-visible .kzahlen__wert { color: var(--akzent); }
|
|
.kzahlen[data-leer="ja"] { border-top-style: dashed; }
|
|
|
|
.kzahlen__feld { display: grid; gap: 1px; min-width: 0; }
|
|
.kzahlen__name {
|
|
font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.kzahlen__wert {
|
|
font-size: 1.05rem; color: var(--text);
|
|
/* Tabellenziffern: gleiche Breite je Ziffer, damit die Werte mehrerer
|
|
Karten untereinander auf derselben Stelle sitzen. */
|
|
font-variant-numeric: tabular-nums;
|
|
transition: color var(--tempo);
|
|
}
|
|
.kzahlen__wandel { margin-left: 7px; font-size: .8rem; }
|
|
/* Gedeckt, nicht grell -- eine Auskunft, kein Alarm. */
|
|
.kzahlen__wandel[data-richtung="hoch"] { color: #6fc38a; }
|
|
.kzahlen__wandel[data-richtung="runter"] { color: #e08c93; }
|
|
.kzahlen__wandel[data-richtung="gleich"] { color: var(--text-still); }
|
|
|
|
.kzahlen__leer { font-size: .82rem; color: var(--text-still); }
|
|
|
|
/* ---------- Die Frühwarnung ------------------------------------------------
|
|
|
|
Bernstein, nicht Rot. "Hier würde ich nachfassen" ist ein Auftrag,
|
|
kein Fehler -- und Rot wäre auf einer Seite, die man jeden Morgen
|
|
aufmacht, nach drei Tagen Tapete. Dieselbe Farbe wie das Merkzeichen
|
|
in den Bereichen, aus demselben Grund. */
|
|
.warnblock { margin: 0 0 26px; }
|
|
|
|
.warnliste {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
}
|
|
|
|
.warnkarte {
|
|
padding: 14px 16px 12px;
|
|
background:
|
|
radial-gradient(120% 100% at 0% 0%, rgba(217, 164, 65, .07), transparent 68%),
|
|
var(--flaeche);
|
|
border: 1px solid rgba(217, 164, 65, .28);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.warnkarte__kopf {
|
|
display: flex; align-items: baseline; justify-content: space-between;
|
|
gap: 12px; margin-bottom: 10px;
|
|
}
|
|
.warnkarte__name {
|
|
font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none;
|
|
}
|
|
.warnkarte__name:hover, .warnkarte__name:focus-visible { color: var(--akzent); }
|
|
|
|
/* Der Weg zum Gespräch. Klein und ruhig -- er soll da sein, wenn man
|
|
ihn sucht, und nicht mit dem Namen um Aufmerksamkeit ringen. */
|
|
.warnkarte__weg {
|
|
flex: none;
|
|
padding: 5px 12px; min-height: 32px;
|
|
display: inline-flex; align-items: center;
|
|
font-size: .8rem; color: var(--text-leise); text-decoration: none;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color var(--tempo), border-color var(--tempo);
|
|
}
|
|
.warnkarte__weg:hover, .warnkarte__weg:focus-visible {
|
|
color: var(--akzent); border-color: rgba(63, 189, 245, .35);
|
|
}
|
|
|
|
.warnkarte__signale { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
|
|
|
|
.warnsignal {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
|
|
padding-left: 14px; position: relative;
|
|
}
|
|
/* Ein kleiner Punkt statt eines Aufzählungszeichens -- sechs Signale
|
|
untereinander mit Spiegelstrichen sähen aus wie eine Mängelliste. */
|
|
.warnsignal::before {
|
|
content: ''; position: absolute; left: 0; top: .55em;
|
|
width: 5px; height: 5px; border-radius: 50%;
|
|
background: rgba(217, 164, 65, .75);
|
|
}
|
|
.warnsignal__text { font-size: .84rem; line-height: 1.55; color: var(--text); }
|
|
.warnsignal__beleg {
|
|
font-size: .8rem; color: var(--text-still); font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------- Rest ----------------------------------------------------------- */
|
|
|
|
.stand {
|
|
margin: 20px 0 0; font-size: .74rem; color: var(--text-still); text-align: right;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.creator-liste { grid-template-columns: 1fr; }
|
|
.creator { padding: 16px 15px 14px; }
|
|
/* Sechs Spalten waeren auf dem Handy je 45 px breit -- die Beschriftung
|
|
bricht dann mitten im Wort. Zwei Reihen zu dritt lesen sich sauber. */
|
|
.werte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.creator__kopf { gap: 10px; }
|
|
.naechstes { justify-items: flex-start; text-align: left; }
|
|
.summen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.stand { text-align: left; }
|
|
|
|
/* Drei Zahlen nebeneinander lassen auf 360 px je 100 px -- "Ø
|
|
Verweildauer" bricht dann in drei Zeilen um. Zwei Spalten, die
|
|
dritte darunter. */
|
|
.kzahlen { gap: 10px 20px; }
|
|
.warnliste { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wert, .fortschritt, .fortschritt__fuellung { transition: none; }
|
|
}
|