DogFatherGitandClaude Opus 5
177c3c012a
=== 1. BILDER OEFFNEN SICH MITTIG, MIT HUSKY UND HASE ===
Filipe: "wenn man bilder aufmacht, will ich dass die in der mitte sind.
beim hochformat soll links der husky sein und rechts der hase und beim
querformat soll oben dogfather und unten team dogi stehen da wo platz
ist ... ich will nicht dahin geschmissen sondern was richtig geiles mit
einem geilen hintergrund."
WAS VORHER PASSIERTE, und es war kein Fehler im Code: Der Klick fuehrte
auf die DATEI. Was man dann sah, war die eingebaute Bildanzeige des
Browsers -- schwarzer Grund, Bild oben links in der Ecke, auf seinem
Bildschirmfoto 1200 px Schwarz daneben. Eine Datei hat keine
Gestaltung. Wer Gestaltung will, muss eine SEITE zeigen.
Die Schau liegt jetzt UEBER dem Chat. Escape bringt einen dorthin
zurueck, wo man war, und das Gespraech laeuft im Hintergrund weiter --
ein zweiter Tab braeuchte eine eigene Seite, eine eigene Anmeldung und
einen eigenen Weg zurueck.
DER WEG IN DEN TAB BLEIBT TROTZDEM. Der Verweis hat unveraendert
`href`, `target` und `rel`; mittlere Maustaste, "In neuem Tab oeffnen"
und Herunterladen gehen wie seit jeher. Abgefangen wird nur der
gewoehnliche Klick -- und auch der nur, wenn die Schau geladen ist.
Wer Strg, Umschalt oder Befehl haelt, bekommt den alten Weg; das sind
die Griffe, die Leute seit zwanzig Jahren benutzen.
DIE BEGLEITER STEHEN DA, WO PLATZ IST -- und die Antwort darauf wird
GEMESSEN, nicht geschaetzt: nicht die Fensterbreite, sondern der Rest
neben dem Bild, nachdem es eingepasst ist. Eine Schwelle wie "ab
1100 px" waere fuer ein 3:4-Foto richtig und fuer ein 9:16-Foto auf
demselben Schirm falsch. Unter 170 px bleibt der Husky weg: Eine Figur,
die ein Streifen ist, steht besser nicht da.
Husky und Hase sind eigens verkleinert (2,1 MB und 1,0 MB werden 40 kB
und 32 kB) und bekommen weiche Raender -- ihr Hintergrund ist dunkel,
aber nicht durchsichtig; als Rechteck saehe man zwei Kaesten.
Der erste Anlauf spiegelte den Hasen, damit beide "nach innen" schauen
-- ein alter Reflex aus dem Plakatsatz. Auf dem Probebild stand danach
"Hasi Dog" seitenverkehrt auf seinem Hoodie. Schrift im Bild spiegelt
man nie.
pruef-chat-anhaenge bekommt 14 neue Punkte, darunter beide Formate und
zwei Gegenproben: Strg+Klick oeffnet die Schau NICHT (sonst hiesse "sie
geht auf" nur, dass der alte Weg verloren ist), und im Hochformat liegt
KEINE der Figuren ueber dem Foto.
NEBENBEFUND, den die Pruefung gefunden hat: Die Sprachnachricht war auf
165 px geschrumpft -- zu schmal fuer den Schieber. Ursache war keine
Aenderung an ihr, sondern eine Folge: Die Blase ist so breit wie ihr
breitester Inhalt, und seit die Handgriffe darunter Zeichen statt
Woerter sind (123 statt ueber 400 px), bestimmt das Abspielgeraet die
Breite selbst. Eine Reihe kuerzer zu machen hat einen Schieber schmaler
gemacht, drei Bildschirme weiter.
=== 2. DER FARBKREIS: HELLER UND DUNKLER ===
Filipe: "dieser kreis muss viel perfekter sein. ich will dass die leute
auch heller und dunkler aussuchen koennen ... so dass die leute viel
krassere moeglichkeiten haben."
WARUM DAS BIS HEUTE NICHT GING: Die 360 Toene liegen alle auf DERSELBEN
Leuchtdichte. Das war kein Zufall -- solange die Blase in der gewaehlten
Farbe stand, musste jede dieser Flaechen dieselbe Schrift tragen. Eine
hellere Farbe zuzulassen hiesse damals: irgendwo wird eine Nachricht
unlesbar.
SEIT DEM 25.09.2026 IST DIE BEDINGUNG EINE ANDERE. Die Blase ist fuer
alle dunkles Glas; der Ton ist Kante und NAME. Damit faellt die alte
Regel weg, und an ihre Stelle tritt: der Ton muss als Name auf dem
Blasengrund lesbar bleiben.
DIE ZAHLEN SIND GEMESSEN, NICHT GEWAEHLT. Ueber alle 360 Winkel, jeweils
der schlechteste Fall:
40 % schwarz 4,468 -- unter der Schwelle, faellt raus
34 % schwarz 4,555 -- ginge, aber ohne Reserve
30 % schwarz 4,619 <- die dunkelste Stufe
0 % 5,12 <- die Mitte, der alte Kreis
55 % weiss 9,6 <- die hellste Stufe
Sieben Stufen, 2520 Farben statt 360. pruef-chat-neu rechnet jede
einzelne nach -- die knappste hat 2,6 Prozent Reserve.
DIE ALTEN SCHLUESSEL BLEIBEN GUELTIG. "ton-214" heisst weiterhin genau
dieselbe Farbe; die Stufe steht als Zusatz dahinter ("ton-214-s6"). Wer
seit dem 23.09. eine Farbe traegt, traegt nach diesem Umbau dieselbe.
DIE PROBE IN DER MITTE ZEIGT ENDLICH, WAS MAN BEKOMMT. Dort stand eine
gefuellte Flaeche mit heller Schrift -- so sah die Blase bis heute frueh
aus. Jetzt steht dort derselbe Blasengrund und darauf der Ton als Name,
mit genau der Rechnung aus chat.css. Das ist nicht nur ehrlicher, es
macht die sieben Stufen erst moeglich: Eine gefuellte Flaeche muesste
Schrift tragen, und bei sehr hellen Toenen schafft das keine der beiden
Schriftfarben mehr (4,1 statt noetiger 7). Als Name auf dunklem Grund
ist derselbe helle Ton besonders gut lesbar (8,0).
Der Erklaersatz im Fenster war damit falsch geworden ("Alle Toene
leuchten gleich stark") und sagt jetzt, was stimmt.
ZWEI PRUEFUNGEN WURDEN GENAUER:
pruef-chat-neu mass den HINTERGRUND der Mitte -- eine Darstellung,
die es nicht mehr gibt. Sie misst jetzt die Schriftfarbe und rechnet
die Mischung nach. Dabei stolperte sie ueber eine dritte
Farbschreibweise: Chromium gibt `color-mix`-Ergebnisse als
`color(srgb 0.676 0.645 0.504)` zurueck. Die Zeile war rot, obwohl
die Farbe auf den Bildpunkt genau stimmte -- ein Fehlalarm, der
teurer ist als ein echter Befund, weil man am Aussehen sucht und der
Fehler im Lesegeraet liegt.
Und sie prueft nicht mehr 360, sondern 360 x 7 -- nur den Grundton zu
messen hiesse, sechs Siebtel ungeprueft auszuliefern.
Geprueft: pruef-chat-anhaenge (123), pruef-chat-neu (36),
pruef-chatkachel (40), pruef-chat, pruef-chat-ausbau (69),
pruef-chat-optik, pruef-tippziele (11), pruef-css-klassen.
Co-Authored-By: Claude Opus 5 <[email protected]>
230 lines
10 KiB
HTML
230 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=202609250435" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609250435" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609250435" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609250435" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609250435" />
|
||
<link rel="stylesheet" href="assets/css/profil.css?v=202609250435" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609250435" />
|
||
<!-- 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=202609250435" />
|
||
</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=202609250435" defer></script>
|
||
<script src="assets/js/hochladen.js?v=202609250435" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202609250435" defer></script>
|
||
|
||
<script src="assets/js/wahl.js?v=202609250435" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609250435" defer></script>
|
||
<script src="assets/js/installieren.js?v=202609250435" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609250435" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609250435" defer></script>
|
||
<script src="assets/js/steckbrief.js?v=202609250435" defer></script>
|
||
<script src="assets/js/profil.js?v=202609250435" defer></script>
|
||
</body>
|
||
</html>
|