DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Material statt Farbe -- Kacheln werden Gegenstaende, die Karte ein Bildschirm

Browse Source 
Filipe: "ich will dass alle kacheln viel geiler und spezieller aussehen,
viel realistischer" und "so dass der komplette von der kachel vom
hintergrund bild komplett bedeckt ist. ueberrasch mich."

DIE BILDER: BEARBEITET STATT ABGEDUNKELT.
Bis hierher tat der Bildbauer zwei Dinge -- kleiner rechnen und einen
schwarzen Schleier darueberlegen. Abdunkeln macht ein Bild aber nicht
ruhiger, sondern TOT: Es zieht jede Farbe zur Mitte, und uebrig bleibt
ein grauer Schleier mit einer Ahnung von Motiv.

Drei Dinge, die ein Fotograf zuerst anfasst, und keines davon ist
"dunkler":
  * KONTRAST -- Verkleinern MITTELT Bildpunkte; deshalb wirkt jedes
    verkleinerte Bild flauer als das Original, und deshalb schaerft man
    danach nach.
  * SAETTIGUNG -- holt das Rot der Chili und das Gruen der Blaetter
    zurueck, die der Schleier herausgewaschen hatte.
  * VIGNETTE -- der eigentliche Unterschied zwischen "Screenshot" und
    "Aufnahme". Ein Objektiv verliert zu den Ecken hin Licht; das Auge
    liest das als Tiefe. Sie ersetzt ausserdem einen Teil des flachen
    Schleiers: Dunkel wird, wo ohnehin nichts steht.
Der flache Schleier sinkt dadurch von 0,42 auf 0,26 -- heller UND
lesbar, weil die Vignette genau dort arbeitet, wo die Kacheln liegen.

DIE KACHELN: VIER DINGE, DIE EIN DING VON EINEM RECHTECK TRENNEN.
Sie hatten Farbverlauf, Lichtkante und ein Licht, das dem Zeiger folgt --
und blieben Rechtecke mit Farbe darin. Es fehlten:
  1. GEWICHT. Ein Ding, das auf etwas liegt, wirft einen Schatten, auch
     wenn es niemand anfasst. Den gab es nur beim Ueberfahren.
  2. MATERIALSTAERKE. Ein Blech hat oben eine Licht- UND unten eine
     Schattenkante. Nur die obere ergibt einen aufgeklebten Strich.
  3. KOERNUNG. Perfekt glatte Verlaeufe kommen in der Natur nicht vor,
     und das Auge merkt das, ohne es benennen zu koennen. Drei Prozent
     Rauschen genuegen -- aus einem SVG-Filter als Adresse, also ohne
     Datei und ohne zusaetzliche Anfrage.
  4. DURCHSICHT. Hinter den Kacheln liegt jetzt ein aufwendiges Bild.
     Eine deckende Flaeche verdeckt es, eine mattierte nimmt seine Farbe
     auf -- erst dadurch gehoeren beide zusammen.
Beim Ueberfahren wird die Kachel nicht heller, sondern kommt NAEHER:
Sie steigt, ihr Schatten wird groesser und weicher (der Abstand zum
Untergrund waechst). So verhaelt sich ein angehobener Gegenstand.

DIE ANMELDEKARTE: EIN GERAET STATT EINES BILDES AN DER WAND.
Sie sass mit Abstand in der gemalten Tafel -- zwei Rahmen ineinander,
dazwischen schwarze Leere. Jetzt geht sie bis unter das Gluehen des
Neonrahmens: Der Rahmen ist das Gehaeuse, die Karte der eingeschaltete
Bildschirm. Sie leuchtet von den Kanten herein in den Farben des Rahmens
(rot oben links, blau unten rechts), traegt eine Glasscheibe als sehr
schwache Spiegelung und dieselbe Koernung. Die Rollen sind Tasten
geworden: Materialstaerke oben hell, unten dunkel, beim Druecken sinken
sie ein, und die gewaehlte ist beleuchtet statt eingefaerbt.
Alle Angaben bleiben -- vier Rollen mit Beschreibung, Codefeld, Auge,
Rollenhinweis, Fusszeile. "Hochwertiger" heisst nicht "weniger drin".

