From d694e34fcbddc147946d6a0847b8dc1bd1a46645 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 8 Sep 2026 18:21:08 +0200 Subject: [PATCH] Die Uhr nach Filipes Vorbild: LED-Kranz, Anker, rote Anzeige MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Filipe hat eine Sci-Fi-Uhr geschickt (1250 px) und gesagt "so wie die". Unsere ist 164 px gross -- Faktor 7,6. Was uebernehmbar ist, entscheidet damit nicht der Geschmack, sondern die Groesse: UEBERNOMMEN der blaue LED-Punktkranz aussen (das auffaelligste Merkmal des Vorbilds), 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. Der Kranz ist ein `repeating-conic-gradient` mit 6-Grad-Takt, aus dem eine Maske einen schmalen Ring schneidet: 60 Punkte, einer je Sekunde, in EINER Ebene. Sechzig waeren sechzig Elemente fuer eine Zierde. Die vier Anker ebenso, mit 90-Grad-Takt. EINE FALSCHE BEGRUENDUNG, VON DER EIGENEN RECHNUNG WIDERLEGT: Ich hatte in den Kommentar geschrieben, reines Neonrot wie im Vorbild "reisse den Kontrast" und liege bei 4,0:1. Nachgerechnet sind es 5,27:1 -- es haelt die Grenze von 4,5. Die schoenere Begruendung war die falsche. Die Entscheidung bleibt trotzdem, nur mit dem echten Grund: 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 -- genau das meint die Hausregel "augenschonend", und das deckt keine Kontrastzahl ab. Die Ziffern sind 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. Aus demselben Grund liegt das Blau der LEDs bei rund 53 % Deckkraft: Die Anmutung kommt vom Aufbau, nicht von der Grellheit. pruef-start-ansicht EXIT=0 (140), pruef-css-klassen EXIT=0 (28). Co-Authored-By: Claude Opus 5 --- workspace/assets/css/heim.css | 82 +++++++++++++++++++++++++++++++++++ workspace/start.html | 5 +++ 2 files changed, 87 insertions(+) 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. --> + + +
--:--