DogFatherGitandClaude Opus 5
95f54fd211
"bring alles auf dieses niveau -- texte, kacheln, hinweise, titel,
buttons, einfach alles."
Berechtigt, und der Fehler war meiner: Die Kachelzeichen sind Koerper
geworden, alles andere blieb flach. Ein plastisches Zeichen neben einem
gemalten Knopf sieht nicht nach "teilweise gut" aus, sondern nach
Versehen.
Ab jetzt gelten fuer JEDES Bauteil dieselben drei Regeln -- dieselben,
nach denen auch die Zeichen gebaut sind:
1. LICHT VON OBEN. Eine helle Kante an der Oberkante, in der Mitte am
staerksten, nach aussen auslaufend. Echtes Licht auf einer Kante
sieht so aus; eine durchgehend gleich helle Linie ist ein Strich.
2. TIEFE NACH UNTEN. Ein versetzter Schatten -- wie bei jedem
Gegenstand, der auf etwas liegt. Ohne ihn klebt ein Element auf der
Seite, statt darauf zu liegen.
3. VERLAUF STATT FLAECHE. Oben eine Spur heller als unten. Kaum zu
sehen, aber ohne ihn bleibt jede Flaeche tot.
Und eine vierte, nur fuer Bedienbares:
4. WAS MAN DRUECKT, GEHT HINEIN. Beim Klick kehrt sich die Woelbung um:
Licht nach unten, Schatten nach oben. Das ist der Unterschied
zwischen "es passiert etwas" und "ich habe etwas gedrueckt".
ANGEFASST -- beide Seiten, nicht nur eine:
Workspace (gate.css, gilt auf jeder Seite)
Knoepfe, Schritte, Abmelden, Stufenknoepfe, Suchknopf
Eingabefelder, Auswahlfelder, Suchfeld -- die bekommen die Woelbung
ABSICHTLICH ANDERSHERUM: Ein Feld, in das man schreibt, ist eine
Mulde, kein Knopf. Licht unten, Schatten oben.
Marken, Rollenabzeichen, Zaehler, Filterchips
Hinweisflaechen, Notizen, Call-Raum, Codekasten
Ueberschriften und Schilder
Oeffentliche Seite (main.css)
Knoepfe (btn, btn-primary, btn-outline) samt geschliffener Kante
Marken und Abzeichen
Ueberschriften
Der Textschatten aendert die FARBE nicht -- die Kontrastpruefung misst
weiter denselben Wert --, legt den Text aber auf die Seite, statt ihn in
den Hintergrund zu mischen.
Alles gedeckt. Diese Bauteile stehen zu Dutzenden auf einer Seite, und
was einzeln beeindruckt, blendet im Dutzend.
GEPRUEFT, zehn Laeufe, alle gruen: Buehne 38 (Textkontrast an echten
Bildpunkten), Rollen 97, Handy 50, Formulare 19, Grosscheck 15,
Lesbarkeit 14 -- dazu die vier Laeufe der oeffentlichen Seite
(Startseite, Design, Barrierefreiheit, Tastaturbedienung).
Co-Authored-By: Claude Opus 5 <[email protected]>
120 lines
5.0 KiB
HTML
120 lines
5.0 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>Mein Steckbrief · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<meta name="theme-color" content="#05070d" />
|
||
<link rel="icon" href="assets/img/favicon.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609030720" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609030720" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609030720" />
|
||
<link rel="stylesheet" href="assets/css/profil.css?v=202609030720" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<div class="schleier" aria-hidden="true"></div>
|
||
|
||
<header class="kopfleiste">
|
||
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
|
||
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M14.5 5.5 8 12l6.5 6.5" />
|
||
</svg>
|
||
<span class="zurueck-knopf__text">Zurück</span>
|
||
</button>
|
||
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator Workspace</a> · Mein Steckbrief</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="inhalt">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Über mich</p>
|
||
<h1 class="titel">Mein Steckbrief</h1>
|
||
<p class="unterzeile">
|
||
Das hier gehört dir. Dein Bild steht danach in der Kopfleiste, in der
|
||
Personenliste und überall dort, wo dein Name auftaucht.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Der eigene Steckbrief. Steht GANZ OBEN und über allem anderen: Er
|
||
gehört jedem im Workspace, nicht nur Creatorn – ein Scout, ein
|
||
Manager und DogFather haben ihn genauso. Die Creator-Akte darunter
|
||
ist etwas anderes (die führen die Betreuer). -->
|
||
<section class="steckbrief" id="steckbrief" hidden>
|
||
<div class="steckbrief__kopf">
|
||
<div class="steckbrief__bildfeld">
|
||
<span class="steckbrief__bild" id="sb-bild" aria-hidden="true"></span>
|
||
<div class="steckbrief__bildknoepfe">
|
||
<label class="schritt" for="sb-datei">Bild wählen</label>
|
||
<input type="file" id="sb-datei" accept="image/jpeg,image/png,image/webp" hidden />
|
||
<button type="button" class="schritt" id="sb-bild-weg" hidden>entfernen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="steckbrief__text">
|
||
<p class="feldschild">Mein Profil</p>
|
||
<h2 class="steckbrief__name" id="sb-name">…</h2>
|
||
<p class="steckbrief__rolle" id="sb-rolle"></p>
|
||
|
||
<label class="feld-schild" for="sb-ueber">Ein Satz über dich</label>
|
||
<textarea id="sb-ueber" rows="2" maxlength="400"
|
||
placeholder="z. B. Ich streame Gaming und Just Chatting, meistens abends."></textarea>
|
||
|
||
<p class="feldschild steckbrief__schild">Meine Kanäle</p>
|
||
<!-- Bewusst nur der öffentliche Name, kein Login: siehe die
|
||
Begründung im Kopf von server/workspace-steckbrief.js. -->
|
||
<div class="steckbrief__kanaele" id="sb-kanaele"></div>
|
||
|
||
<p class="fehler" id="sb-fehler" role="alert" aria-live="polite"></p>
|
||
<div class="steckbrief__fuss">
|
||
<button type="button" class="knopf knopf--klein" id="sb-speichern">Profil speichern</button>
|
||
<span class="steckbrief__stand" id="sb-stand" role="status" aria-live="polite"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DAS TEAM. Wunsch vom 01.09.2026: "ich will, dass wir Manager,
|
||
Scouts, DogFather auch die Fotos, Namen und so alles sehen, alles
|
||
was die in ihrem Profil eintragen."
|
||
|
||
Bis dahin war der Steckbrief eine Einbahnstraße: Jeder pflegte
|
||
seinen, und niemand bekam ihn je zu Gesicht. Die Schnittstelle
|
||
dafür lag fertig da (GET /workspace/api/steckbrief) und wurde von
|
||
keiner einzigen Seite aufgerufen.
|
||
|
||
Wer wen sieht, entscheidet weiterhin der Server. -->
|
||
<!-- EIGENE KLASSEN, nicht die vorhandenen .block__* : Die stehen in
|
||
automation.css und wissen.css, und diese Seite lädt beide nicht.
|
||
Genau so sind hier schon zweimal Stile ins Leere gelaufen -- der
|
||
Aufbau sah richtig aus, auf dem Bildschirm stand nacktes HTML.
|
||
Alles zu .team-* steht in start.css, die jede Seite lädt. -->
|
||
<section class="team-block" id="team-block" hidden>
|
||
<div class="team-block__kopf">
|
||
<div>
|
||
<p class="feldschild">Das Team</p>
|
||
<h2 class="team-block__titel">Wer hier mitarbeitet</h2>
|
||
</div>
|
||
<span class="team-block__zahl" id="team-zahl"></span>
|
||
</div>
|
||
<p class="team-block__text" id="team-text"></p>
|
||
<div class="team-gitter" id="team"></div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609030720" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609030720" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609030720" defer></script>
|
||
<script src="assets/js/steckbrief.js?v=202609030720" defer></script>
|
||
</body>
|
||
</html>
|