DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0fbd3f45b34336a43a050d33a779463c5651134e
dogfather-universe/workspace/start.html
T
DogFatherGitandClaude Opus 5 0fbd3f45b3 Die Chatkiste steht immer, Beenden raeumt auf -- und eine verspaetete Antwort ueberschreibt nichts Neueres mehr 
Filipe, 30.09.2026: „wenn eine sendung beendet wurde soll alles
automatisch verschwinden. also von daten die da stehen von dem video."
Und: „mach dass ich die chat kiste immer sehe bitte und nicht erst
wenn das video läuft."

=====================================================================
1. BEENDET HEISST LEER
=====================================================================
Beim Beenden verschwinden Titel, YouTube-Adresse, Videotitel,
Vorschaubild, Beginn und das zweite Video samt seiner Stelle. Vorher
blieb alles stehen; beim naechsten Aufmachen stand dort der Titel der
letzten Sendung und ein Beginn, der in der Vergangenheit liegt.

ERST DER VERLAUF, DANN DAS LEEREN -- weg vom Schreibtisch heisst
nicht weg aus der Welt. Geprueft: Nach dem Beenden steht die Sendung
weiter in `reaktion_verlauf`, samt Video.

EINE FELDLISTE, NICHT ZWEI. Die Aufzaehlung stand in der
Zuruecksetzen-Route; jetzt brauchen sie zwei Wege. `SENDUNGS_FELDER`
und `PULT_EINSTELLUNGEN` stehen einmal oben. Zwei Abschriften waeren
die, die beim naechsten Spaltenzuwachs auseinanderlaufen -- genau so
sind am 11.09. drei Spalten mit Inhalt verlorengegangen.

Einstellungen (Bildaufteilung, Kameragroesse, Chatmodus) und die
Warteschlange bleiben -- die raeumt weiter nur „Alles zuruecksetzen"
ab. Wer nur vorbereitet und dann zumacht, behaelt seine Eingaben; das
ist eine Entscheidung und steht als Pruefung fest.

DAS FELD „BEGINN" WURDE NIE GELEERT, nur gefuellt:
`if (lage.beginnt_am && document.activeElement !== …)` -- zwei Fragen
in einer Bedingung, und die zweite beantwortete die erste
stillschweigend mit nein. Das betraf auch den vorhandenen
Zuruecksetzen-Knopf.

=====================================================================
2. DIE CHATKISTE STEHT IMMER
=====================================================================
Sie lag in `#teil-live` und ging mit ihm weg. Im Wartebereich stand
dabei woertlich „Der Chat ist schon offen" -- der Satz stimmte sogar,
der Server laesst dort schreiben (201, geprueft); zu sehen war der
Chat trotzdem nicht.

Die drei Haeute und die Schiene liegen jetzt in einem gemeinsamen
`.raum`: links wechseln die Haeute, rechts steht der Chat. Das Raster
wandert mit nach oben statt sich zu verdoppeln -- zwei
`grid-template-columns` fuer dieselbe Frage waren am 28.09. der
Grund, warum die Regieleiste null Pixel bekam.

Wer nicht schreiben darf, liest den Grund im Feld („Der Saal ist zu").

DER UMBAU HAT DREI DINGE VERSCHOBEN, und die Messung hat sie sofort
gefunden: Kino 0 px hoch, Spendenkarte bei x=1458 ausserhalb des
Bildes, „Kamera aus"-Schild kam nicht an. Eine Ursache: Zwei Regeln
(`grid-row: 2` und `grid-area: kino`) zielten auf die drei Haeute,
weil die frueher unmittelbar im Saal lagen. Gefunden hat das nicht
das Nachdenken, sondern eine Messung der ganzen Kette --
`teil-live 0x0 @1440,742` lag NEBEN dem Raum.

=====================================================================
3. „DER SAAL IST ZU" ERREICHTE NIEMANDEN, DER DARIN SASS
=====================================================================
`stand: "zu"` loescht `reaktion_dabei`, und `melden()` suchte seine
Empfaenger erst danach -- in genau dieser geleerten Liste. Die Seiten
der Zuschauer blieben auf „live" stehen.

`melden(art, daten, wer)` nimmt jetzt eine Empfaengerliste; die
Stand-Route bestimmt sie VOR jeder Aenderung.

UND EINE ZUGESPERRTE SEITE VERSTUMMTE FUER IMMER. War der Saal zu,
hielt `anschliessen()` jeden Takt an -- und Rundrufe bekam sie auch
keine, weil sie in keiner Liste mehr stand. Machte der Host wieder
auf, passierte bei allen mit offenem Reiter NICHTS. Nicht in dreissig
Sekunden: nie, bis jemand von Hand neu lud. Gemessen: Server sagt
„vorbereitung", die Seite zeigt „zu", auch nach 40 Sekunden.
Jetzt fragt eine geschlossene Seite alle 15 Sekunden nach -- der
ruhigste Zustand des Hauses, dort kostet das nichts.

=====================================================================
4. WER ZULETZT ANTWORTET, HAT NICHT RECHT
=====================================================================
Eine Abfrage ist Sekundenbruchteile unterwegs. Kommt in dieser Zeit
ein Rundruf an, ist SEIN Stand der neuere -- und trotzdem hat die
verspaetete Antwort ihn ueberschrieben.

Gemessen: Die Regie schaltet die Werbung auf Wechsel, der Rundruf
zeichnet ihn, und einen Augenblick spaeter steht wieder Laufband.
Eine feste Wartezeit in der Messung hatte das zugedeckt; es fiel
erst auf, als ich sie durch eine echte Bedingung ersetzte.

Drei Runden Raten lagen daneben. Gefunden hat es eine Mitschrift der
Aufrufkette:

    wechsel:2  @ EventSource
    laufband:2 @ zeichnen < standHolen < signalEmpfangen

Eine Folgenummer zaehlt jeden angekommenen Rundruf. Jede Abfrage, die
die Seite VON SICH AUS macht -- nach dem Verbindungsaufbau, im
geschlossenen Saal, bei jedem Verbindungssignal, nach einer
abgelehnten Anwesenheitsmeldung, und der Anwesenheitstakt selbst --
verwirft ihr Ergebnis, wenn inzwischen etwas Neueres da war.

Abfragen nach einer EIGENEN Handlung bleiben hart: Sie bringen Dinge
mit, die kein Rundruf traegt (die Verwaltungslisten der Regie). Die
Unterscheidung steht am Aufruf, nicht in einer Bedingung im Inneren.

=====================================================================
5. UND DIE MESSUNGEN WARTEN NICHT MEHR AUF DIE UHR
=====================================================================
Feste Wartezeiten sind dieselbe Falle wie feste Schwellen: Sie
stimmen, bis daneben etwas langsamer wird, und melden dann einen
Fehler, den es nicht gibt. Zweimal ist mir das in einer Stunde
passiert -- einmal beim Band, einmal bei den Ecken. Der Werbeblock
wartet jetzt fuenfmal auf das Ergebnis, der Gleichlauf viermal; laeuft
eine Frist ab, ist es ein echter Befund.

Die erste Fassung der Gleichlauf-Gegenprobe war selbst falsch -- sie
hielt das Selbstheilen des Systems fuer einen Fehler.

Neu in mess-reaktion: „Die Chatkiste in jedem Zustand" (alle drei,
mit Breite und Sperrgrund) und „Beendet heisst leer (im Pult)" -- dort
gemessen, wo Filipe hinsieht, nicht in der Datenbank.
Neu in pruef-reaktion (+14): das Leeren, die Gegenprobe „vorher war
etwas drin", der Verlauf bleibt, und die Entscheidung „wer nur
vorbereitet hat, behaelt seine Eingaben".

