dogfather-universe/workspace/crew-index.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>Anmeldung · Team Dogi</title>
<meta name="description" content="Privater Arbeitsbereich für DogFather und die Modis." />
<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" />

<!-- Die Bühne ist der erste Eindruck. Ohne diesen Hinweis lädt der Browser sie erst,
     nachdem er das CSS gelesen hat - das kostet spürbar Zeit. Quer- und Hochformat
     sind getrennt, damit das Handy nicht die große Fassung zieht.

     Hier steht bewusst WebP und nicht AVIF, obwohl die AVIF-Fassungen erzeugt
     werden und rund ein Drittel kleiner wären: Der ausliefernde Server läuft auf
     Express 4, dessen `send` eine alte MIME-Tabelle ohne AVIF mitbringt. Die
     Dateien kämen als application/octet-stream an und würden wegen des
     nosniff-Headers vom Browser verweigert - die Bühne bliebe leer. Sobald der
     Workspace einen eigenen Server bekommt, kann AVIF wieder eingeschaltet
     werden (die Dateien liegen bereit). -->
<link rel="preload" as="image" href="assets/img/buehne/crew-gate-1920.webp"
      type="image/webp" media="(min-width: 900px)" />
<link rel="preload" as="image" href="assets/img/buehne/crew-gate-hoch-580.webp"
      type="image/webp" media="(max-width: 899px)" />

<link rel="icon" type="image/png" href="/assets/img/app-symbole/crew-32.png?v=202609101351" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/crew-180.png?v=202609101351" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609101351" />
</head>

<body class="gate gate--crew">

<!-- HIER STANDEN DIE FUENF ROLLENZEICHEN.

     Sie waren die Symbole der Kachelreihe -- Peperoni, Husky, Stern,
     Lupe, Person -- gut 150 Zeilen SVG mit Verlaeufen und Lichtern.
     Ohne Kacheln zeigt nichts mehr darauf; nachgemessen ist auf dieser
     Seite kein einziges href="#..." uebrig.

     Sie ZU LOESCHEN und nicht bloss auszublenden hat zwei Gruende: Sie
     kosten sonst bei jedem Aufruf Bytes fuer nichts -- und in ihren
     Beschriftungen standen die Namen der anderen Rollen ausgeschrieben.
     Auf einer Seite, die niemandem etwas ueber die andere Haelfte des
     Hauses sagen soll, gehoeren die nicht in den Quelltext.
     pruef-crew-adresse.mjs sucht danach; genau daran ist der erste
     Versuch gescheitert -- und beim zweiten Mal an diesem Kommentar
     selbst, weil ich die Namen darin erklaert hatte. -->


<!-- ---------- Bühne: Bild + Schleier ---------------------------------- -->
<div class="buehne" aria-hidden="true">
  <picture>
    <!-- BIS 2560 PIXEL (07.09.2026). Vorher endete die Reihe bei 1600 --
         auf einem 2550 px breiten Schirm rechnete der Browser das Bild
         also um das 1,6-fache hoch, und jede Kante wurde weich. Genau
         das sah man als "nicht hochwertig", ohne es benennen zu koennen.
         Eine hoehere Bildguete haette daran nichts geaendert: Man kann
         keine Bildpunkte zurueckholen, die nie ausgeliefert wurden.
         Ueber srcset laedt trotzdem jeder nur die Stufe, die er
         braucht -- ein Handy weiterhin 32 KB. -->
    <source media="(min-width: 900px)" type="image/webp"
            srcset="assets/img/buehne/crew-gate-960.webp 960w,
                    assets/img/buehne/crew-gate-1280.webp 1280w,
                    assets/img/buehne/crew-gate-1600.webp 1600w,
                    assets/img/buehne/crew-gate-1920.webp 1920w,
                    assets/img/buehne/crew-gate-2560.webp 2560w" sizes="100vw" />
    <source type="image/webp"
            srcset="assets/img/buehne/crew-gate-hoch-440.webp 440w,
                    assets/img/buehne/crew-gate-hoch-580.webp 580w,
                    assets/img/buehne/crew-gate-hoch-900.webp 900w" sizes="100vw" />
    <img class="buehne__bild" src="assets/img/buehne/crew-gate-1280.webp" alt=""
         width="1647" height="955" fetchpriority="high" decoding="async" />
  </picture>
  <div class="buehne__schleier"></div>
