Files
dogfather-universe/workspace/treff-regeln.html
T
DogFatherGit e4c6d69ce8 "Wie geht's dir?" -- lesbar und um ein Drittel kuerzer
Filipe: "auf der seite von der kategorie wie gehts die, sind die
kacheln viel zu hell, man bekommt fast nichts gelesen, die sollen viel
kraeftiger und dunkler sein. ich will dass auch alles viel
uebersichtlicher ist, es ist alles so lang gezogen, muss ewig scrollen
um alles zu sehen."

BEIDES GEMESSEN, BEVOR ICH ETWAS ANGEFASST HABE:

  Kachelgrund   rgba(0, 0, 0, .2) -- also 80 % durchsichtig. Die Seite
                traegt ein helles Buehnenbild (Husky, Hase, viel
                Licht), und das schien mitten durch den Text.
  Laenge        2487 px am Rechner, 3431 px am Handy. 3,4 Bildschirme
                fuer neun Fragen.

DIE LESBARKEIT: Die Kacheln sind jetzt deckend -- und nicht schwarz,
sondern einen Hauch heller als die Seite, damit sich eine Frage von
der naechsten abhebt. Gemessen mit pruef-buehne: schlechtester
Kontrast 4.95:1 an 39 gemessenen Stellen (noetig 4.5).

DIE LAENGE -- gespart wurde an Weissraum und Wiederholung, NICHT an
Text. Die Erklaerung unter jeder Frage ist der Grund, warum man sie
ehrlich beantwortet.

  Vier Knoepfe, eine Reihe. Gemessen waren sie 94 von 214 Pixeln je
  Frage -- zwei Reihen, also 450 Pixel Scrollweg allein aus Umbruch.
  Gerechnet: 390 minus 28 Innenabstand minus drei Luecken, geteilt
  durch vier = 86 px je Knopf. "Kann ich nicht sagen" braucht mehr,
  "Unklar" nicht. Der LANGE Name bleibt im `aria-label` -- wer hoert
  statt sieht, bekommt weiterhin den ganzen Satz.

  Die Marke "jede Runde" steht neben der Frage statt darunter. Sie ist
  eine Eigenschaft der Frage, keine eigene Zeile.

  Zwei Spalten am Rechner. Bei 880 px Inhaltsbreite und Fragen, die
  keine 400 brauchen, halbiert das den Weg, ohne eine Frage zu
  verstecken. `break-inside: avoid` ist dabei der Kern -- sonst steht
  die Antwortreihe in der anderen Spalte.

ERGEBNIS: Rechner 2487 -> 1770 px, Handy 3431 -> 2781 px. Eine
Fragekachel am Handy 228 -> 139 px.

Und ein Fehler, den nur das Bildschirmfoto gezeigt hat: Mein erster
Anlauf sparte die Kurzform, wenn sie dem Namen gleicht -- bei "Laeuft"
ist das so. Am Handy ist die lange Fassung ausgeblendet, und der Knopf
zeigte dann nur noch das Haekchen.

Geprueft: pruef-befinden 113/0, pruef-resuemee 35/0,
pruef-entwicklung 48/0, pruef-buehne fuer diese Seite 10/0.
2026-09-22 02:02:46 +02:00

232 lines
10 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>Die Regeln · 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=202609220201" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609220201" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609220201" />
<link rel="stylesheet" href="assets/css/start.css?v=202609220201" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609220201" />
<link rel="stylesheet" href="assets/css/treff.css?v=202609220201" />
<link rel="stylesheet" href="assets/css/module.css?v=202609220201" />
<!-- 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=202609220201" />
</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> · 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>
<!-- HIESS BIS ZUM 18.09.2026 „Regeln & Hilfe" -- genau wie das
BRETT, auf das der Absatz weiter unten verweist. Auf dem
Brett stand damit ein Link „Regeln & Hilfe", der auf eine
Seite namens „Regeln & Hilfe" fuehrte; wer ihn drueckte,
glaubte, im Kreis gelaufen zu sein.
Die beiden sind verschiedene Dinge: Hier stehen die fuenf
Regeln, kurz und fest. Das Brett sammelt daneben haeufige
Fragen, Hilfe und was im Einzelfall passiert. Zwei Namen
fuer zwei Sachen. -->
<h1 class="titel">Die Regeln</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 <span
id="kontakt-wem">jemandem aus dem Team</span>.
</p>
<p class="leise">
Häufige Fragen und Antworten stehen auf dem Brett
<a href="bereich.html?b=regeln">Regeln &amp; 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>
<!-- ==== WAS IST ÜBER MICH GESPEICHERT? (15.09.2026) ==============
Art. 15 DSGVO. Kein Antrag, kein Formular, kein Warten – ein
Knopf. Er steht auf den beiden Seiten, die einem Menschen selbst
gehören: dem Steckbrief und den Treff-Regeln. Die Community hat
keinen Steckbrief; ohne die zweite Stelle hätte ausgerechnet die
Gruppe mit den wenigsten Rechten auch diesen nicht. -->
<section class="meine-daten">
<div class="meine-daten__kopf">
<h2 class="meine-daten__titel">Was ist über mich gespeichert?</h2>
<button type="button" class="knopf-still" id="auskunft-knopf">Datei herunterladen</button>
</div>
<p class="meine-daten__satz">
Alles, was dieser Workspace über dich weiß, als Datei zum Mitnehmen.
Zugangsgeheimnisse sind nicht dabei, und wo andere Menschen vorkommen,
stehen sie nicht mit Namen darin – ihre Daten gehören ihnen.
</p>
<p class="leise" id="auskunft-stand" hidden></p>
</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/nachfrage.js?v=202609220201" defer></script>
<script src="assets/js/wahl.js?v=202609220201" defer></script>
<script src="assets/js/bereiche.js?v=202609220201" defer></script>
<script src="assets/js/kopf.js?v=202609220201" defer></script>
<script src="assets/js/auskunft.js?v=202609220201" defer></script>
<script src="assets/js/treff-regeln.js?v=202609220201" defer></script>
</body>
</html>