Files
dogfather-universe/workspace/manager-ziele.html
T
DogFatherGitandClaude Opus 5 b49a03d811 Es laeuft: TikTok baut die Seite nur fuer Handys -- und zwei Vorlagen statt einer
Filipes Kachel ging nicht. Der Grund war nicht TikTok, sondern EIN WORT
in unserer Kennung.

DAS WORT HEISST "Mobile"
  Gestern hiess es hier noch "17 KB, keine Daten, von jedem Weg aus".
  Nachgemessen mit einem Keksglas und fuenf Kennungen:

    Desktop-Kennung, ohne Kekse      17 KB   keine Daten
    Desktop-Kennung, MIT Keksen      17 KB   keine Daten
    Android-Kennung, ohne Kekse     939 KB   DATEN
    iPhone-Kennung,  mit Keksen     939 KB   DATEN
    TikTok-App,      mit Keksen      42 KB   keine Daten

  TikTok baut die Seite serverseitig NUR fuer die Handyfassung auf; am
  Rechner laedt sie sich mit JavaScript nach. Kekse, Sprache und
  Accept spielen keine Rolle -- einzeln nachgemessen.

  UND WIR BLEIBEN EHRLICH: Unser Name und unsere Adresse stehen hinten
  an der Kennung. Nachgemessen liefert TikTok damit dieselben 939 KB.
  Es kostet also nichts. Die Pruefung verlangt jetzt BEIDES: "Mobile"
  (sonst kommt nichts an) und unseren Namen (sonst ist es eine
  Verkleidung).

ZWEI VORLAGEN, NICHT EINE
  Filipes Einladung fuehrt zu "LIVE Glow Up" -- und die ist ganz
  anders gebaut als "Gipfelstuermer". Ihr fehlen gleich DREI
  Bausteine, auf denen der Bauplan beruht: live_rule_introduction,
  live_reward_introduction, live_campaign_intro. Stattdessen hat sie
  live_task_group (Aufgaben als Reiter) und live_secondary_gift.

  Der Leser kann jetzt beide. Gemessen:

    Gipfelstuermer  5 Aufgaben, 5 Geschenke, 6 Preisgruppen, 0 Hinweise
    LIVE Glow Up    2 Aufgaben, 1 Geschenk,  0 Preise,       2 Hinweise

  Die doppelten Reiter fallen weg: Die Vorlage legt je Reiter zwei
  Eintraege an (Creator und Zuschauer), und zweimal derselbe Haken
  waere ein Haken an zwei Stellen.

"HAT KEINE" IST ETWAS ANDERES ALS "KONNTE NICHT GELESEN WERDEN"
  Ohne diese Unterscheidung haette LIVE Glow Up vier Hinweise gemeldet,
  die alle nach einem Fehler klingen -- obwohl schlicht nichts da ist.
  Das eine schickt jemanden suchen, das andere sagt ihm, dass nichts
  fehlt. Entsprechend haengt der Regeltext auch kein pauschales "Bitte
  nachtragen" mehr an: Jeder Hinweis sagt selbst, ob etwas zu tun ist.

FUENFTE PRUEFDATEI
  kampagne-aufgabengruppe.html.br -- die echte Seite von LIVE Glow Up,
  unveraendert, unangemeldet geholt (uid "0", anchor_id leer),
  147 KB gepackt, sofort zurueckgelesen und Byte fuer Byte verglichen.
  Ohne sie koennte der Leser eine Vorlage und faellt bei der naechsten
  Einladung um.

GEPRUEFT
  pruef-kampagne-lesen 112 -> 128 (eigener Abschnitt fuer die zweite
  Vorlage, mit Gegenprobe: Gipfelstuermer meldet weiterhin nichts) ·
  pruef-kampagne 102 -> 103 · pruef-struktur, pruef-zeichen, pruef-video

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-10-07 18:15:50 +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=202610071814" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610071814" />
<link rel="stylesheet" href="assets/css/gate.css?v=202610071814" />
<link rel="stylesheet" href="assets/css/start.css?v=202610071814" />
<link rel="stylesheet" href="assets/css/manager-ziele.css?v=202610071814" />
<!-- 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=202610071814" />
<link rel="stylesheet" href="assets/css/haus.css?v=202610071814" />
</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=202610071814" 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=202610071814" defer></script>
<script src="assets/js/nachfrage.js?v=202610071814" defer></script>
<script src="assets/js/installieren.js?v=202610071814" defer></script>
<script src="assets/js/kopf.js?v=202610071814" defer></script>
<script src="assets/js/glocke.js?v=202610071814" defer></script>
<script src="assets/js/manager-ziele.js?v=202610071814" defer></script>
</body>
</html>