DogFatherGitandClaude Opus 5
e25a22149b
Rueckmeldung Filipe: "richtige richtung, die sollen nur bissl groesser
sein und noch bissl mehr spezieller."
GROESSER, gemessen statt geglaubt:
Zeichenfeld 38 -> 46 px (Dashboard 56)
Name .93 -> 1.02 rem (Dashboard 1.18)
Polsterung 14 -> 18 px, Ecken 15 -> 18 px
Kachelhoehe rund 60 -> ueber 80 px
Dabei fiel der eigene Test von vorhin sofort ein: Bei 880 px Seitenbreite
sind drei Kacheln je 285 px breit, und in den groesseren Schriften brach
der Text an ZWOELF Stellen ab. Statt die Schrift wieder zu verkleinern
bekommt die Startseite die volle Breite (1240 px) -- das ist die
ehrlichere Loesung. Hinweise, Begruessung und Fusstext behalten ihr Mass
von 940 px: Eine Textzeile ueber 1240 px zu ziehen macht sie nicht
lesbarer, sondern anstrengender.
SPEZIELLER, drei Dinge:
1. DAS LICHT FOLGT DEM ZEIGER. Jede Kachel traegt einen weichen
Lichtfleck. Er sitzt ruhend oben links und wandert unter dem Zeiger
mit. Kein Blinken, keine Bewegung des Inhalts -- es wird nur an einer
anderen Stelle heller. Das ist die Kleinigkeit, die man nicht sieht,
sondern erst beim Benutzen merkt.
EIN Zuhoerer fuer alle Kacheln statt siebzehn, und in einem Bild je
Rahmen: pointermove feuert dutzendfach je Sekunde, wer bei jedem
Ereignis in den Stil schreibt, laesst den Browser umsonst rechnen.
Beim Verlassen zurueck in die Ruhelage -- sonst blieben die Kacheln
nach einer Weile alle unterschiedlich beleuchtet stehen. Auf
Fingerbedienung und bei "weniger Bewegung" bleibt es ganz aus; dort
gibt es keinen Zeiger, dem etwas folgen koennte. Beides geprueft.
2. Eine feine helle Linie an der Oberkante jeder Kachel. Ein Pixel, kaum
sichtbar -- aber die Kachel wirkt dadurch von oben beleuchtet statt
aufgeklebt. Das Zeichenfeld bekommt denselben Lichtrand und einen
Verlauf, wodurch es gepraegt statt gemalt wirkt.
3. Beim Ueberfahren: farbiger Schein unter der Kachel im eigenen Ton,
die Kante links waechst von 3 auf 4 px, das Zeichen um 4 Prozent.
Alles unter zwei Pixeln Bewegung.
Die Trennlinie der Gruppenueberschriften laeuft nach rechts aus, statt
hart abzubrechen -- eine durchgezogene Linie zerschneidet die Seite, eine
auslaufende gliedert sie nur.
47 Pruefungen. Neu darunter: Zeichenfeld und Schriftgroesse werden
gemessen ("sieht groesser aus" ist kein Nachweis), und das Licht wird mit
echten Mausbewegungen an drei Stellen geprueft.
Co-Authored-By: Claude Opus 5 <[email protected]>
76 lines
2.9 KiB
HTML
76 lines
2.9 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=202608312250" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202608312250" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<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=202608312250" defer></script>
|
||
<script src="assets/js/kopf.js?v=202608312250" defer></script>
|
||
<script src="assets/js/start.js?v=202608312250" defer></script>
|
||
</body>
|
||
</html>
|