Files
dogfather-universe/workspace/notizen.html
T
DogFatherGitandClaude Opus 5 a02cf5c026 Reaction: Rollen sichtbar, Moderation im Live-Chat
Filipes Wunsch: „die modis, linke hand und rechte hand soll im chat
extra aussehen und auch sachen wie stummschaltungen, sperrungen,
meldunge und alles mögliche im chat machen können falls sich jemand
nicht benimmt."

WER SPRICHT
Jeder Beitrag aus dem Team trägt jetzt ein Abzeichen: „Dogi", „Team"
(beide Hände) und „Modi". Ein WORT und nicht nur eine Farbe — rund
acht Prozent der Männer unterscheiden Rot und Grün schlecht, und hier
hängt an der Unterscheidung etwas. Gedeckte Töne auf schwacher Fläche,
11,52 px (die Hausgrenze ist 11,5), weil daneben ein Video läuft.
Die Wörter sagen den RANG nicht: Filipe steht nie über seinem Team.
Eine Prüfung schlägt an, wenn dort „Chef", „Boss" oder „Leitung"
stünde.

WAS DIE MODERATION KANN
Am Namen öffnet sich ein Menü mit vier Wegen: Beitrag wegnehmen,
10 Minuten stumm, aus der Sendung — und der Verweis in den Treff, wo
längere Maßnahmen hingehören (mit Begründungspflicht und Frist in
Tagen). Die Reaction baut kein zweites Sperrsystem daneben: Wer im
Treff eine Pause hat, schreibt hier auch nicht. Neu ist nur, was der
Treff nicht hat — MINUTEN. Höchstens eine Stunde; wer länger etwas
braucht, nimmt den Treff.
Nicht gegen das Team: Wer einen Modi stummschalten könnte, hätte einen
Weg, die Moderation selbst auszuschalten, mitten in der Sendung.

MELDEN DARF JEDER
Die Moderation sieht nicht alles, wer mitliest schon. Zweimal melden
zählt einmal (sonst füllt einer allein die Liste). Bei der Moderation
erscheint im Kopf der Schiene „1 Meldung" — nur wenn etwas offen ist;
eine Zahl, die immer dasteht und meistens null ist, wird nach drei
Tagen nicht mehr gelesen.

VIER FEHLER, DIE DABEI AUFGEFALLEN SIND

1. `oeffentlich()` nahm `meldungen` und `massnahmen` NICHT aus dem
   Rundruf. Der Rundruf wird aus dem Stand dessen gebaut, der gerade
   etwas getan hat — bei einer Moderationshandlung wären der gemeldete
   Text, der Name des Gemeldeten und der Name des MELDERS an jeden im
   Saal gegangen. Wer meldet, muss sich darauf verlassen können, dass
   das niemand sieht.

2. `meldung.js` hatte zwei Schlüssel doppelt: `geschlossen` und
   `nur_leitung`. Der spätere gewinnt stillschweigend — in der Hilfe
   stand dadurch „Der Saal ist zu". Ein Wort, ein Satz; eine Prüfung
   hält das jetzt fest.

3. Wer stummgeschaltet war, bekam bei OFFENEM Chat „Der Chat ist
   gerade zu" — der Aufrufer reimte sich den Grund aus der Chat-Stufe
   zusammen. Jetzt gibt `schreibGrund()` den echten Grund zurück.

4. Wer rausgenommen wurde, merkte nichts: Das Video lief weiter, nur
   die Anwesenheitsmeldung schlug still fehl. Jetzt hält alles an und
   es steht ein Satz da, der sagt, dass es nur für heute gilt.

UND EINER, DEN NUR DAS BILDSCHIRMFOTO GEFUNDEN HAT
Das Menü lag messbar komplett im Fenster (x=1099..1315 von 1440,
y=652..840 von 900) und war trotzdem abgeschnitten: Die Chatliste
rollt, und ein rollender Vorfahre beschneidet sein Kind. „Im Fenster"
und „sichtbar" sind zwei verschiedene Fragen, und ich hatte die
falsche gemessen. Das Menü hängt jetzt fest am Fenster und klappt nach
oben oder links, wo kein Platz ist. Die Messung fasst seitdem mit
`elementFromPoint` an jeden Knopf an, statt Rechtecke zu vergleichen.

GEPRUEFT
pruef-reaktion: 216 Prüfungen (vorher 156), 0 Fehler — zwei neue
Abschnitte. mess-reaktion misst die Moderation jetzt im echten
Browser: Abzeichen, Überlauf der Schiene, Menü, Stummschaltung beim
Betroffenen, Meldung bis zur Moderation, Rauswurf.
Dazu grün: pruef-meldungen, pruef-struktur, pruef-css-klassen,
pruef-tippziele, pruef-deutsche-texte, pruef-hilfe.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-28 09:32:10 +02:00

193 lines
8.7 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>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=202609280931" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609280931" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609280931" />
<link rel="stylesheet" href="assets/css/start.css?v=202609280931" />
<link rel="stylesheet" href="assets/css/notizen.css?v=202609280931" />
<link rel="stylesheet" href="assets/css/module.css?v=202609280931" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609280931" />
</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&nbsp;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=202609280931" defer></script>
<script src="assets/js/wahl.js?v=202609280931" defer></script>
<script src="assets/js/nachfrage.js?v=202609280931" defer></script>
<script src="assets/js/installieren.js?v=202609280931" defer></script>
<script src="assets/js/kopf.js?v=202609280931" defer></script>
<script src="assets/js/glocke.js?v=202609280931" defer></script>
<script src="assets/js/notizen.js?v=202609280931" defer></script>
</body>
</html>