From 0ea8b27aca838fc5e9bb22a5cc7bb160c3630c6f Mon Sep 17 00:00:00 2001 From: Dogfather Date: Mon, 7 Sep 2026 16:23:27 +0200 Subject: [PATCH] Aus drei Strichen werden drei Ringe aus Material Filipe: "ich will dass der rand mit den sekunden minuten und stunden viel krasser und geiler ist ... ultra modern, ultra speziell, ultra profissionell, ultra phaenomenal." EIN STRICH IST EINE LINIE. EIN RING IST EIN KOERPER. Und ein Koerper hat drei Merkmale, die man zeichnen MUSS, sonst bleibt es ein Strich. Jeder der drei Ringe besteht deshalb jetzt aus drei Lagen: SCHATTEN Er liegt ueber dem Zifferblatt, also wirft er einen. Dieselbe Bahn, schwarz, ein halbes Rastermass nach UNTEN. KOERPER Der Bogen selbst in seiner Farbe. OBERKANTE Duenner, hell, ein Drittel nach OBEN. Weil er versetzt ist, schaut er oben hervor und verschwindet unten -- genau das tut eine gewoelbte Kante bei Licht von oben. Kein Weichzeichner, nirgends: Die Tiefe kommt aus dem Versatz, nicht aus Unschaerfe. DIE BAHNEN SIND GEFRAESTE RILLEN Ein Zeiger laeuft bei einem guten Instrument IN einer Vertiefung. Eine Rille erkennt man an zweierlei: dunkler als ihre Umgebung, und an ihrer unteren Wand steht eine helle Kante. Beides steht jetzt da, und die Breite folgt dem Ring, der darin laeuft -- eine Rille, die schmaler ist als ihr Zeiger, ist keine. DREI KOEPFE STATT EINEM Minute und Stunde bekommen dieselbe polierte Kappe wie die Sekunde, auf ihren eigenen Bahnen und in ihrer eigenen Farbe. Erst dadurch liest man die drei Ringe als drei ZEIGER und nicht als drei Fortschrittsbalken. Sie laufen mit ihrem Ring: die Minute nimmt die Sekunden anteilig mit, die Stunde die Minuten -- sonst staende der Kopf neben dem Ende seines Bogens. ALLE LAGEN WERDEN GEMEINSAM GESETZT. Sie tragen `data-ring`; einzeln gepflegte Verweise waeren drei Stellen, an denen man eine vergessen kann, und ein Schatten, der stehen bleibt, sieht sofort kaputt aus. UND EIN FUND, DEN DIE PRUEFUNG SOFORT GEMELDET HAT Die neue helle Oberkante des Stundenrings laeuft hinter den Ziffern durch: schlechtester Kontrast 2,98:1 -- knapp unter der Grenze, und ausgerechnet bei der Uhrzeit selbst. Die Antwort war nicht "Kante weg", sondern der fehlende Untergrund: Auf einer echten Uhr steht eine Anzeige, die ueber Zeigern liegt, auf einer eigenen vertieften INSEL im Zifferblatt. Jetzt 5,42:1, und dabei 29 statt 14 gemessene Stellen. Merksatz: Wenn eine neue Schicht einen Text unlesbar macht, ist die Antwort selten "Schicht weg" -- meistens fehlt dem Text sein Grund. Zehn Pruefungen gelaufen, alle gruen. Rechner und Handy angesehen. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/heim.css | 90 ++++++++++++++++++++++++++++++++++- workspace/assets/js/start.js | 23 ++++++++- workspace/aufgaben.html | 18 +++---- workspace/automation.html | 20 ++++---- workspace/bereich.html | 28 +++++------ workspace/calls.html | 22 ++++----- workspace/chat.html | 20 ++++---- workspace/content.html | 24 +++++----- workspace/dateien.html | 20 ++++---- workspace/index.html | 4 +- workspace/kalender.html | 22 ++++----- workspace/leistung.html | 20 ++++---- workspace/personen.html | 20 ++++---- workspace/profil.html | 22 ++++----- workspace/report.html | 22 ++++----- workspace/scouting.html | 20 ++++---- workspace/start.html | 69 ++++++++++++++++++++++----- workspace/startcheck.html | 22 ++++----- workspace/steckbrief.html | 20 ++++---- workspace/uebersicht.html | 20 ++++---- workspace/wissen.html | 20 ++++---- 21 files changed, 349 insertions(+), 197 deletions(-) diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index b164cb44..cfee9c61 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -669,12 +669,34 @@ 0 0 14px 3px rgba(255, 70, 90, .35), inset 0 0 0 .5px rgba(255, 255, 255, .5); } +/* 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. */ +.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%); + box-shadow: + 0 0 4px 1px rgba(220, 235, 255, .45), + inset 0 0 0 .5px rgba(255, 255, 255, .6); +} + @media (prefers-reduced-motion: reduce) { /* Kein Nachfedern -- der Sprung bleibt, das Schwingen geht. */ .uhr__perle { transition: none; } } @media (forced-colors: active) { .uhr__zwoelf, .uhr__perle { display: none; } + .uhr__schatten, .uhr__kante { display: none; } } /* SCHICHT 3: DAS GLAS -- ENTSPIEGELTES SAPHIRGLAS (07.09.2026) @@ -749,7 +771,25 @@ fill: none; stroke-linecap: butt; } -.uhr__bahn { stroke: rgba(150, 186, 220, .09); stroke-width: 3; } +/* DIE BAHN IST EINE GEFRAESTE RILLE, kein blasser Kreis. + + Ein Zeiger laeuft bei einem guten Instrument IN einer Vertiefung, + nicht auf einer Flaeche. Eine Rille erkennt man an zweierlei: Sie ist + dunkler als ihre Umgebung, und an ihrer unteren Wand steht eine helle + Kante, wo das Licht von oben auftrifft. Beides steht hier -- die + Kante als zweiter, um ein Drittel nach unten versetzter Kreis. + + Die Breite folgt dem Ring, der darin laeuft: aussen 3,4 fuer die + Sekunde, in der Mitte 3,8, innen 4,4. Eine Rille, die schmaler ist + als ihr Zeiger, ist keine. */ +.uhr__bahn { stroke: rgba(4, 7, 13, .78); stroke-width: 4.4; } +.uhr__bahn:nth-of-type(1) { stroke-width: 3.6; } +.uhr__bahn:nth-of-type(2) { stroke-width: 4; } +.uhr__rillenkante circle { + fill: none; + stroke: rgba(190, 215, 245, .16); + stroke-width: 1; +} /* AUSSEN: die SEKUNDE in Rot, auf der laengsten Bahn (07.09.2026 gedreht, Wunsch Filipe: "die minuten in der mitte und sekunden @@ -786,9 +826,57 @@ stroke-dashoffset: 197.92; } +/* DER SCHLAGSCHATTEN JEDES BOGENS. Dieselbe Bahn, schwarz, ein wenig + breiter -- und um ein halbes Rastermass nach unten geschoben (im + HTML). Er macht aus einem aufgemalten Strich einen Koerper, der + ueber dem Zifferblatt liegt. */ +.uhr__schatten circle { + stroke: rgba(0, 0, 0, .62) !important; + stroke-width: 4.6; +} +.uhr__schatten .uhr__sekunde { stroke-width: 3.8; } +.uhr__schatten .uhr__minute { stroke-width: 4.2; } + +/* DIE BELEUCHTETE OBERKANTE. Duenner, hell, nach oben versetzt: Sie + schaut oben hervor und verschwindet unten -- genau das tut eine + gewoelbte Kante bei Licht von oben. Das ist der ganze Unterschied + zwischen einem Strich und einem Ring aus Material. */ +.uhr__kante circle { + stroke: rgba(255, 255, 255, .72) !important; + stroke-width: .9; +} +.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .5) !important; } + +/* DIE ZIFFERNINSEL (07.09.2026). + + Seit der Stundenring eine beleuchtete Oberkante hat, laeuft ein + heller Bogen hinter den Ziffern durch. pruef-buehne hat es sofort + gemeldet: schlechtester Kontrast 2,98:1 gegen rgb(125,147,165) -- + knapp unter der Grenze von 3:1, und zwar genau bei der Uhrzeit, also + der wichtigsten Angabe der ganzen Flaeche. + + Das ist kein Grund, die Kante wieder wegzunehmen. Auf einer echten + Uhr steht eine Anzeige, die ueber Zeigern liegt, auf einer eigenen + Flaeche -- einer vertieften Insel im Zifferblatt. Genau die steht + jetzt hier: dunkel in der Mitte, nach aussen weich auslaufend, damit + sie keine sichtbare Kante bekommt. Der Kontrast ist damit + unabhaengig davon, was hinter ihr vorbeilaeuft. + + Die Lehre allgemein: Wenn eine neue Schicht einen Text unlesbar + macht, ist die Antwort selten "Schicht weg" -- meistens fehlt dem + Text sein Untergrund. */ .uhr__mitte { position: relative; z-index: 4; display: grid; justify-items: center; gap: 2px; line-height: 1; + padding: 6px 14px; +} +.uhr__mitte::before { + content: ""; position: absolute; inset: -6px -10px; + z-index: -1; pointer-events: none; + border-radius: 50%; + background: + radial-gradient(closest-side, rgba(4, 7, 13, .93) 0%, + rgba(4, 7, 13, .88) 52%, rgba(4, 7, 13, .55) 78%, transparent 100%); } .uhr__zeit { font-size: 1.86rem; font-weight: 700; letter-spacing: -.015em; diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js index 514ae7f5..989053bb 100644 --- a/workspace/assets/js/start.js +++ b/workspace/assets/js/start.js @@ -368,9 +368,20 @@ /* Voll = kein Versatz. Die Ringe wachsen im Uhrzeigersinn, weil das SVG im Stil um 90 Grad zurueckgedreht ist. */ + /* ALLE DREI LAGEN EINES RINGES AUF EINMAL (07.09.2026). + + Seit jeder Ring aus Schatten, Koerper und Oberkante besteht, + muessen alle drei denselben Stand haben. Sie tragen dafuer + `data-ring`; einzeln gepflegte Verweise waeren drei Stellen, an + denen man eine vergessen kann -- und ein Schatten, der stehen + bleibt, sieht sofort kaputt aus. */ + const lagen = {}; + for (const welcher of ['sekunde', 'minute', 'stunde']) { + lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)]; + } const setze = (welcher, anteil) => { - const el = ringe[welcher]; - if (el) el.style.strokeDashoffset = String(UMFANG[welcher] * (1 - anteil)); + const wert = String(UMFANG[welcher] * (1 - anteil)); + for (const el of lagen[welcher]) el.style.strokeDashoffset = wert; }; const takt = () => { @@ -400,6 +411,14 @@ Rechner. */ const perle = $('uhr-perle'); if (perle) perle.style.transform = `rotate(${sk * 6}deg)`; + /* Die beiden anderen Koepfe laufen mit IHREN Ringen -- die Minute + nimmt die Sekunden anteilig mit, die Stunde die Minuten. Sonst + staende der Kopf neben dem Ende seines Bogens, und genau das + sieht man sofort. */ + const perleMin = $('uhr-perle-minute'); + if (perleMin) perleMin.style.transform = `rotate(${(min + sk / 60) * 6}deg)`; + const perleStd = $('uhr-perle-stunde'); + if (perleStd) perleStd.style.transform = `rotate(${((std % 12) + min / 60) * 30}deg)`; setze('minute', (min + sk / 60) / 60); setze('stunde', ((std % 12) + min / 60) / 12); diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 51b2cf9c..add8f26e 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -9,10 +9,10 @@ - - - - + + + + @@ -212,10 +212,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index 5cfb1651..83918deb 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -135,10 +135,10 @@ - - - - - + + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index 3dee47e7..b10b44ad 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -144,14 +144,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index 5cdb3271..2e99a8dc 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -77,11 +77,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index 08500259..255e5e37 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -9,17 +9,17 @@ - - + + - - - + + + @@ -155,10 +155,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index b0cb3bce..f37ceb9b 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -167,12 +167,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index 3dead68b..fd27f35e 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -96,10 +96,10 @@ - - - - - + + + + + diff --git a/workspace/index.html b/workspace/index.html index 33a74c22..56750c37 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -27,7 +27,7 @@ - + @@ -202,6 +202,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index 1adbc8a9..e95eae43 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -258,11 +258,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index 3c365675..3e5c43bc 100644 --- a/workspace/leistung.html +++ b/workspace/leistung.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -212,10 +212,10 @@ - - - - - + + + + + diff --git a/workspace/personen.html b/workspace/personen.html index 67567695..c3525be3 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -137,10 +137,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index 5a80035a..57b234f1 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -202,11 +202,11 @@ - - - - - - + + + + + + diff --git a/workspace/report.html b/workspace/report.html index 3a410bcd..a9e0d609 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -94,11 +94,11 @@ - - - - - - + + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index 8220e7c7..46ad1f3c 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -127,10 +127,10 @@ - - - - - + + + + + diff --git a/workspace/start.html b/workspace/start.html index 601e8d85..eb09c5c5 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -9,12 +9,12 @@ - - + + - - + + @@ -143,9 +143,48 @@ langsamste innen, wo eine kleine Drehung schon viel heisst. Die alte Anordnung war die eines Fortschrittsbalkens, nicht die einer Uhr. --> - - - + + + + + + + + + + + + + + + + + + +
--:-- @@ -275,10 +320,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 86c2e42f..98ff7282 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -73,11 +73,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index 1c841ed9..71046e1a 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -114,10 +114,10 @@ - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index 71e0d4ab..829c2e9e 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -9,13 +9,13 @@ - - + + - - - + + + @@ -137,11 +137,11 @@ - + - - - - + + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index f8bb53c5..3387b013 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -178,10 +178,10 @@ - - - - - + + + + +