DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bereiche nur lesend fuer Creator + Content-Planung als echte Strecke

Browse Source 
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]>
This commit is contained in:
DogFatherGit
2026-08-31 21:45:14 +02:00
co-authored by Claude Opus 5
parent 1f2823f35a
commit 43ce6551e2
33 changed files with 2475 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/content.css
+315
View File
@@ -0,0 +1,315 @@
/* ===================================================================
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; } }
workspace/assets/js/bereich.js
+25
View File
@@ -13,6 +13,13 @@
macht nur die Personenverwaltung, und die prueft der Server. */
const LEITUNG = new Set(['admin', 'manager']);
/* Wer hier eintraegt: DogFather, Manager und Scout. Der Creator liest
nur mit -- diese Bereiche sind die Betreuungsakte, nicht sein
Notizbuch. Der Server setzt das ebenfalls durch (siehe
workspace-bereiche.js); hier geht es nur darum, ihm keine Knoepfe
hinzustellen, die ohnehin nur eine Absage bringen. */
const darfEintragen = () => ich && ich.rolle !== 'creator';
const $ = (id) => document.getElementById(id);
const UNTERZEILE = {
live: 'Vorbereitung, Mitschrift und Auswertung – LIVE systematisch verbessern.',
@@ -84,6 +91,8 @@
if (e.erstellt_name) fuss.append(el('span', null, '· von ' + e.erstellt_name));
if (e.status === 'erledigt') fuss.append(el('span', null, '· erledigt'));
if (!darfEintragen()) { k.append(fuss); return k; }
const knoepfe = el('div', 'eintrag-knoepfe');
knoepfe.append(tuKnopf(e.status === 'offen' ? 'erledigt ▶' : '◀ wieder offen', async () => {
const a = await hole(`/workspace/api/bereich/${bereich}/${e.id}`, {
@@ -152,6 +161,12 @@
/* ---------- Neuer Eintrag ---------------------------------------------- */
const umschalten = (auf) => {
/* Auch hier die Regel, nicht nur einmal beim Aufbau: Diese Funktion
ist die einzige Stelle, die das Formular je wieder sichtbar macht.
Sperrt man nur beim Laden, holt der naechste Aufruf den Knopf
zurueck -- und niemand faellt es auf, weil es der Alltagsweg nicht
ist. */
if (!darfEintragen()) { $('neu').hidden = true; $('neu-oeffnen').hidden = true; return; }
$('neu').hidden = !auf; $('neu-oeffnen').hidden = auf;
if (auf) $('f-titel').focus();
};
@@ -219,6 +234,16 @@
$('titel').textContent = einstellung.name;
$('unterzeile').textContent = UNTERZEILE[bereich] || '';
/* Fuer den Creator verschwindet alles Schreibende -- und die
Unterzeile sagt, warum. Ein leerer Bereich ohne Erklaerung wirkt
kaputt; einer mit Erklaerung wirkt gedacht. */
if (!darfEintragen()) {
$('neu-oeffnen').hidden = true;
$('neu').hidden = true;
$('unterzeile').textContent =
(UNTERZEILE[bereich] || '') + ' Hier trägt deine Betreuung ein – du siehst alles, was zu dir gehört.';
}
for (const [wert, name] of Object.entries(einstellung.arten)) {
const o = document.createElement('option');
o.value = wert; o.textContent = name;
workspace/assets/js/content.js
+583
View File
@@ -0,0 +1,583 @@
/* ===================================================================
Content-Planung.
Bekommt als einziger der sechs Bereiche eine eigene Seite. Grund: Die
anderen fuenf sind Sammlungen -- Eintraege zu einem Thema. Content ist
eine STRECKE. Ein Video wandert von der Idee bis zum Upload durch
feste Stufen, und die Frage ist nie "was gibt es alles", sondern "wo
klemmt es und wie viel liegt bereit".
Aus der Recherche (31.08.2026):
- "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 steht deshalb auf jeder Karte, nicht im Fliesstext.
- Regelmaessigkeit schlaegt Menge. Ein Video taeglich zur selben Zeit
schlaegt sieben an einem Tag. Wer regelmaessig senden will, braucht
Vorrat -- und Vorrat ist die eine Zahl, die eine Ideenliste
verschweigt.
=================================================================== */
(() => {
'use strict';
const LEITUNG = new Set(['admin', 'manager']);
const darfEintragen = () => ich && ich.rolle !== 'creator';
const $ = (id) => document.getElementById(id);
const el = (tag, klasse, text) => {
const k = document.createElement(tag);
if (klasse) k.className = klasse;
if (text !== undefined) k.textContent = text;
return k;
};
const melde = (t) => { $('fehler').textContent = t || ''; };
let ich = null;
let stufen = {}; // schluessel -> Name, vom Server
let eintraege = [];
let saeulen = [];
let zahlen = null;
let filterCreator = '';
let filterSaeule = '';
/* Wie viele Karten je Spalte hoechstens stehen, bevor gekuerzt wird.
Sechs, weil das die Hoehe der Nachbarspalten ungefaehr trifft --
eine Spalte, die dreimal so lang ist wie die anderen, ist kein
Brett mehr, sondern eine Liste mit vier Randnotizen. */
const SICHTBAR_MAX = 6;
const offeneSpalten = new Set();
async function hole(pfad, optionen = {}) {
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
return a;
}
const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '');
const WOCHENTAG = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
function zeitpunkt(iso) {
if (!iso) return '';
const [d, z] = String(iso).split('T');
const [j, m, t] = d.split('-');
const tag = new Date(Number(j), Number(m) - 1, Number(t));
const w = Number.isNaN(tag.getTime()) ? '' : WOCHENTAG[tag.getDay()] + ', ';
return `${w}${t}.${m}.` + (z ? ' · ' + z.slice(0, 5) : '');
}
/* ---------- Kennzahlen ---------------------------------------------------
Keine Diagramme. Das sind Einzelwerte mit einer Handlung dahinter --
dafuer ist eine Kachel die richtige Form, kein Balken mit einem Balken. */
function kennzahlenZeigen() {
const k = $('kennzahlen');
k.textContent = '';
if (!zahlen || zahlen.leer) { k.hidden = true; return; }
/* Der Vorrat ist die Leitzahl und steht deshalb als Erstes und
groesser. Er zaehlt NUR Gedrehtes und Fertiges -- eine Idee ist
kein Video. Wer Ideen mitzaehlt, fuehlt sich reich und steht am
Donnerstag ohne Material da. */
const vorratText = zahlen.reichweiteTage === null
? 'noch kein Tempo bekannt'
: zahlen.reichweiteTage === 0
? 'reicht keinen Tag mehr'
: `reicht noch etwa ${zahlen.reichweiteTage} Tag${zahlen.reichweiteTage === 1 ? '' : 'e'}`;
const felder = [
{ wert: zahlen.vorrat, name: 'Vorrat', zusatz: vorratText,
stufe: zahlen.reichweiteTage !== null && zahlen.reichweiteTage < 3 ? 'warn'
: zahlen.vorrat === 0 ? 'warn' : 'gut', gross: true },
{ wert: zahlen.veroeffentlicht30, name: 'veröffentlicht', zusatz: 'in 30 Tagen' },
{ wert: (zahlen.stufen?.idee || 0), name: 'Ideen', zusatz: 'noch nicht angefasst' },
{ wert: zahlen.ohneHook, name: 'ohne Hook', zusatz: 'in Arbeit, aber ohne Aufhänger',
stufe: zahlen.ohneHook > 0 ? 'warn' : 'gut', ziel: 'hook' },
{ wert: zahlen.ueberfaellig, name: 'überfällig', zusatz: 'Termin vorbei, nicht draußen',
stufe: zahlen.ueberfaellig > 0 ? 'warn' : 'gut' },
];
for (const f of felder) {
const kachel = el('div', 'kachel');
if (f.gross) kachel.dataset.gross = 'ja';
if (f.stufe) kachel.dataset.stufe = f.stufe;
kachel.append(el('span', 'kachel__wert', String(f.wert)));
kachel.append(el('span', 'kachel__name', f.name));
kachel.append(el('span', 'kachel__zusatz', f.zusatz));
k.append(kachel);
}
k.hidden = false;
}
/* ---------- Säulen-Balance -----------------------------------------------
Ein liegender gestapelter Balken: Teil vom Ganzen ueber wenige
Kategorien. Farben nach Platz (slot), nicht nach Rang -- sonst
wechselt eine Saeule die Farbe, sobald eine andere sie ueberholt.
Bis zu fuenf Farben, geprueft gegen Farbfehlsichtigkeit auf genau
dieser Hintergrundfarbe. Immer mit Legende UND Beschriftung: Farbe
allein darf nie die einzige Information sein. */
function balanceZeigen() {
const kasten = $('balance');
if (!zahlen || zahlen.leer || !zahlen.balance) { kasten.hidden = true; return; }
const teile = zahlen.balance.filter((b) => b.n > 0);
const gesamt = teile.reduce((s, b) => s + b.n, 0) + (zahlen.ohneSaeule || 0);
$('balance-zeit').textContent = `· letzte ${zahlen.balanceTage} Tage, nur Veröffentlichtes`;
const balken = $('balance-balken');
const legende = $('balance-legende');
balken.textContent = '';
legende.textContent = '';
if (!gesamt) {
kasten.hidden = !saeulen.length;
$('balance-hinweis').textContent = saeulen.length
? 'Noch nichts veröffentlicht – sobald etwas draußen ist, steht hier die Verteilung.'
: '';
return;
}
const stuecke = [...teile];
if (zahlen.ohneSaeule) {
stuecke.push({ id: 0, name: 'ohne Säule', slot: 0, n: zahlen.ohneSaeule, ziel: null });
}
for (const s of stuecke) {
const anteil = Math.round((s.n / gesamt) * 100);
const stueck = el('span', 'balance__stueck');
stueck.dataset.slot = String(s.slot);
stueck.style.width = (s.n / gesamt) * 100 + '%';
stueck.title = `${s.name}: ${s.n} von ${gesamt} (${anteil} %)`;
/* Beschriftung direkt im Balken, sobald Platz ist. Bei schmalen
Stuecken traegt die Legende die Information. */
if (anteil >= 12) stueck.append(el('span', 'balance__zahl', anteil + ' %'));
balken.append(stueck);
const li = el('li', 'legende__punkt');
const punkt = el('span', 'legende__farbe');
punkt.dataset.slot = String(s.slot);
li.append(punkt);
li.append(el('span', 'legende__name', s.name));
li.append(el('span', 'legende__wert', `${anteil} %`));
if (s.ziel !== null && s.ziel !== undefined) {
const ab = anteil - s.ziel;
const marke = el('span', 'legende__ziel',
`Ziel ${s.ziel} %${ab === 0 ? '' : (ab > 0 ? ` · ${ab} über` : ` · ${-ab} unter`)}`);
if (Math.abs(ab) > 15) marke.dataset.warn = 'ja';
li.append(marke);
}
legende.append(li);
}
$('balance-hinweis').textContent = zahlen.ohneSaeule
? `${zahlen.ohneSaeule} veröffentlichte Videos hängen an keiner Säule – dann sagt die Verteilung nur die halbe Wahrheit.`
: '';
kasten.hidden = false;
}
/* ---------- Die Strecke -------------------------------------------------- */
function karte(e) {
const k = el('article', 'video');
if (e.saeule_slot) k.dataset.slot = String(e.saeule_slot);
k.append(el('h3', 'video__titel', e.titel));
/* Der Hook steht direkt unter dem Titel und in Anfuehrungszeichen --
er ist gesprochener Text, kein Etikett. Fehlt er, steht das da:
eine Luecke, die man sieht, wird gefuellt. */
if (e.hook) {
k.append(el('p', 'video__hook', '„' + e.hook + '"'));
} else if (e.art !== 'idee' && e.art !== 'veroeffentlicht') {
k.append(el('p', 'video__hook video__hook--fehlt', 'Noch kein Hook'));
}
const marken = el('div', 'video__marken');
if (e.saeule_name) {
const m = el('span', 'marke-saeule', e.saeule_name);
m.dataset.slot = String(e.saeule_slot || 0);
marken.append(m);
}
if (e.format) marken.append(el('span', 'marke-still', e.format));
if (LEITUNG.has(ich.rolle) && e.creator_name) marken.append(el('span', 'marke-still', e.creator_name));
if (marken.children.length) k.append(marken);
if (e.geplant) {
const vorbei = e.art !== 'veroeffentlicht' && e.geplant < new Date().toISOString().slice(0, 16);
const z = el('p', 'video__termin', (vorbei ? 'war fällig ' : 'geplant ') + zeitpunkt(e.geplant));
if (vorbei) z.dataset.warn = 'ja';
k.append(z);
}
if (!darfEintragen()) return k;
const knoepfe = el('div', 'video__knoepfe');
const reihe = Object.keys(stufen);
const jetztIndex = reihe.indexOf(e.art);
if (jetztIndex > 0) {
knoepfe.append(tuKnopf('◀', 'Eine Stufe zurück', () => stufeSetzen(e, reihe[jetztIndex - 1])));
}
if (jetztIndex >= 0 && jetztIndex < reihe.length - 1) {
const weiter = tuKnopf(stufen[reihe[jetztIndex + 1]] + ' ▶',
'Auf die nächste Stufe', () => stufeSetzen(e, reihe[jetztIndex + 1]));
weiter.dataset.haupt = 'ja';
knoepfe.append(weiter);
}
/* Ueberfuehren -- woertlich aus dem Konzept. Nur solange das Video
noch nicht draussen ist; danach gibt es nichts mehr zu planen. */
if (e.art !== 'veroeffentlicht') {
knoepfe.append(tuKnopf('→ Aufgabe', 'Als Aufgabe ins Brett', () => uebernehmen(e, 'aufgabe')));
if (e.geplant) knoepfe.append(tuKnopf('→ Termin', 'Als Drehtermin in den Kalender', () => uebernehmen(e, 'termin')));
knoepfe.append(tuKnopf('→ LIVE', 'Als LIVE-Thema vormerken', () => uebernehmen(e, 'live')));
}
knoepfe.append(tuKnopf('löschen', 'Dieses Video entfernen', async () => {
if (!confirm(`„${e.titel}" wirklich löschen?`)) return;
const a = await hole(`/workspace/api/bereich/content/${e.id}`, { method: 'DELETE' });
if (!a.ok) { melde('Löschen hat nicht geklappt.'); return; }
await laden();
}));
k.append(knoepfe);
return k;
}
function tuKnopf(text, titel, tun) {
const b = el('button', 'tu-knopf', text);
b.type = 'button';
b.title = titel;
b.addEventListener('click', async () => {
b.disabled = true;
try { await tun(); } catch { /* umgeleitet */ } finally { b.disabled = false; }
});
return b;
}
async function stufeSetzen(e, neueStufe) {
const daten = { art: neueStufe };
/* Was veroeffentlicht wird, bekommt das heutige Datum -- sonst
stuende die Auswertung der letzten 30 Tage auf dem Tag, an dem die
Idee entstand, und waere durchgehend falsch. */
if (neueStufe === 'veroeffentlicht') daten.datum = new Date().toISOString().slice(0, 10);
const a = await hole(`/workspace/api/bereich/content/${e.id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(daten),
});
if (!a.ok) { melde((await a.json().catch(() => ({}))).fehler || 'Ging nicht.'); return; }
melde('');
await laden();
}
async function uebernehmen(e, ziel) {
const a = await hole(`/workspace/api/content/${e.id}/uebernehmen`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ziel }),
});
const d = await a.json().catch(() => ({}));
if (!a.ok) { melde(d.fehler || 'Ging nicht.'); return; }
melde('');
/* Sagen, wohin es gewandert ist -- und den Weg dorthin anbieten.
Eine stille Uebernahme laesst einen ratlos zurueck. */
$('fehler').textContent = '';
const hinweis = $('fehler');
hinweis.textContent = `Als ${d.art} angelegt. `;
const link = el('a', null, 'Ansehen →');
link.href = d.wohin;
hinweis.append(link);
await laden();
}
function streckeZeigen() {
const ziel = $('strecke');
ziel.textContent = '';
ziel.setAttribute('aria-busy', 'false');
let sichtbar = eintraege;
if (filterCreator) sichtbar = sichtbar.filter((e) => String(e.creator_id) === filterCreator);
if (filterSaeule === 'ohne') sichtbar = sichtbar.filter((e) => !e.saeule_id);
else if (filterSaeule) sichtbar = sichtbar.filter((e) => String(e.saeule_id) === filterSaeule);
for (const [schluessel, name] of Object.entries(stufen)) {
const drin = sichtbar.filter((e) => e.art === schluessel);
const spalte = el('section', 'spalte');
spalte.dataset.stufe = schluessel;
const kopf = el('div', 'spalte__kopf');
kopf.append(el('h2', 'spalte__name', name));
kopf.append(el('span', 'spalte__zahl', String(drin.length)));
spalte.append(kopf);
if (!drin.length) {
spalte.append(el('p', 'spalte__leer', '–'));
} else {
/* Die letzte Spalte waechst ewig -- nach einem halben Jahr
stehen dort hundert Videos und schieben alles andere aus dem
Bild. Genau daran scheitert jedes Brett mit einer
"Fertig"-Spalte. Sichtbar bleibt deshalb nur die jüngste
Handvoll; der Rest ist einen Klick entfernt.
Die vorderen Spalten bleiben ungekürzt: Was dort liegt, ist
Arbeit, und Arbeit darf man nicht wegklappen. */
const kuerzen = !offeneSpalten.has(schluessel) && drin.length > SICHTBAR_MAX;
const zeigen = kuerzen ? drin.slice(0, SICHTBAR_MAX) : drin;
for (const e of zeigen) spalte.append(karte(e));
if (drin.length > SICHTBAR_MAX) {
const rest = drin.length - SICHTBAR_MAX;
const b = el('button', 'spalte__mehr',
kuerzen ? `${rest} weitere zeigen` : `nur die letzten ${SICHTBAR_MAX}`);
b.type = 'button';
b.addEventListener('click', () => {
if (offeneSpalten.has(schluessel)) offeneSpalten.delete(schluessel);
else offeneSpalten.add(schluessel);
streckeZeigen();
});
spalte.append(b);
}
}
ziel.append(spalte);
}
}
/* ---------- Filter ------------------------------------------------------- */
function filterBauen() {
const zeile = $('filterzeile');
zeile.textContent = '';
const creator = [...new Map(eintraege.filter((e) => e.creator_id)
.map((e) => [e.creator_id, e.creator_name])).entries()];
if (LEITUNG.has(ich.rolle) && creator.length > 1) {
zeile.append(knopfGruppe('Creator', [['', 'Alle'], ...creator.map(([id, n]) => [String(id), n])],
filterCreator, (w) => { filterCreator = w; filterBauen(); streckeZeigen(); kennzahlenLaden(); }));
}
if (saeulen.length) {
const passend = filterCreator
? saeulen.filter((s) => String(s.creator_id) === filterCreator) : saeulen;
zeile.append(knopfGruppe('Säule',
[['', 'Alle'], ...passend.map((s) => [String(s.id), s.name]), ['ohne', 'ohne Säule']],
filterSaeule, (w) => { filterSaeule = w; filterBauen(); streckeZeigen(); }));
}
}
function knopfGruppe(name, werte, aktiv, beiWahl) {
const g = el('div', 'filtergruppe');
g.append(el('span', 'filtergruppe__schild', name));
for (const [wert, text] of werte) {
const b = el('button', 'filter', text);
b.type = 'button';
if (wert === aktiv) b.dataset.aktiv = 'ja';
b.addEventListener('click', () => beiWahl(wert));
g.append(b);
}
return g;
}
/* ---------- Säulen verwalten --------------------------------------------- */
function saeulenZeigen() {
const ziel = $('saeulen-liste');
ziel.textContent = '';
if (!saeulen.length) {
ziel.append(el('p', 'leise', 'Noch keine Säule. Fang mit drei an.'));
return;
}
for (const s of saeulen) {
const z = el('div', 'saeule');
const punkt = el('span', 'legende__farbe');
punkt.dataset.slot = String(s.slot);
z.append(punkt);
z.append(el('span', 'saeule__name', s.name));
if (LEITUNG.has(ich.rolle) && s.creator_name) {
z.append(el('span', 'saeule__wer', s.creator_name));
}
z.append(el('span', 'saeule__zahl', `${s.videos} Video${s.videos === 1 ? '' : 's'}`));
z.append(el('span', 'saeule__ziel', s.ziel === null ? 'kein Ziel' : `Ziel ${s.ziel} %`));
/* Auch hier: Ein Creator bekommt gar keinen Knopf erst gebaut. Der
Kasten ist fuer ihn zwar ausgeblendet -- aber ein Knopf, der nur
unsichtbar ist, steht trotzdem im Dokument, wird von Vorlese-
programmen gefunden und laesst sich mit der Tastatur ansteuern.
Ausgeblendet ist nicht dasselbe wie nicht vorhanden. */
if (!darfEintragen()) { ziel.append(z); continue; }
z.append(tuKnopf('löschen', 'Säule entfernen, Videos bleiben', async () => {
if (!confirm(`Säule „${s.name}" entfernen? Die Videos bleiben, sie verlieren nur die Zuordnung.`)) return;
const a = await hole(`/workspace/api/content/saeulen/${s.id}`, { method: 'DELETE' });
if (!a.ok) { melde('Ging nicht.'); return; }
await laden();
}));
ziel.append(z);
}
}
/* ---------- Laden -------------------------------------------------------- */
async function kennzahlenLaden() {
try {
const p = filterCreator ? `?creator=${encodeURIComponent(filterCreator)}` : '';
const a = await hole('/workspace/api/content/kennzahlen' + p);
if (!a.ok) return;
zahlen = await a.json();
kennzahlenZeigen();
balanceZeigen();
} catch { /* umgeleitet */ }
}
async function laden() {
try {
const [bA, sA] = await Promise.all([
hole('/workspace/api/bereich/content'),
hole('/workspace/api/content/saeulen'),
]);
if (!bA.ok) { location.assign('/workspace/start.html'); return; }
const b = await bA.json();
stufen = b.einstellung.arten;
eintraege = b.eintraege || [];
saeulen = sA.ok ? (await sA.json()).saeulen || [] : [];
} catch { return; }
filterBauen();
streckeZeigen();
saeulenZeigen();
saeulenAuswahlFuellen();
await kennzahlenLaden();
}
function saeulenAuswahlFuellen() {
const feld = $('f-saeule');
const vorher = feld.value;
feld.textContent = '';
const leer = document.createElement('option');
leer.value = ''; leer.textContent = '— keine Säule —';
feld.append(leer);
const passend = LEITUNG.has(ich.rolle) && $('f-creator')?.value
? saeulen.filter((s) => String(s.creator_id) === $('f-creator').value)
: saeulen;
for (const s of passend) {
const o = document.createElement('option');
o.value = String(s.id); o.textContent = s.name;
feld.append(o);
}
feld.value = vorher;
feld.dispatchEvent(new Event('wahl:auffrischen'));
}
/* ---------- Formular ----------------------------------------------------- */
const umschalten = (auf) => {
if (!darfEintragen()) { $('neu').hidden = true; $('neu-oeffnen').hidden = true; return; }
$('neu').hidden = !auf; $('neu-oeffnen').hidden = auf;
if (auf) $('f-titel').focus();
};
$('neu-oeffnen').addEventListener('click', () => umschalten(true));
$('neu-abbrechen').addEventListener('click', () => {
$('neu').reset(); $('neu-fehler').textContent = ''; umschalten(false);
});
$('neu').addEventListener('submit', async (e) => {
e.preventDefault();
$('neu-fehler').textContent = '';
const daten = {
titel: $('f-titel').value.trim(),
hook: $('f-hook').value.trim(),
art: $('f-art').value,
format: $('f-format').value.trim(),
saeule_id: $('f-saeule').value || null,
geplant: $('f-geplant').value || null,
text: $('f-text').value.trim(),
datum: new Date().toISOString().slice(0, 10),
};
if (LEITUNG.has(ich.rolle)) daten.creator_id = $('f-creator').value || null;
const a = await hole('/workspace/api/bereich/content', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(daten),
});
if (!a.ok) {
$('neu-fehler').textContent = (await a.json().catch(() => ({}))).fehler || 'Ging nicht.';
return;
}
$('neu').reset(); umschalten(false);
await laden();
});
$('saeulen-oeffnen').addEventListener('click', () => { $('saeulen-kasten').hidden = false; });
$('saeulen-zu').addEventListener('click', () => { $('saeulen-kasten').hidden = true; });
$('saeule-neu').addEventListener('submit', async (e) => {
e.preventDefault();
const daten = {
name: $('s-name').value.trim(),
ziel: $('s-ziel').value === '' ? null : Number($('s-ziel').value),
creator_id: LEITUNG.has(ich.rolle) ? $('s-creator').value : undefined,
};
const a = await hole('/workspace/api/content/saeulen', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(daten),
});
if (!a.ok) { melde((await a.json().catch(() => ({}))).fehler || 'Ging nicht.'); return; }
melde('');
$('saeule-neu').reset();
await laden();
});
/* ---------- Start -------------------------------------------------------- */
(async () => {
try {
const a = await hole('/workspace/api/ich');
if (!a.ok) { location.assign('/workspace/'); return; }
ich = await a.json();
} catch { return; }
$('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
if (!darfEintragen()) {
$('neu-oeffnen').hidden = true;
$('neu').hidden = true;
$('saeulen-oeffnen').hidden = true;
$('unterzeile').textContent =
'Von der Idee bis zum Upload. Hier plant deine Betreuung – du siehst alles, was zu dir gehört.';
}
/* Die Stufen kommen vom Server, nicht aus dieser Datei. Stuenden sie
hier, waeren sie beim naechsten Mal an einer Stelle geaendert und
an der anderen nicht. */
try {
const b = await (await hole('/workspace/api/bereich/content')).json();
stufen = b.einstellung.arten;
for (const [wert, name] of Object.entries(stufen)) {
const o = document.createElement('option');
o.value = wert; o.textContent = name;
$('f-art').append(o);
}
} catch { /* laden() faengt es gleich noch einmal */ }
if (LEITUNG.has(ich.rolle)) {
$('feld-creator').hidden = false;
$('feld-saeule-creator').hidden = false;
try {
const { personen } = await (await hole('/workspace/api/personen')).json();
for (const p of personen.filter((p) => p.rolle === 'creator')) {
for (const feld of ['f-creator', 's-creator']) {
const o = document.createElement('option');
o.value = String(p.id); o.textContent = p.name;
$(feld).append(o);
}
}
} catch { /* Auswahl bleibt leer */ }
/* Wechselt der Creator, passen die Säulen dazu -- sonst böte die
Liste Säulen an, die zu jemand anderem gehören, und der Server
lehnte beim Speichern ab. */
$('f-creator').addEventListener('change', saeulenAuswahlFuellen);
}
await laden();
})();
})();
workspace/assets/js/start.js
+1 -1
View File
@@ -34,7 +34,7 @@
{ name: 'Kalender', phase: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'kalender.html' },
{ name: 'Dateien', phase: 1, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'dateien.html' },
{ name: 'LIVE-Analyse', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=live' },
{ name: 'Content-Planung', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=content' },
{ name: 'Content-Planung', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'content.html' },
{ name: 'Technik', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=technik' },
{ name: 'Community', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=community' },
{ name: 'Schutz & Regeln', phase: 2, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=schutz' },
workspace/aufgaben.html
+6 -6
View File
@@ -7,9 +7,9 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
</head>
<body class="start">
@@ -134,8 +134,8 @@
</form>
</dialog>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/aufgaben.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/aufgaben.js?v=202608312145" defer></script>
</body>
</html>
workspace/automation.html
+7 -7
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/automation.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/automation.css?v=202608312145" />
</head>
<body class="start">
@@ -127,8 +127,8 @@
</main>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/automation.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/automation.js?v=202608312145" defer></script>
</body>
</html>
workspace/bereich.html
+7 -7
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202608312145" />
</head>
<body class="start">
@@ -98,8 +98,8 @@
</main>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/bereich.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/bereich.js?v=202608312145" defer></script>
</body>
</html>
workspace/calls.html
+8 -8
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/calls.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/calls.css?v=202608312145" />
</head>
<body class="start">
@@ -49,9 +49,9 @@
</main>
<script src="assets/js/ki.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/calls.js?v=202608311834" defer></script>
<script src="assets/js/ki.js?v=202608312145" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/calls.js?v=202608312145" defer></script>
</body>
</html>
workspace/content.html
+160
View File
@@ -0,0 +1,160 @@
<!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-Planung · 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=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/content.css?v=202608312145" />
</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> · Content</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-Planung</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. -->
<section class="kennzahlen" id="kennzahlen" hidden></section>
<!-- 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. -->
<div class="strecke" id="strecke" aria-busy="true">
<p class="leise">Wird geladen …</p>
</div>
</main>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/content.js?v=202608312145" defer></script>
</body>
</html>
workspace/dateien.html
+7 -7
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/dateien.css?v=202608312145" />
</head>
<body class="start">
@@ -88,8 +88,8 @@
</main>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/dateien.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/dateien.js?v=202608312145" defer></script>
</body>
</html>
workspace/index.html
+2 -2
View File
@@ -25,7 +25,7 @@
type="image/webp" media="(max-width: 899px)" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
</head>
<body class="gate">
@@ -143,6 +143,6 @@
</p>
</main>
<script src="assets/js/gate.js?v=202608311834" defer></script>
<script src="assets/js/gate.js?v=202608312145" defer></script>
</body>
</html>
workspace/kalender.html
+7 -7
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/kalender.css?v=202608312145" />
</head>
<body class="start">
@@ -94,8 +94,8 @@
</main>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/kalender.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/kalender.js?v=202608312145" defer></script>
</body>
</html>
workspace/personen.html
+7 -7
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/personen.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/personen.css?v=202608312145" />
</head>
<body class="start">
@@ -104,8 +104,8 @@
</main>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/personen.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/personen.js?v=202608312145" defer></script>
</body>
</html>
workspace/profil.html
+7 -7
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/profil.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/profil.css?v=202608312145" />
</head>
<body class="start">
@@ -127,8 +127,8 @@
</main>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/profil.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/profil.js?v=202608312145" defer></script>
</body>
</html>
workspace/report.html
+8 -8
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/report.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/report.css?v=202608312145" />
</head>
<body class="start">
@@ -86,9 +86,9 @@
</main>
<script src="assets/js/ki.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/report.js?v=202608311834" defer></script>
<script src="assets/js/ki.js?v=202608312145" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/report.js?v=202608312145" defer></script>
</body>
</html>
workspace/scouting.html
+7 -7
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202608312145" />
</head>
<body class="start">
@@ -124,8 +124,8 @@
</div>
</div>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/scouting.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/scouting.js?v=202608312145" defer></script>
</body>
</html>
workspace/start.html
+5 -5
View File
@@ -7,8 +7,8 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
</head>
<body class="start">
@@ -56,8 +56,8 @@
</p>
</main>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/start.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/start.js?v=202608312145" defer></script>
</body>
</html>
workspace/startcheck.html
+8 -8
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/startcheck.css?v=202608312145" />
</head>
<body class="start">
@@ -65,9 +65,9 @@
</main>
<script src="assets/js/ki.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/startcheck.js?v=202608311834" defer></script>
<script src="assets/js/ki.js?v=202608312145" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/startcheck.js?v=202608312145" defer></script>
</body>
</html>
workspace/uebersicht.html
+5 -5
View File
@@ -7,9 +7,9 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202608312145" />
</head>
<body class="start">
@@ -52,7 +52,7 @@
</main>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/uebersicht.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/uebersicht.js?v=202608312145" defer></script>
</body>
</html>
workspace/wissen.html
+7 -7
View File
@@ -7,10 +7,10 @@
<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=202608311834" />
<link rel="stylesheet" href="assets/css/start.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202608311834" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/start.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312145" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202608312145" />
</head>
<body class="start">
@@ -170,8 +170,8 @@
</main>
<script src="assets/js/wahl.js?v=202608311834" defer></script>
<script src="assets/js/kopf.js?v=202608311834" defer></script>
<script src="assets/js/wissen.js?v=202608311834" defer></script>
<script src="assets/js/wahl.js?v=202608312145" defer></script>
<script src="assets/js/kopf.js?v=202608312145" defer></script>
<script src="assets/js/wissen.js?v=202608312145" defer></script>
</body>
</html>