Die Bildschau und 2520 Farben statt 360
=== 1. BILDER OEFFNEN SICH MITTIG, MIT HUSKY UND HASE ===
Filipe: "wenn man bilder aufmacht, will ich dass die in der mitte sind.
beim hochformat soll links der husky sein und rechts der hase und beim
querformat soll oben dogfather und unten team dogi stehen da wo platz
ist ... ich will nicht dahin geschmissen sondern was richtig geiles mit
einem geilen hintergrund."
WAS VORHER PASSIERTE, und es war kein Fehler im Code: Der Klick fuehrte
auf die DATEI. Was man dann sah, war die eingebaute Bildanzeige des
Browsers -- schwarzer Grund, Bild oben links in der Ecke, auf seinem
Bildschirmfoto 1200 px Schwarz daneben. Eine Datei hat keine
Gestaltung. Wer Gestaltung will, muss eine SEITE zeigen.
Die Schau liegt jetzt UEBER dem Chat. Escape bringt einen dorthin
zurueck, wo man war, und das Gespraech laeuft im Hintergrund weiter --
ein zweiter Tab braeuchte eine eigene Seite, eine eigene Anmeldung und
einen eigenen Weg zurueck.
DER WEG IN DEN TAB BLEIBT TROTZDEM. Der Verweis hat unveraendert
`href`, `target` und `rel`; mittlere Maustaste, "In neuem Tab oeffnen"
und Herunterladen gehen wie seit jeher. Abgefangen wird nur der
gewoehnliche Klick -- und auch der nur, wenn die Schau geladen ist.
Wer Strg, Umschalt oder Befehl haelt, bekommt den alten Weg; das sind
die Griffe, die Leute seit zwanzig Jahren benutzen.
DIE BEGLEITER STEHEN DA, WO PLATZ IST -- und die Antwort darauf wird
GEMESSEN, nicht geschaetzt: nicht die Fensterbreite, sondern der Rest
neben dem Bild, nachdem es eingepasst ist. Eine Schwelle wie "ab
1100 px" waere fuer ein 3:4-Foto richtig und fuer ein 9:16-Foto auf
demselben Schirm falsch. Unter 170 px bleibt der Husky weg: Eine Figur,
die ein Streifen ist, steht besser nicht da.
Husky und Hase sind eigens verkleinert (2,1 MB und 1,0 MB werden 40 kB
und 32 kB) und bekommen weiche Raender -- ihr Hintergrund ist dunkel,
aber nicht durchsichtig; als Rechteck saehe man zwei Kaesten.
Der erste Anlauf spiegelte den Hasen, damit beide "nach innen" schauen
-- ein alter Reflex aus dem Plakatsatz. Auf dem Probebild stand danach
"Hasi Dog" seitenverkehrt auf seinem Hoodie. Schrift im Bild spiegelt
man nie.
pruef-chat-anhaenge bekommt 14 neue Punkte, darunter beide Formate und
zwei Gegenproben: Strg+Klick oeffnet die Schau NICHT (sonst hiesse "sie
geht auf" nur, dass der alte Weg verloren ist), und im Hochformat liegt
KEINE der Figuren ueber dem Foto.
NEBENBEFUND, den die Pruefung gefunden hat: Die Sprachnachricht war auf
165 px geschrumpft -- zu schmal fuer den Schieber. Ursache war keine
Aenderung an ihr, sondern eine Folge: Die Blase ist so breit wie ihr
breitester Inhalt, und seit die Handgriffe darunter Zeichen statt
Woerter sind (123 statt ueber 400 px), bestimmt das Abspielgeraet die
Breite selbst. Eine Reihe kuerzer zu machen hat einen Schieber schmaler
gemacht, drei Bildschirme weiter.
=== 2. DER FARBKREIS: HELLER UND DUNKLER ===
Filipe: "dieser kreis muss viel perfekter sein. ich will dass die leute
auch heller und dunkler aussuchen koennen ... so dass die leute viel
krassere moeglichkeiten haben."
WARUM DAS BIS HEUTE NICHT GING: Die 360 Toene liegen alle auf DERSELBEN
Leuchtdichte. Das war kein Zufall -- solange die Blase in der gewaehlten
Farbe stand, musste jede dieser Flaechen dieselbe Schrift tragen. Eine
hellere Farbe zuzulassen hiesse damals: irgendwo wird eine Nachricht
unlesbar.
SEIT DEM 25.09.2026 IST DIE BEDINGUNG EINE ANDERE. Die Blase ist fuer
alle dunkles Glas; der Ton ist Kante und NAME. Damit faellt die alte
Regel weg, und an ihre Stelle tritt: der Ton muss als Name auf dem
Blasengrund lesbar bleiben.
DIE ZAHLEN SIND GEMESSEN, NICHT GEWAEHLT. Ueber alle 360 Winkel, jeweils
der schlechteste Fall:
40 % schwarz 4,468 -- unter der Schwelle, faellt raus
34 % schwarz 4,555 -- ginge, aber ohne Reserve
30 % schwarz 4,619 <- die dunkelste Stufe
0 % 5,12 <- die Mitte, der alte Kreis
55 % weiss 9,6 <- die hellste Stufe
Sieben Stufen, 2520 Farben statt 360. pruef-chat-neu rechnet jede
einzelne nach -- die knappste hat 2,6 Prozent Reserve.
DIE ALTEN SCHLUESSEL BLEIBEN GUELTIG. "ton-214" heisst weiterhin genau
dieselbe Farbe; die Stufe steht als Zusatz dahinter ("ton-214-s6"). Wer
seit dem 23.09. eine Farbe traegt, traegt nach diesem Umbau dieselbe.
DIE PROBE IN DER MITTE ZEIGT ENDLICH, WAS MAN BEKOMMT. Dort stand eine
gefuellte Flaeche mit heller Schrift -- so sah die Blase bis heute frueh
aus. Jetzt steht dort derselbe Blasengrund und darauf der Ton als Name,
mit genau der Rechnung aus chat.css. Das ist nicht nur ehrlicher, es
macht die sieben Stufen erst moeglich: Eine gefuellte Flaeche muesste
Schrift tragen, und bei sehr hellen Toenen schafft das keine der beiden
Schriftfarben mehr (4,1 statt noetiger 7). Als Name auf dunklem Grund
ist derselbe helle Ton besonders gut lesbar (8,0).
Der Erklaersatz im Fenster war damit falsch geworden ("Alle Toene
leuchten gleich stark") und sagt jetzt, was stimmt.
ZWEI PRUEFUNGEN WURDEN GENAUER:
pruef-chat-neu mass den HINTERGRUND der Mitte -- eine Darstellung,
die es nicht mehr gibt. Sie misst jetzt die Schriftfarbe und rechnet
die Mischung nach. Dabei stolperte sie ueber eine dritte
Farbschreibweise: Chromium gibt `color-mix`-Ergebnisse als
`color(srgb 0.676 0.645 0.504)` zurueck. Die Zeile war rot, obwohl
die Farbe auf den Bildpunkt genau stimmte -- ein Fehlalarm, der
teurer ist als ein echter Befund, weil man am Aussehen sucht und der
Fehler im Lesegeraet liegt.
Und sie prueft nicht mehr 360, sondern 360 x 7 -- nur den Grundton zu
messen hiesse, sechs Siebtel ungeprueft auszuliefern.
Geprueft: pruef-chat-anhaenge (123), pruef-chat-neu (36),
pruef-chatkachel (40), pruef-chat, pruef-chat-ausbau (69),
pruef-chat-optik, pruef-tippziele (11), pruef-css-klassen.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+76
-23
@@ -12,26 +12,26 @@
|
||||
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
|
||||
eine Flaeche sind statt zweier. -->
|
||||
<meta name="theme-color" content="#06090f" />
|
||||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609250404" />
|
||||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609250404" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609250404" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609250404" />
|
||||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609250435" />
|
||||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609250435" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609250435" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202609250435" />
|
||||
<!-- 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=202609250404" />
|
||||
<link rel="stylesheet" href="assets/css/chat.css?v=202609250404" />
|
||||
<link rel="stylesheet" href="assets/css/module.css?v=202609250404" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609250435" />
|
||||
<link rel="stylesheet" href="assets/css/chat.css?v=202609250435" />
|
||||
<link rel="stylesheet" href="assets/css/module.css?v=202609250435" />
|
||||
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
|
||||
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
|
||||
Grundzustand. Auf der Adresse von Team Dogi 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=202609250404" />
|
||||
<link rel="stylesheet" href="assets/css/haus.css?v=202609250435" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -102,11 +102,23 @@
|
||||
fuer dieselbe Sache. -->
|
||||
<dialog class="nachfrage chat-kachelwahl" id="kachel-wahl">
|
||||
<h2 class="nachfrage__titel">Deine Kachel</h2>
|
||||
<!-- DER SATZ WAR SEIT HEUTE FALSCH (25.09.2026).
|
||||
|
||||
„Alle Töne leuchten gleich stark" stimmte, solange es
|
||||
360 Farben auf einer Leuchtdichte gab. Mit den sieben
|
||||
Helligkeiten stimmt es nicht mehr – und ein Satz, der
|
||||
etwas verspricht, was man daneben anders sieht, ist
|
||||
schlimmer als keiner.
|
||||
|
||||
WAS WEITERHIN STIMMT UND WICHTIGER IST: Jede der 2520
|
||||
Farben bleibt als Name auf der Blase lesbar. Das ist
|
||||
nachgerechnet (pruef-chat-neu), und genau das sagt der
|
||||
neue Satz. -->
|
||||
<p class="nachfrage__text">
|
||||
So sehen deine Nachrichten für alle anderen aus. Dreh am Ring,
|
||||
bis dir die Farbe gefällt – in der Mitte siehst du sofort, wie
|
||||
es aussieht. Alle Töne leuchten gleich stark, damit die Schrift
|
||||
überall gleich gut lesbar bleibt.
|
||||
So sieht dein Name an deinen Nachrichten aus. Dreh am Ring
|
||||
für den Farbton, tipp unten auf heller oder dunkler – in der
|
||||
Mitte siehst du sofort, wie es aussieht. Jede der 2520
|
||||
Farben bleibt lesbar, egal welche du nimmst.
|
||||
</p>
|
||||
|
||||
<!-- ================================================================
|
||||
@@ -146,6 +158,36 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================================
|
||||
HELLER UND DUNKLER (25.09.2026)
|
||||
|
||||
Filipe: „dieser kreis muss viel perfekter sein. ich will
|
||||
dass die leute auch heller und dunkler aussuchen koennen.
|
||||
perfektionier das bitte viel krasser. viel
|
||||
profissioneller. so dass die leute viel krassere
|
||||
moeglichkeiten haben."
|
||||
|
||||
EIN ZWEITER SCHIEBER UND KEIN ZWEITER KREIS: Farbton und
|
||||
Helligkeit sind zwei Achsen derselben Farbe. Ein Rad für
|
||||
die eine, eine Leiste für die andere – so erkennt man auf
|
||||
einen Blick, was rund läuft und was von dunkel nach hell.
|
||||
|
||||
`role="slider"` wie der Ring darüber: Es ist ein Wert mit
|
||||
sieben Stufen, keine Auswahl aus sieben Dingen. Wer mit
|
||||
der Tastatur kommt, benutzt dieselben Pfeiltasten.
|
||||
|
||||
DIE STUFEN BAUT DAS SKRIPT, nicht diese Datei: Wie viele
|
||||
es gibt und wie stark sie mischen, steht in
|
||||
chat-kreis-stufen.js und kommt vom Server. Feste Felder
|
||||
hier wären eine zweite Wahrheit, die bei der nächsten
|
||||
Messung falsch wird. -->
|
||||
<div class="kachelhell" id="kachelhell">
|
||||
<span class="kachelhell__schild" id="kachelhell-schild">Helligkeit</span>
|
||||
<div class="kachelhell__leiter" id="kachelhell-leiter" role="slider"
|
||||
tabindex="0" aria-labelledby="kachelhell-schild"
|
||||
aria-valuemin="1" aria-valuemax="7" aria-valuenow="4"></div>
|
||||
</div>
|
||||
|
||||
<!-- Was auf dem Ring nicht vorkommt: Grau hat keinen Farbton,
|
||||
und Babyblau ist die eine helle Kachel mit eigener,
|
||||
dunkler Schrift. Beide gehören weiter dazu. -->
|
||||
@@ -697,25 +739,36 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script src="assets/js/bereiche.js?v=202609250404"></script>
|
||||
<script src="assets/js/bereiche.js?v=202609250435"></script>
|
||||
<!-- TEXTFORM VOR ALLEM ANDEREN (21.09.2026): chat.js und bereich.js
|
||||
fragen beim Zeichnen nach `window.Textform`. Kaeme sie spaeter,
|
||||
waere die erste gezeichnete Nachricht ohne Gestaltung -- und das
|
||||
faellt nur dem auf, der genau hinsieht. KEIN `defer`, damit sie
|
||||
wirklich vor den anderen dasteht. -->
|
||||
<script src="assets/js/textform.js?v=202609250404"></script>
|
||||
<script src="assets/js/meldung.js?v=202609250404" defer></script>
|
||||
<script src="assets/js/hochladen.js?v=202609250404" defer></script>
|
||||
<script src="assets/js/nachfrage.js?v=202609250404" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609250404" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609250404"></script>
|
||||
<script src="assets/js/glocke.js?v=202609250404"></script>
|
||||
<script src="assets/js/textform.js?v=202609250435"></script>
|
||||
<script src="assets/js/meldung.js?v=202609250435" defer></script>
|
||||
<script src="assets/js/hochladen.js?v=202609250435" defer></script>
|
||||
<script src="assets/js/nachfrage.js?v=202609250435" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202609250435" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202609250435"></script>
|
||||
<script src="assets/js/glocke.js?v=202609250435"></script>
|
||||
<!-- ANRUF VOR CHAT (18.09.2026): anruf.js stellt `window.anrufStarten`
|
||||
bereit, und chat.js baut die Knoepfe nur, wenn es das gibt.
|
||||
Andersherum waere die Reihenfolge eine stille Abhaengigkeit --
|
||||
die Knoepfe fehlten, und niemand wuesste warum. -->
|
||||
<script src="assets/js/anruf.js?v=202609250404"></script>
|
||||
<script src="assets/js/chat.js?v=202609250404"></script>
|
||||
<script src="assets/js/installieren.js?v=202609250404" defer></script>
|
||||
<script src="assets/js/anruf.js?v=202609250435"></script>
|
||||
<!-- DIE BILDSCHAU (25.09.2026). Eigene Datei, weil sie nichts vom
|
||||
Chat weiss: Sie bekommt einen Weg und einen Namen und zeigt ein
|
||||
Bild. Jede andere Seite mit Fotos kann sie ebenso benutzen, ohne
|
||||
dass etwas doppelt gebaut wird.
|
||||
|
||||
VOR chat.js und ohne `defer`: chat.js haengt den Klick an und
|
||||
fragt dabei `window.Bildschau`. Kaeme die Schau spaeter, waere
|
||||
sie beim ersten Foto noch nicht da -- und der erste Klick ginge
|
||||
wie frueher in den Tab. Ein Fehler, der nur beim ERSTEN Mal
|
||||
auftritt, ist der, den man nie nachstellen kann. -->
|
||||
<script src="assets/js/bildschau.js?v=202609250435"></script>
|
||||
<script src="assets/js/chat.js?v=202609250435"></script>
|
||||
<script src="assets/js/installieren.js?v=202609250435" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user