DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3b356d6eefc3e18f429ead647549d47ff14f090a
dogfather-universe/workspace/leistung.html
T
DogFatherGitandClaude Opus 5 3b356d6eef Ein Material fuer die ganze Website -- und die Uhr wird zum Chronographen 
DIE UHR: Sekunde nach AUSSEN, Minute in die Mitte, Stunde nach innen
(Wunsch Filipe). Das ist die Anordnung eines Chronographen und nicht die
eines Fortschrittsbalkens: Der schnellste Zeiger laeuft auf der
laengsten Bahn, weil man Bewegung dort am besten sieht -- der langsamste
innen, wo eine kleine Drehung viel bedeutet. Die drei Umfaenge sind
mitgewandert; ein vertauschter Ring ohne vertauschte Zahlen endet nie
dort, wo er soll.

EIN MATERIAL FUER ALLE SEITEN. Die Startseite hatte seit heute
beleuchtete Platten, die anderen sechzehn Seiten flache Rechtecke -- man
wechselte die Seite und fiel aus einer Oberflaeche in eine andere. Ich
habe das bisher Seite fuer Seite nachgezogen, und genau deshalb war es
nie fertig: Es sind FUENFUNDVIERZIG Stellen.

Jetzt EINE Regel. Die Klassenliste ist nicht erfunden, sondern gemessen
-- es sind genau die, die `var(--flaeche)` als Kartenflaeche benutzen.
`:where()` ist der Kniff dabei: Spezifitaet null, also ueberschreibt die
Regel nichts, was eine Seite selbst festlegt. Eine Warnkarte bleibt rot,
eine Spalte behaelt ihre Statusfarbe. Ohne das haette ich an dreissig
Stellen `!important` gebraucht.

DREI FUNDE DER PRUEFUNGEN, alle berechtigt:

1. `.profil-gruppe` gibt es nicht -- ich hatte den Namen aus dem Kopf
   geschrieben statt aus der Datei. pruef-struktur meldete totes CSS.
   Die Karten auf profil.html heissen `.gruppe`, und genau der Name darf
   NICHT in die Liste: Auf der Startseite heissen die Kachelgruppen
   ebenso und haetten ploetzlich eine Kartenflaeche.

2. Der erste Verlauf war HELLER als das, was er ersetzt. Ein Material,
   das die ganze Website aufhellt, hellt auch jeden Text darauf auf --
   und das faellt an der leisesten Schrift zuerst auf.

3. `.gruppe__unter` stand auf 4,21:1. Und das ist der interessante Fall:
   Die Farbe war nicht schuld, eine VERSCHIEBUNG war es. Mit der fuenften
   Rolle rutschte auf personen.html alles eine Zeile nach unten, und die
   Zeile landete auf einer helleren Stelle des Buehnenbilds. Sie ist die
   einzige Beschriftung ohne Karte -- ein Text, dessen Untergrund ein
   FOTO ist, bekommt nicht den leisesten Ton. Jetzt 5,51:1.

Der zweite Fund fiel nur auf, weil die Zahl sich nach meiner ersten
Korrektur KEIN Stueck bewegte (zweimal exakt 4,21) -- dasselbe Zeichen
wie schon zweimal heute: falsche Stelle, nicht zu wenig.

Gruen: buehne (38), css-klassen (15), struktur (32), handy (59),
breiten (23), start-ansicht (136), lesbarkeit (14), tempo (8),
personen-liste (33).

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-07 05:14:01 +02:00

221 lines
8.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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=202609070507" />
<link rel="stylesheet" href="assets/css/start.css?v=202609070507" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070507" />
<link rel="stylesheet" href="assets/css/leistung.css?v=202609070507" />
</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&nbsp;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>
<!-- Zwei Knöpfe rechts: erst der Schalter (er ordnet die Liste),
dann die Hauptaktion. Der Schalter trägt bewusst die stille
Ausführung -- er verändert nichts an den Daten. -->
<div class="klapp-kopf__knoepfe">
<button type="button" class="knopf-still" id="tage-schalter"
aria-expanded="false" aria-controls="tagetabelle" hidden>
<span id="tage-schalter-text">Alle zeigen</span>
<svg class="klapp-pfeil" viewBox="0 0 24 24" aria-hidden="true">
<path d="m6 9.5 6 6 6-6" />
</svg>
</button>
<button type="button" class="knopf knopf--klein" id="import-oeffnen">Aus Datei einlesen</button>
</div>
</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=202609070507"></script>
<script src="assets/js/bereiche.js?v=202609070507"></script>
<script src="assets/js/kopf.js?v=202609070507"></script>
<script src="assets/js/glocke.js?v=202609070507"></script>
<script src="assets/js/leistung.js?v=202609070507"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink