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

Startseite: groessere Kacheln, und das Licht folgt dem Zeiger

Browse Source 
Rueckmeldung Filipe: "richtige richtung, die sollen nur bissl groesser
sein und noch bissl mehr spezieller."

GROESSER, gemessen statt geglaubt:
  Zeichenfeld  38 -> 46 px (Dashboard 56)
  Name        .93 -> 1.02 rem (Dashboard 1.18)
  Polsterung   14 -> 18 px, Ecken 15 -> 18 px
  Kachelhoehe        rund 60 -> ueber 80 px

Dabei fiel der eigene Test von vorhin sofort ein: Bei 880 px Seitenbreite
sind drei Kacheln je 285 px breit, und in den groesseren Schriften brach
der Text an ZWOELF Stellen ab. Statt die Schrift wieder zu verkleinern
bekommt die Startseite die volle Breite (1240 px) -- das ist die
ehrlichere Loesung. Hinweise, Begruessung und Fusstext behalten ihr Mass
von 940 px: Eine Textzeile ueber 1240 px zu ziehen macht sie nicht
lesbarer, sondern anstrengender.

SPEZIELLER, drei Dinge:

1. DAS LICHT FOLGT DEM ZEIGER. Jede Kachel traegt einen weichen
   Lichtfleck. Er sitzt ruhend oben links und wandert unter dem Zeiger
   mit. Kein Blinken, keine Bewegung des Inhalts -- es wird nur an einer
   anderen Stelle heller. Das ist die Kleinigkeit, die man nicht sieht,
   sondern erst beim Benutzen merkt.

   EIN Zuhoerer fuer alle Kacheln statt siebzehn, und in einem Bild je
   Rahmen: pointermove feuert dutzendfach je Sekunde, wer bei jedem
   Ereignis in den Stil schreibt, laesst den Browser umsonst rechnen.
   Beim Verlassen zurueck in die Ruhelage -- sonst blieben die Kacheln
   nach einer Weile alle unterschiedlich beleuchtet stehen. Auf
   Fingerbedienung und bei "weniger Bewegung" bleibt es ganz aus; dort
   gibt es keinen Zeiger, dem etwas folgen koennte. Beides geprueft.

2. Eine feine helle Linie an der Oberkante jeder Kachel. Ein Pixel, kaum
   sichtbar -- aber die Kachel wirkt dadurch von oben beleuchtet statt
   aufgeklebt. Das Zeichenfeld bekommt denselben Lichtrand und einen
   Verlauf, wodurch es gepraegt statt gemalt wirkt.

3. Beim Ueberfahren: farbiger Schein unter der Kachel im eigenen Ton,
   die Kante links waechst von 3 auf 4 px, das Zeichen um 4 Prozent.
   Alles unter zwei Pixeln Bewegung.

Die Trennlinie der Gruppenueberschriften laeuft nach rechts aus, statt
hart abzubrechen -- eine durchgezogene Linie zerschneidet die Seite, eine
auslaufende gliedert sie nur.

47 Pruefungen. Neu darunter: Zeichenfeld und Schriftgroesse werden
gemessen ("sieht groesser aus" ist kein Nachweis), und das Licht wird mit
echten Mausbewegungen an drei Stellen geprueft.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-08-31 22:50:17 +02:00
co-authored by Claude Opus 5
parent d05a772ee4
commit e25a22149b
22 changed files with 305 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pruef-start-computer.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 449 KiB

After

Width:  |  Height:  |  Size: 698 KiB

pruef-start-creator.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 408 KiB

After

Width:  |  Height:  |  Size: 616 KiB

pruef-start-handy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 383 KiB

After

Width:  |  Height:  |  Size: 565 KiB

