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=202609101459" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609101459" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609101459" />
<link rel="stylesheet" href="assets/css/start.css?v=202609101459" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609101459" />
<link rel="stylesheet" href="assets/css/leistung.css?v=202609101459" />
<link rel="stylesheet" href="assets/css/module.css?v=202609101459" />
</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>
      </div>
    </div>
    <div class="tagetabelle" id="tagetabelle"></div>
  </section>

  <p class="fuss">
    Die Zahlen kommen aus dem offiziellen Export von TikTok LIVE Backstage –
    entweder von Hand eingetragen oder als Datei eingelesen. Es wird nichts
    automatisch abgerufen: Dafür gibt es keine offene Schnittstelle.
  </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 -->
<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=202609101459"></script>
<script src="assets/js/bereiche.js?v=202609101459"></script>
<script src="assets/js/kopf.js?v=202609101459"></script>
<script src="assets/js/glocke.js?v=202609101459"></script>
<script src="assets/js/leistung.js?v=202609101459"></script>
</body>
</html>