DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a9815e291a52b892fe8b74192590bdfb199e774a
dogfather-universe/workspace/index.html
T
DogFatherGitandClaude Opus 5 a9815e291a Ein Hintergrund fuer alles -- und Zeichen, die endlich vollstaendig sind 
ZWEI AUFTRAEGE.

1. DER NEUE HINTERGRUND
   Das Dogfather/Spicy-Media-Bild loest die neun Buehnen ab. Der Login
   behaelt ausdruecklich sein eigenes Bild (body.gate, unangetastet) --
   dort wird der Zugangscode eingegeben, und genau das sollte bleiben.

   Nicht einfach hingelegt: Das Bild ist sehr kraeftig, vor allem die
   rote Haelfte. Ohne Behandlung fiel der Textkontrast auf 3,03:1
   (noetig sind 4,5:1) -- ausgerechnet in der Personenverwaltung und auf
   dem Aufgabenbrett. Gemessen hat das server/pruef-buehne.mjs, das den
   Kontrast an bis zu 36 echten Bildpunkten je Seite nachrechnet.

   In vier Schritten angepasst und jedes Mal nachgemessen:
     -0,14 Helligkeit -> 4,12:1   (immer noch zu wenig)
     -0,20 Helligkeit -> 4,48:1   (zwei Hundertstel zu wenig)
     -0,23 Helligkeit -> 4,63:1   bestanden, alle Seiten
   Dazu Saettigung 0,72 und Gamma 0,91 -- dieselbe Behandlung, die auch
   die alten Buehnen bekommen haben (tools/buehne-bauen.mjs arbeitet mit
   Helligkeit 0,66 bis 0,88). Das Bild bleibt ein Bild und wird nicht
   zur Tapete, aber Text steht darauf lesbar.

2. DIE ZEICHEN
   Sie bekommen einen VERLAUF: oben hell, nach unten gedaempft -- eine
   Lichtquelle ueber dem Zeichen, wie in der echten Welt. Dazu ein
   weicher Schlagschatten in der eigenen Farbe. Der Verlauf ist EINMAL
   definiert und arbeitet mit currentColor: ein Verlauf fuer siebzehn
   Kachelfarben.

   ZWEI SACKGASSEN AUF DEM WEG, beide aufgeschrieben statt weggeraeumt:

   a) Erst lag unter jeder Linie eine dicke, weichgezeichnete Kopie --
      "Licht, das die Linie wirft". Bei einem grossen Symbol traegt das.
      Hier nicht: Ein Zeichen ist 24 Einheiten breit und 25 px gross,
      eine Einheit ist also ein Pixel. Linie 1,65 plus Schein 2,5 fuellt
      jede Luecke, die enger als vier Einheiten ist -- aus dem Kalender
      wurde ein leerer Kasten. Gesehen habe ich das erst bei dreifacher
      Vergroesserung; auf dem normalen Schirm sah es nur "satter" aus.
      Die Lage ist wieder weg.

   b) Der Verlauf lief zunaechst in OBJEKTKOORDINATEN. Damit wird er auf
      den Umriss jedes einzelnen Pfades gerechnet -- und eine waagerechte
      Linie hat die Hoehe null. Der Verlauf ist dann entartet, und der
      Browser zeichnet den Pfad GAR NICHT. Verschwunden waren dadurch:
      die Querlinie im Kalender, alle drei Regler-Striche in Technik,
      die Grundlinie der Berichte. Jetzt laeuft er in Benutzer-
      koordinaten ueber die festen 24 Einheiten -- was ohnehin richtiger
      ist, denn das Licht kommt von oben und nicht von jedem Strich
      einzeln.

   AUSSERDEM ECHT REPARIERT: Das Technik-Zeichen hatte drei Griffe aus
   Boegen der Laenge null ("a1.4 1.4 0 1 0 0-.02z") -- sie wurden nie
   gezeichnet. Uebrig blieben drei nackte Striche, die aussahen wie ein
   Menue-Symbol. Jetzt sind es echte Kreise. Kalender und Dashboard haben
   mehr Luft zwischen ihren Linien bekommen, damit sie bei 25 px nicht
   zu einer Flaeche verschmelzen.

GEPRUEFT: Buehne 38 (Kontrast an echten Bildpunkten), Startansicht 133,
Rollen 97, Handy 50, Grosscheck 15, Lesbarkeit 14 -- alle gruen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-03 01:26:52 +02:00

149 lines
6.5 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" />
<meta name="theme-color" content="#05070d" />
<!-- 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-1600.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" href="assets/img/favicon.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609030126" />
</head>
<body class="gate">
<!-- ---------- Bühne: Bild + Schleier ---------------------------------- -->
<div class="buehne" aria-hidden="true">
<picture>
<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" sizes="100vw" />
<source type="image/webp"
srcset="assets/img/buehne/gate-hoch-440.webp 440w,
assets/img/buehne/gate-hoch-580.webp 580w" sizes="100vw" />
<img class="buehne__bild" src="assets/img/buehne/gate-1280.webp" alt=""
width="1672" height="941" fetchpriority="high" decoding="async" />
</picture>
<div class="buehne__schleier"></div>
</div>
<!-- ---------- Tafel ---------------------------------------------------- -->
<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>
<script src="assets/js/gate.js?v=202609030126" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink