DogFatherGitandClaude Opus 5
44716fa54b
"ich will dass die krank realistisch sind, und alle kacheln durch die
ganze website perfektionieren."
DIE ZEICHEN bekommen die Beleuchtung, die man aus der Wirklichkeit
kennt -- vier Lagen statt einer:
KOERPER gefuellte Grundform, oben satt, unten auslaufend
EIGENSCHATTEN eine dunkle Lage, die von unten hereinkriecht. Ein
Koerper ist unten dunkler als oben; ohne das bleibt
jede Flaeche eine Farbflaeche
GLANZ die Spiegelung, schmal ueber die obere Haelfte
KONTUR mit ZWEI Lichtquellen: oben das Hauptlicht (fast weiss),
in der Mitte der Eigenton, unten STREULICHT vom
Untergrund. Der letzte Stopp ist der Unterschied
zwischen "Zeichnung" und "Ding" -- ohne ihn laeuft jede
Form nach unten ins Dunkle aus.
Dazu ein SCHLAGSCHATTEN auf die Plakette, versetzt nach unten statt
mittig. Er ist der Grund, warum das Zeichen ueber der Flaeche schwebt
statt darauf zu liegen.
DIE PLAKETTE bekommt eine KOERNUNG -- eine sehr feine, unregelmaessige
Struktur. Das ist der Unterschied zwischen "am Rechner gemacht" und
"Gegenstand": Eine makellos glatte Farbflaeche gibt es in der
Wirklichkeit nicht, und das Auge erkennt das sofort, auch wenn niemand
sagen koennte woran. Eingebettetes Rauschen, keine Bilddatei -- kostet
nichts zu laden und kann nicht fehlen.
DIE KACHELN, und zwar BEIDE Systeme:
workspace .kachel -- bekam Tiefe nach unten (fehlte ganz: die Kachel
klebte auf dem Hintergrund statt darauf zu liegen) und eine
Lichtkante, die in der Mitte am hellsten ist und nach
aussen auslaeuft. Echtes Licht auf einer Kante sieht so
aus; eine durchgehend gleich helle Linie ist ein Strich.
oeffentlich .card (133 Vorkommen auf der Website) -- war eine Flaeche
mit einem Rand. Jetzt: Verlauf statt Flaeche, Lichtkante
oben, Schatten nach unten. Beim Ueberfahren hebt sie sich,
der Schatten wird laenger, die Kante heller.
Alles bleibt gedeckt. Diese Kacheln stehen zu Dutzenden auf einer Seite
-- was einzeln beeindruckt, blendet im Dutzend.
GEPRUEFT: Buehne 38 (Textkontrast an echten Bildpunkten), Startansicht
133, Rollen 97, Handy 50, Grosscheck 15, Lesbarkeit 14, dazu die drei
Laeufe der oeffentlichen Seite (Startseite, Design, Barrierefreiheit).
Alle gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
108 lines
4.4 KiB
HTML
108 lines
4.4 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=202609030221" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609030221" />
|
||
</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"><span class="marke__text">Dogfather Universe · Creator Workspace</span></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">
|
||
<!-- Die Begrüßung sagt jetzt etwas. "Angemeldet" stand vorher da, obwohl
|
||
man das oben rechts ohnehin sieht – die Zeile war verschenkt. An
|
||
ihrer Stelle steht der Tag, die Kalenderwoche und, wenn der Tag
|
||
einen Charakter hat, ein kurzes Wort dazu (neue Woche, Endspurt,
|
||
Wochenende). Darunter die Lage in einem Satz. -->
|
||
<section class="willkommen">
|
||
<p class="marke willkommen__datum">
|
||
<span id="datum">…</span>
|
||
<span class="willkommen__marker" id="tagesmarker" hidden></span>
|
||
</p>
|
||
<div class="willkommen__reihe">
|
||
<span class="willkommen__plakette" id="plakette" aria-hidden="true"></span>
|
||
<div class="willkommen__text">
|
||
<h1 class="titel" id="gruss">Willkommen</h1>
|
||
<p class="unterzeile">
|
||
<span id="rollentext">…</span>
|
||
<span class="willkommen__lage" id="lage" hidden></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
<!-- Kein Grau-in-Grau, wenn alles erledigt ist: Ein leerer Posteingang
|
||
ist eine gute Nachricht und darf auch so aussehen. -->
|
||
<div class="zahlen-leer" id="zahlen-leer" hidden>
|
||
<span class="zahlen-leer__haken" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24"><path d="m5 12.6 4.4 4.4L19 7.4" /></svg>
|
||
</span>
|
||
<span>
|
||
<strong>Nichts offen.</strong>
|
||
<span class="zahlen-leer__still">Alles abgearbeitet – gönn dir was.</span>
|
||
</span>
|
||
</div>
|
||
</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=202609030221" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609030221" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609030221" defer></script>
|
||
<script src="assets/js/start.js?v=202609030221" defer></script>
|
||
</body>
|
||
</html>
|