Files
dogfather-universe/workspace/treff-moderation.html
T
DogFatherGitandClaude Opus 5 f62ade3573 Vertraulicher Meldeweg, klappbare Abschnitte, lila Stunden, Logos
Eine Nacht voller Auftraege von Filipe. Der Reihe nach:

1. VERTRAULICH MELDEN -- der groesste neue Teil.

"es soll auch eine kategorie also eine hauptkachel geben wo die
community leute sich anonym melden koennen wenn sie probleme haben ...
rechte hand und dogfather sollen zugriff auf diese anonyme nachrichten
haben. also anonym fuer die anderen."

WICHTIG, UND ES STEHT SO AUF DER SEITE: "anonym" heisst hier
VERTRAULICH. DogFather und die rechte Hand sehen den Namen -- so
bestellt und auch richtig, ohne Namen kann man niemandem helfen.
Anonym ist es gegenueber allen anderen: kein Modi, kein anderes
Mitglied. Wer glaubt, er schreibe unerkannt, schreibt anders und fuehlt
sich hinterher getaeuscht -- deshalb steht der Satz im Formular, bevor
jemand tippt.

Der strikte Wechsel (melden -> warten -> antworten -> warten) ist im
SERVER erzwungen, nicht nur im Knopf. Ein ausgegrauter Knopf ist keine
Regel. Geschlossen wird nur von der Leitung; abgeschlossene Faelle
werden nach 90 Tagen samt Nachrichten geloescht -- hier stehen die
empfindlichsten Texte des Hauses.

Modis sind ausdruecklich AUSSEN VOR: Sehr oft geht es in diesen
Meldungen um eine Moderationsentscheidung.

2. JEDE KATEGORIE LAESST SICH ZUKLAPPEN.

"man soll auf dieser seite jede kategorie auf und zu klappen koennen
mit einem button ... ueberall wo so eine liste entstehen kann."

Das Muster gab es auf der Startseite schon; es steht jetzt als
`abschnittKlappbar` in kopf.js und wird von den Brettern und dem
Zeitstrahl benutzt. Die Koepfe sind echte <button> (fuer die Tastatur),
der Zustand haelt in localStorage, und er haengt je Brett UND Art --
sonst waere "Regel zugeklappt" ueberall gleichzeitig zu.

3. DIE SPRUNGLEISTE SIEHT AUS WIE ETWAS ZUM ANFASSEN.

Vorher unterstrichene Woerter, die aussahen wie eine Fusszeile. Jetzt
Marken mit Rahmen in einem eigenen Block.

4. DIE STUNDEN SIND LILA.

UMGERECHNET, NICHT NEU GEWAEHLT: Jeder der fuenf Verlaufsstopps wurde
nach OKLCH zerlegt, der Farbton auf 303 Grad gedreht, zurueckgerechnet.
Helligkeit und Buntheit blieben gleich -- eine frei gegriffene Palette
waere heller oder bunter geworden, und die Uhr damit unruhiger.

5. DIE KARTEN "UNSERE SEITEN": babyblau und lila, mit schwebenden Logos.

Beide Logos wurden zu MASKEN gerechnet (tools/logo-maske.mjs): Die PNG
tragen nur Alpha, die Farbe kommt aus dem CSS. Dadurch passt dasselbe
Logo in jede Kachel, egal welchen Ton sie hat -- und VanVans 378-KB-
Logo wurde dabei zu 109 KB. Vier Stueck je Karte, verschieden gross,
zwei Bahnen, 26 bis 41 Sekunden Umlauf. Der erste Versuch war mit 5-9 %
Deckkraft praktisch unsichtbar; jetzt 10-16 %.

6. "ENTWICKLUNG" HEISST JETZT "EURE AUFGABEN".

Filipe hat recht: Die Kachel fuehrt seit dem 11.09. auf den Katalog --
eine Aufgabenliste. Der Name blieb stehen, weil beim Umhaengen des
Ziels niemand ihn angefasst hat. Der Name "Entwicklung" ist damit frei
fuer das, was er darunter versteht (Auswertung je Person mit Verlauf
und Text) -- das ist noch NICHT gebaut.

DREI PRUEFUNGEN, DIE ZUFAELLIG GRUEN WAREN, sind nebenbei aufgefallen:
- pruef-kachelraster wartete feste 500 ms auf eine gestaffelte
  Einblendung und mass vier Reihen, wo drei sind. Jetzt reducedMotion.
- pruef-start-ansicht scrollte 600 px und nahm an, danach liege keine
  Kachel mehr unter dem Zeiger.
- pruef-wege-nach-draussen zaehlte das Kachelraster ueber ALLE Gruppen
  statt je Gruppe.

