Die Uhr wird ein Gegenstand -- Rot x Babyblau, und start.css wird geteilt
DIE UHR. Filipe: "viel viel viel viel viel viel viel spezieller ... eine
mischung von rot und babyblau". Was eine Uhr teuer aussehen laesst, ist
nicht die Farbe, sondern das GEHAEUSE -- bei einer echten sieht man drei
Schichten uebereinander: einen Metallrand, der das Licht von oben faengt,
eine VERTIEFTE Scheibe darin, und ein Glas darueber, das spiegelt. Genau
die drei sind jetzt gebaut.
Die beiden Farben sind nicht aus dem Farbkasten: Rot ist Spicy Media,
Babyblau ist DogFather -- dieselben zwei, die im Kopf der Anmeldekarte
nebeneinanderstehen und im Motiv den Neonrahmen bilden. Zwei Verlaeufe,
absichtlich GEGENLAEUFIG (Stundenring rot->blau, Sekundenring blau->rot):
Wo der eine warm ist, ist der andere kuehl, so bleiben sie
auseinanderzuhalten, wo sie sich ueberlagern.
Dazu: eine Skala aus sechzig Strichen, jeder fuenfte kraeftiger (aus
einem Kegelverlauf, nicht aus sechzig Elementen); ein leuchtender Kopf,
der am Ende des Sekundenbogens mitlaeuft -- die einzige Stelle, an der
sich sichtbar etwas bewegt; und die Mischung IM Text als zwei Schatten
statt als Verlaufsschrift (background-clip: text waere im Windows-
Kontrastmodus unsichtbar). Die Glocke bekommt dasselbe Gehaeuse, nur
kleiner -- zwei runde Dinge aus verschiedenem Material sehen
zusammengesucht aus.
PROFILBILDER: /api/personen lieferte nur id, name, rolle. Deshalb konnte
KEINE Oberflaeche ein Gesicht zeigen, auch wenn eines hochgeladen war --
der Fehler lag nicht in der Anzeige, sondern in der Schnittstelle.
Jetzt kommt die fertige Bildadresse mit (nicht der Dateiname: sonst
setzt jede Stelle im Browser denselben Pfad zusammen). Und DogFather ist
fuer alle sichtbar -- Name, Rolle, Bild, sonst nichts; seine Eintraege,
Chats und Zahlen haengen weiter an den eigenen Regeln der Module.
start.css GETEILT statt gekuerzt. Sie lief mit 202 KB wieder in die
200-KB-Grenze, und diesmal war Kuerzen die falsche Antwort: Dreizehn
Seiten laden diese Datei, Uhr und Begruessungskachel braucht genau EINE.
Also heim.css -- 184 KB statt 202, und zwoelf Seiten laden 14 KB
weniger. Vorher mit grep nachgesehen, dass `uhr`, `willkommen` und
`glocke-platz` in keiner anderen HTML-Datei vorkommen.
ZWEI FUNDE DER PRUEFUNGEN, beide berechtigt:
- `.glocke--kachel` musste zurueck nach start.css. glocke.js laeuft auf
ALLEN siebzehn Seiten und kann die Klasse ueberall setzen; die Regel
gehoert dorthin, wo das Skript sie brauchen KANN, nicht dorthin, wo
es sie heute zufaellig braucht.
- Die Sekundenanzeige stand auf 10,88 px (Grenze 11,5). Gesperrte
Ziffern in Versalhoehe wirken kleiner als die Zahl sagt -- auf
11,84 px.
Gruen: css-klassen (15), struktur (32), sicht (48), buehne (38),
start-ansicht (136), handy (59), aufgabenbrett (44).
NOCH OFFEN aus derselben Nachricht: die Calls-Seite komplett umbauen mit
Auf-/Zuklappen ueberall, die Profilbilder auch WIRKLICH ueberall
zeichnen (die Daten sind jetzt da), die Rolle "Spicy Media" und
Manager-legt-Creator-an.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -176,21 +176,40 @@ aufgabenRouter.get("/workspace/api/personen", (req, res) => {
|
||||
sichtbarePersonenIds/sichtbareCreatorIds liefern null fuer
|
||||
DogFather (= keine Einschraenkung) und sonst genau die erlaubten
|
||||
Nummern. */
|
||||
/* DAS BILD GEHOERT DAZU (07.09.2026, Wunsch Filipe: "jeder soll auch
|
||||
immer das profilbild von denen sehen mit denen sie verbunden
|
||||
sind").
|
||||
|
||||
Diese Liste lieferte bisher `id, name, rolle` -- und deshalb
|
||||
konnte KEINE Oberflaeche ein Gesicht zeigen, auch wenn eines
|
||||
hochgeladen war. Der Fehler lag nicht in der Anzeige, sondern
|
||||
hier: Was nicht mitkommt, kann niemand zeichnen.
|
||||
|
||||
Ausgeliefert wird die fertige ADRESSE, nicht der Dateiname. Sonst
|
||||
muesste jede Stelle im Browser denselben Pfad zusammensetzen --
|
||||
und beim naechsten Umzug des Ordners waere er an sechs Stellen
|
||||
falsch. Wer kein Bild hat, bekommt `null`; die Oberflaeche zeigt
|
||||
dann wie bisher den Anfangsbuchstaben. */
|
||||
const mitBild = (z) => ({
|
||||
id: z.id, name: z.name, rolle: z.rolle,
|
||||
bild: z.bild ? `/workspace/api/steckbrief/bild/${z.bild}` : null,
|
||||
});
|
||||
const ids = sichtbarePersonenIds(req.person);
|
||||
if (ids === null) {
|
||||
return res.json({
|
||||
personen: db().prepare(
|
||||
"SELECT id, name, rolle FROM personen WHERE aktiv = 1 ORDER BY " + ROLLEN_SORTIERUNG + ", name").all(),
|
||||
"SELECT id, name, rolle, bild FROM personen WHERE aktiv = 1 ORDER BY "
|
||||
+ ROLLEN_SORTIERUNG + ", name").all().map(mitBild),
|
||||
});
|
||||
}
|
||||
if (!ids.length) {
|
||||
return res.json({ personen: [{ id: req.person.id, name: req.person.name, rolle: req.person.rolle }] });
|
||||
return res.json({ personen: [{ id: req.person.id, name: req.person.name, rolle: req.person.rolle, bild: null }] });
|
||||
}
|
||||
res.json({
|
||||
personen: db().prepare(
|
||||
`SELECT id, name, rolle FROM personen WHERE aktiv = 1
|
||||
`SELECT id, name, rolle, bild FROM personen WHERE aktiv = 1
|
||||
AND id IN (${ids.map(() => "?").join(",")})
|
||||
ORDER BY ` + ROLLEN_SORTIERUNG + ", name").all(...ids),
|
||||
ORDER BY ` + ROLLEN_SORTIERUNG + ", name").all(...ids).map(mitBild),
|
||||
});
|
||||
} catch {
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
|
||||
+20
-1
@@ -1886,7 +1886,26 @@ export function sichtbarePersonenIds(person) {
|
||||
if (istDogFather(person)) return null;
|
||||
const creator = sichtbareCreatorIds(person) || [];
|
||||
const scouts = person.rolle === "manager" ? scoutsVon(person.id) : [];
|
||||
return [...new Set([person.id, ...creator, ...scouts])];
|
||||
/* DOGFATHER IST FUER ALLE SICHTBAR (07.09.2026, Wunsch Filipe:
|
||||
"dogfather und agentur sollen die alle sehen").
|
||||
|
||||
Das ist keine Aufweichung der Regel, sondern ihre Vervollstaendigung:
|
||||
Jede Rolle arbeitet mit DogFather -- er gibt frei, er entscheidet,
|
||||
er steht in jedem Protokoll. Ihn aus der Personenliste
|
||||
herauszuhalten hiess bisher, dass sein Name in Terminen und
|
||||
Aufgaben auftaucht, aber nirgends ein Gesicht dazugehoert.
|
||||
|
||||
Sichtbar heisst hier NUR: Name, Rolle und Bild -- dieselben drei
|
||||
Angaben wie bei jedem anderen in dieser Liste. Alles Weitere (seine
|
||||
Eintraege, seine Chats, seine Zahlen) haengt weiterhin an den
|
||||
eigenen Sichtbarkeitsregeln der jeweiligen Module und ist davon
|
||||
nicht beruehrt. */
|
||||
const dogi = [];
|
||||
try {
|
||||
for (const z of db().prepare(
|
||||
"SELECT id FROM personen WHERE rolle = 'admin' AND aktiv = 1").all()) dogi.push(z.id);
|
||||
} catch { /* ohne Datenbank bleibt die Liste, wie sie war */ }
|
||||
return [...new Set([person.id, ...creator, ...scouts, ...dogi])];
|
||||
}
|
||||
|
||||
/** WER BETREUT MICH -- die Blickrichtung nach oben.
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
/* =====================================================================
|
||||
heim.css — was NUR die Startseite braucht.
|
||||
|
||||
Herausgeloest aus start.css am 07.09.2026: Jene Datei wird von
|
||||
dreizehn Seiten geladen und lief mit ueber 200 KB in die Grenze von
|
||||
pruef-struktur. Die Begruessungskachel, die Uhr und die Glockenmulde
|
||||
darin gibt es aber nur hier.
|
||||
|
||||
Wer etwas an der Startseite aendert, sucht ab jetzt zuerst in dieser
|
||||
Datei -- und wer eine dieser Klassen auf einer ANDEREN Seite benutzen
|
||||
will, muss diese Datei dort einbinden. pruef-css-klassen meldet es,
|
||||
wenn er es vergisst.
|
||||
===================================================================== */
|
||||
|
||||
/* =====================================================================
|
||||
DIE BEGRÜSSUNGSKACHEL — mit Uhr und Glocke (07.09.2026)
|
||||
|
||||
Wunsch Filipe: "ich will dass diese kacheln da auch übertrieben geil
|
||||
gemacht wird, wirklich seeeeeehr hochwertig mit einer runden
|
||||
digitalen uhr rechts in der kachel ... und der benachrichtigungs
|
||||
button soll auch von der leiste in diese kachel gesetzt werden."
|
||||
|
||||
---------------------------------------------------------------------
|
||||
WARUM DIE UHR HIER RICHTIG IST UND NICHT NUR SCHÖN
|
||||
|
||||
Eine Uhr ist die einzige Angabe auf dieser Seite, die sich ändert,
|
||||
während man hinsieht. Genau das macht sie wertvoll: Sie sagt ohne ein
|
||||
Wort, dass die Seite LEBT -- dass die Zahlen daneben von jetzt sind
|
||||
und nicht von gestern Nacht. Eine Oberfläche, bei der man das nicht
|
||||
weiß, prüft man ständig nach.
|
||||
|
||||
Und sie steht neben dem Datum, das ohnehin dort steht. Zwei Angaben
|
||||
zur selben Frage gehören zusammen; das Datum oben und die Uhrzeit in
|
||||
der Fußzeile wären zwei halbe Antworten.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
ZWEI RINGE, NICHT EINER
|
||||
|
||||
Der innere Ring füllt sich in einer Minute, der äußere in einer
|
||||
Stunde. Das ist der Unterschied zwischen "eine Uhr, die tickt" und
|
||||
"eine Uhr, an der man den Stand der Stunde sieht" -- man erkennt aus
|
||||
dem Augenwinkel, ob die Stunde jung ist oder gleich vorbei.
|
||||
|
||||
Der Sekundenring läuft NICHT weich. Ein weicher Zeiger sieht teurer
|
||||
aus, kostet aber eine Bildberechnung pro Bild statt einer pro
|
||||
Sekunde, und auf einer Seite, die stundenlang offen steht, ist das
|
||||
der Unterschied zwischen einem warmen und einem kalten Rechner.
|
||||
Der Sprung ist außerdem ehrlicher: Die Anzeige ist digital.
|
||||
===================================================================== */
|
||||
|
||||
/* Die Kachel selbst: dasselbe Material wie die Bereichskacheln, damit
|
||||
nicht zwei Oberflächen nebeneinanderliegen. Sie hat KEINE eigene
|
||||
Farbschiene -- sie gehört zu keiner Kategorie, sie ist der Anfang. */
|
||||
.willkommen {
|
||||
position: relative;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: 4px 20px 20px 4px;
|
||||
background:
|
||||
linear-gradient(90deg,
|
||||
rgba(63, 189, 245, .10) 0%,
|
||||
rgba(63, 189, 245, .03) 14%,
|
||||
transparent 40%),
|
||||
linear-gradient(163deg,
|
||||
rgba(23, 31, 45, .95) 0%,
|
||||
rgba(11, 15, 24, .95) 58%,
|
||||
rgba(8, 11, 18, .95) 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .10),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, .50),
|
||||
inset 2px 0 0 -1px color-mix(in srgb, var(--akzent) 34%, transparent),
|
||||
0 2px 5px -2px rgba(0, 0, 0, .55),
|
||||
0 16px 34px -20px rgba(0, 0, 0, .88);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Die Leuchtschiene links -- dieselbe Sprache wie überall, hier im
|
||||
Hausakzent statt in einer Kategoriefarbe. */
|
||||
.willkommen::before {
|
||||
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
background: linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--akzent) 55%, #fff) 0%,
|
||||
var(--akzent) 26%,
|
||||
color-mix(in srgb, var(--akzent) 50%, transparent) 100%);
|
||||
box-shadow:
|
||||
0 0 9px 0 color-mix(in srgb, var(--akzent) 55%, transparent),
|
||||
3px 0 20px -3px color-mix(in srgb, var(--akzent) 42%, transparent);
|
||||
opacity: .9;
|
||||
z-index: 2;
|
||||
}
|
||||
/* Körnung und ein fester Glanz. Kein wandernder wie bei den Kacheln:
|
||||
Diese Fläche wird nicht angeklickt, also gibt es nichts zu quittieren. */
|
||||
.willkommen::after {
|
||||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(104deg,
|
||||
transparent 26%,
|
||||
rgba(255, 255, 255, .05) 40%,
|
||||
rgba(255, 255, 255, .085) 47%,
|
||||
rgba(255, 255, 255, .03) 55%,
|
||||
transparent 70%);
|
||||
/* KEINE Körnung auf DIESER Ebene (07.09.2026, gemessen).
|
||||
|
||||
Sie stand hier als zweite Schicht und hat die Deckkraft der
|
||||
Spiegelung geerbt -- 50 % eines mittelgrauen Rauschens heben jeden
|
||||
Bildpunkt um rund 30 Stufen an. Gemessen: rgb(56,44,58) statt der
|
||||
berechneten rgb(20,26,38), und über einer hellen Stelle des
|
||||
Motivs rgb(85,83,81). Die Karte sah dadurch durchsichtig aus,
|
||||
obwohl sie zu 95 % deckt.
|
||||
|
||||
Derselbe Fehler wie an der Anmeldekarte heute Nachmittag, und
|
||||
genau derselbe Grund: Körnung gehört auf eine EIGENE Ebene mit
|
||||
`mix-blend-mode: overlay` und 3 bis 4 Prozent -- so wie bei den
|
||||
Kacheln der Startseite. Auf einer geteilten Ebene ist sie kein
|
||||
Material, sondern ein grauer Schleier. */
|
||||
opacity: .5;
|
||||
}
|
||||
.willkommen > * { position: relative; z-index: 1; }
|
||||
|
||||
.willkommen__reihe {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.willkommen__text { min-width: 0; flex: 1 1 260px; }
|
||||
|
||||
/* Rechts: Glocke neben der Uhr, beide rechtsbündig. `margin-left: auto`
|
||||
statt `justify-content: space-between` am Elternteil -- so bleibt die
|
||||
Gruppe auch dann rechts, wenn der Text davor kurz ist. */
|
||||
.willkommen__rechts {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
margin-left: auto; flex: 0 0 auto;
|
||||
}
|
||||
/* DER PLATZ WIRD RESERVIERT, NICHT NACHTRÄGLICH GENOMMEN.
|
||||
|
||||
Hier stand `:empty { display: none }` -- und das ist genau der Fehler,
|
||||
den die Kachel darunter schon einmal gemacht hat: Die Glocke wird
|
||||
erst nach der ersten Abfrage eingehängt, und bis dahin war der Platz
|
||||
0 px breit. In dem Moment, in dem sie erscheint, wächst die Zeile,
|
||||
und alles darunter rutscht.
|
||||
|
||||
Ein Sprung ist kein Schönheitsfehler, sondern der Grund, warum man
|
||||
auf den falschen Knopf drückt: Man zielt auf etwas, und im Moment des
|
||||
Klicks rutscht es weg. Gemessen von pruef-tempo-workspace.
|
||||
|
||||
Also 46 px, immer -- ob die Glocke kommt oder nicht. Auf Geräten, auf
|
||||
denen es sie gar nicht gibt (iPhone im Browser), bleibt ein leerer
|
||||
Streifen neben der Uhr; das ist der Preis, und er ist niedriger als
|
||||
ein springendes Bild. */
|
||||
.glocke-platz { width: 46px; height: 46px; flex: none; }
|
||||
|
||||
/* ---------- Die Uhr --------------------------------------------------
|
||||
ROT x BABYBLAU (07.09.2026, zweiter Entwurf).
|
||||
|
||||
Filipe: "die uhr rechts soll auch viel viel viel viel viel viel viel
|
||||
spezieller noch sein und soll eine mischung von rot und babyblau
|
||||
haben."
|
||||
|
||||
WAS EINE UHR TEUER AUSSEHEN LAESST, IST NICHT DIE FARBE, SONDERN DAS
|
||||
GEHAEUSE. Bei einer echten Uhr sieht man drei Dinge übereinander:
|
||||
einen METALLRAND, der das Licht von oben fängt; eine VERTIEFTE
|
||||
Scheibe darin; und ein GLAS darüber, das spiegelt. Genau diese drei
|
||||
Schichten sind hier gebaut -- und sie sind der Grund, warum das Ding
|
||||
jetzt wie ein Gegenstand aussieht und nicht wie ein Kreis mit Zahlen.
|
||||
|
||||
Die Farben kommen aus dem Haus, nicht aus dem Farbkasten: Rot ist
|
||||
Spicy Media, Babyblau ist DogFather. Dieselben zwei stehen im Kopf
|
||||
der Anmeldekarte nebeneinander und bilden im Motiv den Neonrahmen.
|
||||
|
||||
Beide Verlaeufe stehen im SVG (siehe start.html) und laufen
|
||||
GEGENEINANDER -- der Stundenring rot -> blau, der Sekundenring blau
|
||||
-> rot. Wo der eine warm ist, ist der andere kuehl; so bleiben sie
|
||||
auseinanderzuhalten, wo sie sich ueberlagern.
|
||||
-------------------------------------------------------------------- */
|
||||
.uhr {
|
||||
position: relative;
|
||||
width: 112px; height: 112px; flex: none;
|
||||
display: grid; place-items: center;
|
||||
border-radius: 50%;
|
||||
/* SCHICHT 1: der Metallrand. Ein Verlauf von hell (oben links, wo das
|
||||
Licht herkommt) nach dunkel und wieder etwas heller unten rechts --
|
||||
so sieht eine gedrehte Metallfassung aus. Als `padding` gebaut,
|
||||
damit die Scheibe darin sitzt statt daneben. */
|
||||
padding: 3px;
|
||||
background:
|
||||
linear-gradient(150deg,
|
||||
rgba(255, 255, 255, .20) 0%,
|
||||
rgba(255, 120, 132, .16) 26%,
|
||||
rgba(8, 12, 20, .9) 52%,
|
||||
rgba(143, 216, 255, .16) 78%,
|
||||
rgba(255, 255, 255, .10) 100%);
|
||||
box-shadow:
|
||||
/* Der Rand wirft nach aussen einen sehr weichen zweifarbigen
|
||||
Schein -- rot oben links, blau unten rechts, wie der Rahmen im
|
||||
Motiv. Beides weit unter der Schwelle, an der es blendet. */
|
||||
-3px -3px 22px -12px rgba(255, 95, 109, .55),
|
||||
3px 3px 22px -12px rgba(143, 216, 255, .55),
|
||||
0 12px 26px -14px rgba(0, 0, 0, .95);
|
||||
}
|
||||
/* SCHICHT 2: die vertiefte Scheibe. Eigene Ebene, damit der Metallrand
|
||||
darum stehen bleibt. */
|
||||
.uhr::before {
|
||||
content: ""; position: absolute; inset: 3px; border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .055), transparent 58%),
|
||||
radial-gradient(circle at 50% 50%, #0c121e 58%, #05080e 100%);
|
||||
box-shadow:
|
||||
inset 0 2px 6px -2px rgba(0, 0, 0, .95),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, .05);
|
||||
}
|
||||
/* Die Skala: sechzig feine Striche, aus EINEM sich wiederholenden
|
||||
Kegelverlauf. Sechzig Elemente im HTML waeren dieselbe Optik mit
|
||||
sechzig Elementen mehr im Baum. Jeder fuenfte Strich ist kraeftiger
|
||||
-- das ist der Unterschied zwischen "Punkte im Kreis" und "Skala". */
|
||||
.uhr__skala {
|
||||
position: absolute; inset: 9px; border-radius: 50%;
|
||||
background:
|
||||
repeating-conic-gradient(from 0deg,
|
||||
rgba(255, 145, 155, .55) 0deg 1deg,
|
||||
transparent 1deg 30deg),
|
||||
repeating-conic-gradient(from 0deg,
|
||||
rgba(150, 186, 220, .26) 0deg 0.5deg,
|
||||
transparent 0.5deg 6deg);
|
||||
-webkit-mask: radial-gradient(circle, transparent 0 74%, #000 74% 86%, transparent 86%);
|
||||
mask: radial-gradient(circle, transparent 0 74%, #000 74% 86%, transparent 86%);
|
||||
opacity: .65;
|
||||
pointer-events: none; z-index: 1;
|
||||
}
|
||||
/* SCHICHT 3: das Glas. Eine Spiegelung von oben links ueber die Kuppe,
|
||||
dazu ein hauchfeiner heller Bogen am oberen Rand -- die Kante der
|
||||
Scheibe. Ohne diesen Bogen wirkt die Uhr flach. */
|
||||
.uhr__glas {
|
||||
position: absolute; inset: 3px; border-radius: 50%;
|
||||
background:
|
||||
linear-gradient(146deg,
|
||||
rgba(255, 255, 255, .13) 0%,
|
||||
rgba(255, 255, 255, .03) 20%,
|
||||
transparent 44%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
|
||||
pointer-events: none; z-index: 3;
|
||||
}
|
||||
.uhr__ring {
|
||||
position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
|
||||
/* Bei Null soll der Ring OBEN beginnen, nicht rechts. */
|
||||
transform: rotate(-90deg);
|
||||
z-index: 2;
|
||||
overflow: visible;
|
||||
}
|
||||
.uhr__bahn, .uhr__minute, .uhr__zeiger {
|
||||
fill: none; stroke-linecap: round;
|
||||
stroke-dasharray: 276.46;
|
||||
}
|
||||
.uhr__bahn { stroke: rgba(150, 186, 220, .10); stroke-width: 4; }
|
||||
/* Der Stundenstand: breit und gedeckt, im Verlauf Rot -> Babyblau. Er
|
||||
aendert sich einmal pro Minute und darf nicht um Aufmerksamkeit
|
||||
bitten -- deshalb kein Leuchten. */
|
||||
.uhr__minute {
|
||||
stroke: url(#uhr-lauf);
|
||||
stroke-width: 4;
|
||||
stroke-dashoffset: 276.46;
|
||||
opacity: .72;
|
||||
}
|
||||
/* Die Sekunde: schmaler, heller, gegenlaeufig gefaerbt und mit einem
|
||||
Hauch Leuchten. */
|
||||
.uhr__zeiger {
|
||||
stroke: url(#uhr-sekunde); stroke-width: 2;
|
||||
stroke-dashoffset: 276.46;
|
||||
filter: drop-shadow(0 0 3px rgba(168, 228, 255, .75));
|
||||
}
|
||||
/* Der Kopf am Ende des Sekundenbogens -- ein Punkt, der mitlaeuft.
|
||||
Das ist die eine Stelle, an der sich sichtbar etwas BEWEGT, und
|
||||
deshalb die, an der das Auge merkt, dass die Seite lebt. */
|
||||
.uhr__kopf-schein {
|
||||
fill: rgba(168, 228, 255, .28);
|
||||
filter: blur(1.2px);
|
||||
}
|
||||
.uhr__kopf-kern {
|
||||
fill: #eaf7ff;
|
||||
filter: drop-shadow(0 0 4px rgba(168, 228, 255, .95));
|
||||
}
|
||||
.uhr__mitte {
|
||||
position: relative; z-index: 4;
|
||||
display: grid; justify-items: center; gap: 2px; line-height: 1;
|
||||
}
|
||||
.uhr__zeit {
|
||||
font-size: 1.46rem; font-weight: 700; letter-spacing: -.015em;
|
||||
/* Gleiche Zifferbreite: Ohne sie zappelt die Anzeige bei jedem
|
||||
Minutenwechsel, weil die 1 schmaler ist als die 8. */
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #f2f8ff;
|
||||
/* DIE MISCHUNG IM TEXT, ohne Verlaufsschrift: zwei Schatten, einer
|
||||
rot von links, einer babyblau von rechts. Ein Verlauf IN der
|
||||
Schrift (background-clip: text) wuerde im Windows-Kontrastmodus zu
|
||||
unsichtbarer Schrift -- derselbe Grund, aus dem die Ueberschrift
|
||||
daneben eine feste Farbe traegt. */
|
||||
text-shadow:
|
||||
-6px 0 16px rgba(255, 95, 109, .38),
|
||||
6px 0 16px rgba(143, 216, 255, .42);
|
||||
}
|
||||
.uhr__sek {
|
||||
/* .74rem = 11,84 px. Bei .68rem waren es 10,88 -- unter der Grenze von
|
||||
11,5, die pruef-css-klassen zieht, und sie hat recht: Diese Ziffern
|
||||
stehen gesperrt und in Versalhöhe, dadurch wirken sie noch kleiner
|
||||
als die Zahl sagt. */
|
||||
font-size: .74rem; font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: .18em; text-indent: .18em;
|
||||
padding: 1px 6px 1px 7px;
|
||||
border-radius: 999px;
|
||||
color: #cfe9fb;
|
||||
background: rgba(143, 216, 255, .10);
|
||||
box-shadow: inset 0 0 0 1px rgba(143, 216, 255, .16);
|
||||
}
|
||||
|
||||
/* Die Glocke in der Kachel wird in start.css gestaltet und nicht hier.
|
||||
|
||||
Grund (07.09.2026, gefunden von pruef-css-klassen): `glocke.js` laeuft
|
||||
auf ALLEN siebzehn Seiten und setzt die Klasse `glocke--kachel`,
|
||||
sobald es einen Platz dafuer gibt. Heute gibt es den nur hier -- aber
|
||||
die Regel gehoert dorthin, wo das Skript sie brauchen KANN, nicht
|
||||
dorthin, wo es sie heute zufaellig braucht. Sonst sieht die Glocke
|
||||
auf der naechsten Seite, die einen Platz bekommt, falsch aus, und
|
||||
niemand sucht den Fehler in der Aufteilung der Stildateien.
|
||||
|
||||
Die Pruefung hat genau das gemeldet: "gestaltet, aber nicht auf ihrer
|
||||
Seite -- fehlt auf 17 Seiten". */
|
||||
|
||||
@media (max-width: 620px) {
|
||||
/* Auf dem Handy rückt die Gruppe unter den Gruß und die Uhr wird
|
||||
kleiner -- 108 px neben einer Überschrift lassen für den Namen
|
||||
keine Zeile mehr übrig. */
|
||||
.willkommen { padding: 18px 16px; }
|
||||
.willkommen__rechts { margin-left: 0; width: 100%; justify-content: flex-start; }
|
||||
.uhr { width: 88px; height: 88px; }
|
||||
.uhr__zeit { font-size: 1.18rem; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
/* Die Uhr springt ohnehin -- hier gibt es nichts abzuschalten. Die
|
||||
Zeile steht trotzdem da, damit der nächste, der einen weichen
|
||||
Zeiger einbaut, sie findet. */
|
||||
.uhr__zeiger, .uhr__minute { transition: none; }
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.uhr { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
|
||||
.uhr__skala, .uhr__glas { display: none; }
|
||||
}
|
||||
+71
-252
@@ -4205,261 +4205,20 @@ body[data-fremde-sicht="ja"]::after {
|
||||
.kachel__zeichen::after { display: none; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
DIE BEGRÜSSUNGSKACHEL — mit Uhr und Glocke (07.09.2026)
|
||||
/* Die Begrüßungskachel mit Uhr und Glocke steht seit dem 07.09.2026 in
|
||||
einer EIGENEN Datei: assets/css/heim.css.
|
||||
|
||||
Wunsch Filipe: "ich will dass diese kacheln da auch übertrieben geil
|
||||
gemacht wird, wirklich seeeeeehr hochwertig mit einer runden
|
||||
digitalen uhr rechts in der kachel ... und der benachrichtigungs
|
||||
button soll auch von der leiste in diese kachel gesetzt werden."
|
||||
Grund war eine Grenze, die zu Recht anschlug: start.css lief über
|
||||
200 KB (pruef-struktur). Die Datei wird von DREIZEHN Seiten geladen --
|
||||
Uhr, Zifferblatt, Glockenmulde und Begrüßungskachel braucht aber
|
||||
genau EINE. Zwölf Seiten haben also Regeln heruntergeladen, die sie
|
||||
nie anwenden.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
WARUM DIE UHR HIER RICHTIG IST UND NICHT NUR SCHÖN
|
||||
Aufteilen war deshalb die richtige Antwort und nicht Kürzen: Es macht
|
||||
start.css kleiner UND spart den anderen Seiten Bytes. Gemessen mit
|
||||
grep, bevor es verschoben wurde: `class="uhr"`, `willkommen` und
|
||||
`glocke-platz` kommen in keiner anderen HTML-Datei vor. */
|
||||
|
||||
Eine Uhr ist die einzige Angabe auf dieser Seite, die sich ändert,
|
||||
während man hinsieht. Genau das macht sie wertvoll: Sie sagt ohne ein
|
||||
Wort, dass die Seite LEBT -- dass die Zahlen daneben von jetzt sind
|
||||
und nicht von gestern Nacht. Eine Oberfläche, bei der man das nicht
|
||||
weiß, prüft man ständig nach.
|
||||
|
||||
Und sie steht neben dem Datum, das ohnehin dort steht. Zwei Angaben
|
||||
zur selben Frage gehören zusammen; das Datum oben und die Uhrzeit in
|
||||
der Fußzeile wären zwei halbe Antworten.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
ZWEI RINGE, NICHT EINER
|
||||
|
||||
Der innere Ring füllt sich in einer Minute, der äußere in einer
|
||||
Stunde. Das ist der Unterschied zwischen "eine Uhr, die tickt" und
|
||||
"eine Uhr, an der man den Stand der Stunde sieht" -- man erkennt aus
|
||||
dem Augenwinkel, ob die Stunde jung ist oder gleich vorbei.
|
||||
|
||||
Der Sekundenring läuft NICHT weich. Ein weicher Zeiger sieht teurer
|
||||
aus, kostet aber eine Bildberechnung pro Bild statt einer pro
|
||||
Sekunde, und auf einer Seite, die stundenlang offen steht, ist das
|
||||
der Unterschied zwischen einem warmen und einem kalten Rechner.
|
||||
Der Sprung ist außerdem ehrlicher: Die Anzeige ist digital.
|
||||
===================================================================== */
|
||||
|
||||
/* Die Kachel selbst: dasselbe Material wie die Bereichskacheln, damit
|
||||
nicht zwei Oberflächen nebeneinanderliegen. Sie hat KEINE eigene
|
||||
Farbschiene -- sie gehört zu keiner Kategorie, sie ist der Anfang. */
|
||||
.willkommen {
|
||||
position: relative;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: 4px 20px 20px 4px;
|
||||
background:
|
||||
linear-gradient(90deg,
|
||||
rgba(63, 189, 245, .10) 0%,
|
||||
rgba(63, 189, 245, .03) 14%,
|
||||
transparent 40%),
|
||||
linear-gradient(163deg,
|
||||
rgba(23, 31, 45, .95) 0%,
|
||||
rgba(11, 15, 24, .95) 58%,
|
||||
rgba(8, 11, 18, .95) 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .10),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, .50),
|
||||
inset 2px 0 0 -1px color-mix(in srgb, var(--akzent) 34%, transparent),
|
||||
0 2px 5px -2px rgba(0, 0, 0, .55),
|
||||
0 16px 34px -20px rgba(0, 0, 0, .88);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Die Leuchtschiene links -- dieselbe Sprache wie überall, hier im
|
||||
Hausakzent statt in einer Kategoriefarbe. */
|
||||
.willkommen::before {
|
||||
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
background: linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--akzent) 55%, #fff) 0%,
|
||||
var(--akzent) 26%,
|
||||
color-mix(in srgb, var(--akzent) 50%, transparent) 100%);
|
||||
box-shadow:
|
||||
0 0 9px 0 color-mix(in srgb, var(--akzent) 55%, transparent),
|
||||
3px 0 20px -3px color-mix(in srgb, var(--akzent) 42%, transparent);
|
||||
opacity: .9;
|
||||
z-index: 2;
|
||||
}
|
||||
/* Körnung und ein fester Glanz. Kein wandernder wie bei den Kacheln:
|
||||
Diese Fläche wird nicht angeklickt, also gibt es nichts zu quittieren. */
|
||||
.willkommen::after {
|
||||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(104deg,
|
||||
transparent 26%,
|
||||
rgba(255, 255, 255, .05) 40%,
|
||||
rgba(255, 255, 255, .085) 47%,
|
||||
rgba(255, 255, 255, .03) 55%,
|
||||
transparent 70%);
|
||||
/* KEINE Körnung auf DIESER Ebene (07.09.2026, gemessen).
|
||||
|
||||
Sie stand hier als zweite Schicht und hat die Deckkraft der
|
||||
Spiegelung geerbt -- 50 % eines mittelgrauen Rauschens heben jeden
|
||||
Bildpunkt um rund 30 Stufen an. Gemessen: rgb(56,44,58) statt der
|
||||
berechneten rgb(20,26,38), und über einer hellen Stelle des
|
||||
Motivs rgb(85,83,81). Die Karte sah dadurch durchsichtig aus,
|
||||
obwohl sie zu 95 % deckt.
|
||||
|
||||
Derselbe Fehler wie an der Anmeldekarte heute Nachmittag, und
|
||||
genau derselbe Grund: Körnung gehört auf eine EIGENE Ebene mit
|
||||
`mix-blend-mode: overlay` und 3 bis 4 Prozent -- so wie bei den
|
||||
Kacheln der Startseite. Auf einer geteilten Ebene ist sie kein
|
||||
Material, sondern ein grauer Schleier. */
|
||||
opacity: .5;
|
||||
}
|
||||
.willkommen > * { position: relative; z-index: 1; }
|
||||
|
||||
.willkommen__reihe {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.willkommen__text { min-width: 0; flex: 1 1 260px; }
|
||||
|
||||
/* Rechts: Glocke neben der Uhr, beide rechtsbündig. `margin-left: auto`
|
||||
statt `justify-content: space-between` am Elternteil -- so bleibt die
|
||||
Gruppe auch dann rechts, wenn der Text davor kurz ist. */
|
||||
.willkommen__rechts {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
margin-left: auto; flex: 0 0 auto;
|
||||
}
|
||||
/* DER PLATZ WIRD RESERVIERT, NICHT NACHTRÄGLICH GENOMMEN.
|
||||
|
||||
Hier stand `:empty { display: none }` -- und das ist genau der Fehler,
|
||||
den die Kachel darunter schon einmal gemacht hat: Die Glocke wird
|
||||
erst nach der ersten Abfrage eingehängt, und bis dahin war der Platz
|
||||
0 px breit. In dem Moment, in dem sie erscheint, wächst die Zeile,
|
||||
und alles darunter rutscht.
|
||||
|
||||
Ein Sprung ist kein Schönheitsfehler, sondern der Grund, warum man
|
||||
auf den falschen Knopf drückt: Man zielt auf etwas, und im Moment des
|
||||
Klicks rutscht es weg. Gemessen von pruef-tempo-workspace.
|
||||
|
||||
Also 46 px, immer -- ob die Glocke kommt oder nicht. Auf Geräten, auf
|
||||
denen es sie gar nicht gibt (iPhone im Browser), bleibt ein leerer
|
||||
Streifen neben der Uhr; das ist der Preis, und er ist niedriger als
|
||||
ein springendes Bild. */
|
||||
.glocke-platz { width: 46px; height: 46px; flex: none; }
|
||||
|
||||
/* ---------- Die Uhr -------------------------------------------------- */
|
||||
.uhr {
|
||||
position: relative;
|
||||
width: 108px; height: 108px; flex: none;
|
||||
display: grid; place-items: center;
|
||||
border-radius: 50%;
|
||||
/* Das Gehäuse: außen ein Lichtsaum, innen eine dunkle Scheibe. */
|
||||
background:
|
||||
radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .05), transparent 62%),
|
||||
radial-gradient(circle at 50% 50%, #0d131f 62%, #070a11 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .12),
|
||||
inset 0 -2px 6px -3px rgba(0, 0, 0, .9),
|
||||
0 0 0 1px rgba(150, 186, 220, .10),
|
||||
0 10px 24px -14px rgba(0, 0, 0, .9);
|
||||
}
|
||||
/* Die Skala: sechzig feine Striche, aus EINEM sich wiederholenden
|
||||
Kegelverlauf. Sechzig Elemente im HTML wären dieselbe Optik mit
|
||||
sechzig Elementen mehr im Baum. */
|
||||
.uhr__skala {
|
||||
position: absolute; inset: 7px; border-radius: 50%;
|
||||
background: repeating-conic-gradient(from 0deg,
|
||||
rgba(150, 186, 220, .30) 0deg 0.5deg,
|
||||
transparent 0.5deg 6deg);
|
||||
/* Nur ein schmaler Ring davon ist zu sehen -- der Rest wird
|
||||
ausgestanzt. */
|
||||
-webkit-mask: radial-gradient(circle, transparent 0 76%, #000 76% 84%, transparent 84%);
|
||||
mask: radial-gradient(circle, transparent 0 76%, #000 76% 84%, transparent 84%);
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Die Glasscheibe: eine Spiegelung von oben links über der Kuppe. */
|
||||
.uhr__glas {
|
||||
position: absolute; inset: 0; border-radius: 50%;
|
||||
background: linear-gradient(148deg,
|
||||
rgba(255, 255, 255, .10) 0%,
|
||||
rgba(255, 255, 255, .025) 22%,
|
||||
transparent 46%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.uhr__ring {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%;
|
||||
/* Bei Null soll der Ring OBEN beginnen, nicht rechts. */
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.uhr__bahn, .uhr__minute, .uhr__zeiger {
|
||||
fill: none; stroke-linecap: round;
|
||||
stroke-dasharray: 276.46;
|
||||
}
|
||||
.uhr__bahn { stroke: rgba(150, 186, 220, .11); stroke-width: 3.5; }
|
||||
/* Der Stundenstand: gedeckt, breit, ruhig -- er ändert sich einmal pro
|
||||
Minute und darf nicht um Aufmerksamkeit bitten. */
|
||||
.uhr__minute {
|
||||
stroke: color-mix(in srgb, var(--violett) 62%, transparent);
|
||||
stroke-width: 3.5;
|
||||
stroke-dashoffset: 276.46;
|
||||
}
|
||||
/* Die Sekunde: schmaler, heller, mit einem Hauch Leuchten. */
|
||||
.uhr__zeiger {
|
||||
stroke: var(--akzent); stroke-width: 2.2;
|
||||
stroke-dashoffset: 276.46;
|
||||
filter: drop-shadow(0 0 3px color-mix(in srgb, var(--akzent) 70%, transparent));
|
||||
}
|
||||
.uhr__mitte { display: grid; justify-items: center; gap: 1px; line-height: 1; }
|
||||
.uhr__zeit {
|
||||
font-size: 1.42rem; font-weight: 700; letter-spacing: -.01em;
|
||||
/* Gleiche Zifferbreite: Ohne sie zappelt die Anzeige bei jedem
|
||||
Minutenwechsel, weil die 1 schmaler ist als die 8. */
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #eaf2fb;
|
||||
text-shadow: 0 0 18px rgba(63, 189, 245, .28);
|
||||
}
|
||||
.uhr__sek {
|
||||
font-size: .72rem; font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: .16em; text-indent: .16em;
|
||||
color: color-mix(in srgb, var(--akzent) 55%, #ffffff);
|
||||
}
|
||||
|
||||
/* ---------- Die Glocke, wenn sie in der Kachel sitzt ------------------ */
|
||||
/* In der Leiste ist sie ein Knopf unter Knöpfen. Hier steht sie allein
|
||||
neben der Uhr und wird deshalb rund -- sie nimmt die Form ihrer
|
||||
Nachbarin auf, statt als Rechteck danebenzustehen. */
|
||||
.glocke--kachel {
|
||||
width: 46px; height: 46px; padding: 0;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
}
|
||||
.glocke--kachel .glocke__text {
|
||||
/* Der Text bleibt für Vorleseprogramme da, verschwindet aber vom
|
||||
Bildschirm: Neben einer Uhr ist Platz für ein Zeichen, nicht für
|
||||
eine Beschriftung. */
|
||||
position: absolute;
|
||||
width: 1px; height: 1px; margin: -1px; padding: 0;
|
||||
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
|
||||
}
|
||||
.glocke--kachel .glocke__zeichen { width: 19px; height: 19px; }
|
||||
|
||||
@media (max-width: 620px) {
|
||||
/* Auf dem Handy rückt die Gruppe unter den Gruß und die Uhr wird
|
||||
kleiner -- 108 px neben einer Überschrift lassen für den Namen
|
||||
keine Zeile mehr übrig. */
|
||||
.willkommen { padding: 18px 16px; }
|
||||
.willkommen__rechts { margin-left: 0; width: 100%; justify-content: flex-start; }
|
||||
.uhr { width: 88px; height: 88px; }
|
||||
.uhr__zeit { font-size: 1.18rem; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
/* Die Uhr springt ohnehin -- hier gibt es nichts abzuschalten. Die
|
||||
Zeile steht trotzdem da, damit der nächste, der einen weichen
|
||||
Zeiger einbaut, sie findet. */
|
||||
.uhr__zeiger, .uhr__minute { transition: none; }
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.uhr { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
|
||||
.uhr__skala, .uhr__glas { display: none; }
|
||||
}
|
||||
|
||||
|
||||
/* =====================================================================
|
||||
@@ -4714,3 +4473,63 @@ body[data-fremde-sicht="ja"]::after {
|
||||
.kachel__unter { font-size: .72rem; }
|
||||
.kachel__wasserzeichen { width: 96px; height: 96px; }
|
||||
}
|
||||
|
||||
/* ---------- Die Glocke, wenn sie in der Kachel sitzt ------------------ */
|
||||
/* In der Leiste ist sie ein Knopf unter Knöpfen. Hier steht sie allein
|
||||
neben der Uhr und wird deshalb rund -- sie nimmt die Form ihrer
|
||||
Nachbarin auf, statt als Rechteck danebenzustehen. */
|
||||
/* Sie bekommt dieselbe Bauart wie die Uhr daneben: ein Metallrand
|
||||
aussen, eine vertiefte Scheibe darin. Zwei runde Dinge nebeneinander,
|
||||
die aus verschiedenem Material sind, sehen zusammengesucht aus --
|
||||
dasselbe Material macht daraus ein Paar. Kleiner als die Uhr, weil
|
||||
sie die Nebensache ist. */
|
||||
.glocke--kachel {
|
||||
position: relative;
|
||||
width: 48px; height: 48px; padding: 3px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
background:
|
||||
linear-gradient(150deg,
|
||||
rgba(255, 255, 255, .16) 0%,
|
||||
rgba(255, 120, 132, .13) 28%,
|
||||
rgba(8, 12, 20, .9) 54%,
|
||||
rgba(143, 216, 255, .13) 80%,
|
||||
rgba(255, 255, 255, .08) 100%);
|
||||
box-shadow:
|
||||
-2px -2px 16px -11px rgba(255, 95, 109, .5),
|
||||
2px 2px 16px -11px rgba(143, 216, 255, .5),
|
||||
0 8px 20px -12px rgba(0, 0, 0, .9);
|
||||
transition: transform var(--tempo), box-shadow var(--tempo);
|
||||
}
|
||||
.glocke--kachel::before {
|
||||
content: ""; position: absolute; inset: 3px; border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .05), transparent 58%),
|
||||
radial-gradient(circle at 50% 50%, #0c121e 58%, #05080e 100%);
|
||||
box-shadow:
|
||||
inset 0 2px 5px -2px rgba(0, 0, 0, .95),
|
||||
inset 0 1px 0 rgba(255, 255, 255, .10);
|
||||
}
|
||||
/* Beim Zeigen hebt sie sich einen Pixel und ihr Schein wird kraeftiger
|
||||
-- dieselbe Sprache wie ueberall: naeherkommen statt aufleuchten. */
|
||||
.glocke--kachel:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
-3px -3px 20px -9px rgba(255, 95, 109, .7),
|
||||
3px 3px 20px -9px rgba(143, 216, 255, .7),
|
||||
0 10px 24px -12px rgba(0, 0, 0, .95);
|
||||
}
|
||||
.glocke--kachel .glocke__zeichen { position: relative; z-index: 1; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.glocke--kachel, .glocke--kachel:hover { transform: none; }
|
||||
}
|
||||
.glocke--kachel .glocke__text {
|
||||
/* Der Text bleibt für Vorleseprogramme da, verschwindet aber vom
|
||||
Bildschirm: Neben einer Uhr ist Platz für ein Zeichen, nicht für
|
||||
eine Beschriftung. */
|
||||
position: absolute;
|
||||
width: 1px; height: 1px; margin: -1px; padding: 0;
|
||||
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
|
||||
}
|
||||
.glocke--kachel .glocke__zeichen { width: 20px; height: 20px; }
|
||||
|
||||
@@ -301,6 +301,7 @@
|
||||
if (!zeit || !zeiger) return;
|
||||
const p = (n) => String(n).padStart(2, '0');
|
||||
|
||||
const kopf = $('uhr-kopf');
|
||||
const takt = () => {
|
||||
const j = new Date();
|
||||
zeit.textContent = `${p(j.getHours())}:${p(j.getMinutes())}`;
|
||||
@@ -309,6 +310,12 @@
|
||||
SVG im Stil um 90 Grad zurückgedreht ist. */
|
||||
zeiger.style.strokeDashoffset = String(UHR_UMFANG * (1 - j.getSeconds() / 60));
|
||||
if (minute) minute.style.strokeDashoffset = String(UHR_UMFANG * (1 - j.getMinutes() / 60));
|
||||
/* Der leuchtende Kopf sitzt am ENDE des Sekundenbogens. Er wird um
|
||||
die Mitte gedreht -- 6 Grad je Sekunde. Die Drehung passiert im
|
||||
SVG-Koordinatensystem (0..100), NICHT im Stil: Dort liegt schon
|
||||
die -90-Grad-Drehung des ganzen Rings, und zwei Drehungen an
|
||||
zwei Stellen laufen beim nächsten Umbau auseinander. */
|
||||
if (kopf) kopf.setAttribute('transform', `rotate(${j.getSeconds() * 6} 50 50)`);
|
||||
/* Der volle Zeitpunkt für Vorleseprogramme -- sichtbar steht dort
|
||||
nur die Uhrzeit, vorgelesen wird der ganze Satz. */
|
||||
const uhr = $('uhr');
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -211,10 +211,10 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/aufgaben.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/aufgaben.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/automation.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/automation.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -134,10 +134,10 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/automation.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/automation.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+13
-13
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/bereich.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/bereich.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -143,14 +143,14 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/checkliste.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/ampel.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/schulung.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/vorlagen.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereich.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/checkliste.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/ampel.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/schulung.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/vorlagen.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereich.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+10
-10
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/calls.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/calls.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -76,11 +76,11 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/ki.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/calls.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/ki.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/calls.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+8
-8
@@ -9,16 +9,16 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<!-- 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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/chat.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/chat.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -154,9 +154,9 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script src="assets/js/bereiche.js?v=202609070358"></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358"></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358"></script>
|
||||
<script src="assets/js/chat.js?v=202609070358"></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414"></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414"></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414"></script>
|
||||
<script src="assets/js/chat.js?v=202609070414"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+11
-11
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/content.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/content.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -166,12 +166,12 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/checkliste.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/vorlagen.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/content.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/checkliste.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/vorlagen.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/content.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/dateien.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/dateien.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -95,10 +95,10 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/dateien.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/dateien.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -27,7 +27,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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="gate">
|
||||
@@ -186,6 +186,6 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/gate.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/gate.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+10
-10
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/kalender.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/kalender.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -257,11 +257,11 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kalender.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kalender-abo.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kalender.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kalender-abo.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/leistung.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/leistung.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -211,10 +211,10 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358"></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358"></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358"></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358"></script>
|
||||
<script src="assets/js/leistung.js?v=202609070358"></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414"></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414"></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414"></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414"></script>
|
||||
<script src="assets/js/leistung.js?v=202609070414"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/personen.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/personen.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -123,10 +123,10 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/personen.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/personen.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+10
-10
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/profil.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/profil.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -201,11 +201,11 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/steckbrief.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/profil.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/steckbrief.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/profil.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+10
-10
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/report.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/report.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -93,11 +93,11 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/ki.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/report.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/ki.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/report.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/scouting.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/scouting.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -126,10 +126,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/scouting.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/scouting.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+41
-7
@@ -9,8 +9,11 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<!-- 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=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -64,11 +67,42 @@
|
||||
<!-- Die Uhr ist eine ANZEIGE, kein Bedienelement: role="timer"
|
||||
mit aria-live="off". Eine Uhr, die sich jede Sekunde
|
||||
vorlesen lässt, macht jede Vorleseausgabe unbenutzbar. -->
|
||||
<!-- ROT UND BABYBLAU (07.09.2026, Wunsch Filipe: "soll eine
|
||||
mischung von rot und babyblau haben").
|
||||
|
||||
Die beiden Farben sind nicht frei gewählt: Rot ist Spicy
|
||||
Media, Babyblau ist DogFather -- dieselben zwei, die oben
|
||||
im Kopf der Anmeldekarte nebeneinanderstehen und die im
|
||||
Motiv den Neonrahmen bilden. Die Uhr trägt damit dieselbe
|
||||
Handschrift wie alles andere, statt eine dritte einzuführen.
|
||||
|
||||
Zwei Verläufe, absichtlich GEGENLÄUFIG: Der Stundenring
|
||||
geht von Rot nach Babyblau, der Sekundenring zurück. Wo der
|
||||
eine warm ist, ist der andere kühl -- so bleiben die beiden
|
||||
Ringe auseinanderzuhalten, auch wenn sie sich überlagern. -->
|
||||
<div class="uhr" id="uhr" role="timer" aria-live="off">
|
||||
<svg class="uhr__ring" viewBox="0 0 100 100" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="uhr-lauf" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#ff5f6d" />
|
||||
<stop offset="52%" stop-color="#c97ba8" />
|
||||
<stop offset="100%" stop-color="#8fd8ff" />
|
||||
</linearGradient>
|
||||
<linearGradient id="uhr-sekunde" x1="1" y1="1" x2="0" y2="0">
|
||||
<stop offset="0%" stop-color="#a8e4ff" />
|
||||
<stop offset="100%" stop-color="#ff7b84" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle class="uhr__bahn" cx="50" cy="50" r="44" />
|
||||
<circle class="uhr__minute" cx="50" cy="50" r="44" id="uhr-minute" />
|
||||
<circle class="uhr__zeiger" cx="50" cy="50" r="44" id="uhr-zeiger" />
|
||||
<!-- Der leuchtende Kopf am Ende des Sekundenbogens. Er wird
|
||||
GEDREHT statt neu berechnet -- eine Drehung ist eine
|
||||
Zahl, eine Position wären zwei plus Sinus und Kosinus. -->
|
||||
<g class="uhr__kopf" id="uhr-kopf">
|
||||
<circle class="uhr__kopf-schein" cx="50" cy="6" r="4.6" />
|
||||
<circle class="uhr__kopf-kern" cx="50" cy="6" r="2.1" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="uhr__skala" aria-hidden="true"></span>
|
||||
<span class="uhr__glas" aria-hidden="true"></span>
|
||||
@@ -187,10 +221,10 @@
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/start.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/start.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+10
-10
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -72,11 +72,11 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/ki.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/startcheck.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/ki.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/startcheck.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/profil.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/profil.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -113,10 +113,10 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/steckbrief.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/steckbrief.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -82,10 +82,10 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/uebersicht.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/uebersicht.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
<meta name="theme-color" content="#0674b9" />
|
||||
<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=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/wissen.css?v=202609070358" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070414" />
|
||||
<link rel="stylesheet" href="assets/css/wissen.css?v=202609070414" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -177,10 +177,10 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wissen.js?v=202609070358" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/bereiche.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/glocke.js?v=202609070414" defer></script>
|
||||
<script src="assets/js/wissen.js?v=202609070414" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user