From 12c40256f75b3861b363f9b52f65b5df8aa4094e Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 8 Sep 2026 23:30:56 +0200 Subject: [PATCH] Uhr: Stunden rot, Minuten silber, Sekunden babyblau -- alle drei als Reihen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wunsch Filipe: "stunden soll rot sein, minuten schwarz/silber und die sekunden babyblau. die punkte herum sollen eine mischung von rot schwarz und babyblau sein. ich will auch dass die stunden und minuten auch barren oder punkte sind und nicht so eine durchlaufende schleife." ALLE DREI BAHNEN SIND JETZT REIHEN. Die Stunde bekommt zwoelf Balken (ein Zifferblatt hat zwoelf), Minute und Sekunde sechzig. Die Glieder sind verschieden lang -- Punkt (0,01 + runde Kappe), kurzer Balken (1,7), langer Balken (5,5). Damit liest man die drei Bahnen auch dann auseinander, wenn jemand Farben schlecht unterscheidet; Farbe allein traegt eine Information nie. VIER FUNDE BEIM NACHMESSEN, keiner davon war vorher sichtbar: 1. ABRUNDEN STATT RUNDEN. `Math.round` liess Minute und Stunde ab der HAELFTE einen Balken zu frueh aufleuchten: um 14:30 zeigte der Stundenring vier statt drei Balken, der Minutenring ab Sekunde 30 einen zu viel. Die Uhr war damit die halbe Zeit ueber falsch -- und ausgerechnet zur vollen Stunde, wo man hinsieht, richtig. Nachgerechnet: 10:30 -> 11, 14:30 -> 3, 23:59 -> 12, 00:00 -> 1. 2. DIE PERLENKOEPFE TRUGEN DIE ALTE ZUORDNUNG. Die drei Boegen waren getauscht, die drei Koepfe nicht: ein roter Kopf sass auf der blauen Sekundenreihe, ein silberner auf den roten Stundenbalken. Das sah nach einem Winkelfehler aus, obwohl alle drei auf die Zehntelgrad genau standen (354 / 161,9 / 343,0 bei 23:26:59, gemessen). Wer eine Farbe tauscht, tauscht sie an ALLEN Stellen: Bogen, Kopf, Schein, Kranz. 3. DER SCHEIN LAG DREIFACH UEBEREINANDER. Jeder Ring liegt dreimal im SVG (Schatten, Hauptlage, Kante); `.uhr__stunde` traf alle drei. Das rote Leuchten lief dadurch bis ueber die Ziffern, obwohl in der Regel nur 1,8 px stehen -- genau das Verschwommene, das Filipe nicht will. Jetzt `.uhr__ring > …`: nur die Hauptlage leuchtet, Schatten und Kante bleiben hart. 4. ZWEI TOTE FARBSCHICHTEN in heim.css (Sekunde rot / Minute blau / Stunde bronze). Sie wurden vom spaeteren Satz ueberschrieben und waren unsichtbar -- aber wer die Datei von oben liest, haelt sie fuer die geltende Regel und aendert die falsche Stelle. Entfernt statt stehengelassen: EINE Stelle entscheidet ueber eine Farbe. Ausserdem: Der Kometenschweif ist raus (HTML und CSS, nicht ausgeblendet). Eine Reihe zeigt ihre Richtung durch das letzte Glied; ohne eigenes Muster haette er einen vollen Ring quer ueber die Punkte gezogen. Der Punktkranz aussen mischt jetzt Rot, Babyblau und ein sehr dunkles Blau im 18-Grad-Takt -- das Dunkel ist kein Loch, sonst zerfiele der Ring aus dem Augenwinkel in zwei Haelften. Gedaempft bleibt Pflicht: Die Sekunde laeuft dauernd und bekommt das ruhigste Babyblau, die Stunde bewegt sich kaum und darf die kraeftigste Farbe tragen. Die Auslieferungskennung ist auf allen 19 Seiten hochgesetzt, sonst kaeme keine der Aenderungen an. Geprueft: pruef-start-ansicht (alles in Ordnung), pruef-css-klassen (alles in Ordnung), Segmentzahlen und Perlenwinkel im Browser nachgemessen, Bildschirmfoto bei vierfacher Aufloesung. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/heim.css | 199 +++++++++++++++++++--------------- workspace/assets/js/start.js | 85 +++++++-------- 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 | 126 +++++++++++---------- workspace/startcheck.html | 22 ++-- workspace/steckbrief.html | 20 ++-- workspace/uebersicht.html | 20 ++-- workspace/wissen.html | 20 ++-- 21 files changed, 400 insertions(+), 374 deletions(-) diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index 3bc8be49..ca2e533c 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -1090,38 +1090,52 @@ transform: rotate(0deg); transition: transform .12s cubic-bezier(.34, 1.56, .64, 1); } +/* DER ABSTAND FOLGT DER BAHN, DIE FARBE FOLGT DER BAHN -- und beides + muss beim Farbtausch mitgehen. Am 08.09.2026 habe ich genau das + vergessen: Die drei BOEGEN waren getauscht (Stunde rot, Minute + silber, Sekunde babyblau), die drei KOEPFE trugen weiter die alte + Zuordnung. Im Bildschirmfoto sass dadurch ein roter Kopf auf der + blauen Sekundenreihe und ein silberner auf den roten Stundenbalken + -- es sah nach einem Rechenfehler bei den Winkeln aus, obwohl alle + drei auf die Zehntelgrad genau standen (354 / 161,9 / 343,0 bei + 23:26:59, nachgemessen). Wer eine Farbe tauscht, tauscht sie an + ALLEN Stellen, die sie tragen -- Bogen, Kopf, Schein, Kranz. */ + +/* AUSSEN, BABYBLAU: der Kopf der Sekundenpunkte. Am groessten, weil er + der einzige ist, der sich sichtbar bewegt. */ .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%); + radial-gradient(circle at 36% 32%, #fff 0%, #d8efff 34%, #7ec8f2 70%, #1d5a80 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); + 0 0 6px 1px rgba(126, 200, 242, .75), + 0 0 13px 3px rgba(110, 180, 235, .3), + inset 0 0 0 .5px rgba(255, 255, 255, .55); } -/* 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. */ +/* MITTE, SILBER: der Kopf der Minutenbalken. Poliertes Metall, kein + Licht -- er ist der Bezug, an dem man die anderen beiden misst. */ .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%); + background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e6edf6 34%, #97a4b4 70%, #414b58 100%); box-shadow: 0 0 4px 1px rgba(220, 235, 255, .45), inset 0 0 0 .5px rgba(255, 255, 255, .6); } +/* INNEN, ROT: der Kopf der Stundenbalken. Der kleinste Punkt in der + kraeftigsten Farbe -- er bewegt sich am wenigsten und darf deshalb + auffallen, ohne zu stoeren. */ +.uhr__perle--stunde::before { + top: 21.4%; + width: 5.4px; height: 5.4px; margin-left: -2.7px; + background: radial-gradient(circle at 36% 32%, #fff 0%, #ffb0b6 38%, #ff4257 72%, #7e1a24 100%); + box-shadow: + 0 0 5px 1px rgba(255, 80, 95, .6), + inset 0 0 0 .5px rgba(255, 255, 255, .5); +} @media (prefers-reduced-motion: reduce) { /* Kein Nachfedern -- der Sprung bleibt, das Schwingen geht. */ @@ -1238,22 +1252,23 @@ endet dann nie dort, wo er soll. U = 2 * pi * r, ausgerechnet und nicht geschaetzt. */ .uhr__sekunde { - stroke: url(#uhr-rot); + stroke: url(#uhr-sekunde-farbe); stroke-width: 2.6; stroke-dasharray: 285.88; /* r = 45.5 */ stroke-dashoffset: 285.88; } -/* MITTE: die Minute in Blau. */ +/* MITTE: die MINUTE in Schwarzsilber -- der ruhige Bezug zwischen + den beiden farbigen Bahnen. */ .uhr__minute { - stroke: url(#uhr-blau); + stroke: url(#uhr-minute-farbe); stroke-width: 3; stroke-dasharray: 241.90; /* r = 38.5 */ stroke-dashoffset: 241.90; } -/* INNEN: die STUNDE in Schwarzsilber. Am breitesten und am ruhigsten -- +/* INNEN: die STUNDE in Rot. Am breitesten und am ruhigsten -- sie bewegt sich in fuenf Minuten um ein halbes Grad. */ .uhr__stunde { - stroke: url(#uhr-silber); + stroke: url(#uhr-stunde-farbe); stroke-width: 3.6; stroke-dasharray: 197.92; /* r = 31.5 */ stroke-dashoffset: 197.92; @@ -1616,43 +1631,15 @@ Schein liegt deshalb bei 45 bis 55 Prozent Deckkraft und wird NICHT animiert -- ein pulsierendes Leuchten am Bildrand ist genau das, was die Hausregel verbietet. */ -/* DIE SEKUNDE GLUEHT SCHWAECHER ALS DIE ANDEREN BEIDEN, und das ist - Absicht: Sie ist die laengste Bahn, die hellste Farbe und die - einzige, die sich sichtbar bewegt. Mit demselben Schein wie Minute - und Stunde zog sie im Bildschirmfoto den ganzen Blick auf sich -- - ein roter Reifen, neben dem die Uhrzeit selbst zurueckstand. - Nachgesehen, nicht gerechnet. */ -.uhr__sekunde { - stroke-width: 3; - filter: - drop-shadow(0 0 1.5px rgba(255, 118, 132, .8)) - drop-shadow(0 0 6px rgba(255, 70, 90, .3)); -} -.uhr__minute { - stroke-width: 3.4; - filter: - drop-shadow(0 0 2px rgba(120, 200, 255, .95)) - drop-shadow(0 0 8px rgba(70, 165, 245, .48)); -} -.uhr__stunde { - stroke-width: 4; - filter: - drop-shadow(0 0 2px rgba(255, 214, 160, .9)) - drop-shadow(0 0 9px rgba(214, 154, 82, .45)); -} - -/* Die Perle am Ende jeder Bahn ist die Spitze -- dort schaut man hin. - Sie bekommt denselben Schein wie ihre Bahn, nur staerker, und einen - weissen Kern: Das ist der Unterschied zwischen einem farbigen Punkt - und einem Licht. */ -.uhr__perle::before { - box-shadow: - 0 0 0 1px rgba(255, 255, 255, .5), - 0 0 6px 1px currentColor, - 0 0 14px 2px currentColor; -} -.uhr__perle--minute::before { color: rgba(99, 184, 245, .85); } -.uhr__perle--stunde::before { color: rgba(226, 176, 108, .8); } +/* Die Strichbreiten und Scheine der drei Bahnen stehen NICHT hier, + sondern gesammelt am Dateiende unter "DIE DREI FARBEN, NEU VERTEILT". + Hier stand bis zum 08.09.2026 ein zweiter, vollstaendiger Satz davon + (Sekunde rot, Minute blau, Stunde bronze). Er wurde vom spaeteren + Satz ueberschrieben und war damit unsichtbar -- aber wer die Datei + von oben liest, haelt ihn fuer die geltende Regel und aendert die + falsche Stelle. Genau das ist mir heute schon einmal passiert + (zwei Groessenregeln 3600 Zeilen auseinander). Deshalb entfernt + statt stehengelassen: EINE Stelle entscheidet ueber eine Farbe. */ @media (prefers-reduced-motion: reduce) { /* Kein Leuchten ohne Not: Wer weniger Bewegung will, will meist auch @@ -1696,23 +1683,6 @@ dadurch exakt eine Vierteldrehung neben ihren Boegen -- im Bild oben links, waehrend die Boegen oben rechts endeten. Die Rechnung war richtig, die Drehung eine zu viel. */ -.uhr__spur-bahn { - fill: none; - stroke-linecap: round; - opacity: .95; -} -.uhr__spur-bahn[data-spur="sekunde"] { - stroke: #ffd2d6; stroke-width: 3; - filter: drop-shadow(0 0 3px rgba(255, 120, 134, .85)); -} -.uhr__spur-bahn[data-spur="minute"] { - stroke: #d8efff; stroke-width: 3.4; - filter: drop-shadow(0 0 3px rgba(130, 205, 255, .8)); -} -.uhr__spur-bahn[data-spur="stunde"] { - stroke: #ffe9c9; stroke-width: 4; - filter: drop-shadow(0 0 3px rgba(233, 190, 130, .75)); -} /* DIE KOEPFE GLEITEN, STATT ZU SPRINGEN. @@ -1882,19 +1852,7 @@ letzten Punkt, und den setzt die Perle. */ /* ---- 4. Schaerfe statt Nebel ------------------------------------- */ -.uhr__sekunde { - filter: drop-shadow(0 0 1.5px rgba(255, 92, 108, .9)); -} -.uhr__minute { - filter: drop-shadow(0 0 1.5px rgba(120, 200, 255, .9)); -} -.uhr__stunde { - filter: drop-shadow(0 0 1.5px rgba(255, 205, 145, .85)); -} -.uhr__spur-bahn[data-spur="minute"], -.uhr__spur-bahn[data-spur="stunde"] { - filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .5)); -} +/* (Die Scheine selbst: siehe Dateiende, ein Satz fuer alle drei.) */ /* Auch die Perlen: harte Kante, enger Schein. Ein Lichtpunkt ist scharf -- was leuchtet, hat einen Rand. */ .uhr__perle::before { @@ -1902,3 +1860,66 @@ 0 0 0 1px rgba(255, 255, 255, .75), 0 0 4px 0 currentColor; } + +/* =================================================================== + DIE DREI FARBEN, NEU VERTEILT (08.09.2026) + + Filipe: "stunden soll rot sein, minuten schwarz/silber und die + sekunden babyblau. die punkte herum sollen eine mischung von rot + schwarz und babyblau sein." + + Die Zuordnung ist nicht beliebig, sie folgt der Geschwindigkeit: + Die SEKUNDE laeuft dauernd und bekommt das ruhigste Babyblau -- + staendige Bewegung in Signalrot ermuedet. Die STUNDE bewegt sich + kaum und darf deshalb die kraeftigste Farbe tragen. Die MINUTE + dazwischen in Schwarzsilber: Sie ist der Bezug, an dem man die + beiden anderen misst, und Metall draengt sich nicht vor. + + Die Glieder sind ausserdem verschieden LANG -- Punkt, kurzer Balken, + langer Balken. Damit liest man die drei Bahnen auch dann + auseinander, wenn jemand Farben schlecht unterscheidet. Farbe allein + traegt eine Information nie. */ +/* DER SCHEIN GEHOERT AN EINE LAGE, NICHT AN DREI. + + Jeder Ring liegt dreifach im SVG: Schattenlage (0,55 nach unten), + Hauptlage, Kantenlage (0,4 nach oben). `.uhr__stunde` trifft alle + drei -- der Schein wurde damit DREIMAL uebereinander gerechnet. Im + Bildschirmfoto lief das rote Leuchten deshalb bis ueber die Ziffern + und liess die ganze Uhr weich aussehen, obwohl in der Regel nur + 1,8 px stehen. Genau das, was Filipe nicht will ("es soll nichts + verschwommen aussehen ... im gegenteil, richtig scharf"). + + Mit `>` bekommt nur die Hauptlage den Schein. Schatten und Kante + bleiben hart -- sie sind Koerper, kein Licht. Das ist derselbe + Gedanke wie im Kommentar oben ("KEIN Weichzeichner, nirgends: Die + Tiefe entsteht aus dem Versatz"), nur war er an dieser Stelle nicht + durchgehalten. */ +.uhr__ring > .uhr__sekunde { filter: drop-shadow(0 0 1.4px rgba(126, 200, 242, .85)); } +.uhr__ring > .uhr__minute { filter: drop-shadow(0 0 1.2px rgba(220, 232, 246, .6)); } +.uhr__ring > .uhr__stunde { filter: drop-shadow(0 0 1.4px rgba(255, 92, 104, .8)); } +.uhr__schatten .uhr__sekunde, .uhr__schatten .uhr__minute, .uhr__schatten .uhr__stunde, +.uhr__kante .uhr__sekunde, .uhr__kante .uhr__minute, .uhr__kante .uhr__stunde { filter: none; } + +/* Die Koepfe tragen die Farbe ihrer Bahn -- sonst zeigte ein blauer + Punkt auf eine rote Reihe. */ +.uhr__perle::before { color: rgba(126, 200, 242, .9); } +.uhr__perle--minute::before { color: rgba(226, 236, 248, .85); } +.uhr__perle--stunde::before { color: rgba(255, 92, 104, .9); } + +/* ---- Der Punktkranz: rot, schwarz, babyblau im Wechsel ----------- + + Drei Farben in einem `repeating-conic-gradient`: je 6 Grad ein + Punkt, dazwischen die Luecke. Die Reihenfolge Rot - Blau - Dunkel + wiederholt sich alle 18 Grad, also zwanzigmal auf dem Ring. + + Das Dunkel ist kein Loch, sondern ein sehr dunkles Blau: Ein echter + Zwischenraum haette den Kranz in zwei Haelften zerfallen lassen, + sobald man ihn aus dem Augenwinkel sieht. So bleibt der Ring ein + Ring und hat trotzdem drei Toene. */ +.uhr__leds { + background: repeating-conic-gradient(from -1.5deg, + rgba(255, 90, 102, .70) 0deg 3deg, transparent 3deg 6deg, + rgba(126, 200, 242, .70) 6deg 9deg, transparent 9deg 12deg, + rgba(120, 150, 185, .34) 12deg 15deg, transparent 15deg 18deg); + filter: drop-shadow(0 0 2px rgba(150, 170, 210, .4)); +} diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js index 435ac416..2f87d74d 100644 --- a/workspace/assets/js/start.js +++ b/workspace/assets/js/start.js @@ -379,24 +379,6 @@ for (const welcher of ['sekunde', 'minute', 'stunde']) { lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)]; } - /* DER SCHWEIF (08.09.2026): die letzten Grad vor der Spitze, heller. - - Gerechnet, nicht geschaetzt. Ein Kreis mit Umfang U, Fortschritt - a (0..1) und Schweiflaenge s soll ein Segment von (a*U - s) bis - a*U zeigen. Mit `dasharray: s, U-s` beginnt das sichtbare Stueck - bei (U - offset), also gilt - - U - offset = a*U - s -> offset = U*(1-a) + s - - Die Laenge wird bei kurzen Boegen mitgekuerzt: Am Anfang einer - Minute ist der Bogen selbst noch kuerzer als der Schweif, und ein - Schweif ohne Bogen darunter haenge sonst am Ende des Kreises -- - sichtbar als heller Strich bei zwoelf Uhr, wo nichts sein darf. */ - const SCHWEIF = { sekunde: 30, minute: 26, stunde: 22 }; // Bogenlaenge - const spuren = {}; - for (const welcher of ['sekunde', 'minute', 'stunde']) { - spuren[welcher] = document.querySelector(`[data-spur="${welcher}"]`); - } /* DIE SEKUNDE IST EINE PUNKTREIHE (08.09.2026). @@ -415,13 +397,19 @@ gebaut: n Paare aus Punkt und Luecke, dahinter eine Luecke ueber den ganzen Rest. Sechzig Zahlenpaare einmal je Sekunde sind nichts -- die Alternative waeren sechzig Elemente im Dokument. */ - const SEK_PUNKTE = 60; - const punktMuster = (U, n) => { - const schritt = U / SEK_PUNKTE; + /* Wie viele Glieder hat welche Bahn, und wie lang ist eines? + Die Sekunde bekommt PUNKTE (Laenge nahe null, runde Kappe), Minute + und Stunde BALKEN -- je langsamer, desto laenger das Glied. So + liest man die drei auch ohne Farbe auseinander. */ + const GLIEDER = { sekunde: 60, minute: 60, stunde: 12 }; + const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 5.5 }; + + const punktMuster = (U, n, gesamt, laenge) => { + const schritt = U / gesamt; if (n <= 0) return `0 ${U}`; /* 0.01 statt 0: Manche Browser zeichnen eine Strichlaenge von exakt null gar nicht, auch mit runder Kappe. */ - const paar = `0.01 ${(schritt - 0.01).toFixed(3)} `; + const paar = `${laenge} ${(schritt - laenge).toFixed(3)} `; /* DIE REIHENFOLGE ENTSCHEIDET, OB DER REST EINE LUECKE IST. In `dasharray` wechseln sich Strich und Luecke ab, beginnend @@ -446,30 +434,39 @@ const setze = (welcher, anteil) => { const U = UMFANG[welcher]; - if (welcher === 'sekunde') { - /* Der erste Punkt gehoert der Sekunde 0 -- deshalb n = sk + 1: - Bei 0 Sekunden leuchtet einer, bei 59 alle sechzig. Ein Ring, - der bei null voellig leer ist, sieht eine Sekunde lang aus wie - ein Ladefehler. */ - const n = Math.round(anteil * SEK_PUNKTE) + 1; - const muster = punktMuster(U, Math.min(n, SEK_PUNKTE)); - for (const el of lagen[welcher]) { - el.style.strokeDasharray = muster; - el.style.strokeDashoffset = '0'; - } - return; + /* ALLE DREI BAHNEN SIND REIHEN (08.09.2026). + + Filipe: "ich will auch dass die stunden und minuten auch barren + oder punkte sind und nicht so eine durchlaufende schleife." + + Ein durchgehender Bogen zeigt einen Stand, eine Reihe zeigt + SCHRITTE -- und Zeit besteht aus Schritten. Die Stunde bekommt + zwoelf Balken (ein Zifferblatt hat zwoelf), Minute und Sekunde + sechzig. Das erste Glied gehoert dem Wert 0: Bei 0 Sekunden + leuchtet eines, bei 59 alle sechzig. Ein Ring, der bei null + voellig leer ist, sieht eine Sekunde lang aus wie ein + Ladefehler. */ + const gesamt = GLIEDER[welcher]; + /* ABRUNDEN, NICHT RUNDEN -- der Unterschied ist ein ganzer Balken. + + `Math.round` haette bei Minute und Stunde ab der HAELFTE + aufgerundet: Um 14:30 lief der Stundenring auf 2 + 0,5 = 2,5, + gerundet 3, plus eins = VIER Balken -- obwohl erst die dritte + Stunde laeuft. Dasselbe im Minutenring ab Sekunde 30. Die Uhr + war damit die halbe Zeit ueber einen Balken zu weit, und zwar + gerade dann nicht, wenn man hinsieht (zur vollen Stunde stimmte + sie). Nachgerechnet, nicht geschaetzt: 10:30 -> 11 Balken, + 14:30 -> 3, 23:59 -> 12, 00:00 -> 1. + + Bei der Sekunde macht es keinen Unterschied (sk ist ganz), bei + den anderen beiden ist es der ganze Unterschied. */ + const n = Math.min(Math.floor(anteil * gesamt) + 1, gesamt); + const muster = punktMuster(U, n, gesamt, GLIED_LAENGE[welcher]); + for (const el of lagen[welcher]) { + el.style.strokeDasharray = muster; + el.style.strokeDashoffset = '0'; } - const wert = String(U * (1 - anteil)); - for (const el of lagen[welcher]) el.style.strokeDashoffset = wert; - - const spur = spuren[welcher]; - if (!spur) return; - const s = Math.min(SCHWEIF[welcher], U * anteil); - if (s <= 0.5) { spur.style.opacity = '0'; return; } /* nichts zu zeigen */ - spur.style.opacity = ''; - spur.style.strokeDasharray = `${s} ${U - s}`; - spur.style.strokeDashoffset = String(U * (1 - anteil) + s); }; /* Der Nullpunkt der eigenen Uhr -- siehe unten bei den Koepfen. */ diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index accb9b27..e0f8ad39 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -14,10 +14,10 @@ - - - - + + + + @@ -217,10 +217,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index 19ddbebc..e2bd6032 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -140,10 +140,10 @@ - - - - - + + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index d7e8bab2..69067db4 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -149,14 +149,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index a919bfd0..ba0928bd 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -82,11 +82,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index f283cdd8..b8e1bf79 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -14,17 +14,17 @@ - - + + - - - + + + @@ -160,10 +160,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index a75592e6..b9df66bc 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -172,12 +172,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index b409f20e..3c0334c3 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -101,10 +101,10 @@ - - - - - + + + + + diff --git a/workspace/index.html b/workspace/index.html index c5dd789d..79027267 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -32,7 +32,7 @@ - + @@ -382,6 +382,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index 158401b5..a3c19415 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -331,11 +331,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index 88384fc8..fa937d00 100644 --- a/workspace/leistung.html +++ b/workspace/leistung.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -217,10 +217,10 @@ - - - - - + + + + + diff --git a/workspace/personen.html b/workspace/personen.html index dbd2eec7..9b56afb5 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -305,10 +305,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index cf829c51..6717726e 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -207,11 +207,11 @@ - - - - - - + + + + + + diff --git a/workspace/report.html b/workspace/report.html index ed103bc4..c80d2dff 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -99,11 +99,11 @@ - - - - - - + + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index 7696d00d..5b04c76f 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -132,10 +132,10 @@ - - - - - + + + + + diff --git a/workspace/start.html b/workspace/start.html index b2a9abf8..f42186a1 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -14,12 +14,12 @@ - - + + - - + + @@ -213,22 +213,56 @@ das Rot der Sekunde: Damit sind alle drei auf einen Blick zu trennen. Die Wechsel hell/dunkel bleiben, sie sind es, die Metall aus einem Strich machen. --> - - - - - - + + + + + + + + + - - - - + + + + + + + + - - - - + + + + + + @@ -286,44 +320,18 @@ - - - - - - + Entfernt statt ausgeblendet: Genau daran bin ich heute + schon einmal haengengeblieben. --> @@ -470,10 +478,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index d70c17aa..8c5f1afe 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -78,11 +78,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index b980d075..fc7cd914 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -119,10 +119,10 @@ - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index f21566f3..c7aa23b8 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -14,13 +14,13 @@ - - + + - - - + + + @@ -142,11 +142,11 @@ - + - - - - + + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index 7d98cbbf..5f5081e1 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -183,10 +183,10 @@ - - - - - + + + + +