DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3b356d6eefc3e18f429ead647549d47ff14f090a
dogfather-universe/workspace/chat.html
T
DogFatherGitandClaude Opus 5 3b356d6eef Ein Material fuer die ganze Website -- und die Uhr wird zum Chronographen 
DIE UHR: Sekunde nach AUSSEN, Minute in die Mitte, Stunde nach innen
(Wunsch Filipe). Das ist die Anordnung eines Chronographen und nicht die
eines Fortschrittsbalkens: Der schnellste Zeiger laeuft auf der
laengsten Bahn, weil man Bewegung dort am besten sieht -- der langsamste
innen, wo eine kleine Drehung viel bedeutet. Die drei Umfaenge sind
mitgewandert; ein vertauschter Ring ohne vertauschte Zahlen endet nie
dort, wo er soll.

EIN MATERIAL FUER ALLE SEITEN. Die Startseite hatte seit heute
beleuchtete Platten, die anderen sechzehn Seiten flache Rechtecke -- man
wechselte die Seite und fiel aus einer Oberflaeche in eine andere. Ich
habe das bisher Seite fuer Seite nachgezogen, und genau deshalb war es
nie fertig: Es sind FUENFUNDVIERZIG Stellen.

Jetzt EINE Regel. Die Klassenliste ist nicht erfunden, sondern gemessen
-- es sind genau die, die `var(--flaeche)` als Kartenflaeche benutzen.
`:where()` ist der Kniff dabei: Spezifitaet null, also ueberschreibt die
Regel nichts, was eine Seite selbst festlegt. Eine Warnkarte bleibt rot,
eine Spalte behaelt ihre Statusfarbe. Ohne das haette ich an dreissig
Stellen `!important` gebraucht.

DREI FUNDE DER PRUEFUNGEN, alle berechtigt:

1. `.profil-gruppe` gibt es nicht -- ich hatte den Namen aus dem Kopf
   geschrieben statt aus der Datei. pruef-struktur meldete totes CSS.
   Die Karten auf profil.html heissen `.gruppe`, und genau der Name darf
   NICHT in die Liste: Auf der Startseite heissen die Kachelgruppen
   ebenso und haetten ploetzlich eine Kartenflaeche.

2. Der erste Verlauf war HELLER als das, was er ersetzt. Ein Material,
   das die ganze Website aufhellt, hellt auch jeden Text darauf auf --
   und das faellt an der leisesten Schrift zuerst auf.

3. `.gruppe__unter` stand auf 4,21:1. Und das ist der interessante Fall:
   Die Farbe war nicht schuld, eine VERSCHIEBUNG war es. Mit der fuenften
   Rolle rutschte auf personen.html alles eine Zeile nach unten, und die
   Zeile landete auf einer helleren Stelle des Buehnenbilds. Sie ist die
   einzige Beschriftung ohne Karte -- ein Text, dessen Untergrund ein
   FOTO ist, bekommt nicht den leisesten Ton. Jetzt 5,51:1.

Der zweite Fund fiel nur auf, weil die Zahl sich nach meiner ersten
Korrektur KEIN Stueck bewegte (zweimal exakt 4,21) -- dasselbe Zeichen
wie schon zweimal heute: falsche Stelle, nicht zu wenig.

Gruen: buehne (38), css-klassen (15), struktur (32), handy (59),
breiten (23), start-ansicht (136), lesbarkeit (14), tempo (8),
personen-liste (33).

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-07 05:14:01 +02:00

