DogFatherGitandClaude Opus 5
de19684883
Filipe: "ich will in jeder seite auch eine kleine detaillierte aber
schnelle erklaerung kurz und knapps noch zu jeder seite."
DREI ZEILEN AUF JEDER DER 25 SEITEN
WOFUER was auf dieser Seite steht
DU TUST was man hier konkret macht
MERKE nur dort, wo es etwas gibt, das man falsch versteht
SIEHT wer diese Seite ueberhaupt oeffnen kann
Offen sichtbar und nicht hinter einem Aufklapper: "schnell" war seine
Bedingung, und eine Erklaerung, die man erst aufklappen muss, ist
genau dann nicht da, wenn man sie braucht.
DIE ZEILE "SIEHT" IST GERECHNET, NICHT GESCHRIEBEN
Sie kommt aus der Rechtetafel -- aus derselben, aus der auch die
Schranke ihre Entscheidung holt. Haette ich sie danebengeschrieben,
waere sie beim ersten Umstellen in "Wer sieht was" still falsch
geworden, in einem Satz, der behauptet, wer etwas sieht. Die Pruefung
stellt die Tafel deshalb wirklich um und sieht nach, ob der Satz
mitwandert.
Die Erklaerung haengt hinter derselben Schranke wie die Seite: Wer sie
nicht oeffnen darf, bekommt 404 -- nicht 403, sonst waere dieser Weg
eine Landkarte des Hauses.
Eingebunden ist sie nicht ueber eine Liste von Dateinamen, sondern
ueber "wer kopf.js laedt": die 26. Seite ist damit automatisch dabei.
Fuenf Seiten haben keine Kopfzeile (Chat, Kalender, Start, Team,
Teamlage) -- dort haengt der Kasten an <main>, sonst waeren
ausgerechnet die haeufigsten Seiten lautlos leer geblieben.
ZWEI EIGENE MAENGEL, GEFUNDEN DURCH HINSEHEN, NICHT DURCH DIE PRUEFUNG
Die erste Fassung war gruen -- und stand mitten auf dem Buehnenbild,
mit einem Lichtfleck hinter "SIEHT". Und "Wofuer" sprach fast woertlich
die Unterzeile darueber nach. Beides misst die Pruefung jetzt: Kontrast
mit dem dritten Ausgang ("steht auf der Buehne" ist kein Ergebnis) und
die Wortueberschneidung mit der Unterzeile.
ZWEI BEFUNDE, DIE SCHON VORHER ROT WAREN
1. pruef-tempo-workspace verglich die UNKOMPRIMIERTE Groesse gegen eine
Grenze, die fuer die Leitung gedacht war -- waehrend der Kommentar
daneben "das ist, was wirklich ueber die Leitung ging" behauptete.
Live steht Caddy davor. Nachgemessen an der echten Adresse:
start.css 345 KB -> 111 KB zstd. Die Pruefung wog also 1,2 MB, wo
Filipe 500 KB bekommt. Jetzt wird Komprimierbares im Pruefstand
gzip-gepackt (115 KB gegen 111 KB live -- auf vier Prozent genau),
geurteilt wird ueber die uebertragene Groesse, berichtet werden
beide. Dabei prompt in die dokumentierte Falle getappt: `body()` auf
einen Ereignisstrom endet nie, der Lauf blieb stehen. Jetzt
ausgenommen, plus Notbremse je Koerper.
2. pruef-ueberlappung konnte seit Tagen nicht mehr zeigen, dass sie
eine Ueberlappung ueberhaupt findet: Ihre Gegenprobe legt einen Knopf
auf einen anderen, traf aber 6 px daneben. Zwei Ursachen in einer
Zeile -- `position: fixed` bezieht sich auf einen Vorfahren mit
`transform`, und die `transition` der Knoepfe liefert beim sofortigen
Messen die Lage von vorher. Jetzt `transform` + `transition: none`:
34x36 px erkannt, 20 Seiten-Breiten-Paare, 0 Befunde.
PRUEFUNGEN: pruef-erklaerung neu mit 44, davon 8 im Browser (Seite mit
und ohne Kopfzeile, Handy, Kontrast, Echo). Mein Schild stand auf
10,88 px und lag unter der Hausgrenze von 11,5 -- gefunden von
pruef-css-klassen, nicht vom Auge.
Co-Authored-By: Claude Opus 5 <[email protected]>
192 lines
8.5 KiB
HTML
192 lines
8.5 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>Content-Ideen · 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=202609141819" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/content.css?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609141819" />
|
||
<!-- 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=202609141819" />
|
||
</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> · Content</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">Betreuung</p>
|
||
<h1 class="titel">Content-Ideen</h1>
|
||
<p class="unterzeile" id="unterzeile">
|
||
Von der Idee bis zum Upload – eine Strecke, kein Terminkalender.
|
||
</p>
|
||
</div>
|
||
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Video anlegen</button>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- Kennzahlen. Bewusst wenige und jede mit einer Handlung dahinter –
|
||
eine Zahl ohne Vergleich ist eine Eitelkeitszahl. -->
|
||
<!-- Die Kennzahlen-Reihe stand hier bis zum 01.09.2026 ("diese Kisten
|
||
sind jetzt ueberall zu viel, die sollen weg"). Die Strecke darunter
|
||
zeigt dieselben Zahlen an jeder Spalte. -->
|
||
|
||
<!-- Säulen-Balance: gestapelter Balken, 90 Tage, nur Veröffentlichtes. -->
|
||
<section class="balance" id="balance" hidden>
|
||
<div class="klapp-kopf">
|
||
<p class="feldschild">Womit der Kanal gefüllt wird <span class="leise" id="balance-zeit"></span></p>
|
||
<button type="button" class="knopf-still" id="saeulen-oeffnen">Säulen verwalten</button>
|
||
</div>
|
||
<div class="balance__balken" id="balance-balken" role="img" aria-label="Verteilung auf die Content-Säulen"></div>
|
||
<ul class="legende" id="balance-legende"></ul>
|
||
<p class="balance__hinweis" id="balance-hinweis"></p>
|
||
</section>
|
||
|
||
<!-- Säulen verwalten. Zugeklappt, weil man das selten anfasst. -->
|
||
<section class="saeulen-kasten" id="saeulen-kasten" hidden>
|
||
<div class="klapp-kopf">
|
||
<p class="feldschild">Content-Säulen</p>
|
||
<button type="button" class="knopf-still" id="saeulen-zu">Schließen</button>
|
||
</div>
|
||
<p class="block__frage">
|
||
Drei bis fünf Themen, aus denen der Kanal besteht. Als Richtwert gilt
|
||
<strong>70 % Wert</strong> (Unterhaltung, Hilfe), <strong>20 % Community</strong>,
|
||
<strong>10 % Eigenwerbung</strong>. Eine Säule wird erst brauchbar, wenn Formate an ihr hängen.
|
||
</p>
|
||
<div id="saeulen-liste"></div>
|
||
<form class="saeule-neu" id="saeule-neu">
|
||
<div class="feld feld--saeule-creator" id="feld-saeule-creator" hidden>
|
||
<label class="feld-schild" for="s-creator">Für</label>
|
||
<select id="s-creator"></select>
|
||
</div>
|
||
<div class="feld">
|
||
<label class="feld-schild" for="s-name">Name der Säule</label>
|
||
<input id="s-name" maxlength="40" placeholder="z. B. Tutorials" required />
|
||
</div>
|
||
<div class="feld feld--schmal">
|
||
<label class="feld-schild" for="s-ziel">Ziel-Anteil %</label>
|
||
<input id="s-ziel" type="number" min="0" max="100" step="5" placeholder="z. B. 70" />
|
||
</div>
|
||
<button type="submit" class="knopf knopf--klein">Hinzufügen</button>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Formular für ein neues Video -->
|
||
<form class="neu" id="neu" hidden>
|
||
<div class="neu__raster">
|
||
<div class="feld feld--breit">
|
||
<label class="feld-schild" for="f-titel">Worum geht es?</label>
|
||
<input id="f-titel" name="titel" maxlength="160" required
|
||
placeholder="z. B. „3 Fehler beim ersten LIVE“" />
|
||
</div>
|
||
<div class="feld feld--breit">
|
||
<label class="feld-schild" for="f-hook">
|
||
Hook <span class="leise">– die ersten Sekunden, sie entscheiden über alles</span>
|
||
</label>
|
||
<input id="f-hook" name="hook" maxlength="300"
|
||
placeholder="z. B. „Ich hab 4 Monate gebraucht, um das zu kapieren.“" />
|
||
</div>
|
||
<div class="feld" id="feld-creator" hidden>
|
||
<label class="feld-schild" for="f-creator">Creator</label>
|
||
<select id="f-creator"></select>
|
||
</div>
|
||
<div class="feld">
|
||
<label class="feld-schild" for="f-art">Stufe</label>
|
||
<select id="f-art"></select>
|
||
</div>
|
||
<div class="feld">
|
||
<label class="feld-schild" for="f-saeule">Säule</label>
|
||
<select id="f-saeule"></select>
|
||
</div>
|
||
<div class="feld">
|
||
<label class="feld-schild" for="f-format">Format</label>
|
||
<input id="f-format" maxlength="60" list="formate" placeholder="z. B. Tutorial" />
|
||
<datalist id="formate">
|
||
<option value="Talking Head"></option>
|
||
<option value="Tutorial"></option>
|
||
<option value="Story"></option>
|
||
<option value="LIVE-Ausschnitt"></option>
|
||
<option value="Vorher/Nachher"></option>
|
||
<option value="Reaktion"></option>
|
||
<option value="Behind the Scenes"></option>
|
||
</datalist>
|
||
</div>
|
||
<div class="feld">
|
||
<label class="feld-schild" for="f-geplant">Soll raus am</label>
|
||
<input id="f-geplant" type="date" />
|
||
</div>
|
||
<div class="feld feld--breit">
|
||
<label class="feld-schild" for="f-text">Ablauf, Notizen (optional)</label>
|
||
<textarea id="f-text" rows="3" maxlength="6000"></textarea>
|
||
</div>
|
||
</div>
|
||
<p class="fehler" id="neu-fehler" role="alert" aria-live="polite"></p>
|
||
<div class="neu__knoepfe">
|
||
<button type="submit" class="knopf knopf--klein" id="neu-speichern">Anlegen</button>
|
||
<button type="button" class="abmelden" id="neu-abbrechen">Abbrechen</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="filterzeile" id="filterzeile"></div>
|
||
|
||
<!-- Die Strecke. Fünf Spalten, auf dem Handy untereinander. -->
|
||
<!-- Fertige Ideen zum Uebernehmen. Steht VOR der Strecke: Wer noch
|
||
nichts hat, soll nicht erst an leeren Spalten vorbeiscrollen. -->
|
||
<div id="vorlagen" hidden></div>
|
||
|
||
<div class="strecke" id="strecke" aria-busy="true">
|
||
<p class="leise">Wird geladen …</p>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609141819" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609141819" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609141819" defer></script>
|
||
<script src="assets/js/erklaerung.js?v=202609141819" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609141819" defer></script>
|
||
<script src="assets/js/checkliste.js?v=202609141819" defer></script>
|
||
<script src="assets/js/vorlagen.js?v=202609141819" defer></script>
|
||
<script src="assets/js/content.js?v=202609141819" defer></script>
|
||
</body>
|
||
</html>
|