dogfather-universe/workspace/anleitung.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>Anleitung · Creator Workspace</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610061535" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610061535" />
<link rel="stylesheet" href="assets/css/gate.css?v=202610061535" />
<link rel="stylesheet" href="assets/css/start.css?v=202610061535" />
<link rel="stylesheet" href="assets/css/anleitung.css?v=202610061535" />
<!-- module.css an VORLETZTER, haus.css an LETZTER Stelle. Die
     Reihenfolge ist keine Geschmacksfrage: haus.css setzt nur
     Variablen, und bei Variablen entscheidet allein, wer zuletzt
     kommt. pruef-css-klassen.mjs misst genau dieses Paar nach. -->
<link rel="stylesheet" href="assets/css/module.css?v=202610061535" />
<link rel="stylesheet" href="assets/css/haus.css?v=202610061535" />
</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> · Anleitung</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 an-seite">

  <section class="kopf-zeile">
    <div>
      <p class="marke">Einweisung</p>
      <h1 class="titel" id="seiten-titel">Anleitung</h1>
      <p class="unterzeile">
        Was du brauchst und was nicht. Fang oben an – der Rest ist
        zugeklappt, bis du ihn brauchst.
      </p>
    </div>
  </section>

  <!-- ==================================================================
       DER FORTSCHRITT

       Er zählt NUR die Ersten Schritte, nicht die Karten. Wörtlich aus
       dem Bauplan: „Niemand muss 18 Karten abhaken. Fertig ist, wer
       die Ersten Schritte erledigt hat."

       Der Balken ist ein `progress`: Damit bringt er die Ansage für
       Vorleseprogramme mit, ohne dass davon eine Zeile geschrieben
       werden muss. Der Satz daneben steht trotzdem da – eine Zahl,
       die man nur sieht, wenn man die Maus darüberhält, ist keine.
       ================================================================== -->
  <!-- Bauplan Kapitel 04: „Knopf ,Rundgang noch einmal starten'".
       Er führt auf die Zentrale zurück und startet ihn dort — dort
       liegen die fünf Stationen, nicht hier. -->
  <p class="an-nochmal">
    <a class="an-nochmal__weg" href="start.html#rundgang">Rundgang noch einmal starten</a>
  </p>

  <div class="an-stand" id="stand" hidden>
    <progress class="an-stand__balken" id="stand-balken" max="1" value="0"></progress>
    <p class="an-stand__satz" id="stand-satz"></p>
  </div>

  <!-- ==================================================================
       DIE PFLEGE — nur für DogFather und Spicy Media

       Sie ist ein SCHALTER und keine zweite Seite. Wer die Texte
       ändert, will sie dort ändern, wo er sie sieht – eine getrennte
       Verwaltungsansicht hieße, zwischen zwei Fenstern zu vergleichen,
       und genau dabei entstehen die Texte, die nicht zusammenpassen.

       Die Rolle wird NICHT hier gewählt: Dafür gibt es den
       Sicht-Umschalter in der Kopfleiste, der auf jeder Seite des
       Hauses dasselbe tut.
       ================================================================== -->
  <div class="an-pflege" id="pflege" hidden>
    <button type="button" class="an-pflege__knopf" id="pflege-an" aria-pressed="false">
      Texte bearbeiten
    </button>
    <button type="button" class="an-pflege__knopf" id="pflege-stand">
      Wer ist wie weit?
    </button>
    <span class="an-pflege__satz" id="pflege-satz"></span>
  </div>

  <!-- Kacheln ohne Karte. Steht nur in der Pflege und nur, wenn es
       welche gibt – der Bauplan nennt es „Für diese Kachel fehlt ein
       Eintrag". Es ist derselbe Abgleich, den pruef-anleitung in beide
       Richtungen prüft; hier als Angebot, ihn zu schließen. -->
  <section class="an-block an-fehlend" id="fehlend-block" hidden>
    <h2 class="an-block__titel">Für diese Kacheln fehlt ein Eintrag</h2>
    <ul class="an-fehlend__liste" id="fehlend"></ul>
  </section>

  <p class="ladefehler" id="ladefehler" hidden>
    <span class="ladefehler__satz">Die Seite konnte nicht geladen werden.</span>
    <span class="ladefehler__grund" id="ladefehler-grund"></span>
    <button type="button" class="ladefehler__knopf" id="nochmal">Erneut versuchen</button>
  </p>

  <!-- ==================================================================
       OHNE EIGENE FASSUNG (DogFather)

       Er bekommt keine Einweisung, kann aber jede ansehen – über den
       Sicht-Umschalter, den es in der Kopfleiste ohnehin gibt. Eine
       zweite Rollenauswahl hier wäre dieselbe Funktion ein zweites
       Mal, an einer Stelle, an der sie niemand sucht.
       ================================================================== -->
  <p class="an-ohne" id="ohne-fassung" hidden></p>

  <div id="fassung" hidden>

    <!-- ---------- IN 60 SEKUNDEN -------------------------------------
         Steht VOR allem anderen und ist nicht zuklappbar: Drei Sätze
         sind kürzer als der Knopf, mit dem man sie aufklappen würde. -->
    <section class="an-block">
      <h2 class="an-block__titel">In 60 Sekunden</h2>
      <p class="an-leit" id="leitgedanke"></p>
      <ul class="an-saetze" id="saetze"></ul>
    </section>

    <!-- ---------- ERSTE SCHRITTE ------------------------------------- -->
    <section class="an-block">
      <h2 class="an-block__titel">Erste Schritte: deine ersten 10 Minuten</h2>
      <ol class="an-schritte" id="schritte"></ol>
    </section>

    <!-- ==================================================================
         DER STUFEN-FILTER

         Er steht ÜBER den Stufen und nicht in der Kopfzeile: Dort wäre
         er ein Bedienelement ohne sichtbare Wirkung – man sieht erst
         beim Scrollen, was er getan hat. Hier steht er auf derselben
         Höhe wie das, was er filtert.
         ================================================================== -->
    <div class="an-filter" role="group" aria-label="Nach Stufe filtern" id="filter"></div>

    <!-- Die drei Stufenblöcke werden gebaut, nicht geschrieben: Welche
         Stufen es gibt, sagt der Server (STUFEN in
         anleitung-tabellen.js). Stünden sie hier noch einmal, wären es
         zwei Listen, von denen eine veraltet. -->
    <div id="stufen" aria-live="polite"></div>

    <!-- ---------- NICHT DEINS ---------------------------------------- -->
    <section class="an-block" id="nicht-block" hidden>
      <h2 class="an-block__titel">Das kannst du liegen lassen</h2>
      <ul class="an-nicht" id="nicht"></ul>
    </section>

    <!-- ---------- RHYTHMUS -------------------------------------------- -->
    <section class="an-block" id="takt-block" hidden>
      <h2 class="an-block__titel">Dein Rhythmus</h2>
      <dl class="an-takt" id="takt"></dl>
    </section>

    <!-- ---------- FRAGEN ---------------------------------------------- -->
    <section class="an-block" id="fragen-block" hidden>
      <h2 class="an-block__titel">Häufige Fragen</h2>
      <div class="an-fragen" id="fragen"></div>
    </section>

    <!-- ---------- HILFE ------------------------------------------------
         Zuletzt und ohne Überschrift in Großbuchstaben: Wer bis hierher
         liest, hat seine Antwort nicht gefunden. -->
    <p class="an-hilfe">
      Nichts dabei? Schreib deiner Betreuung im
      <a href="chat.html">Chat</a> – oder melde einen Fehler an der Seite
      über <a href="support.html">Support</a>.
    </p>

  </div>

