DogFatherGitandClaude Opus 5
9f277435a5
Filipe: "soll viel besser und geiler sein und man soll auch auswaehlen
koennen, also paar als vorschlaege mit der moeglichkeit andere
auszuwaehlen und als favoriten zu speichern."
Aus einem Streifen mit sechs Zeichen ist eine Karte geworden:
Vorschlaege oben, Suchfeld, darunter der Katalog in sechs Gruppen --
82 Zeichen, jedes mit deutschen Suchwoertern. Wer "feuer" tippt, muss
nicht scrollen.
DREI LISTEN, DREI FRAGEN, und sie werden gern verwechselt:
KATALOG Was gibt es? fest, workspace-reaktionen.js
VORSCHLAG Was steht vorn, solange fest -- bis jemand eigene
ich nichts gewaehlt habe? Favoriten hat
FAVORITEN Was hat DIESER Mensch in der Datenbank
sich gemerkt?
Nur der Katalog entscheidet, was ANGENOMMEN wird. Vorschlag und
Favoriten sind Reihenfolge, keine Erlaubnis -- sonst koennte man sich
ueber einen Favoriten etwas erlauben, das im Katalog nicht steht. Die
erlaubte Menge wird aus dem Katalog ABGELEITET; eine zweite Liste
daneben waere die, in der ein Zeichen fehlt, das die Oberflaeche
anbietet.
FAVORITEN HAENGEN AM MENSCHEN, NICHT AM GERAET. Im Browser abgelegt
waeren sie am Handy andere als am Rechner und beim naechsten Loeschen
der Seitendaten weg.
DER STERN SCHALTET EINEN MODUS, statt an jedem Zeichen einen zweiten
Knopf zu haben: Am Handy gibt es kein "daneben zeigen". Im Merk-Modus
faerbt sich die ganze Tafel, damit niemand reagiert, wenn er merken
wollte. Die Tafel bleibt dabei offen -- acht Favoriten waeren sonst
acht Mal Aufmachen -- und die Vorschlagszeile aendert sich sofort mit.
DIE GRENZE SAGT BESCHEID, statt still den aeltesten wegzuwerfen: Wer
einen neunten merken will, bekommt "nimm erst einen weg". Ein Favorit,
der ohne Ansage verschwindet, sieht wie ein Fehler aus.
Eine Selbstpruefung beim Laden meldet doppelte Zeichen im Katalog und
Vorschlaege, die nicht darin stehen -- beides waere in der Tafel still.
pruef-chat-aufloesen 85 -> 115. Gemessen wird, was PASSIERT, nicht dass
es Elemente gibt: dass die Suche wirklich eingrenzt (1 statt 82) und
das Richtige findet, dass ein Fehlgriff "Nichts zu ... gefunden" sagt
statt eine leere Flaeche zu zeigen, und vor allem, dass im Merk-Modus
KEINE Reaktion entsteht -- an der Zahl der Reaktionen gemessen, nicht
an der Absicht.
NEBENBEFUND AUS DER EIGENEN PRUEFUNG: pruef-css-klassen hat meine
Gruppenueberschrift mit 10,56 px abgelehnt (Grenze 11,5). Richtig so --
eine gesperrte Versalzeile ist ohnehin schwerer zu lesen, die darf
nicht auch noch die kleinste sein. Auf .72rem angehoben, statt die
Grundlinie zu verschieben.
Co-Authored-By: Claude Opus 5 <[email protected]>
200 lines
11 KiB
HTML
200 lines
11 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>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=202609141404" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609141404" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609141404" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609141404" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609141404" />
|
||
<link rel="stylesheet" href="assets/css/wissen.css?v=202609141404" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609141404" />
|
||
<!-- 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=202609141404" />
|
||
</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 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 & 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 & 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/wahl.js?v=202609141404" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609141404" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609141404" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609141404" defer></script>
|
||
<script src="assets/js/wissen.js?v=202609141404" defer></script>
|
||
</body>
|
||
</html>
|