DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sechs Wuensche: Hintergruende, Knopfverteilung, Universum, Uhrkoepfe, Knallrot

Browse Source 
--- screen3 + screen1: die Hintergruende draengeln nicht mehr ---

"die hintergrunde sollen ueberall so sein dass die sich nicht in den
vordergrund draengeln." / "mach den hintergrund von dieser kachel
dunkler, so dass die die kacheln drin viel mehr auffallen."

`--raster` stand auf .26 Deckkraft -- auf dunkler Flaeche kein Hauch
mehr, sondern ein gezeichnetes Gitter. Im Tagdialog lief es sichtbar
durch die Ueberschrift, in den Sammelkacheln stand es VOR den Karten
darin. Jetzt .09: Man sieht eine Struktur, man zaehlt keine Linien.
Eine Zahl fuer das ganze Haus -- sie steht einmal in module.css und
wird an fuenf Stellen benutzt.

Die Anlasskachel im Kalender lag mit rgba(19,26,38,.88) auf demselben
Helligkeitsniveau wie die Karten darin: keine Vitrine, sondern eine
dritte Flaeche gleicher Lautstaerke. Jetzt fast schwarz. An den Karten
musste dafuer nichts geaendert werden -- der Abstand entsteht von
selbst.

--- screen2: ein Knopf wandert nach links ---

"eins von diesen buttons soll links bei dem anderen kreis sein."

Die GLOCKE geht nach links zum Ring, der WECKER bleibt rechts bei der
Uhr. Das ist nicht ausgewuerfelt: Der Wecker ist eine Uhrzeit. Die
Glocke entscheidet, ob man ueberhaupt etwas ueber sein Team erfaehrt --
und der Ring links zeigt genau das.

Die Kachel ist damit spiegelsymmetrisch belegt: 48 px Knopf + 14 px
Abstand + 248 px Instrument auf beiden Seiten. Genau das rechnet
`--spalte`. Die Zentrierung des Rings ist weggefallen -- sie war noetig,
solange er allein in einer fuer Instrument PLUS Knopf bemessenen Spalte
stand. Der reservierte Platz schrumpft von 104 auf 48 px je Seite; die
Begruendung fuer das Reservieren bleibt: Ein Platz, der erst mit der
Antwort entsteht, laesst die Zeile springen.

--- screen4: zwei Chilis und zwei Huskys dazu ---

"setz in den hintergrund noch 1-2 peperonis und dan das logo von
dogfather, also nur den husky."

DER HUSKY IST EINE MASKE, KEIN BILD. Die Datei ist schwarz-weiss und
freigestellt (nachgemessen: 49 % durchsichtig). Als Hintergrundbild bei
15 % verschwaenden die schwarzen Flaechen im dunklen Grund und uebrig
blieben die hellen -- ein zerrissener Umriss, kein Hund. Als Maske
ueber einer Farbflaeche wird daraus eine geschlossene Silhouette in
DogFathers Babyblau. Im Universum schweben jetzt beide Marken in ihren
beiden Farben: sieben Chilis rot, zwei Huskys blau.

--- screen5: die Punkte sind ersetzt, das letzte Glied leuchtet ---

"ich will dass du die punkte ersetzt und immer der letzte soll mehr
strahlen oder so." / "alles ist mega ausser die stunden muss du noch
perfektionnieren."

DIE DREI UMLAUFENDEN PERLEN SIND WEG -- samt 60 Zeilen Rechnung. Sie
waren ein zweites Ding an einer zweiten Stelle: eigene Uhr ab dem
ersten Takt (weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab),
eigener Startwinkel je Bahn, drei Winkel, die die kleineren Einheiten
anteilig mittragen mussten. All das war noetig, WEIL der Kopf neben der
Reihe herlief statt Teil von ihr zu sein. Genau deshalb trugen sie am
08.09. noch die alten Farben, als die Bahnen getauscht wurden.

Jetzt zeichnet eine zweite SVG-Lage genau EIN Glied heller -- dasselbe,
das die Reihe darunter zuletzt gesetzt hat, aus denselben Zahlen. Sie
kann gar nicht danebenstehen. Heller statt groesser: Waere der Kopf
groesser, waere er ein Fremdkoerper in der Reihe.

DIE STUNDEN WAREN BREITER ALS LANG -- 5,5 lang bei 7 breit, also 0,79:1.
Ein Segment, das breiter ist als lang, liest sich als Klotz quer auf
der Bahn statt als Balken entlang. Und weil die Kantenlage nur 0,4
versetzt ist, lief der 0,9 breite Lichtstrich MITTEN DURCH jeden Balken
statt an seiner Kante. Jetzt 10 lang bei 5,8 breit (1,7:1), und der
Kantenversatz ist nach Bandbreite gestaffelt: (Breite - 0,9) / 2, also
0,75 / 1,65 / 2,05 zusaetzlich zur Gruppe.

--- screen6: die Scout-Pipeline wird knallrot ---

"die farbe von dieser kategorie soll knall rot sein."

Die anderen zwanzig Kachelfarben sind gerechnet (OKLab, groesstmoeglicher
Abstand). Diese eine ist gewuenscht -- und wurde deshalb GEGEN den Satz
geprueft statt eingetragen: Der engste vorhandene Abstand liegt bei
0,0973. #ff1f2e kommt seinem naechsten Nachbarn auf 0,1228 nahe, ist
also weiter entfernt als das engste vorhandene Paar. Kontrast 5,01:1
(noetig 4,5). Von sechs geprueften Rottoenen der mit dem groessten
Abstand UND genug Kontrast.

tools/kachel-farben.mjs weiss jetzt davon: Ein kuenftiger Lauf wuerde
wieder Rosa vorschlagen, und das waere eine stille Ruecknahme einer
ausdruecklichen Entscheidung.

--- Ein Messfehler, der festgehalten gehoert ---

Beim Pruefen von screen4 meldete meine Foto-Methode vier Beschriftungen
unter 4,5:1 -- bei einem Verlust von 0,00 bis 0,15 durch das Universum.
Dass die Ursache nicht das Universum sein konnte, stand damit schon in
den Zahlen. Exakt gerechnet (Vordergrundfarbe gegen die tatsaechliche
Flaeche darunter) liegen dieselben Texte bei 9,13:1 bis 10,76:1.

Die Foto-Methode mittelt ueber alle helleren Bildpunkte, und bei
duenner Grossbuchstabenschrift ist die Haelfte davon halb
ausgeleuchtete Kantenpunkte. Fuer grosse Schrift taugt sie, fuer kleine
Versalien meldet sie systematisch zu wenig. Haette ich ihr geglaubt,
haette ich vier Farben "repariert", die in Ordnung sind.

