--- Und ein Fund unterwegs: Cigdems Kennung war kaputt --- `--rollen-ton` faerbt Kennung und Rollenplakette in der Kopfleiste. Die Liste dahinter kannte admin, manager, scout und creator -- SPICY MEDIA nicht. Die Rolle kam am 07.09. dazu, diese Liste ist nicht mitgegangen. Was dabei passiert, ist schlimmer als eine falsche Farbe: Die Variable war GAR NICHT gesetzt, und `color-mix(in srgb, var(--rollen-ton) 62%, transparent)` ist mit einer leeren Variablen ungueltig -- der Browser wirft die ganze Deklaration weg. Nachgemessen im Browser: Hintergrund `none`, Rand `rgb(234,243,255)` (also currentColor, weil auch die Randfarbe fiel), Plakette grau statt rot. Cigdems Kennung war ein weisser Kasten in einer roten Leiste. DESHALB STEHT JETZT EINE VORGABE DAVOR, und die ist wichtiger als der nachgetragene Eintrag: Wer die naechste Rolle anlegt und diese Liste wieder vergisst, bekommt eine Kennung in der Hausfarbe -- nicht mehr eine kaputte. Ein fehlender Eintrag darf zu etwas Schlichterem fuehren, nie zu etwas Ungueltigem. --- screen30: der leere Zustand --- "das muss auch viel spezieller sein und auch nicht wie alle anderen kacheln da sondern wirklich krasser und geiler aber so dass es vom aussehen trotzdem noch zu seite passt." Das Gruen lief als Verlauf nach 60 Prozent ins Nichts, dahinter das Hintergrundbild -- auf Filipes Bild scheint ein Chili mitten durch die gute Nachricht. Eine Fassung, die nur auf der linken Haelfte existiert, ist keine. "Nicht wie alle anderen Kacheln" ist inhaltlich richtig: Alles andere auf dieser Seite ist eine AUFGABE, etwas, das man noch tun muss. Das hier ist die Quittung, dass nichts mehr offen ist. Es waere falsch, wenn es wie eine weitere Aufgabe aussaehe. Also die Form eines SIEGELS: die Fase sitzt rechts unten statt links oben -- spiegelverkehrt zur Kachelsprache --, links eine breite gruene Lichtschiene wie ein Stempelrand, und der Haken ist eine gepraegte Muenze statt eines Kreises mit einem Strich darin. Die Flaeche ist deckend; eine gute Nachricht, durch die man das Hintergrundbild sieht, liest sich wie ein Platzhalter. Leise bleibt es trotzdem: gedecktes Gruen, hoechstens 14 Prozent Flaeche, nichts pulsiert. Wer nichts offen hat, braucht kein Feuerwerk. Kontrast gemessen: 14,47:1 (fett) und 7,39:1 (still). --- screen32: die Kennung in der Kopfleiste --- "das sieht schon richtig gut aus aber ich will dass es noch krasser und spezieller aussieht." Sie sass als flaches, abgerundetes Quadrat zwischen vier Knoepfen und sah damit aus wie ein fuenfter Knopf, der sich nicht druecken laesst. Sie ist aber etwas anderes: Sie sagt, WER hier ist, nicht, was man tun kann. Jetzt die Fase des Hauses statt der Rundung (sie gehoert zur Seite, nicht zur Knopfreihe), ein gepraegter Ring statt eines gezeichneten Randes (Lichtkante oben, Schattenkante unten) und ein sehr leiser Schein in der Rollenfarbe. KEINE GROESSENAENDERUNG -- 28x28 bleibt. Die Kopfleiste ist am 06.09.2026 schon einmal an einem zusaetzlichen Element zerbrochen; was hier waechst, drueckt dort etwas heraus. Geprueft: pruef-workspace-seiten (18 Seiten, Ueberstand ueberall 0 px), pruef-handy, pruef-start-ansicht, pruef-css-klassen -- alle in Ordnung. Co-Authored-By: Claude Opus 5 <[email protected]>
532 lines
28 KiB
HTML
532 lines
28 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=202609090034" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609090034" />
|
||
<!-- 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=202609090034" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609090034" />
|
||
</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>
|
||
</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. -->
|
||
<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>
|
||
|
||
<!-- ==== 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" />
|
||
|
||
<!-- 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 PERLE AM KOPF DES SEKUNDENBOGENS. Sie laeuft einmal je
|
||
Minute herum und ist das Einzige an der Uhr, das sich
|
||
BEWEGT statt nur zu wachsen. Ein Bogen zeigt einen Stand,
|
||
eine laufende Perle zeigt LEBEN -- und genau das ist der
|
||
Unterschied zwischen einer Anzeige und einem Instrument. -->
|
||
<span class="uhr__perle" id="uhr-perle" aria-hidden="true"></span>
|
||
<!-- Dieselbe Kappe fuer Minute und Stunde, auf ihren eigenen
|
||
Bahnen. Drei Koepfe statt einem: Erst dadurch liest man
|
||
die drei Ringe als drei ZEIGER und nicht als drei
|
||
Fortschrittsbalken. -->
|
||
<span class="uhr__perle uhr__perle--minute" id="uhr-perle-minute" aria-hidden="true"></span>
|
||
<span class="uhr__perle uhr__perle--stunde" id="uhr-perle-stunde" aria-hidden="true"></span>
|
||
<!-- 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=202609090034" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609090034" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609090034" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609090034" defer></script>
|
||
<script src="assets/js/start.js?v=202609090034" defer></script>
|
||
</body>
|
||
</html>
|