ZWEI FEHLER, DIE FILIPE GESEHEN HAT.
1. DAS PROFILBILD LAG UEBER DER HALBEN SEITE. Als Patrick sein Bild
hochlud, zog sich ein roter Balken quer ueber die Startseite.
Ursache: Die CSS-Regel .wer__bild hat GEFEHLT. Das Element wurde in
kopf.js erzeugt, die Regel dazu nie geschrieben -- und ein <img> ohne
Groessenangabe nimmt seine natuerliche Groesse an, bei einem Handyfoto
also mehrere tausend Pixel. Dazu fehlte overflow: hidden am Traeger.
WARUM KEINE PRUEFUNG DAS GEFUNDEN HAT: Sie lud ein 1x1-Pixel-PNG hoch.
Klein, schnell, von Hand gebaut -- und voellig unfaehig, irgendetwas
zu ueberdecken. Die Pruefung war gruen, der Fehler war da, und gesehen
hat ihn der Nutzer. Sie arbeitet jetzt mit einem 1200x1200-Bild, also
in der Groesse, die wirklich hochgeladen wird, und misst danach: Bleibt
das Bild in seinem 28-px-Feld, ragt es irgendwo heraus, laeuft die
Seite ueber. Gegenprobe gemacht -- ohne die Regel meldet sie
1200x1200 in 28x28 und 918 px Ueberlauf.
2. ZWEI PERSONEN AUF EINEM BILDSCHIRM. Auf der Profilseite stand oben
"Profil: SpongBobSchwammKopf" und mittendrin "MEIN PROFIL: Dogfather".
Niemand konnte sagen, welche Angabe zu wem gehoert.
Es sind auch wirklich zwei verschiedene Dinge:
MEIN STECKBRIEF gehoert MIR -- Bild, ein Satz ueber mich, meine
Kanaele. Fuehre ich selbst.
CREATOR-PROFILE die BETREUUNGSAKTE eines anderen Menschen --
Ziele, 90-Tage-Plan, interne Notizen. Fuehren die
Betreuer.
Scouts, Manager und DogFather haben jetzt zwei getrennte Kacheln und
eine eigene Seite (steckbrief.html, serverseitig geschuetzt). Ein
Creator behaelt beides zusammen -- er hat nur eine Seite und sieht
dort ausschliesslich sich selbst. Die Logik liegt in einer eigenen
Datei statt hinten an profil.js: Sie gehoert der angemeldeten Person,
nicht der Akte.
ACHTZEHN KACHELN, ACHTZEHN FARBEN. Die neue Kachel haette sich ihren
Farbton mit den Creator-Profilen geteilt -- zwei Nachbarn in derselben
Farbe. Statt eine Farbe dazuzuerfinden, wurde tools/kachel-farben.mjs
fuer 18 Winkel neu gerechnet, samt der neuen Nachbarschaft im Raster.
Der kleinste Abstand zweier Nachbarn liegt weiterhin bei 100 Grad.
Gefunden hat das die Startseitenpruefung ("17 Farben auf 18 Kacheln").
Die Trennung wird jetzt fuer JEDE Rolle geprueft: welche Kacheln sie
sieht, dass auf der Akte kein fremder Steckbrief steht, und dass die
eigene Seite die richtige Person zeigt. Eine alte Pruefung, die das
Gegenteil verlangte, wurde ersetzt statt stehen gelassen.
Co-Authored-By: Claude Opus 5 <[email protected]>
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=202609011504" />
|
|
</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=202609011504" defer></script>
|
|
</body>
|
|
</html>
|