Files
dogfather-universe/workspace/index.html
T
DogFatherGitandClaude Opus 5 e8478c9cae Spicy sieht DogFathers Sachen nicht mehr -- und sechs Fehler dazu
VIER DINGE AUS DEN BILDSCHIRMFOTOS, jedes ein echter Fehler:

1. SPICY MEDIA SAH DOGFATHERS DATEN. Beim ersten Anlauf bekam die Rolle
   dieselbe Regel wie DogFather (`1=1`) -- damit stimmte der Ueberblick
   ueber Manager, Scouts und Creator, und nebenbei standen seine eigenen
   Termine, Aufgaben, Dateien und Eintraege mit drin. Jetzt gibt es
   ohneDogFather() als EINE Stelle dafuer: Zwei Spalten werden geprueft,
   `creator_id` (um wen geht es) und `erstellt_von` (wer hat es
   geschrieben) -- ein Termin, den er sich selbst anlegt, haengt nur an
   der zweiten. `IS NULL OR NOT IN` und nicht bloss `NOT IN`: In SQL ist
   `NULL NOT IN (...)` weder wahr noch falsch, die Zeile fiele
   stillschweigend heraus.

2. "PERSOENLICHER ZUGANGSCODE · undefined" auf der Anmeldeseite. Eine
   zweite Namensliste im Browser, die beim Hinzufuegen der Rolle
   niemand gepflegt hat. Ein unbekannter Schluessel faellt jetzt auf
   sich selbst zurueck statt auf `undefined` -- haesslich, aber
   sichtbar.

3. SPICY KAM NICHT IN DIE PERSONENVERWALTUNG. Der Server liess sie
   herein, das Skript warf sie wieder hinaus: zwei Listen fuer dieselbe
   Frage, gepflegt wurde nur die erste.

4. DIE ANMELDEKARTE WAR ZU KLEIN FUER FUENF ROLLEN. Der Kommentar an
   genau dieser Stelle warnt woertlich davor -- und ich habe getan,
   wovor er warnt: eine Rolle eingefuegt und die Zahl daneben nicht
   angefasst. Gemessen: Inhalt 573 px in einer 526 px hohen Tafel, die
   Fusszeile stand unter dem Rahmen. Schrift kleiner half nicht (sie lag
   schon auf dem Anschlag), also sind die Abstaende an neun Stellen
   enger. Nachgemessen auf fuenf Groessen: passt ueberall.

DIE ZEIT WAR WIRKLICH FALSCH. Nicht nur in meinem Satz: `datum()` in
personen.js schnitt die ISO-Zeichenkette ab -- und die ist UTC. Im
Protokoll stand 03:00, wo 05:00 war. Das Tueckische daran ist, dass es
nie kaputt aussieht: Eine Uhrzeit ist immer plausibel.

PROFILBILDER WERDEN JETZT GEZEICHNET. Der Server lieferte sie seit
gestern mit, gezeichnet wurden sie nirgends -- deshalb aenderte sich
nichts. Jetzt in der Personenauswahl (Aufgaben, Termine, Dateien,
Bereiche), in der Gespraechsliste und an jeder Nachricht. Der
Anfangsbuchstabe bleibt als Unterlage LIEGEN: Faellt das Bild aus, steht
dort weiter etwas Sinnvolles.

DER CHAT: Gesichter mit Rollenfarbe, Blasen mit Richtung (die erste
einer Folge eckig, die naechsten rund -- so sieht man, wo ein Gedanke
anfaengt), das offene Gespraech mit Schiene, Ungelesenes hervorgehoben,
und das Eingabefeld in einer eigenen Leiste, die sich beim Schreiben
hebt.

ZWEI EIGENE PATZER, beide von Pruefungen gefunden:
  - `o is not defined`: Mein Suchmuster hat die zwei Zeilen fuer das
    Bild ans DATEIENDE gesetzt statt in die Schleife -- und in
    kalender.js an einen <span> statt ans <option>. Gemeldet von
    pruef-sicht, das die Browserkonsole mitliest.
  - Ein Kommentar mit `bild` in schraegen Anfuehrungszeichen stand INNEN
    in einer Vorlagenzeichenkette und hat sie geschlossen. Die halbe SQL
    wurde zu Programmtext.
Dazu: `.chat-neu` gibt es nicht (heisst `.chat__eingabe`), und der
Rollenknopf hatte fuer den Manager keinen sichtbaren Fokus -- ein
box-shadow wird von `overflow: hidden` abgeschnitten, ein outline nicht.

Gruen: spicy (43), creator-anlegen (29), personen-liste (33), sicht (48),
chat (48), chat-optik (24), buehne (38), struktur (32), css-klassen (15),
handy (59), breiten (23), formulare (19), start-ansicht (136),
lesbarkeit (14), barrierefrei (18), tempo (8), kopf-messen (3),
glocke (26), haerte (20), manager-sicht (43), alle-wege (19),
aufgabenbrett (44), kalender (84).

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-07 05:46:19 +02:00

208 lines
9.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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=202609070539" />
</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>
<!-- 07.09.2026, Wunsch Filipe: "dogfather universe auch ersetzen durch
SpicyMedia x DogFather" und der Satz darunter soll "nur um manager
scouts und creator von spicy media" gehen, ohne DogFather.
Das "x" steht als eigenes Element, damit es kleiner und in der
Zwischenfarbe gesetzt werden kann -- so liest man zwei Namen und
ein Zeichen dazwischen, nicht drei gleich laute Wörter. Es trägt
aria-hidden nicht: Vorgelesen wird "SpicyMedia x DogFather", und
genau so spricht man es auch aus. -->
<header class="kopf">
<p class="marke marke--paar">
<span class="marke__spicy">SpicyMedia</span>
<span class="marke__x">×</span>
<span class="marke__dogi">DogFather</span>
</p>
<h1 class="titel">Creator&nbsp;Workspace</h1>
<p class="unterzeile">Privater Bereich für die Manager, Scouts und Creator von Spicy&nbsp;Media.</p>
</header>
<div class="rollen" role="radiogroup" aria-labelledby="rollen-schild">
<p class="feldschild" id="rollen-schild">Womit meldest du dich an?</p>
<!-- SPICY MEDIA steht ganz oben (07.09.2026, Wunsch Filipe: "ueber
dogfather auch eine kategorie, eine neue rolle"). Der Chili ist
das Zeichen der Marke -- dieselbe Form wie im Logo, nur als
Umriss, damit sie neben Krone, Stern und Schild dieselbe
Strichstaerke hat. -->
<button type="button" class="rolle" data-rolle="spicy" role="radio" aria-checked="false">
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/>
<path d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/>
</svg>
<span class="rolle__text">
<span class="rolle__name">Spicy Media</span>
<span class="rolle__zusatz">Überblick über alle</span>
</span>
</button>
<!-- 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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=202609070539" defer></script>
</body>
</html>