Gemessen: mess-reaktion dreimal hintereinander 0/0, pruef-reaktion
407/0, pruef-css-klassen 37/0, pruef-struktur 44/0, pruef-tippziele
13/0, pruef-haus-seiten 38/0, pruef-haus-trennung 100/0, pruef-buehne
38/0, pruef-push-ziel 38/0, mess-buehne 0.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-30 02:36:13 +02:00

748 lines
40 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>Creator Workspace · Spicy & Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
eine Flaeche sind statt zweier. -->
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609300235" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609300235" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609300235" />
<link rel="stylesheet" href="assets/css/start.css?v=202609300235" />
<!-- Nur die Startseite: Begrüßungskachel, Uhr, Glockenmulde. Siehe
den Hinweis in start.css -- dort stand es bis zum 07.09.2026. -->
<link rel="stylesheet" href="assets/css/heim.css?v=202609300235" />
<link rel="stylesheet" href="assets/css/module.css?v=202609300235" />
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
genau diesen Dateinamen auf crew-haus.css um, und die Seite
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
ohne Umfaerben im Browser, ohne Flackern. -->
<link rel="stylesheet" href="assets/css/haus.css?v=202609300235" />
</head>
<body class="start">
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
Pseudo-Elements -- body hat nur ::before und ::after. -->
<div class="schleier" aria-hidden="true"></div>
<header class="kopfleiste">
<p class="marke"><span class="marke__text">Spicy&nbsp;&amp;&nbsp;Dogi · Creator&nbsp;Workspace</span></p>
<div class="kopfleiste__rechts">
<span class="wer" id="wer">…</span>
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
</div>
</header>
<!-- Volle Breite: Bei 880 px waren drei Kacheln je 285 px breit, und in
den groesseren Schriften brach der Text ab. Mehr Breite ist hier die
ehrlichere Loesung als kleinere Schrift. -->
<main class="inhalt inhalt--breit">
<!-- Die Begrüßung sagt jetzt etwas. "Angemeldet" stand vorher da, obwohl
man das oben rechts ohnehin sieht – die Zeile war verschenkt. An
ihrer Stelle steht der Tag, die Kalenderwoche und, wenn der Tag
einen Charakter hat, ein kurzes Wort dazu (neue Woche, Endspurt,
Wochenende). Darunter die Lage in einem Satz. -->
<section class="willkommen">
<!-- ==== DAS UNIVERSUM HINTER DER KONSOLE =====================
Wunsch Filipe (screen21): "ich will dass du im hintergrund
dieser kachel das logo von spicy media machst ... es soll
sogar paar mal zu sehen sein, es soll sich bewegen, schweben
... der ganze hintergrund soll wie ein universum aussehen."
SECHS ELEMENTE, NICHT SECHZIG. Nebel und Sternenfeld sind
Hintergrundebenen auf dem Behaelter selbst -- Sterne als
Elemente waeren hundert Knoten fuer eine Zierde. Nur die
Chilis brauchen eigene Elemente, weil jeder seine eigene
Bahn, Groesse und Geschwindigkeit hat.
DIE ZAHLEN STEHEN HIER, NICHT IM CSS: Ort, Groesse, Dauer
und Startversatz je Chili als Variablen am Element. So steht
die Anordnung an EINER Stelle und man sieht sie auf einen
Blick, statt sie aus fuenf `:nth-child`-Regeln
zusammenzusuchen.
`aria-hidden`, weil hier nichts steht, was jemand vorgelesen
bekommen moechte -- es ist Atmosphaere, kein Inhalt.
DIE ORTE SIND GEMESSEN, NICHT GESTREUT. Der erste Satz lag
quer ueber der Mittelspalte: Ein Chili deckte 34,5 % der
Unterzeile und 45,9 % des Lagesatzes ab, und der Kontrast fiel
von 6,36:1 auf 5,87:1. Das war noch zulaessig -- aber es
zwingt die Deckkraft auf sechs Prozent herunter, und damit
sieht man die Chilis nicht mehr, was der Wunsch ausdruecklich
war ("es soll sogar paar mal zu sehen sein").
Richtig herum gedacht: nicht die Chilis blasser machen,
sondern aus dem Text herausnehmen. Sie stehen jetzt in den
Zonen, in denen kein Text liegt -- links neben dem Ring,
zwischen Ring und Text, zwischen Text und Uhr, rechts unten,
und einer halb aus dem unteren Rand herausschauend. Dadurch
tragen sie 12 bis 17 Prozent statt 6 bis 10 und sind
tatsaechlich zu sehen. -->
<span class="zuniversum" aria-hidden="true">
<span class="zuniversum__chili" style="--x: 5%; --y: 20%; --gr: 96px; --tief: .17; --dauer: 71s; --ver: -6s; --kipp: -14deg"></span>
<span class="zuniversum__chili" style="--x: 29%; --y: 80%; --gr: 58px; --tief: .15; --dauer: 94s; --ver: -31s; --kipp: 22deg"></span>
<span class="zuniversum__chili" style="--x: 68%; --y: 17%; --gr: 128px; --tief: .12; --dauer: 118s; --ver: -52s; --kipp: -7deg"></span>
<span class="zuniversum__chili" style="--x: 80%; --y: 74%; --gr: 70px; --tief: .16; --dauer: 83s; --ver: -17s; --kipp: 31deg"></span>
<span class="zuniversum__chili" style="--x: 45%; --y: 97%; --gr: 44px; --tief: .14; --dauer: 104s; --ver: -68s; --kipp: -25deg"></span>
<!-- Zwei weitere Chilis und zwei Huskys (09.09.2026, Wunsch
Filipe: "setz in den hintergrund noch 1-2 peperonis und dan
das logo von dogfather, also nur den husky").
DER HUSKY IST EINE MASKE, KEIN BILD. Die Datei ist schwarz-
weiss und freigestellt (nachgemessen: 49 % durchsichtig). Als
Hintergrundbild bei 15 % Deckkraft verschwaenden die
schwarzen Flaechen im dunklen Grund und uebrig blieben die
hellen Stellen -- ein zerrissener Umriss, kein Hund. Als
Maske ueber einer Farbflaeche wird daraus eine geschlossene
Silhouette, und die traegt DogFathers Babyblau. Damit
schweben im Universum die beiden Marken des Hauses in ihren
beiden Farben. -->
<span class="zuniversum__chili" style="--x: 19%; --y: 9%; --gr: 54px; --tief: .13; --dauer: 88s; --ver: -24s; --kipp: 18deg"></span>
<span class="zuniversum__chili" style="--x: 73%; --y: 93%; --gr: 66px; --tief: .12; --dauer: 112s; --ver: -41s; --kipp: -33deg"></span>
<span class="zuniversum__husky" style="--x: 15%; --y: 88%; --gr: 74px; --tief: .15; --dauer: 97s; --ver: -12s; --kipp: -9deg"></span>
<span class="zuniversum__husky" style="--x: 88%; --y: 14%; --gr: 58px; --tief: .12; --dauer: 126s; --ver: -59s; --kipp: 14deg"></span>
</span>
<p class="marke willkommen__datum">
<span id="datum">…</span>
<span class="willkommen__marker" id="tagesmarker" hidden></span>
</p>
<div class="willkommen__reihe">
<!-- ==== LINKS: DER RING ======================================
Nach dem Vorbild von VanVans Werktisch (Business Hub), auf
Wunsch Filipes uebernommen und weitergebaut.
Dort steht "91 % deiner Produktakten" -- ein Segment je
Produkt. Diese Zahl gibt es hier nicht: Nachgemessen hat der
Workspace 31 Termine, 9 Personen und GENAU EINE Aufgabe. Ein
Kranz aus einer Aufgabe ist kein Bild, sondern sieht aus wie
ein Ladefehler.
Filipe hat DAS TEAM gewaehlt. Fuer Creator zeigt derselbe
Ring den eigenen Tag -- nicht als Notloesung, sondern weil
ein Creator die Teamliste nicht sehen darf und die Frage
dieselbe bleibt: "Wie weit ist das, wofuer ich zustaendig
bin?" Die Entscheidung faellt im Server
(workspace-zentrale.js), nicht hier: Was der Browser nicht
bekommt, kann er auch nicht verraten. -->
<!-- ==== LINKS: KNOPF UND RING ================================
Der Ring stand hier allein in seiner Spalte und war darin
zentriert. Seit dem 09.09.2026 (Wunsch Filipe: "eins von
diesen buttons soll links bei dem anderen kreis sein") steht
die Glocke daneben -- genau spiegelbildlich zur Uhr rechts,
die den Wecker neben sich hat.
WELCHER KNOPF WOHIN, ist nicht ausgewuerfelt: Der WECKER ist
eine Uhrzeit und gehoert zur Uhr. Die GLOCKE ist die
Einstellung dafuer, ob man ueberhaupt etwas ueber sein Team
erfaehrt -- und der Ring links zeigt genau das, den Stand
des Teams. Wer den Ring ansieht und mehr davon wissen will,
findet den Schalter dafuer daneben.
Die Spalte ist damit auf beiden Seiten gleich belegt:
48 px Knopf + 14 px Abstand + Instrument. Genau das rechnet
`--spalte` in heim.css aus. -->
<div class="willkommen__links">
<div class="zring" id="zring">
<svg class="zring__bild" id="zring-bild" viewBox="0 0 300 300"
role="img" aria-labelledby="zring-titel zring-text">
<title id="zring-titel">Der Stand deiner Zentrale</title>
<desc id="zring-text">Ein Segment je Person, eingefärbt nach Lage.</desc>
</svg>
<!-- IN DER MITTE STEHT DAS SIEGEL, NICHT DAS PERSONENBILD.
Im Vorbild sitzt dort VanVans Firmenlogo, und das Bild von
Dogi steckt in der Anrede daneben. Das ist kein Zufall: Der
Ring gehoert dem BETRIEB, die Anrede der PERSON. Haette ich
das Personenbild in die Mitte gesetzt, staende dasselbe
Gesicht zweimal auf einer Kachel -- und der Ring saehe aus,
als messe er die Person. -->
<div class="zring__mitte">
<span class="zring__siegel" aria-hidden="true"></span>
<strong class="zring__prozent" id="zring-prozent">–</strong>
<span class="zring__unter" id="zring-unter">wird geladen</span>
</div>
</div>
<!-- DIE GLOCKE STEHT RECHTS VOM RING (09.09.2026, screen1).
Filipe: "dieser button links vom kreis soll rechts davon
sein."
Damit liegen beide Knoepfe INNEN -- zwischen den beiden
Instrumenten und dem Text in der Mitte. Vorher sassen sie
an den beiden Aussenkanten der Kachel, so weit voneinander
entfernt wie irgend moeglich, obwohl sie dasselbe tun:
einstellen, was einen erreicht. Jetzt stehen sie sich
gegenueber. -->
<div class="glocke-platz glocke-platz--links" id="glocke-platz-links"></div>
</div><!-- /.willkommen__links -->
<!-- ==== MITTE: WER, WO, WAS ================================== -->
<div class="willkommen__text">
<!-- Die Anrede sitzt in einer eigenen Fassung, wie im Vorbild:
Bild, Name und Rolle gehoeren zusammen und heben sich
dadurch vom Titel darunter ab, statt mit ihm zu ringen. -->
<span class="zgruss">
<span class="zgruss__bild willkommen__plakette" id="plakette" aria-hidden="true"></span>
<span class="zgruss__text">
<h1 class="titel" id="gruss">Willkommen</h1>
<span class="zgruss__datum" id="zgruss-datum"></span>
</span>
<span class="zgruss__rolle" id="zgruss-rolle" hidden></span>
</span>
<!-- Die Zierzeile traegt die Marke, wie "◆ VAN'S DIY ◆" im
Vorbild. Die Rauten sind eigene Elemente und kein Zeichen im
Text: Ein ◆ aus der Schriftart sitzt nie auf der Grundlinie
und sieht auf jedem Geraet anders aus. -->
<!-- "Spicy Media", nicht mehr "Dogfather Universe" (08.09.2026,
Wunsch von Filipe). Die Zierzeile nennt den BETRIEB, unter
dem das ganze Team arbeitet -- und der heisst Spicy Media.
Der Titel darunter sagt, wo man ist.
DER TITEL DARUNTER HEISST WIEDER "Zentrale" (24.09.2026,
Filipe: "anstatt irrenanstalt soll da auch Zentrale stehen
bitte. auch getrennt von der team dogi seite da steht was
anderes und soll auch so bleiben.").
AM 22.09.2026 hiess er "Die IrrenAnstalt" -- auf BEIDEN
Adressen, denn diese Zeile hier wird fuer das Teamhaus
nicht umgebogen und kein Skript hat sie je ueberschrieben.
Nachgemessen, bevor etwas geaendert wurde: `crewWeiche`
biegt sechs Dinge um, `start.html` ist nicht dabei.
DAS WORT DES TEAMHAUSES KOMMT JETZT VOM SERVER
(`titelFuer` in workspace.js, wie `markeFuer` eine Zeile
darueber). Hier steht die Vorgabe fuer das Agenturhaus.
Zwei Gruende: Dort bleibt dadurch woertlich stehen, was
vorher dastand -- und was nur das Teamhaus angeht, steht
nicht mehr in einer Datei, die jeder Creator herunterlaedt.
Die Schreibweise "Die IrrenAnstalt" mit grossem A in der
Mitte ist so gewollt und kein Tippfehler; sie steht jetzt
in workspace.js. Wer sie "korrigiert", macht sie kaputt. -->
<!-- ==== WARUM DIE ZWEI ZEILEN ERST UNSICHTBAR SIND ==========
(27.09.2026, gefunden in einem Einzelbild einer
Videoaufnahme.)
In der Seite steht die Vorgabe des AGENTURHAUSES. Fuer das
Teamhaus schickt der Server eigene Worte -- aber erst,
wenn /api/ich geantwortet hat. Bis dahin stand auf der
Startseite jedes Community-Mitglieds und jedes Modis
gross "SPICY MEDIA - Zentrale". Auf einem langsamen
Telefon sekundenlang.
Das ist kein Schoenheitsfehler: Spicy Media ist der
Betrieb hinter der Agentur, und im Teamhaus hat er nichts
verloren. Aufgefallen ist es erst, als die beiden Zeilen
in einem Video standen, das nach draussen gehen sollte.
GELOEST OHNE SPRUNG: `data-wartet` macht die Zeilen
durchsichtig, nicht leer -- der Platz bleibt stehen, es
ruckt nichts. start.js nimmt das Merkmal weg, sobald es
weiss, in welchem Haus es ist.
DIE NOTBREMSE DARUNTER ist wichtiger als sie aussieht:
Ohne sie waere die groesste Schrift der Seite fuer immer
unsichtbar, falls start.js gar nicht erst laeuft. Nach
vier Sekunden gilt wieder, was hier steht -- das ist der
alte Zustand und damit hoechstens so schlecht wie vorher. -->
<span class="zmarke" data-wartet="ja">
<i class="zraute" aria-hidden="true"></i>
Spicy Media
<i class="zraute" aria-hidden="true"></i>
</span>
<p class="ztitel" id="ztitel" data-wartet="ja">Zentrale</p>
<script>
setTimeout(function () {
document.querySelectorAll('[data-wartet]')
.forEach(function (e) { e.removeAttribute('data-wartet'); });
}, 4000);
</script>
<p class="unterzeile">
<span id="rollentext">…</span>
<span class="willkommen__lage" id="lage" hidden></span>
</p>
<!-- ==== Die drei Ablesungen ==================================
Sie standen zuerst RECHTS, zwischen Text und Uhr -- dort
fuellten sie eine Luecke. Im Vorbild stehen sie unter dem
Titel in der Mitte, und das ist der bessere Ort: Sie
gehoeren zum Satz darueber ("253 Produkte, 100 Akten
fertig, 159 Angaben offen" liest sich als Fortsetzung des
Textes, nicht als Anzeige am Rand).
KEINE ZWEITE ZAEHLUNG. Die Zahlen kommen aus denselben
Quellen, die die Kacheln darunter fuellen. Zwei Rechenwege
fuer dieselbe Zahl laufen auseinander, und dann stehen zwei
Wahrheiten auf einem Bildschirm.
Versteckt, solange nichts geladen ist: Drei Striche in
einer Fassung sehen aus wie ein Fehler. -->
<div class="willkommen__stand" id="tagesstand" hidden>
<div class="stand" data-stand="heute">
<span class="stand__wert" id="stand-heute">–</span>
<span class="stand__schild">Heute</span>
</div>
<div class="stand" data-stand="naechster">
<span class="stand__wert" id="stand-naechster">–</span>
<span class="stand__schild">Als Nächstes</span>
</div>
<div class="stand" data-stand="offen">
<span class="stand__wert" id="stand-offen">–</span>
<span class="stand__schild">Offen</span>
</div>
</div>
</div><!-- /.willkommen__text -->
<!-- ==== Rechts in der Kachel: Glocke und Uhr ==================
Die Glocke stand bisher in der Kopfleiste. Dort ist sie eine
von sechs Schaltflächen; hier ist sie das, was sie ist -- eine
Einstellung zum eigenen Tag, neben der Uhrzeit.
glocke.js setzt sie in `#glocke-platz`, wenn es den Platz auf
der Seite gibt, sonst weiterhin in die Leiste. -->
<div class="willkommen__rechts">
<div class="glocke-platz" id="glocke-platz"></div>
<!-- Die Uhr ist eine ANZEIGE, kein Bedienelement: role="timer"
mit aria-live="off". Eine Uhr, die sich jede Sekunde
vorlesen lässt, macht jede Vorleseausgabe unbenutzbar. -->
<!-- ROT UND BABYBLAU (07.09.2026, Wunsch Filipe: "soll eine
mischung von rot und babyblau haben").
Die beiden Farben sind nicht frei gewählt: Rot ist Spicy
Media, Babyblau ist DogFather -- dieselben zwei, die oben
im Kopf der Anmeldekarte nebeneinanderstehen und die im
Motiv den Neonrahmen bilden. Die Uhr trägt damit dieselbe
Handschrift wie alles andere, statt eine dritte einzuführen.
Zwei Verläufe, absichtlich GEGENLÄUFIG: Der Stundenring
geht von Rot nach Babyblau, der Sekundenring zurück. Wo der
eine warm ist, ist der andere kühl -- so bleiben die beiden
Ringe auseinanderzuhalten, auch wenn sie sich überlagern. -->
<!-- DREI RINGE (07.09.2026, Wunsch Filipe).
Aussen die STUNDE in Schwarzsilber, in der Mitte die MINUTE
in Blau, innen die SEKUNDE in Rot. Von aussen nach innen
immer schneller -- so liest man eine Uhr, ohne nachzudenken:
Der aeussere Ring bewegt sich fast nie, der innere staendig.
ALLES SCHARF. Kein blur() und kein drop-shadow auf den
Boegen. Ein Weichzeichner auf einer Linie macht sie nicht
edler, sondern unscharf -- und genau das war der Vorwurf.
Der Glanz im Silber entsteht aus dem VERLAUF selbst (hell,
dunkel, hell), nicht aus einem Schein darum herum. Genau so
glaenzt echtes Metall.
`shape-rendering="geometricPrecision"` steht bewusst dran:
Ohne das rastert der Browser duenne Boegen mit einer
schnelleren, groberen Methode. -->
<div class="uhr" id="uhr" role="timer" aria-live="off">
<svg class="uhr__ring" viewBox="0 0 100 100" aria-hidden="true"
shape-rendering="geometricPrecision">
<defs>
<!-- Schwarzsilber: vier Stopps, nicht zwei. Ein Verlauf von
Hell nach Dunkel ist ein Farbverlauf; erst der Wechsel
hell-dunkel-hell-dunkel liest sich als geschliffenes
Metall, weil eine gebogene Flaeche das Licht genau so
zurueckwirft. -->
<!-- BRONZE STATT SCHWARZSILBER (08.09.2026). Die Stunde
war dem schwarzen Zifferblatt am aehnlichsten --
ausgerechnet die Bahn, die man am haeufigsten
abliest. Warm gegen das kalte Blau der Minute und
das Rot der Sekunde: Damit sind alle drei auf einen
Blick zu trennen. Die Wechsel hell/dunkel bleiben,
sie sind es, die Metall aus einem Strich machen. -->
<!-- ==== DIE DREI FARBEN, NEU VERTEILT (08.09.2026) ====
Filipe: "stunden soll rot sein, minuten schwarz/silber
und die sekunden babyblau."
Die Kennungen heissen jetzt nach ihrer AUFGABE, nicht
nach ihrer Farbe. Vorher hiessen sie `uhr-rot`,
`uhr-blau`, `uhr-silber` -- nach dem Tausch haette
`uhr-rot` die Sekunde in Babyblau gefaerbt, und beim
naechsten Lesen sucht jemand eine halbe Stunde nach
einem Fehler, der keiner ist. Ein Name, der die Farbe
nennt, ist eine Zeitbombe; einer, der die Rolle nennt,
haelt jeden Wechsel aus.
Jeder Verlauf hat VIER Stopps mit Wechsel hell-dunkel-
hell: Erst der Wechsel liest sich als geschliffenes
Metall, weil eine gewoelbte Flaeche das Licht genau so
zurueckwirft. Ein Verlauf von Hell nach Dunkel waere
nur ein Farbverlauf. -->
<!-- STUNDE: Rot. Sie ist die langsamste Bahn und traegt
die kraeftigste Farbe -- was sich kaum bewegt, darf
auffallen, ohne zu stoeren.
DER VERLAUF IST FLACHER ALS BEI DEN ANDEREN BEIDEN --
und zwar, weil die Stunde aus ZWOELF EINZELNEN BALKEN
besteht (09.09.2026, nachgemessen auf Filipes Bitte
"perfektionnier die stunden noch bissl").
Ein Verlauf laeuft diagonal ueber die ganze Zeichnung.
Auf einem DURCHGEHENDEN Bogen liest sich das als
Material: das Licht wandert, der Ring bleibt einer.
Auf zwoelf getrennten Balken erwischt aber jeder eine
andere Stelle des Verlaufs -- und wer eine andere
Farbe hat, sieht aus wie ein anderes Ding.
GEMESSEN, nicht gerechnet -- beide Faehrten im
selben Lauf, an denselben zwoelf Balkenmitten
(r = 31,5), Mittel ueber die Balkenlaenge:
alt 81 98 85 75 145 116 117 136 130 104 140 102
-> 75 bis 145, Faktor 1,93
neu 122 127 121 114 147 131 133 144 141 123 143 129
-> 114 bis 147, Faktor 1,29
Der tiefe Stopp #a81f2c traf ausgerechnet die Plaetze
0 bis 3, also die Stunden 1 bis 4: Genau die Balken,
die als erste gezeichnet werden, waren die
dunkelsten. Ein 75er Balken neben einem 145er sieht
nicht nach Licht aus, sondern nach Ausfall.
(Meine erste RECHNUNG dazu lag bei der Zuordnung
daneben -- sie hatte die -90-Grad-Drehung des SVG
vergessen und die dunklen Balken bei 5 und 6
vermutet. Die Spanne stimmte ungefaehr, die Stelle
nicht. Deshalb stehen hier Messwerte.)
Jetzt Faktor 1,29. Das ist genug
Unterschied, damit die Reihe nach Material aussieht
und nicht nach Aufkleber -- und zu wenig, als dass ein
Balken fehlen koennte. Der Kopf (heller plus Schein)
bleibt das Hellste in der Reihe.
Minute und Sekunde behalten ihren vollen Verlauf: Bei
60 Gliedern liegen die Nachbarn so dicht, dass der
Wechsel als Politur gelesen wird, nicht als Luecke. -->
<!-- DAS LICHT DER KANTE KOMMT NUR VON OBEN (09.09.2026,
Filipe: "da sind auch noch striche die durch die
stunden gehen, ist das normal?").
Nein, war es nicht. Die Lichtkante ist ein Kreis, der
gegen die Bahn versetzt ist. OBEN am Zifferblatt liegt
dieser Versatz QUER zum Balken -- dort ist er eine
echte Oberkante. An den SEITEN liegt er LAENGS zum
Balken, und dann laeuft er als heller Strich mitten
hindurch. Unten waere er eine Unterkante, die bei
Licht von oben gar nicht leuchten duerfte.
Ein Versatz kann das nicht loesen -- ein verschobener
Kreis ist an den Seiten zwangslaeufig tangential.
Also wird die Kante dort AUSGEBLENDET: Sie ist oben
voll da und verschwindet zu den Seiten hin. Genau das
tut Licht auf einem gewoelbten Ring.
ACHTUNG, RICHTUNG: Das SVG traegt `rotate(-90deg)`.
SVG-x zeigt damit auf dem Bildschirm nach OBEN --
deshalb laeuft der Verlauf hier ueber x und nicht
ueber y, und der Stopp bei 1 ist der obere. Das ist
nachgemessen, nicht hergeleitet: Dieselbe Drehung hat
heute schon einmal die ganze Lichtrichtung
verdreht. -->
<linearGradient id="uhr-kante-licht" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0" />
<stop offset="52%" stop-color="#ffffff" stop-opacity="0" />
<stop offset="72%" stop-color="#ffffff" stop-opacity=".30" />
<stop offset="88%" stop-color="#ffffff" stop-opacity=".72" />
<stop offset="100%" stop-color="#ffffff" stop-opacity=".92" />
</linearGradient>
<linearGradient id="uhr-stunde-farbe" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#c49ef8" />
<stop offset="28%" stop-color="#a372df" />
<stop offset="52%" stop-color="#b88df0" />
<stop offset="74%" stop-color="#9c6ad9" />
<stop offset="100%" stop-color="#b284ec" />
</linearGradient>
<!-- MINUTE: Schwarzsilber. Vier Stopps, damit es nach
poliertem Stahl aussieht und nicht nach Grau. Der
dunkelste Stopp bleibt ueber dem Zifferblatt, sonst
verschwindet die Bahn stellenweise ganz. -->
<linearGradient id="uhr-minute-farbe" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f6faff" />
<stop offset="26%" stop-color="#7c8798" />
<stop offset="48%" stop-color="#e4ecf6" />
<stop offset="70%" stop-color="#5a6577" />
<stop offset="100%" stop-color="#cdd8e6" />
</linearGradient>
<!-- SEKUNDE: Babyblau. Die schnellste Bahn bekommt die
hellste, ruhigste Farbe -- sie laeuft dauernd, und
dauernde Bewegung in Signalrot ermuedet. -->
<linearGradient id="uhr-sekunde-farbe" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#cfeeff" />
<stop offset="45%" stop-color="#7ec8f2" />
<stop offset="100%" stop-color="#3c96cc" />
</linearGradient>
</defs>
<!-- Die Bahnen. Sie stehen immer da, damit man sieht, wie
weit ein Ring noch zu laufen hat -- ein Bogen ohne Bahn
ist ein Strich ohne Bezug. -->
<circle class="uhr__bahn" cx="50" cy="50" r="45.5" />
<circle class="uhr__bahn" cx="50" cy="50" r="38.5" />
<circle class="uhr__bahn" cx="50" cy="50" r="31.5" />
<!-- REIHENFOLGE GEDREHT (07.09.2026, Wunsch Filipe: "die
minuten in der mitte und sekunden aussen").
Aussen die SEKUNDE, in der Mitte die MINUTE, innen die
STUNDE. Das ist die Anordnung eines Chronographen: Der
schnellste Zeiger laeuft auf der laengsten Bahn, weil
man dort die Bewegung am besten sieht -- und der
langsamste innen, wo eine kleine Drehung schon viel
heisst. Die alte Anordnung war die eines
Fortschrittsbalkens, nicht die einer Uhr. -->
<!-- ==== JEDER RING IST DREI LAGEN (07.09.2026) ==============
Filipe: "ich will dass der rand mit den sekunden minuten
und stunden viel krasser und geiler ist ... ultra modern,
ultra speziell, ultra profissionell, ultra phaenomenal."
Ein einzelner Strich ist eine LINIE. Ein Ring ist ein
KOERPER, und ein Koerper hat drei Merkmale, die man
zeichnen muss, sonst bleibt es eine Linie:
SCHATTEN Er liegt ueber dem Zifferblatt, also wirft
er einen. Dieselbe Bahn, dunkel, ein halbes
Rastermass nach UNTEN geschoben.
KOERPER Der Bogen selbst in seiner Farbe.
OBERKANTE Ein duennerer, hellerer Bogen, ein Drittel
nach OBEN geschoben. Weil er verschoben
ist, schaut er oben hervor und verschwindet
unten -- genau das tut eine gewoelbte Kante
bei Licht von oben.
Alle drei tragen `data-ring` und werden vom Skript
gemeinsam gesetzt. Eine Lage, die nicht mitwandert,
waere ein Schatten, der stehen bleibt -- das faellt
sofort auf und sieht kaputt aus.
KEIN Weichzeichner, nirgends: Die Tiefe entsteht aus
dem Versatz, nicht aus Unschaerfe. -->
<g class="uhr__schatten" transform="translate(-0.55 0)">
<circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" />
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" />
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" />
</g>
<circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" id="uhr-sekunde" />
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" id="uhr-minute" />
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" id="uhr-stunde" />
<!-- DAS LETZTE GLIED JEDER BAHN, hell und mit Schein.
Dieselben Kreise noch einmal, aber mit einem Muster,
das nur EIN Glied zeigt -- das gerade aktuelle. Sie
liegen ueber den Bahnen, tragen dieselbe Geometrie und
koennen deshalb gar nicht danebenliegen: Ort und Laenge
rechnet dieselbe Funktion aus wie fuer die Reihe
darunter (`start.js`, `setze`).
`data-kopf` statt `data-ring`, damit das Skript sie
getrennt ansprechen kann. -->
<circle class="uhr__kopf uhr__kopf--sekunde" data-kopf="sekunde" cx="50" cy="50" r="45.5" />
<circle class="uhr__kopf uhr__kopf--minute" data-kopf="minute" cx="50" cy="50" r="38.5" />
<circle class="uhr__kopf uhr__kopf--stunde" data-kopf="stunde" cx="50" cy="50" r="31.5" />
<!-- DER KOMETENSCHWEIF IST WEG (08.09.2026).
Er machte aus einem durchgehenden Bogen eine Richtung --
heller zur Spitze hin. Seit alle drei Bahnen REIHEN sind
(Wunsch Filipe: "nicht so eine durchlaufende schleife"),
hat er nichts mehr zu tun: Eine Reihe zeigt ihre Richtung
durch das letzte Glied, nicht durch einen Verlauf. Er
wuerde jetzt sogar schaden -- ohne eigenes Muster zeichnet
er einen vollen Ring quer ueber die Punkte.
Entfernt statt ausgeblendet: Genau daran bin ich heute
schon einmal haengengeblieben. -->
<g class="uhr__kante" transform="translate(0.4 0)">
<circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" />
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" />
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" />
</g>
</svg>
<span class="uhr__skala" aria-hidden="true"></span>
<!-- DER AUFGESETZTE ZWOELF-INDEX. Auf einem echten Zifferblatt
ist die Zwoelf nie nur ein Strich wie die anderen -- sie ist
das, woran das Auge sich ausrichtet. Ein aufgesetzter Keil
in Hausrot, mit heller Metallkante. -->
<span class="uhr__zwoelf" aria-hidden="true"></span>
<!-- DIE DREI PERLEN SIND WEG (09.09.2026, screen5).
Filipe: "ich will dass du die punkte ersetzt und immer
der letzte soll mehr strahlen oder so."
Es waren drei HTML-Elemente, die auf ihren Bahnen
umliefen -- Koepfe, die NEBEN der Reihe herliefen statt
Teil von ihr zu sein. Seit alle drei Bahnen aus einzelnen
Gliedern bestehen, gibt es dafuer eine bessere Antwort:
Das LETZTE Glied ist der Kopf. Es muss nur leuchten.
Das macht jetzt eine eigene Lage im SVG (`.uhr__kopf`),
die genau EIN Glied zeichnet -- dasselbe, das die Bahn
darunter gerade zuletzt gesetzt hat. Kein Element mehr im
Baum, keine zweite Winkelrechnung, die mit der ersten
auseinanderlaufen kann. Genau daran bin ich am 08.09.
haengengeblieben: Die Perlen trugen noch die alten
Farben, weil sie eine zweite Stelle waren. -->
<!-- DER LED-KRANZ UND DIE VIER ANKER (08.09.2026).
Nach Filipes Vorbild -- was bei 164 px davon traegt,
steht in heim.css begruendet. -->
<span class="uhr__leds" aria-hidden="true"></span>
<span class="uhr__anker" aria-hidden="true"></span>
<span class="uhr__glas" aria-hidden="true"></span>
<div class="uhr__mitte">
<span class="uhr__zeit" id="uhr-zeit">--:--</span>
<span class="uhr__sek" id="uhr-sek">--</span>
</div>
</div>
</div>
</div>
</section>
<!-- Was ist dran? Steht VOR den Zahlen, weil es der Unterschied
zwischen "wie viel liegt an" und "was muss ich jetzt tun" ist.
Bleibt komplett weg, wenn nichts anliegt. -->
<!-- DER TAGESBLICK (05.09.2026).
Wunsch: "eine ganze kachel, links die sachen die du da siehst und
rechts die termine vom tag, in der mitte gesplittet."
WARUM DIE BEIDEN ZUSAMMENGEHÖREN: Links steht, was zu TUN ist,
rechts, was schon FESTSTEHT. Zusammen ergeben sie die einzige
Frage, die man morgens hat -- wie sieht mein Tag aus. Getrennt
untereinander musste man scrollen, um sie zu beantworten.
Eine Kachel und nicht zwei nebeneinander: Zwei Kacheln mit Rand
und Abstand lesen sich als zwei Themen. Der Trenner in der Mitte
sagt "zwei Seiten derselben Sache".
<section> mit Überschrift je Hälfte, damit ein Vorleseprogramm
die beiden Bereiche ansagen und anspringen kann -- ein Raster
allein ist für ihn nur eine Reihenfolge. -->
<!-- PLATZ WIRD VORHER RESERVIERT, nicht nachträglich genommen.
Die Kachel war zuerst `hidden` und erschien erst, wenn ihre
Daten da waren. Sie ist aber hoch -- alles darunter sprang
dadurch nach unten. Gemessen von pruef-tempo-workspace: Der
Layout-Sprung von start.html stieg von 0 auf 0,96, zweimal
hintereinander bestätigt.
Ein Sprung ist kein Schönheitsfehler: Er ist der Grund, warum
man auf den falschen Knopf drückt. Man zielt auf etwas, und im
Moment des Klicks rutscht es weg.
Deshalb steht die Kachel von Anfang an da und hält ihre Höhe
(data-laedt="ja" → min-height im CSS). Erst wenn feststeht, dass
BEIDE Hälften leer sind, verschwindet sie -- und dieser Sprung
ist klein, weil sie dann nur die Platzhalterhöhe hatte. -->
<section class="tagesblick" id="dran-block" data-laedt="ja"
aria-labelledby="tagesblick-titel">
<h2 class="tagesblick__titel" id="tagesblick-titel">Dein Tag</h2>
<div class="tagesblick__seite tagesblick__seite--dran" id="dran-seite">
<div class="klapp-kopf tagesblick__kopf">
<p class="feldschild" id="dran-titel">Was ist dran</p>
<button type="button" class="knopf-still" id="dran-schalter"
aria-expanded="false" aria-controls="dran" hidden>
<span id="dran-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>
</div>
<ul class="dran__liste" id="dran" data-klapp="zu"
aria-labelledby="dran-titel"></ul>
<!-- Steht nur da, wenn wirklich nichts offen ist. Eine leere
Hälfte ohne Wort sieht aus wie ein Ladefehler. -->
<p class="tagesblick__leer" id="dran-leer" hidden>
Nichts offen – der Tag ist frei von Rückständen.
</p>
</div>
<div class="tagesblick__seite tagesblick__seite--heute" id="heute-seite">
<div class="klapp-kopf tagesblick__kopf">
<p class="feldschild" id="heute-titel">Heute</p>
<a class="knopf-still tagesblick__mehr" href="kalender.html">
<span>Kalender</span>
<svg class="klapp-pfeil tagesblick__mehr-pfeil" viewBox="0 0 24 24" aria-hidden="true">
<path d="m9.5 6 6 6-6 6" />
</svg>
</a>
</div>
<ol class="tagesliste" id="tagestermine" aria-labelledby="heute-titel"></ol>
<p class="tagesblick__leer" id="heute-leer" hidden>
Heute steht nichts an.
</p>
</div>
</section>
<!-- Zahlen zuerst: Das Konzept will "Prioritäten statt Datenfriedhof".
Sind alle sechs null, steht dort ein Satz statt sechs Nullen. -->
<section class="zahlen-block" id="zahlen-block">
<p class="feldschild">Deine Aufgaben</p>
<ul class="zahlen" id="zahlen"></ul>
<!-- Kein Grau-in-Grau, wenn alles erledigt ist: Ein leerer Posteingang
ist eine gute Nachricht und darf auch so aussehen. -->
<div class="zahlen-leer" id="zahlen-leer" hidden>
<span class="zahlen-leer__haken" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="m5 12.6 4.4 4.4L19 7.4" /></svg>
</span>
<span>
<strong>Nichts offen.</strong>
<span class="zahlen-leer__still">Alles abgearbeitet – gönn dir was.</span>
</span>
</div>
</section>
<!-- Die Bereiche, in drei Gruppen: was man täglich braucht, was zu
einem Creator gehört, was den Laden am Laufen hält. Aufgebaut von
start.js – dort steht auch, warum. -->
<div id="bereiche"></div>
<!-- ERKLAERT DEN KASTEN „Was ist dran" -- und verschwindet mit ihm
(18.09.2026). Ein Mitglied der Community sieht den Kasten nicht;
bei ihm stand hier eine Erklaerung fuer etwas, das gar nicht da
ist. Das ist schlimmer als keine Erklaerung: Man sucht danach. -->
<p class="fuss" id="fuss-dran">
„Was ist dran" führt keine eigene Liste, sondern zeigt, was in den Bereichen
schon liegt – ein Punkt verschwindet von selbst, sobald die Sache erledigt ist.
Angezeigt wird nur, was du ohnehin sehen darfst.
</p>
</main>
<script src="assets/js/meldung.js?v=202609300235" defer></script>
<script src="assets/js/nachfrage.js?v=202609300235" defer></script>
<script src="assets/js/wahl.js?v=202609300235" defer></script>
<script src="assets/js/bereiche.js?v=202609300235" defer></script>
<script src="assets/js/installieren.js?v=202609300235" defer></script>
<script src="assets/js/kopf.js?v=202609300235" defer></script>
<script src="assets/js/glocke.js?v=202609300235" defer></script>
<script src="assets/js/live.js?v=202609300235" defer></script>
<script src="assets/js/start.js?v=202609300235" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink