dogfather-universe/workspace/scouting.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>Scouting · Creator Workspace</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#05070d" />
<link rel="icon" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202608281339" />
<link rel="stylesheet" href="assets/css/start.css?v=202608281339" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608281339" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202608281339" />
</head>

<body class="start">

<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"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Scouting</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">Scout-CRM</p>
      <h1 class="titel">Pipeline</h1>
      <p class="unterzeile" id="unterzeile">Vom ersten Fund bis zur Übergabe – nachvollziehbar statt im Kopf.</p>
    </div>
    <div class="steuerung">
      <div id="scoutwahl-block" hidden>
        <label class="feld-schild" for="f-scout">Scout</label>
        <select id="f-scout"><option value="">Alle Scouts</option></select>
      </div>
      <button type="button" class="knopf knopf--klein" id="neu-auf">Neuer Kontakt</button>
    </div>
  </section>

  <p class="fehler" id="fehler" role="alert" aria-live="polite"></p>

  <!-- Follow-ups: der Teil, der ohne System am ehesten untergeht. -->
  <section class="faellig" id="faellig" hidden>
    <p class="faellig__titel">Follow-up fällig</p>
    <ul class="faellig__liste" id="faellig-liste"></ul>
  </section>

  <section class="neu" id="neu-block" hidden>
    <h2 class="neu__titel">Neuer Kontakt</h2>
    <form id="neu-form">
      <div class="neu__raster">
        <div class="feld feld--breit">
          <label class="feld-schild" for="n-name">Name</label>
          <input id="n-name" maxlength="120" required placeholder="Wie heißt die Person?" />
        </div>
        <div class="feld">
          <label class="feld-schild" for="n-plattform">Plattform</label>
          <input id="n-plattform" maxlength="60" placeholder="z. B. TikTok" />
        </div>
        <div class="feld">
          <label class="feld-schild" for="n-handle">Profil / Handle</label>
          <input id="n-handle" maxlength="120" placeholder="@…" />
        </div>
        <div class="feld">
          <label class="feld-schild" for="n-prio">Priorität</label>
          <select id="n-prio">
            <option value="hoch">Hoch</option>
            <option value="mittel" selected>Mittel</option>
            <option value="niedrig">Niedrig</option>
          </select>
        </div>
        <div class="feld" id="n-scout-block" hidden>
          <label class="feld-schild" for="n-scout">Scout</label>
          <select id="n-scout"><option value="">– niemandem zugeordnet –</option></select>
        </div>
        <div class="feld feld--breit">
          <label class="feld-schild" for="n-aktivitaet">Aktivität &amp; LIVE-Fokus</label>
          <input id="n-aktivitaet" maxlength="3000" placeholder="Wie oft LIVE? Welche Zeiten? Welches Format?" />
        </div>
        <div class="feld feld--breit">
          <label class="feld-schild" for="n-potenzial">Potenzial &amp; Stil</label>
          <input id="n-potenzial" maxlength="3000" placeholder="Was macht die Person besonders?" />
        </div>
        <div class="feld">
          <label class="feld-schild" for="n-followup">Nächster Follow-up</label>
          <input id="n-followup" type="date" />
        </div>
      </div>
      <p class="fehler" id="n-fehler" role="alert" aria-live="polite"></p>
      <div class="neu__knoepfe">
        <button type="submit" class="knopf knopf--klein" id="n-speichern">Aufnehmen</button>
        <button type="button" class="knopf-still" id="neu-zu">Abbrechen</button>
      </div>
    </form>
  </section>

  <div id="pipeline" aria-busy="true"><p class="leise">Pipeline wird geladen …</p></div>

</main>

<!-- Zugangscode nach dem Onboarding: genau einmal sichtbar. -->
<div class="schleier" id="code-schleier" hidden>
  <div class="code-fenster" role="dialog" aria-modal="true" aria-labelledby="code-titel">
    <p class="marke">Onboarding gestartet</p>
    <h2 class="code-fenster__titel" id="code-titel">Zugangscode</h2>
    <p class="code-fenster__text">
      Dieser Code wird <strong>genau einmal</strong> angezeigt und ist danach nicht mehr
      abrufbar. Gib ihn persönlich weiter, nicht über einen offenen Kanal.
    </p>
    <p class="code-fenster__code" id="code-wert">—</p>
    <div class="neu__knoepfe">
      <button type="button" class="knopf knopf--klein" id="code-kopieren">Kopieren</button>
      <button type="button" class="knopf-still" id="code-zu">Habe ich notiert</button>
    </div>
  </div>
</div>

<script src="assets/js/kopf.js?v=202608281339" defer></script>
<script src="assets/js/scouting.js?v=202608281339" defer></script>
</body>
</html>