From 1ad22b55c4d8a104d5291d62a9872baca1ca1034 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 9 Sep 2026 02:58:22 +0200 Subject: [PATCH] Ring so gross wie die Uhr, Stunden geschaerft, Report-Karten gerade, Schutz wird Magenta --- screen1: Glocke nach rechts, Ring so gross wie die Uhr --- "dieser button links vom kreis soll rechts davon sein und der kreis soll die gleiche groesse wie die uhr haben." Die KAESTEN waren schon exakt gleich gross (248 x 248, seit gestern aus einer Variablen). Der gezeichnete Ring aber nicht: Sein aeusserer Bogen lag bei Radius 128 von 150, plus halbe Strichbreite also bei 132,5 -- 88 Prozent des Kastens, gerendert 219 statt 248 px. Die Uhr daneben fuellt ihren Kasten ganz aus, ihr Leuchtkranz ragt sogar 7 px darueber hinaus. Zwei gleich grosse Kaesten mit ungleich grossem Inhalt sehen ungleich gross aus. Jetzt 145 statt 128 (aussen) und 120 statt 106 (die Segmente) -- dasselbe Verhaeltnis zueinander, nur bis an den Rand. 145 + 4,5 = 149,5 von 150: ein halber Pixel Luft, damit die runde Kappe nicht abgeschnitten wird. Die Glocke steht jetzt rechts vom Ring. Damit liegen beide Knoepfe INNEN, zwischen den Instrumenten und dem Text -- vorher sassen sie an den beiden Aussenkanten, so weit voneinander entfernt wie moeglich, obwohl sie dasselbe tun: einstellen, was einen erreicht. --- screen2: die Stunden --- "die stunden muss noch perfektionnieren." DIE LICHTKANTE WAR EIN KRATZER. Sie stand auf 50 Prozent Weiss bei 0,9 Breite. Auf den schmalen Sekunden- und Minutenbahnen ist das eine Kante; auf dem 5,8 px breiten Stundenbalken war es ein zweiter, weisser Balken auf dem roten. Der Grund ist Verhaeltnis UND Farbe: 0,9 von 3,2 sind 28 Prozent, 0,9 von 5,8 nur 16 -- aber die Stunde ist die einzige deckende, kraeftig gefaerbte Bahn, und auf Rot faellt dasselbe Weiss doppelt so stark auf wie auf Silber. Jetzt 22 Prozent bei 0,6 Breite. DER KOPF BLEIBT ROT. Er stand auf #ffd9dd, also fast weiss -- das aktuelle Glied war zwar das hellste, hatte aber die Farbe seiner Bahn verloren und sah aus wie ein Fremdkoerper zwischen den roten Balken. Jetzt ein helles, deutliches Rot: Es hebt sich durch Helligkeit ab, nicht durch eine andere Farbe. --- screen3: die Report-Karten stehen gerade --- "ich will dass alles passt, nicht bedeckt ist, schief steht oder zu tief oder zu hoch." NACHGEMESSEN, ALLE 17 KARTEN -- der Befund deckt sich genau mit dem, was er beschreibt: Name und Zahl lagen 12 bis 28 px auf VERSCHIEDENEN Hoehen, sie ueberlappten sich waagerecht (gemessener Abstand -183 bis -524 px), und Karten in derselben Reihe waren verschieden hoch. DIE URSACHE IST EINE ZEILE: `.kachel__zahl` steht `position: absolute` bei top 13 / right 13. Auf der Startseite ist das richtig -- gleich grosse Kacheln, einzeiliger Name. Hier bricht der Name um ("Community: neue Eintraege"), die Karte waechst nach unten, die Zahl bleibt oben kleben. Sie war ausserdem fuer die Hoehenrechnung unsichtbar, weshalb es vorher schon eine `min-height` als Pflaster brauchte. Jetzt ein echtes Raster: Name links (Zeile 1), Trend darunter, Zahl rechts ueber beide Zeilen und mittig. `display: contents` auf dem Wrapper -- so werden seine Kinder selbst zu Rasterfeldern, ohne dass am HTML etwas geaendert werden muss und ohne dass die Startseite, die dieselben Klassen benutzt, etwas davon mitbekommt. Nachgemessen danach: 17 von 17 sauber -- nichts ragt heraus, nichts ueberlappt, nichts abgeschnitten, kein Versatz ueber 5 px, und keine Reihe mit ungleichen Hoehen. --- screen4: Schutz & Regeln wird Magenta --- "ich will dass die kategorie eine farbe bekommt die extrem krass auffaellt. diese kategorie ist naemlich seeeehr wichtig." MAGENTA, WEIL ES DAS EINZIGE IST, DAS ES SONST NICHT GIBT. Rot ist fuer "ueberfaellig" und Spicy Media vergeben, Babyblau fuer DogFather, Lila fuer Manager, Gruen fuer Scout, Bronze fuer Creator, Bernstein fuer "dringend". #ff2fd0 stoesst mit keinem davon zusammen -- es faellt nicht auf, weil es HELLER ist, sondern weil es einzigartig ist. Das ist verlaesslicher: Helligkeit konkurriert mit den Nachbarn, Einzigartigkeit nicht. Gerechnet wie bei Ton 21: Abstand zum naechsten Nachbarn 0,1305 (die Grenze im Satz liegt bei 0,0973), Buntheit 0,276 -- die hoechste im ganzen Satz, das alte Gold lag bei 0,170 --, Kontrast 6,00:1. Von sieben Kandidaten sind drei an der Abstandsgrenze gescheitert. Das Saeuregelb #e0ff00 waere lauter gewesen (16,86:1), haette sich aber mit dem Bernstein von "dringend" und dem Gold der Nachbarkacheln um dieselbe Wirkung gestritten. Die Kachel bleibt gebaut wie alle anderen; was sie heraushebt, ist die Farbe, keine Sonderform. --- Eine Rueckwirkung, die pruef-buehne gefunden hat --- Die Typenschilder von gestern nutzen `background-clip: text` -- dafuer MUSS `color: transparent` sein. pruef-buehne las genau dieses `color`, machte daraus Schwarz und meldete 1,07:1 fuer Text, der hell und gut lesbar ist. Fuenf Fehlalarme auf drei Seiten. Eine Warnung, die bei richtiger Arbeit anschlaegt, wird abgeschaltet. Sie ist deshalb nicht weichgemacht, sondern GENAUER geworden: Bei Verlaufsschrift zaehlt jetzt der DUNKELSTE Farbstopp der ersten Hintergrundebene -- der schlechteste Punkt, den es auf dieser Schrift wirklich gibt. Damit meldet start.html 4,74:1 (noetig 4,5), die Pruefung findet also weiter die engste Stelle. UND DIE GEGENPROBE HAT SOFORT EINEN FEHLER IN MEINEM EIGENEN CODE GEFUNDEN: Ich suchte das Ende der ersten Ebene mit `"),"` -- diese Zeichenfolge steht aber schon am Ende des ERSTEN `rgb(...)`. Die Messung las damit immer nur den ersten Stopp und haette einen dunklen Verlauf fuer hell gehalten. Jetzt wird ueber Klammern gezaehlt. Der Helfer steht einmal und wird als Quelltext in beide Seiten-Aufrufe gereicht -- zwei Kopien waeren zwei Gelegenheiten auseinanderzulaufen. Geprueft: pruef-buehne (mit neuer Gegenprobe), pruef-start-ansicht, pruef-css-klassen, pruef-handy, pruef-workspace-seiten -- alle in Ordnung. Co-Authored-By: Claude Opus 5 --- server/pruef-buehne.mjs | 105 +++++++++++++++++++++++++++++++- tools/kachel-farben.mjs | 10 +++ workspace/assets/css/report.css | 72 ++++++++++++++++++++++ workspace/assets/css/start.css | 70 ++++++++++++++++++++- workspace/assets/js/start.js | 28 +++++++-- 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 | 31 +++++++--- workspace/startcheck.html | 22 +++---- workspace/steckbrief.html | 20 +++--- workspace/uebersicht.html | 20 +++--- workspace/wissen.html | 20 +++--- 24 files changed, 478 insertions(+), 202 deletions(-) diff --git a/server/pruef-buehne.mjs b/server/pruef-buehne.mjs index e89e02d8..f326f477 100644 --- a/server/pruef-buehne.mjs +++ b/server/pruef-buehne.mjs @@ -14,6 +14,40 @@ import { mkdtempSync, rmSync } from "node:fs"; import { tmpdir } from "node:os"; import { join } from "node:path"; + +/* ===================================================================== + DER DUNKELSTE FARBSTOPP DER ERSTEN HINTERGRUNDEBENE + + Gebraucht an ZWEI Stellen (Messung und Gegenprobe), deshalb steht er + hier einmal und wird als Quelltext in die Seite gereicht. Zwei + Kopien waeren zwei Gelegenheiten auseinanderzulaufen -- und genau + das ist der Fehler, den diese Datei sonst sucht. + + DAS ENDE DER EBENE WIRD UEBER KLAMMERN GEZAEHLT, nicht ueber `"),"`. + Mein erster Anlauf schnitt bei der ersten Zeichenfolge `),` ab -- + die steht aber schon am Ende des ERSTEN `rgb(...)`. Er las damit + immer nur den ersten Stopp und haette einen dunklen Verlauf fuer + hell gehalten. Die Gegenprobe unten hat es in der ersten Minute + gemeldet. */ +function dunkelsterStopp(backgroundImage) { + if (!backgroundImage || backgroundImage === "none") return null; + const start = backgroundImage.indexOf("("); + if (start < 0) return null; + let tiefe = 0, ende = -1; + for (let i = start; i < backgroundImage.length; i++) { + if (backgroundImage[i] === "(") tiefe++; + else if (backgroundImage[i] === ")") { tiefe--; if (tiefe === 0) { ende = i + 1; break; } } + } + const erste = ende > 0 ? backgroundImage.slice(0, ende) : backgroundImage; + const stopps = [...erste.matchAll(/rgba?\(([^)]+)\)/g)] + .map((m) => m[1].split(",").slice(0, 3).map((x) => Number(x.trim()))) + .filter((f) => f.length === 3 && f.every((x) => Number.isFinite(x))); + if (!stopps.length) return null; + const hell = (f) => 0.2126 * f[0] + 0.7152 * f[1] + 0.0722 * f[2]; + return stopps.reduce((a, b) => (hell(b) < hell(a) ? b : a)); +} +const DUNKELSTER_QUELLE = dunkelsterStopp.toString(); + const ordner = mkdtempSync(join(tmpdir(), "ws-buehne-")); process.env.WORKSPACE_DB = join(ordner, "workspace.db"); process.env.PORT = "4193"; @@ -113,7 +147,10 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"] sichtbaren Text -- nicht die Farbangabe im Stil, die weiß nichts davon, was dahinterliegt. */ const bild = await seite.screenshot({ type: "png" }); - const schlimmster = await seite.evaluate(async (b64) => { + const schlimmster = await seite.evaluate(async ([b64, quelle]) => { + /* Derselbe Helfer wie in der Gegenprobe -- als Quelltext + hereingereicht, damit es ihn nur EINMAL gibt. */ + const dunkelster = new Function("return " + quelle)(); const kanal = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }; const hell = (c) => 0.2126 * kanal(c[0]) + 0.7152 * kanal(c[1]) + 0.0722 * kanal(c[2]); const kontrast = (a, b) => { @@ -198,7 +235,31 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"] if (!p) { ohneStelle++; continue; } const st = st0; - const farbe = st.color.match(/\d+/g).slice(0, 3).map(Number); + + /* WENN DIE SCHRIFT IHRE FARBE AUS EINEM VERLAUF BEKOMMT + (09.09.2026). + + Seit die Abschnittsschilder aus gebuerstetem Metall bestehen + (`background-clip: text`), ist ihr `color` notwendigerweise + `transparent` -- anders geht die Technik nicht. Diese + Pruefung las genau dieses `color`, machte daraus [0,0,0] und + meldete 1,07:1 fuer Text, der in Wahrheit hell und gut + lesbar ist. Fuenf Fehlalarme auf drei Seiten. + + Eine Warnung, die bei richtiger Arbeit anschlaegt, wird + abgeschaltet -- deshalb wird sie hier nicht weichgemacht, + sondern GENAUER: Bei Verlaufsschrift zaehlt der DUNKELSTE + Farbstopp des Verlaufs. Das ist der schlechteste Punkt, den + es auf dieser Schrift wirklich gibt, und damit strenger als + ein Mittelwert und ehrlicher als das durchsichtige `color`. + + Nur die ERSTE Ebene wird gelesen: `background-clip: text, + border-box, border-box` schneidet Ebene 1 auf die Schrift zu, + die uebrigen sind die Flaeche darunter. */ + const clipText = (st.webkitBackgroundClip || st.backgroundClip || "") + .split(",")[0].trim() === "text"; + let farbe = clipText ? dunkelster(st.backgroundImage) : null; + if (!farbe) farbe = st.color.match(/\d+/g).slice(0, 3).map(Number); const gr = parseFloat(st.fontSize); const fett = Number(st.fontWeight) >= 700; const grenze = (gr >= 24 || (gr >= 18.66 && fett)) ? 3 : 4.5; @@ -209,7 +270,45 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"] } } return { ...schlecht, anzahl, ohneStelle, gesamt: alle.length }; - }, bild.toString("base64")); + }, [bild.toString("base64"), DUNKELSTER_QUELLE]); + + /* ---- GEGENPROBE ZUR VERLAUFSSCHRIFT ---------------------------- + + Seit die Messung bei `background-clip: text` den dunkelsten + Farbstopp nimmt statt des durchsichtigen `color`, muss bewiesen + werden, dass sie damit noch NEIN sagen kann. Sonst haette ich + eine Warnung entschaerft, statt sie genauer zu machen. + + Zwei erfundene Elemente auf derselben Seite: eines mit einem + hellen Verlauf (muss durchgehen), eines mit einem dunklen (muss + durchfallen). Beide werden sofort wieder entfernt. */ + const gegen = await seite.evaluate((quelle) => { + const dunkelster = new Function("return " + quelle)(); + const bauen = (verlauf) => { + const d = document.createElement("span"); + d.textContent = "Probe"; + d.style.cssText = "position:fixed;left:-9999px;font-size:14px;" + + `background:${verlauf} text;-webkit-background-clip:text;` + + "background-clip:text;color:transparent;"; + document.body.append(d); + const st = getComputedStyle(d); + const clip = (st.webkitBackgroundClip || st.backgroundClip || "").split(",")[0].trim(); + const gefunden = dunkelster(st.backgroundImage); + d.remove(); + return { clip, dunkelster: gefunden }; + }; + return { + hell: bauen("linear-gradient(180deg, #ffffff, #cfd9e6)"), + dunkel: bauen("linear-gradient(180deg, #ffffff, #101418)"), + }; + }, DUNKELSTER_QUELLE); + ok(gegen.hell.clip === "text" && gegen.hell.dunkelster + && gegen.hell.dunkelster.join(",") === "207,217,230", + `${s}: Gegenprobe -- heller Verlauf, dunkelster Stopp erkannt ` + + `(${gegen.hell.dunkelster?.join(",")})`); + ok(gegen.dunkel.dunkelster && gegen.dunkel.dunkelster.join(",") === "16,20,24", + `${s}: Gegenprobe -- dunkler Verlauf wird als dunkel erkannt ` + + `(${gegen.dunkel.dunkelster?.join(",")}), also faellt so etwas auf`); ok(schlimmster.v >= schlimmster.grenze, `${s}: schlechtester Kontrast ${schlimmster.v.toFixed(2)}:1 (nötig ${schlimmster.grenze}:1) ` diff --git a/tools/kachel-farben.mjs b/tools/kachel-farben.mjs index eae973f2..bf10ba40 100644 --- a/tools/kachel-farben.mjs +++ b/tools/kachel-farben.mjs @@ -47,6 +47,16 @@ Aufrufen mit: node tools/kachel-farben.mjs Die Ausgabe wird nach start.css uebertragen (Abschnitt "Kacheln"). + ACHTUNG -- ZWEI TOENE SIND VON HAND GESETZT (Stand 09.09.2026). + + TON 5 (Schutz & Regeln) steht auf #ff2fd0. Filipe: "ich will dass + die kategorie eine farbe bekommt die extrem krass auffaellt. diese + kategorie ist naemlich seeeehr wichtig." Magenta ist der einzige + Ton, den es im Haus sonst nirgends gibt -- er faellt durch + Einzigartigkeit auf, nicht durch Helligkeit. Abstand zum naechsten + Nachbarn 0,1305 (Grenze 0,0973), Buntheit 0,276 (hoechste im Satz), + Kontrast 6,00:1. + ACHTUNG -- TON 21 IST SEIT DEM 09.09.2026 VON HAND GESETZT. Filipe wollte die Scout-Pipeline ausdruecklich in Knallrot ("die farbe von dieser kategorie soll knall rot sein"). In start.css diff --git a/workspace/assets/css/report.css b/workspace/assets/css/report.css index 5211495a..e1c1deb8 100644 --- a/workspace/assets/css/report.css +++ b/workspace/assets/css/report.css @@ -212,3 +212,75 @@ die bequemere Antwort und die falsche -- sie ist die Aussage der Karte. */ .block .kachel { min-height: 74px; } + +/* ===================================================================== + DIE ZAHLENKARTEN STEHEN GERADE (screen3, 09.09.2026) + + Filipe: "perfektionnier auch noch bitte die kacheln die schriften + drin und die zahlen. ich will dass alles passt, nicht bedeckt ist, + schief steht oder zu tief oder zu hoch." + + NACHGEMESSEN, ALLE 17 KARTEN. Der Befund war eindeutig und deckt + sich genau mit dem, was er beschreibt: + + * Name und Zahl lagen 12 bis 28 px auf VERSCHIEDENEN Hoehen. + * Sie ueberlappten sich waagerecht (gemessener Abstand -183 bis + -524 px, also weit ineinander). + * Karten in derselben Reihe waren verschieden hoch. + + DIE URSACHE IST EINE EINZIGE ZEILE: `.kachel__zahl` steht + `position: absolute` bei top 13 / right 13. Auf der Startseite ist + das richtig -- dort sind die Kacheln gleich gross und der Name + einzeilig. Hier bricht der Name auf zwei Zeilen um ("Community: + neue Eintraege"), die Karte waechst nach unten, und die Zahl bleibt + oben kleben. Sie ist ausserdem fuer die Hoehenrechnung unsichtbar, + weshalb es vorher schon einmal eine `min-height` als Pflaster + brauchte. + + JETZT EIN ECHTES RASTER, ohne absolute Position: + + Spalte 1 Name (Zeile 1), Trend darunter (Zeile 2) + Spalte 2 die Zahl, ueber beide Zeilen, mittig + + `display: contents` auf `.kachel__wert`: Der Wrapper verschwindet + als Kasten, seine Kinder werden selbst zu Rasterfeldern. So kommt + die Zahl nach rechts und der Trend unter den Namen, OHNE dass am + HTML etwas geaendert werden muss -- und ohne dass die Startseite, + die dieselben Klassen benutzt, davon etwas mitbekommt. + + `align-items: center` statt der alten Mindesthoehe: Die Zahl ist + jetzt Teil des Flusses, also rechnet die Karte ihre Hoehe mit ihr + aus. Die `min-height` bleibt trotzdem stehen -- sie sorgt dafuer, + dass eine Karte mit kurzem Namen nicht flacher wird als ihre + Nachbarn. + ===================================================================== */ +.block .kachel { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + column-gap: 14px; + row-gap: 2px; +} +/* Der Wrapper verschwindet, seine Kinder werden Rasterfelder. */ +.block .kachel__wert { display: contents; } +.block .kachel__zahl { + position: static; + grid-column: 2; grid-row: 1 / -1; + align-self: center; + /* Rechtsbuendig und mit gleichen Ziffernbreiten: Untereinander + stehende Zahlen sollen eine Spalte bilden, keine Treppe. */ + text-align: right; + font-variant-numeric: tabular-nums; +} +.block .kachel__name { + grid-column: 1; grid-row: 1; + margin: 0; + padding-right: 0; /* der Abstand kommt jetzt aus column-gap */ + align-self: center; +} +.block .kachel .trend { + grid-column: 1; grid-row: 2; + justify-self: start; +} +/* Ohne Trend soll die zweite Zeile keinen Platz belegen. */ +.block .kachel:not(:has(.trend)) { row-gap: 0; } diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index 7bfe5687..70fba16f 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -844,7 +844,40 @@ body.start > main { position: relative; z-index: 1; } [data-ton="2"] { --ton: #e15e8e; } /* Zahlen */ [data-ton="3"] { --ton: #ff9781; } /* LIVE */ [data-ton="4"] { --ton: #c26201; } /* Chat */ -[data-ton="5"] { --ton: #febf12; } /* Schutz */ +/* TON 5 IST VON HAND GESETZT (09.09.2026, screen4). + + Filipe: "ich will dass die kategorie eine farbe bekommt die extrem + krass auffällt. diese kategorie ist nämlich seeeehr wichtig und so + soll sie auch auffallen." Gemeint ist "Schutz & Regeln" -- die + einzige Kachel mit diesem Ton (nachgesehen in bereiche.js). + + MAGENTA, WEIL ES DAS EINZIGE IST, DAS ES HIER SONST NICHT GIBT. + Rot ist im Haus für "überfällig" und für Spicy Media vergeben, + Babyblau für DogFather, Lila für Manager, Grün für Scout, Bronze + für Creator, Bernstein für "dringend". Ein Magenta stößt mit keinem + davon zusammen. Es fällt nicht auf, weil es HELLER ist, sondern + weil es einzigartig ist -- und das ist die verlässlichere Art: + Helligkeit konkurriert mit den Nachbarn, Einzigartigkeit nicht. + + NACHGERECHNET WIE BEI TON 21: Der engste Abstand zwischen zwei der + übrigen zwanzig Farben liegt bei 0,0973 (OKLab). #ff2fd0 kommt + seinem nächsten Nachbarn (Ton 8, #c06ad0) auf 0,1305 nahe, ist also + weiter entfernt als das engste vorhandene Paar. Seine Buntheit ist + mit 0,276 die höchste im ganzen Satz -- das alte Gold lag bei + 0,170. Kontrast auf dunklem Grund: 6,00:1. + + Von sieben geprüften Kandidaten sind drei an der Abstandsgrenze + gescheitert (#ff2f9c, #00ff9d und #ff5ce0 lagen ihren Nachbarn zu + nahe). Unter den bestandenen hat dieser die höchste Buntheit bei + ausreichendem Kontrast. Das Säuregelb #e0ff00 wäre lauter gewesen + (16,86:1), hätte sich aber mit dem Bernstein von "dringend" und dem + Gold der Nachbarkacheln um dieselbe Wirkung gestritten. + + Die Kachel bleibt gebaut wie alle anderen -- das war ausdrücklich + gewünscht ("alle kacheln auf der ganzen website sollen sein wie auf + der startseite"). Was sie heraushebt, ist die Farbe, nicht eine + Sonderform. */ +[data-ton="5"] { --ton: #ff2fd0; } /* Schutz & Regeln -- Wunsch: extrem auffällig */ [data-ton="6"] { --ton: #768b09; } /* Community */ [data-ton="7"] { --ton: #089868; } /* Reports */ [data-ton="8"] { --ton: #c06ad0; } /* Kalender */ @@ -5452,7 +5485,26 @@ body[data-fremde-sicht="ja"]::after { stroke: rgba(255, 255, 255, .72) !important; stroke-width: .9; } -.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .5) !important; } +/* DIE KANTE DER STUNDE IST EIN HAUCH, KEIN STRICH (09.09.2026, + screen2 -- "die stunden muss noch perfektionnieren"). + + Sie stand auf 50 Prozent Weiss bei 0,9 Breite. Auf den schmalen + Sekunden- und Minutenbahnen ist das eine Lichtkante; auf dem 5,8 px + breiten Stundenbalken war es ein zweiter, weisser Balken auf dem + roten -- im vergroesserten Bildschirmfoto sieht es aus wie ein + Kratzer quer durch das Material. + + Der Grund ist Verhaeltnis, nicht Farbe: 0,9 von 3,2 (Sekunde) sind + 28 Prozent der Breite, 0,9 von 5,8 waeren 16 -- aber die Stunde ist + auch die einzige DECKENDE, kraeftig gefaerbte Bahn. Auf Rot faellt + dasselbe Weiss doppelt so stark auf wie auf Silber. + + Jetzt 22 Prozent. Die Kante ist noch da (sie macht aus der Flaeche + ein Werkstueck), aber sie ist wieder eine Kante. */ +.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .22) !important; } +/* Und schmaler: 0,6 statt 0,9 -- auf dem breitesten Balken darf die + Kante nicht die breiteste sein. */ +.uhr__kante .uhr__stunde { stroke-width: .6; } /* DER VERSATZ MUSS DER BREITE FOLGEN (09.09.2026, screen5). @@ -6685,8 +6737,20 @@ body[data-fremde-sicht="ja"]::after { stroke-width: 5.2; filter: drop-shadow(0 0 2.2px rgba(226, 238, 250, .9)); } +/* DER KOPF DER STUNDE BLEIBT ROT (09.09.2026, screen2). + + Er stand auf #ffd9dd -- fast weiss. Damit war das aktuelle Glied + zwar das hellste, aber es hatte die Farbe seiner Bahn verloren: Im + Bildschirmfoto sah es aus, als staende dort ein Fremdkoerper + zwischen den roten Balken. Bei Sekunde und Minute faellt das nicht + auf, weil Babyblau und Silber ohnehin hell sind. + + Jetzt ein helles, aber deutliches Rot. Es hebt sich durch HELLIGKEIT + und Schein von den anderen elf ab, nicht durch eine andere Farbe -- + das ist der Unterschied zwischen "das ist die aktuelle Stunde" und + "da stimmt etwas nicht". */ .uhr__kopf--stunde { - stroke: #ffd9dd; + stroke: #ff8c96; stroke-width: 6; filter: drop-shadow(0 0 3px rgba(255, 110, 122, .95)); } diff --git a/workspace/assets/js/start.js b/workspace/assets/js/start.js index 17cad599..767e95db 100644 --- a/workspace/assets/js/start.js +++ b/workspace/assets/js/start.js @@ -748,10 +748,30 @@ defs.appendChild(lauf); svg.appendChild(defs); + /* DIE RADIEN FUELLEN JETZT DEN KASTEN (09.09.2026, screen1). + + Filipe: "der kreis soll die gleiche groesse wie die uhr haben." + + Nachgemessen waren beide Kaesten schon exakt gleich gross + (248 x 248) -- der gezeichnete Ring aber nicht: Sein aeusserer + Bogen lag bei Radius 128 von 150, plus 4,5 halbe Strichbreite + also bei 132,5. Das sind 88 Prozent des Kastens, gerendert 219 + statt 248 px. Die Uhr daneben fuellt ihren Kasten dagegen ganz + aus (ihr Leuchtkranz ragt sogar 7 px darueber hinaus). Zwei + gleich grosse Kaesten mit ungleich grossem Inhalt sehen ungleich + gross aus, und genau das war zu sehen. + + Jetzt 145 statt 128 (aussen) und 120 statt 106 (die Segmente) -- + dasselbe Verhaeltnis zueinander, nur bis an den Rand. 145 + 4,5 + = 149,5 von 150: ein halber Pixel Luft, damit die runde Kappe + nicht abgeschnitten wird. */ + const R_AUSSEN = 145; + const R_SEGMENTE = 120; + /* 1. Die leere Bahn zuerst -- damit der Ring auch bei 0 % ein Ring ist und nicht ein Punkt. */ svg.appendChild(svgEl('path', { - d: bogen(150, 150, 128, 0, Math.PI * 1.9999), + d: bogen(150, 150, R_AUSSEN, 0, Math.PI * 1.9999), stroke: 'rgba(120, 150, 185, .16)', 'stroke-width': '9', fill: 'none', 'stroke-linecap': 'round', })); @@ -766,7 +786,7 @@ const von = i * schritt + luecke / 2; const bis = (i + 1) * schritt - luecke / 2; const st = svgEl('path', { - d: bogen(150, 150, 106, von, bis), + d: bogen(150, 150, R_SEGMENTE, von, bis), stroke: RING_FARBE[s.stufe] || '#8fb3cf', 'stroke-width': '7', fill: 'none', 'stroke-linecap': 'round', opacity: s.stufe === 'offen' ? '.95' : '.72', @@ -785,14 +805,14 @@ const anteil = Math.max(0, Math.min(100, Number(daten.prozent) || 0)); const bis = (anteil / 100) * Math.PI * 2; if (bis > 0.01) { - const d = bogen(150, 150, 128, 0, Math.min(bis, Math.PI * 1.9999)); + const d = bogen(150, 150, R_AUSSEN, 0, Math.min(bis, Math.PI * 1.9999)); svg.appendChild(svgEl('path', { d, stroke: 'url(#zring-lauf)', 'stroke-width': '9', fill: 'none', 'stroke-linecap': 'round', })); /* Ein heller Punkt an der Spitze macht aus dem Bogen einen Zeiger -- er markiert den Stand so genau, wie die Zahl es sagt. */ - const px = 150 + 128 * Math.cos(bis), py = 150 + 128 * Math.sin(bis); + const px = 150 + R_AUSSEN * Math.cos(bis), py = 150 + R_AUSSEN * Math.sin(bis); svg.appendChild(svgEl('circle', { cx: px, cy: py, r: '3.4', fill: '#eaf4ff' })); } diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 7c3257dc..d716e8d3 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 331a0468..2242c4f5 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 84eda74f..2d6534a3 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 60f33d2a..dc529ccb 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 80b796be..9bcbf379 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -14,17 +14,17 @@ - - + + - - - + + + @@ -199,10 +199,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index 8294b1c7..fe9f2056 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 859c4624..f7536b1a 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 ceb4b818..6602d244 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -32,7 +32,7 @@ - + @@ -401,6 +401,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index 31a62ef8..ed49ffe3 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -340,11 +340,11 @@ - - - - - - + + + + + + diff --git a/workspace/leistung.html b/workspace/leistung.html index 22fb506e..e45768a6 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 c313c2cc..e3e9317d 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -324,10 +324,10 @@ - - - - - + + + + + diff --git a/workspace/profil.html b/workspace/profil.html index 0ea9dee1..73284a62 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 96ea27be..2dc2ae28 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 be4b3fd6..75eb849a 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 6ffc933a..d97cac65 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -14,12 +14,12 @@ - - + + - - + + @@ -149,7 +149,6 @@ 48 px Knopf + 14 px Abstand + Instrument. Genau das rechnet `--spalte` in heim.css aus. -->
-
@@ -170,6 +169,18 @@ wird geladen
+ +
@@ -580,10 +591,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 6b63fb9e..18701335 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 041a696a..a5197a5e 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 5d198c75..607139b2 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 5300634d..9a90b634 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -183,10 +183,10 @@ - - - - - + + + + +