Files
dogfather-universe/workspace/manager-ziele.html
T
DogFatherGitandClaude Opus 5 996231af6e Reaction: Material statt Kaesten, Spende in der Mitte, Gaeste werden gefragt
Nach Filipes sieben Bildschirmfotos vom 07.10.2026. Sieben Wuensche,
und einer davon ("alles viel hochwertiger") betrifft alle anderen --
deshalb steht das Fundament zuerst und nicht am Ende.

DAS AUSSEHEN HAT EINEN WERKSTOFF. Jede Flaeche sagt jetzt, ob sie oben
oder unten liegt: Was obenauf liegt, bekommt oben eine helle Kante und
darunter einen Schatten; was vertieft ist, genau umgekehrt. Dazwischen
gibt es nichts mehr. Vorher stand im ganzen Pult zweimal eine
Lichtkante und sonst nirgends -- genau deshalb sahen diese zwei Stellen
gut aus und alles daneben danebengestellt. Dazu: jeder Knopf senkt sich
beim Druecken, jedes Feld ist ein Loch und kein Kasten, und wer mit der
Tastatur bedient, wird zum ersten Mal ueberhaupt gesehen.

UND EIN FUND DABEI: Die drei Kacheln des Regieplatzes hiessen in der
HTML anders als im Stilblatt (kachel--laeuft gegen regiekachel--laeuft,
regieregiekachel__kopf gegen regiekachel__kopf). Die Aufteilung "links
was laeuft, rechts was man eintraegt" hat damit NIE gegriffen -- und
mess-reaktion hat den falschen Zustand gemessen und gruen gemeldet,
weil sie gegen die HTML geschrieben war.

