Files
dogfather-universe/workspace/willkommen.html
T
DogFatherGitandClaude Opus 5 54d069c2b8 screen2: Die Aufgaben-Kachel ist Glitzer-Silber
"ich will dass diese kachel einen richtig geilen silber hat als farbe
bitte. mach es richtig geil, ein glitzer silber."

WARUM DUNKLES SILBER UND KEIN HELLES

"Silber" denkt man sich hell. Auf dieser Wand waere es das Ende der
Lesbarkeit: Die Beschriftung jeder Kachel ist HELL (--text), und eine
helle Flaeche darunter laesst davon nichts uebrig. Ein zweiter Satz
Schriftfarben nur fuer diese eine Kachel waere eine Sonderregel, die
beim naechsten Umbau niemand kennt.

Silber ist deshalb als METALL gebaut, nicht als Farbflaeche: Gunmetal,
dunkel und kuehl, mit hellen Kanten und einer Glanzbahn. Das ist, was
gebuerstetes Metall im Halbdunkel macht -- es liest sich sofort als
Silber, ohne zu blenden.

FUENF EBENEN, VON OBEN NACH UNTEN
  1. Der Lesesaum liegt ZUERST, also obenauf -- er ist der Grund,
     warum die Flaeche funkeln darf, ohne dass die Schrift leidet.
     Dieselbe Bauart wie bei der Regenbogen-Kachel.
  2. Das Funkeln: sechzehn helle Punkte, jeder mit Hof, unregelmaessig
     gesetzt (ein Raster saehe aus wie ein Muster, nicht wie Glitzer).
     STATISCH -- blinkende Punkte waeren genau das, was die Hausregel
     verbietet.
  3. Eine diagonale Glanzbahn.
  4. Gebuerstetes Metall: 3-px-Streifen bei 4,5 % Weiss. Man sieht es
     nicht als Streifen, man sieht es als Oberflaeche.
  5. Der Grundverlauf, oben heller als unten.

ALS EIGENES MERKMAL, NICHT ALS TON. Silber hat eine Buntheit nahe
null; als Ton eingetragen haette pruef-kachelfarben es zu Recht
abgelehnt (Mindestbuntheit 0,12). `ton: 13` bleibt deshalb stehen und
ist der Rueckfall -- genau so macht es die Willkommenskachel mit
`regenbogen`. Zwei Stellen tragen das Merkmal, weil die Kacheln fuer
die Modis aus dem Server kommen und die fuer alle anderen aus
bereiche.js.

NACH DEM ERSTEN BILD NACHGEBESSERT: Kantenlicht, Eckwinkel und
Schiene blieben gruen -- sie ziehen ihre Farbe aus `--ton`. Eine
gruene Linie um eine silberne Flaeche ist keine silberne Kachel.
`--ton` wird jetzt fuer diese eine Kachel ueberschrieben, NUR in der
Anzeige: `data-ton="13"` bleibt am Element, die Farbwerkzeuge rechnen
weiter mit Zahlen.

GEMESSEN am echten Bildschirm (pruef-kachelfarben): 32 Kacheln, kein
Paar sieht gleich aus, und jeder Kacheltext erreicht 4,5:1 --
schlechtester 5,86:1. Die silberne ist nicht darunter.

Mitgelaufen: pruef-kachelraster (15/0), pruef-css-klassen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-23 00:55:20 +02:00

88 lines
4.0 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>Willkommen · Team Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<!-- app.webmanifest, NICHT crew.webmanifest -- die Adresse biegt es um.
Der Server ersetzt den Pfad auf crew. an EINER Stelle
(crew-adresse.js). Wer hier das Crew-Manifest direkt nennt,
macht daraus eine zweite Stelle, die beim naechsten Umbau
vergessen wird. -->
<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=202609230053" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609230053" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609230053" />
<link rel="stylesheet" href="assets/css/start.css?v=202609230053" />
<link rel="stylesheet" href="assets/css/willkommen.css?v=202609230053" />
<link rel="stylesheet" href="assets/css/module.css?v=202609230053" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609230053" />
</head>
<!-- KOERPERKLASSE "start", NICHT "gate" (berichtigt 21.09.2026).
`body.gate` ist die Anmeldewand: `display:flex; align-items:center`,
gedacht fuer EINE zentrierte Karte. Damit standen Kopfleiste und
Inhalt NEBENEINANDER -- am Handy blieben dem Text 260 von 390
Pixeln, am Rechner klebte alles am rechten Rand. Gesehen hat das
kein gruener Haken, sondern das Bildschirmfoto. -->
<body class="start" data-ton="34" data-buehne="lounge">
<div class="schleier" aria-hidden="true"></div>
<header class="kopfleiste">
<button type="button" class="zurueck-knopf" id="zurueck">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg>
<span class="zurueck-knopf__text">Übersicht</span>
</button>
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Team&nbsp;Dogi</a> · Willkommen</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" id="haupt" aria-busy="true">
<!-- DIE BEGRÜSSUNG.
Der Name steht NICHT im HTML, sondern kommt vom Server -- eine
Seite, die jeder herunterlädt, soll keinen fremden Namen
enthalten. Bis er da ist, steht hier ein Satz, der auch ohne
Namen stimmt: "Willkommen!" ist nie falsch. -->
<section class="w-gruss">
<h1 class="w-gruss__titel" id="gruss">Willkommen!</h1>
<p class="w-gruss__rolle" id="rollentext" hidden></p>
<p class="w-gruss__was" id="einleitung-was"></p>
<p class="w-gruss__dazu" id="einleitung-dazu"></p>
</section>
<!-- Die Hinweise, die zur Rolle gehören und zu keiner Kachel. -->
<section class="w-hinweise" id="hinweise" hidden></section>
<!-- DIE KACHELN, ERKLÄRT. Sie werden aus derselben Liste gebaut wie
die Startseite -- deshalb steht hier nur der leere Behälter. -->
<section class="w-bereiche">
<h2 class="w-bereiche__titel">Was es hier gibt</h2>
<p class="w-bereiche__satz" id="bereiche-satz">
Jede Kachel, die für dich freigeschaltet ist — und wofür sie da ist.
Tipp eine an, um hinzugehen.
</p>
<div id="gruppen"></div>
</section>
<p class="w-laedt" id="laedt">Einen Moment …</p>
<p class="fehler" id="fehler" hidden></p>
</main>
<script src="assets/js/meldung.js?v=202609230053" defer></script>
<script src="assets/js/bereiche.js?v=202609230053" defer></script>
<script src="assets/js/wahl.js?v=202609230053" defer></script>
<script src="assets/js/nachfrage.js?v=202609230053" defer></script>
<script src="assets/js/installieren.js?v=202609230053" defer></script>
<script src="assets/js/kopf.js?v=202609230053" defer></script>
<script src="assets/js/glocke.js?v=202609230053" defer></script>
<script src="assets/js/willkommen.js?v=202609230053" defer></script>
</body>
</html>