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
+110
-89
@@ -1090,38 +1090,52 @@
|
||||
transform: rotate(0deg);
|
||||
transition: transform .12s cubic-bezier(.34, 1.56, .64, 1);
|
||||
}
|
||||
/* DER ABSTAND FOLGT DER BAHN, DIE FARBE FOLGT DER BAHN -- und beides
|
||||
muss beim Farbtausch mitgehen. Am 08.09.2026 habe ich genau das
|
||||
vergessen: Die drei BOEGEN waren getauscht (Stunde rot, Minute
|
||||
silber, Sekunde babyblau), die drei KOEPFE trugen weiter die alte
|
||||
Zuordnung. Im Bildschirmfoto sass dadurch ein roter Kopf auf der
|
||||
blauen Sekundenreihe und ein silberner auf den roten Stundenbalken
|
||||
-- es sah nach einem Rechenfehler bei den Winkeln aus, obwohl alle
|
||||
drei auf die Zehntelgrad genau standen (354 / 161,9 / 343,0 bei
|
||||
23:26:59, nachgemessen). Wer eine Farbe tauscht, tauscht sie an
|
||||
ALLEN Stellen, die sie tragen -- Bogen, Kopf, Schein, Kranz. */
|
||||
|
||||
/* AUSSEN, BABYBLAU: der Kopf der Sekundenpunkte. Am groessten, weil er
|
||||
der einzige ist, der sich sichtbar bewegt. */
|
||||
.uhr__perle::before {
|
||||
content: "";
|
||||
position: absolute; top: 4.2%; left: 50%;
|
||||
width: 7px; height: 7px; margin-left: -3.5px;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 36% 32%, #fff 0%, #ff9aa2 38%, #ff2f42 72%, #8e1b26 100%);
|
||||
radial-gradient(circle at 36% 32%, #fff 0%, #d8efff 34%, #7ec8f2 70%, #1d5a80 100%);
|
||||
box-shadow:
|
||||
0 0 6px 1px rgba(255, 70, 90, .75),
|
||||
0 0 14px 3px rgba(255, 70, 90, .35),
|
||||
inset 0 0 0 .5px rgba(255, 255, 255, .5);
|
||||
0 0 6px 1px rgba(126, 200, 242, .75),
|
||||
0 0 13px 3px rgba(110, 180, 235, .3),
|
||||
inset 0 0 0 .5px rgba(255, 255, 255, .55);
|
||||
}
|
||||
/* Die Kappen der beiden anderen Ringe. Sie sitzen auf DEREN Bahn --
|
||||
der Abstand von der Mitte ist der einzige Unterschied, alles andere
|
||||
erbt von der Perle. Die Farbe folgt dem Ring: Minute babyblau,
|
||||
Stunde poliertes Silber. */
|
||||
/* MITTE, SILBER: der Kopf der Minutenbalken. Poliertes Metall, kein
|
||||
Licht -- er ist der Bezug, an dem man die anderen beiden misst. */
|
||||
.uhr__perle--minute::before {
|
||||
top: 12.6%;
|
||||
width: 6px; height: 6px; margin-left: -3px;
|
||||
background: radial-gradient(circle at 36% 32%, #fff 0%, #cfe9ff 36%, #4aa8f0 72%, #17527f 100%);
|
||||
box-shadow:
|
||||
0 0 5px 1px rgba(90, 180, 255, .7),
|
||||
inset 0 0 0 .5px rgba(255, 255, 255, .55);
|
||||
}
|
||||
.uhr__perle--stunde::before {
|
||||
top: 21.4%;
|
||||
width: 5.4px; height: 5.4px; margin-left: -2.7px;
|
||||
background: radial-gradient(circle at 34% 30%, #ffffff 0%, #dfe8f2 34%, #8b98a8 70%, #3d4653 100%);
|
||||
background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e6edf6 34%, #97a4b4 70%, #414b58 100%);
|
||||
box-shadow:
|
||||
0 0 4px 1px rgba(220, 235, 255, .45),
|
||||
inset 0 0 0 .5px rgba(255, 255, 255, .6);
|
||||
}
|
||||
/* INNEN, ROT: der Kopf der Stundenbalken. Der kleinste Punkt in der
|
||||
kraeftigsten Farbe -- er bewegt sich am wenigsten und darf deshalb
|
||||
auffallen, ohne zu stoeren. */
|
||||
.uhr__perle--stunde::before {
|
||||
top: 21.4%;
|
||||
width: 5.4px; height: 5.4px; margin-left: -2.7px;
|
||||
background: radial-gradient(circle at 36% 32%, #fff 0%, #ffb0b6 38%, #ff4257 72%, #7e1a24 100%);
|
||||
box-shadow:
|
||||
0 0 5px 1px rgba(255, 80, 95, .6),
|
||||
inset 0 0 0 .5px rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
/* Kein Nachfedern -- der Sprung bleibt, das Schwingen geht. */
|
||||
@@ -1238,22 +1252,23 @@
|
||||
endet dann nie dort, wo er soll. U = 2 * pi * r, ausgerechnet und
|
||||
nicht geschaetzt. */
|
||||
.uhr__sekunde {
|
||||
stroke: url(#uhr-rot);
|
||||
stroke: url(#uhr-sekunde-farbe);
|
||||
stroke-width: 2.6;
|
||||
stroke-dasharray: 285.88; /* r = 45.5 */
|
||||
stroke-dashoffset: 285.88;
|
||||
}
|
||||
/* MITTE: die Minute in Blau. */
|
||||
/* MITTE: die MINUTE in Schwarzsilber -- der ruhige Bezug zwischen
|
||||
den beiden farbigen Bahnen. */
|
||||
.uhr__minute {
|
||||
stroke: url(#uhr-blau);
|
||||
stroke: url(#uhr-minute-farbe);
|
||||
stroke-width: 3;
|
||||
stroke-dasharray: 241.90; /* r = 38.5 */
|
||||
stroke-dashoffset: 241.90;
|
||||
}
|
||||
/* INNEN: die STUNDE in Schwarzsilber. Am breitesten und am ruhigsten --
|
||||
/* INNEN: die STUNDE in Rot. Am breitesten und am ruhigsten --
|
||||
sie bewegt sich in fuenf Minuten um ein halbes Grad. */
|
||||
.uhr__stunde {
|
||||
stroke: url(#uhr-silber);
|
||||
stroke: url(#uhr-stunde-farbe);
|
||||
stroke-width: 3.6;
|
||||
stroke-dasharray: 197.92; /* r = 31.5 */
|
||||
stroke-dashoffset: 197.92;
|
||||
@@ -1616,43 +1631,15 @@
|
||||
Schein liegt deshalb bei 45 bis 55 Prozent Deckkraft und wird NICHT
|
||||
animiert -- ein pulsierendes Leuchten am Bildrand ist genau das, was
|
||||
die Hausregel verbietet. */
|
||||
/* DIE SEKUNDE GLUEHT SCHWAECHER ALS DIE ANDEREN BEIDEN, und das ist
|
||||
Absicht: Sie ist die laengste Bahn, die hellste Farbe und die
|
||||
einzige, die sich sichtbar bewegt. Mit demselben Schein wie Minute
|
||||
und Stunde zog sie im Bildschirmfoto den ganzen Blick auf sich --
|
||||
ein roter Reifen, neben dem die Uhrzeit selbst zurueckstand.
|
||||
Nachgesehen, nicht gerechnet. */
|
||||
.uhr__sekunde {
|
||||
stroke-width: 3;
|
||||
filter:
|
||||
drop-shadow(0 0 1.5px rgba(255, 118, 132, .8))
|
||||
drop-shadow(0 0 6px rgba(255, 70, 90, .3));
|
||||
}
|
||||
.uhr__minute {
|
||||
stroke-width: 3.4;
|
||||
filter:
|
||||
drop-shadow(0 0 2px rgba(120, 200, 255, .95))
|
||||
drop-shadow(0 0 8px rgba(70, 165, 245, .48));
|
||||
}
|
||||
.uhr__stunde {
|
||||
stroke-width: 4;
|
||||
filter:
|
||||
drop-shadow(0 0 2px rgba(255, 214, 160, .9))
|
||||
drop-shadow(0 0 9px rgba(214, 154, 82, .45));
|
||||
}
|
||||
|
||||
/* Die Perle am Ende jeder Bahn ist die Spitze -- dort schaut man hin.
|
||||
Sie bekommt denselben Schein wie ihre Bahn, nur staerker, und einen
|
||||
weissen Kern: Das ist der Unterschied zwischen einem farbigen Punkt
|
||||
und einem Licht. */
|
||||
.uhr__perle::before {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, .5),
|
||||
0 0 6px 1px currentColor,
|
||||
0 0 14px 2px currentColor;
|
||||
}
|
||||
.uhr__perle--minute::before { color: rgba(99, 184, 245, .85); }
|
||||
.uhr__perle--stunde::before { color: rgba(226, 176, 108, .8); }
|
||||
/* Die Strichbreiten und Scheine der drei Bahnen stehen NICHT hier,
|
||||
sondern gesammelt am Dateiende unter "DIE DREI FARBEN, NEU VERTEILT".
|
||||
Hier stand bis zum 08.09.2026 ein zweiter, vollstaendiger Satz davon
|
||||
(Sekunde rot, Minute blau, Stunde bronze). Er wurde vom spaeteren
|
||||
Satz ueberschrieben und war damit unsichtbar -- aber wer die Datei
|
||||
von oben liest, haelt ihn fuer die geltende Regel und aendert die
|
||||
falsche Stelle. Genau das ist mir heute schon einmal passiert
|
||||
(zwei Groessenregeln 3600 Zeilen auseinander). Deshalb entfernt
|
||||
statt stehengelassen: EINE Stelle entscheidet ueber eine Farbe. */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
/* Kein Leuchten ohne Not: Wer weniger Bewegung will, will meist auch
|
||||
@@ -1696,23 +1683,6 @@
|
||||
dadurch exakt eine Vierteldrehung neben ihren Boegen -- im Bild oben
|
||||
links, waehrend die Boegen oben rechts endeten. Die Rechnung war
|
||||
richtig, die Drehung eine zu viel. */
|
||||
.uhr__spur-bahn {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
opacity: .95;
|
||||
}
|
||||
.uhr__spur-bahn[data-spur="sekunde"] {
|
||||
stroke: #ffd2d6; stroke-width: 3;
|
||||
filter: drop-shadow(0 0 3px rgba(255, 120, 134, .85));
|
||||
}
|
||||
.uhr__spur-bahn[data-spur="minute"] {
|
||||
stroke: #d8efff; stroke-width: 3.4;
|
||||
filter: drop-shadow(0 0 3px rgba(130, 205, 255, .8));
|
||||
}
|
||||
.uhr__spur-bahn[data-spur="stunde"] {
|
||||
stroke: #ffe9c9; stroke-width: 4;
|
||||
filter: drop-shadow(0 0 3px rgba(233, 190, 130, .75));
|
||||
}
|
||||
|
||||
/* DIE KOEPFE GLEITEN, STATT ZU SPRINGEN.
|
||||
|
||||
@@ -1882,19 +1852,7 @@
|
||||
letzten Punkt, und den setzt die Perle. */
|
||||
|
||||
/* ---- 4. Schaerfe statt Nebel ------------------------------------- */
|
||||
.uhr__sekunde {
|
||||
filter: drop-shadow(0 0 1.5px rgba(255, 92, 108, .9));
|
||||
}
|
||||
.uhr__minute {
|
||||
filter: drop-shadow(0 0 1.5px rgba(120, 200, 255, .9));
|
||||
}
|
||||
.uhr__stunde {
|
||||
filter: drop-shadow(0 0 1.5px rgba(255, 205, 145, .85));
|
||||
}
|
||||
.uhr__spur-bahn[data-spur="minute"],
|
||||
.uhr__spur-bahn[data-spur="stunde"] {
|
||||
filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .5));
|
||||
}
|
||||
/* (Die Scheine selbst: siehe Dateiende, ein Satz fuer alle drei.) */
|
||||
/* Auch die Perlen: harte Kante, enger Schein. Ein Lichtpunkt ist
|
||||
scharf -- was leuchtet, hat einen Rand. */
|
||||
.uhr__perle::before {
|
||||
@@ -1902,3 +1860,66 @@
|
||||
0 0 0 1px rgba(255, 255, 255, .75),
|
||||
0 0 4px 0 currentColor;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
DIE DREI FARBEN, NEU VERTEILT (08.09.2026)
|
||||
|
||||
Filipe: "stunden soll rot sein, minuten schwarz/silber und die
|
||||
sekunden babyblau. die punkte herum sollen eine mischung von rot
|
||||
schwarz und babyblau sein."
|
||||
|
||||
Die Zuordnung ist nicht beliebig, sie folgt der Geschwindigkeit:
|
||||
Die SEKUNDE laeuft dauernd und bekommt das ruhigste Babyblau --
|
||||
staendige Bewegung in Signalrot ermuedet. Die STUNDE bewegt sich
|
||||
kaum und darf deshalb die kraeftigste Farbe tragen. Die MINUTE
|
||||
dazwischen in Schwarzsilber: Sie ist der Bezug, an dem man die
|
||||
beiden anderen misst, und Metall draengt sich nicht vor.
|
||||
|
||||
Die Glieder sind ausserdem verschieden LANG -- Punkt, kurzer Balken,
|
||||
langer Balken. Damit liest man die drei Bahnen auch dann
|
||||
auseinander, wenn jemand Farben schlecht unterscheidet. Farbe allein
|
||||
traegt eine Information nie. */
|
||||
/* DER SCHEIN GEHOERT AN EINE LAGE, NICHT AN DREI.
|
||||
|
||||
Jeder Ring liegt dreifach im SVG: Schattenlage (0,55 nach unten),
|
||||
Hauptlage, Kantenlage (0,4 nach oben). `.uhr__stunde` trifft alle
|
||||
drei -- der Schein wurde damit DREIMAL uebereinander gerechnet. Im
|
||||
Bildschirmfoto lief das rote Leuchten deshalb bis ueber die Ziffern
|
||||
und liess die ganze Uhr weich aussehen, obwohl in der Regel nur
|
||||
1,8 px stehen. Genau das, was Filipe nicht will ("es soll nichts
|
||||
verschwommen aussehen ... im gegenteil, richtig scharf").
|
||||
|
||||
Mit `>` bekommt nur die Hauptlage den Schein. Schatten und Kante
|
||||
bleiben hart -- sie sind Koerper, kein Licht. Das ist derselbe
|
||||
Gedanke wie im Kommentar oben ("KEIN Weichzeichner, nirgends: Die
|
||||
Tiefe entsteht aus dem Versatz"), nur war er an dieser Stelle nicht
|
||||
durchgehalten. */
|
||||
.uhr__ring > .uhr__sekunde { filter: drop-shadow(0 0 1.4px rgba(126, 200, 242, .85)); }
|
||||
.uhr__ring > .uhr__minute { filter: drop-shadow(0 0 1.2px rgba(220, 232, 246, .6)); }
|
||||
.uhr__ring > .uhr__stunde { filter: drop-shadow(0 0 1.4px rgba(255, 92, 104, .8)); }
|
||||
.uhr__schatten .uhr__sekunde, .uhr__schatten .uhr__minute, .uhr__schatten .uhr__stunde,
|
||||
.uhr__kante .uhr__sekunde, .uhr__kante .uhr__minute, .uhr__kante .uhr__stunde { filter: none; }
|
||||
|
||||
/* Die Koepfe tragen die Farbe ihrer Bahn -- sonst zeigte ein blauer
|
||||
Punkt auf eine rote Reihe. */
|
||||
.uhr__perle::before { color: rgba(126, 200, 242, .9); }
|
||||
.uhr__perle--minute::before { color: rgba(226, 236, 248, .85); }
|
||||
.uhr__perle--stunde::before { color: rgba(255, 92, 104, .9); }
|
||||
|
||||
/* ---- Der Punktkranz: rot, schwarz, babyblau im Wechsel -----------
|
||||
|
||||
Drei Farben in einem `repeating-conic-gradient`: je 6 Grad ein
|
||||
Punkt, dazwischen die Luecke. Die Reihenfolge Rot - Blau - Dunkel
|
||||
wiederholt sich alle 18 Grad, also zwanzigmal auf dem Ring.
|
||||
|
||||
Das Dunkel ist kein Loch, sondern ein sehr dunkles Blau: Ein echter
|
||||
Zwischenraum haette den Kranz in zwei Haelften zerfallen lassen,
|
||||
sobald man ihn aus dem Augenwinkel sieht. So bleibt der Ring ein
|
||||
Ring und hat trotzdem drei Toene. */
|
||||
.uhr__leds {
|
||||
background: repeating-conic-gradient(from -1.5deg,
|
||||
rgba(255, 90, 102, .70) 0deg 3deg, transparent 3deg 6deg,
|
||||
rgba(126, 200, 242, .70) 6deg 9deg, transparent 9deg 12deg,
|
||||
rgba(120, 150, 185, .34) 12deg 15deg, transparent 15deg 18deg);
|
||||
filter: drop-shadow(0 0 2px rgba(150, 170, 210, .4));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user