DogFatherGitandClaude Opus 5
150555bc33
Filipe: „fuer die modis, rechte und linke hand und dogfather eine
kachel hinzufuegst, sie soll: Notizen, heissen. ich will dass du das
auch wie ein notizblock erstellst. ich will dass es uebelst geil und
einzigartig ist."
=================================================================
TEIL 1: DIE FARBE -- UND WAS DABEI AUFFIEL
=================================================================
Fuer die neue Kachel braucht es einen Ton. Beim Suchen fiel auf, dass
tools/kachelton-entzerren.mjs zwoelf der 45 Farben fuer FREI hielt.
Sie sind es nicht. bereicheFuer() gibt fuer die fuenf Rollen des
Agenturhauses null zurueck -- das heisst „nimm die Liste aus dem
Browser", und die steht in workspace/assets/js/bereiche.js. Dort
stehen die Toene 1 bis 22 und 44: Dashboard, Zahlen, Team-Lage,
Scout-Pipeline. Kacheln, die jeden Tag jemand ansieht.
pruef-kachelfarben hatte denselben blinden Fleck. Sie meldete seit
Wochen „33 benutzte Toene" und war gruen. Was sie dadurch NICHT sah:
* Der Farblauf von gestern Nacht hat zwoelf dieser Kacheln
verschoben und drei davon unter die Buntheitsgrenze gedrueckt.
Gruen geblieben.
* Ton 7, 16 und 22 lagen SEIT JEHER unter der Grenze (0,112 / 0,116
/ 0,068). Nie gemeldet.
Das ist die Sorte gruener Haken, vor der die Hausregel warnt: Er sagt
nur, dass die Bedingung erfuellt war -- nicht, dass sie das Richtige
angesehen hat.
BEHOBEN, und zwar an der Wurzel: Die REGELN (Kontrast, Buntheit)
gelten jetzt fuer jeden Ton, der irgendwo an einer Kachel steht --
gelesen aus denselben fuenf Dateien, die auch pruef-kachel-universum
liest. Dazu die Namen der Kacheln, damit „Ton 1 traegt Dashboard"
ueberhaupt pruefbar ist.
DIE PALETTE WURDE NEU GERECHNET, mit dem dritten Verfahren an einem
Tag -- die ersten zwei stehen als Fehler im Kopf des Werkzeugs:
1. Alle 45 neu verteilt. Lief ueber zwei ausdrueckliche Wuensche
hinweg (#ff1a1a, #a8d8ff).
2. Nur die Kollisionen, aber immer nur EINEN der beiden bewegt.
Ergebnis: Ton 1 sprang vom Tuerkis ins Altrosa, 0,197 weit.
3. BEIDE duerfen sich bewegen, und zwar beide nur ein bisschen.
Zwei Toene, die 0,02 auseinanderstehen und 0,09 brauchen, teilen
sich das -- jeder rueckt 0,045, und beide bleiben, was sie waren.
kleinster Abstand 0,0154 -> 0,0905
zu blass 4 -> 0
sichtbar veraendert 7 Kacheln (ueber 0,05)
kaum zu sehen 28 (13 zwischen 0,02 und 0,05, 15 darunter)
EINE AUSNAHME MIT ZAHL, keine mit Achselzucken: Ton 1 (Dashboard)
bleibt acht Tausendstel unter der Buntheitsgrenze. Gemessen ueber ALLE
16,7 Millionen sRGB-Farben ist die naechste, die alle Regeln haelt,
#7a75c8 -- ein Blauviolett, 0,113 entfernt. Tuerkis erreicht in sRGB
schlicht keine hoehere Buntheit, und das schmale Band teilen sich
schon sieben Toene. Eine Kachel, die ihre Farbfamilie behaelt, ist die
bessere Antwort auf „richtig geil und speziell" als eine, die acht
Tausendstel bunter ist und niemand wiedererkennt. blassBis sagt jetzt
bei jeder Ausnahme, WIE WEIT sie reicht -- vorher hiess blassErlaubt
schlicht „hier wird weggesehen".
DIE NEUE FARBE IST GRUEN UND WOLLTE BERNSTEIN SEIN. Gesucht war die
Farbe von Papier. Gemessen gibt es sie nicht mehr: Der beste Bernstein
im ganzen Farbraum haelt 0,0799 Abstand -- unter der Hausgrenze. Und
Platz schaffen hilft nicht: Setzt man ihn fest, muss ein warmer Ton
das Band verlassen (Ton 45 waere 0,212 weit ins Magenta gewandert).
Die groesste wirklich freie Luecke liegt im Gruen, bei 0,0917. Ein
linierter Block in Gruen ist Papier, seit es Papier gibt.
=================================================================
TEIL 2: DER BLOCK
=================================================================
DREI ENTSCHEIDUNGEN, AUS DENEN DER REST FOLGT:
1. ES GIBT KEINEN SPEICHERN-KNOPF. Nirgends. Wer einen Block
aufschlaegt und lostippt, drueckt hinterher nicht auf „sichern";
er klappt ihn zu. Gesichert wird 800 ms nach dem letzten
Tastendruck. Geht das nicht, bleibt der Text im Browser liegen und
wird nachgereicht -- und der Fuss sagt ehrlich „noch nicht
gesichert", statt einen Verlust zu melden, den man gerade nicht
verhindern kann.
2. DAS BLATT IST EIN SCHREIBFELD MIT EINER DECKSCHICHT. Das Feld
traegt Text und Cursor und ist unsichtbar; darueber zeichnet eine
zweite Schicht denselben Text noch einmal -- mit Kaestchen,
Ueberschriften, Strichen und Links.
DARAUS FOLGT EINE EISERNE REGEL, und sie steht dreimal im Code:
KEINE Auszeichnung darf die BREITE eines Zeichens aendern. Kein
Fettdruck, keine andere Groesse, keine Sperrung. Erlaubt sind nur
Farbe, Flaeche, Rahmen und Durchstreichen. Ein einziges
font-weight: 700 verschoebe den Umbruch, und ab der zweiten Zeile
stuende der sichtbare Text neben dem Cursor.
pruef-notizen misst das am echten Umbruch: eine Probe mit allen
Auszeichnungen und einer Zeile, die umbrechen MUSS. Sind beide
Schichten verschieden hoch, sitzt der Umbruch woanders. Mit
Gegenprobe -- Fettdruck auf der Deckschicht bricht die Deckung um
genau eine Zeile (30 px), und die Zeile wird rot.
3. DIE TASTATUR FUEHRT DIE LISTE FORT, NICHT EINE LEISTE. Ein
Spiegelstrich und Enter macht den naechsten Punkt, ein leeres
Kaestchen und Enter das naechste Kaestchen -- und ein GESETZTER
Haken wird dabei nicht mitgenommen, die naechste Aufgabe ist ja
noch nicht erledigt. Zweimal Enter beendet die Liste. Ein Klick
aufs Kaestchen hakt ab. Es gibt keine Werkzeugleiste, weil man beim
Schreiben nie den Stift wechselt.
UND: NIEMAND SIEHT DIE NOTIZEN EINES ANDEREN. Auch DogFather nicht.
Es gibt in workspace-notizen.js keinen siehtAlles()-Zweig, keinen
Umschalter, keine fremde Liste -- jede Abfrage hat person_id = ? fest
eingebaut. Die Kachel steht deshalb in „Fuer dich" und nicht in
„Taeglich": Die Gruppe sagt die wichtigste Eigenschaft, bevor man sie
anfasst.
NUR AUF DER TEAM-ADRESSE. Auf der Agenturadresse ist die Seite ein
404 -- auch fuer DogFather. Das ist dieselbe Trennung wie bei Chat,
Kalender und Aufgaben, und sie steht an zwei Stellen: in
GEHOERT_ZU_ADRESSE (die Datei) und in der Schnittstelle (die Daten).
Die Seite ist nur HTML; die Daten sind die Sache.
Dazu: sechs Papierfarben, Anheften, Suche mit Hervorhebung im Text,
Papierkorb mit dreissig Tagen und einem Eintrag in der
Aufbewahrungsliste (ohne den waere die Frist ein Satz in einem
Kommentar -- genau das ist dem Support am 24.09. passiert).
=================================================================
EIN FUND BEIM BAUEN, DER ALLEN GEHOERT
=================================================================
DELETE /workspace/api/notizen/:id gab es schon -- in
workspace-aufgaben.js, fuer die Notizen AN einer Aufgabe. Weil jener
Router frueher eingehaengt ist, hat er jeden Loeschversuch des Blocks
abgefangen und mit 404 beantwortet.
Von aussen sah das aus wie ein Fehler im neuen Modul: Anlegen ging,
Aendern ging, Loeschen nicht. Man sucht dann im eigenen Code, und dort
ist nichts. Express meldet so etwas nicht -- es nimmt die erste Route,
die passt, und schweigt ueber die zweite.
Der Block liegt jetzt unter /workspace/api/notizblock. Und
pruef-notizen geht seitdem den Routenbaum von express durch und meldet
jedes Paar aus Methode und Pfad, das zweimal vergeben ist. Gemessen:
307 Wege, keine Dublette. Die Pruefung gilt fuers ganze Haus, auch
wenn sie in dieser Datei steht -- hier ist sie gefunden worden.
Nebenbei berichtigt: pruef-crew-adresse verlangte von jedem Eintrag
der Haustafel HTTP 200 mit Inhalt. Das stimmte, solange dort nur
oeffentliche Dateien standen. notizen.html ist die erste Seite hinter
der Anmeldung -- sie antwortet mit 302, und das ist richtig. Gefragt
wird jetzt, was die Tafel wirklich meint: GIBT es das hier.
GEMESSEN, alles nach den Aenderungen:
pruef-notizen 76 Punkte, 0 Fehler (neu)
pruef-kachelfarben 31 Punkte, 0 Fehler (vorher 26)
pruef-kachel-universum 13 Punkte, 0 Fehler
pruef-crew-adresse 157 Punkte, 0 Fehler
pruef-buehne 230 Punkte, 0 Fehler -- notizen.html neu in
der Liste, schlechtester Kontrast 6,73:1,
also 50 % ueber der Grenze
pruef-rechtetafel, -haus-seiten, -struktur, -css-klassen,
-jeder-hat-eine-seite, -workspace-seiten, -kachelraster,
-rueckmeldung alle 0 Fehler
Co-Authored-By: Claude Opus 5 <[email protected]>
716 lines
38 KiB
HTML
716 lines
38 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>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=202609261240" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609261240" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609261240" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609261240" />
|
||
<!-- 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=202609261240" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609261240" />
|
||
<!-- 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=202609261240" />
|
||
</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 & Dogi · Creator 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. -->
|
||
<span class="zmarke">
|
||
<i class="zraute" aria-hidden="true"></i>
|
||
Spicy Media
|
||
<i class="zraute" aria-hidden="true"></i>
|
||
</span>
|
||
<p class="ztitel" id="ztitel">Zentrale</p>
|
||
<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=202609261240" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202609261240" defer></script>
|
||
|
||
|
||
<script src="assets/js/wahl.js?v=202609261240" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609261240" defer></script>
|
||
<script src="assets/js/installieren.js?v=202609261240" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609261240" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609261240" defer></script>
|
||
<script src="assets/js/live.js?v=202609261240" defer></script>
|
||
<script src="assets/js/start.js?v=202609261240" defer></script>
|
||
</body>
|
||
</html>
|