DIE SPENDENKARTE STEHT IN DER MITTE und kommt aus der Tiefe nach vorn.
Das dreht eine Entscheidung vom 28.09. um ("sie deckt nie die Mitte
zu"); die Begruendung war richtig und ist es noch -- sie schuetzt das
Video, und Filipe sieht die Spende als das, was in dem Augenblick
zaehlt. Der alte Platz bleibt einen Knopf weit weg und gilt fuer Saal
UND OBS-Tafel. Die Karte besteht dafuer aus zwei Teilen: `opacity`
unter 1 zwingt ein Element auf `transform-style: flat`, eine Karte mit
Deckkraft-Uebergang waere also genau waehrend des Hereinkommens flach
und spraenge am Ende in einem Bild in die Tiefe.

FERTIGE SAETZE GEHEN SOFORT INS BILD. Der Browser schickt nur die
Kennung, den Text holt der Server -- deshalb darf hier die Bestaetigung
entfallen und beim freien Text nicht. Zwei Schranken bleiben: sofort
nur mit einem der vier Knopfbetraege (Filipes Ansage galt dem SATZ,
nicht der Summe), und GEZEIGT IST NICHT GEBUCHT -- die Dogen gibt es
erst nach dem Tipp der Leitung, sonst stellt sich jeder seine eigene
Waehrung aus.

WER GESPENDET HAT, GLAENZT IM CHAT -- je nach Hoehe. Die Dauer haengt
an der Stufe und nicht an einer zweiten Leiter; 0 heisst "gar nicht".

GAESTE WERDEN GEFRAGT, NICHT GEHOLT. Vorher sprang die Kamera eines
Zuschauers an, sobald jemand "Dazuholen" drueckte -- er hat es daran
gemerkt, dass er sich selbst sah. Jetzt gibt es einen Vorraum: eigenes
Bild, Pegel, Kamera und Mikro vorwaehlen, Geraete waehlen, dann "Dabei
sein" oder "Lieber nicht". Zwei Minuten Frist, und sie verfaellt
SICHTBAR -- eine verschwundene Zeile sieht fuer den Host aus wie ein
Verklicker.

DAS MISCHPULT. Hier stand fest `echoCancellation: true,
noiseSuppression: true`. Fuer ein Laptopmikrofon richtig, ueber einem
RODECaster falsch: Das Pult hat Gate, Kompressor und EQ schon gemacht,
und die Echo-Unterdrueckung legt sich danach als zweite Automatik
darueber und duckt, sobald von der Gegenseite Ton kommt -- genau das
Pumpen vom 14.09. Jetzt: Geraetewahl fuer Mikro, Kamera und Ausgabe
(auch fuer Gaeste), ein Pultmodus, und darunter GEMESSEN, was wirklich
ankommt. Mit und ohne Pult.

DAS ZWEITE VIDEO war nie gesperrt -- es war nur unsichtbar. Jetzt
stehen Vorschaubild, Titel und die gemerkte Stelle da, "Jetzt wechseln"
auch von hier aus, und aus der Warteschlange legt ein Knopf eines
bereit.

UND EIN FUND AUF DEM BILDSCHIRMFOTO: Das Band "Ton einschalten" lag auf
derselben Hoehe wie die Senderleiste. Bei vier Knoepfen reichte die
Leiste bis zur Mitte -- vom Mikro-Knopf war nur noch ein "t" zu sehen.
Das war schon vorher so; der fuenfte Knopf hat es sichtbar gemacht.
Dieselbe Lehre wie am 06.09.: keine neue Zahl suchen, sondern die
Begegnung unmoeglich machen. mess-reaktion misst das jetzt als
UEBERLAPPUNG.

GEPRUEFT: pruef-reaktion 423 -> 478 (0 Fehler), pruef-spenden 172 -> 215
(0), pruef-reaktion-schmal 44 (0), pruef-tippziele 13 (0), dazu gruen:
pruef-css-klassen, pruef-alle-wege, pruef-haus-trennung, pruef-agentur,
pruef-deutsche-texte. Keine Zahl ist gefallen.

Drei Doppelungen hat erst das Pruefen gefunden: `satz_unbekannt` gab es
zweimal (Muenzsatz), `saetze` im Spendenstand war belegt (ebenfalls
Muenzsaetze), und `glanz_minuten` waere in einem frischen Haus immer 0
geblieben -- die Spalte kam per ALTER TABLE, und das laeuft VOR dem
Anlegen der Werksstufen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-10-08 01:31:24 +02:00

246 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Manager-Ziele · Spicy &amp; Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610080131" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610080131" />
<link rel="stylesheet" href="assets/css/gate.css?v=202610080131" />
<link rel="stylesheet" href="assets/css/start.css?v=202610080131" />
<link rel="stylesheet" href="assets/css/manager-ziele.css?v=202610080131" />
<!-- module.css an VORLETZTER, haus.css an LETZTER Stelle. Die
Reihenfolge ist keine Geschmacksfrage: haus.css setzt nur
Variablen, und bei Variablen entscheidet allein, wer zuletzt
kommt. pruef-css-klassen.mjs misst genau dieses Paar nach. -->
<link rel="stylesheet" href="assets/css/module.css?v=202610080131" />
<link rel="stylesheet" href="assets/css/haus.css?v=202610080131" />
</head>
<body class="start" data-buehne="arena">
<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&nbsp;Workspace</a> · Manager-Ziele</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 mz-seite">
<section class="kopf-zeile">
<div>
<p class="marke">Manager-Ziele</p>
<h1 class="titel" id="seiten-titel">Dein Monat</h1>
<p class="unterzeile">
Vier feste Aufgaben pro Monat. Trag ein, was du gemacht hast –
der Rest rechnet sich von selbst.
</p>
</div>
</section>
<!-- ==================================================================
DER KOPF: Monat, Gesamtfortschritt, Resttage.
Der Ring steht VOR dem Text und nicht daneben-rechts: Auf einem
Handy ist er damit das Erste, was ins Auge fällt, und man weiß
in einer halben Sekunde, ob noch etwas offen ist.
================================================================== -->
<div class="mz-kopf" id="kopf" hidden>
<div class="mz-ring" id="ring" role="img" aria-label="Fortschritt">
<span class="mz-ring__text">
<span class="mz-ring__zahl" id="ring-zahl">–</span>
<span class="mz-ring__von" id="ring-von"></span>
<!-- MEHR ALS GEFORDERT (07.10.2026).
Filipe: "soll jeder die möglichkeit auch mehr wie das ziel
einzutragen. die sollen auch gezählt werden."
Die grosse Zahl im Ring bleibt der PFLICHTSTAND (je Aufgabe
hoechstens ihr Ziel) -- sonst stuende dort bei jemandem mit
zehn Werbevideos und sonst nichts ein voller Ring. Was
darueber hinaus getan wurde, steht als eigenes Plus
darunter und wird dadurch sichtbar, ohne die Pflichtzahl zu
verfaelschen. Steht leer da, solange es nichts gibt. -->
<span class="mz-ring__plus" id="ring-plus" hidden></span>
</span>
</div>
<div class="mz-kopf__text">
<p class="mz-kopf__monat" id="kopf-monat">…</p>
<p class="mz-kopf__stand" id="kopf-stand"></p>
<p class="mz-kopf__rest" id="kopf-rest"></p>
</div>
</div>
<p class="ladefehler" id="ladefehler" hidden>
<span class="ladefehler__satz">Die Seite konnte nicht geladen werden.</span>
<span class="ladefehler__grund" id="ladefehler-grund"></span>
<button type="button" class="ladefehler__knopf" id="nochmal">Erneut versuchen</button>
</p>
<!-- Die vier Aufgabenzeilen. Werden gebaut, nicht geschrieben:
Welche Aufgaben es gibt, sagt der Server (AUFGABEN in
manager-ziele-tabellen.js). Stünden sie hier noch einmal,
wären es zwei Listen, von denen eine veraltet. -->
<ul class="mz-liste" id="liste" aria-live="polite"></ul>
<!-- ==================================================================
DER DAUERHAFTE HINWEIS
Wörtlich aus der Vorlage. Er steht unter den Aufgaben und nicht
darüber: Oben wäre er eine Drohung, bevor man überhaupt
gesehen hat, worum es geht.
================================================================== -->
<p class="mz-merksatz">
Inaktive Manager können nicht mehr berücksichtigt werden, da die
Anforderungen von TikTok stetig wachsen und wir als Firma diesen
nachkommen müssen.
</p>
<!-- ---------- VERLAUF: vergangene Monate, nur lesbar -------------- -->
<section class="mz-block" id="verlauf-block" hidden>
<h2 class="mz-block__titel">Verlauf</h2>
<div id="verlauf" aria-live="polite"></div>
</section>
<!-- ---------- TEAM: nur DogFather und Spicy Media ----------------- -->
<section class="mz-block" id="team-block" hidden>
<h2 class="mz-block__titel">Team-Übersicht</h2>
<div class="mz-steuer">
<label class="mz-feld__schild" for="team-monat">Monat</label>
<select id="team-monat"></select>
<label class="mz-feld__schild" for="team-filter">Zeigen</label>
<select id="team-filter">
<option value="alle">alle</option>
<option value="rot">nur Rot</option>
<option value="orange">Rot und Orange</option>
<option value="offen">alle mit offenen Zielen</option>
</select>
<!-- SORTIEREN AUCH HIER UND NICHT NUR AN DEN SPALTEN.
Auf dem Handy wird die Tabelle zu Karten, und die
Spaltenueberschriften verschwinden dabei (sie wuerden dort
mehr Platz kosten als der Inhalt). Ohne dieses Feld waere
das Sortieren auf einem Telefon schlicht nicht erreichbar
-- eine Funktion, die nur auf dem grossen Bildschirm
existiert, ist eine halbe Funktion.
Die Liste wird von manager-ziele.js gefuellt, damit sie zu
den Aufgaben passt, die der Server nennt. Eine zweite,
hier hingeschriebene Liste waere die, die auseinanderlaeuft. -->
<label class="mz-feld__schild" for="team-sort">Sortieren</label>
<select id="team-sort"></select>
<button type="button" class="schritt" id="team-richtung"
aria-label="Sortierrichtung umdrehen">aufsteigend ▴</button>
<button type="button" class="schritt" id="team-csv">Als CSV laden</button>
<button type="button" class="schritt" id="ziele-auf">Zielzahlen</button>
</div>
<div id="team" aria-live="polite"></div>
</section>
</main>
<!-- ==================================================================
DAS FORMULAR
Ein echtes <dialog>: Es bringt Fokusfang, Escape und den
abdunkelnden Hintergrund mit, ohne dass davon eine Zeile selbst
geschrieben werden muss. Nachgebaute Fenster vergessen davon
immer mindestens eines -- meist den Fokus.
================================================================== -->
<dialog class="dialog" id="form-dialog">
<form class="mz-form" id="form" method="dialog">
<div>
<h2 class="dialog__titel" id="form-titel">Eintragen</h2>
<p class="dialog__unter dialog__unter--still" id="form-unter"></p>
</div>
<label class="mz-feld mz-feld--vorschlag" id="feld-name" hidden>
<span class="mz-feld__schild">TikTok-Name des Creators</span>
<input type="text" id="e-name" maxlength="120" autocomplete="off"
placeholder="z. B. @lunatanzt" />
<ul class="mz-treffer" id="treffer" hidden></ul>
</label>
<label class="mz-feld" id="feld-link" hidden>
<span class="mz-feld__schild">Link zum Video</span>
<input type="url" id="e-link" maxlength="500" inputmode="url"
placeholder="https://www.tiktok.com/@…/video/…" />
</label>
<label class="mz-feld" id="feld-art" hidden>
<span class="mz-feld__schild" id="art-schild">Art</span>
<select id="e-art"></select>
</label>
<div class="mz-feld">
<span class="mz-feld__schild">Datum</span>
<!-- Die drei fertigen Tage werden von manager-ziele.js gefuellt:
welche es gibt, haengt davon ab, welcher Tag heute ist (am
1. des Monats gibt es kein „gestern" in diesem Monat). Eine
feste Liste hier waere an zwei Tagen im Monat falsch. -->
<div class="mz-schnelltage" id="datum-schnell"></div>
<input type="date" id="e-datum" required />
</div>
<label class="mz-feld">
<span class="mz-feld__schild">Notiz (freiwillig)</span>
<textarea id="e-notiz" maxlength="1000" rows="2"></textarea>
</label>
<p class="mz-form__fehler" id="form-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="button" class="knopf-still" id="form-abbruch">Abbrechen</button>
<button type="submit" class="knopf" id="form-speichern">Speichern</button>
</div>
</form>
</dialog>
<!-- Die Zielzahlen. Eigener Dialog und keine zweite Seite: Es sind
sechzehn Zahlen, die man einmal im Monat ansieht. -->
<dialog class="dialog dialog--breit" id="ziele-dialog">
<form class="mz-form" id="ziele-form" method="dialog">
<div>
<h2 class="dialog__titel">Zielzahlen je Rolle</h2>
<p class="dialog__unter dialog__unter--still" id="ziele-gilt"></p>
</div>
<div id="ziele-felder"></div>
<p class="mz-form__fehler" id="ziele-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="button" class="knopf-still" id="ziele-abbruch">Abbrechen</button>
<button type="submit" class="knopf" id="ziele-speichern">Für nächsten Monat speichern</button>
</div>
</form>
</dialog>
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und
kopf.js liest daraus die Leitungsrollen. Ohne sie stürzt jede
Seite ab, und zwar nur in der Browserkonsole -- die Kopfleiste
kommt trotzdem. -->
<script src="assets/js/bereiche.js?v=202610080131" defer></script>
<!-- wahl.js gehört zu kopf.js: Der Sicht-Umschalter baut daraus seine
Liste. pruef-css-klassen setzt das durch, und zwar auch die
Reihenfolge -- kopf.js fragt beim Aufbau nach dem fertigen
Bedienelement. -->
<script src="assets/js/wahl.js?v=202610080131" defer></script>
<script src="assets/js/nachfrage.js?v=202610080131" defer></script>
<script src="assets/js/installieren.js?v=202610080131" defer></script>
<script src="assets/js/kopf.js?v=202610080131" defer></script>
<script src="assets/js/glocke.js?v=202610080131" defer></script>
<script src="assets/js/manager-ziele.js?v=202610080131" defer></script>
</body>
</html>