Filipe: "ich will in jeder seite auch eine kleine detaillierte aber
schnelle erklaerung kurz und knapps noch zu jeder seite."
DREI ZEILEN AUF JEDER DER 25 SEITEN
WOFUER was auf dieser Seite steht
DU TUST was man hier konkret macht
MERKE nur dort, wo es etwas gibt, das man falsch versteht
SIEHT wer diese Seite ueberhaupt oeffnen kann
Offen sichtbar und nicht hinter einem Aufklapper: "schnell" war seine
Bedingung, und eine Erklaerung, die man erst aufklappen muss, ist
genau dann nicht da, wenn man sie braucht.
DIE ZEILE "SIEHT" IST GERECHNET, NICHT GESCHRIEBEN
Sie kommt aus der Rechtetafel -- aus derselben, aus der auch die
Schranke ihre Entscheidung holt. Haette ich sie danebengeschrieben,
waere sie beim ersten Umstellen in "Wer sieht was" still falsch
geworden, in einem Satz, der behauptet, wer etwas sieht. Die Pruefung
stellt die Tafel deshalb wirklich um und sieht nach, ob der Satz
mitwandert.
Die Erklaerung haengt hinter derselben Schranke wie die Seite: Wer sie
nicht oeffnen darf, bekommt 404 -- nicht 403, sonst waere dieser Weg
eine Landkarte des Hauses.
Eingebunden ist sie nicht ueber eine Liste von Dateinamen, sondern
ueber "wer kopf.js laedt": die 26. Seite ist damit automatisch dabei.
Fuenf Seiten haben keine Kopfzeile (Chat, Kalender, Start, Team,
Teamlage) -- dort haengt der Kasten an <main>, sonst waeren
ausgerechnet die haeufigsten Seiten lautlos leer geblieben.
ZWEI EIGENE MAENGEL, GEFUNDEN DURCH HINSEHEN, NICHT DURCH DIE PRUEFUNG
Die erste Fassung war gruen -- und stand mitten auf dem Buehnenbild,
mit einem Lichtfleck hinter "SIEHT". Und "Wofuer" sprach fast woertlich
die Unterzeile darueber nach. Beides misst die Pruefung jetzt: Kontrast
mit dem dritten Ausgang ("steht auf der Buehne" ist kein Ergebnis) und
die Wortueberschneidung mit der Unterzeile.
ZWEI BEFUNDE, DIE SCHON VORHER ROT WAREN
1. pruef-tempo-workspace verglich die UNKOMPRIMIERTE Groesse gegen eine
Grenze, die fuer die Leitung gedacht war -- waehrend der Kommentar
daneben "das ist, was wirklich ueber die Leitung ging" behauptete.
Live steht Caddy davor. Nachgemessen an der echten Adresse:
start.css 345 KB -> 111 KB zstd. Die Pruefung wog also 1,2 MB, wo
Filipe 500 KB bekommt. Jetzt wird Komprimierbares im Pruefstand
gzip-gepackt (115 KB gegen 111 KB live -- auf vier Prozent genau),
geurteilt wird ueber die uebertragene Groesse, berichtet werden
beide. Dabei prompt in die dokumentierte Falle getappt: `body()` auf
einen Ereignisstrom endet nie, der Lauf blieb stehen. Jetzt
ausgenommen, plus Notbremse je Koerper.
2. pruef-ueberlappung konnte seit Tagen nicht mehr zeigen, dass sie
eine Ueberlappung ueberhaupt findet: Ihre Gegenprobe legt einen Knopf
auf einen anderen, traf aber 6 px daneben. Zwei Ursachen in einer
Zeile -- `position: fixed` bezieht sich auf einen Vorfahren mit
`transform`, und die `transition` der Knoepfe liefert beim sofortigen
Messen die Lage von vorher. Jetzt `transform` + `transition: none`:
34x36 px erkannt, 20 Seiten-Breiten-Paare, 0 Befunde.
PRUEFUNGEN: pruef-erklaerung neu mit 44, davon 8 im Browser (Seite mit
und ohne Kopfzeile, Handy, Kontrast, Echo). Mein Schild stand auf
10,88 px und lag unter der Hausgrenze von 11,5 -- gefunden von
pruef-css-klassen, nicht vom Auge.
Co-Authored-By: Claude Opus 5 <[email protected]>
200 lines
8.3 KiB
HTML
200 lines
8.3 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>Regeln & Hilfe · 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=202609141819" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/treff.css?v=202609141819" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609141819" />
|
||
<!-- haus.css MUSS die letzte Stilvorlage sein. Auf der Adresse des
|
||
Treffs 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=202609141819" />
|
||
</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 Treff</a> · Regeln</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">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Der Treff</p>
|
||
<h1 class="titel">Regeln & Hilfe</h1>
|
||
<p class="unterzeile">
|
||
Kurz, in normaler Sprache, und alles, was hier steht, gilt auch.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- ==================================================================
|
||
WARUM DER TEXT HIER STEHT UND DIE ZAHLEN NICHT
|
||
|
||
Die Saetze sind Text und gehoeren in eine Datei. Die ZAHLEN
|
||
darin (sieben Tage, dreissig Tage, drei Beitraege, drei
|
||
Anschlaege, 18 Jahre) kommen vom Server -- sie stehen im Code,
|
||
und ein Regeltext, der eine andere Zahl nennt als die Regel, ist
|
||
schlimmer als gar keiner: Niemand merkt es, und wer es merkt,
|
||
glaubt dem Text.
|
||
|
||
Die Platzhalter tragen deshalb "…" als Vorgabe. Kommt die
|
||
Antwort nicht, steht dort sichtbar nichts -- und nicht
|
||
versehentlich eine Zahl von gestern.
|
||
============================================================== -->
|
||
<section class="treff-abschnitt" id="willkommen">
|
||
<h2 class="treff-abschnitt__titel">Schön, dass du da bist</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p>
|
||
Der Treff ist der Ort rund um DogFather: Hier steht, was gerade gilt,
|
||
was ansteht, und hier redet ihr miteinander. Er ist nicht öffentlich –
|
||
du bist hier, weil dir jemand einen Code gegeben hat.
|
||
</p>
|
||
<p class="leise">
|
||
Gib diesen Code nicht weiter. Er gehört zu dir, und was damit
|
||
geschrieben wird, steht unter deinem Namen.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Die fünf Regeln</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<ol class="regel-liste">
|
||
<li><strong>Sei anständig.</strong> Keine Beleidigungen, keine Angriffe
|
||
auf Menschen, keine Hetze. Streiten über eine Sache ist in Ordnung –
|
||
über einen Menschen nicht.</li>
|
||
<li><strong>Keine privaten Daten.</strong> Keine Adressen, keine
|
||
Telefonnummern, keine Klarnamen von anderen. Auch nicht von dir
|
||
selbst, es liest mehr mit, als du denkst.</li>
|
||
<li><strong>Nichts Fremdes hochladen.</strong> Was du einstellst, muss
|
||
von dir sein oder dir gehören.</li>
|
||
<li><strong>Keine Werbung, kein Verkauf.</strong> Auch nicht für
|
||
andere Streams.</li>
|
||
<li><strong>Was hier passiert, bleibt hier.</strong> Keine
|
||
Bildschirmfotos nach draußen.</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Wie du weiterkommst</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p>
|
||
In der ersten Zeit kannst du lesen und bei Wünschen mitstimmen.
|
||
Das ist kein Misstrauen gegen dich – es ist eines gegen
|
||
Wegwerf-Zugänge.
|
||
</p>
|
||
<ul class="regel-liste" id="stufen">
|
||
<li class="leise">wird geladen …</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Wenn etwas nicht stimmt</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p>
|
||
An jedem Beitrag, der nicht von dir ist, steht <strong>melden</strong>.
|
||
Schreib in einem Satz, was daran nicht in Ordnung ist – ohne das
|
||
können wir es nicht prüfen.
|
||
</p>
|
||
<p>
|
||
Wir sehen uns jede Meldung an. Wird ein Beitrag entfernt, halten wir
|
||
fest, <strong>warum</strong> – und die Person, die ihn geschrieben hat,
|
||
erfährt den Grund. Das ist keine Höflichkeit, sondern
|
||
<span class="leise">Artikel 17 des Digital Services Act</span>.
|
||
</p>
|
||
<p class="leise" id="kontakt">
|
||
Du erreichst uns außerdem direkt: Schreib es auf das Brett
|
||
<a href="bereich.html?b=treff">Der Treff</a> oder sag es einem Modi.
|
||
</p>
|
||
<p class="leise">
|
||
Häufige Fragen und Antworten stehen auf dem Brett
|
||
<a href="bereich.html?b=regeln">Regeln & Hilfe</a>.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Was passiert, wenn jemand sich nicht daran hält</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p>Wir gehen der Reihe nach vor, und niemand fliegt ohne Ansage:</p>
|
||
<ol class="regel-liste">
|
||
<li><strong>Hinweis.</strong> Jemand sagt dir, was nicht ging.</li>
|
||
<li><strong>Pause.</strong> Ein paar Tage nichts schreiben. Lesen
|
||
geht weiter.</li>
|
||
<li><strong>Ende.</strong> Der Zugang wird geschlossen.</li>
|
||
</ol>
|
||
<p class="leise" id="ausschluss">…</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="treff-abschnitt">
|
||
<h2 class="treff-abschnitt__titel">Das Kleingedruckte – kurz</h2>
|
||
<div class="treff-abschnitt__inhalt">
|
||
<p id="alter">…</p>
|
||
<p>
|
||
<strong>Was gespeichert wird:</strong> dein Name, dein Zugangscode
|
||
(verschlüsselt, niemand kann ihn lesen), was du schreibst, und wann
|
||
du dich anmeldest. Mehr nicht – kein Standort, keine Werbe-IDs,
|
||
keine Weitergabe an Dritte.
|
||
</p>
|
||
<p>
|
||
<strong>Du willst weg?</strong> Sag Bescheid. Dein Zugang wird
|
||
geschlossen und deine Beiträge werden entfernt.
|
||
</p>
|
||
<p class="leise">
|
||
Der Treff ist ein kleiner, geschlossener Bereich. Es gibt keine
|
||
Direktnachrichten zwischen Mitgliedern – absichtlich: Ein
|
||
öffentlicher Raum lässt sich moderieren, ein privater nicht.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- WER kopf.js LAEDT, MUSS AUCH wahl.js LADEN (Regel seit 07.09.2026).
|
||
|
||
Der Umschalter "Meine Sicht" in der Kopfleiste ist ein selbst
|
||
gebautes Bedienelement; dahinter liegt ein unsichtbares Systemfeld
|
||
fuer Vorleseprogramme. Ohne wahl.js faellt kopf.js auf dieses Feld
|
||
zurueck -- ein grauer Kasten von 92 x 19 Pixeln mit weisser
|
||
Schrift, mitten in einer dunklen Leiste.
|
||
|
||
Beim ersten Anlauf fehlte die Zeile auf genau diesen beiden neuen
|
||
Seiten. Gefunden hat das nicht das Auge, sondern pruef-css-klassen,
|
||
die seit dem 07.09. jede Seite danach absucht. -->
|
||
<script src="assets/js/wahl.js?v=202609141819" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609141819" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609141819" defer></script>
|
||
<script src="assets/js/erklaerung.js?v=202609141819" defer></script>
|
||
<script src="assets/js/treff-regeln.js?v=202609141819" defer></script>
|
||
</body>
|
||
</html>
|