server/pruef-start-ansicht.mjs
+55
View File
@@ -98,6 +98,9 @@ const lesen = (seite) => seite.evaluate(() => ({
hinweise: [...document.querySelectorAll("#dran .dran__punkt")]
.filter((z) => z.offsetParent !== null).length,
hinweiseGesamt: document.querySelectorAll("#dran .dran__punkt").length,
zeichenGroesse: Math.round(document.querySelector(".kachel__zeichen")?.getBoundingClientRect().width || 0),
namenGroesse: Math.round(parseFloat(getComputedStyle(document.querySelector(".kachel__name")).fontSize) || 0),
kachelHoehe: Math.round(document.querySelectorAll(".kachel")[1]?.getBoundingClientRect().height || 0),
zahlenLeer: !document.getElementById("zahlen-leer")?.hidden,
zahlen: [...document.querySelectorAll(".zahl")].length,
ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth,
@@ -148,6 +151,13 @@ for (const [breite, wie] of [[1440, "Computer"], [390, "Handy"]]) {
ok(auf("LIVE-Analyse")?.zahl === "1", `der dringende Bereichspunkt (${auf("LIVE-Analyse")?.zahl})`);
ok(!auf("Wissens-Bibliothek")?.zahl, "wo nichts liegt, steht keine Zahl");
/* Die Kacheln sollen spürbar größer sein als vorher (Zeichenfeld 38px,
Name .93rem). Gemessen statt geglaubt -- "sieht größer aus" ist kein
Nachweis. */
ok(r.zeichenGroesse >= 46, `Zeichenfeld mindestens 46px (${r.zeichenGroesse}px)`);
ok(r.namenGroesse >= 16, `Name mindestens 16px (${r.namenGroesse}px)`);
ok(r.kachelHoehe >= 80, `Kachel mindestens 80px hoch (${r.kachelHoehe}px)`);
ok(r.abgeschnitten.length === 0,
`kein Text wird abgeschnitten (${r.abgeschnitten.join(" | ") || "keiner"})`);
ok(r.hinweise <= 4, `höchstens vier Hinweise sichtbar (${r.hinweise} von ${r.hinweiseGesamt})`);
@@ -206,6 +216,51 @@ console.log("\n=== Weniger Bewegung: keine Animation");
await kontext.close();
}
console.log("\n=== Das Licht folgt dem Zeiger");
{
const kontext = await browser.newContext({ viewport: { width: 1440, height: 1200 } });
const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001");
const kachel = seite.locator(".kachel").nth(1);
const kasten = await kachel.boundingBox();
const ruhe = await kachel.evaluate((k) => k.style.getPropertyValue("--mx") || "(Ruhelage)");
ok(ruhe === "(Ruhelage)", `ruhend keine eigene Position gesetzt (${ruhe})`);
await seite.mouse.move(kasten.x + kasten.width * 0.2, kasten.y + kasten.height * 0.3);
await seite.waitForTimeout(250);
const links = await kachel.evaluate((k) => k.style.getPropertyValue("--mx"));
await seite.mouse.move(kasten.x + kasten.width * 0.85, kasten.y + kasten.height * 0.6);
await seite.waitForTimeout(250);
const rechts = await kachel.evaluate((k) => k.style.getPropertyValue("--mx"));
console.log(` links: ${links} · rechts: ${rechts}`);
ok(parseFloat(links) < 40, `links steht der Fleck links (${links})`);
ok(parseFloat(rechts) > 60, `rechts steht er rechts (${rechts})`);
/* Beim Verlassen zurück in die Ruhelage. Ohne das blieben die Kacheln
nach einer Weile alle unterschiedlich beleuchtet stehen, ohne dass
jemand wüsste, warum. */
await seite.mouse.move(kasten.x - 250, kasten.y - 250);
await seite.waitForTimeout(250);
const danach = await kachel.evaluate((k) => k.style.getPropertyValue("--mx") || "(Ruhelage)");
ok(danach === "(Ruhelage)", `nach dem Verlassen wieder in Ruhe (${danach})`);
await kontext.close();
}
console.log("\n=== Ohne feinen Zeiger bleibt es aus");
{
const kontext = await browser.newContext({
viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true });
const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001");
await seite.touchscreen.tap(200, 700).catch(() => {});
await seite.waitForTimeout(200);
const gesetzt = await seite.evaluate(() =>
[...document.querySelectorAll(".kachel")].some((k) => k.style.getPropertyValue("--mx")));
ok(!gesetzt, "auf dem Handy wird nichts gesetzt");
await kontext.close();
}
await browser.close();
console.log(`\n${fehler === 0 ? "Alles in Ordnung." : fehler + " Prüfung(en) fehlgeschlagen."}`);
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
workspace/assets/css/start.css
+90 -44
View File
@@ -245,9 +245,14 @@ body.start {
.gruppe:last-child { margin-bottom: 0; }
.gruppe__kopf {
position: relative;
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px; padding-bottom: 9px;
border-bottom: 1px solid var(--rand);
margin-bottom: 14px; padding-bottom: 10px;
/* Die Trennlinie läuft nach rechts aus, statt hart abzubrechen --
eine durchgezogene Linie über die ganze Breite zerschneidet die
Seite, eine auslaufende gliedert sie nur. */
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, var(--rand-hell), transparent 70%) 1;
}
.gruppe__name {
margin: 0; font-size: .76rem; font-weight: 700;
@@ -257,7 +262,7 @@ body.start {
.kacheln {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 10px;
display: grid; gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@@ -274,15 +279,23 @@ body.start {
.kachel {
--ton: var(--akzent);
/* Wo der Zeiger steht. Wird von start.js gesetzt; die Mitte ist der
Rückfallwert, damit ohne Zeiger nichts springt. */
--mx: 50%;
--my: 0%;
position: relative;
border-radius: 15px;
border-radius: 18px;
background:
linear-gradient(155deg,
color-mix(in srgb, var(--ton) 9%, transparent),
rgba(255, 255, 255, .022) 45%);
color-mix(in srgb, var(--ton) 10%, transparent),
rgba(255, 255, 255, .022) 48%);
border: 1px solid var(--rand);
/* Die feine helle Linie an der Oberkante. Ein Pixel, kaum sichtbar --
aber die Kachel wirkt dadurch von oben beleuchtet statt aufgeklebt.
Das ist der Unterschied zwischen "Kasten" und "Objekt". */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
overflow: hidden;
transition: border-color var(--tempo), transform var(--tempo);
transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
.kachel[data-gross="ja"] { grid-column: span 2; }
@@ -290,98 +303,126 @@ body.start {
zeigt -- drei Pixel reichen, um eine Kachel wiederzuerkennen. */
.kachel::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--ton), transparent 90%);
opacity: .5;
transition: opacity var(--tempo);
background: linear-gradient(180deg, var(--ton), transparent 92%);
opacity: .55;
transition: opacity var(--tempo), width var(--tempo);
}
/* Der Schimmer beim Überfahren. Liegt still auf 0 und wird nur
eingeblendet -- nichts bewegt sich, es wird nur heller. */
/* Das Licht. Es liegt schwach auf der Kachel und FOLGT beim Überfahren
dem Zeiger -- das ist die Kleinigkeit, die man nicht sieht, sondern
erst beim Benutzen merkt. Kein Blinken, keine Bewegung des Inhalts:
Es wird nur an einer anderen Stelle heller.
Ruhend sitzt es in der oberen linken Ecke (--my: 0%), damit die
Kacheln auch ohne Zeiger von einer Seite beleuchtet wirken. */
.kachel::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120% 130% at 0% 0%,
color-mix(in srgb, var(--ton) 16%, transparent), transparent 62%);
opacity: 0;
background: radial-gradient(130% 150% at var(--mx) var(--my),
color-mix(in srgb, var(--ton) 20%, transparent), transparent 60%);
opacity: .38;
transition: opacity var(--tempo);
}
.kachel:hover {
border-color: color-mix(in srgb, var(--ton) 42%, var(--rand));
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--ton) 45%, var(--rand));
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .09),
0 10px 26px -14px color-mix(in srgb, var(--ton) 55%, transparent);
}
.kachel:hover::before { opacity: 1; }
.kachel:hover::before { opacity: 1; width: 4px; }
.kachel:hover::after { opacity: 1; }
.kachel:has(:focus-visible) { border-color: var(--ton); }
.kachel__link {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 12px;
padding: 14px 15px 14px 17px;
display: flex; align-items: center; gap: 14px;
padding: 18px 18px 18px 21px;
color: inherit; text-decoration: none;
}
.kachel__link:focus-visible {
outline: 2px solid var(--ton); outline-offset: -3px; border-radius: 13px;
outline: 2px solid var(--ton); outline-offset: -4px; border-radius: 15px;
}
/* Das Zeichen sitzt in einem eigenen kleinen Feld -- dadurch bekommt der
Ton eine Fläche, ohne dass die ganze Kachel farbig wird. */
/* Das Zeichen sitzt in einem eigenen Feld -- dadurch bekommt der Ton
eine Fläche, ohne dass die ganze Kachel farbig wird. Der Verlauf und
der innere Lichtrand darin lassen es geprägt statt gemalt wirken. */
.kachel__zeichen {
flex: none;
display: grid; place-items: center;
width: 38px; height: 38px; border-radius: 11px;
background: color-mix(in srgb, var(--ton) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--ton) 28%, transparent);
transition: background var(--tempo), border-color var(--tempo);
width: 46px; height: 46px; border-radius: 14px;
background:
linear-gradient(160deg,
color-mix(in srgb, var(--ton) 26%, transparent),
color-mix(in srgb, var(--ton) 9%, transparent));
border: 1px solid color-mix(in srgb, var(--ton) 30%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ton) 32%, transparent);
transition: background var(--tempo), border-color var(--tempo), transform var(--tempo);
}
.kachel:hover .kachel__zeichen {
background: color-mix(in srgb, var(--ton) 24%, transparent);
border-color: color-mix(in srgb, var(--ton) 52%, transparent);
background:
linear-gradient(160deg,
color-mix(in srgb, var(--ton) 40%, transparent),
color-mix(in srgb, var(--ton) 14%, transparent));
border-color: color-mix(in srgb, var(--ton) 58%, transparent);
transform: scale(1.04);
}
.kachel[data-gross="ja"] .kachel__zeichen { width: 44px; height: 44px; border-radius: 13px; }
.kachel[data-gross="ja"] .kachel__zeichen { width: 56px; height: 56px; border-radius: 17px; }
.kachel__svg {
width: 20px; height: 20px;
width: 23px; height: 23px;
fill: none; stroke: var(--ton);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.kachel[data-gross="ja"] .kachel__svg { width: 23px; height: 23px; }
.kachel[data-gross="ja"] .kachel__svg { width: 28px; height: 28px; }
.kachel__text { display: grid; gap: 1px; min-width: 0; }
.kachel__text { display: grid; gap: 3px; min-width: 0; }
.kachel__name {
font-size: .93rem; font-weight: 650; letter-spacing: -.005em;
font-size: 1.02rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kachel[data-gross="ja"] .kachel__name { font-size: 1.02rem; }
.kachel[data-gross="ja"] .kachel__name { font-size: 1.18rem; }
.kachel__unter {
font-size: .74rem; color: var(--text-still);
font-size: .78rem; color: var(--text-still); line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kachel[data-gross="ja"] .kachel__unter { font-size: .83rem; }
/* Die Zahl auf der Kachel. Sie ersetzt den Pfeil, wenn dort Arbeit
liegt -- eine Kachel, die "3" sagt, ist zehnmal mehr wert als eine,
die "öffnen" sagt. */
.kachel__zahl {
flex: none; margin-left: auto;
min-width: 26px; padding: 3px 9px;
text-align: center; font-size: .82rem; font-weight: 700;
min-width: 32px; padding: 5px 11px;
text-align: center; font-size: .9rem; font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ton);
background: color-mix(in srgb, var(--ton) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--ton) 34%, transparent);
background: color-mix(in srgb, var(--ton) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--ton) 36%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ton) 26%, transparent);
border-radius: 999px;
transition: background var(--tempo), border-color var(--tempo);
}
.kachel:hover .kachel__zahl {
background: color-mix(in srgb, var(--ton) 24%, transparent);
border-color: color-mix(in srgb, var(--ton) 55%, transparent);
}
.kachel__zahl[data-warn="ja"] {
color: var(--warn);
background: rgba(255, 154, 162, .12);
border-color: rgba(255, 154, 162, .42);
background: rgba(255, 154, 162, .13);
border-color: rgba(255, 154, 162, .44);
box-shadow: inset 0 1px 0 rgba(255, 154, 162, .28);
}
.kachel:hover .kachel__zahl[data-warn="ja"] {
background: rgba(255, 154, 162, .2); border-color: rgba(255, 154, 162, .62);
}
.kachel__pfeil {
flex: none; margin-left: auto;
color: var(--text-still); font-size: .9rem;
color: var(--text-still); font-size: 1rem;
transition: color var(--tempo), transform var(--tempo);
}
.kachel:hover .kachel__pfeil { color: var(--ton); transform: translateX(3px); }
.kachel:hover .kachel__pfeil { color: var(--ton); transform: translateX(4px); }
/* Gestaffelter Einlauf. Die Verzögerung kommt aus --nr, das start.js je
Kachel setzt. Steht in einer no-preference-Abfrage, damit bei
@@ -453,6 +494,11 @@ body.start {
Steht vor den Zahlen. Zahlen sagen, WIE VIEL anliegt -- diese Liste
sagt, WAS zu tun ist. Nur drei Stufen, und nur die oberste ist farbig:
Waere alles hervorgehoben, waere nichts hervorgehoben. */
/* Die Seite ist breit, damit die Kacheln Platz haben. Eine Zeile Text
ueber 1240 px zu ziehen macht sie aber nicht lesbarer, sondern
anstrengender -- Hinweise und Begruessung behalten deshalb ihr Mass. */
.willkommen, .dran__liste, .inhalt .fuss { max-width: 940px; }
.dran { margin-bottom: 30px; }
.dran__liste { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
workspace/assets/js/start.js
+51
View File
@@ -257,6 +257,57 @@
abschnitt.append(liste);
ziel.append(abschnitt);
}
lichtFolgen(ziel);
}
/* ---------- Das Licht folgt dem Zeiger -----------------------------------
Die Kachel trägt einen weichen Lichtfleck. Er sitzt ruhend oben links
und wandert unter dem Zeiger mit. Kein Blinken, keine Bewegung des
Inhalts -- es wird nur an einer anderen Stelle heller. Genau das ist
der Unterschied zwischen "sieht gut aus" und "fühlt sich gut an".
EIN Zuhörer für alle Kacheln statt siebzehn einzelner. Und in einem
Bild je Rahmen: pointermove feuert dutzendfach je Sekunde; wer bei
jedem Ereignis in den Stil schreibt, lässt den Browser das Bild
mehrfach umsonst neu berechnen.
Auf Fingerbedienung und bei "weniger Bewegung" bleibt es ganz aus --
dort gibt es keinen Zeiger, dem etwas folgen könnte. */
function lichtFolgen(wurzel) {
const feinerZeiger = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
const ruhig = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!feinerZeiger || ruhig) return;
let warten = false;
let letzte = null;
wurzel.addEventListener('pointermove', (e) => {
const kachel = e.target.closest?.('.kachel');
if (!kachel) return;
letzte = { kachel, x: e.clientX, y: e.clientY };
if (warten) return;
warten = true;
requestAnimationFrame(() => {
warten = false;
if (!letzte) return;
const { kachel: k, x, y } = letzte;
const r = k.getBoundingClientRect();
k.style.setProperty('--mx', ((x - r.left) / r.width * 100).toFixed(1) + '%');
k.style.setProperty('--my', ((y - r.top) / r.height * 100).toFixed(1) + '%');
});
});
/* Beim Verlassen zurück in die Ruhelage. Ohne das bliebe der Fleck
dort stehen, wo der Zeiger die Kachel verlassen hat -- und die
Kacheln sähen nach einer Weile alle unterschiedlich beleuchtet aus,
ohne dass jemand wüsste, warum. */
wurzel.addEventListener('pointerleave', (e) => {
const kachel = e.target.closest?.('.kachel');
if (!kachel) return;
kachel.style.removeProperty('--mx');
kachel.style.removeProperty('--my');
}, true);
}
/* ---------- Laden -------------------------------------------------------- */
workspace/aufgaben.html
+6 -6
View File
@@ -7,9 +7,9 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
</head>
<body class="start">
@@ -134,8 +134,8 @@
</form>
</dialog>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/aufgaben.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/aufgaben.js?v=202608312250" defer></script>
</body>
</html>
workspace/automation.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/automation.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/automation.css?v=202608312250" />
</head>
<body class="start">
@@ -127,8 +127,8 @@
</main>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/automation.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/automation.js?v=202608312250" defer></script>
</body>
</html>
workspace/bereich.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202608312250" />
</head>
<body class="start">
@@ -98,8 +98,8 @@
</main>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/bereich.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/bereich.js?v=202608312250" defer></script>
</body>
</html>
workspace/calls.html
+8 -8
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/calls.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/calls.css?v=202608312250" />
</head>
<body class="start">
@@ -49,9 +49,9 @@
</main>
<script src="assets/js/ki.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/calls.js?v=202608312236" defer></script>
<script src="assets/js/ki.js?v=202608312250" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/calls.js?v=202608312250" defer></script>
</body>
</html>
workspace/content.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/content.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/content.css?v=202608312250" />
</head>
<body class="start">
@@ -153,8 +153,8 @@
</main>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/content.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/content.js?v=202608312250" defer></script>
</body>
</html>
workspace/dateien.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202608312250" />
</head>
<body class="start">
@@ -88,8 +88,8 @@
</main>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/dateien.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/dateien.js?v=202608312250" defer></script>
</body>
</html>
workspace/index.html
+2 -2
View File
@@ -25,7 +25,7 @@
type="image/webp" media="(max-width: 899px)" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
</head>
<body class="gate">
@@ -143,6 +143,6 @@
</p>
</main>
<script src="assets/js/gate.js?v=202608312236" defer></script>
<script src="assets/js/gate.js?v=202608312250" defer></script>
</body>
</html>
workspace/kalender.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202608312250" />
</head>
<body class="start">
@@ -94,8 +94,8 @@
</main>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/kalender.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/kalender.js?v=202608312250" defer></script>
</body>
</html>
workspace/personen.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/personen.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/personen.css?v=202608312250" />
</head>
<body class="start">
@@ -104,8 +104,8 @@
</main>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/personen.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/personen.js?v=202608312250" defer></script>
</body>
</html>
workspace/profil.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/profil.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/profil.css?v=202608312250" />
</head>
<body class="start">
@@ -127,8 +127,8 @@
</main>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/profil.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/profil.js?v=202608312250" defer></script>
</body>
</html>
workspace/report.html
+8 -8
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/report.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/report.css?v=202608312250" />
</head>
<body class="start">
@@ -86,9 +86,9 @@
</main>
<script src="assets/js/ki.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/report.js?v=202608312236" defer></script>
<script src="assets/js/ki.js?v=202608312250" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/report.js?v=202608312250" defer></script>
</body>
</html>
workspace/scouting.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202608312250" />
</head>
<body class="start">
@@ -124,8 +124,8 @@
</div>
</div>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/scouting.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/scouting.js?v=202608312250" defer></script>
</body>
</html>
workspace/start.html
+9 -6
View File
@@ -7,8 +7,8 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
</head>
<body class="start">
@@ -21,7 +21,10 @@
</div>
</header>
<main class="inhalt">
<!-- Volle Breite: Bei 880 px waren drei Kacheln je 285 px breit, und in
den groesseren Schriften brach der Text ab. Mehr Breite ist hier die
ehrlichere Loesung als kleinere Schrift. -->
<main class="inhalt inhalt--breit">
<section class="willkommen">
<p class="marke">Angemeldet</p>
<h1 class="titel" id="gruss">Willkommen</h1>
@@ -65,8 +68,8 @@
</p>
</main>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/start.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/start.js?v=202608312250" defer></script>
</body>
</html>
workspace/startcheck.html
+8 -8
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202608312250" />
</head>
<body class="start">
@@ -65,9 +65,9 @@
</main>
<script src="assets/js/ki.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/startcheck.js?v=202608312236" defer></script>
<script src="assets/js/ki.js?v=202608312250" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/startcheck.js?v=202608312250" defer></script>
</body>
</html>
workspace/uebersicht.html
+5 -5
View File
@@ -7,9 +7,9 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202608312250" />
</head>
<body class="start">
@@ -52,7 +52,7 @@
</main>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/uebersicht.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/uebersicht.js?v=202608312250" defer></script>
</body>
</html>
workspace/wissen.html
+7 -7
View File
@@ -7,10 +7,10 @@
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202608312236" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312250" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202608312250" />
</head>
<body class="start">
@@ -170,8 +170,8 @@
</main>
<script src="assets/js/wahl.js?v=202608312236" defer></script>
<script src="assets/js/kopf.js?v=202608312236" defer></script>
<script src="assets/js/wissen.js?v=202608312236" defer></script>
<script src="assets/js/wahl.js?v=202608312250" defer></script>
<script src="assets/js/kopf.js?v=202608312250" defer></script>
<script src="assets/js/wissen.js?v=202608312250" defer></script>
</body>
</html>