DogFatherGitandClaude Opus 5
8efdb39ce9
Filipe: "gerade sehen die sogar leicht verschwommen aus ... die sollen
nicht durch die kacheln gehen ... ich wollte eine krasse aenderung."
Drei Ursachen, alle drei von mir eingebaut, alle drei gemessen:
1. ICH HABE 1647-PIXEL-BILDER ALS "uhd" MIT 2400 PIXELN AUSGELIEFERT.
Am Morgen stand in derselben Datei, sein Schirm sei 2550 px breit und
das groesste Bild 1600 -- meine "Loesung" war, die Ausgabe
hochzurechnen. Es gab nie mehr Bildpunkte. Dazu fehlte der Schritt,
den der Kommentar daneben selbst verlangt ("Verkleinern MITTELT
Bildpunkte ... deshalb schaerft man danach nach"): Es wurde nie
nachgeschaerft. Jetzt Unscharfmaske auf der ENDgroesse
(Ausgabeschaerfung) und ein Glanz-Durchgang: die hellsten Stellen
weich gezeichnet und additiv dazu -- Licht, das ueber seine Kante
strahlt. Guete 0,80 -> 0,88, am Gate 0,93.
2. backdrop-filter: blur() UNTER JEDER FLAECHE. 16 px unter siebzehn
Kacheln, 13 px unter sieben weiteren Flaechen, 26 px unter der
Anmeldekarte. Ein Weichzeichner mittelt nicht nur, was hinter dem
Element liegt -- er zieht seinen Radius weit darueber hinaus. Hinter
der Anmeldetafel ist Schwarz, direkt daneben aber die hellste Stelle
des Motivs: Die Karte wurde deshalb GRAU, gemessen rgb(46,57,64)
statt rgb(15,22,34). Je schoener der Rahmen, desto grauer die Karte.
Alle Weichzeichner raus, --flaeche 0,78 -> 0,89: Durchsicht bleibt,
aber scharf.
3. DIE TAFELMESSUNG WAR FALSCH, UND ICH HABE SIE VON HAND "KORRIGIERT".
Sie lief vom Inneren nach aussen und hielt beim ersten farbigen Punkt
an -- links glueht der Rahmen breiter als rechts, also hielt sie dort
frueher an (58,59 statt 55,37). Statt den Messfehler zu beheben, habe
ich in der CSS "um 1,1 % nach links" geschaetzt. Ergebnis: 32 px
schwarze Tafel blieben links offen. Jetzt wird die einzige
Eigenschaft gesucht, die nur der Rahmen hat -- kraeftig UND farbig --,
mit Gegenprobe auf der linken Bildhaelfte (dort muessen es 0 sein).
KACHELN: keine Politur mehr, ein anderes Ding. Jede steckt in einer
LEUCHTSCHIENE ihrer Kategoriefarbe, die Licht in die Platte wirft --
links scharfe Kante, rechts rund. Steiler Abfall (52 % statt 68 %):
beleuchtet, nicht eingefaerbt. Der Glanz wandert beim Ueberfahren
einmal durch. Dieselbe Sprache auf der Anmeldeseite: die vier Rollen
sind Tasten in Schienen (Gold/Bernstein/Gruen/Blau).
Zwei eigene Fehler nebenbei, beide durch das Unveraenderlichkeits-
Zeichen gefunden -- eine Zahl, die sich nach einer Aenderung KEIN Stueck
bewegt, sagt "falsche Stelle", nicht "zu wenig":
- Dreimal exakt 4,16:1 an "Ueberfaellig". Der Pruefpunkt lag nicht auf
dem Knopf, sondern in der Luecke daneben auf dem Bild. Ursache war
das hellere Hochkant-Bild, nicht das Bedienelement -> mehr Schleier
und weniger Glanz NUR fuer die Handy-Fassung. 4,16 -> 5,10.
- Die Koernung der Anmeldekarte lag mit 90 % Deckkraft ohne Mischmodus
ueber allem und hob jeden Bildpunkt um 30 Stufen. Jetzt 4 % mit
overlay, auf eigener Ebene.
- --flaeche anzuheben machte die WICHTIGE Anleitung duenner als eine
gewoehnliche (88 gegen 89) -- feste Zahl neben beweglicher Groesse.
Gefunden von pruef-lesbarkeit, jetzt an --flaeche gebunden.
Gruen: buehne (38), start-ansicht (136), handy (59), breiten (23),
lesbarkeit (14), css-klassen (15), barrierefrei (18), tempo (8).
Co-Authored-By: Claude Opus 5 <[email protected]>
209 lines
8.3 KiB
HTML
209 lines
8.3 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>Zahlen · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#0674b9" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070308" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609070308" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070308" />
|
||
<link rel="stylesheet" href="assets/css/leistung.css?v=202609070308" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<div class="schleier" aria-hidden="true"></div>
|
||
|
||
<header class="kopfleiste">
|
||
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
|
||
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M14.5 5.5 8 12l6.5 6.5" />
|
||
</svg>
|
||
<span class="zurueck-knopf__text">Zurück</span>
|
||
</button>
|
||
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator Workspace</a> · Zahlen</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="inhalt inhalt--breit">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Zahlen</p>
|
||
<h1 class="titel">Was wirklich passiert ist.</h1>
|
||
</div>
|
||
<div class="leistung__wahl" id="creator-wahl" hidden>
|
||
<label class="feld-schild" for="creator">Creator</label>
|
||
<select id="creator"></select>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- DIE WOCHE IN ZAHLEN.
|
||
|
||
Jede Karte trägt die drei Dinge, die eine Kennzahl braucht
|
||
(Recherche 31.08./06.09.2026): den WERT, den VERGLEICH zur
|
||
Vorwoche und den VERLAUF als kleine Linie. Eine Zahl ohne diese
|
||
drei ist eine Eitelkeitszahl -- sie sieht nach Auskunft aus, und
|
||
man kann nichts damit entscheiden. -->
|
||
<section class="leistung-woche" id="woche" hidden>
|
||
<div class="klapp-kopf">
|
||
<p class="feldschild">Diese Woche</p>
|
||
<p class="leistung__erfassung" id="erfassung"></p>
|
||
</div>
|
||
<div class="zahlkarten" id="zahlkarten"></div>
|
||
</section>
|
||
|
||
<!-- Die Ziele als Fortschritt, nicht als Satz. -->
|
||
<section class="leistung-ziele" id="ziele-block" hidden>
|
||
<div class="klapp-kopf">
|
||
<p class="feldschild">Ziele</p>
|
||
<button type="button" class="knopf-still" id="ziele-aendern" hidden>Ziele setzen</button>
|
||
</div>
|
||
<div class="zielbalken" id="zielbalken"></div>
|
||
</section>
|
||
|
||
<!-- Die Tageszeilen. Tastaturfreundlich: Eine Woche soll in unter
|
||
einer Minute eingetragen sein. -->
|
||
<section class="leistung-tage" id="tage-block" hidden>
|
||
<div class="klapp-kopf">
|
||
<p class="feldschild">Die letzten Tage</p>
|
||
<button type="button" class="knopf knopf--klein" id="import-oeffnen">Aus Datei einlesen</button>
|
||
</div>
|
||
<div class="tagetabelle" id="tagetabelle"></div>
|
||
</section>
|
||
|
||
<p class="fuss">
|
||
Die Zahlen kommen aus dem offiziellen Export von TikTok LIVE Backstage –
|
||
entweder von Hand eingetragen oder als Datei eingelesen. Es wird nichts
|
||
automatisch abgerufen: Dafür gibt es keine offene Schnittstelle.
|
||
</p>
|
||
</main>
|
||
|
||
<!-- Einen Tag eintragen -->
|
||
<dialog class="dialog" id="tag-dialog">
|
||
<form method="dialog" id="tag-form" class="neu neu--blank">
|
||
<h2 class="dialog__titel" id="tag-titel">Tag eintragen</h2>
|
||
<p class="dialog__unter" id="tag-unter"></p>
|
||
|
||
<div class="neu__raster">
|
||
<div>
|
||
<label class="feld-schild" for="f-diamanten">Diamanten</label>
|
||
<input id="f-diamanten" type="number" min="0" inputmode="numeric" />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-dauer">LIVE-Dauer <span class="leise">Minuten</span></label>
|
||
<input id="f-dauer" type="number" min="0" inputmode="numeric" />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-verweildauer">Ø Verweildauer <span class="leise">Sekunden</span></label>
|
||
<input id="f-verweildauer" type="number" min="0" inputmode="numeric" />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-zavg">Ø Zuschauer</label>
|
||
<input id="f-zavg" type="number" min="0" inputmode="numeric" />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-zmax">Spitze</label>
|
||
<input id="f-zmax" type="number" min="0" inputmode="numeric" />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-schenker">Schenker</label>
|
||
<input id="f-schenker" type="number" min="0" inputmode="numeric" />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-follower">Neue Follower</label>
|
||
<input id="f-follower" type="number" min="0" inputmode="numeric" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Der Kontext, ohne den Zahlen in die Irre führen. -->
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-notiz">
|
||
Was war an dem Tag besonders? <span class="leise">(optional)</span>
|
||
</label>
|
||
<input id="f-notiz" maxlength="500" placeholder="z. B. PK gegen Mia, krank, Technik ausgefallen" />
|
||
</div>
|
||
|
||
<p class="fehler" id="tag-fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<div class="dialog__knoepfe">
|
||
<button type="submit" class="knopf knopf--klein" id="tag-speichern">Speichern</button>
|
||
<button type="button" class="abmelden" id="tag-zu">Abbrechen</button>
|
||
<button type="button" class="abmelden abmelden--warnung" id="tag-loeschen" hidden>Zeile löschen</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- Ziele setzen -->
|
||
<dialog class="dialog" id="ziele-dialog">
|
||
<form method="dialog" id="ziele-form" class="neu neu--blank">
|
||
<h2 class="dialog__titel">Ziele je Woche</h2>
|
||
<p class="dialog__unter">
|
||
Aus „mehr Reichweite" wird eine prüfbare Größe. Leer lassen heißt: kein Ziel.
|
||
</p>
|
||
<div class="neu__raster">
|
||
<div>
|
||
<label class="feld-schild" for="z-diamanten">Diamanten pro Woche</label>
|
||
<input id="z-diamanten" type="number" min="0" inputmode="numeric" />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="z-tage">LIVE-Tage pro Woche</label>
|
||
<input id="z-tage" type="number" min="0" max="7" inputmode="numeric" />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="z-verweildauer">Ø Verweildauer <span class="leise">Sekunden</span></label>
|
||
<input id="z-verweildauer" type="number" min="0" inputmode="numeric" />
|
||
</div>
|
||
</div>
|
||
<p class="fehler" id="ziele-fehler" role="alert" aria-live="polite"></p>
|
||
<div class="dialog__knoepfe">
|
||
<button type="submit" class="knopf knopf--klein" id="ziele-speichern">Speichern</button>
|
||
<button type="button" class="abmelden" id="ziele-zu">Abbrechen</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- Aus Datei einlesen. ERST VORSCHAU, DANN ÜBERNEHMEN -->
|
||
<dialog class="dialog dialog--breit" id="import-dialog">
|
||
<form method="dialog" id="import-form" class="neu neu--blank">
|
||
<h2 class="dialog__titel">Aus dem Export einlesen</h2>
|
||
<p class="dialog__unter">
|
||
Die CSV-Datei aus TikTok LIVE Backstage. Erst siehst du, was passieren
|
||
würde – geschrieben wird erst, wenn du bestätigst. Dieselbe Datei
|
||
zweimal einzulesen richtet keinen Schaden an.
|
||
</p>
|
||
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="datei">Datei wählen</label>
|
||
<input id="datei" type="file" accept=".csv,text/csv,text/plain" />
|
||
</div>
|
||
|
||
<div class="import-vorschau" id="vorschau" hidden></div>
|
||
|
||
<p class="fehler" id="import-fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<div class="dialog__knoepfe">
|
||
<button type="submit" class="knopf knopf--klein" id="import-los" disabled>Übernehmen</button>
|
||
<button type="button" class="abmelden" id="import-zu">Abbrechen</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<script src="assets/js/wahl.js?v=202609070308"></script>
|
||
<script src="assets/js/bereiche.js?v=202609070308"></script>
|
||
<script src="assets/js/kopf.js?v=202609070308"></script>
|
||
<script src="assets/js/glocke.js?v=202609070308"></script>
|
||
<script src="assets/js/leistung.js?v=202609070308"></script>
|
||
</body>
|
||
</html>
|