DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8efdb39ce9c4b2def79801adde4fb5f11f4ae180
dogfather-universe/workspace/index.html
T
DogFatherGitandClaude Opus 5 8efdb39ce9 Kein Weichzeichner mehr -- die Bilder werden scharf, die Kacheln Lampen 
Filipe: "gerade sehen die sogar leicht verschwommen aus ... die sollen
nicht durch die kacheln gehen ... ich wollte eine krasse aenderung."

Drei Ursachen, alle drei von mir eingebaut, alle drei gemessen:

1. ICH HABE 1647-PIXEL-BILDER ALS "uhd" MIT 2400 PIXELN AUSGELIEFERT.
   Am Morgen stand in derselben Datei, sein Schirm sei 2550 px breit und
   das groesste Bild 1600 -- meine "Loesung" war, die Ausgabe
   hochzurechnen. Es gab nie mehr Bildpunkte. Dazu fehlte der Schritt,
   den der Kommentar daneben selbst verlangt ("Verkleinern MITTELT
   Bildpunkte ... deshalb schaerft man danach nach"): Es wurde nie
   nachgeschaerft. Jetzt Unscharfmaske auf der ENDgroesse
   (Ausgabeschaerfung) und ein Glanz-Durchgang: die hellsten Stellen
   weich gezeichnet und additiv dazu -- Licht, das ueber seine Kante
   strahlt. Guete 0,80 -> 0,88, am Gate 0,93.

2. backdrop-filter: blur() UNTER JEDER FLAECHE. 16 px unter siebzehn
   Kacheln, 13 px unter sieben weiteren Flaechen, 26 px unter der
   Anmeldekarte. Ein Weichzeichner mittelt nicht nur, was hinter dem
   Element liegt -- er zieht seinen Radius weit darueber hinaus. Hinter
   der Anmeldetafel ist Schwarz, direkt daneben aber die hellste Stelle
   des Motivs: Die Karte wurde deshalb GRAU, gemessen rgb(46,57,64)
   statt rgb(15,22,34). Je schoener der Rahmen, desto grauer die Karte.
   Alle Weichzeichner raus, --flaeche 0,78 -> 0,89: Durchsicht bleibt,
   aber scharf.

3. DIE TAFELMESSUNG WAR FALSCH, UND ICH HABE SIE VON HAND "KORRIGIERT".
   Sie lief vom Inneren nach aussen und hielt beim ersten farbigen Punkt
   an -- links glueht der Rahmen breiter als rechts, also hielt sie dort
   frueher an (58,59 statt 55,37). Statt den Messfehler zu beheben, habe
   ich in der CSS "um 1,1 % nach links" geschaetzt. Ergebnis: 32 px
   schwarze Tafel blieben links offen. Jetzt wird die einzige
   Eigenschaft gesucht, die nur der Rahmen hat -- kraeftig UND farbig --,
   mit Gegenprobe auf der linken Bildhaelfte (dort muessen es 0 sein).

KACHELN: keine Politur mehr, ein anderes Ding. Jede steckt in einer
LEUCHTSCHIENE ihrer Kategoriefarbe, die Licht in die Platte wirft --
links scharfe Kante, rechts rund. Steiler Abfall (52 % statt 68 %):
beleuchtet, nicht eingefaerbt. Der Glanz wandert beim Ueberfahren
einmal durch. Dieselbe Sprache auf der Anmeldeseite: die vier Rollen
sind Tasten in Schienen (Gold/Bernstein/Gruen/Blau).

Zwei eigene Fehler nebenbei, beide durch das Unveraenderlichkeits-
Zeichen gefunden -- eine Zahl, die sich nach einer Aenderung KEIN Stueck
bewegt, sagt "falsche Stelle", nicht "zu wenig":
  - Dreimal exakt 4,16:1 an "Ueberfaellig". Der Pruefpunkt lag nicht auf
    dem Knopf, sondern in der Luecke daneben auf dem Bild. Ursache war
    das hellere Hochkant-Bild, nicht das Bedienelement -> mehr Schleier
    und weniger Glanz NUR fuer die Handy-Fassung. 4,16 -> 5,10.
  - Die Koernung der Anmeldekarte lag mit 90 % Deckkraft ohne Mischmodus
    ueber allem und hob jeden Bildpunkt um 30 Stufen. Jetzt 4 % mit
    overlay, auf eigener Ebene.
  - --flaeche anzuheben machte die WICHTIGE Anleitung duenner als eine
    gewoehnliche (88 gegen 89) -- feste Zahl neben beweglicher Groesse.
    Gefunden von pruef-lesbarkeit, jetzt an --flaeche gebunden.

Gruen: buehne (38), start-ansicht (136), handy (59), breiten (23),
lesbarkeit (14), css-klassen (15), barrierefrei (18), tempo (8).

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-07 03:10:13 +02:00

179 lines
8.1 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Dogfather Universe · Creator Workspace · Anmeldung</title>
<meta name="description" content="Privater Arbeitsbereich für Creator, Scouts und DogFather." />
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#0674b9" />
<!-- Die Bühne ist der erste Eindruck. Ohne diesen Hinweis lädt der Browser sie erst,
nachdem er das CSS gelesen hat - das kostet spürbar Zeit. Quer- und Hochformat
sind getrennt, damit das Handy nicht die große Fassung zieht.
Hier steht bewusst WebP und nicht AVIF, obwohl die AVIF-Fassungen erzeugt
werden und rund ein Drittel kleiner wären: Der ausliefernde Server läuft auf
Express 4, dessen `send` eine alte MIME-Tabelle ohne AVIF mitbringt. Die
Dateien kämen als application/octet-stream an und würden wegen des
nosniff-Headers vom Browser verweigert - die Bühne bliebe leer. Sobald der
Workspace einen eigenen Server bekommt, kann AVIF wieder eingeschaltet
werden (die Dateien liegen bereit). -->
<link rel="preload" as="image" href="assets/img/buehne/gate-1920.webp"
type="image/webp" media="(min-width: 900px)" />
<link rel="preload" as="image" href="assets/img/buehne/gate-hoch-580.webp"
type="image/webp" media="(max-width: 899px)" />
<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=202609070308" />
</head>
<body class="gate">
<!-- ---------- Bühne: Bild + Schleier ---------------------------------- -->
<div class="buehne" aria-hidden="true">
<picture>
<!-- BIS 2560 PIXEL (07.09.2026). Vorher endete die Reihe bei 1600 --
auf einem 2550 px breiten Schirm rechnete der Browser das Bild
also um das 1,6-fache hoch, und jede Kante wurde weich. Genau
das sah man als "nicht hochwertig", ohne es benennen zu koennen.
Eine hoehere Bildguete haette daran nichts geaendert: Man kann
keine Bildpunkte zurueckholen, die nie ausgeliefert wurden.
Ueber srcset laedt trotzdem jeder nur die Stufe, die er
braucht -- ein Handy weiterhin 32 KB. -->
<source media="(min-width: 900px)" type="image/webp"
srcset="assets/img/buehne/gate-960.webp 960w,
assets/img/buehne/gate-1280.webp 1280w,
assets/img/buehne/gate-1600.webp 1600w,
assets/img/buehne/gate-1920.webp 1920w,
assets/img/buehne/gate-2560.webp 2560w" sizes="100vw" />
<source type="image/webp"
srcset="assets/img/buehne/gate-hoch-440.webp 440w,
assets/img/buehne/gate-hoch-580.webp 580w,
assets/img/buehne/gate-hoch-900.webp 900w" sizes="100vw" />
<img class="buehne__bild" src="assets/img/buehne/gate-1280.webp" alt=""
width="1647" height="955" fetchpriority="high" decoding="async" />
</picture>
<div class="buehne__schleier"></div>
</div>
<!-- ---------- Tafel ----------------------------------------------------
DER ANKER (06.09.2026). Im Motiv steht rechts eine LEERE TAFEL mit
Neonrahmen -- dort gehoert die Anmeldekarte hinein, und zwar genau
hinein, nicht ungefaehr.
Das geht nur, wenn man weiss, wo die gemalte Tafel auf dem
Bildschirm landet. Das Bild liegt mit `object-fit: cover` darunter;
je nach Fensterform schneidet der Browser oben/unten oder
links/rechts etwas ab. Dieser Anker rechnet genau dieselbe
Cover-Geometrie noch einmal nach (siehe gate.css) -- er ist damit
deckungsgleich mit dem Bild, und die Karte kann in Prozent des
BILDES sitzen statt in Prozent des Fensters.
Er faengt keine Klicks ab (pointer-events: none); nur die Karte
darin ist bedienbar. -->
<div class="tafel-anker">
<main class="tafel" id="tafel">
<div class="tafel__kante" aria-hidden="true"></div>
<header class="kopf">
<p class="marke">Dogfather&nbsp;Universe</p>
<h1 class="titel">Creator&nbsp;Workspace</h1>
<p class="unterzeile">Privater Bereich für Creator, Scouts und DogFather.</p>
</header>
<div class="rollen" role="radiogroup" aria-labelledby="rollen-schild">
<p class="feldschild" id="rollen-schild">Womit meldest du dich an?</p>
<!-- Krone für DogFather: steht für die Gesamtübersicht und die
Freigaben. Das Schild ist zum Scout gewandert -- dort passt es
besser, weil ein Scout die Pipeline abschirmt und prüft, bevor
etwas weitergereicht wird. -->
<button type="button" class="rolle" data-rolle="admin" role="radio" aria-checked="false">
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3.8 7.6 7.6 11 12 4.9 16.4 11l3.8-3.4-1.6 9.3H5.4L3.8 7.6Z"/>
<path d="M6 20.1h12"/>
</svg>
<span class="rolle__text">
<span class="rolle__name">DogFather</span>
<span class="rolle__zusatz">Gesamtübersicht &amp; Freigaben</span>
</span>
</button>
<!-- Manager: dieselben Rechte wie DogFather, nur die Personen-
verwaltung bleibt DogFather vorbehalten. Der Stern steht fuer
den Rang darunter, ohne "unter" zu sagen. -->
<button type="button" class="rolle" data-rolle="manager" role="radio" aria-checked="false">
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<path d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
</svg>
<span class="rolle__text">
<span class="rolle__name">Manager</span>
<span class="rolle__zusatz">Betreuung &amp; Freigaben</span>
</span>
</button>
<button type="button" class="rolle" data-rolle="scout" role="radio" aria-checked="false">
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2.6 4.5 5.8v5.6c0 4.6 3.2 8.4 7.5 9.9 4.3-1.5 7.5-5.3 7.5-9.9V5.8L12 2.6Z"/>
<path d="m8.7 12.1 2.3 2.3 4.3-4.7"/>
</svg>
<span class="rolle__text">
<span class="rolle__name">Scout</span>
<span class="rolle__zusatz">Eigene Pipeline &amp; Kontakte</span>
</span>
</button>
<button type="button" class="rolle" data-rolle="creator" role="radio" aria-checked="false">
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 12.6a4.3 4.3 0 1 0 0-8.6 4.3 4.3 0 0 0 0 8.6Z"/>
<path d="M4.4 20.2c.9-3.4 3.9-5.6 7.6-5.6s6.7 2.2 7.6 5.6"/>
</svg>
<span class="rolle__text">
<span class="rolle__name">Creator</span>
<span class="rolle__zusatz">Eigener Bereich &amp; Fortschritt</span>
</span>
</button>
</div>
<form class="formular" id="formular" novalidate>
<label class="feldschild" for="code">
Persönlicher Zugangscode <span class="fuer" id="fuer" hidden></span>
</label>
<div class="feld">
<input type="password" id="code" name="code" inputmode="text"
autocomplete="current-password" spellcheck="false"
placeholder="Code eingeben" aria-describedby="hinweis fehler" />
<button type="button" class="feld__auge" id="auge"
aria-label="Code anzeigen" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path class="strich" d="M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12Z"/>
<circle class="strich" cx="12" cy="12" r="2.9"/>
<path class="strich durch" d="m4 20 16-16"/>
</svg>
</button>
</div>
<p class="hinweis" id="hinweis" hidden>Feststelltaste ist aktiv.</p>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<button type="submit" class="knopf" id="knopf">
<span class="knopf__text">Anmelden</span>
<span class="knopf__laden" aria-hidden="true"></span>
</button>
</form>
<p class="fuss">
Verschlüsselte Verbindung · Zugriffe werden protokolliert
</p>
</main>
</div>
<script src="assets/js/gate.js?v=202609070308" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink