Sekunden als Punkte, Ringe gestaffelt, silberner Rand weg
Filipe: "ich will aber dass die sekunden wie punkte sind, die minuten
breiter und die stunden noch breiter … den silbernen rand weg bitte den
will ich nicht … es soll nichts verschwommen aussehen oder so, im
gegenteil, richtig scharf und perfekt."
DER SILBERNE RING IST WEG. Er war die breiteste Flaeche der ganzen Uhr
und damit das Erste, was das Auge traf -- ausgerechnet der Teil, der
nichts anzeigt. Jetzt dunkles Metall; die drei Bahnen sind das Hellste
im Bild. Die Skalenstriche bleiben, sie geben Mass ohne zu fuellen.
DIE SEKUNDE IST EINE PUNKTREIHE. Sechzig Punkte, einer je Sekunde --
der schnellste Wert wird zaehlbar statt nur gewachsen. Das ist auch
ehrlicher: Die Sekunde SPRINGT, ein durchgehender Bogen behauptet einen
fliessenden Wert.
DIE BREITEN STAFFELN SICH: 3,2 / 5 / 7 statt 3 / 3,4 / 4. Die alten
Werte waren rechnerisch verschieden und im Bild nicht zu unterscheiden
-- ein Unterschied unter einem Pixel ist keiner. Jetzt liest man die
Ringe an ihrer STAERKE: je langsamer, desto schwerer.
SCHAERFE STATT NEBEL: Die weichen Scheine lagen mit 7 bis 9 px Radius
ueber den Bahnen wie Dunst. Jetzt 1,5 px -- sie liegen als KANTE an
statt als Wolke. Die Tiefe kommt aus dem Versatz der Lagen, so wie im
Rest dieser Uhr auch.
DREIMAL AN DERSELBEN STELLE DANEBEN, UND JEDES MAL IM BILD GESEHEN:
1. Der Sekunden-Schweif stand noch im Dokument und war per CSS
ausgeblendet -- das griff nicht, und ohne `dasharray` zeichnete er
einen durchgehenden roten Ring um die ganze Uhr. Ein Element, das
nie sichtbar sein soll, gehoert nicht ins Dokument. Ausblenden ist
kein Entfernen.
2. Dann das Punktmuster: n Paare plus Schluss-Luecke sind 2n+1 Werte.
Bei ungerader Anzahl verdoppelt SVG die Liste und vertauscht dabei
Striche und Luecken.
3. Also eine Null angehaengt (`rest 0`) -- Anzahl gerade, Fehler
blieb. Denn in `dasharray` wechseln sich Strich und Luecke ab: Nach
2n Werten sitzt der naechste an UNGERADER Stelle und ist ein
Strich. Der Rest wurde weiter gezeichnet. Richtig ist die Null
ZUERST (`0 rest`), dann landet die Luecke an gerader Stelle.
UND DIE PRUEFUNG MUSSTE MIT. `pruef-start-ansicht` verglich die
REIHENFOLGE der Farbkanaele im Kachel-Licht. Das setzt voraus, dass die
Kanaele deutlich verschieden sind -- seit der neuen Palette stimmt das
nicht mehr: "Aufgaben" ist Tuerkis (G=191, B=163), gemessen 63 gegen 65.
ZWEI Stufen von 255. Die Reihenfolge kippt dort durch Rundung, und die
Pruefung meldete einen Fehler, wo keiner war.
Sie misst jetzt den FARBWINKEL -- dieselbe Frage ("ist es dieser Ton?"),
ohne die Voraussetzung. 40 Grad Toleranz; die Kachelfarben liegen nach
der Neuberechnung gut 60 Grad auseinander. Dazu eine GEGENPROBE je
Kachel: Der gemessene Ton wird gegen den Gegenton auf dem Farbkreis
gehalten und muss dort anschlagen. Eine Pruefung, die immer bestaetigt,
bestaetigt nichts.
Gemessen: Farbwinkel-Abstaende 13° / 16° / 7° von 40 erlaubten.
pruef-start-ansicht EXIT=0, 140 -> 143 Pruefungen (die drei Gegenproben
sind dazugekommen, keine ist verschwunden). pruef-css-klassen EXIT=0.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
@@ -1815,3 +1815,90 @@
|
||||
color: #ffd2d0;
|
||||
text-shadow: 0 0 7px rgba(255, 80, 76, .6);
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
DIE UHR, GESCHAERFT (08.09.2026, zweite Runde)
|
||||
|
||||
Filipe: "ich will aber dass die sekunden wie punkte sind, die minuten
|
||||
breiter und die stunden noch breiter … den silbernen rand weg bitte
|
||||
den will ich nicht … es soll nichts verschwommen aussehen oder so,
|
||||
im gegenteil, richtig scharf und perfekt."
|
||||
|
||||
VIER AENDERUNGEN, und jede hat einen Grund ueber den Wunsch hinaus:
|
||||
|
||||
1. DER SILBERNE RING IST WEG. Er war die breiteste Flaeche der ganzen
|
||||
Uhr und damit das Erste, was das Auge traf -- ausgerechnet der
|
||||
Teil, der nichts anzeigt. Jetzt traegt dort dunkles Metall, und
|
||||
die drei Bahnen sind das Hellste im Bild. Die Skalenstriche
|
||||
bleiben: Sie geben dem Ring Mass, ohne ihn zu fuellen.
|
||||
|
||||
2. DIE SEKUNDE IST EINE PUNKTREIHE. Sechzig Punkte, einer je
|
||||
Sekunde -- der schnellste Wert wird damit zaehlbar statt nur
|
||||
gewachsen. Das ist auch die ehrlichere Anzeige: Die Sekunde
|
||||
SPRINGT (die Ziffer daneben tut es auch), ein durchgehender Bogen
|
||||
behauptet einen fliessenden Wert.
|
||||
|
||||
3. DIE BREITEN STAFFELN SICH: Sekunde 3, Minute 5, Stunde 7. Vorher
|
||||
lagen sie bei 3 / 3,4 / 4 -- rechnerisch verschieden, im Bild
|
||||
nicht zu unterscheiden. Ein Unterschied unter einem Pixel ist
|
||||
keiner. Jetzt liest man die Ringe an ihrer STAERKE, nicht nur an
|
||||
der Farbe: je langsamer, desto schwerer.
|
||||
|
||||
4. NICHTS IST MEHR VERSCHWOMMEN. Die weichen Scheine (`drop-shadow`
|
||||
mit 7 bis 9 px Radius) lagen ueber den Bahnen wie Nebel. Sie sind
|
||||
auf 2 bis 3 px zurueckgenommen und liegen jetzt ALS KANTE an,
|
||||
nicht als Wolke. Der Rest der Tiefe kommt aus dem Versatz der
|
||||
Lagen -- so, wie es im Rest dieser Uhr ohnehin gemacht ist. */
|
||||
|
||||
/* ---- 1. Der Ring wird dunkel ------------------------------------- */
|
||||
.uhr {
|
||||
background:
|
||||
conic-gradient(from 210deg,
|
||||
#171d27 0deg, #10151d 54deg, #1b222d 116deg, #121820 176deg,
|
||||
#1d242f 246deg, #10161e 312deg, #171d27 360deg);
|
||||
box-shadow:
|
||||
0 14px 30px -14px rgba(0, 0, 0, .95),
|
||||
0 0 0 1px rgba(140, 170, 205, .10),
|
||||
inset 0 0 0 1px rgba(6, 10, 18, .9);
|
||||
}
|
||||
|
||||
/* ---- 3. Die Breiten, klar gestaffelt ----------------------------- */
|
||||
.uhr__minute { stroke-width: 5; }
|
||||
.uhr__stunde { stroke-width: 7; }
|
||||
.uhr__schatten .uhr__minute { stroke-width: 6; }
|
||||
.uhr__schatten .uhr__stunde { stroke-width: 8; }
|
||||
|
||||
/* ---- 2. Die Sekunde als Punktreihe -------------------------------
|
||||
`stroke-linecap: round` plus eine Strichlaenge nahe null ergibt
|
||||
einen Kreis vom Durchmesser der Strichbreite. Das Muster selbst
|
||||
setzt start.js -- es muss mit dem Stand wachsen, und dafuer braucht
|
||||
es die Zahl der Punkte. */
|
||||
.uhr__sekunde {
|
||||
stroke-width: 3.2;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
/* Der Schweif entfaellt bei der Sekunde -- und zwar im HTML, nicht
|
||||
hier. Eine Punktreihe hat keinen Kometenschweif, sie hat einen
|
||||
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));
|
||||
}
|
||||
/* Auch die Perlen: harte Kante, enger Schein. Ein Lichtpunkt ist
|
||||
scharf -- was leuchtet, hat einen Rand. */
|
||||
.uhr__perle::before {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, .75),
|
||||
0 0 4px 0 currentColor;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user