DogFatherGitandClaude Opus 5
9c7952b5a3
Filipe: "die symbole und der text dadrin sollen groesser und noch
spezieller sein, und die symbole sollen auch 2-3 farben haben ... sollen
mehr leben haben, auch viel realistischere effekte."
NICHT DREI AUSGEDACHTE FARBEN, SONDERN DIE DREI EINES ECHTEN AUFBAUS
So wird jedes Produktfoto ausgeleuchtet, und aus demselben Grund sieht
es plastisch aus:
1 FUEHRUNGSLICHT, kalt, von oben links. Ein Spitzlicht ist nie
reinweiss -- es traegt die Farbe der Lampe, und die ist kuehl.
2 EIGENFARBE des Gegenstands: der Ton seiner Kachel.
3 STREULICHT, warm, von unten. Licht, das vom Untergrund
zurueckkommt, ist waermer als das Hauptlicht. Genau dieser warme
Saum ist der Grund, warum ein Gegenstand im Bild STEHT statt zu
schweben.
Dazu die aelteste Regel der Malerei: warmes Licht, KUEHLE Schatten. Die
Seitenwaende der Zeichen kippen jetzt ins Blaue statt nur dunkler zu
werden. Und ein RANDLICHT auf der Lichtseite -- der schmale Streifen,
in dem das Fuehrungslicht die Kante streift. Ein Gegenstand ohne diese
Kante sieht immer ein wenig flach aus, und man kann meist nicht sagen,
warum.
ZWEI FEHLER DABEI, BEIDE ERST BEI FUENFFACHER VERGROESSERUNG SICHTBAR
* DAS WARME LICHT LAG UNTER DER FORM. Die Verlaeufe spannten ueber das
ganze 24er-Raster (y 2 bis 22); die Sprechblase des Chats reicht
aber nur von 5,5 bis 20,5. Der warme Stopp bei y 22 war damit
ausserhalb -- von den drei Lichtern kam genau eines an.
`objectBoundingBox` spannt den Verlauf jetzt ueber JEDES Teil
einzeln: Der Kalenderkorpus bekommt sein volles Licht, seine Fuesse
ebenfalls. So verhaelt sich ein echter Aufbau -- jedes Teil liegt im
selben Licht, nicht im selben Ausschnitt.
* DAS RANDLICHT WAR SCHMALER ALS DIE KONTUR DARUEBER und lag deshalb
vollstaendig darunter: gebaut, gezeichnet, unsichtbar. Jetzt 2,7
gegen 1,9 -- so schaut es oben links hervor.
GROESSER, WIE GEWUENSCHT
Plakette 58 -> 64 px (grosse Kachel 62 -> 70), Zeichen 29 -> 35 px
(gross 32 -> 39), Wasserzeichen 132 -> 156 px (gross 168 -> 196),
Name 1,06 -> 1,15 rem (gross 1,24 -> 1,38), Unterzeile 0,78 -> 0,845.
Auf dem Dashboard entsprechend.
UND DAS SCHILD WIRFT LICHT AUF SEINE KACHEL
Ein beleuchteter Gegenstand faerbt seine Umgebung. Ohne diesen Abfall
sieht selbst ein gut gebautes Schild aufgeklebt aus. Weit gestreut und
weit unter der Blendschwelle: Man soll ihn nicht sehen, man soll ihn
vermissen, wenn er fehlt.
Zehn Pruefungen gelaufen, alle gruen -- darunter Handy und Breiten,
weil groesserer Text der schnellste Weg zu einem Ueberlauf ist.
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=202609071550" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609071550" />
|
||
<!-- 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=202609071550" />
|
||
<link rel="stylesheet" href="assets/css/chat.css?v=202609071550" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609071550" />
|
||
</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=202609071550"></script>
|
||
<script src="assets/js/wahl.js?v=202609071550" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609071550"></script>
|
||
<script src="assets/js/glocke.js?v=202609071550"></script>
|
||
<script src="assets/js/chat.js?v=202609071550"></script>
|
||
</body>
|
||
</html>
|