From dbb19f69e95d8659a814ced7868886f1a88ddc25 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Mon, 7 Sep 2026 15:00:59 +0200 Subject: [PATCH] Uhrmacherei statt Lack: guillochiertes Blatt, laufende Perle, Spiegelung auf Metall Filipe: "ich will dass diese kachel komplett speziell ist, das hochwertigste und geilste auf der ganzen website ... auch das gleiche prinzip fuer die uhr, noch vieeeel spezieller. hol die besten skills von den besten skills dafuer." Also keine weitere Schicht Lack, sondern die Mittel, an denen man ein teures Instrument WIRKLICH erkennt. DIE UHR -- VIER MITTEL AUS DER UHRMACHEREI 1. GUILLOCHIERTES ZIFFERBLATT. Guillochieren ist das Verfahren, mit dem seit zweihundert Jahren hochwertige Blaetter gemacht werden: Eine Maschine schneidet ein feines regelmaessiges Muster ins Metall, und weil jede Rille das Licht anders zurueckwirft, LEBT die Flaeche. Hier aus Strahlen vom Mittelpunkt und Ringen darum, beide bei vier Prozent Deckkraft -- wer das Muster einzeln erkennt, hat es zu laut gemacht. 2. EIN AUFGESETZTER ZWOELF-INDEX. Auf einem echten Blatt ist die Zwoelf nie nur ein Strich wie die anderen: Sie ist das, woran das Auge sich ausrichtet. Ein Keil in Hausrot mit heller Kante. 3. DIE PERLE AM KOPF DES SEKUNDENBOGENS. Sie laeuft einmal je Minute herum und ist das Einzige an der Uhr, das sich BEWEGT statt zu wachsen. Ein Bogen zeigt einen Stand, eine laufende Perle zeigt Leben. Sie springt im Sekundentakt statt zu gleiten -- ehrlicher (die Anzeige ist digital) und eine Bildberechnung je Sekunde statt sechzig. 4. GRAVIERTE ZIFFERN. Ein dunkler Saum oben, ein heller unten -- das Lichtverhalten einer Vertiefung. Die Ziffern stehen damit IM Blatt statt darauf. DIE KONSOLE -- DAS METALL FAENGT DAS LICHT Auf den Kacheln leuchtet das Licht in der Farbe der Kategorie; dort ist es ein Hinweis. Auf der Konsole waere das falsch -- ein farbiger Schleier auf gebuerstetem Metall sieht aus wie eine Folie darauf. Metall zeigt seine Form ueber die SPIEGELUNG: weiss, schmal, hart an der Kante, und sie wandert mit dem Zeiger ueber die Fassung wie ein Fenster, an dem man vorbeigeht. Erst dadurch sieht man, dass die Fassung gewoelbt ist. Ein Standbild kann das nicht. Dieselbe Falle wie heute Frueh dabei vermieden, diesmal vorher bedacht: `.willkommen > *` haette dem Lichtelement wieder sein `position: absolute` genommen -- jetzt `:not(.licht)`. UND EIN FEHLER, DEN NUR DAS HANDY GEZEIGT HAT Die Mulde der Uhr hing am Kasten daneben und war an dessen rechtem Rand ausgerichtet. Am Rechner passte das; bei 412 px steht die Uhr mittig, und die Mulde lag als dunkle Scheibe neben ihr. Sie entsteht jetzt aus zwei Schattenringen der Uhr SELBST und ist damit konzentrisch bei jeder Groesse -- die bessere Bauart, nicht nur die reparierte: Eine Fassung, die man ausrichten muss, richtet irgendwann jemand falsch aus. Zehn Pruefungen gelaufen, alle gruen. Rechner und Handy angesehen. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/heim.css | 163 ++++++++++++++++++++++++++++++---- workspace/assets/js/kopf.js | 6 ++ workspace/assets/js/start.js | 9 ++ 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 | 29 ++++-- workspace/startcheck.html | 22 ++--- workspace/steckbrief.html | 20 ++--- workspace/uebersicht.html | 20 ++--- workspace/wissen.html | 20 ++--- 22 files changed, 363 insertions(+), 208 deletions(-) diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index b8abb8a1..3bc61e9f 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -274,7 +274,48 @@ left 8px bottom 8px, left 8px bottom 8px; } -.willkommen > * { position: relative; z-index: 1; } +/* `:not(.licht)` -- dieselbe Falle wie in module.css, und ich bin + heute schon einmal hineingelaufen: Das Lichtelement ist ein direktes + KIND der Flaeche. `position: relative` nimmt ihm sein `absolute` und + macht aus einer Flaeche ueber der ganzen Konsole einen leeren + Inline-Span. Eine Regel auf `> *` trifft eben auch das, was gar kein + Inhalt ist. */ +.willkommen > *:not(.licht) { position: relative; z-index: 1; } + +/* ===================================================================== + DAS LICHT AUF DER KONSOLE IST EINE SPIEGELUNG, KEIN FARBSCHLEIER + + Auf den Kacheln leuchtet das Licht in der Farbe der Kategorie -- dort + ist es ein Hinweis. Hier waere dasselbe falsch: Die Konsole gehoert + zu keiner Kategorie, und ein farbiger Schleier auf gebuerstetem + Metall sieht aus wie eine Folie darauf. + + Metall zeigt seine Form ueber die SPIEGELUNG. Deshalb ist das Licht + hier weiss, schmal und hart an der Kante -- es wandert ueber die + Fassung wie ein Fenster, an dem man vorbeigeht. Erst dadurch sieht + man, dass die Fassung gewoelbt ist; ein Standbild kann das nicht. + ===================================================================== */ +.willkommen > .licht { + z-index: 2; /* ueber Glas und Nieten, unter dem Text */ + clip-path: inherit; +} +/* Der weiche Schein auf der Glasflaeche -- sehr leise, er soll den Text + nicht anheben. */ +.willkommen > .licht::before { + background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), + rgba(190, 220, 255, .085), transparent 62%); +} +/* Die eigentliche Spiegelung: ein enger, heller Fleck, den die Maske auf + die FASSUNG begrenzt -- also genau auf das Metall und nicht auf die + Flaeche daneben. */ +.willkommen > .licht::after { + padding: var(--k-rand); + background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), + rgba(255, 255, 255, .95), + rgba(214, 232, 255, .42) 34%, + rgba(160, 190, 225, .12) 58%, + transparent 74%); +} .willkommen__reihe { display: flex; align-items: center; gap: 16px; @@ -325,22 +366,22 @@ Name schon behauptet. */ .willkommen__rechts > * { position: relative; z-index: 1; } -/* Die Mulde. Sie liegt HINTER der Uhr (z-index 0 gegen 1) und ist - bewusst 22 px groesser als das Gehaeuse -- eine Fraesung ist immer - etwas weiter als das, was hineinkommt, sonst bekaeme man es nicht - hinein. */ -.willkommen__rechts::after { - content: ""; position: absolute; - right: -11px; top: 50%; width: 186px; height: 186px; - margin-top: -93px; - border-radius: 50%; - pointer-events: none; z-index: 0; - background: - radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .55) 62%, transparent 74%); - box-shadow: - inset 0 6px 10px -6px rgba(0, 0, 0, .95), - inset 0 -3px 0 -1px rgba(190, 208, 230, .16); -} +/* DIE MULDE HAENGT AN DER UHR, NICHT AM KASTEN DANEBEN. + + Der erste Anlauf setzte sie als eigene Flaeche in die rechte Haelfte + der Konsole, ausgerichtet an deren rechtem Rand. Am Rechner passte + das; auf dem Handy steht die Uhr MITTIG, und die Mulde lag als + dunkle Scheibe daneben. Im Bildschirmfoto bei 412 px gesehen. + + Jetzt entsteht sie aus zwei Schattenringen der Uhr selbst (siehe + `.uhr` weiter oben): Sie ist damit automatisch konzentrisch, bei + jeder Groesse und an jedem Ort. Das ist die bessere Bauart, nicht + nur die reparierte -- eine Fassung, die man ausrichten MUSS, richtet + irgendwann jemand falsch aus. + + Die Nut daneben bleibt am Kasten: Sie trennt zwei BEREICHE, nicht + zwei Bauteile. Auf dem Handy gibt es diese Trennung nicht mehr + (dort steht alles untereinander), deshalb faellt sie dort weg. */ .willkommen__rechts { display: flex; align-items: center; gap: 14px; @@ -448,6 +489,14 @@ -4px -4px 26px -13px rgba(255, 95, 109, .6), 4px 4px 26px -13px rgba(143, 216, 255, .6), 0 14px 30px -14px rgba(0, 0, 0, .95), + /* DIE MULDE. Zwei Ringe aus Schatten mit Ausdehnung: aussen die + Fraesung selbst (dunkel, 11 px breit), darauf eine haarfeine + helle Kante -- dort trifft das Licht die gegenueberliegende Wand + der Vertiefung. Zusammen macht das aus "davor" ein "darin", und + zwar konzentrisch bei jeder Groesse. */ + 0 0 0 11px rgba(0, 0, 0, .5), + 0 0 0 12px rgba(190, 208, 230, .12), + 0 6px 14px 6px rgba(0, 0, 0, .45), /* Und der dunkle Ring, der die Fassung einlaesst -- ohne ihn liegt sie auf dem Zifferblatt statt darin. */ inset 0 0 0 1px rgba(6, 10, 18, .85); @@ -455,7 +504,33 @@ /* SCHICHT 2: die vertiefte Scheibe. */ .uhr::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; + /* DAS GUILLOCHIERTE ZIFFERBLATT. + + Guillochieren ist das Verfahren, mit dem seit zweihundert Jahren + hochwertige Zifferblaetter gemacht werden: Eine Maschine schneidet + ein feines, regelmaessiges Muster in das Metall, und weil jede + Rille das Licht in einem anderen Winkel zurueckwirft, LEBT die + Flaeche, wenn man den Kopf bewegt. Es ist der Unterschied zwischen + einem lackierten und einem bearbeiteten Blatt -- und der Grund, + warum ein teures Zifferblatt teuer AUSSIEHT, ohne dass eine + einzige Farbe daran teuer waere. + + Hier aus zwei Ebenen: STRAHLEN vom Mittelpunkt (der Kegelverlauf, + 240 Rillen) und RINGE um den Mittelpunkt (der wiederholte + Radialverlauf, alle 3 px). Beide extrem leise -- bei 4 Prozent + Deckkraft sieht man kein Muster, man sieht eine Oberflaeche. Wer + sie einzeln erkennt, hat sie zu laut gemacht. + + `closest-side`, damit die Ringe im Radius rechnen und nicht in der + weitesten Ecke -- derselbe Fehler, der heute die Skala unsichtbar + gemacht hat. */ background: + repeating-conic-gradient(from 0deg, + rgba(255, 255, 255, .045) 0deg 0.75deg, + rgba(0, 0, 0, .05) 0.75deg 1.5deg), + repeating-radial-gradient(circle closest-side at 50% 50%, + rgba(255, 255, 255, .035) 0 1px, + rgba(0, 0, 0, .045) 1px 3px), radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .06), transparent 56%), radial-gradient(circle at 50% 50%, #0c121e 56%, #04070d 100%); box-shadow: @@ -521,6 +596,49 @@ mask: radial-gradient(circle closest-side, transparent 0 94%, #000 94% 99.5%, transparent 99.5%); } +/* DER AUFGESETZTE ZWOELF-INDEX. Ein Keil in Hausrot mit heller + Oberkante, gesetzt auf die Luenette. Er beantwortet die Frage "wo ist + oben" ohne eine einzige Ziffer -- und er ist der einzige farbige + Punkt auf dem Metall, also auch der Blickfang. */ +.uhr__zwoelf { + position: absolute; top: 3px; left: 50%; + width: 7px; height: 13px; margin-left: -3.5px; + z-index: 5; pointer-events: none; + clip-path: polygon(50% 0, 100% 100%, 0 100%); + background: linear-gradient(180deg, #ffd9dc 0%, #ff5f6d 34%, #b3323e 100%); + filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); +} + +/* DIE PERLE. Ein Kasten in voller Groesse, der sich dreht -- die Perle + selbst sitzt oben auf dem Radius des Sekundenbogens. So braucht die + Drehung keine Rechnung mit Winkelfunktionen: Der Kasten dreht sich, + die Perle wird mitgenommen. */ +.uhr__perle { + position: absolute; inset: 10px; + z-index: 5; pointer-events: none; + transform: rotate(0deg); + transition: transform .12s cubic-bezier(.34, 1.56, .64, 1); +} +.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%); + 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); +} +@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; } +} + /* SCHICHT 3: die Glaskuppe. */ .uhr__glas { position: absolute; inset: 10px; border-radius: 50%; @@ -616,7 +734,15 @@ Schrift (background-clip: text) wuerde im Windows-Kontrastmodus zu unsichtbarer Schrift -- derselbe Grund, aus dem die Ueberschrift daneben eine feste Farbe traegt. */ + /* GRAVIERT STATT GEDRUCKT. Zwei zusaetzliche Schatten mit einem + halben Pixel Versatz: einer dunkel nach oben, einer hell nach + unten. Das ist genau das Lichtverhalten einer Vertiefung -- oben + faellt Schatten hinein, unten trifft das Licht die + gegenueberliegende Wand. Zusammen mit den beiden farbigen Scheinen + stehen die Ziffern damit IM Blatt statt darauf. */ text-shadow: + 0 -.5px 0 rgba(0, 0, 0, .85), + 0 .5px 0 rgba(255, 255, 255, .22), -6px 0 16px rgba(255, 95, 109, .38), 6px 0 16px rgba(143, 216, 255, .42); } @@ -649,6 +775,9 @@ Seite -- fehlt auf 17 Seiten". */ @media (max-width: 620px) { + /* Die Nut trennt Text von Instrumenten -- nebeneinander. Untereinander + traennte sie nichts und stuende quer im Bild. */ + .willkommen__rechts::before { display: none; } /* Auf dem Handy rückt die Gruppe unter den Gruß und die Uhr wird kleiner -- 108 px neben einer Überschrift lassen für den Namen keine Zeile mehr übrig. */ diff --git a/workspace/assets/js/kopf.js b/workspace/assets/js/kopf.js index 9b19da61..47ef38af 100644 --- a/workspace/assets/js/kopf.js +++ b/workspace/assets/js/kopf.js @@ -267,6 +267,12 @@ '.dran__punkt', '.zahl', '.datei', '.person', '.eintrag', '.thema', '.listentag', '.k-listentag', '.steckbrief', '.leer-hinweis', '.block', '.saeule', '.karte-gross', '.kandidat', '.punkt', '.call', '.report', + /* Die Konsole der Startseite (07.09.2026). Auf ihr ist das Licht + kein Farbschleier, sondern eine SPIEGELUNG auf Metall -- gesteuert + von denselben zwei Werten (--mx/--my), gestaltet in heim.css. + Echtes Metall zeigt seine Form erst, wenn sich das Licht darauf + bewegt; ein Standbild kann das nie leisten. */ + '.willkommen', ].join(', '); window.lichtFolgen = function (wurzel = document) { diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js index 07510aac..514ae7f5 100644 --- a/workspace/assets/js/start.js +++ b/workspace/assets/js/start.js @@ -391,6 +391,15 @@ Die Stunde ueber ZWOELF, nicht ueber 24: Ein Zifferblatt hat zwoelf Stunden, und der Ring soll sich wie eines lesen. */ setze('sekunde', sk / 60); + /* Die Perle sitzt auf dem Kopf des Sekundenbogens. Sechs Grad je + Sekunde, im selben Takt wie die Anzeige -- sie springt also + mit, statt weich zu gleiten. Das ist ehrlicher (die Anzeige ist + digital) und kostet EINE Bildberechnung je Sekunde statt + sechzig. Auf einer Seite, die stundenlang offen steht, ist das + der Unterschied zwischen einem warmen und einem kalten + Rechner. */ + const perle = $('uhr-perle'); + if (perle) perle.style.transform = `rotate(${sk * 6}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 1ed6a8b2..62acc03f 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 6e6d35b7..4b9b3ad3 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 58f33a89..b5983b0b 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 52c9fdfc..cfb46cf4 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 f336b0fe..608f489f 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 f2c77440..7b612ce8 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 0c2d602f..b4b1b514 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 a58be3ef..f968c04d 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 4f9d0e35..3c37e179 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 c04f933b..848095ad 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 59696fec..41c8f4b0 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 bf2ec229..ed08861c 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 5ecf83ec..80e06f50 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 ee769d99..acdf27e2 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 a7a8e069..07204316 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -9,12 +9,12 @@ - - + + - - + + @@ -148,6 +148,17 @@ + + + +
--:-- @@ -264,10 +275,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index e261968e..88990135 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 0c7adc18..930c97df 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 9a812eda..8991ce8e 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 df26e41d..f0e92a0d 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -178,10 +178,10 @@ - - - - - + + + + +