From 5b6f9cef98671151b43c8e621c5e24ed361ca817 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Mon, 7 Sep 2026 15:44:25 +0200 Subject: [PATCH] Rot, Schwarz, Babyblau -- und ein Glas, das entspiegelt ist Filipe: "der rand soll auch eine mischung von rot schwarz und babyblau haben und die kachel selbst soll einen uebertrieben krank geilen hintergrund haben ... die einzige kachel, die komplett aus dem rudel faellt. die uhr soll auch VIEL VIEL VIEL KRASSER sein. informier dich, hol die besten skills von den besten skills." NACHGELESEN STATT GERATEN -- UND DAS HAT DIE UHR VERAENDERT Zur Frage, woran man ein hochwertiges Uhrenglas erkennt: Eine Entspiegelung wird im Vakuum aufgedampft und senkt die Spiegelung auf unter ein Prozent -- das Zifferblatt wirkt dadurch SCHAERFER, nicht milchiger. Und ihr Erkennungszeichen ist kein weisser Schleier, sondern ein TOPASBLAUER SCHIMMER, der je nach Lichteinfall ueber das Glas laeuft. Hier lag genau das Gegenteil: ein breiter weisser Verlauf ueber ein Fuenftel der Scheibe -- also die Spiegelung eines UNBESCHICHTETEN Glases, das Merkmal des billigeren Materials. Jetzt: ein schmaler, harter Reflexbogen an der Woelbung, der topasblaue Schimmer diagonal darueber, und die haarfeine Schnittkante oben. DAZU ZWEI WEITERE MITTEL AUS DEM UHRENBAU * AUFGESETZTE INDIZES bei 3, 6 und 9. Auf einer guten Luenette sind die Viertelstunden keine Striche wie die anderen: Sie sind eigene Marken, breiter und HELL statt graviert -- weil sie aufgesetzt sind und deshalb Licht fangen statt Schatten zu halten. Die 12 bleibt die rote. * DAS SEKUNDENFELD IST EIN EINGELASSENES FENSTER. Eine Zusatzanzeige sitzt in einer Aussparung des Blatts; man erkennt das daran, dass der Schatten oben hineinfaellt und unten eine helle Kante steht. Genau diese beiden Schatten stehen jetzt darin. DIE FASSUNG: DREI FARBEN STATT STAHL MIT TUPFERN Links die rote Haelfte, rechts die babyblaue, dazwischen und an den Raendern Schwarz -- und ueberall dort, wo Metall das Licht bricht, die hellen Spitzlichter. Es sind dieselben zwei Farben wie im Motiv und auf der Anmeldekarte. DER HINTERGRUND: SECHS SCHICHTEN Lichtkante, KOHLEFASERGEWEBE (zwei gegenlaeufige Schraegen, die sich kreuzen -- bei drei Prozent sieht man kein Muster, man sieht ein MATERIAL), das Messraster, ein HORIZONT im unteren Drittel mit Schein darueber, die beiden Farbbecken kraeftiger als bisher, und ein fast schwarzer Grund mit Blauschimmer oben. Alles weit unter der Blendschwelle -- die Hausregel gilt auch fuer "krank geil": Es darf beeindrucken, es darf nicht blenden. Sieben Pruefungen gelaufen, alle gruen. Rechner und Handy angesehen. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/heim.css | 187 ++++++++++++++++++++++++---------- 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 | 18 ++-- workspace/startcheck.html | 22 ++-- workspace/steckbrief.html | 20 ++-- workspace/uebersicht.html | 20 ++-- workspace/wissen.html | 20 ++-- 20 files changed, 325 insertions(+), 244 deletions(-) diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index 3bc61e9f..b164cb44 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -129,48 +129,46 @@ geschliffenes Metall. Dieselbe Bauart wie das Medaillon auf VanVans Business-Hub, nur rechteckig gefasst und mit den beiden Hausfarben statt reinem Silber. */ - /* DIE FASSUNG: gebuerstetes Metall, LAENGS gerichtet. + /* DIE FASSUNG: ROT, SCHWARZ, BABYBLAU -- laengs gebuerstet. - ZWEI FEHLER LAGEN HIER HINTEREINANDER, beide im Bildschirmfoto - gesehen und nicht im Kopf: + Wunsch Filipe: "der rand soll auch eine mischung von rot schwarz + und babyblau haben." - (1) HALBDURCHSICHTIG. Metall, durch das der Hintergrund scheint, - ist kein Metall -- es las sich als graue Linie. Derselbe - Fehler stand gleichzeitig an der Uhr. Jetzt deckende Farben. + Vorher war sie Stahl mit je einem roten und blauen Tupfer. Jetzt + sind die drei Farben die Fassung SELBST: links die rote Haelfte, + rechts die babyblaue, dazwischen und an den Raendern Schwarz -- + und ueberall dort, wo Metall das Licht bricht, die hellen + Spitzlichter. Es sind dieselben zwei Farben wie im Motiv und auf + der Anmeldekarte; die Konsole traegt damit die Handschrift des + Hauses statt einer dritten. - (2) KEGELVERLAUF AUF EINER BREITEN FLAECHE. Bei der runden Uhr ist - `conic-gradient` genau richtig: Jede Stelle des Rings liegt in - einem anderen Winkel, also wandert das Licht rundherum. Bei - einem 1200 px breiten Balken liegt die GANZE Oberkante in - einem Winkelausschnitt von wenigen Grad -- der Verlauf - passiert dort fast nichts, und die Fassung sah wieder flach - aus. Ein gebuersteter Metallbalken glaenzt der LAENGE nach: - helle und dunkle Zonen wandern von links nach rechts. Deshalb - hier ein linearer Verlauf mit zwoelf Stopps, und nur an den - beiden Stellen, an denen das Haus seine Farben hat, eine - warme und eine kuehle Spiegelung. - - Die Lehre gilt allgemein: Die Verlaufsart muss zur FORM passen, - nicht zum Material. Rund -> conic, lang -> linear. */ + ZWEI FEHLER, DIE ICH HIER SCHON GEMACHT HABE und die deshalb im + Aufbau stecken: Die Farben sind DECKEND (halbdurchsichtiges Metall + ist kein Metall, es ist graues Glas), und der Verlauf ist LINEAR + und laeuft der Laenge nach (ein Kegelverlauf trifft auf einem + 1200 px breiten Balken die ganze Oberkante mit wenigen Grad und + bewirkt nichts). Rund -> conic, lang -> linear. */ background: linear-gradient(96deg, - #cfdcec 0%, - #f6fbff 4%, - #64768d 9%, - #e3ecf7 15%, - #7d8fa6 22%, - #ff8a94 27%, - #f8fcff 31%, - #55677e 38%, - #dbe6f3 46%, - #6b7d94 55%, - #f2f8ff 63%, - #8fd8ff 70%, - #5d6f87 77%, - #e9f1fb 85%, - #7a8ca3 92%, - #f4f9ff 97%, - #cfdcec 100%); + #1a0509 0%, + #ff5f6d 4%, + #ffe1e4 8%, + #7a1620 12%, + #08090e 18%, + #8b9aad 24%, + #f6fbff 28%, + #0a0d14 35%, + #4d5c72 42%, + #e8f1fb 47%, + #06080d 54%, + #5d7a92 61%, + #8fd8ff 67%, + #e6f6ff 71%, + #123043 76%, + #070a10 82%, + #6f8298 88%, + #f2f8ff 92%, + #1a0509 100%); clip-path: polygon( var(--k-fase) 0, calc(100% - var(--k-fase)) 0, 100% var(--k-fase), 100% calc(100% - var(--k-fase)), @@ -206,13 +204,44 @@ 100% calc(var(--k-fase) - var(--k-rand)), 100% calc(100% - var(--k-fase) + var(--k-rand)), calc(100% - var(--k-fase) + var(--k-rand)) 100%, calc(var(--k-fase) - var(--k-rand)) 100%, 0 calc(100% - var(--k-fase) + var(--k-rand)), 0 calc(var(--k-fase) - var(--k-rand))); + /* DER HINTERGRUND -- SECHS SCHICHTEN, VON OBEN NACH UNTEN GELESEN. + + Wunsch Filipe: "die kachel selbst soll einen uebertrieben krank + geilen hintergrund haben ... die einzige kachel, die komplett aus + dem rudel faellt." + + 1 die Lichtkante ganz oben -- die Innenseite der Fassung + 2 das KOHLEFASERGEWEBE: zwei gegenlaeufige Schraegen, die sich + zu einem Geflecht kreuzen. Bei drei Prozent sieht man kein + Muster, man sieht ein MATERIAL -- und genau darum geht es. + Ein Gewebe sagt "gebaut", ein Raster sagt "gezeichnet". + 3 das feine Messraster (bleibt, es gehoert zur Sprache des Hauses) + 4 DER HORIZONT: ein heller Strich im unteren Drittel mit einem + Schein darueber. Er gibt der Flaeche eine Tiefe, die kein + Verlauf allein herstellt -- das Auge liest ihn als Kante + zwischen "vorn" und "hinten". + 5 die beiden Farbbecken: Rot links unten, Babyblau rechts unten + -- kraeftiger als bisher, weil sie jetzt gegen ein Material + arbeiten und nicht gegen eine leere Flaeche + 6 der Grund: fast schwarz, mit einem Blauschimmer oben + + ALLES WEIT UNTER DER BLENDSCHWELLE. Die Regel des Hauses gilt auch + fuer "krank geil": Es darf beeindrucken, es darf nicht blenden. */ background: - linear-gradient(180deg, rgba(255, 255, 255, .11) 0 1px, transparent 1px), - repeating-linear-gradient(0deg, rgba(150, 186, 220, .085) 0 1px, transparent 1px 16px), - repeating-linear-gradient(90deg, rgba(150, 186, 220, .085) 0 1px, transparent 1px 16px), - radial-gradient(120% 90% at 4% 108%, rgba(255, 95, 109, .16), transparent 52%), - radial-gradient(120% 90% at 96% 108%, rgba(143, 216, 255, .17), transparent 52%), - linear-gradient(168deg, #131a27 0%, #0a0e17 62%, #06090f 100%); + linear-gradient(180deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px), + repeating-linear-gradient(58deg, + rgba(190, 215, 245, .030) 0 1px, transparent 1px 7px), + repeating-linear-gradient(-58deg, + rgba(190, 215, 245, .030) 0 1px, transparent 1px 7px), + repeating-linear-gradient(0deg, rgba(150, 186, 220, .075) 0 1px, transparent 1px 16px), + repeating-linear-gradient(90deg, rgba(150, 186, 220, .075) 0 1px, transparent 1px 16px), + linear-gradient(180deg, transparent 0 71%, + rgba(190, 220, 255, .16) 71% calc(71% + 1px), transparent calc(71% + 1px)), + radial-gradient(90% 34% at 50% 71%, rgba(150, 200, 255, .10), transparent 70%), + radial-gradient(120% 95% at 2% 112%, rgba(255, 78, 94, .26), transparent 54%), + radial-gradient(120% 95% at 98% 112%, rgba(120, 205, 255, .26), transparent 54%), + radial-gradient(140% 120% at 50% -30%, rgba(96, 140, 200, .16), transparent 62%), + linear-gradient(168deg, #0f1522 0%, #080c14 58%, #04060b 100%); } /* ===================================================================== @@ -563,6 +592,15 @@ Beim ersten Anlauf lagen beide hier, gleich lang: Aus der Skala wurde ein Zahnkranz. Im Bildschirmfoto gesehen. */ background: + /* AUFGESETZTE INDIZES bei 3, 6 und 9 Uhr. Auf einer guten Luenette + sind die Viertelstunden keine Striche wie die anderen, sondern + eigene Marken -- breiter und HELL statt graviert, weil sie + aufgesetzt sind und deshalb Licht fangen statt Schatten zu + halten. Ein Kegelverlauf mit 90-Grad-Takt, um 90 Grad gedreht: + So trifft er 3, 6 und 9 und laesst die 12 der roten Marke. */ + repeating-conic-gradient(from 88.6deg, + rgba(244, 250, 255, .92) 0deg 2.8deg, + transparent 2.8deg 90deg), repeating-conic-gradient(from 0deg, rgba(6, 10, 18, .85) 0deg 1.5deg, transparent 1.5deg 30deg); @@ -639,17 +677,46 @@ .uhr__zwoelf, .uhr__perle { display: none; } } -/* SCHICHT 3: die Glaskuppe. */ +/* SCHICHT 3: DAS GLAS -- ENTSPIEGELTES SAPHIRGLAS (07.09.2026) + + Nachgelesen statt geraten. Eine Entspiegelung (Anti-Reflex) wird im + Vakuum aufgedampft und senkt die Spiegelung auf unter ein Prozent; + das Zifferblatt wirkt dadurch SCHAERFER, nicht milchiger. Und das + Erkennungszeichen einer guten Beschichtung ist kein weisser Schleier, + sondern ein **topasblauer Schimmer**, der je nach Lichteinfall ueber + das Glas laeuft -- daran sieht ein Kenner sofort, dass da Saphirglas + sitzt und kein Mineralglas. + + Vorher lag hier genau das Gegenteil: ein breiter weisser Verlauf + ueber ein Fuenftel der Scheibe. Das ist die Spiegelung eines + UNBESCHICHTETEN Glases -- also ausgerechnet das Merkmal des + billigeren Materials. + + Jetzt drei Dinge, jedes davon aus der Sache begruendet: + 1. ein SCHMALER, harter Reflexbogen oben links -- die Kante der + Woelbung, das Einzige, was auch entspiegelt stehen bleibt + 2. der topasblaue Schimmer, diagonal, sehr leise + 3. die haarfeine helle Linie an der Oberkante -- die Schnittkante + des Glases selbst + + Quellen zur Beschichtung: reservoir-watch.com und botta-design.de + (siehe Antwort im Verlauf). */ .uhr__glas { position: absolute; inset: 10px; border-radius: 50%; background: - linear-gradient(146deg, - rgba(255, 255, 255, .15) 0%, - rgba(255, 255, 255, .035) 19%, - transparent 42%); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); + linear-gradient(142deg, + rgba(255, 255, 255, .16) 0%, + rgba(255, 255, 255, .05) 7%, + transparent 15%), + linear-gradient(128deg, + transparent 30%, + rgba(120, 190, 255, .10) 44%, + rgba(150, 130, 255, .07) 52%, + transparent 64%); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); pointer-events: none; z-index: 3; } + .uhr__ring { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); /* Bei Null soll der Ring OBEN beginnen, nicht rechts. */ @@ -754,10 +821,24 @@ font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .18em; text-indent: .18em; - padding: 1px 6px 1px 7px; - border-radius: 999px; - color: #cfe9fb; - background: rgba(143, 216, 255, .10); + /* EIN EINGELASSENES FENSTER, kein Etikett. + + Auf einer Uhr sitzt eine Zusatzanzeige in einer AUSSPARUNG des + Zifferblatts -- man sieht durch das Blatt hindurch auf die Scheibe + darunter. Das erkennt man an zwei Dingen: der Schatten faellt oben + hinein, und unten steht eine helle Kante, wo das Licht die + gegenueberliegende Wand trifft. Genau diese beiden Schatten stehen + hier. Die abgeschnittene Ecke nimmt die Sprache der Kacheln auf. */ + padding: 1px 7px 1px 8px; + border-radius: 0; + clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px); + color: #d8ecfb; + background: + linear-gradient(180deg, #05080e 0%, #0a1018 100%); + box-shadow: + inset 0 2px 3px -1px rgba(0, 0, 0, .95), + inset 0 -1px 0 rgba(190, 215, 240, .28), + 0 1px 0 rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(143, 216, 255, .16); } diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index c86b393d..177d1e4d 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 276aa4d9..db797e94 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 7bbb2112..5cb00571 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 821d4f33..c19e49f7 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 77ddad9b..35dd3344 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 f2fe018c..57c8b8d3 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 f2bffc59..f8678f0f 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 ea2c038f..fc11b575 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 afd80a92..00301d8c 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 b188b63e..32638fdd 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 4e2a5e78..f2f67d89 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 ee87f991..1d2c3f8b 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 df5012d9..dc8f212b 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 f98156ca..5decd475 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 98150214..8394d683 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -9,12 +9,12 @@ - - + + - - + + @@ -275,10 +275,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 2d6b7a75..5d26a3a2 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 bff8ac5b..e0b24ce1 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 8b425648..980199c6 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 7f641c98..f97151b0 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -9,11 +9,11 @@ - - - - - + + + + + @@ -178,10 +178,10 @@ - - - - - + + + + +