DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7673c1213621ee7f59a4b1204f2d5395400c7b4e
dogfather-universe/workspace/profil.html
T
DogFatherGitandClaude Opus 5 7673c12136 Startseite: 17 eigene Farben -- gerechnet, nicht gewaehlt 
Filipe: "jede kiste soll seine eigene farbe haben. und die kacheln sollen
viel spezieller, viel spezieller sein."

BEIM ERSTEN MAL HATTE ICH ABGELEHNT, und das war zu bequem. Mein Einwand
stimmte zwar -- ein Versuch mit frei gewaehlten Farben ergab Paare mit
1,4 Grad Abstand, also praktisch dieselbe Farbe -- aber daraus "geht
nicht" zu machen, war falsch. Es geht, man muss nur rechnen.

Der Denkfehler war die Annahme, alle 17 muessten sich voneinander
unterscheiden. Das Auge vergleicht aber nur, was NEBENEINANDER liegt.
Also:

1. 17 Toene, gleichmaessig um den Farbkreis (je 21 Grad), gerechnet in
   OKLCH -- dort sind gleiche Abstaende auch fuer das Auge gleich.
   Helligkeit und Farbstaerke konstant, damit keine sich vordraengt. Wo
   die Farbstaerke den darstellbaren Bereich verliesse (Gelb und Gruen
   frueher als der Rest), wird sie gesenkt, bis sie hineinpasst.

2. Die ZUORDNUNG ist eine Suche ueber die tatsaechlichen Nachbarschaften
   im Raster (nebeneinander UND untereinander). Gesucht: die Anordnung
   mit dem groesstmoeglichen kleinsten Nachbarabstand. Ergebnis:
   mindestens 105,9 Grad zwischen allen Nachbarn.

3. Unter allen Anordnungen, die eine harte Untergrenze schaffen, gewinnt
   die passendste: LIVE rot, Technik gelb, Reports gruen, Personen
   rot-gold, Schutz stahlblau.

Steht als tools/kachel-farben.mjs im Repo, mit festem Zufallsstartwert --
derselbe Lauf ergibt dieselben Farben. Wer Kacheln umsortiert, aendert
die Nachbarschaften und muss es neu laufen lassen; das steht auch in
start.js.

Geprueft: Helligkeitsband, Farbstaerke und Kontrast bestehen fuer alle
siebzehn gegen genau diesen Hintergrund.

VIEL SPEZIELLER -- das WASSERZEICHEN:

Jede Kachel traegt ihr eigenes Zeichen noch einmal, riesig, angeschnitten
und fast unsichtbar (7 % Deckung) in der Ecke. Das ist der Grund, warum
siebzehn Kacheln nicht mehr wie siebzehn Kaesten aussehen: Jede bekommt
eine eigene grosse Form, ohne dass ein einziges zusaetzliches Bild
geladen wird -- es ist derselbe Pfad, nur groesser. Bewusst so schwach,
dass man es nicht liest, sondern nur spuert. Beim Ueberfahren wird es
etwas deutlicher und wandert zwei Pixel.

Dazu: Zeichenfeld 46 auf 52 px mit farbigem Schein darunter, Name auf
1,06 rem, mehr Polsterung. Alles mit prefers-reduced-motion abgesichert.

44 Pruefungen. Neu: dass jede Kachel eine EIGENE Farbe hat (17 Farben auf
17 Kacheln, gemessen an der berechneten Strichfarbe) und dass das
Wasserzeichen da und schwach genug ist.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-31 23:32:22 +02:00

135 lines
5.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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=202608312332" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
<link rel="stylesheet" href="assets/css/profil.css?v=202608312332" />
</head>
<body class="start">
<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"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Profil</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>
<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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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&nbsp;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=202608312332" defer></script>
<script src="assets/js/kopf.js?v=202608312332" defer></script>
<script src="assets/js/profil.js?v=202608312332" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink