diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index 5c888546..8be4cd5b 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -1733,3 +1733,85 @@ @media (prefers-reduced-motion: reduce) { .uhr__perle { transition: none; } } + +/* =================================================================== + NACH FILIPES VORBILD: LED-KRANZ, ANKER, ROTE ANZEIGE (08.09.2026) + + Er hat eine Sci-Fi-Uhr geschickt (1250 px) und gesagt: "so wie die". + Unsere ist 164 px gross -- Faktor 7,6. Was davon uebernehmbar ist, + entscheidet nicht der Geschmack, sondern die Groesse: + + UEBERNOMMEN der blaue LED-Punktkranz aussen (das auffaelligste + Merkmal), die vier Anker bei 12/3/6/9, der rote + Grundton der Digitalanzeige. + NICHT MOEGLICH die Minutenzahlen 00/05/…/55 und die Stundenzahlen + 1-12. Im Vorbild sind sie rund 30 px hoch; hier + waeren es VIER. Zahlen, die man nicht lesen kann, + sind kein Zifferblatt, sondern Rauschen -- und sie + wuerden die drei Boegen zudecken, die die eigentliche + Anzeige sind. + + AUGENSCHONEND BLEIBT PFLICHT, und das Vorbild ist es nicht: Es lebt + von reinem Neonrot auf Schwarz. Diese Uhr steht dauerhaft im Bild + einer Seite, an der gearbeitet wird. Die Toene sind deshalb + gedaempft: das Blau der LEDs bei rund 60 % Deckkraft, das Rot der + Ziffern als heller Ton MIT rotem Schein statt als reines Rot. Die + Anmutung kommt vom Aufbau, nicht von der Grellheit. */ + +/* Der Punktkranz. 60 Punkte -- einer je Sekunde, wie im Vorbild. + `repeating-conic-gradient` statt sechzig Elementen: Ein Kegelverlauf + mit 6-Grad-Takt zeichnet sie in einer Ebene, und die Maske schneidet + daraus einen schmalen Ring. Sechzig waeren sechzig Elemente + fuer eine Zierde. */ +.uhr__leds { + position: absolute; inset: -7px; border-radius: 50%; + pointer-events: none; z-index: 1; + background: repeating-conic-gradient(from -1.5deg, + rgba(96, 200, 255, .62) 0deg 3deg, transparent 3deg 6deg); + -webkit-mask: radial-gradient(closest-side, transparent 0 93.5%, #000 94% 97.5%, transparent 98%); + mask: radial-gradient(closest-side, transparent 0 93.5%, #000 94% 97.5%, transparent 98%); + filter: drop-shadow(0 0 2px rgba(80, 190, 255, .5)); + opacity: .85; +} + +/* Die vier Anker bei 12, 3, 6 und 9 Uhr. Im Vorbild sitzen dort + Fassungen mit einem blauen Licht darin -- sie geben dem Ring Halt + und sagen dem Auge, wo oben ist. Ein Kegelverlauf mit 90-Grad-Takt + trifft genau diese vier Stellen. */ +.uhr__anker { + position: absolute; inset: -9px; border-radius: 50%; + pointer-events: none; z-index: 1; + background: repeating-conic-gradient(from -3deg, + rgba(150, 225, 255, .95) 0deg 6deg, transparent 6deg 90deg); + -webkit-mask: radial-gradient(closest-side, transparent 0 92%, #000 92.5% 99%, transparent 99.5%); + mask: radial-gradient(closest-side, transparent 0 92%, #000 92.5% 99%, transparent 99.5%); + filter: drop-shadow(0 0 3px rgba(110, 210, 255, .85)); +} + +/* DIE ANZEIGE BEKOMMT DAS ROT -- aber als Schein, nicht als Farbe. + + Im Vorbild sind die Ziffern reines Neonrot. Ich hatte hier zuerst + geschrieben, das reisse den Kontrast -- nachgerechnet stimmt das + NICHT: #ff2b2b auf dem fast schwarzen Zifferblatt liegt bei 5,27:1 + und haelt die Grenze von 4,5. Die schoenere Begruendung war die + falsche, also steht hier die echte: + + Diese Uhr steht DAUERHAFT im Bild einer Seite, an der gearbeitet + wird. Reines gesaettigtes Rot auf Schwarz ermuedet bei stundenlangem + Nebenherschauen, auch wenn es messbar lesbar ist -- das ist der Punkt + der Hausregel "augenschonend", und der ist von einer Kontrastzahl + nicht abgedeckt. Der Ton hier ist deshalb ein sehr helles Rotweiss + (15,9:1), das seinen ROTEN CHARAKTER aus dem Schein im Textschatten + bekommt. Man liest "rote Digitalanzeige", ohne stundenlang in eine + Leuchtreklame zu sehen. */ +.uhr__zeit { + color: #ffe0df; + text-shadow: + 0 0 6px rgba(255, 90, 86, .75), + 0 0 16px rgba(255, 60, 56, .45), + 0 1px 0 rgba(0, 0, 0, .6); +} +.uhr__sek { + color: #ffd2d0; + text-shadow: 0 0 7px rgba(255, 80, 76, .6); +} diff --git a/workspace/start.html b/workspace/start.html index 1149014f..de548011 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -338,6 +338,11 @@ Fortschrittsbalken. --> + + +
--:--