screen1 -- HIGHLIGHTS AUF ANSCHLAGBRETTS PLATZ
Kein Tausch, sondern ein Aufruecken: Highlights nimmt die Stelle,
alle anderen wandern eine weiter. Inhaltlich stimmt das auch --
was die Leute selbst gemacht haben, steht vor dem, was ihnen
angesagt wird.
screen2 -- DIE CHATFARBEN SIND GERECHNET, NICHT GEGRIFFEN
Gemessen, was drinstand: Buntheit 0,002 bis 0,048, im Mittel 0,028
-- auf dem Bildschirm zwoelf Grautoene. Das lag nicht an fehlendem
Mut, sondern an der Fusszeile der Blase: Sie stand auf der leisen
Hausschrift, und gegen die darf die Flaeche kaum Farbe haben.
Deshalb ZUERST die Schrift (--blase-text/--blase-leise, eigene
Farben der Blase), DANN die Flaeche. Andersherum waere es der
Fehler vom selben Vormittag gewesen, als 27 von 31 Startkacheln
unlesbar wurden.
tools/chat-kacheln-rechnen.mjs liest beide Schriftfarben aus dem
CSS und rechnet daraus die hellste Flaeche, die sie noch tragen.
Ergebnis: Buntheit 0,072 bis 0,268, alle zwoelf auf DERSELBEN
Leuchtdichte -- also exakt demselben Kontrast (7,02 bis 7,13:1).
Zwei Anlaeufe waren falsch und stehen im Werkzeug begruendet:
- hoechste Buntheit nehmen, dann Kontrast pruefen. Musste
scheitern: gesaettigtes Gelb ist bei gleicher empfundener
Helligkeit viel heller als Blau.
- gleiche OKLab-Helligkeit statt gleicher Leuchtdichte. Das
Versprechen der zwoelf lautet "ueberall gleich gut lesbar",
und Lesbarkeit haengt an der Leuchtdichte, nicht am Eindruck.
WER NICHTS EINSTELLT, BEKOMMT TROTZDEM EINE FARBE. Gemessen an der
Live-Datenbank hatten vier von fuenfzehn eine gewaehlt -- der Chat
war fuer alle anderen einfarbig. Jetzt vergibt der Server einen der
elf bunten Toene aus der Personennummer, stabil. Schrittweite 4:
elf ist prim, also laufen alle Toene durch, und vier Schritte sind
131 Grad im Farbkreis -- aufeinanderfolgende Nummern landen so weit
auseinander wie moeglich. Mit id % 11 sassen zwei Nachbarn im
selben Gespraech magenta und rot nebeneinander.
Niemand verliert seine Wahl: veilchen, ziegel und moos sind die
drei gewaehlten und behalten ihren Farbbereich.
Dazu: Blasen mit 22px runden Kanten (nur die Ecke zur Person bleibt
spitz -- sie sagt, wer spricht), Lichtsaum oben innen, weicher
Schatten. Der Name hell und fett mit Rollenpunkt davor; er stand
auf leisem Grau mit 85 Prozent Deckung und war der schwaechste Text
der Seite, ausgerechnet der, der sagt, wer spricht.
ZWEI REGELBLOECKE FUER DIESELBE BLASE ZUSAMMENGELEGT. Der untere
gewann und hat an einem Tag zweimal Schaden angerichtet: Er stellte
die runden Kanten auf 16px zurueck (die Aenderung waere wirkungslos
ausgeliefert worden), und er mischte 26 Prozent Akzentfarbe in die
eigene Blase -- die hatte damit eine Farbe, die in CHAT_KACHELN
nicht vorkommt und die die Kontrastpruefung nie angesehen hat.
screen3 -- ALLE FARBEN DES HAUSES IN EINER KACHEL
tools/kachel-regenbogen.mjs leitet die 31 benutzten Toene ab
(bereicheFuer/zusatzBereicheFuer ueber alle Rollen und beide
Haeuser) und schreibt daraus einen Streifenverlauf mit harten
Kanten -- "nicht gemischt" war die eigentliche Ansage. Ein Verlauf
ergaebe Zwischentoene, die es im Haus nicht gibt.
Gegen einen deckenden Grund gemischt, nicht gegen --flaeche: Die
ist halbdurchsichtig, und durch 31 schmale Baender schien das
Buehnenbild -- sie verloren genau das, wofuer sie da sind.
Der Lesesaum ist staerker als auf den anderen Kacheln, und zwar
gemessen: Mit deren Werten kam der Text auf 4,45:1, fuenf
Hundertstel unter der Grenze. Gefunden hat das pruef-kachelfarben,
nicht der Blick -- 4,45 gegen 4,50 sieht man nicht.
pruef-buehne -- DIE ZAHL GEHOERT IN DIE BEDINGUNG
Die Abtastung wurde nachsichtiger (fremde Flaechen zaehlen nicht
mehr als Untergrund eines Textes). Das war richtig und hat einen
Fehlalarm beseitigt, der seit Tagen kam. Eine Lockerung kann aber
zu weit gehen, deshalb muss jetzt jeder gefundene Text in genau
einem von drei Toepfen landen: gemessen, ohne freien Untergrund,
oder aussortiert. Geht die Rechnung nicht auf, ist unterwegs etwas
still verschwunden.
Erster Anlauf war "mindestens 5 Stellen" -- und wurde auf
uebersicht.html sofort rot, weil die Seite nur vier Texte hat.
Eine feste Schwelle ist eine Rechnung von gestern; diese war keine
fuenf Minuten alt.
Gemessen: pruef-kachelfarben 22/0 (war 18, neu: die Willkommenskachel
traegt wirklich alle benutzten Farben, in beide Richtungen geprueft),
pruef-buehne 192/0, pruef-chatkachel 32/0, pruef-chat-optik 45/0,
pruef-chat 48/0, pruef-erwaehnung 69/0, pruef-start-ansicht 153/0,
pruef-treff 80/0, pruef-willkommen 67/0, pruef-treffchat 110/0,
pruef-css-klassen 30/0.
Co-Authored-By: Claude Opus 5 <[email protected]>
229 lines
10 KiB
HTML
229 lines
10 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 · Spicy & Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
|
||
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
|
||
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
|
||
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
|
||
eine Flaeche sind statt zweier. -->
|
||
<meta name="theme-color" content="#06090f" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609221257" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609221257" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609221257" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609221257" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609221257" />
|
||
<link rel="stylesheet" href="assets/css/profil.css?v=202609221257" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609221257" />
|
||
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
|
||
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
|
||
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
|
||
genau diesen Dateinamen auf crew-haus.css um, und die Seite
|
||
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
|
||
ohne Umfaerben im Browser, ohne Flackern. -->
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202609221257" />
|
||
</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-Termin</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/meldung.js?v=202609221257" defer></script>
|
||
<script src="assets/js/hochladen.js?v=202609221257" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202609221257" defer></script>
|
||
|
||
<script src="assets/js/wahl.js?v=202609221257" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609221257" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609221257" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609221257" defer></script>
|
||
<script src="assets/js/steckbrief.js?v=202609221257" defer></script>
|
||
<script src="assets/js/profil.js?v=202609221257" defer></script>
|
||
</body>
|
||
</html>
|