Files
dogfather-universe/workspace/scouting.html
T
DogFatherGitandClaude Opus 5 766c75b51d Die Buehnen richtig: nicht mehr beschnitten, hell, mit Lesespur
Drei handfeste Fehler, alle im Screenshot zu sehen gewesen.

1. ABGESCHNITTEN. background-size stand auf "138% auto". Auf einem
   2540 px breiten Schirm wurde das Bild damit 3500 px breit und knapp
   2000 px hoch -- in einem 1300 px hohen Fenster fehlten 700 px, und
   zwar oben. Genau deshalb waren die Figuren riesig und ihre Koepfe
   weg. Jetzt cover mit Verankerung auf 50% 42%: Die Flaeche wird immer
   gefuellt, so wenig wie noetig skaliert, und wenn etwas beschnitten
   werden muss, dann Fussboden und Decke -- nicht die Gesichter.

2. DIE VIGNETTE LAG FALSCH HERUM. Abgedunkelt wurde die MITTE, also
   genau der Teil, in dem die Szene steht. Man sah die Raender des
   Bildes und in der Mitte einen grauen Fleck. Jetzt laufen die RAENDER
   ins Dunkle und die Mitte bleibt klar -- so wie in der Fotografie.

3. ZWEI SCHICHTEN DUNKELHEIT. Zusaetzlich zur Vignette legte der
   Schleier .86/.58/.44 Schwarz ueber dasselbe Bild. Jetzt nur noch
   oben (Kopfleiste) und unten (Seitenende) ein Streifen.

Dazu die Bilder selbst: Helligkeit 0.66 -> 0.88, mehr Kontrast und
Farbe. Sie sind ein BILD, kein Nebel.

DIE LESESPUR ist der eigentliche Kniff. In allen neun Szenen stehen
HasiDog und DogFather AUSSEN, die Mitte ist frei -- danach wurden sie
ausgesucht. Diese Aufteilung wird jetzt benutzt statt bekaempft: aussen
bleibt das Bild hell und scharf, in der Mitte (wo der Text steht) wird
gedaempft. Der klare Rand ist in jedem Fenster mindestens 400 px breit.
Auf dem Handy gibt es daneben keinen Platz, dort deckt die Spur alles.

Was frei stand und keine Karte hatte, bekommt eine Lesezone mit
backdrop-filter: Der Hintergrund bleibt in Farbe und Form sichtbar,
wird an dieser Stelle aber weichgezeichnet. Die billige Loesung waere
gewesen, das Bild wieder abzudunkeln -- damit waere man dort, wo man
angefangen hat.

ZWEITER FUND AN DER EIGENEN KONTRASTMESSUNG. Sie tastete
ausschliesslich NEBEN dem Element ab. Traegt ein Text seine Flaeche
aber selbst (eine Beschriftung mit Hintergrund und Polsterung), liegt
jeder Punkt daneben schon auf dem Bild -- gemeldet wurden 1,89:1,
obwohl der Text auf deckender Flaeche steht und tadellos lesbar ist.
Jetzt wird zuerst in der eigenen Polsterung gemessen, also auf dem,
worauf der Text WIRKLICH liegt. (Der erste Fund an derselben Stelle war
gestern: Sie mass Text gegen Nachbartext.)

Nach dem Aufhellen einmal komplett durchgemessen: von sieben roten
Stellen auf null. Schlechtester Wert jetzt 4,70:1 bei 4,5:1 Norm.

Die Bilder sind groesser geworden (580 KB -> 1,8 MB fuer alle achtzehn),
weil weniger Dunkelheit weniger komprimierbar ist. Geladen wird pro
Seite genau eine: 42 bis 132 KB.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-01 11:43:08 +02:00

