Claudian
b941080694
FILIPE, mit Bildschirmfoto der Personenauswahl: "wenn ich da scollen will geht das immer zu"
Er hatte recht, und es war eine einzige Zeile in workspace/assets/js/wahl.js:
addEventListener('scroll', schliessen, true);
Das dritte Argument bedeutet "in der Einfangphase lauschen" -- und damit auf JEDES
Scroll-Ereignis im ganzen Dokument, auch auf das in der Liste selbst. Wer die Namensliste
herunterrollen wollte, schloss sie im selben Moment. Bei acht Eintraegen faellt das kaum
auf; beim ganzen Manager- und Scout-Team ist die Liste unbedienbar.
Zumachen MUSS sie trotzdem, wenn die Seite scrollt: Sie haengt an position:fixed und
schwaemme sonst neben ihrem Knopf davon. Deshalb wird jetzt unterschieden, WO gescrollt
wurde -- ein Scroll-Ereignis der Seite hat document als Ziel, das ist nicht in der Liste
enthalten, also schliesst sie wie bisher.
Dazu overscroll-behavior: contain in gate.css. Ohne das reicht der Browser das Rollen am
Listenende an die Seite weiter, die Seite bewegt sich -- und daran schliesst die Liste zu
Recht. Der Fehler waere zur Haelfte zurueck gewesen.
GEPRUEFT im echten Browser am echten wahl.js und gate.css (pruef-wahl-scrollen.mjs, 7
Pruefungen), und zwar BEIDE Haelften der Zusage: Liste scrollt -> bleibt offen, Seite
scrollt -> geht zu. Eine Reparatur, die nur die eine Richtung sichert, waere die naechste
Ueberraschung.
Gegenprobe: alte Zeile testweise eingesetzt -> 2 Pruefungen fallen durch. Reparatur ->
alle 7 gruen.
Die Pruefung hat sich beim Bauen DREIMAL geweigert, etwas zu bestaetigen, das sie nicht
gemessen hatte -- "die Liste ist gar nicht laenger als ihr Fenster", "scrollTop = 0". Jedes
Mal lag es an meinem Aufbau (zu hohes Fenster, fehlende Stylesheets, Mausrad ohne Wirkung),
nie an der Reparatur. Gruen gemeldet haette sie es nie.
Der Versionsstempel muss mit: Cloudflare haelt JS und CSS vier Stunden im Browser fest.
Ohne neue Adresse saehe Filipe die Reparatur bis zu vier Stunden lang nicht.
HINWEIS ZUM COMMIT: In diesem Verzeichnis lag zum Zeitpunkt der Arbeit fremde,
uncommittete Arbeit -- vier Server-Dateien (heute 16:41-16:53 geaendert), sieben neue
Pruefdateien, ~110 Bildschirmfotos, eine Fokusring-Korrektur in gate.css und eine
Beschriftung in profil.html. Nichts davon ist hier drin. Bereitgestellt wurde ausdruecklich
nach Pfad, und die beiden Dateien mit gemischtem Inhalt (gate.css, profil.html) wurden dafuer
aus HEAD geholt und nur um den eigenen Anteil ergaenzt. Die fremde Arbeit steht unveraendert
im Arbeitsstand.
149 lines
6.5 KiB
HTML
149 lines
6.5 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" />
|
|
<meta name="theme-color" content="#05070d" />
|
|
|
|
<!-- 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-1600.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" href="assets/img/favicon.png" />
|
|
<link rel="stylesheet" href="assets/css/gate.css?v=202609041818" />
|
|
</head>
|
|
|
|
<body class="gate">
|
|
|
|
<!-- ---------- Bühne: Bild + Schleier ---------------------------------- -->
|
|
<div class="buehne" aria-hidden="true">
|
|
<picture>
|
|
<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" sizes="100vw" />
|
|
<source type="image/webp"
|
|
srcset="assets/img/buehne/gate-hoch-440.webp 440w,
|
|
assets/img/buehne/gate-hoch-580.webp 580w" sizes="100vw" />
|
|
<img class="buehne__bild" src="assets/img/buehne/gate-1280.webp" alt=""
|
|
width="1672" height="941" fetchpriority="high" decoding="async" />
|
|
</picture>
|
|
<div class="buehne__schleier"></div>
|
|
</div>
|
|
|
|
<!-- ---------- Tafel ---------------------------------------------------- -->
|
|
<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>
|
|
|
|
<script src="assets/js/gate.js?v=202609041818" defer></script>
|
|
</body>
|
|
</html>
|