163 lines
7.2 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>Chat · Creator Workspace</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609070507" />
<link rel="stylesheet" href="assets/css/start.css?v=202609070507" />
<!-- aufgaben.css bringt die Dialog- und Formularstile mit (.dialog,
.neu__zeile, .dialog__knoepfe). Sie stehen dort seit dem
Aufgabenbrett; sie hierher zu kopieren hiesse, sie an zwei Stellen
zu pflegen. Dieselbe Lösung nutzen kalender.html und content.html.
Gemeldet von pruef-css-klassen.mjs, bevor jemand einen ungestylten
Dialog zu sehen bekam. -->
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609070507" />
<link rel="stylesheet" href="assets/css/chat.css?v=202609070507" />
</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">Creator&nbsp;Workspace</a> · Chat</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 chat-seite">
<!-- DIE GANZE SEITE IST EINE FLÄCHE, kein Dokument zum Scrollen.
Ein Chat ist kein Text, den man von oben nach unten liest --
man springt zwischen Gesprächen, und das Eingabefeld muss
immer erreichbar sein, ohne zu suchen. Deshalb: feste Höhe,
und gescrollt wird nur INNERHALB der beiden Spalten.
data-ansicht steuert am Handy, welche Spalte zu sehen ist:
"liste" oder "verlauf". Am Rechner stehen beide nebeneinander
und das Merkmal bewirkt nichts. -->
<div class="chat" id="chat" data-ansicht="liste">
<!-- ---------- Links: die Gespräche ---------- -->
<section class="chat__spalte chat__spalte--liste" aria-labelledby="liste-titel">
<div class="chat__kopf">
<h1 class="chat__titel" id="liste-titel">Gespräche</h1>
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neu</button>
</div>
<!-- Suchen erst, wenn es etwas zu suchen gibt (chat.js blendet
es ab acht Gesprächen ein). Ein Suchfeld über drei Einträgen
ist Zierde. -->
<div class="chat__suche" id="suche-zeile" hidden>
<input type="search" id="suche" placeholder="Name oder Gruppe …"
aria-label="Gespräche durchsuchen" autocomplete="off" />
</div>
<ul class="chat__liste" id="raeume" aria-live="polite"></ul>
<p class="chat__leer" id="liste-leer" hidden>
Noch keine Gespräche. Mit <strong>Neu</strong> schreibst du der
ersten Person.
</p>
</section>
<!-- ---------- Rechts: der Verlauf ---------- -->
<section class="chat__spalte chat__spalte--verlauf" aria-labelledby="verlauf-titel">
<!-- Der Kopf trägt am Handy den Zurück-Weg zur Liste. -->
<div class="chat__kopf chat__kopf--verlauf">
<button type="button" class="chat__zurueck" id="zur-liste" aria-label="Zurück zu den Gesprächen">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 5.5 8 12l6.5 6.5" /></svg>
</button>
<div class="chat__kopf-text">
<h2 class="chat__titel" id="verlauf-titel">Wähle ein Gespräch</h2>
<p class="chat__unter" id="verlauf-unter"></p>
</div>
</div>
<!-- aria-live="polite": Ein Vorleseprogramm sagt neue Nachrichten
an, ohne den Nutzer mitten im Satz zu unterbrechen. -->
<div class="chat__verlauf" id="verlauf" role="log" aria-live="polite" aria-relevant="additions">
<p class="chat__leer" id="verlauf-leer">
Links ein Gespräch auswählen – oder mit <strong>Neu</strong> eines anfangen.
</p>
</div>
<!-- Das Eingabefeld. Ein <form>, damit Enter abschickt, ohne
dass dafür Code nötig wäre. -->
<form class="chat__eingabe" id="schreiben" hidden>
<label class="chat__eingabe-schild" for="text">Nachricht</label>
<!-- KURZER PLATZHALTER. Hier stand der Hinweis "Enter schickt,
Umschalt+Enter macht eine neue Zeile" -- zwei Fehler auf
einmal: Am Handy brach er auf zwei Zeilen um und schob das
Feld halb unter den Bildschirmrand, UND er stimmte dort
nicht: Auf Geräten ohne Tastatur schickt Enter absichtlich
nicht, sonst käme man nie zu einer zweiten Zeile.
Die Tastenbelegung steht jetzt im title -- sie ist ein
Hinweis für Wiederkehrer, keine Aufforderung. -->
<textarea id="text" rows="1" maxlength="4000"
placeholder="Nachricht schreiben …"
title="Enter schickt ab, Umschalt+Enter macht eine neue Zeile"></textarea>
<button type="submit" class="chat__senden" id="senden" aria-label="Abschicken">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 12l16-7-7 16-2.5-6.5z" />
</svg>
</button>
</form>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
</section>
</div>
</main>
<!-- Neues Gespräch. Beides in einem Dialog: Wer eine Person anklickt,
schreibt ihr; wer mehrere anhakt, legt eine Gruppe an. Zwei
getrennte Dialoge hätten die Frage "Einzeln oder Gruppe?" VOR die
eigentliche Absicht gestellt. -->
<dialog class="dialog" id="neu-dialog">
<form method="dialog" id="neu-form" class="neu neu--blank">
<h2 class="dialog__titel">Neues Gespräch</h2>
<p class="dialog__unter">
Eine Person antippen, um ihr zu schreiben. Mehrere auswählen ergibt
eine Gruppe.
</p>
<div class="chat-wahl" id="partner"></div>
<!-- Erscheint erst ab zwei Ausgewählten -- vorher wäre ein
Gruppenname eine Frage ohne Anlass. -->
<div class="neu__zeile" id="gruppenname-zeile" hidden>
<label class="feld-schild" for="gruppenname">Name der Gruppe</label>
<input id="gruppenname" maxlength="80" placeholder="z. B. Luna &amp; Betreuung" />
</div>
<p class="fehler" id="neu-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="submit" class="knopf knopf--klein" id="neu-los" disabled>Schreiben</button>
<button type="button" class="abmelden" id="neu-zu">Abbrechen</button>
</div>
</form>
</dialog>
<script src="assets/js/bereiche.js?v=202609070507"></script>
<script src="assets/js/kopf.js?v=202609070507"></script>
<script src="assets/js/glocke.js?v=202609070507"></script>
<script src="assets/js/chat.js?v=202609070507"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink