DogFatherGitandClaude Opus 5
0391a91d14
Filipe hat neun Bilder geschickt, damit es VERSCHIEDENE Hintergruende gibt. Benutzt wurde davon genau eines (das Studio), die uebrigen acht lagen unbenutzt im Ordner -- lounge.png und skyline.png sogar schon fertig kopiert. Zu Recht beanstandet. Jetzt wird aus jeder Szene eine Buehne, breit und schmal, und jede Seite bekommt die, die zu ihr passt: studio Startseite der neutrale Ort, alles beginnt hier showbuehne Dashboard, Review die grosse Buehne, alles im Blick garage Aufgaben, Technik Werkstatt, hier wird gearbeitet skyline Kalender Nacht ueber der Stadt, Zeit lounge Calls, Community Sitzecke, hier wird geredet arena Dateien, Wissen Archiv hinter dem Portal halle Profil, Personen die Halle, in der jemand steht wald Start-Check, Scouting der Weg, den man erst sucht portal Content, LIVE Durchgang, hier entsteht etwas Die Zuordnung steht in bereiche.js -- derselben Liste, aus der schon Zeichen und Farbton kommen. Eine Seite traegt damit dreierlei aus einer einzigen Quelle: Farbe, Zeichen und Buehne. Sie koennen nicht auseinanderlaufen. Alle neun bekommen dieselbe Behandlung (abgedunkelt auf 0.42, Vignette in der Mitte, wo der Text steht, oben ausgeblendet, wo die Kopfleiste sitzt). Sie sehen verschieden aus und verhalten sich gleich -- eine Buehne, die je Seite anders hell waere, waere Unruhe statt Vielfalt. Der schmale Ausschnitt ist je Szene ein anderer, weil ein auf 9:16 gequetschtes Breitbild nur noch Wand zeigt; genommen wird der Bereich, in dem die Figuren stehen. 18 Dateien, zusammen 580 KB -- pro Seite werden davon zwei geladen (breit ODER schmal), also 16 bis 48 KB. Die Rohbilder waren 2,4 MB je Stueck. Kontrast auf allen sechs geprueften Seiten an echten Bildpunkten nachgemessen: haelt (schlechtester Wert 4,59:1). FUND: Die Buehnenpruefung suchte nach "buehne-breit" und fand die neuen Namen nicht mehr -- sie meldete "die Buehne liegt im Hintergrund: FEHL", obwohl sie da war. Die Seitenpruefung sieht jetzt nach, dass jede Seite ihre Szene hat UND dass das Bild wirklich ankommt: Ein data-buehne ohne passende CSS-Regel waere still wirkungslos. 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=202609011035" />
|
|
</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=202609011035" defer></script>
|
|
</body>
|
|
</html>
|