DogFatherGitandClaude Opus 5
dbb19f69e9
Filipe: "ich will dass diese kachel komplett speziell ist, das
hochwertigste und geilste auf der ganzen website ... auch das gleiche
prinzip fuer die uhr, noch vieeeel spezieller. hol die besten skills
von den besten skills dafuer."
Also keine weitere Schicht Lack, sondern die Mittel, an denen man ein
teures Instrument WIRKLICH erkennt.
DIE UHR -- VIER MITTEL AUS DER UHRMACHEREI
1. GUILLOCHIERTES ZIFFERBLATT. Guillochieren ist das Verfahren, mit
dem seit zweihundert Jahren hochwertige Blaetter gemacht werden:
Eine Maschine schneidet ein feines regelmaessiges Muster ins
Metall, und weil jede Rille das Licht anders zurueckwirft, LEBT
die Flaeche. Hier aus Strahlen vom Mittelpunkt und Ringen darum,
beide bei vier Prozent Deckkraft -- wer das Muster einzeln
erkennt, hat es zu laut gemacht.
2. EIN AUFGESETZTER ZWOELF-INDEX. Auf einem echten Blatt ist die
Zwoelf nie nur ein Strich wie die anderen: Sie ist das, woran das
Auge sich ausrichtet. Ein Keil in Hausrot mit heller Kante.
3. DIE PERLE AM KOPF DES SEKUNDENBOGENS. Sie laeuft einmal je Minute
herum und ist das Einzige an der Uhr, das sich BEWEGT statt zu
wachsen. Ein Bogen zeigt einen Stand, eine laufende Perle zeigt
Leben. Sie springt im Sekundentakt statt zu gleiten -- ehrlicher
(die Anzeige ist digital) und eine Bildberechnung je Sekunde statt
sechzig.
4. GRAVIERTE ZIFFERN. Ein dunkler Saum oben, ein heller unten -- das
Lichtverhalten einer Vertiefung. Die Ziffern stehen damit IM Blatt
statt darauf.
DIE KONSOLE -- DAS METALL FAENGT DAS LICHT
Auf den Kacheln leuchtet das Licht in der Farbe der Kategorie; dort ist
es ein Hinweis. Auf der Konsole waere das falsch -- ein farbiger
Schleier auf gebuerstetem Metall sieht aus wie eine Folie darauf.
Metall zeigt seine Form ueber die SPIEGELUNG: weiss, schmal, hart an
der Kante, und sie wandert mit dem Zeiger ueber die Fassung wie ein
Fenster, an dem man vorbeigeht. Erst dadurch sieht man, dass die
Fassung gewoelbt ist. Ein Standbild kann das nicht.
Dieselbe Falle wie heute Frueh dabei vermieden, diesmal vorher
bedacht: `.willkommen > *` haette dem Lichtelement wieder sein
`position: absolute` genommen -- jetzt `:not(.licht)`.
UND EIN FEHLER, DEN NUR DAS HANDY GEZEIGT HAT
Die Mulde der Uhr hing am Kasten daneben und war an dessen rechtem Rand
ausgerichtet. Am Rechner passte das; bei 412 px steht die Uhr mittig,
und die Mulde lag als dunkle Scheibe neben ihr. Sie entsteht jetzt aus
zwei Schattenringen der Uhr SELBST und ist damit konzentrisch bei jeder
Groesse -- die bessere Bauart, nicht nur die reparierte: Eine Fassung,
die man ausrichten muss, richtet irgendwann jemand falsch aus.
Zehn Pruefungen gelaufen, alle gruen. Rechner und Handy angesehen.
Co-Authored-By: Claude Opus 5 <[email protected]>
165 lines
7.3 KiB
HTML
165 lines
7.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>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=202609071449" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609071449" />
|
||
<!-- 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=202609071449" />
|
||
<link rel="stylesheet" href="assets/css/chat.css?v=202609071449" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609071449" />
|
||
</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 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 & 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=202609071449"></script>
|
||
<script src="assets/js/wahl.js?v=202609071449" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609071449"></script>
|
||
<script src="assets/js/glocke.js?v=202609071449"></script>
|
||
<script src="assets/js/chat.js?v=202609071449"></script>
|
||
</body>
|
||
</html>
|