DogFatherGitandClaude Opus 5
807d7d4a1c
Filipe: „diese kachel soll nicht mehr geschlossen sein, ABER wenn man
drauf drückt geht zuerst eine seite auf mit reihen/kategorien. links
eine reihe wo die nächsten geplanten videos schon bereit stehen. wan
und umd wie viel uhr … und das soll geschlossen sein außer für vanvan
und dogfather. in der mitte sollen die leute dan wenn eine sendung
läuft drauf drücken können und der sendung beitreten. auch bei der
vorschau schon und dan rechts will ich die letzte reihe/kategorie, da
sollen die leute alle mir videos anraten können … und nur ich und
vanvan sehen sie."
Haus: Team Dogi (crew.dogfather-universe.com). Die Agentur ist nicht
berührt -- pruef-haus-trennung 107/0, pruef-workspace-seiten 37/0.
WARUM EINE EIGENE SEITE UND KEIN VIERTER ZUSTAND DES SAALS
Der Saal meldet jeden an, der ihn öffnet („dabei"), baut Verbindungen
auf und hält den Ereignisstrom offen. Das ist richtig für jemanden,
der zusieht -- und falsch für jemanden, der nur nachsehen will, ob
heute Abend etwas läuft. Wäre das Foyer der vierte Zustand derselben
Seite, zählte jeder Blick als Zuschauer, und die Zahl im Regiepult
sähe nach Publikum aus, wo niemand zusieht.
Im Foyer wird nur gelesen: Stand holen, zeichnen, alle 20 Sekunden
nachfragen -- und nicht, solange der Reiter im Hintergrund liegt. Kein
Ereignisstrom: Der hielte eine Verbindung offen, und manche Browser
geben je Adresse nur sechs her; im Saal wird jede davon gebraucht.
DREI REIHEN
LINKS die Warteschlange, nach TERMIN sortiert statt nach Platz.
Was keinen hat, steht unten; was vorbei ist, bekommt
„· überfällig". Nur admin und rechte Hand -- und für alle
anderen steht sie gar nicht erst da, statt leer oder
gesperrt zu sein. Ein Kasten mit Schloss erzählt, dass es
etwas zu sehen gäbe. Entschieden wird das am Server; die
Seite fragt nicht nach der Rolle, sondern danach, ob die
Auskunft gekommen ist.
MITTE Lampe (Geschlossen / Gleich / Auf Sendung), Vorschaubild,
Titel, Satz -- und der Knopf, der NUR dasteht, wenn er auch
hineinführt. Er ist ein Link und kein Button: Wer ihn mit
der mittleren Maustaste antippt, bekommt einen neuen Reiter.
RECHTS Video anraten. Jeder darf schicken, niemand sieht fremde,
jeder sieht seine eigenen mit Stand. Vier Sperren, und jede
beantwortet etwas anderes: zu schnell (45 s), zu viele offen
(5 je Person), schon angeraten, steht schon bereit.
Am Telefon steht die MITTE oben. Dort ist „links" nur noch „vor allem
anderen", und das wäre die falsche Reihenfolge.
WAS SONST NOCH DAZUGEHÖRT
* Jede Zeile der Warteschlange im Saal hat jetzt ein Terminfeld.
* Die Kachel sagt nicht mehr „geschlossen" -- das Foyer ist immer
offen. „gleich" und „● live" bleiben: Sie sagen etwas, das man ohne
sie nicht weiß.
* reaktion.html steht in OHNE_KACHEL_UEBERALL. Die erlaubten Seiten
werden aus den Kachelzielen abgeleitet; als die Kachel aufs Foyer
zeigte, war der Saal plötzlich von keiner mehr genannt und
antwortete mit einer Umleitung.
DREI DOPPELTE ANTWORTEN BESEITIGT
* „Wie viele Vorschläge darf einer offen haben" stand VIERMAL:
dreimal als `je_person_max || 5` und einmal als Wort „fünf" im Satz
(plus ein fünftes Mal in meldung.js). Kommt jetzt vom Server.
* `maxlength="200"` im Formular neben VORSCHLAG_NOTIZ_MAX im Server.
Das Feld lernt die Grenze von der Auskunft.
* Die drei Foyer-Tafeln hatten eine eigene Fläche (Weiß mit 4,5 %) und
eine eigene Form. Beides gibt es im Haus längst: Material in
start.css (45 Klassen, gemessen), Form in module.css. Die eigene
Fläche war dazu fast durchsichtig -- über einem hellen
Hintergrundbild stand der Text ohne deckenden Grund. Gefunden hat
das nicht eine Prüfung, sondern das Bildschirmfoto.
EINE LÜCKE IN DER PRÜFUNG GESCHLOSSEN
In module.css steht dieselbe 48er-Klassenliste ACHTMAL. Sieben trugen
die Marke MODULLISTE und wurden verglichen; die achte -- die Umrandung
beim Tabben (:focus-visible) -- nicht. Sie war damit die Einzige, die
still hätte abweichen können, ausgerechnet bei der Regel, die nur
sieht, wer mit der Tastatur bedient. pruef-css-klassen erwartet jetzt
acht. Eine steigende Prüfzahl, und sie ist begründet.
UND EINER, DEN KEIN WERKZEUG FINDEN KANN
Der Satz oben lautete „Links steht, was ansteht; rechts kannst du
etwas anraten." Für die Community gibt es „links" gar nicht, und am
Telefon stehen die Reihen untereinander. Eine Richtung im Text ist
eine Aussage über das Aussehen -- und das ändert sich mit dem
Bildschirm und mit der Rolle. Jetzt steht dort, WAS geht, nicht WO.
GEMESSEN
mess-foyer (neu) 70 Messungen, 0 Fehler, 9 Bildschirmfotos
pruef-reaktion 538, 0 Fehler (vorher 478)
pruef-handy-teamdogi 263 Seitenaufrufe, 0 Befunde (vorher 244)
pruef-sackgassen 14, 0 Fehler
pruef-crew-adresse 173, 0 Fehler
pruef-haus-trennung 107, 0 Fehler
pruef-struktur 102, 0 Fehler
pruef-neue-seiten 109, 0 Fehler
pruef-portnummern 41, 0 Fehler
pruef-haus-seiten 38, 0 Fehler
pruef-workspace-seiten 37, 0 Fehler
pruef-breiten 45 Seiten auf fünf Breiten, 0 beanstandet
pruef-community-sicht 10, 0 Fehler
pruef-deutsche-texte 12, 0 Fehler
pruef-css-klassen grün
mess-foyer klickt den ganzen Weg durch: Ein Gast schickt ein Video,
DogFather sieht es mit Namen, nimmt es, und es muss links im Plan
stehen. Zum Schluss macht es sechs seiner Messungen absichtlich kaputt
und prüft, dass sie das merken.
NICHT BEHOBEN, WEIL NICHT MEINS: pruef-meldungen ist rot (28
Kennungen ohne Satz, 3 Rohanzeigen) -- gemessen im worktree auf dem
letzten Commit schon vorher, Zeichen für Zeichen dieselbe Liste. Die
Dateien gehören überwiegend der Agentur; das gehört in einen eigenen
Durchgang.
Co-Authored-By: Claude Opus 5 <[email protected]>
193 lines
8.7 KiB
HTML
193 lines
8.7 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>Notizen · Team Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<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=202610081102" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610081102" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202610081102" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202610081102" />
|
||
<link rel="stylesheet" href="assets/css/notizen.css?v=202610081102" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202610081102" />
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202610081102" />
|
||
</head>
|
||
|
||
<body class="start" data-ton="46">
|
||
|
||
<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">Team Dogi</a> · Notizen</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ======================================================================
|
||
DER BLOCK (26.09.2026)
|
||
|
||
Filipe: „ich will dass du das auch wie ein notizblock erstellst.
|
||
ich will dass es übelst geil und einzigartig ist."
|
||
|
||
ZWEI SPALTEN AUF DEM RECHNER, EINE AUF DEM HANDY. Links der
|
||
Stapel, rechts das aufgeschlagene Blatt. Auf dem Handy wäre
|
||
nebeneinander beides zu schmal; dort ist der Stapel die Seite,
|
||
und ein Blatt legt sich darüber. Der Zurück-Knopf der Kopfleiste
|
||
schließt es wieder — das ist die Geste, die jeder kennt.
|
||
|
||
KEIN SPEICHERN-KNOPF. Nirgends. Wer einen Block aufschlägt und
|
||
lostippt, drückt hinterher nicht auf „sichern"; er klappt ihn zu.
|
||
Die Anzeige unten rechts sagt, was gerade passiert, und ist der
|
||
einzige Ort, an dem das Thema überhaupt vorkommt.
|
||
====================================================================== -->
|
||
<main class="inhalt inhalt--breit notizblock" id="block">
|
||
|
||
<!-- ---------- Die Kopfzeile der Seite ---------------------------- -->
|
||
<section class="kopf-zeile n-kopf">
|
||
<div>
|
||
<p class="marke">Notizen</p>
|
||
<h1 class="titel">Dein Block</h1>
|
||
<p class="unterzeile">
|
||
Schreib hinein, was dir einfällt. Es sichert sich von selbst —
|
||
und niemand außer dir sieht es.
|
||
</p>
|
||
</div>
|
||
<div class="n-kopf__griffe">
|
||
<label class="n-suche" for="suche">
|
||
<svg class="n-suche__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||
<circle cx="10.5" cy="10.5" r="6" />
|
||
<path d="M15.2 15.2 20 20" />
|
||
</svg>
|
||
<input type="search" id="suche" class="n-suche__feld" placeholder="Suchen"
|
||
autocomplete="off" spellcheck="false" />
|
||
</label>
|
||
<button type="button" class="knopf n-neu" id="neu">
|
||
<span aria-hidden="true">+</span> Neues Blatt
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite" hidden></p>
|
||
|
||
<div class="n-raum">
|
||
|
||
<!-- ---------- Links: der Stapel ------------------------------- -->
|
||
<aside class="n-stapel" id="stapel-spalte" aria-label="Deine Blätter">
|
||
<div class="n-stapel__kopf">
|
||
<h2 class="n-stapel__titel">Blätter <span class="n-zahl" id="anzahl">–</span></h2>
|
||
<button type="button" class="n-korb-knopf" id="korb-auf" hidden>
|
||
Papierkorb <span class="n-zahl" id="korb-zahl">0</span>
|
||
</button>
|
||
</div>
|
||
<ol class="n-liste" id="liste" aria-live="polite"></ol>
|
||
<p class="n-leer" id="leer" hidden>
|
||
Noch nichts drauf. <button type="button" class="n-leer__knopf" id="leer-neu">Fang an</button>
|
||
</p>
|
||
</aside>
|
||
|
||
<!-- ---------- Rechts: das aufgeschlagene Blatt ---------------- -->
|
||
<section class="n-blatt" id="blatt" hidden aria-label="Das aufgeschlagene Blatt">
|
||
|
||
<!-- Die Perforation. Reine Zierde, deshalb aria-hidden — sie
|
||
sagt dem Auge „Block", einer Vorlesefunktion nichts. -->
|
||
<div class="n-blatt__perforation" aria-hidden="true"></div>
|
||
|
||
<header class="n-blatt__kopf">
|
||
<h2 class="n-blatt__titel" id="blatt-titel">Ohne Titel</h2>
|
||
<div class="n-blatt__griffe">
|
||
<!-- Die Haken-Bilanz. Sie erscheint nur, wenn es welche
|
||
gibt: Eine Null neben einer Notiz ohne Aufgaben wäre
|
||
eine Zahl, die etwas behauptet. -->
|
||
<span class="n-haken-stand" id="haken-stand" hidden></span>
|
||
<button type="button" class="n-griff" id="anheften" aria-pressed="false"
|
||
title="Oben anheften">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M9 3.6h6l-.9 5.2 3.4 3.1H6.5l3.4-3.1z" />
|
||
<path d="M12 11.9v8.5" />
|
||
</svg>
|
||
<span class="n-griff__text">Anheften</span>
|
||
</button>
|
||
<div class="n-farben" id="farben" role="group" aria-label="Papierfarbe"></div>
|
||
<button type="button" class="n-griff n-griff--weg" id="wegtun" title="In den Papierkorb">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M5.5 7h13" />
|
||
<path d="M7.5 7V5.2h9V7" />
|
||
<path d="M6.8 7.6 7.7 20h8.6l.9-12.4" />
|
||
</svg>
|
||
<span class="n-griff__text">Wegtun</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ==================================================================
|
||
DAS BLATT SELBST — ein Schreibfeld mit einer Deckschicht
|
||
|
||
Das Feld trägt den Text und den Cursor, sieht ihn aber
|
||
nicht: `color: transparent`. Sichtbar ist die Deckschicht
|
||
darüber, die denselben Text noch einmal zeichnet — nur mit
|
||
Haken, Überschriften, Strichen und Links.
|
||
|
||
WARUM DIESER UMWEG: Ein `contenteditable` kann all das
|
||
direkt, bricht aber beim Einfügen aus fremden Programmen,
|
||
beim Rückgängigmachen und bei jeder Tastatur, die über
|
||
eine Zwischenzeile schreibt. Ein Schreibfeld tut nichts
|
||
davon — es ist das Bauteil, das der Browser seit dreißig
|
||
Jahren richtig hinbekommt.
|
||
|
||
DAMIT DAS AUFGEHT, müssen beide Schichten auf den Pixel
|
||
gleich fließen: gleiche Schrift, gleiche Zeilenhöhe,
|
||
gleicher Innenabstand, gleicher Umbruch. Und die Auszeichnung
|
||
darf die BREITE eines Zeichens nie ändern — kein Fettdruck,
|
||
keine andere Schriftgröße, kein Sperren. Erlaubt sind nur
|
||
Farbe, Durchstreichen, Schatten und Rahmen. Genau danach
|
||
ist die Gestaltung gebaut, und pruef-notizen misst es nach.
|
||
================================================================== -->
|
||
<div class="n-papier" id="papier">
|
||
<div class="n-papier__deck" id="deck" aria-hidden="true"></div>
|
||
<textarea class="n-papier__feld" id="feld" spellcheck="true"
|
||
autocomplete="off" autocapitalize="sentences"
|
||
aria-label="Text dieses Blattes"></textarea>
|
||
</div>
|
||
|
||
<footer class="n-blatt__fuss">
|
||
<span class="n-stand" id="stand" aria-live="polite"></span>
|
||
<span class="n-wann" id="wann"></span>
|
||
</footer>
|
||
</section>
|
||
|
||
<!-- ---------- Der Papierkorb ---------------------------------- -->
|
||
<section class="n-korb" id="korb" hidden aria-label="Papierkorb">
|
||
<header class="n-korb__kopf">
|
||
<h2 class="n-blatt__titel">Papierkorb</h2>
|
||
<button type="button" class="knopf-still" id="korb-zu">Zurück zum Block</button>
|
||
</header>
|
||
<p class="n-korb__satz" id="korb-satz"></p>
|
||
<ol class="n-liste n-liste--korb" id="korb-liste" aria-live="polite"></ol>
|
||
</section>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
|
||
liest daraus die Leitungsrollen. -->
|
||
<script src="assets/js/bereiche.js?v=202610081102" defer></script>
|
||
<script src="assets/js/wahl.js?v=202610081102" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202610081102" defer></script>
|
||
<script src="assets/js/installieren.js?v=202610081102" defer></script>
|
||
<script src="assets/js/kopf.js?v=202610081102" defer></script>
|
||
<script src="assets/js/glocke.js?v=202610081102" defer></script>
|
||
<script src="assets/js/notizen.js?v=202610081102" defer></script>
|
||
</body>
|
||
</html>
|