DogFatherGitandClaude Opus 5
cccafd2c31
--- screen3 + screen1: die Hintergruende draengeln nicht mehr --- "die hintergrunde sollen ueberall so sein dass die sich nicht in den vordergrund draengeln." / "mach den hintergrund von dieser kachel dunkler, so dass die die kacheln drin viel mehr auffallen." `--raster` stand auf .26 Deckkraft -- auf dunkler Flaeche kein Hauch mehr, sondern ein gezeichnetes Gitter. Im Tagdialog lief es sichtbar durch die Ueberschrift, in den Sammelkacheln stand es VOR den Karten darin. Jetzt .09: Man sieht eine Struktur, man zaehlt keine Linien. Eine Zahl fuer das ganze Haus -- sie steht einmal in module.css und wird an fuenf Stellen benutzt. Die Anlasskachel im Kalender lag mit rgba(19,26,38,.88) auf demselben Helligkeitsniveau wie die Karten darin: keine Vitrine, sondern eine dritte Flaeche gleicher Lautstaerke. Jetzt fast schwarz. An den Karten musste dafuer nichts geaendert werden -- der Abstand entsteht von selbst. --- screen2: ein Knopf wandert nach links --- "eins von diesen buttons soll links bei dem anderen kreis sein." Die GLOCKE geht nach links zum Ring, der WECKER bleibt rechts bei der Uhr. Das ist nicht ausgewuerfelt: Der Wecker ist eine Uhrzeit. Die Glocke entscheidet, ob man ueberhaupt etwas ueber sein Team erfaehrt -- und der Ring links zeigt genau das. Die Kachel ist damit spiegelsymmetrisch belegt: 48 px Knopf + 14 px Abstand + 248 px Instrument auf beiden Seiten. Genau das rechnet `--spalte`. Die Zentrierung des Rings ist weggefallen -- sie war noetig, solange er allein in einer fuer Instrument PLUS Knopf bemessenen Spalte stand. Der reservierte Platz schrumpft von 104 auf 48 px je Seite; die Begruendung fuer das Reservieren bleibt: Ein Platz, der erst mit der Antwort entsteht, laesst die Zeile springen. --- screen4: zwei Chilis und zwei Huskys dazu --- "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 % verschwaenden die schwarzen Flaechen im dunklen Grund und uebrig blieben die hellen -- ein zerrissener Umriss, kein Hund. Als Maske ueber einer Farbflaeche wird daraus eine geschlossene Silhouette in DogFathers Babyblau. Im Universum schweben jetzt beide Marken in ihren beiden Farben: sieben Chilis rot, zwei Huskys blau. --- screen5: die Punkte sind ersetzt, das letzte Glied leuchtet --- "ich will dass du die punkte ersetzt und immer der letzte soll mehr strahlen oder so." / "alles ist mega ausser die stunden muss du noch perfektionnieren." DIE DREI UMLAUFENDEN PERLEN SIND WEG -- samt 60 Zeilen Rechnung. Sie waren ein zweites Ding an einer zweiten Stelle: eigene Uhr ab dem ersten Takt (weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab), eigener Startwinkel je Bahn, drei Winkel, die die kleineren Einheiten anteilig mittragen mussten. All das war noetig, WEIL der Kopf neben der Reihe herlief statt Teil von ihr zu sein. Genau deshalb trugen sie am 08.09. noch die alten Farben, als die Bahnen getauscht wurden. Jetzt zeichnet eine zweite SVG-Lage genau EIN Glied heller -- dasselbe, das die Reihe darunter zuletzt gesetzt hat, aus denselben Zahlen. Sie kann gar nicht danebenstehen. Heller statt groesser: Waere der Kopf groesser, waere er ein Fremdkoerper in der Reihe. DIE STUNDEN WAREN BREITER ALS LANG -- 5,5 lang bei 7 breit, also 0,79:1. Ein Segment, das breiter ist als lang, liest sich als Klotz quer auf der Bahn statt als Balken entlang. Und weil die Kantenlage nur 0,4 versetzt ist, lief der 0,9 breite Lichtstrich MITTEN DURCH jeden Balken statt an seiner Kante. Jetzt 10 lang bei 5,8 breit (1,7:1), und der Kantenversatz ist nach Bandbreite gestaffelt: (Breite - 0,9) / 2, also 0,75 / 1,65 / 2,05 zusaetzlich zur Gruppe. --- screen6: die Scout-Pipeline wird knallrot --- "die farbe von dieser kategorie soll knall rot sein." Die anderen zwanzig Kachelfarben sind gerechnet (OKLab, groesstmoeglicher Abstand). Diese eine ist gewuenscht -- und wurde deshalb GEGEN den Satz geprueft statt eingetragen: Der engste vorhandene Abstand liegt bei 0,0973. #ff1f2e kommt seinem naechsten Nachbarn auf 0,1228 nahe, ist also weiter entfernt als das engste vorhandene Paar. Kontrast 5,01:1 (noetig 4,5). Von sechs geprueften Rottoenen der mit dem groessten Abstand UND genug Kontrast. tools/kachel-farben.mjs weiss jetzt davon: Ein kuenftiger Lauf wuerde wieder Rosa vorschlagen, und das waere eine stille Ruecknahme einer ausdruecklichen Entscheidung. --- Ein Messfehler, der festgehalten gehoert --- Beim Pruefen von screen4 meldete meine Foto-Methode vier Beschriftungen unter 4,5:1 -- bei einem Verlust von 0,00 bis 0,15 durch das Universum. Dass die Ursache nicht das Universum sein konnte, stand damit schon in den Zahlen. Exakt gerechnet (Vordergrundfarbe gegen die tatsaechliche Flaeche darunter) liegen dieselben Texte bei 9,13:1 bis 10,76:1. Die Foto-Methode mittelt ueber alle helleren Bildpunkte, und bei duenner Grossbuchstabenschrift ist die Haelfte davon halb ausgeleuchtete Kantenpunkte. Fuer grosse Schrift taugt sie, fuer kleine Versalien meldet sie systematisch zu wenig. Haette ich ihr geglaubt, haette ich vier Farben "repariert", die in Ordnung sind. Geprueft: pruef-start-ansicht, pruef-css-klassen, pruef-kalender, pruef-buehne, pruef-handy, pruef-workspace-seiten, pruef-tagesruf -- alle in Ordnung. Dazu Ring und Uhr auf 248/248 nachgemessen, die Kopf-Muster gegen die Uhrzeit nachgerechnet (01:24:59 -> Sekunde bei 281,115, Minute bei 96,76, Stunde bei 16,493) und die Kachelfarbe gegen alle zwanzig anderen in OKLab geprueft. Co-Authored-By: Claude Opus 5 <[email protected]>
590 lines
31 KiB
HTML
590 lines
31 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" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
|
||
<!-- 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=202609090133" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
|
||
</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="glocke-platz glocke-platz--links" id="glocke-platz-links"></div>
|
||
<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>
|
||
</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 ("Die Zentrale") sagt, wo man ist. -->
|
||
<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">Die 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. -->
|
||
<linearGradient id="uhr-stunde-farbe" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#ff9aa0" />
|
||
<stop offset="28%" stop-color="#e33f4c" />
|
||
<stop offset="52%" stop-color="#ff7d86" />
|
||
<stop offset="74%" stop-color="#a81f2c" />
|
||
<stop offset="100%" stop-color="#ff6b76" />
|
||
</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 0.55)">
|
||
<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 -0.4)">
|
||
<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>
|
||
|
||
<p class="fuss">
|
||
„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/wahl.js?v=202609090133" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609090133" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609090133" defer></script>
|
||
<script src="assets/js/start.js?v=202609090133" defer></script>
|
||
</body>
|
||
</html>
|