Files
dogfather-universe/workspace/material.html
T
DogFatherGitandClaude Opus 5 ea4078740e Pipeline: die Stufenfarbe kommt endlich auf dem Bildschirm an
Filipe: "zuerst will ich dass du die kategorien und die kacheln viel
krasser geiler machst."

Beim Nachmessen stand fest, warum die Pipeline flach aussah: Drei
Regeln in scouting.css kamen gar nicht an, seit es den Baukasten
(module.css) gibt -- und module.css NENNT zwei davon im eigenen Text.

  --ton                  war an JEDER Karte #db4b66, dem Rot der Seite.
                         Daraus nimmt der Baukasten Kantenlicht, die
                         drei Eckwinkel und das Licht beim Zeigen. Sechs
                         Stufenfarben in der Datei, eine auf dem Schirm.
  .kk::before (3px)      gemessen 560px breit -- das ist das Kantenlicht
                         des Baukastens, das dasselbe Pseudoelement
                         belegt. Die farbige Pipeline-Kante gab es nicht.
  .kk { border } /:hover module.css setzt `border: 0`, gleich stark und
                         spaeter im Ladeweg.

Das Haus hatte die Lehre schon: aufgaben.css setzt `--ton` an fuenf
Spalten mit genau dieser Begruendung. Hierher uebertragen hat es nie
jemand.

WAS JETZT ANDERS IST
 * Jede Stufe traegt ihren Ton -- Eckwinkel, Kantenlicht und Hover
   laufen damit von kuehl (neu entdeckt) zu gruen (uebergeben).
 * Die Farbkante der Karte liegt im HINTERGRUND statt auf einem
   Pseudoelement (beide gehoeren dem Baukasten). 6px, weil das
   Kantenlicht 1,6px davon verdeckt -- bei 3px blieb nichts Sichtbares.
 * Etappennummern 01-05, abgeleitet aus WEITER statt daneben
   geschrieben. "Abgelehnt" bekommt keine: keine Etappe nach vorn.
 * Stufentitel in der eigenen Farbe (vorher einheitlich --akzent),
   mit Weiss aufgehellt -- 4,3:1 waeren bei fett-versal 12,5px zu wenig.
 * Faellig-Saum als inset-Schatten wie bei .kachel[data-warn], mit
   (0,3,0) gegen die Modulliste; vorher border-color und damit wirkungslos.
 * Karte: Plattform als Schild, Handle in gleichbreiter Schrift,
   Haarlinie zwischen "wer" und "lohnt sich", Reichweite deutlicher.

DAS MESSGERAET, DAS GEFEHLT HAT: module.css notiert "NICHT
MITREPARIERT, weil es kein Messgeraet dafuer gibt ... Hover laesst sich
nicht pruefen." Doch -- pruef-scouting-felder faehrt den Zeiger jetzt
auf die Karte und liest nach (6px -> 9px).

DREI FUNDE IN DEN EIGENEN WERKZEUGEN, alle von Hauswachen oder der
eigenen Messung:
 * bild-arten hatte keine Notbremse; page.hover() blieb haengen und
   liess beim Abbrechen einen Server auf Port 4336 zurueck. Jetzt
   notbremse(240s) und mouse.move statt hover().
 * color-mix(in srgb, var(--rand)) -- mit EINER Farbe ungueltig; der
   ganze Verlauf fiel aus, uebrig blieb Abstand ohne Linie.
 * Im Pruefausdruck steckte ein Backspace-Byte (0x08), das die
   Kommandozeile aus einer Zeichenfolge gemacht hatte. Sah im
   Quelltext richtig aus, traf nie. Jetzt startsWith.

pruef-scouting-felder: 64 -> 72 Pruefungen, gruen. Gegenprobe gefahren
(einer Stufe den Ton genommen -> rot, mit #db4b66 als Beleg). Statt des
226-Sekunden-Hauslaufs pruef-handy misst die Datei jetzt selbst auf
320px: 97 Teile, keines ueber dem Rand, kein seitliches Schieben.
Dazu gruen: css-klassen, lesbarkeit, tippziele, fingermass,
haus-trennung, leerzustand, deutsche-texte, zeichen (der eine Rest dort
ist bereich.css und aelter).

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-10-07 00:04:49 +02:00

152 lines
6.6 KiB
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=202610070004" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610070004" />
<link rel="stylesheet" href="assets/css/gate.css?v=202610070004" />
<link rel="stylesheet" href="assets/css/start.css?v=202610070004" />
<link rel="stylesheet" href="assets/css/material.css?v=202610070004" />
<link rel="stylesheet" href="assets/css/module.css?v=202610070004" />
<link rel="stylesheet" href="assets/css/haus.css?v=202610070004" />
</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=202610070004" defer></script>
<script src="assets/js/nachfrage.js?v=202610070004" defer></script>
<script src="assets/js/hochladen.js?v=202610070004" defer></script>
<script src="assets/js/wahl.js?v=202610070004" defer></script>
<script src="assets/js/bereiche.js?v=202610070004" defer></script>
<script src="assets/js/installieren.js?v=202610070004" defer></script>
<script src="assets/js/kopf.js?v=202610070004" defer></script>
<script src="assets/js/glocke.js?v=202610070004" defer></script>
<script src="assets/js/material.js?v=202610070004" defer></script>
</body>
</html>