DogFatherGitandClaude Opus 5
fcebbd18bb
Filipe: "der hintergrund soll genau so krass und speziell sein, benutz
den hasen und husky."
Gefunden in assets/img: hero-husky.png (Casper, neonblau auf dunkel --
farblich genau die Oberflaeche) und char-hasidog.jpg (HasiDog). Der
Sticker "HasiDog & Casper" hat bestaetigt, dass die beiden zusammen
gehoeren.
Beide sitzen FEST an der Scheibe in den unteren Ecken -- sie scrollen
nicht mit, sondern stehen da wie ein Buehnenbild, vor dem gearbeitet
wird. Die Mitte bleibt frei, dort steht der Inhalt. HasiDog ist weiter
nach aussen geschoben und schwaecher als Casper: Er ist heller, sein
Gesicht zieht den Blick staerker, und direkt neben einer Kachel wuerde
man ihn ansehen statt der Kachel.
AUFBEREITET STATT EINGEBUNDEN (tools/buehne-bauen.mjs):
* stark abgedunkelt und leicht entsaettigt -- Stimmung, kein Motiv
* weiche Raender ins Bild EINGERECHNET. Ein hartes Rechteck saehe nach
aufgeklebtem Foto aus; und eine Maske ueber ein 900-Pixel-Bild kostet
bei jedem Bildaufbau Rechenzeit.
* 290 KB PNG -> 41 KB WebP, 110 KB -> 32 KB
Gerechnet mit dem Browser, der ohnehin fuer die Pruefungen da ist -- kein
Bildprogramm, keine neue Abhaengigkeit, 0 EUR.
GEPRUEFT WIRD NICHT, OB ES HUEBSCH IST, sondern ob der Text noch lesbar
ist -- an echten BILDPUNKTEN aus dem fertigen Bildschirmfoto, nicht an
der Farbangabe im Stil. Die weiss naemlich nichts davon, was
dahinterliegt. Gemessen wird der Untergrund direkt NEBEN jedem sichtbaren
Text, auf fuenf Seiten, auf Computer und Handy: bis zu 34 Stellen je
Seite gegen den WCAG-Massstab (4,5:1, bei grosser Schrift 3:1).
UND DAS HAT SOFORT EINEN ALTEN FEHLER GEFUNDEN: Der leiseste Grauton
(--text-still) lag bei 4,43:1 -- knapp UNTER der Norm. Das war schon
lange so, nur hatte es nie jemand nachgerechnet, weil bisher niemand an
echten Bildpunkten gemessen hat. Von #6d7d92 auf #75859a angehoben; jetzt
4,95:1 auf dem hellsten Untergrund. Das gilt fuer JEDE Seite, nicht nur
fuer die mit dem Hintergrundbild.
Schlechtester Wert jetzt: 4,97:1. Alle 30 Messungen bestanden.
Nebenbei eine Falle in den Pruefungen selbst: Ein haengengebliebener
Testserver auf demselben Port fing die Anfragen ab -- der Test sprach mit
einem ALTEN Prozess und dessen anderer Datenbank, und meldete "no such
table". Der Port ist jetzt ein anderer; die Lehre steht hier, weil das
Bild "Server laeuft" trotzdem erscheint und alles richtig aussieht.
Co-Authored-By: Claude Opus 5 <[email protected]>
81 lines
3.2 KiB
HTML
81 lines
3.2 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>Dogfather Universe · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<meta name="theme-color" content="#05070d" />
|
||
<link rel="icon" href="assets/img/favicon.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609010009" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609010009" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
|
||
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
|
||
Pseudo-Elements -- body hat nur ::before und ::after. -->
|
||
<div class="schleier" aria-hidden="true"></div>
|
||
|
||
<header class="kopfleiste">
|
||
<p class="marke">Dogfather Universe · Creator Workspace</p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Volle Breite: Bei 880 px waren drei Kacheln je 285 px breit, und in
|
||
den groesseren Schriften brach der Text ab. Mehr Breite ist hier die
|
||
ehrlichere Loesung als kleinere Schrift. -->
|
||
<main class="inhalt inhalt--breit">
|
||
<section class="willkommen">
|
||
<p class="marke">Angemeldet</p>
|
||
<h1 class="titel" id="gruss">Willkommen</h1>
|
||
<p class="unterzeile" id="rollentext">…</p>
|
||
</section>
|
||
|
||
<!-- Was ist dran? Steht VOR den Zahlen, weil es der Unterschied
|
||
zwischen "wie viel liegt an" und "was muss ich jetzt tun" ist.
|
||
Bleibt komplett weg, wenn nichts anliegt. -->
|
||
<section class="dran" id="dran-block" hidden>
|
||
<div class="klapp-kopf">
|
||
<p class="feldschild">Was ist dran</p>
|
||
<button type="button" class="knopf-still" id="dran-schalter"
|
||
aria-expanded="false" aria-controls="dran" hidden>
|
||
<span id="dran-schalter-text">Alle zeigen</span>
|
||
<svg class="klapp-pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="m6 9.5 6 6 6-6" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<ul class="dran__liste" id="dran" data-klapp="zu"></ul>
|
||
</section>
|
||
|
||
<!-- Zahlen zuerst: Das Konzept will "Prioritäten statt Datenfriedhof".
|
||
Sind alle sechs null, steht dort ein Satz statt sechs Nullen. -->
|
||
<section class="zahlen-block" id="zahlen-block">
|
||
<p class="feldschild">Deine Aufgaben</p>
|
||
<ul class="zahlen" id="zahlen"></ul>
|
||
<p class="zahlen-leer" id="zahlen-leer" hidden>Nichts offen. Alles abgearbeitet.</p>
|
||
</section>
|
||
|
||
<!-- Die Bereiche, in drei Gruppen: was man täglich braucht, was zu
|
||
einem Creator gehört, was den Laden am Laufen hält. Aufgebaut von
|
||
start.js – dort steht auch, warum. -->
|
||
<div id="bereiche"></div>
|
||
|
||
<p class="fuss">
|
||
„Was ist dran" führt keine eigene Liste, sondern zeigt, was in den Bereichen
|
||
schon liegt – ein Punkt verschwindet von selbst, sobald die Sache erledigt ist.
|
||
Angezeigt wird nur, was du ohnehin sehen darfst.
|
||
</p>
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609010009" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609010009" defer></script>
|
||
<script src="assets/js/start.js?v=202609010009" defer></script>
|
||
</body>
|
||
</html>
|