dogfather-universe/workspace/material.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>Dogi-Media · Team Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<!-- app.webmanifest, NICHT crew.webmanifest -- die Adresse biegt es um.
     Der Server ersetzt den Pfad auf crew. an EINER Stelle
     (crew-adresse.js). Wer hier das Crew-Manifest direkt nennt,
     macht daraus eine zweite Stelle, die beim naechsten Umbau
     vergessen wird. -->
<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=202609240032" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609240032" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609240032" />
<link rel="stylesheet" href="assets/css/start.css?v=202609240032" />
<link rel="stylesheet" href="assets/css/material.css?v=202609240032" />
<link rel="stylesheet" href="assets/css/module.css?v=202609240032" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609240032" />
</head>
<body class="start" data-ton="42" data-buehne="studio">

<div class="schleier" aria-hidden="true"></div>

<header class="kopfleiste">
  <button type="button" class="zurueck-knopf" id="zurueck" hidden>
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg>
    <span class="zurueck-knopf__text">Übersicht</span>
  </button>
  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Team&nbsp;Dogi</a> · Dogi-Media</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" id="haupt" aria-busy="true">

  <section class="kopf-zeile">
    <div>
      <p class="marke" id="ober">Community</p>
      <h1 class="titel">Dogi-Media</h1>
      <p class="unterzeile">
        Bilder und Videos zum Posten. <strong>Jedes nur einmal</strong> — wer es
        nimmt, hat es; danach ist es für alle anderen weg.
      </p>
    </div>
  </section>

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

  <!-- EINSTELLEN — nur für das Team. Der Kasten steht gar nicht erst
       da, wenn jemand nicht darf: Ein Formular, das beim Absenden eine
       Absage bringt, ist schlimmer als keines. -->
  <section class="m-neu" id="neu-block" hidden>
    <h2 class="m-neu__titel">Etwas bereitstellen</h2>
    <p class="m-neu__satz">
      Bild oder Video aussuchen, kurz dazuschreiben, wofür es gut ist.
      Sobald jemand es nimmt, verschwindet es aus der Liste.
    </p>
    <div class="m-neu__zeile">
      <label class="feld-schild" for="m-datei">Bild oder Video</label>
      <input type="file" id="m-datei" accept="image/*,video/*" />
    </div>
    <div class="m-neu__zeile">
      <label class="feld-schild" for="m-text">Wofür ist es? (freiwillig)</label>
      <textarea id="m-text" rows="2"
        placeholder="z. B. „Für TikTok, passt zum Stream von gestern“"></textarea>
    </div>
    <!-- VON WANN BIS WANN (22.09.2026). Filipe: "welche laufen von
         wan bis wann, das muss man auch machen koennen."
         BEIDES FREIWILLIG: Der haeufigste Fall ist "gilt einfach".
         Ein Pflichtfeld erzwaenge ein erfundenes Datum, und ein
         erfundenes Datum ist schlechter als keins.

         STEHT AUSSERHALB VON .m-neu__knoepfe -- das ist eine
         Flex-Reihe fuer Knopf und Stand. Zwei Datumsfelder und ein
         Hinweissatz darin waeren vier Flex-Kinder nebeneinander und
         auf dem Handy eine Treppe. -->
    <div class="m-neu__zeile m-neu__fenster">
      <div class="m-neu__fenster-feld">
        <label class="feld-schild" for="m-ab">Gilt ab (freiwillig)</label>
        <input type="date" id="m-ab" />
      </div>
      <div class="m-neu__fenster-feld">
        <label class="feld-schild" for="m-bis">Gilt bis (freiwillig)</label>
        <input type="date" id="m-bis" />
      </div>
    </div>
    <p class="feld-hinweis m-neu__fenster-satz">
      Ohne Datum gilt es einfach — bis es jemand nimmt.
    </p>

    <div class="m-neu__knoepfe">
      <button type="button" class="knopf knopf--klein" id="m-hoch">Bereitstellen</button>
      <span class="m-neu__stand" id="m-stand" aria-live="polite"></span>
    </div>
    <!-- Hierhin zeichnet der gemeinsame Hochlader seinen Balken. -->
    <div id="m-fortschritt" hidden></div>
  </section>

  <!-- DIE FREIEN ZUERST. Wer hierherkommt, will etwas holen; was schon
       weg ist, interessiert danach. -->
  <section class="m-liste-block">
    <div class="m-kopf">
      <h2 class="m-kopf__titel" id="frei-titel">Zum Mitnehmen</h2>
      <p class="m-kopf__satz" id="frei-satz"></p>
      <!-- KATEGORIEN (22.09.2026). Filipe: "mach kategorien welche sind
           benutzt welche nicht welche sind noch offen, welche laufen
           von wan bis wann."
           Die Knoepfe werden im Skript gebaut, damit die Zahl daneben
           aus den echten Daten kommt und nicht aus dem HTML -- eine
           Zahl im Markup waere die, die beim naechsten Stueck falsch
           dasteht.

           DIE LEISTE IST DIE DES HAUSES (.filter mit .schritt), nicht
           eine eigene. Auf dateien.html und bereich.html steht dieselbe
           Reihe; eine dritte Bauart haette dasselbe anders ausgesehen
           und beim naechsten Umbau nur an zwei von drei Stellen
           mitgeaendert. -->
      <div class="filter" id="m-kat" role="group" aria-label="Kategorie"></div>
    </div>
    <div class="m-raster" id="frei" aria-busy="true"></div>
  </section>

  <section class="m-liste-block" id="weg-block" hidden>
    <div class="m-kopf">
      <h2 class="m-kopf__titel">Schon benutzt</h2>
      <p class="m-kopf__satz" id="weg-satz">
        Damit nichts zweimal gepostet wird.
      </p>
    </div>
    <div class="m-raster m-raster--weg" id="weg"></div>
  </section>

  <p class="m-laedt" id="laedt">Einen Moment …</p>
</main>

<script src="assets/js/meldung.js?v=202609240032" defer></script>
<script src="assets/js/nachfrage.js?v=202609240032" defer></script>
<script src="assets/js/hochladen.js?v=202609240032" defer></script>
<script src="assets/js/wahl.js?v=202609240032" defer></script>
<script src="assets/js/bereiche.js?v=202609240032" defer></script>
<script src="assets/js/installieren.js?v=202609240032" defer></script>
<script src="assets/js/kopf.js?v=202609240032" defer></script>
<script src="assets/js/glocke.js?v=202609240032" defer></script>
<script src="assets/js/material.js?v=202609240032" defer></script>
</body>
</html>