Files
dogfather-universe/workspace/leistung.html
T
DogFatherGitandClaude Opus 5 8d3a79ed2a Zahlen-Seite: wieder fuer alle fuenf Rollen
Filipe, mit der Kachel im Bild: "jetzt soll jede rolle diese kachel
sehen. spicy, dogfather, manager, scout und creator. aber die creator
kriegen dan quasi nur ihre daten zu sehen und der manager scout
dogfather oder spicy koennen eintragen."

Damit ist die Sperre vom 07.09.2026 aufgehoben. Geaendert sind genau
zwei Zeilen -- die Kachel in bereiche.js und die Tuer in workspace.js.
Ausdruecklich als Liste der fuenf Rollen, NICHT als `null`: `null`
hiesse auch jede Rolle, die es noch nicht gibt.

WER WAS DARF, musste ich nicht bauen -- es stand schon da und konnte
nur niemand benutzen: sichtbareCreatorIds() gibt einem Creator genau
seine eigene Nummer, darfEintragen() ist Leitung plus Scout. Das ist
exakt Filipes Satz, ohne eine einzige Aenderung am Server.

WAS DER UMBAU AUFGEDECKT HAT: "Aus Datei einlesen" hatte als einziger
Knopf NIE eine Rechteregel -- folgenlos, solange nur DogFather
hereinkam, ab heute haette ein Creator ihn gesehen und eine Absage
bekommen. Alle drei Eintrag-Knoepfe stehen jetzt in EINER Liste mit
ihrer Regel daneben, und der Knopf startet `hidden`, damit er nicht
kurz aufblitzt.

Gefunden hat das nicht das Nachdenken, sondern die Gegenprobe von
heute Mittag: Sie wurde rot, weil der Test-Scout auf der Startseite
landete -- waehrend ich nebenan eine Erklaerung "fuer Scouts und
Manager" schrieb fuer eine Seite, die beide gar nicht oeffnen konnten.

pruef-backstage-import: 36 -> 50 Pruefungen. Gemessen wird der
UNTERSCHIED zwischen den Rollen, nicht die Anwesenheit von irgendetwas:
jeder Knopf einzeln, bei Scout und Creator, dazu die Kachel auf der
Startseite und die Gegenprobe, dass die Zahlen des Creators trotzdem
dastehen. Sonst waere "der Creator sieht keinen Knopf" auch dann gruen,
wenn seine Seite leer bliebe.

Mit SCHIRM=1 legt die Pruefung zwei Bilder ab, eins je Rolle.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-11 14:05:03 +02:00

