DogFatherGitandClaude Opus 5
299ef0d506
SCREEN 1: Jeder im Workspace hat jetzt seinen eigenen Steckbrief -- Creator, Scout, Manager und DogFather gleichermassen. Ein Bild, ein Satz ueber sich, und die Kanaele, auf denen er unterwegs ist. Er steht ganz oben auf profil.html, ueber der Creator-Akte; die ist etwas anderes (die fuehren die Betreuer, den Steckbrief fuehrt man selbst). Das Bild erscheint sofort ueberall: in der Kopfleiste jeder Seite und in der Begruessung. /api/ich liefert es deshalb gleich mit -- das spart auf jeder Seite eine zweite Abfrage und verhindert, dass die Plakette erst als Buchstabe erscheint und dann umspringt. Faellt das Bild aus, steht der Buchstabe da: Er wird nicht ersetzt, sondern liegt darunter. WARUM KEINE ECHTE TIKTOK-ANMELDUNG. "Mit TikTok verbinden" klingt nach OAuth. Das waere: ein Entwicklerkonto mit App-Freischaltung, eine Pruefung durch TikTok (Wochen, widerrufbar), je Person ein Zugriffstoken, das ablaeuft, erneuert werden muss und -- wenn es abhandenkommt -- fremden Zugriff auf ein fremdes Konto bedeutet. Dafuer bekaeme man Follower-Zahlen. Gebraucht wird hier aber "Wer ist das, und wo finde ich ihn?". Dafuer genuegt der oeffentliche Name. Gespeichert wird deshalb NUR das Handle -- kein Token, kein Passwort, nichts, was abhandenkommen kann. Daraus wird ein Verweis auf den Kanal. Vier Kanaele: TikTok, Instagram, YouTube, Twitch. Sollen spaeter echte Zahlen dazukommen, ist das ein eigenes Vorhaben -- der Name hier bleibt dann trotzdem richtig. Eingefuegt werden darf, was Leute wirklich in der Zwischenablage haben: "@name", "https://www.tiktok.com/@name" oder der Name allein. Alles wird auf den Namen zurueckgefuehrt, statt eine Fehlermeldung zu zeigen. SICHERHEIT beim Bild -- die drei Stellen, an denen Profilbilder typischerweise scheitern: 1. Der Typ wird an der SIGNATUR der Datei geprueft, nicht am Content-Type, den der Absender behauptet. Ein umbenanntes SVG mit Skript darin kaeme sonst durch und liefe im Namen der Domain -- mit der Sitzung des Betrachters. 2. Auf der Platte bekommt jede Datei einen Zufallsnamen. Kein Name kann Pfade verlassen oder etwas ueberschreiben. 3. Ausgeliefert mit nosniff und einer eigenen, alles verbietenden Inhaltsregel. Das Bild liegt als Datei neben der Datenbank, nicht darin: Bilder in SQLite blaehen jede Sicherung auf, und die laeuft jede Nacht. Niemand schreibt einem anderen ins Profil -- auch DogFather nicht. Ein Satz ueber sich und der eigene Kanalname gehoeren der Person. Wer wen SEHEN darf, folgt der bekannten Regel: Leitung alle, Scout seine Creator, Creator sich und seine Betreuer. Fremde Profile sind 404, nicht 403. ZWEI FUNDE DURCH DIE PRUEFUNG: - Der TikTok-Link, den die App beim Teilen kopiert, endet auf "?lang=de&is_from_webapp=1". Der wurde abgelehnt: "sieht nicht richtig aus" -- obwohl es der offizielle Link ist. Jetzt werden Parameter und Anker mit abgeschnitten. - Ein zu grosses Bild ergab "500 Serverfehler" statt einer Ansage. Der PayloadTooLargeError lief bis in die allgemeine Fehlerbehandlung durch. Jetzt 413 mit dem Satz, wie viel erlaubt ist. Von Hand haette das vermutlich nie jemand probiert. Vor der Schemaaenderung wurde eine geprueft vollstaendige Sicherung gezogen (VACUUM INTO, Integritaet ok, 6 Personen). 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=202609011130" />
|
|
</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=202609011130" defer></script>
|
|
</body>
|
|
</html>
|