133 lines
5.5 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>Scouting · 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=202609011138" />
<link rel="stylesheet" href="assets/css/start.css?v=202609011138" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011138" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202609011138" />
</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"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Scouting</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 inhalt--breit">
<section class="kopf-zeile">
<div>
<p class="marke">Scout-CRM</p>
<h1 class="titel">Pipeline</h1>
<p class="unterzeile" id="unterzeile">Vom ersten Fund bis zur Übergabe – nachvollziehbar statt im Kopf.</p>
</div>
<div class="steuerung">
<div id="scoutwahl-block" hidden>
<label class="feld-schild" for="f-scout">Scout</label>
<select id="f-scout"><option value="">Alle Scouts</option></select>
</div>
<button type="button" class="knopf knopf--klein" id="neu-auf">Neuer Kontakt</button>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<!-- Follow-ups: der Teil, der ohne System am ehesten untergeht. -->
<section class="faellig" id="faellig" hidden>
<p class="faellig__titel">Follow-up fällig</p>
<ul class="faellig__liste" id="faellig-liste"></ul>
</section>
<section class="neu" id="neu-block" hidden>
<h2 class="neu__titel">Neuer Kontakt</h2>
<form id="neu-form">
<div class="neu__raster">
<div class="feld feld--breit">
<label class="feld-schild" for="n-name">Name</label>
<input id="n-name" maxlength="120" required placeholder="Wie heißt die Person?" />
</div>
<div class="feld">
<label class="feld-schild" for="n-plattform">Plattform</label>
<input id="n-plattform" maxlength="60" placeholder="z. B. TikTok" />
</div>
<div class="feld">
<label class="feld-schild" for="n-handle">Profil / Handle</label>
<input id="n-handle" maxlength="120" placeholder="@…" />
</div>
<div class="feld">
<label class="feld-schild" for="n-prio">Priorität</label>
<select id="n-prio">
<option value="hoch">Hoch</option>
<option value="mittel" selected>Mittel</option>
<option value="niedrig">Niedrig</option>
</select>
</div>
<div class="feld" id="n-scout-block" hidden>
<label class="feld-schild" for="n-scout">Scout</label>
<select id="n-scout"><option value="">– niemandem zugeordnet –</option></select>
</div>
<div class="feld feld--breit">
<label class="feld-schild" for="n-aktivitaet">Aktivität &amp; LIVE-Fokus</label>
<input id="n-aktivitaet" maxlength="3000" placeholder="Wie oft LIVE? Welche Zeiten? Welches Format?" />
</div>
<div class="feld feld--breit">
<label class="feld-schild" for="n-potenzial">Potenzial &amp; Stil</label>
<input id="n-potenzial" maxlength="3000" placeholder="Was macht die Person besonders?" />
</div>
<div class="feld">
<label class="feld-schild" for="n-followup">Nächster Follow-up</label>
<input id="n-followup" type="date" />
</div>
</div>
<p class="fehler" id="n-fehler" role="alert" aria-live="polite"></p>
<div class="neu__knoepfe">
<button type="submit" class="knopf knopf--klein" id="n-speichern">Aufnehmen</button>
<button type="button" class="knopf-still" id="neu-zu">Abbrechen</button>
</div>
</form>
</section>
<div id="pipeline" aria-busy="true"><p class="leise">Pipeline wird geladen …</p></div>
</main>
<!-- Zugangscode nach dem Onboarding: genau einmal sichtbar. -->
<div class="schleier" id="code-schleier" hidden>
<div class="code-fenster" role="dialog" aria-modal="true" aria-labelledby="code-titel">
<p class="marke">Onboarding gestartet</p>
<h2 class="code-fenster__titel" id="code-titel">Zugangscode</h2>
<p class="code-fenster__text">
Dieser Code wird <strong>genau einmal</strong> angezeigt und ist danach nicht mehr
abrufbar. Gib ihn persönlich weiter, nicht über einen offenen Kanal.
</p>
<p class="code-fenster__code" id="code-wert">—</p>
<div class="neu__knoepfe">
<button type="button" class="knopf knopf--klein" id="code-kopieren">Kopieren</button>
<button type="button" class="knopf-still" id="code-zu">Habe ich notiert</button>
</div>
</div>
</div>
<script src="assets/js/wahl.js?v=202609011138" defer></script>
<script src="assets/js/bereiche.js?v=202609011138" defer></script>
<script src="assets/js/kopf.js?v=202609011138" defer></script>
<script src="assets/js/scouting.js?v=202609011138" defer></script>
</body>
</html>