DogFatherGitandClaude Opus 5
6996c5957d
DIE VERZOGENE FORMULARZEILE hatte drei Ursachen, nicht eine -- und jede einzelne haette gereicht, damit es schief aussieht: 1. Die Rasterregel galt nur fuer Kinder mit der Klasse .feld. Der Kalender benutzt schlichte <div> ohne Klasse; die fielen hindurch, bekamen von zwoelf Spalten je EINE und wurden nur so breit, wie ihr Inhalt sie zwang. Daher "Art" schmal und "Beginn" breit. 2. "Dauer (Minuten)" brach in der schmalen Spalte auf zwei Zeilen um -- und schob das Feld darunter tiefer als seine Nachbarn. Die Klammer ist jetzt ein leiser Zusatz, die Beschriftung hat feste Hoehe. 3. Die letzten drei Pixel: Mit grid-template-rows: 1fr auto bestimmte jedes Element die Zeilenhoehe selbst. Ein <select> mass sich 3 px kleiner als ein <input> und sass dadurch hoeher. Gemessen: Container beider Felder identisch (652+71), Eingabe aber 676..720 gegen 679..723. Drei Pixel klingen nach nichts und sind genau das, was man als "verzogen" sieht. Jetzt hat die Zeile feste Hoehe und das Feld fuellt sie ganz. Ergebnis, gemessen statt betrachtet: alle Felder 44 px hoch, alle 362 px breit, alle Unterkanten auf einer Linie. Auf dem Handy untereinander -- zwei Felder auf 300 px sind zwei Streifen, in die nichts hineinpasst. NEUE PRUEFUNG pruef-formulare.mjs. Sie prueft nicht "sieht gut aus", sondern misst: gleiche Hoehe, Unterkanten auf einer Linie, kein Feld absurd schmal, keine Beschriftung mehrzeilig -- auf fuenf Seiten und zwei Geraetegroessen. Zwei Messfehler darin selbst gefunden und behoben (Teilpixel-Rundung, und eine Ausgabe ueber mehrere Zeilen, die die Datei zerschossen hat). DIE SCOUT-PIPELINE ERKLAERT SICH JETZT SELBST. Vorher stand im leeren Zustand ein Satz, der nur wiederholte, was man ohnehin sieht: dass nichts da ist. Wer die Seite zum ersten Mal oeffnet, wusste danach weiterhin nicht, wofuer es sie gibt. Der leere Zustand ist der EINZIGE Moment, in dem jemand garantiert liest, was dort steht -- spaeter ist die Flaeche von Daten belegt. Deshalb steht die Erklaerung genau dort und nicht in einer Hilfe, die niemand aufmacht. Erklaert wird der NUTZEN, nicht die Bedienung: nicht "hier klicken", sondern warum ein Scout ohne diese Liste Leute verliert -- naemlich die Interessierten, bei denen drei Wochen nichts passiert ist, und nicht die, die Nein sagen. Dazu die fuenf Stufen mit je einem Satz, was sie bedeuten. Co-Authored-By: Claude Opus 5 <[email protected]>
185 lines
7.8 KiB
HTML
185 lines
7.8 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>Creator-Profil · 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=202609011609" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609011609" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011609" />
|
||
<link rel="stylesheet" href="assets/css/profil.css?v=202609011609" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
|
||
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
|
||
Pseudo-Elements -- body hat nur ::before und ::after. -->
|
||
<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> · Profil</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">Onboarding</p>
|
||
<h1 class="titel" id="titel">Creator-Profil</h1>
|
||
<p class="unterzeile" id="unterzeile">…</p>
|
||
</div>
|
||
<div id="auswahl-block" hidden>
|
||
<label class="feld-schild" for="auswahl">Creator</label>
|
||
<select id="auswahl"></select>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Der eigene Steckbrief -- hier NUR fuer Creator, weil ein Creator
|
||
nur eine Profilseite hat und beides zusammengehoert.
|
||
|
||
Scouts, Manager und DogFather sehen ihn auf steckbrief.html.
|
||
Grund: Auf dieser Seite steht die Akte eines ANDEREN Menschen
|
||
("Profil: SpongBobSchwammKopf"). Der eigene Steckbrief mittendrin
|
||
ergab zwei Personen auf einem Bildschirm, ohne dass klar war,
|
||
welche gerade gemeint ist. steckbrief.js blendet ihn hier nur
|
||
fuer Creator ein. -->
|
||
<section class="steckbrief" id="steckbrief" data-nur-creator="ja" 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>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<form id="formular" hidden>
|
||
|
||
<fieldset class="gruppe">
|
||
<legend class="gruppe__titel">Stammdaten</legend>
|
||
<p class="gruppe__text">Wer ist der Creator, und wie arbeitet er?</p>
|
||
|
||
<label class="feld-schild" for="handles">Social-Handles</label>
|
||
<textarea id="handles" rows="2" maxlength="2000"
|
||
placeholder="TikTok, Instagram, Discord …"></textarea>
|
||
|
||
<label class="feld-schild" for="nische">Nische & Content-Stil</label>
|
||
<textarea id="nische" rows="2" maxlength="2000"
|
||
placeholder="Worum geht es, und wie wirkt es?"></textarea>
|
||
|
||
<label class="feld-schild" for="live_zeiten">LIVE-Zeiten & Routinen</label>
|
||
<textarea id="live_zeiten" rows="2" maxlength="2000"
|
||
placeholder="Wann wird gestreamt, wie regelmäßig?"></textarea>
|
||
|
||
<label class="feld-schild" for="technik">Technik-Setup & Tools</label>
|
||
<textarea id="technik" rows="2" maxlength="2000"
|
||
placeholder="PC/Handy, Kamera, Mikro, OBS …"></textarea>
|
||
</fieldset>
|
||
|
||
<fieldset class="gruppe">
|
||
<legend class="gruppe__titel">Ziele</legend>
|
||
<p class="gruppe__text">Was soll wachsen? Aus dem Konzept, Seite 5.</p>
|
||
|
||
<label class="feld-schild" for="ziel_live">LIVE-Qualität & Bindung</label>
|
||
<textarea id="ziel_live" rows="2" maxlength="2000"></textarea>
|
||
|
||
<label class="feld-schild" for="ziel_content">Content-Reichweite</label>
|
||
<textarea id="ziel_content" rows="2" maxlength="2000"></textarea>
|
||
|
||
<label class="feld-schild" for="ziel_community">Community & Wiederkehr</label>
|
||
<textarea id="ziel_community" rows="2" maxlength="2000"></textarea>
|
||
|
||
<label class="feld-schild" for="ziel_technik">Technische Stabilität</label>
|
||
<textarea id="ziel_technik" rows="2" maxlength="2000"></textarea>
|
||
</fieldset>
|
||
|
||
<fieldset class="gruppe">
|
||
<legend class="gruppe__titel">90-Tage-Plan</legend>
|
||
<p class="gruppe__text">Wenige Punkte, dafür verbindlich – Top 3 aus dem Konzept.</p>
|
||
|
||
<label class="feld-schild" for="plan_prio1">Priorität 1</label>
|
||
<input id="plan_prio1" maxlength="2000" />
|
||
<label class="feld-schild" for="plan_prio2">Priorität 2</label>
|
||
<input id="plan_prio2" maxlength="2000" />
|
||
<label class="feld-schild" for="plan_prio3">Priorität 3</label>
|
||
<input id="plan_prio3" maxlength="2000" />
|
||
|
||
<div class="gruppe__raster" id="termine" hidden>
|
||
<div>
|
||
<label class="feld-schild" for="plan_start">Plan-Start</label>
|
||
<input id="plan_start" type="date" />
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="naechster_review">Nächster Review</label>
|
||
<input id="naechster_review" type="date" />
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<!-- Nur für DogFather. Der Server schickt dieses Feld an Creator
|
||
gar nicht erst mit. -->
|
||
<fieldset class="gruppe gruppe--intern" id="gruppe-intern" hidden>
|
||
<legend class="gruppe__titel">Interne Notiz</legend>
|
||
<p class="gruppe__text">
|
||
Sieht <strong>nur DogFather</strong>. Der Creator bekommt dieses Feld
|
||
weder angezeigt noch übertragen.
|
||
</p>
|
||
<textarea id="admin_notiz" rows="4" maxlength="2000"></textarea>
|
||
</fieldset>
|
||
|
||
<div class="speicher-leiste">
|
||
<button type="submit" class="knopf knopf--klein" id="speichern">Speichern</button>
|
||
<span class="leise" id="stand"></span>
|
||
</div>
|
||
</form>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609011609" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609011609" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609011609" defer></script>
|
||
<script src="assets/js/steckbrief.js?v=202609011609" defer></script>
|
||
<script src="assets/js/profil.js?v=202609011609" defer></script>
|
||
</body>
|
||
</html>
|