Damit Anrufe auch in Netzen zustande kommen, die keine direkte Verbindung zulassen (15-25 % der Faelle). coturn ist installiert, steht aber still, bis die Konfiguration liegt -- ein coturn mit Werkseinstellung ist ein offenes Relais. KEIN FESTES PASSWORT. Es laege dauerhaft im Browser jedes Team-Mitglieds und liesse sich nie entziehen. Der Server rechnet stattdessen bei jeder Abfrage Zugangsdaten, die nach zwoelf Stunden verfallen (server/workspace-turn.js, coturns `use-auth-secret`). Das Geheimnis liegt in einer Datei, nicht in der Datenbank: einstellung- Setzen() schreibt Werte ins Protokoll, und coturn braucht denselben Wert ohnehin in /etc. Die Oberflaeche frischt die Daten vor jedem Anruf auf. Der Chat ist eine App, die tagelang offen bleibt -- wer nur beim Laden holt, telefoniert am zweiten Tag ohne Vermittlung, und es faellt nicht auf: Es scheitern nur die, die sie gebraucht haetten. DIE WICHTIGSTE ZEILE DER KONFIGURATION ist die Sperrliste. Gemessen: dreizehn Dienste lauschen auf diesem Server nur oertlich, darunter Caddys Verwaltung auf 127.0.0.1:2019 -- wer sie erreicht, kann jede Website umleiten. Ohne Sperrliste waere der Vermittlungsserver die Tuer dorthin, und die Anfrage saehe fuer Caddy aus wie von localhost. Geprueft: pruef-anruf.mjs 51 -> 73 Pruefungen. Gegenprobe (Geheimnis als Passwort ausliefern + fremde Zugangsdaten ueberschreiben) macht genau 5 rot, darunter "das Geheimnis steht NIRGENDS in der Antwort". tools/turn-probelauf.sh beweist am echten coturn, was ein fester Vergleichswert nicht kann: dass coturn unsere Rechnung akzeptiert. Beide Seiten koennten sonst konsequent falsch rechnen und jede Pruefung waere gruen. Seine eigene Gegenprobe war zweimal zu Recht rot -- der erste Aufbau mass wegen `-y` gar nicht das Ziel, das er zu messen behauptete, sondern coturns eingebauten Loopback-Schutz. Co-Authored-By: Claude Opus 5 <[email protected]>
684 lines
36 KiB
HTML
684 lines
36 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=202609181521" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609181521" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609181521" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609181521" />
|
||
<!-- 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=202609181521" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609181521" />
|
||
<!-- 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=202609181521" />
|
||
</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 ("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.
|
||
|
||
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="#fb8f97" />
|
||
<stop offset="28%" stop-color="#e05e6b" />
|
||
<stop offset="52%" stop-color="#f27c87" />
|
||
<stop offset="74%" stop-color="#d95463" />
|
||
<stop offset="100%" stop-color="#ee717d" />
|
||
</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>
|
||
|
||
<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=202609181521" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609181521" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609181521" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609181521" defer></script>
|
||
<script src="assets/js/start.js?v=202609181521" defer></script>
|
||
</body>
|
||
</html>
|