</main>

<!-- ==================================================================
     BEARBEITEN

     Ein echtes <dialog>: Fokusfang, Escape und der abdunkelnde
     Hintergrund kommen mit. Ein Fenster für beides – Karten und
     Listenzeilen –, weil es dieselbe Handlung ist: Text ändern,
     speichern. Zwei Fenster wären zweimal derselbe Knopf an zwei
     Stellen, von denen eine irgendwann anders aussieht.
     ================================================================== -->
<dialog class="dialog" id="aendern">
  <form class="an-form" id="aendern-form" method="dialog">
    <div>
      <h2 class="dialog__titel" id="aendern-titel">Bearbeiten</h2>
      <p class="dialog__unter dialog__unter--still" id="aendern-unter"></p>
    </div>

    <label class="an-feld" id="feld-stufe" hidden>
      <span class="an-feld__schild">Stufe</span>
      <select id="e-stufe"></select>
    </label>

    <label class="an-feld" id="feld-a" hidden>
      <span class="an-feld__schild" id="schild-a">Titel</span>
      <input type="text" id="e-a" maxlength="300" autocomplete="off" />
    </label>

    <label class="an-feld" id="feld-b" hidden>
      <span class="an-feld__schild" id="schild-b">Text</span>
      <textarea id="e-b" maxlength="600" rows="2"></textarea>
    </label>

    <label class="an-feld" id="feld-c" hidden>
      <span class="an-feld__schild" id="schild-c">Merke</span>
      <textarea id="e-c" maxlength="400" rows="2"></textarea>
    </label>

    <label class="an-feld" id="feld-ziel" hidden>
      <span class="an-feld__schild">Sprung zur Kachel (leer = kein Sprung)</span>
      <input type="text" id="e-ziel" maxlength="200" autocomplete="off"
             placeholder="z. B. profil.html" />
    </label>

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

    <div class="dialog__knoepfe">
      <button type="button" class="knopf-still" id="aendern-abbruch">Abbrechen</button>
      <button type="submit" class="knopf" id="aendern-speichern">Speichern</button>
    </div>
  </form>
