DogFatherGitandClaude Opus 5
3914adf46c
Filipe: "ich will dass alle kacheln viel geiler und spezieller aussehen,
viel realistischer" und "so dass der komplette von der kachel vom
hintergrund bild komplett bedeckt ist. ueberrasch mich."
DIE BILDER: BEARBEITET STATT ABGEDUNKELT.
Bis hierher tat der Bildbauer zwei Dinge -- kleiner rechnen und einen
schwarzen Schleier darueberlegen. Abdunkeln macht ein Bild aber nicht
ruhiger, sondern TOT: Es zieht jede Farbe zur Mitte, und uebrig bleibt
ein grauer Schleier mit einer Ahnung von Motiv.
Drei Dinge, die ein Fotograf zuerst anfasst, und keines davon ist
"dunkler":
* KONTRAST -- Verkleinern MITTELT Bildpunkte; deshalb wirkt jedes
verkleinerte Bild flauer als das Original, und deshalb schaerft man
danach nach.
* SAETTIGUNG -- holt das Rot der Chili und das Gruen der Blaetter
zurueck, die der Schleier herausgewaschen hatte.
* VIGNETTE -- der eigentliche Unterschied zwischen "Screenshot" und
"Aufnahme". Ein Objektiv verliert zu den Ecken hin Licht; das Auge
liest das als Tiefe. Sie ersetzt ausserdem einen Teil des flachen
Schleiers: Dunkel wird, wo ohnehin nichts steht.
Der flache Schleier sinkt dadurch von 0,42 auf 0,26 -- heller UND
lesbar, weil die Vignette genau dort arbeitet, wo die Kacheln liegen.
DIE KACHELN: VIER DINGE, DIE EIN DING VON EINEM RECHTECK TRENNEN.
Sie hatten Farbverlauf, Lichtkante und ein Licht, das dem Zeiger folgt --
und blieben Rechtecke mit Farbe darin. Es fehlten:
1. GEWICHT. Ein Ding, das auf etwas liegt, wirft einen Schatten, auch
wenn es niemand anfasst. Den gab es nur beim Ueberfahren.
2. MATERIALSTAERKE. Ein Blech hat oben eine Licht- UND unten eine
Schattenkante. Nur die obere ergibt einen aufgeklebten Strich.
3. KOERNUNG. Perfekt glatte Verlaeufe kommen in der Natur nicht vor,
und das Auge merkt das, ohne es benennen zu koennen. Drei Prozent
Rauschen genuegen -- aus einem SVG-Filter als Adresse, also ohne
Datei und ohne zusaetzliche Anfrage.
4. DURCHSICHT. Hinter den Kacheln liegt jetzt ein aufwendiges Bild.
Eine deckende Flaeche verdeckt es, eine mattierte nimmt seine Farbe
auf -- erst dadurch gehoeren beide zusammen.
Beim Ueberfahren wird die Kachel nicht heller, sondern kommt NAEHER:
Sie steigt, ihr Schatten wird groesser und weicher (der Abstand zum
Untergrund waechst). So verhaelt sich ein angehobener Gegenstand.
DIE ANMELDEKARTE: EIN GERAET STATT EINES BILDES AN DER WAND.
Sie sass mit Abstand in der gemalten Tafel -- zwei Rahmen ineinander,
dazwischen schwarze Leere. Jetzt geht sie bis unter das Gluehen des
Neonrahmens: Der Rahmen ist das Gehaeuse, die Karte der eingeschaltete
Bildschirm. Sie leuchtet von den Kanten herein in den Farben des Rahmens
(rot oben links, blau unten rechts), traegt eine Glasscheibe als sehr
schwache Spiegelung und dieselbe Koernung. Die Rollen sind Tasten
geworden: Materialstaerke oben hell, unten dunkel, beim Druecken sinken
sie ein, und die gewaehlte ist beleuchtet statt eingefaerbt.
Alle Angaben bleiben -- vier Rollen mit Beschreibung, Codefeld, Auge,
Rollenhinweis, Fusszeile. "Hochwertiger" heisst nicht "weniger drin".
EIN ECHTER FUND DABEI: --text-still lag ploetzlich bei genau 4,50:1
statt der noetigen 4,5. Der Ton war am 01.09. gegen die DAMALIGE,
dunklere Buehne gemessen. Wer den Hintergrund heller macht, muss die
leiseste Schrift nachziehen -- sonst haette man den Aufwand auch lassen
koennen. Erkannt daran, dass die Zahl sich bei zwei Schleier-Aenderungen
NICHT bewegte: Die Pruefung rechnet mit der CSS-Farbe.
Gemessen statt angesehen: Kontrast an echten Bildpunkten (pruef-buehne),
neun Bildschirmbreiten, drei Handygroessen, Ladezeit und Datenvolumen,
Klassen, Struktur, Startseite -- alles gruen. Die Seiten ueber dem
CLS-Zielwert sind nebenbei von sieben auf vier gesunken.
Co-Authored-By: Claude Opus 5 <[email protected]>
212 lines
9.2 KiB
HTML
212 lines
9.2 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" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#0674b9" />
|
||
<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=202609070159" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609070159" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070159" />
|
||
<link rel="stylesheet" href="assets/css/profil.css?v=202609070159" />
|
||
</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>
|
||
<!-- Beschriftung ergänzt 04.09.2026 (Audit): Als einziges der
|
||
vierzehn Felder auf dieser Seite hatte dieses keine. Die
|
||
Überschrift der Gruppe steht zwar darüber, gehört für ein
|
||
Vorleseprogramm aber nicht zum Feld -- dort kam schlicht
|
||
"Textfeld" an, ohne zu sagen, wofür. -->
|
||
<label class="feld-schild" for="admin_notiz">Interne Notiz zum Creator</label>
|
||
<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>
|
||
|
||
<!-- DAS TEAM (01.09.2026). Steht auch hier, weil ein Creator nur diese
|
||
eine Seite hat: Er soll sehen, wer ihn betreut -- mit Gesicht, nicht
|
||
nur mit Namen. Wen er sehen darf, entscheidet der Server; für ihn
|
||
sind das seine Betreuer und das Management, nicht die anderen
|
||
Creator. Für alle übrigen Rollen wird der Block hier gar nicht erst
|
||
aufgebaut, sie haben ihn auf steckbrief.html. -->
|
||
<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=202609070159" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609070159" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609070159" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609070159" defer></script>
|
||
<script src="assets/js/steckbrief.js?v=202609070159" defer></script>
|
||
<script src="assets/js/profil.js?v=202609070159" defer></script>
|
||
</body>
|
||
</html>
|