dogfather-universe/workspace/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>Dogfather Universe · Creator Workspace · Anmeldung</title>
<meta name="description" content="Privater Arbeitsbereich für Creator, Scouts und DogFather." />
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#0674b9" />

<!-- 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/gate-1920.webp"
      type="image/webp" media="(min-width: 900px)" />
<link rel="preload" as="image" href="assets/img/buehne/gate-hoch-580.webp"
      type="image/webp" media="(max-width: 899px)" />

<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=202609070729" />
</head>

<body class="gate">

<!-- ---------- 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/gate-960.webp 960w,
                    assets/img/buehne/gate-1280.webp 1280w,
                    assets/img/buehne/gate-1600.webp 1600w,
                    assets/img/buehne/gate-1920.webp 1920w,
                    assets/img/buehne/gate-2560.webp 2560w" sizes="100vw" />
    <source type="image/webp"
            srcset="assets/img/buehne/gate-hoch-440.webp 440w,
                    assets/img/buehne/gate-hoch-580.webp 580w,
                    assets/img/buehne/gate-hoch-900.webp 900w" sizes="100vw" />
    <img class="buehne__bild" src="assets/img/buehne/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>

  <!-- 07.09.2026, Wunsch Filipe: "dogfather universe auch ersetzen durch
       SpicyMedia x DogFather" und der Satz darunter soll "nur um manager
       scouts und creator von spicy media" gehen, ohne DogFather.

       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 "SpicyMedia x DogFather", und
       genau so spricht man es auch aus. -->
  <header class="kopf">
    <p class="marke marke--paar">
      <span class="marke__spicy">SpicyMedia</span>
      <span class="marke__x">×</span>
      <span class="marke__dogi">DogFather</span>
    </p>
    <h1 class="titel">Creator&nbsp;Workspace</h1>
    <p class="unterzeile">Privater Bereich für die Manager, Scouts und Creator von Spicy&nbsp;Media.</p>
  </header>

  <div class="rollen" role="radiogroup" aria-labelledby="rollen-schild">
    <p class="feldschild" id="rollen-schild">Womit meldest du dich an?</p>

    <!-- SPICY MEDIA steht ganz oben (07.09.2026, Wunsch Filipe: "ueber
         dogfather auch eine kategorie, eine neue rolle"). Der Chili ist
         das Zeichen der Marke -- dieselbe Form wie im Logo, nur als
         Umriss, damit sie neben Krone, Stern und Schild dieselbe
         Strichstaerke hat. -->
    <button type="button" class="rolle" data-rolle="spicy" role="radio" aria-checked="false">
      <svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/>
        <path d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/>
      </svg>
      <span class="rolle__text">
        <span class="rolle__name">Spicy Media</span>
        <span class="rolle__zusatz">Überblick über alle</span>
      </span>
    </button>

    <!-- Krone für DogFather: steht für die Gesamtübersicht und die
         Freigaben. Das Schild ist zum Scout gewandert -- dort passt es
         besser, weil ein Scout die Pipeline abschirmt und prüft, bevor
         etwas weitergereicht wird. -->
    <button type="button" class="rolle" data-rolle="admin" role="radio" aria-checked="false">
      <svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3.8 7.6 7.6 11 12 4.9 16.4 11l3.8-3.4-1.6 9.3H5.4L3.8 7.6Z"/>
        <path d="M6 20.1h12"/>
      </svg>
      <span class="rolle__text">
        <span class="rolle__name">DogFather</span>
        <span class="rolle__zusatz">Gesamtübersicht &amp; Freigaben</span>
      </span>
    </button>

    <!-- Manager: dieselben Rechte wie DogFather, nur die Personen-
         verwaltung bleibt DogFather vorbehalten. Der Stern steht fuer
         den Rang darunter, ohne "unter" zu sagen. -->
    <button type="button" class="rolle" data-rolle="manager" role="radio" aria-checked="false">
      <svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
        <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"/>
      </svg>
      <span class="rolle__text">
        <span class="rolle__name">Manager</span>
        <span class="rolle__zusatz">Betreuung &amp; Freigaben</span>
      </span>
    </button>

    <button type="button" class="rolle" data-rolle="scout" role="radio" aria-checked="false">
      <svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2.6 4.5 5.8v5.6c0 4.6 3.2 8.4 7.5 9.9 4.3-1.5 7.5-5.3 7.5-9.9V5.8L12 2.6Z"/>
        <path d="m8.7 12.1 2.3 2.3 4.3-4.7"/>
      </svg>
      <span class="rolle__text">
        <span class="rolle__name">Scout</span>
        <span class="rolle__zusatz">Eigene Pipeline &amp; Kontakte</span>
      </span>
    </button>

    <button type="button" class="rolle" data-rolle="creator" role="radio" aria-checked="false">
      <svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 12.6a4.3 4.3 0 1 0 0-8.6 4.3 4.3 0 0 0 0 8.6Z"/>
        <path d="M4.4 20.2c.9-3.4 3.9-5.6 7.6-5.6s6.7 2.2 7.6 5.6"/>
      </svg>
      <span class="rolle__text">
        <span class="rolle__name">Creator</span>
        <span class="rolle__zusatz">Eigener Bereich &amp; Fortschritt</span>
      </span>
    </button>
  </div>

  <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=202609070729" defer></script>
</body>
</html>