DogFatherGitandClaude Opus 5
43ce6551e2
ZWEI SACHEN, beide auf Wunsch vom 31.08.2026.
1) "die creator sollen da nur die sehen die wir ihnen eintragen, also
dogfather manager und scout."
Vorher durfte ein Creator in LIVE, Content, Technik, Community und Schutz
selbst anlegen, aendern und eigene Eintraege loeschen. Das hebelt den
Zweck dieser Bereiche aus: Sie sind die Betreuungsakte. Wer eine
LIVE-Auswertung umschreiben oder eine unbequeme Notiz verschwinden lassen
kann, macht die Akte wertlos.
Der Creator SIEHT weiterhin alles, was zu ihm gehoert -- vollstaendig.
Er kann es nur nicht veraendern. Umgesetzt als EINE Schranke vor allen
schreibenden Wegen, nicht als Pruefung an drei Stellen: Genau so ist hier
schon einmal ein Loch entstanden (zwei von drei Stellen abgesichert, die
dritte vergessen). 403 mit klarem Text statt 404 -- der Bereich existiert
fuer ihn ja, er steht davor.
Vorsicht Express 4: Der Platzhalter heisst dort `*`, nicht `*name` wie in
Fassung 5. Mit der falschen Schreibweise haette die Sperre stumm nichts
getan -- kein Fehler, keine Warnung.
37 Pruefungen, Schwerpunkt auf den verneinenden Faellen: alle fuenf
Bereiche, alle drei Wege, dazu der eigene Alteintrag (der frueher
ausdruecklich erlaubt war) und der Nachweis, dass hinterher wirklich
nichts veraendert wurde.
2) Content-Planung: aus der Liste wird eine Strecke.
Recherchiert statt geraten. Die Quellen sind an drei Punkten eindeutig:
* "A content calendar for creators is a pipeline, not a datebook" --
eine Wand aus Terminen verbirgt genau die Stellen, an denen es hakt.
* Die ersten ein bis drei Sekunden entscheiden ueber die Verbreitung.
Der Hook ist deshalb ein eigenes Feld auf jeder Karte, kein Fliesstext.
* Regelmaessigkeit schlaegt Menge. Wer regelmaessig senden will, braucht
VORRAT -- und Vorrat ist die eine Zahl, die eine Ideenliste
verschweigt.
Daraus:
* Fuenf Stufen statt drei (Idee, Hook & Skript, Gedreht, Fertig &
geplant, Veroeffentlicht). Alte 'produktion'-Eintraege werden beim
naechsten Start auf 'gedreht' umgestellt -- ohne das fielen sie aus
jeder Spalte heraus.
* Neue Felder hook, format, saeule_id, geplant (ALTER TABLE, gefahrlos).
* Content-Saeulen je Creator, drei bis fuenf, nach der 70/20/10-Regel.
Mit Balance-Balken ueber 90 Tage, nur Veroeffentlichtes -- was auf dem
Kanal steht, ist die Wahrheit ueber seine Ausrichtung.
* Die Kachel VORRAT rechnet in TAGE um ("reicht noch etwa 7 Tage").
"4 Videos uebrig" sagt nichts; die Tage sagen, ob man am Wochenende
drehen muss. Gezaehlt wird nur Gedrehtes und Fertiges -- eine Idee ist
kein Video, und wer Ideen mitzaehlt, steht am Donnerstag ohne Material.
* "Ideen lassen sich direkt in Aufgabe/Termin/LIVE-Thema ueberfuehren"
-- woertlich aus dem Konzept, das letzte unumgesetzte Stueck. Die Idee
bleibt bestehen und bekommt einen Vermerk, damit niemand dieselbe
Aufgabe zweimal anlegt.
Farben: Die fuenf Saeulenfarben sind Daten, keine Dekoration. Geprueft
gegen genau diesen Hintergrund (#0a0d13) auf Helligkeitsband,
Farbstaerke, Farbfehlsichtigkeit (schlechtestes Paar dE 8.4),
Normalsicht-Abstand (19.3) und Kontrast -- alle Pruefungen bestanden.
Immer mit Legende UND Beschriftung; Farbe allein traegt nie die
Information.
Beim Ansehen des ersten Bildes fiel der klassische Brett-Fehler auf: Die
Spalte "Veroeffentlicht" waechst ewig und schiebt alles andere aus dem
Bild. Sie zeigt jetzt die juengsten sechs, der Rest ist einen Klick
entfernt. Die vorderen Spalten bleiben ungekuerzt -- was dort liegt, ist
Arbeit.
Nur EIN Schreiber fuer die Tabelle eintraege: workspace-content.js
enthaelt ausschliesslich, was es woanders nicht gibt (Saeulen,
Kennzahlen, Ueberfuehren). Zwei Module auf denselben Zeilen waeren der
sichere Weg zu zwei Wahrheiten.
45 + 40 Pruefungen, Computer und Handy, dazu die Gegenprobe: Ein Creator
sieht die ganze Strecke, die Kennzahlen und die Verteilung -- und keinen
einzigen Knopf, auch keinen versteckten. Ausgeblendet ist nicht dasselbe
wie nicht vorhanden.
Co-Authored-By: Claude Opus 5 <[email protected]>
316 lines
13 KiB
CSS
316 lines
13 KiB
CSS
/* ===================================================================
|
|
Content-Planung.
|
|
|
|
Zwei Dinge bestimmen die Gestaltung:
|
|
|
|
1. Es ist eine STRECKE. Die Spalten stehen für Fortschritt von links
|
|
nach rechts, deshalb wird die Farbe der Spaltenköpfe von kühl
|
|
(Idee) nach warm-hell (draußen) heller — man sieht die Richtung,
|
|
ohne sie zu lesen.
|
|
|
|
2. Die Säulenfarben sind DATEN, keine Dekoration. Sie stammen aus
|
|
einer geprüften Palette und wurden gegen genau diesen Hintergrund
|
|
(#0a0d13) gerechnet: Helligkeitsband, Farbstärke, Abstand bei
|
|
Farbfehlsichtigkeit (schlechtestes Paar ΔE 8.4), Normalsicht-
|
|
Abstand (19.3) und Kontrast — alle Prüfungen bestanden. Deshalb
|
|
wird an diesen fünf Werten nichts „nachgebessert": Jede Änderung
|
|
macht die Prüfung ungültig.
|
|
|
|
Augenschonend bleibt alles: gedeckte Töne, keine Leuchtflächen, keine
|
|
Bewegung außer weichen Übergängen.
|
|
=================================================================== */
|
|
|
|
.content-wurzel,
|
|
body.start {
|
|
/* Fünf Plätze für Content-Säulen. Die Zuordnung folgt dem Platz
|
|
(slot), nicht dem Rang -- sonst wechselt eine Säule die Farbe,
|
|
sobald eine andere sie überholt. */
|
|
--saeule-1: #3987e5; /* Blau */
|
|
--saeule-2: #d95926; /* Orange */
|
|
--saeule-3: #199e70; /* Türkis */
|
|
--saeule-4: #c98500; /* Gelb */
|
|
--saeule-5: #d55181; /* Magenta */
|
|
--saeule-0: #56657a; /* ohne Säule -- bewusst grau, keine sechste Farbe */
|
|
}
|
|
|
|
/* ---------- Kennzahlen ---------------------------------------------------- */
|
|
|
|
.kennzahlen {
|
|
display: grid; gap: 10px; margin-bottom: 26px;
|
|
grid-template-columns: 1.4fr repeat(4, 1fr);
|
|
}
|
|
.kachel {
|
|
display: grid; gap: 2px; align-content: start;
|
|
padding: 15px 17px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: rgba(255, 255, 255, .028);
|
|
}
|
|
.kachel[data-gross="ja"] { padding: 17px 20px; }
|
|
.kachel[data-stufe="warn"] {
|
|
border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .05);
|
|
}
|
|
.kachel__wert {
|
|
font-size: 1.7rem; font-weight: 700; line-height: 1.05;
|
|
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
|
|
}
|
|
.kachel[data-gross="ja"] .kachel__wert { font-size: 2.6rem; }
|
|
.kachel[data-stufe="warn"] .kachel__wert { color: var(--warn); }
|
|
.kachel__name {
|
|
font-size: .72rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-leise);
|
|
}
|
|
.kachel__zusatz { font-size: .76rem; color: var(--text-still); }
|
|
|
|
/* ---------- Säulen-Balance ------------------------------------------------ */
|
|
|
|
.balance {
|
|
margin-bottom: 26px; padding: 16px 18px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: rgba(255, 255, 255, .022);
|
|
}
|
|
|
|
/* Ein 2px-Spalt zwischen den Stücken statt einer Trennlinie: Die Lücke
|
|
zeigt die Grenze, ohne eine weitere Farbe einzuführen. */
|
|
.balance__balken {
|
|
display: flex; gap: 2px; height: 30px; margin: 4px 0 12px;
|
|
border-radius: 6px; overflow: hidden;
|
|
}
|
|
.balance__stueck {
|
|
display: flex; align-items: center; justify-content: center;
|
|
min-width: 3px; transition: filter var(--tempo);
|
|
}
|
|
.balance__stueck:hover { filter: brightness(1.15); }
|
|
.balance__stueck[data-slot="1"] { background: var(--saeule-1); }
|
|
.balance__stueck[data-slot="2"] { background: var(--saeule-2); }
|
|
.balance__stueck[data-slot="3"] { background: var(--saeule-3); }
|
|
.balance__stueck[data-slot="4"] { background: var(--saeule-4); }
|
|
.balance__stueck[data-slot="5"] { background: var(--saeule-5); }
|
|
.balance__stueck[data-slot="0"] { background: var(--saeule-0); }
|
|
/* Die Zahl im Balken trägt Text-Tinte, nicht die Säulenfarbe -- Text in
|
|
der Serienfarbe ist auf jedem Untergrund ein Kontrastproblem. Auf
|
|
diesen fünf Flächen ist Dunkel der sichere Wert. */
|
|
.balance__zahl {
|
|
font-size: .72rem; font-weight: 700; color: #06090f;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
|
|
.legende__punkt { display: flex; align-items: center; gap: 7px; font-size: .82rem; }
|
|
.legende__farbe {
|
|
width: 10px; height: 10px; flex: none; border-radius: 3px;
|
|
background: var(--saeule-0);
|
|
}
|
|
.legende__farbe[data-slot="1"] { background: var(--saeule-1); }
|
|
.legende__farbe[data-slot="2"] { background: var(--saeule-2); }
|
|
.legende__farbe[data-slot="3"] { background: var(--saeule-3); }
|
|
.legende__farbe[data-slot="4"] { background: var(--saeule-4); }
|
|
.legende__farbe[data-slot="5"] { background: var(--saeule-5); }
|
|
.legende__name { color: var(--text); }
|
|
.legende__wert { color: var(--text-leise); font-variant-numeric: tabular-nums; }
|
|
.legende__ziel { color: var(--text-still); font-size: .76rem; }
|
|
.legende__ziel[data-warn="ja"] { color: var(--warn); }
|
|
|
|
.balance__hinweis { margin: 10px 0 0; font-size: .78rem; color: var(--text-still); }
|
|
|
|
/* ---------- Säulen verwalten ---------------------------------------------- */
|
|
|
|
.saeulen-kasten {
|
|
margin-bottom: 26px; padding: 18px 20px;
|
|
border: 1px solid var(--rand-hell); border-radius: var(--radius);
|
|
background: rgba(255, 255, 255, .03);
|
|
}
|
|
.saeule {
|
|
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
padding: 9px 4px; border-bottom: 1px solid var(--rand);
|
|
font-size: .86rem;
|
|
}
|
|
.saeule:last-of-type { border-bottom: 0; }
|
|
.saeule__name { font-weight: 650; }
|
|
.saeule__wer, .saeule__zahl, .saeule__ziel { color: var(--text-still); font-size: .79rem; }
|
|
.saeule__zahl { margin-left: auto; }
|
|
|
|
.saeule-neu {
|
|
display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
|
|
margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rand);
|
|
}
|
|
.saeule-neu .feld { flex: 1 1 200px; min-width: 0; }
|
|
.saeule-neu .feld--schmal { flex: 0 1 130px; }
|
|
|
|
/* ---------- Filterzeile --------------------------------------------------- */
|
|
|
|
.filterzeile { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
|
|
.filtergruppe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
|
|
.filtergruppe__schild {
|
|
font-size: .68rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still); margin-right: 2px;
|
|
}
|
|
|
|
/* ---------- Die Strecke --------------------------------------------------- */
|
|
|
|
.strecke {
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
align-items: start;
|
|
}
|
|
|
|
.spalte {
|
|
min-width: 0; padding: 12px 12px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: rgba(255, 255, 255, .02);
|
|
}
|
|
/* Die Richtung der Strecke, ohne ein Wort: Der Streifen über der Spalte
|
|
wird von links nach rechts heller und wärmer. */
|
|
.spalte::before {
|
|
content: ""; display: block; height: 2px; margin: -4px -4px 12px;
|
|
border-radius: 2px; opacity: .55;
|
|
}
|
|
.spalte[data-stufe="idee"]::before { background: #2c4a6b; opacity: .8; }
|
|
.spalte[data-stufe="skript"]::before { background: #2f6a97; opacity: .8; }
|
|
.spalte[data-stufe="gedreht"]::before { background: #3987e5; opacity: .7; }
|
|
.spalte[data-stufe="fertig"]::before { background: #4fb3d9; opacity: .7; }
|
|
.spalte[data-stufe="veroeffentlicht"]::before { background: #7fd4c1; opacity: .7; }
|
|
|
|
.spalte__kopf {
|
|
display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
|
|
}
|
|
.spalte__name {
|
|
margin: 0; font-size: .74rem; font-weight: 700;
|
|
letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
|
|
}
|
|
.spalte__zahl {
|
|
margin-left: auto; min-width: 20px; padding: 1px 7px; text-align: center;
|
|
font-size: .72rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.spalte__leer { margin: 6px 0 0; text-align: center; color: var(--text-still); opacity: .5; }
|
|
|
|
/* ---------- Eine Video-Karte ---------------------------------------------- */
|
|
|
|
.video {
|
|
position: relative; overflow: hidden;
|
|
margin-bottom: 8px; padding: 11px 13px 10px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .035);
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.video:last-child { margin-bottom: 0; }
|
|
.video:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .055); }
|
|
|
|
/* Die Säulenfarbe als schmale Kante links -- die Karte selbst bleibt
|
|
ruhig. Fünf eingefärbte Karten nebeneinander wären ein Bonbonglas. */
|
|
.video[data-slot]::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: var(--saeule-0);
|
|
}
|
|
.video[data-slot="1"]::before { background: var(--saeule-1); }
|
|
.video[data-slot="2"]::before { background: var(--saeule-2); }
|
|
.video[data-slot="3"]::before { background: var(--saeule-3); }
|
|
.video[data-slot="4"]::before { background: var(--saeule-4); }
|
|
.video[data-slot="5"]::before { background: var(--saeule-5); }
|
|
|
|
.video__titel { margin: 0 0 4px; font-size: .93rem; font-weight: 650; line-height: 1.35; }
|
|
|
|
/* Der Hook ist gesprochener Text -- kursiv und in Anführungszeichen
|
|
liest er sich als das, was er ist. */
|
|
.video__hook {
|
|
margin: 0 0 7px; font-size: .82rem; font-style: italic;
|
|
color: var(--text-leise); line-height: 1.45;
|
|
}
|
|
.video__hook--fehlt {
|
|
font-style: normal; font-size: .74rem; color: var(--warn); opacity: .75;
|
|
}
|
|
|
|
.video__marken { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
|
|
.marke-saeule, .marke-still {
|
|
padding: 1px 8px; border-radius: 999px;
|
|
font-size: .69rem; font-weight: 600;
|
|
}
|
|
.marke-still {
|
|
color: var(--text-still); background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand);
|
|
}
|
|
/* Der Säulenname trägt seine Farbe als Rand und schwachen Grund, nicht
|
|
als Textfarbe -- farbiger Text auf dunklem Grund wird bei den
|
|
dunkleren Plätzen schwer lesbar. */
|
|
.marke-saeule { color: var(--text); border: 1px solid var(--saeule-0); background: rgba(255, 255, 255, .04); }
|
|
.marke-saeule[data-slot="1"] { border-color: var(--saeule-1); background: rgba(57, 135, 229, .14); }
|
|
.marke-saeule[data-slot="2"] { border-color: var(--saeule-2); background: rgba(217, 89, 38, .14); }
|
|
.marke-saeule[data-slot="3"] { border-color: var(--saeule-3); background: rgba(25, 158, 112, .14); }
|
|
.marke-saeule[data-slot="4"] { border-color: var(--saeule-4); background: rgba(201, 133, 0, .14); }
|
|
.marke-saeule[data-slot="5"] { border-color: var(--saeule-5); background: rgba(213, 81, 129, .14); }
|
|
|
|
.video__termin {
|
|
margin: 0 0 7px; font-size: .75rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.video__termin[data-warn="ja"] { color: var(--warn); }
|
|
|
|
.video__knoepfe {
|
|
display: flex; flex-wrap: wrap; gap: 4px;
|
|
padding-top: 8px; border-top: 1px solid var(--rand);
|
|
}
|
|
.tu-knopf {
|
|
padding: 3px 9px;
|
|
font: inherit; font-size: .72rem; font-weight: 600;
|
|
color: var(--text-still); cursor: pointer;
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.tu-knopf:hover:not(:disabled) {
|
|
color: var(--text); border-color: var(--rand-hell); background: rgba(255, 255, 255, .09);
|
|
}
|
|
.tu-knopf[data-haupt="ja"] {
|
|
color: var(--akzent); border-color: rgba(63, 189, 245, .35);
|
|
background: rgba(63, 189, 245, .08);
|
|
}
|
|
.tu-knopf[data-haupt="ja"]:hover:not(:disabled) {
|
|
color: #fff; border-color: rgba(63, 189, 245, .6); background: rgba(63, 189, 245, .16);
|
|
}
|
|
.tu-knopf:disabled { opacity: .45; cursor: default; }
|
|
.tu-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
/* ---------- Schmale Schirme ------------------------------------------------
|
|
|
|
Fünf Spalten nebeneinander sind auf einem Handy je 60px breit -- der
|
|
Titel bräche dann nach jedem zweiten Buchstaben um. Deshalb werden aus
|
|
den Spalten untereinander liegende Abschnitte. Die Strecke bleibt
|
|
lesbar, sie läuft nur von oben nach unten statt von links nach rechts.
|
|
--------------------------------------------------------------------------- */
|
|
|
|
@media (max-width: 1100px) {
|
|
.strecke { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.kachel[data-gross="ja"] { grid-column: span 3; }
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.strecke { grid-template-columns: 1fr; }
|
|
.kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.kachel[data-gross="ja"] { grid-column: span 2; }
|
|
.kachel[data-gross="ja"] .kachel__wert { font-size: 2.1rem; }
|
|
/* Leere Spalten kosten auf dem Handy nur Platz zum Scrollen. */
|
|
.spalte:has(.spalte__leer) { display: none; }
|
|
.balance__balken { height: 26px; }
|
|
.saeule__zahl { margin-left: 0; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.video, .tu-knopf, .balance__stueck { transition: none; }
|
|
}
|
|
|
|
/* Der Aufklapper am Fuß einer zu langen Spalte. Bewusst unauffällig --
|
|
er ist kein Ziel, sondern ein Ausweg. */
|
|
.spalte__mehr {
|
|
display: block; width: 100%; margin-top: 6px; padding: 6px;
|
|
font: inherit; font-size: .74rem; font-weight: 600;
|
|
color: var(--text-still); cursor: pointer;
|
|
background: transparent;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
transition: color var(--tempo), border-color var(--tempo);
|
|
}
|
|
.spalte__mehr:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
|
|
.spalte__mehr:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
@media (prefers-reduced-motion: reduce) { .spalte__mehr { transition: none; } }
|