Geprueft: pruef-start-ansicht, pruef-css-klassen, pruef-kalender,
pruef-buehne, pruef-handy, pruef-workspace-seiten, pruef-tagesruf --
alle in Ordnung. Dazu Ring und Uhr auf 248/248 nachgemessen, die
Kopf-Muster gegen die Uhrzeit nachgerechnet (01:24:59 -> Sekunde bei
281,115, Minute bei 96,76, Stunde bei 16,493) und die Kachelfarbe gegen
alle zwanzig anderen in OKLab geprueft.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-09 01:33:59 +02:00
co-authored by Claude Opus 5
parent ef6bf0d011
commit cccafd2c31
27 changed files with 574 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ruf.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 KiB

tools/kachel-farben.mjs
+15
View File
@@ -46,6 +46,21 @@
Aufrufen mit: node tools/kachel-farben.mjs
Die Ausgabe wird nach start.css uebertragen (Abschnitt "Kacheln").
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
steht dort #ff1f2e; dieses Werkzeug wuerde beim naechsten Lauf
wieder Rosa vorschlagen.
NICHT EINFACH UEBERNEHMEN, sondern die Ausgabe fuer Ton 21
verwerfen. Der Wunsch ist geprueft und nicht willkuerlich: #ff1f2e
liegt in OKLab 0,1228 von seinem naechsten Nachbarn entfernt --
weiter als das engste vorhandene Paar im Satz (0,0973) -- und hat
5,01:1 Kontrast. Wer den Satz neu rechnet, muss diese Farbe als
FESTEN Punkt vorgeben und die uebrigen zwanzig darum herum
verteilen; sonst ist der naechste Lauf eine stille Ruecknahme einer
ausdruecklichen Entscheidung.
=================================================================== */
/* ---------- Farbenlehre ------------------------------------------- */
workspace/assets/css/heim.css
+26 -6
View File
@@ -482,10 +482,6 @@
links und rechts, dazwischen der Text. */
.zring {
position: relative; aspect-ratio: 1; width: 100%; max-width: var(--instrument);
/* In der breiteren Spalte mittig -- sonst klebte er links, waehrend
die Uhr rechts an ihrer Kante steht, und die Kachel saehe schief
aus, ohne dass eine Zahl falsch waere. */
justify-self: center;
margin: 0 auto;
}
.zring__bild {
@@ -991,6 +987,20 @@
.uhr__zeit { font-size: calc(var(--instrument) * .168); }
.uhr__sek { font-size: calc(var(--instrument) * .068); }
/* LINKS: KNOPF UND RING, spiegelbildlich zur Uhr rechts (screen2,
09.09.2026). Dieselben 14 px Abstand, dieselben 48 px Knopfbreite --
deshalb geht `--spalte` auf beiden Seiten genau auf.
Die Zentrierung des Rings ist damit WEG, und das ist kein Versehen:
Sie war noetig, solange er allein in einer Spalte stand, die fuer
Instrument PLUS Knopf bemessen ist. Jetzt fuellt er sie mit seinem
Knopf zusammen aus -- eine zusaetzliche Zentrierung wuerde ihn
wieder verschieben. */
.willkommen__links {
display: flex; align-items: center; gap: 14px;
min-width: 0;
}
.glocke-platz {
/* ZWEI KNOEPFE UEBEREINANDER, und der Platz gilt fuer beide.
@@ -1001,8 +1011,18 @@
auf 46 stehen lassen, waere genau der Sprung zurueckgekommen, gegen
den der Absatz darueber geschrieben wurde: Der zweite Knopf haengt
an derselben Abfrage wie der erste. */
width: 48px; height: 104px; flex: none;
display: flex; flex-direction: column; align-items: center; gap: 8px;
/* EIN KNOPF JE SEITE, nicht mehr zwei uebereinander.
Bis zum 09.09.2026 standen Glocke und Tagesruf beide rechts, und
der Platz war 104 px hoch reserviert (2 x 48 + 8 Abstand). Seit
die Glocke nach links gewandert ist, traegt jede Seite einen --
also 48 px. Die Begruendung fuer das RESERVIEREN bleibt
unveraendert gueltig: Beide Knoepfe haengen an einer Abfrage, und
ein Platz, der erst mit der Antwort entsteht, laesst die Zeile
springen. Man zielt auf etwas, und im Moment des Klicks rutscht
es weg. */
width: 48px; height: 48px; flex: none;
display: flex; flex-direction: column; align-items: center;
position: relative;
}
workspace/assets/css/kalender.css
+16 -1
View File
@@ -1308,9 +1308,24 @@
.k-anlasskachel {
margin: 0 0 24px;
padding: 18px 20px 6px;
/* DUNKLER ALS DIE KARTEN DARIN (09.09.2026, screen1).
Filipe: "mach den hintergrund von dieser kachel dunkler, so dass
die die kacheln drin viel mehr auffallen."
Das ist die Aufgabe einer Sammelkachel und war hier falsch herum:
Sie lag mit rgba(19,26,38,.88) auf demselben Helligkeitsniveau wie
die Anlasskarten darin -- damit war sie nicht der Untergrund,
sondern eine dritte Flaeche gleicher Lautstaerke. Eine Vitrine ist
dunkler als das, was darin steht; sonst sieht man die Vitrine.
Jetzt fast schwarz und praktisch deckend (.97/.99). Die Karten
darin behalten ihre Helligkeit unveraendert -- der Abstand
zwischen beiden entsteht dadurch von selbst, ohne dass an den
Karten etwas geaendert werden musste. */
background:
var(--raster),
linear-gradient(178deg, rgba(19, 26, 38, .88), rgba(10, 14, 22, .93));
linear-gradient(178deg, rgba(9, 13, 20, .97), rgba(4, 7, 12, .99));
}
.k-anlasskachel:not(:has(> section:not([hidden]))) { display: none; }
/* Die Abschnitte darin tragen nur noch ihre Ueberschrift -- die
workspace/assets/css/module.css
+22 -2
View File
@@ -83,9 +83,29 @@
/* Die Schräge steht als Größe da, damit Silhouette, Kantenlicht und
Eckwinkel garantiert dieselbe benutzen. */
--fase: 18px;
/* DAS RASTER TRITT ZURUECK (09.09.2026, screen3).
Filipe: "die hintergrunde sollen ueberall so sein dass die sich
nicht in den vordergrund draengeln."
Es stand auf .26 Deckkraft. Das ist auf einer dunklen Flaeche kein
Hauch mehr, sondern ein gezeichnetes Gitter -- im Tagdialog lief es
sichtbar durch die Ueberschrift, in den Sammelkacheln stand es vor
den Karten darin. Ein Hintergrund, den man LIEST, ist kein
Hintergrund.
Jetzt .09. Das ist der Wert, bei dem man aus einem Meter Abstand
eine Struktur SIEHT, aber keine Linien ZAEHLT -- und genau das ist
der Unterschied zwischen Material und Muster. Dieselbe Ueberlegung
wie beim Kohlefasergewebe der Zentrale, das bei drei Prozent liegt.
EINE ZAHL FUER DAS GANZE HAUS: `--raster` steht hier einmal und
wird an 20 Stellen benutzt. Wer es leiser will, aendert diese eine
Zeile -- deshalb war es auch richtig, es nicht an jeder Kachel
einzeln nachzuziehen. */
--raster:
repeating-linear-gradient(0deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px),
repeating-linear-gradient(90deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px);
repeating-linear-gradient(0deg, rgba(150, 186, 220, .09) 0 1px, transparent 1px 26px),
repeating-linear-gradient(90deg, rgba(150, 186, 220, .09) 0 1px, transparent 1px 26px);
}
/* MODULLISTE */
workspace/assets/css/start.css
+150 -59
View File
@@ -860,7 +860,24 @@ body.start > main { position: relative; z-index: 1; }
[data-ton="18"] { --ton: #9299fd; } /* Automationen */
[data-ton="19"] { --ton: #796ce0; } /* Dateien */
[data-ton="20"] { --ton: #fc88db; } /* Creator-Profile */
[data-ton="21"] { --ton: #fdb0d2; } /* Scout */
/* TON 21 IST VON HAND GESETZT (09.09.2026, screen6).
Filipe: "die farbe von dieser kategorie soll knall rot sein."
Gemeint ist die Scout-Pipeline.
Die anderen zwanzig sind gerechnet (tools/kachel-farben.mjs, auf
groesstmoeglichen Abstand in OKLab). Diese eine ist gewuenscht --
und deshalb wurde sie GEGEN den Satz geprueft statt einfach
eingetragen: Der kleinste Abstand zwischen zwei der 21 Farben liegt
bei 0,0973. #ff1f2e kommt seinem naechsten Nachbarn (Ton 2,
#e15e8e) auf 0,1228 nahe -- also weiter entfernt als das engste
vorhandene Paar. Der Satz wird durch diese Farbe nicht schlechter,
er wird an dieser Stelle sogar eindeutiger.
Kontrast auf dem dunklen Grund: 5,01:1 (noetig 4,5). Von sechs
geprueften Rottoenen hat dieser den groessten Abstand UND genug
Kontrast -- deshalb dieser und nicht der erstbeste. */
[data-ton="21"] { --ton: #ff1f2e; } /* Scout-Pipeline -- Wunsch: knallrot */
/* Rückfallwert für alles, was einen Ton braucht, aber keine Nummer hat.
Steht bewusst in :where() -- damit zählt die Zeile beim Wettstreit der
@@ -5263,12 +5280,6 @@ body[data-fremde-sicht="ja"]::after {
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);
}
/* 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
@@ -5282,46 +5293,15 @@ body[data-fremde-sicht="ja"]::after {
/* 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%, #d8efff 34%, #7ec8f2 70%, #1d5a80 100%);
box-shadow:
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);
}
/* 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 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. */
.uhr__perle { transition: none; }
}
@media (forced-colors: active) {
.uhr__zwoelf, .uhr__perle { display: none; }
.uhr__schatten, .uhr__kante { display: none; }
}
@@ -5474,6 +5454,37 @@ body[data-fremde-sicht="ja"]::after {
}
.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .5) !important; }
/* DER VERSATZ MUSS DER BREITE FOLGEN (09.09.2026, screen5).
Die Kantenlage liegt als Gruppe 0,4 Einheiten hoeher als die Bahn
darunter. Das war richtig, solange alle drei Baender aehnlich schmal
waren. Inzwischen sind sie 3,2 / 5 / 5,8 breit -- und ein 0,9
breiter Lichtstrich, der nur 0,4 versetzt ist, liegt auf einem
5,8er Balken nicht auf der KANTE, sondern MITTEN DRIN. Im
Bildschirmfoto lief ein heller Streifen quer durch jeden roten
Stundenbalken; das war der Rest, den Filipe an den Stunden gestoert
hat.
Damit der Strich die Kante gerade noch streift, muss er um
(Bandbreite - Strichbreite) / 2 versetzt sein. Die Gruppe bringt
davon schon 0,4 mit, der Rest kommt hier:
Sekunde (3,2 - 0,9) / 2 = 1,15 -> noch 0,75
Minute (5,0 - 0,9) / 2 = 2,05 -> noch 1,65
Stunde (5,8 - 0,9) / 2 = 2,45 -> noch 2,05
`px` in einem SVG-Transform sind Einheiten des viewBox, keine
Bildpunkte -- die Uhr skaliert damit mit, ohne dass sich das
Verhaeltnis verschiebt.
Dass die Kante immer NACH OBEN versetzt ist und nicht senkrecht zum
jeweiligen Balken, ist Absicht: Es ist ein Licht von oben, kein
aufgemalter Rand. Oben streift es die Oberkante, unten die
Unterkante -- genau das tut Licht. */
.uhr__kante .uhr__sekunde { transform: translateY(-0.75px); }
.uhr__kante .uhr__minute { transform: translateY(-1.65px); }
.uhr__kante .uhr__stunde { transform: translateY(-2.05px); }
/* DIE ZIFFERNINSEL (07.09.2026).
Seit der Stundenring eine beleuchtete Oberkante hat, laeuft ein
@@ -5878,11 +5889,7 @@ body[data-fremde-sicht="ja"]::after {
statt bei 360 Grad zurueckzuspringen -- sonst liefe die Ueberblendung
einmal je Minute rueckwaerts durch das ganze Zifferblatt. Genau das
macht start.js jetzt (fortlaufende Sekunden statt sk % 60). */
.uhr__perle {
transition: transform .92s cubic-bezier(.33, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
.uhr__perle { transition: none; }
}
/* ===================================================================
@@ -6015,9 +6022,16 @@ body[data-fremde-sicht="ja"]::after {
/* ---- 3. Die Breiten, klar gestaffelt ----------------------------- */
.uhr__minute { stroke-width: 5; }
.uhr__stunde { stroke-width: 7; }
/* 5,8 STATT 7 (09.09.2026, screen5). Zusammen mit der laengeren
Gliedlaenge in start.js (5,5 -> 10) ergibt das ein Verhaeltnis von
1,7:1 statt 0,79:1. Vorher war ein Stundenglied BREITER ALS LANG und
las sich deshalb als Klotz quer auf der Bahn statt als Balken
entlang. Zusaetzlich lief der helle Strich der Kantenlage (0,4 nach
oben versetzt) mitten hindurch statt an der Oberkante -- bei einem
laengeren Glied sitzt er wieder da, wo er hingehoert. */
.uhr__stunde { stroke-width: 5.8; }
.uhr__schatten .uhr__minute { stroke-width: 6; }
.uhr__schatten .uhr__stunde { stroke-width: 8; }
.uhr__schatten .uhr__stunde { stroke-width: 6.8; }
/* ---- 2. Die Sekunde als Punktreihe -------------------------------
`stroke-linecap: round` plus eine Strichlaenge nahe null ergibt
@@ -6036,12 +6050,6 @@ body[data-fremde-sicht="ja"]::after {
/* (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 {
box-shadow:
0 0 0 1px rgba(255, 255, 255, .75),
0 0 4px 0 currentColor;
}
/* ===================================================================
DIE DREI FARBEN, NEU VERTEILT (08.09.2026)
@@ -6083,10 +6091,6 @@ body[data-fremde-sicht="ja"]::after {
/* 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
@@ -6196,17 +6200,41 @@ body[data-fremde-sicht="ja"]::after {
fuenf Aufklebern und einem Raum mit Tiefe. Die Unschaerfe ist hier
ausdruecklich richtig (Entfernung), waehrend sie an der Uhr
ausdruecklich falsch war (dort ist alles gleich nah). */
.willkommen > .zuniversum .zuniversum__chili {
.willkommen > .zuniversum .zuniversum__chili,
.willkommen > .zuniversum .zuniversum__husky {
position: absolute;
left: var(--x); top: var(--y);
width: var(--gr); height: var(--gr);
margin: calc(var(--gr) / -2);
background: url("../img/marke-spicy.webp") center / contain no-repeat;
opacity: var(--tief);
filter: blur(calc((.11 - var(--tief)) * 22px));
animation: zuni-schweben var(--dauer) ease-in-out var(--ver) infinite;
will-change: transform;
}
.willkommen > .zuniversum .zuniversum__chili {
background: url("../img/marke-spicy.webp") center / contain no-repeat;
}
/* DER HUSKY ALS MASKE (09.09.2026, screen4).
Filipe: "setz in den hintergrund noch 1-2 peperonis und dan das logo
von dogfather, also nur den husky."
Die Datei ist schwarz-weiss und freigestellt (nachgemessen: 49 %
durchsichtig). Als Hintergrundbild bei 15 % Deckkraft verschwaenden
die schwarzen Flaechen im dunklen Grund, uebrig blieben die hellen
Stellen -- ein zerrissener Umriss, kein Hund. Als MASKE ueber einer
Farbflaeche wird daraus eine geschlossene Silhouette, und die traegt
DogFathers Babyblau. Im Universum schweben damit die beiden Marken
des Hauses in ihren beiden Farben.
Er ist eine Spur staerker eingestellt als die Chilis: Eine
geschlossene Silhouette wirkt bei gleicher Deckkraft leiser als eine
mit Aussparungen -- beim Chili fuehrt die Flamme innen den Blick. */
.willkommen > .zuniversum .zuniversum__husky {
background: #7ec8f2;
-webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
mask: url("../img/marke-husky.webp") center / contain no-repeat;
}
/* Die Bahn: eine langgezogene Acht statt eines Kreises. Ein Kreis
sieht nach Karussell aus, sobald man ihn zweimal gesehen hat; eine
@@ -6232,7 +6260,8 @@ body[data-fremde-sicht="ja"]::after {
nicht "weniger Gestaltung". */
@media (prefers-reduced-motion: reduce) {
.willkommen > .zuniversum::before,
.willkommen > .zuniversum .zuniversum__chili { animation: none; }
.willkommen > .zuniversum .zuniversum__chili,
.willkommen > .zuniversum .zuniversum__husky { animation: none; }
}
/* Auf schmalen Bildschirmen wird die Kachel hoch und schmal. Fuenf
@@ -6241,8 +6270,15 @@ body[data-fremde-sicht="ja"]::after {
aussieht", sondern weil bei 380 px Breite der 122-px-Chili ein
Drittel der Kachel einnimmt und hinter dem Titel steht. */
@media (max-width: 700px) {
.willkommen > .zuniversum .zuniversum__chili:nth-child(1),
.willkommen > .zuniversum .zuniversum__chili:nth-child(3) { display: none; }
/* Auf schmalen Schirmen bleiben vier von acht Motiven. `> :nth-child`
statt `.zuniversum__chili:nth-child` -- die Kinder sind jetzt
zweierlei, und ein Klassenname im Selektor haette beim Zaehlen
trotzdem ALLE Geschwister mitgezaehlt. Das sieht richtig aus und
trifft die falschen. */
.willkommen > .zuniversum > :nth-child(1),
.willkommen > .zuniversum > :nth-child(3),
.willkommen > .zuniversum > :nth-child(7),
.willkommen > .zuniversum > :nth-child(8) { display: none; }
}
/* Wo Benachrichtigungen gar nicht gehen, sieht man das dem Knopf an --
@@ -6604,3 +6640,58 @@ body[data-fremde-sicht="ja"]::after {
/* Der Haken gehoert ueber die Raendelung -- sonst liegt der Ring auf
ihm. */
.zahlen-leer__haken svg { position: relative; z-index: 1; }
/* =====================================================================
DAS LETZTE GLIED LEUCHTET (screen5, 09.09.2026)
Filipe: "ich will dass du die punkte ersetzt und immer der letzte
soll mehr strahlen oder so, mach das richtig geil."
An dieser Stelle liefen bis heute drei HTML-Perlen auf eigenen
Bahnen. Sie waren ein zweites Ding an einer zweiten Stelle -- mit
eigener Winkelrechnung, eigener Farbe und eigener Groesse. Genau
deshalb standen sie am 08.09. in den falschen Farben, als die Bahnen
getauscht wurden: Wer eine Sache an zwei Orten fuehrt, aendert
irgendwann nur einen.
Jetzt zeichnet eine zweite SVG-Lage dasselbe letzte Glied noch
einmal -- heller, mit engem Schein. Sie kann gar nicht danebenstehen:
Ort und Laenge kommen aus derselben Funktion wie die Reihe darunter.
HELLER STATT GROESSER. Der Kopf hat dieselbe Breite und dieselbe
Laenge wie jedes andere Glied. Waere er groesser, waere er ein
Fremdkoerper in der Reihe; heller ist er dasselbe Glied, nur eben das
aktuelle. Das ist der Unterschied zwischen einem Zeiger, der auf die
Reihe zeigt, und einer Reihe, die selbst sagt, wo sie steht.
AUGENSCHONEND: Der Schein ist ENG (2 bis 3 px) und pulsiert nicht.
Er soll die Stelle markieren, nicht die Aufmerksamkeit fesseln -- die
Uhr steht dauerhaft im Bild. Eine Ueberblendung von .25 s macht den
Sprung von Glied zu Glied weich, ohne dass etwas wandert.
===================================================================== */
.uhr__kopf {
fill: none;
stroke-linecap: inherit;
transition: stroke-dashoffset .25s cubic-bezier(.34, 1.2, .64, 1);
}
.uhr__kopf--sekunde {
stroke: #dff2ff;
stroke-width: 3.6;
stroke-linecap: round;
filter: drop-shadow(0 0 2.4px rgba(150, 215, 250, .95));
}
.uhr__kopf--minute {
stroke: #ffffff;
stroke-width: 5.2;
filter: drop-shadow(0 0 2.2px rgba(226, 238, 250, .9));
}
.uhr__kopf--stunde {
stroke: #ffd9dd;
stroke-width: 6;
filter: drop-shadow(0 0 3px rgba(255, 110, 122, .95));
}
/* Wer weniger Bewegung will, bekommt den Sprung ohne Ueberblendung --
der Kopf steht dann einfach am richtigen Glied. */
@media (prefers-reduced-motion: reduce) {
.uhr__kopf { transition: none; }
}
workspace/assets/js/glocke.js
+20 -2
View File
@@ -189,7 +189,21 @@
einer umgezogen ist, wäre keine Verbesserung. Und weil die
Kopfleiste am 06.09. schon einmal an einem sechsten Element
zerbrochen ist, wird sie hier nebenbei um eines leichter. */
const platz = document.getElementById('glocke-platz');
/* SEIT DEM 09.09.2026 GIBT ES ZWEI PLAETZE (screen2).
Die Glocke geht nach LINKS neben den Ring, der Tagesruf bleibt
rechts neben der Uhr. Welcher wohin, folgt der Bedeutung: Der
Wecker ist eine Uhrzeit und gehoert zur Uhr; die Glocke
entscheidet, ob man ueberhaupt etwas ueber sein Team erfaehrt --
und der Ring links zeigt genau das.
Gibt es den linken Platz nicht (jede Seite ausser der
Startseite), faellt die Glocke wie bisher auf den rechten
zurueck und von dort auf die Kopfleiste. Zwei Rueckfaelle, kein
Sonderfall: Ein Knopf, der auf zwoelf Seiten verschwindet, weil
er auf einer umgezogen ist, waere keine Verbesserung. */
const platzLinks = document.getElementById('glocke-platz-links');
const platz = platzLinks || document.getElementById('glocke-platz');
const kopf = platz || document.querySelector('.kopfleiste__rechts');
if (!kopf || document.getElementById('glocke')) return;
@@ -245,7 +259,11 @@
}
zeichnen();
if (platz) await tagesrufBauen(platz);
/* Der Tagesruf gehoert IMMER an den rechten Platz -- auch wenn die
Glocke links sitzt. `platz` zeigt jetzt auf den linken, deshalb
wird der rechte hier eigens geholt. */
const platzRechts = document.getElementById('glocke-platz');
if (platzRechts) await tagesrufBauen(platzRechts);
}
/* =====================================================================
workspace/assets/js/start.js
+64 -60
View File
@@ -375,9 +375,10 @@
`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 = {};
const lagen = {}, koepfe = {};
for (const welcher of ['sekunde', 'minute', 'stunde']) {
lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)];
koepfe[welcher] = document.querySelector(`[data-kopf="${welcher}"]`);
}
/* DIE SEKUNDE IST EINE PUNKTREIHE (08.09.2026).
@@ -402,7 +403,26 @@
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 };
/* DIE STUNDE WAR BREITER ALS LANG (behoben 09.09.2026, screen5).
Filipe: "alles ist mega ausser die stunden muss du noch
perfektionnieren."
Nachgemessen war das der Grund: Ein Stundenglied war 5,5 lang
und 7 breit. Ein Segment, das breiter ist als lang, liest sich
nicht als Balken auf einer Bahn, sondern als Klotz quer darauf --
und weil die Kantenlage 0,4 nach oben versetzt ist, lief
zusaetzlich ein heller Strich mitten hindurch statt an der
Oberkante entlang.
Jetzt 10 lang bei 5,8 breit. Das Verhaeltnis ist damit 1,7:1
statt 0,79:1 -- aus dem Klotz wird ein Balken, und der helle
Strich sitzt wieder da, wo er hingehoert: auf der Kante.
Die Staffelung bleibt eindeutig: Punkt (0,01), kurzer Balken
(1,7), langer Balken (10). Je langsamer die Bahn, desto laenger
das Glied. */
const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 10 };
const punktMuster = (U, n, gesamt, laenge) => {
const schritt = U / gesamt;
@@ -467,10 +487,32 @@
el.style.strokeDashoffset = '0';
}
};
/* DAS LETZTE GLIED, EINZELN (09.09.2026, screen5).
/* Der Nullpunkt der eigenen Uhr -- siehe unten bei den Koepfen. */
let nullpunkt = null, startWinkel = 0, minStart = 0, stdStart = 0, sekStart = 0;
Filipe: "immer der letzte soll mehr strahlen oder so."
Vorher liefen dafuer drei HTML-Perlen auf eigenen Bahnen -- mit
einer EIGENEN Winkelrechnung. Zwei Rechnungen fuer denselben
Ort sind zwei Gelegenheiten auseinanderzulaufen, und genau das
ist am 08.09. passiert: Die Bahnen tauschten die Farben, die
Perlen nicht.
Jetzt zeichnet eine zweite Lage GENAU EIN Glied, aus denselben
Zahlen wie die Reihe darunter: Laenge unveraendert, alles
andere Luecke, Anfang um (n-1) Schritte verschoben.
`dashoffset` ist NEGATIV, und das ist keine Willkuer: Ein
positiver Wert schiebt das Muster rueckwaerts, der Strich
erschiene frueher. Um ihn bei p BEGINNEN zu lassen, braucht es
-p. */
const kopf = koepfe[welcher];
if (kopf) {
const schritt = U / gesamt;
const laenge = GLIED_LAENGE[welcher];
kopf.style.strokeDasharray = `${laenge} ${(U - laenge).toFixed(3)}`;
kopf.style.strokeDashoffset = `-${((n - 1) * schritt).toFixed(3)}`;
}
};
const takt = () => {
const j = new Date();
@@ -490,65 +532,27 @@
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. */
/* DIE KOEPFE ZAEHLEN WEITER, STATT ZURUECKZUSPRINGEN.
Sie gleiten jetzt (Ueberblendung in heim.css) statt zu
springen. Damit das funktioniert, darf der Winkel bei 59 -> 0
Sekunden NICHT von 354 auf 0 fallen -- die Ueberblendung liefe
sonst einmal je Minute rueckwaerts durch das ganze
Zifferblatt. Gerechnet wird deshalb mit der fortlaufenden Zeit:
Der Winkel waechst immer weiter, und 366 Grad sieht genauso aus
wie 6, nur dass der Weg dorthin vorwaerts fuehrt.
/* HIER STAND DIE PERLENRECHNUNG -- 60 Zeilen, und sie ist mit den
Perlen zusammen weggefallen (09.09.2026, screen5).
Die Anzeige selbst rechnet weiterhin nur einmal je Sekunde --
die Bewegung dazwischen macht der Browser, nicht das Skript. */
/* SEIT DEM ERSTEN TAKT, NICHT SEIT 1970.
Sie war ein Lehrstueck fuer sich: eine eigene Uhr ab dem ersten
Takt, weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab und
die Nachkommastellen verlor; ein Startwinkel je Bahn; drei
Winkel, die die kleineren Einheiten anteilig mittragen mussten,
damit kein Kopf neben dem Ende seines Bogens steht.
Der erste Versuch rechnete mit der vollen Unixzeit. Ergebnis im
Bildschirmfoto: `rotate(1.07333e+10deg)` -- eine Zahl in
Exponentialschreibweise, bei der die Nachkommastellen laengst
weg sind. Die Perlen standen sichtbar NEBEN dem Ende ihrer
Boegen, die rote sogar auf der anderen Seite des Zifferblatts.
Gerechnet war es richtig, darstellbar nicht.
All das war noetig, WEIL der Kopf ein zweites Ding an einer
zweiten Stelle war. Er ist jetzt das letzte Glied der Bahn
selbst und wird von derselben Funktion aus denselben Zahlen
gesetzt (siehe `setze`). Damit kann er gar nicht mehr
danebenstehen -- nicht weil die Rechnung besser ist, sondern
weil es nur noch eine gibt.
Jetzt zaehlt eine eigene Uhr ab dem ersten Takt: Startwinkel ist
der echte Stand beim Laden, danach kommen 6 Grad je Sekunde
dazu. Die Zahl bleibt klein (ein Tag sind 518 400 Grad), waechst
aber weiter -- und nur das braucht die Ueberblendung, damit sie
nie rueckwaerts laeuft. */
if (nullpunkt === null) {
nullpunkt = Math.floor(j.getTime() / 1000);
startWinkel = sk * 6;
minStart = min; stdStart = std; sekStart = sk;
}
const seit = Math.floor(j.getTime() / 1000) - nullpunkt;
const winkelSek = startWinkel + seit * 6;
const perle = $('uhr-perle');
if (perle) perle.style.transform = `rotate(${winkelSek.toFixed(2)}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. */
/* Minute und Stunde ebenso: Startstand plus das, was seither
vergangen ist. Sie tragen die kleineren Einheiten anteilig mit,
damit ihr Kopf nie neben dem Ende ihres Bogens steht. */
const perleMin = $('uhr-perle-minute');
if (perleMin) {
const start = (minStart + sekStart / 60) * 6;
perleMin.style.transform = `rotate(${(start + seit * 0.1).toFixed(3)}deg)`;
}
const perleStd = $('uhr-perle-stunde');
if (perleStd) {
const start = ((stdStart % 12) + minStart / 60) * 30;
perleStd.style.transform = `rotate(${(start + seit / 120).toFixed(4)}deg)`;
}
Der Rest, der hier stand (nullpunkt, startWinkel, minStart,
stdStart, sekStart), wird nirgends sonst gebraucht und ist
ebenfalls weg. Eine Variable, die nur noch gepflegt wird, ist
eine Falle fuer den naechsten Leser. */
setze('minute', (min + sk / 60) / 60);
setze('stunde', ((std % 12) + min / 60) / 12);
workspace/aufgaben.html
+9 -9
View File
@@ -14,10 +14,10 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -217,10 +217,10 @@
</form>
</dialog>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/aufgaben.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/aufgaben.js?v=202609090133" defer></script>
</body>
</html>
workspace/automation.html
+10 -10
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/automation.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/automation.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -140,10 +140,10 @@
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/automation.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/automation.js?v=202609090133" defer></script>
</body>
</html>
workspace/bereich.html
+14 -14
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -149,14 +149,14 @@
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/checkliste.js?v=202609090113" defer></script>
<script src="assets/js/ampel.js?v=202609090113" defer></script>
<script src="assets/js/schulung.js?v=202609090113" defer></script>
<script src="assets/js/vorlagen.js?v=202609090113" defer></script>
<script src="assets/js/bereich.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/checkliste.js?v=202609090133" defer></script>
<script src="assets/js/ampel.js?v=202609090133" defer></script>
<script src="assets/js/schulung.js?v=202609090133" defer></script>
<script src="assets/js/vorlagen.js?v=202609090133" defer></script>
<script src="assets/js/bereich.js?v=202609090133" defer></script>
</body>
</html>
workspace/calls.html
+11 -11
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/calls.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/calls.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -82,11 +82,11 @@
</main>
<script src="assets/js/ki.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/calls.js?v=202609090113" defer></script>
<script src="assets/js/ki.js?v=202609090133" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/calls.js?v=202609090133" defer></script>
</body>
</html>
workspace/chat.html
+10 -10
View File
@@ -14,17 +14,17 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<!-- aufgaben.css bringt die Dialog- und Formularstile mit (.dialog,
.neu__zeile, .dialog__knoepfe). Sie stehen dort seit dem
Aufgabenbrett; sie hierher zu kopieren hiesse, sie an zwei Stellen
zu pflegen. Dieselbe Lösung nutzen kalender.html und content.html.
Gemeldet von pruef-css-klassen.mjs, bevor jemand einen ungestylten
Dialog zu sehen bekam. -->
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/chat.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/chat.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -160,10 +160,10 @@
</form>
</dialog>
<script src="assets/js/bereiche.js?v=202609090113"></script>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113"></script>
<script src="assets/js/glocke.js?v=202609090113"></script>
<script src="assets/js/chat.js?v=202609090113"></script>
<script src="assets/js/bereiche.js?v=202609090133"></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133"></script>
<script src="assets/js/glocke.js?v=202609090133"></script>
<script src="assets/js/chat.js?v=202609090133"></script>
</body>
</html>
workspace/content.html
+12 -12
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/content.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/content.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -172,12 +172,12 @@
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/checkliste.js?v=202609090113" defer></script>
<script src="assets/js/vorlagen.js?v=202609090113" defer></script>
<script src="assets/js/content.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/checkliste.js?v=202609090133" defer></script>
<script src="assets/js/vorlagen.js?v=202609090133" defer></script>
<script src="assets/js/content.js?v=202609090133" defer></script>
</body>
</html>
workspace/dateien.html
+10 -10
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -101,10 +101,10 @@
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/dateien.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/dateien.js?v=202609090133" defer></script>
</body>
</html>
workspace/index.html
+2 -2
View File
@@ -32,7 +32,7 @@
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
</head>
<body class="gate">
@@ -382,6 +382,6 @@
</main>
</div>
<script src="assets/js/gate.js?v=202609090113" defer></script>
<script src="assets/js/gate.js?v=202609090133" defer></script>
</body>
</html>
workspace/kalender.html
+11 -11
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -340,11 +340,11 @@
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/kalender.js?v=202609090113" defer></script>
<script src="assets/js/kalender-abo.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/kalender.js?v=202609090133" defer></script>
<script src="assets/js/kalender-abo.js?v=202609090133" defer></script>
</body>
</html>
workspace/leistung.html
+10 -10
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/leistung.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/leistung.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -217,10 +217,10 @@
</form>
</dialog>
<script src="assets/js/wahl.js?v=202609090113"></script>
<script src="assets/js/bereiche.js?v=202609090113"></script>
<script src="assets/js/kopf.js?v=202609090113"></script>
<script src="assets/js/glocke.js?v=202609090113"></script>
<script src="assets/js/leistung.js?v=202609090113"></script>
<script src="assets/js/wahl.js?v=202609090133"></script>
<script src="assets/js/bereiche.js?v=202609090133"></script>
<script src="assets/js/kopf.js?v=202609090133"></script>
<script src="assets/js/glocke.js?v=202609090133"></script>
<script src="assets/js/leistung.js?v=202609090133"></script>
</body>
</html>
workspace/personen.html
+10 -10
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/personen.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/personen.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -305,10 +305,10 @@
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/personen.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/personen.js?v=202609090133" defer></script>
</body>
</html>
workspace/profil.html
+11 -11
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -207,11 +207,11 @@
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/steckbrief.js?v=202609090113" defer></script>
<script src="assets/js/profil.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/steckbrief.js?v=202609090133" defer></script>
<script src="assets/js/profil.js?v=202609090133" defer></script>
</body>
</html>
workspace/report.html
+11 -11
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/report.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/report.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -99,11 +99,11 @@
</main>
<script src="assets/js/ki.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/report.js?v=202609090113" defer></script>
<script src="assets/js/ki.js?v=202609090133" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/report.js?v=202609090133" defer></script>
</body>
</html>
workspace/scouting.html
+10 -10
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -132,10 +132,10 @@
</div>
</div>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/scouting.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/scouting.js?v=202609090133" defer></script>
</body>
</html>
workspace/start.html
+79 -21
View File
@@ -14,12 +14,12 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<!-- Nur die Startseite: Begrüßungskachel, Uhr, Glockenmulde. Siehe
den Hinweis in start.css -- dort stand es bis zum 07.09.2026. -->
<link rel="stylesheet" href="assets/css/heim.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/heim.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -89,6 +89,23 @@
<span class="zuniversum__chili" style="--x: 68%; --y: 17%; --gr: 128px; --tief: .12; --dauer: 118s; --ver: -52s; --kipp: -7deg"></span>
<span class="zuniversum__chili" style="--x: 80%; --y: 74%; --gr: 70px; --tief: .16; --dauer: 83s; --ver: -17s; --kipp: 31deg"></span>
<span class="zuniversum__chili" style="--x: 45%; --y: 97%; --gr: 44px; --tief: .14; --dauer: 104s; --ver: -68s; --kipp: -25deg"></span>
<!-- Zwei weitere Chilis und zwei Huskys (09.09.2026, Wunsch
Filipe: "setz in den hintergrund noch 1-2 peperonis und dan
das logo von dogfather, also nur den husky").
DER HUSKY IST EINE MASKE, KEIN BILD. Die Datei ist schwarz-
weiss und freigestellt (nachgemessen: 49 % durchsichtig). Als
Hintergrundbild bei 15 % Deckkraft verschwaenden die
schwarzen Flaechen im dunklen Grund und uebrig blieben die
hellen Stellen -- ein zerrissener Umriss, kein Hund. Als
Maske ueber einer Farbflaeche wird daraus eine geschlossene
Silhouette, und die traegt DogFathers Babyblau. Damit
schweben im Universum die beiden Marken des Hauses in ihren
beiden Farben. -->
<span class="zuniversum__chili" style="--x: 19%; --y: 9%; --gr: 54px; --tief: .13; --dauer: 88s; --ver: -24s; --kipp: 18deg"></span>
<span class="zuniversum__chili" style="--x: 73%; --y: 93%; --gr: 66px; --tief: .12; --dauer: 112s; --ver: -41s; --kipp: -33deg"></span>
<span class="zuniversum__husky" style="--x: 15%; --y: 88%; --gr: 74px; --tief: .15; --dauer: 97s; --ver: -12s; --kipp: -9deg"></span>
<span class="zuniversum__husky" style="--x: 88%; --y: 14%; --gr: 58px; --tief: .12; --dauer: 126s; --ver: -59s; --kipp: 14deg"></span>
</span>
<p class="marke willkommen__datum">
@@ -114,6 +131,25 @@
bin?" Die Entscheidung faellt im Server
(workspace-zentrale.js), nicht hier: Was der Browser nicht
bekommt, kann er auch nicht verraten. -->
<!-- ==== LINKS: KNOPF UND RING ================================
Der Ring stand hier allein in seiner Spalte und war darin
zentriert. Seit dem 09.09.2026 (Wunsch Filipe: "eins von
diesen buttons soll links bei dem anderen kreis sein") steht
die Glocke daneben -- genau spiegelbildlich zur Uhr rechts,
die den Wecker neben sich hat.
WELCHER KNOPF WOHIN, ist nicht ausgewuerfelt: Der WECKER ist
eine Uhrzeit und gehoert zur Uhr. Die GLOCKE ist die
Einstellung dafuer, ob man ueberhaupt etwas ueber sein Team
erfaehrt -- und der Ring links zeigt genau das, den Stand
des Teams. Wer den Ring ansieht und mehr davon wissen will,
findet den Schalter dafuer daneben.
Die Spalte ist damit auf beiden Seiten gleich belegt:
48 px Knopf + 14 px Abstand + Instrument. Genau das rechnet
`--spalte` in heim.css aus. -->
<div class="willkommen__links">
<div class="glocke-platz glocke-platz--links" id="glocke-platz-links"></div>
<div class="zring" id="zring">
<svg class="zring__bild" id="zring-bild" viewBox="0 0 300 300"
role="img" aria-labelledby="zring-titel zring-text">
@@ -134,6 +170,7 @@
<span class="zring__unter" id="zring-unter">wird geladen</span>
</div>
</div>
</div><!-- /.willkommen__links -->
<!-- ==== MITTE: WER, WO, WAS ================================== -->
<div class="willkommen__text">
@@ -364,6 +401,21 @@
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" id="uhr-minute" />
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" id="uhr-stunde" />
<!-- DAS LETZTE GLIED JEDER BAHN, hell und mit Schein.
Dieselben Kreise noch einmal, aber mit einem Muster,
das nur EIN Glied zeigt -- das gerade aktuelle. Sie
liegen ueber den Bahnen, tragen dieselbe Geometrie und
koennen deshalb gar nicht danebenliegen: Ort und Laenge
rechnet dieselbe Funktion aus wie fuer die Reihe
darunter (`start.js`, `setze`).
`data-kopf` statt `data-ring`, damit das Skript sie
getrennt ansprechen kann. -->
<circle class="uhr__kopf uhr__kopf--sekunde" data-kopf="sekunde" cx="50" cy="50" r="45.5" />
<circle class="uhr__kopf uhr__kopf--minute" data-kopf="minute" cx="50" cy="50" r="38.5" />
<circle class="uhr__kopf uhr__kopf--stunde" data-kopf="stunde" cx="50" cy="50" r="31.5" />
<!-- DER KOMETENSCHWEIF IST WEG (08.09.2026).
Er machte aus einem durchgehenden Bogen eine Richtung --
@@ -389,18 +441,24 @@
das, woran das Auge sich ausrichtet. Ein aufgesetzter Keil
in Hausrot, mit heller Metallkante. -->
<span class="uhr__zwoelf" aria-hidden="true"></span>
<!-- DIE PERLE AM KOPF DES SEKUNDENBOGENS. Sie laeuft einmal je
Minute herum und ist das Einzige an der Uhr, das sich
BEWEGT statt nur zu wachsen. Ein Bogen zeigt einen Stand,
eine laufende Perle zeigt LEBEN -- und genau das ist der
Unterschied zwischen einer Anzeige und einem Instrument. -->
<span class="uhr__perle" id="uhr-perle" aria-hidden="true"></span>
<!-- Dieselbe Kappe fuer Minute und Stunde, auf ihren eigenen
Bahnen. Drei Koepfe statt einem: Erst dadurch liest man
die drei Ringe als drei ZEIGER und nicht als drei
Fortschrittsbalken. -->
<span class="uhr__perle uhr__perle--minute" id="uhr-perle-minute" aria-hidden="true"></span>
<span class="uhr__perle uhr__perle--stunde" id="uhr-perle-stunde" aria-hidden="true"></span>
<!-- DIE DREI PERLEN SIND WEG (09.09.2026, screen5).
Filipe: "ich will dass du die punkte ersetzt und immer
der letzte soll mehr strahlen oder so."
Es waren drei HTML-Elemente, die auf ihren Bahnen
umliefen -- Koepfe, die NEBEN der Reihe herliefen statt
Teil von ihr zu sein. Seit alle drei Bahnen aus einzelnen
Gliedern bestehen, gibt es dafuer eine bessere Antwort:
Das LETZTE Glied ist der Kopf. Es muss nur leuchten.
Das macht jetzt eine eigene Lage im SVG (`.uhr__kopf`),
die genau EIN Glied zeichnet -- dasselbe, das die Bahn
darunter gerade zuletzt gesetzt hat. Kein Element mehr im
Baum, keine zweite Winkelrechnung, die mit der ersten
auseinanderlaufen kann. Genau daran bin ich am 08.09.
haengengeblieben: Die Perlen trugen noch die alten
Farben, weil sie eine zweite Stelle waren. -->
<!-- DER LED-KRANZ UND DIE VIER ANKER (08.09.2026).
Nach Filipes Vorbild -- was bei 164 px davon traegt,
steht in heim.css begruendet. -->
@@ -522,10 +580,10 @@
</p>
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/start.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/start.js?v=202609090133" defer></script>
</body>
</html>
workspace/startcheck.html
+11 -11
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -78,11 +78,11 @@
</main>
<script src="assets/js/ki.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/startcheck.js?v=202609090113" defer></script>
<script src="assets/js/ki.js?v=202609090133" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/startcheck.js?v=202609090133" defer></script>
</body>
</html>
workspace/steckbrief.html
+10 -10
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -119,10 +119,10 @@
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/steckbrief.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/steckbrief.js?v=202609090133" defer></script>
</body>
</html>
workspace/uebersicht.html
+10 -10
View File
@@ -14,13 +14,13 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<!-- Formular- und Dialogstile: seit dem 07.09.2026 steht hier der
Dialog "Creator anlegen". -->
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -142,11 +142,11 @@
</main>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/uebersicht.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/uebersicht.js?v=202609090133" defer></script>
</body>
</html>
workspace/wissen.html
+10 -10
View File
@@ -14,11 +14,11 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090113" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202609090133" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090133" />
</head>
<body class="start">
@@ -183,10 +183,10 @@
</main>
<script src="assets/js/wahl.js?v=202609090113" defer></script>
<script src="assets/js/bereiche.js?v=202609090113" defer></script>
<script src="assets/js/kopf.js?v=202609090113" defer></script>
<script src="assets/js/glocke.js?v=202609090113" defer></script>
<script src="assets/js/wissen.js?v=202609090113" defer></script>
<script src="assets/js/wahl.js?v=202609090133" defer></script>
<script src="assets/js/bereiche.js?v=202609090133" defer></script>
<script src="assets/js/kopf.js?v=202609090133" defer></script>
<script src="assets/js/glocke.js?v=202609090133" defer></script>
<script src="assets/js/wissen.js?v=202609090133" defer></script>
</body>
</html>