GEMESSEN: pruef-hilfe (neu) 55/0, pruef-wege-nach-draussen 64/0,
pruef-jeder-hat-eine-seite 65/0, pruef-community-sicht 10/0,
pruef-bereiche-lesend, pruef-steckbrief, pruef-start-ansicht,
pruef-kachelraster alle gruen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-19 02:04:03 +02:00

135 lines
5.4 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>Meldungen &amp; Maßnahmen · Der Treff</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=202609190204" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609190204" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609190204" />
<link rel="stylesheet" href="assets/css/start.css?v=202609190204" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609190204" />
<link rel="stylesheet" href="assets/css/treff.css?v=202609190204" />
<link rel="stylesheet" href="assets/css/module.css?v=202609190204" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609190204" />
</head>
<body class="start">
<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">Der&nbsp;Treff</a> · Meldungen</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">
<section class="kopf-zeile">
<div>
<p class="marke">Der Treff · Moderation</p>
<h1 class="titel">Meldungen &amp; Maßnahmen</h1>
<p class="unterzeile">
Was gemeldet wurde, was entfernt wurde und mit welcher Begründung –
alles an einer Stelle.
</p>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<!-- ==================================================================
WARUM DIESE SEITE EXISTIERT
Die Schnittstellen dafür gab es zuerst, die Seite nicht. Eine
Meldung, die nur über eine Schnittstelle abrufbar ist, ist keine
Meldung — sie ist eine Zeile in einer Datenbank, die niemand
liest. Der DSA verlangt in Artikel 16, dass Meldungen
BEARBEITET werden; ohne eine Stelle, an der sie erscheinen,
wäre das ein Versprechen an eine Schublade.
DREI ABSCHNITTE, IN DIESER REIHENFOLGE: Was liegt an (Meldungen)
— was wurde getan (Entfernt) — wer ist gesperrt (Maßnahmen). Wer
diese Seite öffnet, hat fast immer die erste Frage.
============================================================== -->
<!-- WAS HEREINKOMMT (17.09.2026). Steht GANZ OBEN, vor den offenen
Meldungen: Eine Meldung setzt voraus, dass jemand etwas gesehen
hat. Wer acht Bretter durchklicken muss, um zu sehen, ob etwas
Neues da ist, tut es nicht achtmal am Tag -- und was niemand
ansieht, moderiert auch niemand. -->
<section class="treff-abschnitt">
<h2 class="treff-abschnitt__titel">Was hereinkommt</h2>
<div class="treff-abschnitt__inhalt">
<p>
Die neuesten Beiträge aus allen Bereichen der Community –
an einer Stelle, damit niemand acht Bretter durchklicken muss.
</p>
</div>
<div id="zulauf" aria-busy="true"><p class="leise">wird geladen …</p></div>
</section>
<section class="treff-abschnitt">
<h2 class="treff-abschnitt__titel">Offene Meldungen</h2>
<div class="treff-abschnitt__inhalt">
<p>
Zu jeder Entscheidung gehört ein Satz. Er wird festgehalten –
auch damit man später weiß, warum etwas so entschieden wurde.
</p>
</div>
<div id="meldungen" aria-busy="true"><p class="leise">wird geladen …</p></div>
</section>
<section class="treff-abschnitt">
<h2 class="treff-abschnitt__titel">Entfernt</h2>
<div class="treff-abschnitt__inhalt">
<p>
Was entfernt wurde, und warum. Die Begründung überlebt den Beitrag –
das ist der Sinn der Sache
<span class="leise">(Digital Services Act, Artikel 17)</span>.
</p>
</div>
<div id="entfernt" aria-busy="true"><p class="leise">wird geladen …</p></div>
</section>
<section class="treff-abschnitt">
<h2 class="treff-abschnitt__titel">Die Mitglieder</h2>
<div class="treff-abschnitt__inhalt">
<p>
Wer da ist, seit wann, auf welcher Stufe – und wer gerade eine Pause
hat. Von hier aus wird gehandelt; die Stufe steht nur hier und
<strong>nie</strong> neben dem Namen im Treff.
</p>
</div>
<div id="mitglieder" aria-busy="true"><p class="leise">wird geladen …</p></div>
</section>
<section class="treff-abschnitt">
<h2 class="treff-abschnitt__titel">Hinweise, Pausen, Ausschlüsse</h2>
<div class="treff-abschnitt__inhalt">
<p id="leiter">…</p>
</div>
<div id="massnahmen" aria-busy="true"><p class="leise">wird geladen …</p></div>
</section>
</main>
<script src="assets/js/wahl.js?v=202609190204" defer></script>
<script src="assets/js/bereiche.js?v=202609190204" defer></script>
<script src="assets/js/kopf.js?v=202609190204" defer></script>
<script src="assets/js/treff-moderation.js?v=202609190204" defer></script>
</body>
</html>