</div>

<!-- ---------- Tafel ----------------------------------------------------

     DER ANKER (06.09.2026). Im Motiv steht rechts eine LEERE TAFEL mit
     Neonrahmen -- dort gehoert die Anmeldekarte hinein, und zwar genau
     hinein, nicht ungefaehr.

     Das geht nur, wenn man weiss, wo die gemalte Tafel auf dem
     Bildschirm landet. Das Bild liegt mit `object-fit: cover` darunter;
     je nach Fensterform schneidet der Browser oben/unten oder
     links/rechts etwas ab. Dieser Anker rechnet genau dieselbe
     Cover-Geometrie noch einmal nach (siehe gate.css) -- er ist damit
     deckungsgleich mit dem Bild, und die Karte kann in Prozent des
     BILDES sitzen statt in Prozent des Fensters.

     Er faengt keine Klicks ab (pointer-events: none); nur die Karte
     darin ist bedienbar. -->
<div class="tafel-anker">
<main class="tafel" id="tafel">
  <div class="tafel__kante" aria-hidden="true"></div>

  <!-- 10.09.2026, Wunsch Filipe: hier soll alles auf DogFather und sein
       Team zugeschnitten sein.

       Zwei Namen und ein Zeichen dazwischen -- nebeneinander, nicht
       uebereinander. Dogi steht hier nicht ueber den Modis, sie machen
       das zusammen.

       Das "x" steht als eigenes Element, damit es kleiner und in der
       Zwischenfarbe gesetzt werden kann -- so liest man zwei Namen und
       ein Zeichen dazwischen, nicht drei gleich laute Wörter. Es trägt
       aria-hidden nicht: Vorgelesen wird "DogFather x Team Dogi", und
       genau so spricht man es auch aus. -->
  <header class="kopf">
    <p class="marke marke--paar">
      <span class="marke__dogi">DogFather</span>
      <span class="marke__x">×</span>
      <span class="marke__crew">Team&nbsp;Dogi</span>
    </p>
    <h1 class="titel">Team&nbsp;Dogi</h1>
    <p class="unterzeile">Privater Bereich für DogFather und die Modis.</p>
  </header>

  <!-- HIER STANDEN DIE ROLLENKACHELN.

       Auf dieser Adresse gibt es nur eine Sorte Zugang, also gibt es
       nichts zu waehlen. Eine Kachelreihe mit genau einem Eintrag ist
       keine Auswahl, sondern eine Bedienhuerde: Man muesste erst
       daraufdruecken, bevor das Codefeld etwas annimmt.

       gate.js kommt damit zurecht -- es prueft, OB es Kacheln gibt,
       statt sie vorauszusetzen. Beide Wege sind in
       pruef-crew-adresse.mjs gemessen, weil sonst die naechste
       Aenderung an gate.js nur eine der zwei Seiten trifft. -->

  <form class="formular" id="formular" novalidate>
    <label class="feldschild" for="code">
      Persönlicher Zugangscode <span class="fuer" id="fuer" hidden></span>
    </label>

    <div class="feld">
      <input type="password" id="code" name="code" inputmode="text"
             autocomplete="current-password" spellcheck="false"
             placeholder="Code eingeben" aria-describedby="hinweis fehler" />
      <button type="button" class="feld__auge" id="auge"
              aria-label="Code anzeigen" aria-pressed="false">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path class="strich" d="M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12Z"/>
          <circle class="strich" cx="12" cy="12" r="2.9"/>
          <path class="strich durch" d="m4 20 16-16"/>
        </svg>
      </button>
    </div>

    <p class="hinweis" id="hinweis" hidden>Feststelltaste ist aktiv.</p>
    <p class="fehler" id="fehler" role="alert" aria-live="polite"></p>

    <button type="submit" class="knopf" id="knopf">
      <span class="knopf__text">Anmelden</span>
      <span class="knopf__laden" aria-hidden="true"></span>
    </button>
  </form>

  <p class="fuss">
    Verschlüsselte Verbindung · Zugriffe werden protokolliert
  </p>
</main>
</div>

<script src="assets/js/gate.js?v=202609101351" defer></script>
</body>
</html>