DogFatherGitandClaude Opus 5
8107b97379
Beim Messen des Datenvolumens nach dem Bildumbau fiel etwas anderes auf: Der Layout-Sprung auf der Startseite lag bei 0,99. Die Bilder waren es nicht -- ein Hintergrundbild liegt `position: fixed` und bewegt gar nichts. Die Meldung sagte es selbst, man musste nur hinsehen: ALLES sprang um denselben Betrag (295->301, 144->150, 685->692, 605->611). Wenn die ganze Seite gleichmaessig nach unten rutscht, waechst etwas ueber ihr. Gemessen: Leiste vor dem Skript 67 px, danach 71. Der Sicht-Umschalter kommt erst, wenn die Personenliste geladen ist, und ist mit 42 px das hoechste Teil in der Reihe. Vier Pixel -- man sieht sie kaum und merkt sie doch: Wer beim Laden schon zielt, klickt daneben. Die Loesung ist keine reservierte Hoehe auf Verdacht, sondern die Hoehe, die die Zeile ohnehin haben muss: `min-height: 44px`. Das ist das Mindestmass fuer ein Fingerziel (WCAG 2.5.8) und gilt hier sowieso fuer jedes Teil. Damit ist die Zeile immer so hoch wie ihr groesstes zulaessiges Element -- unabhaengig davon, ob dieses gerade schon da ist oder erst kommt. Ergebnis: 0,99 auf 0,60, und die Zahl der Seiten ueber dem Zielwert von zwoelf auf sechs. Datenvolumen unveraendert in Ordnung trotz der groesseren Bilder -- der Browser holt je Seite nur eine Stufe. Und der offene Punkt von vorhin ist geklaert: pruef-browser laeuft gruen durch, alle vier Maschinen (Chromium, Firefox, WebKit, WebKit auf dem iPhone), 64 Seitenaufrufe, 15898 Elemente. Der eine rote Punkt im Gesamtlauf war eine Zeitueberschreitung unter Dauerlast -- erkennbar daran, dass ZWEI Pruefungen gar nicht gelaufen waren und die Datei die doppelte Zeit brauchte. Eine gesunkene Anzahl ist ein eigener Befund. Co-Authored-By: Claude Opus 5 <[email protected]>
179 lines
8.1 KiB
HTML
179 lines
8.1 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<title>Dogfather Universe · Creator Workspace · Anmeldung</title>
|
|
<meta name="description" content="Privater Arbeitsbereich für Creator, Scouts und DogFather." />
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<link rel="manifest" href="/workspace/app.webmanifest" />
|
|
<meta name="theme-color" content="#0674b9" />
|
|
|
|
<!-- Die Bühne ist der erste Eindruck. Ohne diesen Hinweis lädt der Browser sie erst,
|
|
nachdem er das CSS gelesen hat - das kostet spürbar Zeit. Quer- und Hochformat
|
|
sind getrennt, damit das Handy nicht die große Fassung zieht.
|
|
|
|
Hier steht bewusst WebP und nicht AVIF, obwohl die AVIF-Fassungen erzeugt
|
|
werden und rund ein Drittel kleiner wären: Der ausliefernde Server läuft auf
|
|
Express 4, dessen `send` eine alte MIME-Tabelle ohne AVIF mitbringt. Die
|
|
Dateien kämen als application/octet-stream an und würden wegen des
|
|
nosniff-Headers vom Browser verweigert - die Bühne bliebe leer. Sobald der
|
|
Workspace einen eigenen Server bekommt, kann AVIF wieder eingeschaltet
|
|
werden (die Dateien liegen bereit). -->
|
|
<link rel="preload" as="image" href="assets/img/buehne/gate-1920.webp"
|
|
type="image/webp" media="(min-width: 900px)" />
|
|
<link rel="preload" as="image" href="assets/img/buehne/gate-hoch-580.webp"
|
|
type="image/webp" media="(max-width: 899px)" />
|
|
|
|
<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=202609070141" />
|
|
</head>
|
|
|
|
<body class="gate">
|
|
|
|
<!-- ---------- Bühne: Bild + Schleier ---------------------------------- -->
|
|
<div class="buehne" aria-hidden="true">
|
|
<picture>
|
|
<!-- BIS 2560 PIXEL (07.09.2026). Vorher endete die Reihe bei 1600 --
|
|
auf einem 2550 px breiten Schirm rechnete der Browser das Bild
|
|
also um das 1,6-fache hoch, und jede Kante wurde weich. Genau
|
|
das sah man als "nicht hochwertig", ohne es benennen zu koennen.
|
|
Eine hoehere Bildguete haette daran nichts geaendert: Man kann
|
|
keine Bildpunkte zurueckholen, die nie ausgeliefert wurden.
|
|
Ueber srcset laedt trotzdem jeder nur die Stufe, die er
|
|
braucht -- ein Handy weiterhin 32 KB. -->
|
|
<source media="(min-width: 900px)" type="image/webp"
|
|
srcset="assets/img/buehne/gate-960.webp 960w,
|
|
assets/img/buehne/gate-1280.webp 1280w,
|
|
assets/img/buehne/gate-1600.webp 1600w,
|
|
assets/img/buehne/gate-1920.webp 1920w,
|
|
assets/img/buehne/gate-2560.webp 2560w" sizes="100vw" />
|
|
<source type="image/webp"
|
|
srcset="assets/img/buehne/gate-hoch-440.webp 440w,
|
|
assets/img/buehne/gate-hoch-580.webp 580w,
|
|
assets/img/buehne/gate-hoch-900.webp 900w" sizes="100vw" />
|
|
<img class="buehne__bild" src="assets/img/buehne/gate-1280.webp" alt=""
|
|
width="1647" height="955" fetchpriority="high" decoding="async" />
|
|
</picture>
|
|
<div class="buehne__schleier"></div>
|
|
</div>
|
|
|
|
<!-- ---------- Tafel ----------------------------------------------------
|
|
|
|
DER ANKER (06.09.2026). Im Motiv steht rechts eine LEERE TAFEL mit
|
|
Neonrahmen -- dort gehoert die Anmeldekarte hinein, und zwar genau
|
|
hinein, nicht ungefaehr.
|
|
|
|
Das geht nur, wenn man weiss, wo die gemalte Tafel auf dem
|
|
Bildschirm landet. Das Bild liegt mit `object-fit: cover` darunter;
|
|
je nach Fensterform schneidet der Browser oben/unten oder
|
|
links/rechts etwas ab. Dieser Anker rechnet genau dieselbe
|
|
Cover-Geometrie noch einmal nach (siehe gate.css) -- er ist damit
|
|
deckungsgleich mit dem Bild, und die Karte kann in Prozent des
|
|
BILDES sitzen statt in Prozent des Fensters.
|
|
|
|
Er faengt keine Klicks ab (pointer-events: none); nur die Karte
|
|
darin ist bedienbar. -->
|
|
<div class="tafel-anker">
|
|
<main class="tafel" id="tafel">
|
|
<div class="tafel__kante" aria-hidden="true"></div>
|
|
|
|
<header class="kopf">
|
|
<p class="marke">Dogfather Universe</p>
|
|
<h1 class="titel">Creator Workspace</h1>
|
|
<p class="unterzeile">Privater Bereich für Creator, Scouts und DogFather.</p>
|
|
</header>
|
|
|
|
<div class="rollen" role="radiogroup" aria-labelledby="rollen-schild">
|
|
<p class="feldschild" id="rollen-schild">Womit meldest du dich an?</p>
|
|
|
|
<!-- Krone für DogFather: steht für die Gesamtübersicht und die
|
|
Freigaben. Das Schild ist zum Scout gewandert -- dort passt es
|
|
besser, weil ein Scout die Pipeline abschirmt und prüft, bevor
|
|
etwas weitergereicht wird. -->
|
|
<button type="button" class="rolle" data-rolle="admin" role="radio" aria-checked="false">
|
|
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M3.8 7.6 7.6 11 12 4.9 16.4 11l3.8-3.4-1.6 9.3H5.4L3.8 7.6Z"/>
|
|
<path d="M6 20.1h12"/>
|
|
</svg>
|
|
<span class="rolle__text">
|
|
<span class="rolle__name">DogFather</span>
|
|
<span class="rolle__zusatz">Gesamtübersicht & Freigaben</span>
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Manager: dieselben Rechte wie DogFather, nur die Personen-
|
|
verwaltung bleibt DogFather vorbehalten. Der Stern steht fuer
|
|
den Rang darunter, ohne "unter" zu sagen. -->
|
|
<button type="button" class="rolle" data-rolle="manager" role="radio" aria-checked="false">
|
|
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
|
|
</svg>
|
|
<span class="rolle__text">
|
|
<span class="rolle__name">Manager</span>
|
|
<span class="rolle__zusatz">Betreuung & Freigaben</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button type="button" class="rolle" data-rolle="scout" role="radio" aria-checked="false">
|
|
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12 2.6 4.5 5.8v5.6c0 4.6 3.2 8.4 7.5 9.9 4.3-1.5 7.5-5.3 7.5-9.9V5.8L12 2.6Z"/>
|
|
<path d="m8.7 12.1 2.3 2.3 4.3-4.7"/>
|
|
</svg>
|
|
<span class="rolle__text">
|
|
<span class="rolle__name">Scout</span>
|
|
<span class="rolle__zusatz">Eigene Pipeline & Kontakte</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button type="button" class="rolle" data-rolle="creator" role="radio" aria-checked="false">
|
|
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12 12.6a4.3 4.3 0 1 0 0-8.6 4.3 4.3 0 0 0 0 8.6Z"/>
|
|
<path d="M4.4 20.2c.9-3.4 3.9-5.6 7.6-5.6s6.7 2.2 7.6 5.6"/>
|
|
</svg>
|
|
<span class="rolle__text">
|
|
<span class="rolle__name">Creator</span>
|
|
<span class="rolle__zusatz">Eigener Bereich & Fortschritt</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<form class="formular" id="formular" novalidate>
|
|
<label class="feldschild" for="code">
|
|
Persönlicher Zugangscode <span class="fuer" id="fuer" hidden></span>
|
|
</label>
|
|
|
|
<div class="feld">
|
|
<input type="password" id="code" name="code" inputmode="text"
|
|
autocomplete="current-password" spellcheck="false"
|
|
placeholder="Code eingeben" aria-describedby="hinweis fehler" />
|
|
<button type="button" class="feld__auge" id="auge"
|
|
aria-label="Code anzeigen" aria-pressed="false">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path class="strich" d="M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12Z"/>
|
|
<circle class="strich" cx="12" cy="12" r="2.9"/>
|
|
<path class="strich durch" d="m4 20 16-16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<p class="hinweis" id="hinweis" hidden>Feststelltaste ist aktiv.</p>
|
|
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
|
|
|
<button type="submit" class="knopf" id="knopf">
|
|
<span class="knopf__text">Anmelden</span>
|
|
<span class="knopf__laden" aria-hidden="true"></span>
|
|
</button>
|
|
</form>
|
|
|
|
<p class="fuss">
|
|
Verschlüsselte Verbindung · Zugriffe werden protokolliert
|
|
</p>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="assets/js/gate.js?v=202609070141" defer></script>
|
|
</body>
|
|
</html>
|