DogFatherGitandClaude Opus 5
9c7952b5a3
Filipe: "die symbole und der text dadrin sollen groesser und noch
spezieller sein, und die symbole sollen auch 2-3 farben haben ... sollen
mehr leben haben, auch viel realistischere effekte."
NICHT DREI AUSGEDACHTE FARBEN, SONDERN DIE DREI EINES ECHTEN AUFBAUS
So wird jedes Produktfoto ausgeleuchtet, und aus demselben Grund sieht
es plastisch aus:
1 FUEHRUNGSLICHT, kalt, von oben links. Ein Spitzlicht ist nie
reinweiss -- es traegt die Farbe der Lampe, und die ist kuehl.
2 EIGENFARBE des Gegenstands: der Ton seiner Kachel.
3 STREULICHT, warm, von unten. Licht, das vom Untergrund
zurueckkommt, ist waermer als das Hauptlicht. Genau dieser warme
Saum ist der Grund, warum ein Gegenstand im Bild STEHT statt zu
schweben.
Dazu die aelteste Regel der Malerei: warmes Licht, KUEHLE Schatten. Die
Seitenwaende der Zeichen kippen jetzt ins Blaue statt nur dunkler zu
werden. Und ein RANDLICHT auf der Lichtseite -- der schmale Streifen,
in dem das Fuehrungslicht die Kante streift. Ein Gegenstand ohne diese
Kante sieht immer ein wenig flach aus, und man kann meist nicht sagen,
warum.
ZWEI FEHLER DABEI, BEIDE ERST BEI FUENFFACHER VERGROESSERUNG SICHTBAR
* DAS WARME LICHT LAG UNTER DER FORM. Die Verlaeufe spannten ueber das
ganze 24er-Raster (y 2 bis 22); die Sprechblase des Chats reicht
aber nur von 5,5 bis 20,5. Der warme Stopp bei y 22 war damit
ausserhalb -- von den drei Lichtern kam genau eines an.
`objectBoundingBox` spannt den Verlauf jetzt ueber JEDES Teil
einzeln: Der Kalenderkorpus bekommt sein volles Licht, seine Fuesse
ebenfalls. So verhaelt sich ein echter Aufbau -- jedes Teil liegt im
selben Licht, nicht im selben Ausschnitt.
* DAS RANDLICHT WAR SCHMALER ALS DIE KONTUR DARUEBER und lag deshalb
vollstaendig darunter: gebaut, gezeichnet, unsichtbar. Jetzt 2,7
gegen 1,9 -- so schaut es oben links hervor.
GROESSER, WIE GEWUENSCHT
Plakette 58 -> 64 px (grosse Kachel 62 -> 70), Zeichen 29 -> 35 px
(gross 32 -> 39), Wasserzeichen 132 -> 156 px (gross 168 -> 196),
Name 1,06 -> 1,15 rem (gross 1,24 -> 1,38), Unterzeile 0,78 -> 0,845.
Auf dem Dashboard entsprechend.
UND DAS SCHILD WIRFT LICHT AUF SEINE KACHEL
Ein beleuchteter Gegenstand faerbt seine Umgebung. Ohne diesen Abfall
sieht selbst ein gut gebautes Schild aufgeklebt aus. Weit gestreut und
weit unter der Blendschwelle: Man soll ihn nicht sehen, man soll ihn
vermissen, wenn er fehlt.
Zehn Pruefungen gelaufen, alle gruen -- darunter Handy und Breiten,
weil groesserer Text der schnellste Weg zu einem Ueberlauf ist.
Co-Authored-By: Claude Opus 5 <[email protected]>
179 lines
7.7 KiB
HTML
179 lines
7.7 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 · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#0674b9" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609071550" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609071550" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609071550" />
|
||
<link rel="stylesheet" href="assets/css/content.css?v=202609071550" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609071550" />
|
||
</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=202609071550" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609071550" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609071550" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609071550" defer></script>
|
||
<script src="assets/js/checkliste.js?v=202609071550" defer></script>
|
||
<script src="assets/js/vorlagen.js?v=202609071550" defer></script>
|
||
<script src="assets/js/content.js?v=202609071550" defer></script>
|
||
</body>
|
||
</html>
|