432 lines
20 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>Zahlen · Spicy & Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
eine Flaeche sind statt zweier. -->
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609111404" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609111404" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609111404" />
<link rel="stylesheet" href="assets/css/start.css?v=202609111404" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609111404" />
<link rel="stylesheet" href="assets/css/leistung.css?v=202609111404" />
<link rel="stylesheet" href="assets/css/module.css?v=202609111404" />
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
genau diesen Dateinamen auf crew-haus.css um, und die Seite
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
ohne Umfaerben im Browser, ohne Flackern. -->
<link rel="stylesheet" href="assets/css/haus.css?v=202609111404" />
</head>
<body class="start">
<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> · Zahlen</span></p>
<div class="kopfleiste__rechts">
<span class="wer" id="wer">…</span>
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
</div>
</header>
<main class="inhalt inhalt--breit">
<section class="kopf-zeile">
<div>
<p class="marke">Zahlen</p>
<h1 class="titel">Was wirklich passiert ist.</h1>
</div>
<div class="leistung__wahl" id="creator-wahl" hidden>
<label class="feld-schild" for="creator">Creator</label>
<select id="creator"></select>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<!-- DIE WOCHE IN ZAHLEN.
Jede Karte trägt die drei Dinge, die eine Kennzahl braucht
(Recherche 31.08./06.09.2026): den WERT, den VERGLEICH zur
Vorwoche und den VERLAUF als kleine Linie. Eine Zahl ohne diese
drei ist eine Eitelkeitszahl -- sie sieht nach Auskunft aus, und
man kann nichts damit entscheiden. -->
<section class="leistung-woche" id="woche" hidden>
<div class="klapp-kopf">
<p class="feldschild">Diese Woche</p>
<p class="leistung__erfassung" id="erfassung"></p>
</div>
<div class="zahlkarten" id="zahlkarten"></div>
</section>
<!-- Die Ziele als Fortschritt, nicht als Satz. -->
<section class="leistung-ziele" id="ziele-block" hidden>
<div class="klapp-kopf">
<p class="feldschild">Ziele</p>
<button type="button" class="knopf-still" id="ziele-aendern" hidden>Ziele setzen</button>
</div>
<div class="zielbalken" id="zielbalken"></div>
</section>
<!-- Die Tageszeilen. Tastaturfreundlich: Eine Woche soll in unter
einer Minute eingetragen sein. -->
<section class="leistung-tage" id="tage-block" hidden>
<div class="klapp-kopf">
<p class="feldschild">Die letzten Tage</p>
<!-- Zwei Knöpfe rechts: erst der Schalter (er ordnet die Liste),
dann die Hauptaktion. Der Schalter trägt bewusst die stille
Ausführung -- er verändert nichts an den Daten. -->
<div class="klapp-kopf__knoepfe">
<button type="button" class="knopf-still" id="tage-schalter"
aria-expanded="false" aria-controls="tagetabelle" hidden>
<span id="tage-schalter-text">Alle zeigen</span>
<svg class="klapp-pfeil" viewBox="0 0 24 24" aria-hidden="true">
<path d="m6 9.5 6 6 6-6" />
</svg>
</button>
<!-- `hidden` ab Start (11.09.2026): Seit die Seite jeder Rolle
offensteht, darf dieser Knopf nicht erst erscheinen und
dann wieder verschwinden. Ein Creator saehe sonst fuer
einen Wimpernschlag einen Weg, den es fuer ihn nicht gibt
-- gezeigt wird er in leistung.js, zusammen mit den
anderen beiden. -->
<button type="button" class="knopf knopf--klein" id="import-oeffnen" hidden>Aus Datei einlesen</button>
<!-- DER WEG AUS BACKSTAGE (11.09.2026).
TikTok LIVE Backstage hat keine Schnittstelle und keinen
Export – nachrecherchiert am 10.09.2026. Was es hat, ist
eine Tabelle im Browser, die man markieren kann. Genau das
ist hier der Weg: markieren, kopieren, einfügen.
Getrennt vom Knopf daneben, weil es etwas anderes tut: Der
liest eine Datei FÜR DIESEN einen Creator, dieser eine
Tabelle FÜR ALLE auf einmal. -->
<button type="button" class="knopf knopf--klein" id="netz-oeffnen" hidden>
Backstage-Tabelle einfügen
</button>
<!-- DIE EIGENE TIKTOK-DATEI DES CREATORS (11.09.2026).
Der einzige Weg an TikTok-Daten, der ohne Entwicklerkonto
auskommt: Der Creator lädt sie selbst herunter. -->
<button type="button" class="knopf knopf--klein" id="tt-oeffnen" hidden>
TikTok-Datei des Creators
</button>
</div>
</div>
<!-- IMMER SICHTBAR, NICHT ERST IM FENSTER (11.09.2026).
Filipe: "ich brauch auch eine erklärung immer dabei."
Ein Knopf sagt, was er tut. Er sagt nicht, WOHER das Material
kommt -- und genau daran scheitert es, wenn jemand das erste Mal
davorsitzt. Zwei Sätze reichen; die Schritte stehen im Fenster,
wo man sie braucht. -->
<p class="quellen-hinweis" id="quellen-hinweis" hidden>
<span id="quelle-netz" hidden><strong>Backstage-Tabelle:</strong> die Liste aus TikTok LIVE
Backstage, in der alle deine Creator mit ihren Zahlen stehen –
markieren, kopieren, einfügen. Für alle auf einmal.</span>
<span id="quelle-tt" hidden><strong>TikTok-Datei:</strong> die Datendatei, die ein Creator
sich in der TikTok-App selbst herunterlädt. Für einen Creator, und
nur er kommt daran. Die Anleitung zum Weiterschicken steht im
Fenster.</span>
</p>
<div class="tagetabelle" id="tagetabelle"></div>
</section>
<p class="fuss">
<!-- Der Satz stand hier mit zwei Wegen, seit dem 11.09.2026 sind es
drei. Ein Text, der etwas anderes sagt als die Software tut, ist
schlimmer als gar keiner. -->
Die Zahlen kommen aus TikTok LIVE Backstage – von Hand eingetragen, als
Datei eingelesen oder als ganze Tabelle eingefügt. Abgerufen wird nichts:
Backstage hat keine Schnittstelle, und an den offiziellen TikTok-Zugängen
gibt es nichts zu LIVE, Diamanten oder Netzwerkdaten (nachgesehen am
10.09.2026).
</p>
</main>
<!-- Einen Tag eintragen -->
<dialog class="dialog" id="tag-dialog">
<form method="dialog" id="tag-form" class="neu neu--blank">
<h2 class="dialog__titel" id="tag-titel">Tag eintragen</h2>
<p class="dialog__unter" id="tag-unter"></p>
<div class="neu__raster">
<div>
<label class="feld-schild" for="f-diamanten">Diamanten</label>
<input id="f-diamanten" type="number" min="0" inputmode="numeric" />
</div>
<div>
<label class="feld-schild" for="f-dauer">LIVE-Dauer <span class="leise">Minuten</span></label>
<input id="f-dauer" type="number" min="0" inputmode="numeric" />
</div>
<div>
<label class="feld-schild" for="f-verweildauer">Ø Verweildauer <span class="leise">Sekunden</span></label>
<input id="f-verweildauer" type="number" min="0" inputmode="numeric" />
</div>
<div>
<label class="feld-schild" for="f-zavg">Ø Zuschauer</label>
<input id="f-zavg" type="number" min="0" inputmode="numeric" />
</div>
<div>
<label class="feld-schild" for="f-zmax">Spitze</label>
<input id="f-zmax" type="number" min="0" inputmode="numeric" />
</div>
<div>
<label class="feld-schild" for="f-schenker">Schenker</label>
<input id="f-schenker" type="number" min="0" inputmode="numeric" />
</div>
<div>
<label class="feld-schild" for="f-follower">Neue Follower</label>
<input id="f-follower" type="number" min="0" inputmode="numeric" />
</div>
</div>
<!-- Der Kontext, ohne den Zahlen in die Irre führen. -->
<div class="neu__zeile">
<label class="feld-schild" for="f-notiz">
Was war an dem Tag besonders? <span class="leise">(optional)</span>
</label>
<input id="f-notiz" maxlength="500" placeholder="z. B. PK gegen Mia, krank, Technik ausgefallen" />
</div>
<p class="fehler" id="tag-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="submit" class="knopf knopf--klein" id="tag-speichern">Speichern</button>
<button type="button" class="abmelden" id="tag-zu">Abbrechen</button>
<button type="button" class="abmelden abmelden--warnung" id="tag-loeschen" hidden>Zeile löschen</button>
</div>
</form>
</dialog>
<!-- Ziele setzen -->
<dialog class="dialog" id="ziele-dialog">
<form method="dialog" id="ziele-form" class="neu neu--blank">
<h2 class="dialog__titel">Ziele je Woche</h2>
<p class="dialog__unter">
Aus „mehr Reichweite" wird eine prüfbare Größe. Leer lassen heißt: kein Ziel.
</p>
<div class="neu__raster">
<div>
<label class="feld-schild" for="z-diamanten">Diamanten pro Woche</label>
<input id="z-diamanten" type="number" min="0" inputmode="numeric" />
</div>
<div>
<label class="feld-schild" for="z-tage">LIVE-Tage pro Woche</label>
<input id="z-tage" type="number" min="0" max="7" inputmode="numeric" />
</div>
<div>
<label class="feld-schild" for="z-verweildauer">Ø Verweildauer <span class="leise">Sekunden</span></label>
<input id="z-verweildauer" type="number" min="0" inputmode="numeric" />
</div>
</div>
<p class="fehler" id="ziele-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="submit" class="knopf knopf--klein" id="ziele-speichern">Speichern</button>
<button type="button" class="abmelden" id="ziele-zu">Abbrechen</button>
</div>
</form>
</dialog>
<!-- Aus Datei einlesen. ERST VORSCHAU, DANN ÜBERNEHMEN -->
<!-- ====================================================================
BACKSTAGE-TABELLE EINFÜGEN — alle Creator auf einmal (11.09.2026)
Warum ein eigener Dialog und nicht derselbe: Der andere wählt eine
Datei für EINEN Creator. Hier wird eine Tabelle eingefügt, in der
jede Zeile zu einer anderen Person gehört – die Zuordnung ist die
eigentliche Arbeit, und die will man sehen, bevor geschrieben wird.
==================================================================== -->
<!-- ====================================================================
DIE TIKTOK-DATEI DES CREATORS (11.09.2026)
Warum hier eine AUSWAHL steht und nicht einfach eingelesen wird:
Das Format der Datei ist nicht dokumentiert. Statt Schlüsselnamen
zu raten, durchsucht der Server die Datei nach Listen mit Datum und
legt sie vor – bestätigt wird von Hand. Damit funktioniert es auch
dann noch, wenn TikTok die Felder umbenennt.
==================================================================== -->
<dialog class="dialog dialog--breit" id="tt-dialog">
<form method="dialog" id="tt-form" class="neu neu--blank">
<h2 class="dialog__titel">TikTok-Datei einlesen</h2>
<p class="dialog__unter">
Diese Datei kann <strong>nur der Creator selbst</strong> holen – an
Backstage kommt sie nicht vorbei, und ein Zugang bei TikTok für uns
existiert nicht. Du brauchst sie also von ihm.
</p>
<!-- DIE ANLEITUNG ZUM WEITERSCHICKEN (11.09.2026).
Ein Manager oder Scout soll den Creator nicht mit eigenen Worten
durch sechs Menüpunkte lotsen müssen -- dabei geht jedes Mal ein
Schritt verloren, und am Ende kommt eine TXT-Datei an, die
niemand lesen kann. Der Text steht deshalb fertig da und lässt
sich mit einem Klick kopieren. -->
<p class="feld-schild">Das schickst du dem Creator</p>
<pre class="anleitung-text" id="tt-text">Hi! Ich brauche einmal deine TikTok-Daten, damit deine LIVE-Zahlen bei uns im Workspace stehen. Das machst du selbst in der App, dauert zwei Minuten:
1. TikTok öffnen, auf dein Profil gehen
2. Oben rechts auf die drei Striche, dann "Einstellungen und Datenschutz"
3. "Konto" öffnen, dann "Deine Daten herunterladen"
4. Reiter "Daten anfordern": bei Datenumfang "Alle Daten" wählen und als Dateiformat unbedingt JSON (nicht TXT)
5. Auf "Daten anfordern" tippen
TikTok braucht dafür 1 bis 4 Tage. Wenn es fertig ist, gehst du an derselben Stelle auf den Reiter "Daten herunterladen", lädst die Datei und schickst sie mir.
Was ich damit mache: Ich lese daraus nur deinen LIVE-Verlauf (wann und wie lange du live warst). Nachrichten, Suchverlauf und Auszahlungen werden nicht gelesen, und die Datei selbst wird nicht gespeichert.</pre>
<p class="dialog__knoepfe dialog__knoepfe--links">
<button type="button" class="knopf-still" id="tt-text-kopieren">Text kopieren</button>
</p>
<p class="dialog__unter dialog__unter--still">
Die Bezeichnungen können je nach App-Version leicht abweichen – der Weg
ist immer <em>Einstellungen → Konto → Deine Daten herunterladen</em>.
<strong>JSON ist Pflicht</strong>: Eine TXT-Datei lässt sich nicht
auswerten.
</p>
<p class="dialog__unter dialog__unter--still">
Wenn die Datei da ist: hier auswählen. Der Workspace durchsucht sie
und zeigt dir, welche Liste darin der LIVE-Verlauf ist – du bestätigst
nur. Gelesen und <strong>nicht gespeichert</strong>.
</p>
<div class="neu__zeile">
<label class="feld-schild" for="tt-datei">Datei wählen</label>
<input id="tt-datei" type="file" accept=".json,application/json" />
</div>
<div class="import-vorschau" id="tt-vorschau" hidden></div>
<p class="fehler" id="tt-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="submit" class="knopf knopf--klein" id="tt-los" disabled>Übernehmen</button>
<button type="button" class="abmelden" id="tt-zu">Abbrechen</button>
</div>
</form>
</dialog>
<dialog class="dialog dialog--breit" id="netz-dialog">
<form method="dialog" id="netz-form" class="neu neu--blank">
<h2 class="dialog__titel">Backstage-Tabelle einfügen</h2>
<p class="dialog__unter">
Für alle Creator auf einmal. Erst siehst du, was passieren würde –
geschrieben wird erst, wenn du bestätigst.
</p>
<!-- DIE ANLEITUNG STEHT IM FENSTER, NICHT IN EINER NOTIZ (11.09.2026).
Filipe: "ich brauch auch eine erklärung immer dabei wo die scouts
und manager das finden."
KEIN ERFUNDENER KLICKPFAD. Die Menünamen von Backstage sind
nirgends öffentlich dokumentiert, und eine Anleitung, die
„Daten → Export“ sagt, wo „Performance“ steht, schickt Leute
suchen und wird nie korrigiert. Beschrieben wird deshalb, WAS
man sucht – das bleibt richtig, auch wenn TikTok umbenennt.
Die Mechanik dagegen (markieren, Strg+C) ist überall gleich und
steht genau. -->
<ol class="anleitung">
<li>
<strong>In Backstage die Ansicht öffnen, in der deine Creator
untereinander mit ihren Zahlen stehen</strong> – also die Liste mit
Diamanten, LIVE-Dauer und gültigen Tagen. Wie der Menüpunkt heißt,
wechselt mit den TikTok-Versionen; gesucht ist die Tabelle, nicht
ein bestimmter Name.
</li>
<li>
<strong>Die Tabelle mit der Maus markieren – die Überschriftenzeile
muss mit.</strong> An ihr erkennt der Workspace, welche Spalte
Diamanten sind und welche Dauer. Ohne sie geht es nicht.
</li>
<li>Kopieren mit <strong>Strg&nbsp;+&nbsp;C</strong> (Mac: Cmd&nbsp;+&nbsp;C).</li>
<li>Hier unten ins Feld klicken und <strong>Strg&nbsp;+&nbsp;V</strong> drücken.
Die Vorschau erscheint von selbst.</li>
<li>Steht in der Tabelle <strong>kein Datum</strong>, den Tag im Feld
darunter wählen – sonst weiß niemand, worauf sich die Zahlen beziehen.</li>
</ol>
<p class="dialog__unter dialog__unter--still">
<strong>Zugeordnet wird über den TikTok-Namen aus dem Steckbrief.</strong>
Wer dort keinen stehen hat, taucht in der Vorschau unter „nicht
zugeordnet“ auf – dann einmal im Steckbrief nachtragen, und beim
nächsten Mal wird er gefunden. Es wird nie geraten.
</p>
<p class="dialog__unter dialog__unter--still">
Warum von Hand und nicht automatisch: Backstage hat keine
Schnittstelle und keinen Export. Erweiterungen, die das umgehen,
verstoßen gegen die Nutzungsbedingungen – und riskieren das
Netzwerk-Konto.
</p>
<div class="neu__zeile">
<label class="feld-schild" for="netz-text">Tabelle</label>
<textarea id="netz-text" rows="7" class="netz__feld"
placeholder="Hier einfügen (Strg+V) …"></textarea>
</div>
<div class="neu__zeile">
<label class="feld-schild" for="netz-tag">Tag <span class="leise">– nur nötig, wenn die Tabelle keine Datumsspalte hat</span></label>
<input id="netz-tag" type="date" />
</div>
<div class="import-vorschau" id="netz-vorschau" hidden></div>
<p class="fehler" id="netz-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="submit" class="knopf knopf--klein" id="netz-los" disabled>Übernehmen</button>
<button type="button" class="abmelden" id="netz-zu">Abbrechen</button>
</div>
</form>
</dialog>
<dialog class="dialog dialog--breit" id="import-dialog">
<form method="dialog" id="import-form" class="neu neu--blank">
<h2 class="dialog__titel">Aus dem Export einlesen</h2>
<p class="dialog__unter">
Die CSV-Datei aus TikTok LIVE Backstage. Erst siehst du, was passieren
würde – geschrieben wird erst, wenn du bestätigst. Dieselbe Datei
zweimal einzulesen richtet keinen Schaden an.
</p>
<div class="neu__zeile">
<label class="feld-schild" for="datei">Datei wählen</label>
<input id="datei" type="file" accept=".csv,text/csv,text/plain" />
</div>
<div class="import-vorschau" id="vorschau" hidden></div>
<p class="fehler" id="import-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="submit" class="knopf knopf--klein" id="import-los" disabled>Übernehmen</button>
<button type="button" class="abmelden" id="import-zu">Abbrechen</button>
</div>
</form>
</dialog>
<script src="assets/js/wahl.js?v=202609111404"></script>
<script src="assets/js/bereiche.js?v=202609111404"></script>
<script src="assets/js/kopf.js?v=202609111404"></script>
<script src="assets/js/glocke.js?v=202609111404"></script>
<script src="assets/js/leistung.js?v=202609111404"></script>
</body>
</html>