Uhr: Stunden rot, Minuten silber, Sekunden babyblau -- alle drei als Reihen
Wunsch Filipe: "stunden soll rot sein, minuten schwarz/silber und die sekunden babyblau. die punkte herum sollen eine mischung von rot schwarz und babyblau sein. ich will auch dass die stunden und minuten auch barren oder punkte sind und nicht so eine durchlaufende schleife." ALLE DREI BAHNEN SIND JETZT REIHEN. Die Stunde bekommt zwoelf Balken (ein Zifferblatt hat zwoelf), Minute und Sekunde sechzig. Die Glieder sind verschieden lang -- Punkt (0,01 + runde Kappe), kurzer Balken (1,7), langer Balken (5,5). Damit liest man die drei Bahnen auch dann auseinander, wenn jemand Farben schlecht unterscheidet; Farbe allein traegt eine Information nie. VIER FUNDE BEIM NACHMESSEN, keiner davon war vorher sichtbar: 1. ABRUNDEN STATT RUNDEN. `Math.round` liess Minute und Stunde ab der HAELFTE einen Balken zu frueh aufleuchten: um 14:30 zeigte der Stundenring vier statt drei Balken, der Minutenring ab Sekunde 30 einen zu viel. Die Uhr war damit die halbe Zeit ueber falsch -- und ausgerechnet zur vollen Stunde, wo man hinsieht, richtig. Nachgerechnet: 10:30 -> 11, 14:30 -> 3, 23:59 -> 12, 00:00 -> 1. 2. DIE PERLENKOEPFE TRUGEN DIE ALTE ZUORDNUNG. Die drei Boegen waren getauscht, die drei Koepfe nicht: ein roter Kopf sass auf der blauen Sekundenreihe, ein silberner auf den roten Stundenbalken. Das sah nach einem Winkelfehler aus, obwohl alle drei auf die Zehntelgrad genau standen (354 / 161,9 / 343,0 bei 23:26:59, gemessen). Wer eine Farbe tauscht, tauscht sie an ALLEN Stellen: Bogen, Kopf, Schein, Kranz. 3. DER SCHEIN LAG DREIFACH UEBEREINANDER. Jeder Ring liegt dreimal im SVG (Schatten, Hauptlage, Kante); `.uhr__stunde` traf alle drei. Das rote Leuchten lief dadurch bis ueber die Ziffern, obwohl in der Regel nur 1,8 px stehen -- genau das Verschwommene, das Filipe nicht will. Jetzt `.uhr__ring > …`: nur die Hauptlage leuchtet, Schatten und Kante bleiben hart. 4. ZWEI TOTE FARBSCHICHTEN in heim.css (Sekunde rot / Minute blau / Stunde bronze). Sie wurden vom spaeteren Satz ueberschrieben und waren unsichtbar -- aber wer die Datei von oben liest, haelt sie fuer die geltende Regel und aendert die falsche Stelle. Entfernt statt stehengelassen: EINE Stelle entscheidet ueber eine Farbe. Ausserdem: Der Kometenschweif ist raus (HTML und CSS, nicht ausgeblendet). Eine Reihe zeigt ihre Richtung durch das letzte Glied; ohne eigenes Muster haette er einen vollen Ring quer ueber die Punkte gezogen. Der Punktkranz aussen mischt jetzt Rot, Babyblau und ein sehr dunkles Blau im 18-Grad-Takt -- das Dunkel ist kein Loch, sonst zerfiele der Ring aus dem Augenwinkel in zwei Haelften. Gedaempft bleibt Pflicht: Die Sekunde laeuft dauernd und bekommt das ruhigste Babyblau, die Stunde bewegt sich kaum und darf die kraeftigste Farbe tragen. Die Auslieferungskennung ist auf allen 19 Seiten hochgesetzt, sonst kaeme keine der Aenderungen an. Geprueft: pruef-start-ansicht (alles in Ordnung), pruef-css-klassen (alles in Ordnung), Segmentzahlen und Perlenwinkel im Browser nachgemessen, Bildschirmfoto bei vierfacher Aufloesung. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+67
-59
@@ -14,12 +14,12 @@
|
||||
<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=202609080105" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609080105" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609082330" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609082330" />
|
||||
<!-- 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=202609080105" />
|
||||
<link rel="stylesheet" href="assets/css/module.css?v=202609080105" />
|
||||
<link rel="stylesheet" href="assets/css/heim.css?v=202609082330" />
|
||||
<link rel="stylesheet" href="assets/css/module.css?v=202609082330" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -213,22 +213,56 @@
|
||||
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. -->
|
||||
<linearGradient id="uhr-silber" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#ffeacb" />
|
||||
<stop offset="26%" stop-color="#a07a4e" />
|
||||
<stop offset="48%" stop-color="#f5dcb4" />
|
||||
<stop offset="70%" stop-color="#6f5433" />
|
||||
<stop offset="100%" stop-color="#e0c295" />
|
||||
<!-- ==== 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>
|
||||
<linearGradient id="uhr-blau" x1="0" y1="1" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#2f7fd4" />
|
||||
<stop offset="50%" stop-color="#63b8f5" />
|
||||
<stop offset="100%" stop-color="#a8ddff" />
|
||||
|
||||
<!-- 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>
|
||||
<linearGradient id="uhr-rot" x1="1" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#ff8a91" />
|
||||
<stop offset="50%" stop-color="#ff4d5c" />
|
||||
<stop offset="100%" stop-color="#c22636" />
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@@ -286,44 +320,18 @@
|
||||
<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 (08.09.2026) ==================
|
||||
<!-- DER KOMETENSCHWEIF IST WEG (08.09.2026).
|
||||
|
||||
Filipe: "auch die lichter von sekunden, minuten und
|
||||
stunden perfekt anpassen, wie die läuft und aussieht
|
||||
soll wirklich mega perfekt sein."
|
||||
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.
|
||||
|
||||
Ein Bogen in gleichmaessiger Farbe zeigt einen STAND.
|
||||
Ein Bogen, der zur Spitze hin heller wird, zeigt eine
|
||||
RICHTUNG -- man sieht ohne Nachdenken, wo "jetzt" ist
|
||||
und wohin es laeuft. Das ist der Unterschied zwischen
|
||||
einer Anzeige und einem Instrument.
|
||||
|
||||
Gebaut als eigenes Segment ueber dem Bogen: die letzten
|
||||
rund 40 Grad vor der Spitze, heller und mit runder
|
||||
Kappe. Ein Verlauf ENTLANG des Kreises geht in SVG
|
||||
nicht -- linearGradient folgt einer Geraden, nicht
|
||||
einer Bahn. Zwei Lagen uebereinander sind der ehrliche
|
||||
Weg dorthin.
|
||||
|
||||
Sie liegen VOR der Oberkante, damit die helle Kante
|
||||
auch auf dem Schweif sitzt und nicht darunter
|
||||
verschwindet. -->
|
||||
<!-- NUR ZWEI SCHWEIFE, NICHT DREI (08.09.2026).
|
||||
|
||||
Die Sekunde ist seit heute eine PUNKTREIHE -- eine
|
||||
Reihe hat keinen Kometenschweif, sie hat einen letzten
|
||||
Punkt, und den setzt die Perle. Ihr Schweif-Kreis stand
|
||||
zuerst noch hier und war per CSS ausgeblendet; das hat
|
||||
nicht gegriffen, und weil er ohne `dasharray` gezeichnet
|
||||
wurde, lief ein durchgehender roter Ring um die ganze
|
||||
Uhr -- bei fuenf Sekunden. Im Bildschirmfoto gesehen.
|
||||
|
||||
Ein Element, das nie sichtbar sein soll, gehoert nicht
|
||||
ins Dokument. Ausblenden ist kein Entfernen. -->
|
||||
<g class="uhr__spur">
|
||||
<circle class="uhr__spur-bahn" data-spur="minute" cx="50" cy="50" r="38.5" />
|
||||
<circle class="uhr__spur-bahn" data-spur="stunde" cx="50" cy="50" r="31.5" />
|
||||
</g>
|
||||
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" />
|
||||
@@ -470,10 +478,10 @@
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609080105" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609080105" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609080105" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609080105" defer></script>
|
||||
<script src="assets/js/start.js?v=202609080105" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609082330" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609082330" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609082330" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609082330" defer></script>
|
||||
<script src="assets/js/start.js?v=202609082330" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user