</dialog>

<!-- Wer ist wie weit. Eine ARBEITSLAGE, keine Überwachung: Hier steht,
     wer seine Einweisung noch offen hat – nicht, was er gelesen hat. -->
<dialog class="dialog dialog--breit" id="stand-dialog">
  <form class="an-form" method="dialog">
    <div>
      <h2 class="dialog__titel">Wer ist wie weit?</h2>
      <p class="dialog__unter dialog__unter--still">
        Nur die Ersten Schritte. Wer durch ist, braucht nichts mehr von dir.
      </p>
    </div>
    <div id="stand-liste"></div>
    <div class="dialog__knoepfe">
      <button type="button" class="knopf" id="stand-zu">Schließen</button>
    </div>
  </form>
</dialog>

<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und
     kopf.js liest daraus die Leitungsrollen. Ohne sie stürzt jede
     Seite ab, und zwar nur in der Browserkonsole -- die Kopfleiste
     kommt trotzdem.

     Und anleitung.js braucht es doppelt: Symbol, Farbe, Name und
     Adresse jeder Karte kommen von dort, nicht vom Server. -->
<script src="assets/js/bereiche.js?v=202610061535" defer></script>
<!-- wahl.js gehört zu kopf.js: Der Sicht-Umschalter baut daraus seine
     Liste. pruef-css-klassen setzt das durch, und zwar auch die
     Reihenfolge -- kopf.js fragt beim Aufbau nach dem fertigen
     Bedienelement. -->
<script src="assets/js/wahl.js?v=202610061535" defer></script>
<script src="assets/js/nachfrage.js?v=202610061535" defer></script>
<script src="assets/js/installieren.js?v=202610061535" defer></script>
<script src="assets/js/kopf.js?v=202610061535" defer></script>
<script src="assets/js/glocke.js?v=202610061535" defer></script>
<script src="assets/js/anleitung.js?v=202610061535" defer></script>
</body>
</html>