dogfather-universe/workspace/personen.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>Personen &amp; Zugänge · Creator Workspace</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609070231" />
<link rel="stylesheet" href="assets/css/start.css?v=202609070231" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070231" />
<link rel="stylesheet" href="assets/css/personen.css?v=202609070231" />
</head>

<body class="start">

<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
     Ecken, siehe start.css). Ein eigenes Element statt eines dritten
     Pseudo-Elements -- body hat nur ::before und ::after. -->
<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> · Personen</span></p>
  <div class="kopfleiste__rechts">
    <span class="wer" id="wer">…</span>
    <button type="button" class="abmelden" id="abmelden">Abmelden</button>
  </div>
</header>

<svg style="display:none" aria-hidden="true"><defs>
  <g id="r-krone"><path d="M4 17.6 5.4 7.4l4 3.4L12 5.2l2.6 5.6 4-3.4L20 17.6z"/><path d="M4.6 20.4h14.8"/></g>
  <g id="r-stern"><path d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/></g>
  <g id="r-schutz"><path d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/><path d="m9.5 11.8 1.8 1.8 3.3-3.5"/></g>
  <g id="r-person"><circle cx="12" cy="8.4" r="3.6"/><path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></g>
</defs></svg>

<main class="inhalt inhalt--breit">

  <section class="kopf-zeile">
    <div>
      <p class="marke">Zugänge</p>
      <h1 class="titel">Personen &amp; Zugangscodes</h1>
    </div>
    <div class="kopf-knoepfe">
      <!-- Standardmäßig steht hier nur DogFather. Alle anderen kommen auf
           Knopfdruck dazu – und der Knopf sagt immer, wie viele das sind,
           damit niemand vergisst, dass da noch welche sind. -->
      <button type="button" class="knopf-still" id="rest-schalter"
              aria-expanded="false" aria-controls="liste" hidden>
        <span id="rest-schalter-text">weitere 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="neu-oeffnen">Person anlegen</button>
    </div>
  </section>

  <form class="neu" id="neu" hidden>
    <div class="neu__raster">
      <div>
        <label class="feld-schild" for="f-name">Name</label>
        <input id="f-name" name="name" maxlength="60" placeholder="z. B. Luna" required />
      </div>
      <div class="rollenwahl-block">
        <span class="feld-schild">Rolle</span>
        <!-- Kein Auswahlmenü: Bei vier Möglichkeiten ist eine sichtbare
             Wahl schneller und zeigt gleich, was die Rolle bedeutet. Das
             Systemmenü ließ sich ausserdem nicht gestalten. -->
        <div class="rollenwahl" id="f-rolle" role="radiogroup" aria-label="Rolle"></div>
      </div>
    </div>
    <p class="fehler" id="neu-fehler" role="alert" aria-live="polite"></p>
    <div class="neu__knoepfe">
      <button type="submit" class="knopf knopf--klein" id="neu-speichern">Anlegen</button>
      <button type="button" class="abmelden" id="neu-abbrechen">Abbrechen</button>
    </div>
  </form>

  <!-- Anzeige des frisch erzeugten Codes. Bewusst auffällig und mit klarem
       Hinweis, dass er nur jetzt zu sehen ist. -->
  <div class="code-kasten" id="code-kasten" hidden role="status" aria-live="polite">
    <p class="code-kasten__schild">Zugangscode für <span id="code-name"></span></p>
    <p class="code-kasten__code" id="code-wert"></p>
    <p class="code-kasten__hinweis">
      Dieser Code wird <strong>nur jetzt</strong> angezeigt und ist danach nicht mehr
      abrufbar. Sicher weitergeben und in Bitwarden ablegen.
    </p>
    <div class="neu__knoepfe">
      <button type="button" class="knopf knopf--klein" id="code-kopieren">Kopieren</button>
      <button type="button" class="abmelden" id="code-schliessen">Verstanden, schließen</button>
    </div>
  </div>

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

  <div id="liste" aria-busy="true"><p class="leise">Personen werden geladen …</p></div>

  <!-- Das Protokoll ist Nachschlagewerk, nicht Startbild: Standardmäßig
       stehen nur die letzten vier Zeilen da, alles Weitere auf Knopfdruck. -->
  <section class="protokoll-block">
    <div class="klapp-kopf">
      <p class="feldschild">Letzte Ereignisse</p>
      <button type="button" class="knopf-still" id="protokoll-schalter"
              aria-expanded="false" aria-controls="protokoll" hidden>
        <span id="protokoll-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>
    </div>
    <div id="protokoll" data-klapp="zu"><p class="leise">…</p></div>
  </section>

</main>

<script src="assets/js/wahl.js?v=202609070231" defer></script>
<script src="assets/js/bereiche.js?v=202609070231" defer></script>
<script src="assets/js/kopf.js?v=202609070231" defer></script>
<script src="assets/js/glocke.js?v=202609070231" defer></script>
<script src="assets/js/personen.js?v=202609070231" defer></script>
</body>
</html>