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=202609111201" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609111201" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609111201" />
<link rel="stylesheet" href="assets/css/start.css?v=202609111201" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609111201" />
<link rel="stylesheet" href="assets/css/leistung.css?v=202609111201" />
<link rel="stylesheet" href="assets/css/module.css?v=202609111201" />
<!-- 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=202609111201" />
</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>
    <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">
      Die Datei, die der Creator sich selbst bei TikTok herunterlädt:
      <strong>Profil → Einstellungen → Konto → Deine Daten herunterladen</strong>,
      Format <strong>JSON</strong>, „Alles auswählen“. TikTok braucht dafür
      ein bis vier Tage. Die Datei wird hier gelesen und <strong>nicht
      gespeichert</strong> – in ihr stehen auch Nachrichten und Verläufe,
      die hier nichts zu suchen haben.
    </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">
      In TikTok LIVE Backstage die Tabelle markieren, kopieren und hier
      einfügen. Die Überschriftenzeile muss mit dabei sein – daran erkennt
      der Workspace die Spalten. Zugeordnet wird über den TikTok-Namen aus
      dem Steckbrief. Erst siehst du, was passieren würde.
    </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=202609111201"></script>
<script src="assets/js/bereiche.js?v=202609111201"></script>
<script src="assets/js/kopf.js?v=202609111201"></script>
<script src="assets/js/glocke.js?v=202609111201"></script>
<script src="assets/js/leistung.js?v=202609111201"></script>
</body>
</html>