dogfather-universe/workspace/leistung.html

<!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=202609111350" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609111350" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609111350" />
<link rel="stylesheet" href="assets/css/start.css?v=202609111350" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609111350" />
<link rel="stylesheet" href="assets/css/leistung.css?v=202609111350" />
<link rel="stylesheet" href="assets/css/module.css?v=202609111350" />
<!-- 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=202609111350" />
</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>
        <button type="button" class="knopf knopf--klein" id="import-oeffnen">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><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><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=202609111350"></script>
<script src="assets/js/bereiche.js?v=202609111350"></script>
<script src="assets/js/kopf.js?v=202609111350"></script>
<script src="assets/js/glocke.js?v=202609111350"></script>
<script src="assets/js/leistung.js?v=202609111350"></script>
</body>
</html>