EIN ECHTER FUND DABEI: --text-still lag ploetzlich bei genau 4,50:1
statt der noetigen 4,5. Der Ton war am 01.09. gegen die DAMALIGE,
dunklere Buehne gemessen. Wer den Hintergrund heller macht, muss die
leiseste Schrift nachziehen -- sonst haette man den Aufwand auch lassen
koennen. Erkannt daran, dass die Zahl sich bei zwei Schleier-Aenderungen
NICHT bewegte: Die Pruefung rechnet mit der CSS-Farbe.

Gemessen statt angesehen: Kontrast an echten Bildpunkten (pruef-buehne),
neun Bildschirmbreiten, drei Handygroessen, Ladezeit und Datenvolumen,
Klassen, Struktur, Startseite -- alles gruen. Die Seiten ueber dem
CLS-Zielwert sind nebenbei von sieben auf vier gesunken.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-07 02:06:08 +02:00
co-authored by Claude Opus 5
parent 8107b97379
commit 3914adf46c
57 changed files with 688 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/gate.css
+236 -5
View File
@@ -37,7 +37,19 @@
reiner Tinte. Immer noch deutlich leiser als der Haupttext, aber
lesbar -- und das gilt jetzt fuer JEDE Seite, nicht nur fuer die
mit dem Hintergrundbild. */
--text-still: #75859a;
/* 07.09.2026: #75859a -> #7f8fa6.
Der alte Wert war am 01.09. gegen die DAMALIGE Buehne gemessen
und lag dort bei 4,95:1. Seit die Hintergruende Kontrast,
Saettigung und eine Vignette statt eines flachen Schleiers
bekommen haben, sind sie heller -- und derselbe Ton fiel auf
4,50:1, also genau auf die Grenze. Gemessen von pruef-buehne
an echten Bildpunkten, nicht an der Farbangabe.
Das ist der Preis dafuer, dass das Motiv jetzt zu sehen ist:
Wer den Hintergrund heller macht, muss die leiseste Schrift
nachziehen. Die Alternative waere gewesen, das Bild wieder
zuzudecken -- dann haette man den Aufwand auch lassen koennen. */
--text-still: #7f8fa6;
--akzent: #3fbdf5; /* aus dem Neon des Motivs, entsättigt */
--akzent-tief: #1f7fb0;
@@ -1148,10 +1160,25 @@ body.gate {
Bildschirmfoto bei 1280, 1440 und 1920 nachgesehen. Die Rohwerte
der Messung stehen daneben, damit man den Unterschied sieht.
gemessen hier */
--tafel-links: 57.49%; /* 58.59% -1.10 */
--tafel-oben: 13.60%; /* 12.88% +0.72 */
--tafel-breite: 35.70%; /* 34.73% +0.97 */
--tafel-hoehe: 62.50%; /* 63.98% -1.48 */
/* 07.09.2026 -- Wunsch Filipe: "so dass der komplette von der kachel
vom hintergrund bild komplett bedeckt ist."
Bis hierher sass die Karte MIT ABSTAND in der Tafel: Der gemalte
Rahmen blieb rundum sichtbar, und dazwischen schimmerte die leere
schwarze Flaeche durch. Das sah aus wie ein Bild in einem Rahmen --
zwei Dinge. Gewollt ist EINS: Die Karte IST die Tafel, ihr Rand
liegt genau auf der Innenkante des Neonrahmens.
Deshalb wird jetzt bis an die Kante gegangen, plus einen halben
Prozentpunkt darueber hinaus: Der Rahmen ist im Bild weich (er
glueht), und eine Karte, die genau an der Messkante endet, laesst
dort einen dunklen Saum stehen. Ein halber Prozentpunkt Ueberlappung
schiebt ihre Kante unter das Glühen -- man sieht nur noch Rahmen und
Karte, nichts dazwischen. */
--tafel-links: 57.00%;
--tafel-oben: 13.00%;
--tafel-breite: 36.60%;
--tafel-hoehe: 63.70%;
}
/* Vorgabe: Der Anker tut nichts. Er wird erst dort zur Schablone, wo
@@ -1292,3 +1319,207 @@ body.gate {
@media (min-width: 1700px) and (min-height: 900px) {
.tafel { padding: 2.2em 2em 1.8em; }
}
/* Dieselbe Koernung wie auf der Startseite -- sie steht dort in
start.css, und die Anmeldeseite laedt start.css nicht. Ein SVG-
Filter als Adresse: keine Datei, keine zusaetzliche Anfrage. */
:root {
--koernung:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.55'/%3E%3C/svg%3E");
}
/* =====================================================================
DIE KARTE ALS BILDSCHIRM IM RAHMEN (07.09.2026)
Wunsch Filipe: "veränder auch die kachel. mach sie viel geiler und
viel krasser. mit allen infos die da sind aber mach sie richtig hoch
profissionel, hochwertig und ultra geil aber so dass der komplette von
der kachel vom hintergrund bild komplett bedeckt ist."
---------------------------------------------------------------------
DIE IDEE
Im Motiv steht ein leerer Rahmen mit Neonkante -- rot oben links,
blau unten rechts. Bisher lag darin eine Karte mit eigenem Rand: zwei
Rahmen ineinander, und dazwischen schwarze Leere. Das liest sich als
"Bild an einer Wand".
Gewollt ist ein GERÄT: Der Rahmen im Bild ist das Gehäuse, die Karte
ist der eingeschaltete Bildschirm darin. Ein Bildschirm hat drei
Eigenschaften, die ein Kasten nicht hat, und alle drei sind hier
gebaut:
1. ER LEUCHTET VON INNEN. Nicht gleichmäßig -- oben mehr, weil dort
die Anzeige beginnt. Ein schwacher Schein in der Rahmenfarbe
kriecht von den Kanten herein, so wie Licht aus einem Panel in
sein Gehäuse fällt.
2. ER HAT EINE SCHEIBE. Über allem liegt eine sehr schwache,
diagonale Spiegelung -- die Glasscheibe davor. Sie ist der
Unterschied zwischen "Fläche mit Farbe" und "etwas hinter Glas".
3. ER HAT STRUKTUR. Dieselbe Körnung wie die Kacheln der Startseite
(siehe start.css). Ohne sie bleibt jeder Verlauf zu glatt für
eine echte Oberfläche.
Die Rollen-Knöpfe werden dabei zu TASTEN: Materialstärke oben hell,
unten dunkel, beim Drücken sinken sie ein. Die gewählte Taste ist
nicht nur eingefärbt, sondern beleuchtet -- sie hat einen Lichtrand
nach innen, als läge eine Diode darunter.
---------------------------------------------------------------------
WAS DABEI NICHT VERLOREN GEHT
Alle Angaben bleiben, wie sie waren: die vier Rollen mit ihren
Beschreibungen, das Codefeld mit dem Auge, der Hinweis, welche Rolle
gewählt ist, und die Fußzeile zur Verschlüsselung. "Hochwertiger"
heißt hier nicht "weniger drin" -- eine Anmeldemaske, die etwas
verschweigt, ist keine bessere, sondern eine unvollständige.
===================================================================== */
@media (min-width: 1100px) and (min-height: 620px) and (min-aspect-ratio: 7/5) {
.tafel {
/* KEIN EIGENER RAHMEN MEHR. Das Gehäuse ist im Bild; ein zweiter
Rand daneben wäre genau der Doppelrahmen, der weg soll. Was
bleibt, ist eine hauchfeine Innenkante -- die Fuge zwischen
Scheibe und Gehäuse. */
border: 0;
border-radius: 22px;
background:
/* Der Schein von den Kanten herein, in den Farben des Rahmens:
rot oben links, blau unten rechts. Er ist das, was die Karte
mit dem Bild verbindet, statt sie davorzusetzen. */
radial-gradient(120% 90% at 4% 0%, rgba(224, 66, 66, .13), transparent 58%),
radial-gradient(120% 90% at 98% 100%, rgba(58, 150, 235, .15), transparent 60%),
/* Die Anzeige selbst: oben eine Spur heller. */
linear-gradient(178deg, rgba(14, 20, 32, .80), rgba(6, 9, 16, .88) 62%);
backdrop-filter: blur(26px) saturate(128%);
-webkit-backdrop-filter: blur(26px) saturate(128%);
box-shadow:
/* Die Fuge: innen ein feiner heller Strich oben, dunkel unten. */
inset 0 1px 0 rgba(255, 255, 255, .09),
inset 0 -1px 0 rgba(0, 0, 0, .5),
/* Und ein sehr weicher Schein nach innen, damit die Kante nicht
hart abbricht, sondern ins Gehäuse übergeht. */
inset 0 0 44px -18px rgba(0, 0, 0, .9);
overflow: hidden;
}
/* DIE SCHEIBE. Ein einziger, sehr weicher Streifen von links oben --
kaum zu sehen, aber ohne ihn wirkt die Fläche wie Papier. */
.tafel::after {
content: ""; position: absolute; inset: 0; z-index: 0;
pointer-events: none; border-radius: inherit;
background:
linear-gradient(122deg,
rgba(255, 255, 255, .07) 0%,
rgba(255, 255, 255, .018) 14%,
rgba(255, 255, 255, 0) 32%),
var(--koernung);
background-size: auto, 140px 140px;
opacity: .9;
}
/* Der Inhalt liegt über der Scheibe -- Schrift durch eine Spiegelung
zu lesen wäre anstrengend. */
.tafel > * { position: relative; z-index: 1; }
/* ---- Die Rollen als Tasten ---------------------------------------- */
.tafel .rolle {
background:
linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
border: 1px solid rgba(150, 186, 220, .13);
border-radius: 13px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .09),
inset 0 -1px 0 rgba(0, 0, 0, .38),
0 1px 2px rgba(0, 0, 0, .35);
transition: border-color var(--tempo), background var(--tempo),
box-shadow var(--tempo), transform .09s ease;
}
.tafel .rolle:hover {
background:
linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022));
border-color: rgba(150, 186, 220, .24);
}
/* Beim Drücken sinkt die Taste ein: Der Schatten unter ihr
verschwindet, der innere kommt von oben. Genau das macht ein
echter Knopf. */
.tafel .rolle:active {
transform: translateY(1px);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
}
/* DIE GEWÄHLTE TASTE IST BELEUCHTET, nicht nur eingefärbt. Der
Lichtrand nach innen liest sich wie eine Diode darunter -- und er
sagt deutlicher als jede Farbe, welche gerade aktiv ist. */
.tafel .rolle[aria-checked="true"] {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--akzent) 22%, transparent),
color-mix(in srgb, var(--violett) 13%, transparent));
border-color: color-mix(in srgb, var(--akzent) 62%, transparent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .16),
inset 0 0 20px -8px color-mix(in srgb, var(--akzent) 90%, transparent),
0 0 20px -10px color-mix(in srgb, var(--akzent) 75%, transparent);
}
/* ---- Das Codefeld: eine eingelassene Rinne ------------------------- */
.tafel #code {
background: rgba(0, 0, 0, .34);
border-color: rgba(150, 186, 220, .14);
border-radius: 12px;
/* Eingelassen statt aufgesetzt: Schatten von oben INNEN. Das ist
dasselbe Licht wie überall, nur eine Vertiefung statt einer
Erhebung -- und deshalb erkennt man sofort, dass man hier
hineinschreibt. */
box-shadow:
inset 0 2px 5px -2px rgba(0, 0, 0, .7),
inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.tafel #code:focus {
background: rgba(0, 0, 0, .28);
box-shadow:
inset 0 2px 5px -2px rgba(0, 0, 0, .7),
0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
}
/* ---- Der Anmelde-Knopf: die Haupttaste ----------------------------- */
.tafel .knopf {
border-radius: 12px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 -1px 0 rgba(0, 0, 0, .35),
0 6px 18px -10px color-mix(in srgb, var(--akzent) 85%, transparent);
}
.tafel .knopf:active { transform: translateY(1px); }
/* ---- Der Kopf bekommt Luft nach unten ------------------------------ */
/* Eine feine Trennlinie unter dem Titel: Sie gliedert die Karte in
"wer sind wir" und "was tust du hier", ohne ein Wort dafür zu
brauchen. */
.tafel .unterzeile {
padding-bottom: 1em;
border-bottom: 1px solid rgba(150, 186, 220, .10);
margin-bottom: 1.1em;
}
@media (prefers-reduced-motion: reduce) {
.tafel .rolle:active, .tafel .knopf:active { transform: none; }
}
}
/* Auf schmalen Geräten liegt die Karte VOR dem Bild statt darin -- dort
bleibt der eigene Rahmen richtig, denn es gibt kein Gehäuse, in das
sie sich einfügen könnte. Nur Körnung und Tastenwirkung übernimmt sie:
Die gehören zum Material, nicht zur Anordnung. */
@media (max-width: 1099px), (max-height: 619px), (max-aspect-ratio: 7/5) {
.tafel .rolle:active { transform: translateY(1px); }
.tafel .rolle[aria-checked="true"] {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 0 18px -8px color-mix(in srgb, var(--akzent) 85%, transparent);
}
}