Files
dogfather-universe/workspace/wissen.html
T
DogFatherGitandClaude Opus 5 ad5e758721 922 px auf einem 844-px-Bildschirm -- die halbe Antwort war zu wenig
VanVan im Support, Meldung #15: „Die Modis koennen die Antworten auf
die Bewerbungen im Bereich eure Aufgaben noch nicht einklappen. Das
wird mit der Zeit unuebersichtlich."

Heute Nacht habe ich dazu „Verstanden" gebaut: Gelesenes rutscht
hinter eine zugeklappte Zeile. Das ist richtig und war trotzdem nur
die halbe Antwort -- denn UNGELESENE stehen absichtlich offen da,
und davon hat ein Modi im Haus gerade neun.

GEMESSEN STATT GESCHAETZT, an seinem echten Bestand nachgebaut, auf
dem Handy (390 x 844 px):

    Band:            922 px   -- hoeher als das ganze Fenster
    Anteil der Seite: 49 %

Das IST ihr Satz. Mein Umbau loeste es erst NACH einem Griff auf
„Alle verstanden"; bis dahin stand die Wand unveraendert da.

GEAENDERT: Hoechstens drei stehen offen, der Rest ist einen Griff
entfernt („und 6 weitere"). Danach:

    Band:            566 px   -- passt in den Bildschirm
    nach einem Griff: 46 px   (zugeklappte Zeile)

WARUM NICHT NULL: Eine Absage, die man aufklappen muss, ist keine
Nachricht mehr -- das war die Begruendung vom 30.09., und sie gilt.
WARUM NICHT ALLE: siehe oben. Drei ist die Zahl, bei der Kopf,
Zeilen und Sammelknopf unter einem Bildschirm bleiben.

DIE NEUESTEN ZUERST -- der Server sortiert nach `entschieden_am
DESC`. Wer nicht aufklappt, hat die juengsten gesehen.

GEPRUEFT -- pruef-bewerbung-aufgaben 178 -> 184 ok

    mit fuenf Ungelesenen stehen drei offen (3)
      und der Rest ist einen Griff entfernt („und 3 weitere")
      das Band passt in den Bildschirm (436 px bei 1000 px)
    aufgeklappt stehen alle da (6, „Weniger zeigen")
    und wieder zu — der Knopf geht in beide Richtungen
    und die Probezeilen sind wieder weg — der Stand ist wie vorher

Die dritte Zeile ist die eigentliche Aussage: „drei Zeilen" waere
eine Zahl, „passt in den Bildschirm" ist der Zweck. Die letzte raeumt
die vier Probezeilen wieder weg -- ohne sie zaehlten die Pruefungen
darunter („1 aeltere Antwort", „2 aeltere Antworten") sechs statt
zwei und wuerden rot, ohne dass etwas kaputt ist.

Der Knopf geht in BEIDE Richtungen, und auch das steht da: Sonst
waere er ein Einwegschalter, und das faellt erst auf, wenn jemand
zurueckklappen will.

AUSSERDEM AN CASPERLINOS ECHTEN NEUN GEMESSEN (Kopie der Datenbank,
eigener Port, nichts im Live-System): neun Antworten, alle
ungelesen; „Verstanden" nimmt genau eine; „Alle verstanden" den
Rest; nachlesbar bleiben alle neun; ein zweiter Druck zaehlt null;
eine fremde Nummer gibt 404.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-10-03 11:45:03 +02:00

205 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Wissens-Bibliothek · Spicy & Dogi</title>
<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" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610031142" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610031142" />
<link rel="stylesheet" href="assets/css/gate.css?v=202610031142" />
<link rel="stylesheet" href="assets/css/start.css?v=202610031142" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202610031142" />
<link rel="stylesheet" href="assets/css/wissen.css?v=202610031142" />
<link rel="stylesheet" href="assets/css/module.css?v=202610031142" />
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
genau diesen Dateinamen auf crew-haus.css um, und die Seite
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
ohne Umfaerben im Browser, ohne Flackern. -->
<link rel="stylesheet" href="assets/css/haus.css?v=202610031142" />
</head>
<body class="start">
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
Pseudo-Elements -- body hat nur ::before und ::after. -->
<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> · Wissen</span></p>
<div class="kopfleiste__rechts">
<span class="wer" id="wer">…</span>
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
</div>
</header>
<!-- Symbolvorrat. Einmal im Dokument, überall per <use> verwendbar -->
<svg style="display:none" aria-hidden="true">
<defs>
<g id="s-tiktok"><path d="M14 4v9.2a3.3 3.3 0 1 1-2.6-3.2"/><path d="M14 4c.4 2.2 2 3.7 4.4 3.9"/></g>
<g id="s-schild"><path d="M12 3.6 5.6 6.2v5c0 3.6 2.5 6.9 6.4 8.2 3.9-1.3 6.4-4.6 6.4-8.2v-5z"/><path d="m9.4 11.8 1.9 1.9 3.4-3.6"/></g>
<g id="s-pokal"><path d="M8 4h8v4.5a4 4 0 0 1-8 0z"/><path d="M8 5.5H5.6v1.2A2.6 2.6 0 0 0 8.2 9.3"/><path d="M16 5.5h2.4v1.2a2.6 2.6 0 0 1-2.6 2.6"/><path d="M12 12.6V16"/><path d="M8.8 19.4h6.4l-.8-3.4H9.6z"/></g>
<g id="s-glocke"><path d="M6.6 17.2c1-.9 1.4-2 1.4-3.4v-2.5a4 4 0 0 1 8 0v2.5c0 1.4.4 2.5 1.4 3.4z"/><path d="M10.2 20a2 2 0 0 0 3.6 0"/></g>
<g id="s-monitor"><rect x="3.4" y="5" width="17.2" height="11.4" rx="1.6"/><path d="M9 20h6M12 16.6V20"/></g>
<g id="s-ebenen"><path d="m12 3.6 8 4-8 4-8-4z"/><path d="m4.6 12 7.4 3.7 7.4-3.7"/><path d="m4.6 16.2 7.4 3.7 7.4-3.7"/></g>
<g id="s-handy"><rect x="7" y="2.8" width="10" height="18.4" rx="2.2"/><path d="M10.6 5.6h2.8"/><path d="M11.2 18.4h1.6"/></g>
<g id="s-kamera"><rect x="3" y="6.6" width="13.4" height="10.8" rx="2"/><path d="m16.4 12 4.6-3v6z"/></g>
<g id="s-licht"><circle cx="12" cy="10.6" r="4.2"/><path d="M12 2.6v1.8M12 16.8v1.6M4.2 10.6H2.6M21.4 10.6h-1.6M6.5 5.1 5.3 3.9M18.7 3.9l-1.2 1.2M6.5 16.1l-1.2 1.2M18.7 17.3l-1.2-1.2"/><path d="M10.2 20.8h3.6"/></g>
<g id="s-mikrofon"><rect x="9.4" y="2.8" width="5.2" height="10.4" rx="2.6"/><path d="M6 11.4a6 6 0 0 0 12 0"/><path d="M12 17.4V21M9.4 21h5.2"/></g>
<g id="s-regler"><path d="M6.5 3.6v6.2M6.5 14.2v6.2M12 3.6v10.6M12 18.6v1.8M17.5 3.6v2.2M17.5 10.2v10.2"/><circle cx="6.5" cy="12" r="2.2"/><circle cx="12" cy="16.4" r="2.2"/><circle cx="17.5" cy="8" r="2.2"/></g>
<g id="s-stecker"><path d="M9 2.8v5.4M15 2.8v5.4"/><path d="M6.4 8.2h11.2v3a5.6 5.6 0 0 1-11.2 0z"/><path d="M12 16.8V21"/></g>
<g id="s-wlan"><path d="M3.2 8.6a13 13 0 0 1 17.6 0"/><path d="M6.4 12.2a8.4 8.4 0 0 1 11.2 0"/><path d="M9.5 15.7a4 4 0 0 1 5 0"/><circle cx="12" cy="19.2" r="1.1" fill="currentColor" stroke="none"/></g>
<g id="s-rahmen"><rect x="3.2" y="4.6" width="17.6" height="14.8" rx="2"/><path d="M3.2 9.2h17.6"/><path d="M8 9.2v10.2"/></g>
<g id="s-zahnrad"><circle cx="12" cy="12" r="3.2"/><path d="M12 2.8v2.6M12 18.6v2.6M21.2 12h-2.6M5.4 12H2.8M18.5 5.5l-1.9 1.9M7.4 16.6l-1.9 1.9M18.5 18.5l-1.9-1.9M7.4 7.4 5.5 5.5"/></g>
<g id="s-kalender"><rect x="3.6" y="5" width="16.8" height="15" rx="2"/><path d="M3.6 9.8h16.8M8.4 2.8v4M15.6 2.8v4"/><path d="M8 13.6h3M8 16.8h8"/></g>
<g id="s-menschen"><circle cx="9" cy="8.4" r="3.2"/><path d="M3.4 19.4c0-3.1 2.5-5.6 5.6-5.6s5.6 2.5 5.6 5.6"/><path d="M16.2 6.2a3 3 0 0 1 0 5.8"/><path d="M17 14.2c2.1.6 3.6 2.5 3.6 5.2"/></g>
<g id="s-wachstum"><path d="M3.6 18.6 9 12l3.6 3.2 7.2-8"/><path d="M15.4 6.6h4.8v4.8"/></g>
<g id="s-werkzeug"><path d="M15.4 7.4a3.8 3.8 0 0 1 5-5l-2.7 2.7.6 2.4 2.4.6 2.7-2.7"/><path d="M15.4 7.4 4.2 18.6a2 2 0 0 0 2.8 2.8L18.2 10.2"/></g>
<g id="s-haken"><rect x="4" y="3.4" width="16" height="17.2" rx="2.2"/><path d="m8.2 9.6 2 2 4-4.2"/><path d="m8.2 16 2 2 4-4.2"/></g>
</defs>
</svg>
<main class="inhalt inhalt--breit">
<section class="kopf-zeile">
<div>
<p class="marke">Anleitungen &amp; Checklisten</p>
<h1 class="titel" id="titel">Wissens-Bibliothek</h1>
<p class="unterzeile" id="unterzeile">Alles zu TikTok, Livestreaming, Technik und Content – an einer Stelle.</p>
</div>
<div class="steuerung">
<button type="button" class="knopf knopf--klein" id="neu-auf" hidden>PDF hinzufügen</button>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<!-- Suche und Filter: gelten immer, auch innerhalb einer Kategorie -->
<section class="suchleiste">
<div class="suchleiste__feld">
<svg class="suchleiste__lupe" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="11" cy="11" r="6.5"/><path d="M15.8 15.8 20 20"/>
</svg>
<input id="q" type="search" placeholder="Anleitung suchen – Titel, Beschreibung oder Tag" aria-label="Suchen" maxlength="80" />
</div>
<div class="suchleiste__filter">
<span class="feld-schild">Stufe</span>
<div class="filterreihe" id="f-stufe" role="radiogroup" aria-label="Stufe"></div>
<span class="feld-schild">Gerät</span>
<div class="filterreihe" id="f-geraet" role="radiogroup" aria-label="Gerät"></div>
<label class="feld-schild" for="f-tag">Tag</label>
<select id="f-tag"><option value="">Alle</option></select>
<button type="button" class="knopf-still" id="f-weg" hidden>Filter zurücksetzen</button>
</div>
</section>
<!-- Formular zum Anlegen und Ändern (nur DogFather) -->
<section class="neu" id="neu-block" hidden>
<h2 class="neu__titel" id="neu-titel">Neue Anleitung</h2>
<form id="neu-form">
<!-- Erst die Datei, dann die Angaben dazu: Man laedt etwas hoch und
beschreibt DANN, was es ist -- nicht umgekehrt. -->
<div class="feld feld--breit" id="n-datei-block">
<label class="feld-schild">PDF-Datei</label>
<div class="pdf-ablage" id="n-ablage" tabindex="0" role="button"
aria-label="PDF auswählen oder hierher ziehen">
<svg class="pdf-ablage__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5" />
<path d="M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15" />
</svg>
<p class="pdf-ablage__text" id="n-dateiname">PDF hierher ziehen oder <strong>auswählen</strong></p>
<p class="pdf-ablage__klein">Höchstens 40 MB · nur echte PDF-Dateien</p>
<input type="file" id="n-datei" accept="application/pdf,.pdf" hidden />
</div>
</div>
<div class="neu__raster">
<div class="feld feld--breit">
<label class="feld-schild" for="n-titel">Titel</label>
<input id="n-titel" maxlength="140" required placeholder="z. B. OBS für TikTok LIVE einrichten" />
</div>
<div class="feld feld--breit">
<label class="feld-schild" for="n-beschreibung">Kurze Beschreibung</label>
<input id="n-beschreibung" maxlength="400" placeholder="In einem Satz: Was lernt man hier?" />
</div>
<div class="feld feld--breit">
<span class="feld-schild">Hauptkategorie</span>
<!-- Kein Auswahlmenü: Zwanzig Einträge in einem aufgeklappten
Systemmenü sind unlesbar, und gestalten lässt es sich nicht
(weisses Windows-Menü in dunkler Oberfläche). Hier stehen
dieselben sechs Welten wie auf der Seite. -->
<div class="katwahl" id="n-kategorie" role="radiogroup" aria-label="Hauptkategorie"></div>
<p class="leise" id="n-kat-hinweis">Noch keine Kategorie gewählt.</p>
</div>
<div class="feld">
<label class="feld-schild" for="n-stufe">Stufe</label>
<select id="n-stufe"></select>
</div>
<div class="feld">
<label class="feld-schild" for="n-geraet">Gerät</label>
<select id="n-geraet"></select>
</div>
<div class="feld">
<label class="feld-schild" for="n-datum">Veröffentlicht am</label>
<input id="n-datum" type="date" />
</div>
<div class="feld feld--breit">
<label class="feld-schild" for="n-tags">Tags <span class="leise">(höchstens 8)</span></label>
<input id="n-tags" maxlength="200" placeholder="tiktok, obs, pc" />
<div class="tag-vorschlag" id="n-vorschlaege"></div>
</div>
</div>
<!-- Steht abgesetzt: Es ist keine Angabe zur PDF, sondern eine
Entscheidung darüber, wo sie erscheint. -->
<label class="schalter">
<input type="checkbox" id="n-wichtig" />
<span class="schalter__gleis"><span class="schalter__punkt"></span></span>
<span class="schalter__text">
<strong>Besonders wichtig</strong>
<span class="leise">Erscheint zusätzlich ganz oben unter „Neu &amp; wichtig“.</span>
</span>
</label>
<p class="fehler" id="n-fehler" role="alert" aria-live="polite"></p>
<div class="neu__knoepfe">
<button type="submit" class="knopf knopf--klein" id="n-speichern">Veröffentlichen</button>
<button type="button" class="knopf-still" id="neu-zu">Abbrechen</button>
<span class="leise" id="n-stand"></span>
</div>
</form>
</section>
<div id="inhalt" aria-busy="true"><p class="leise">Bibliothek wird geladen …</p></div>
</main>
<script src="assets/js/meldung.js?v=202610031142" defer></script>
<script src="assets/js/hochladen.js?v=202610031142" defer></script>
<script src="assets/js/nachfrage.js?v=202610031142" defer></script>
<script src="assets/js/wahl.js?v=202610031142" defer></script>
<script src="assets/js/bereiche.js?v=202610031142" defer></script>
<script src="assets/js/installieren.js?v=202610031142" defer></script>
<script src="assets/js/kopf.js?v=202610031142" defer></script>
<script src="assets/js/glocke.js?v=202610031142" defer></script>
<script src="assets/js/wissen.js?v=202610031142" defer></script>
</body>
</html>