DogFatherGitandClaude Opus 5
c46fb413ab
Auf der Startseite hat jeder Bereich sein eigenes Zeichen und seinen eigenen Farbton -- siebzehn unterscheidbare Bereiche statt siebzehn Kaesten. Bisher endete das an der Kachel: Wer sie anklickte, landete auf einer Seite, der man nicht mehr ansah, woher sie kam. Dreizehn Seiten, alle in demselben Blau, alle ohne Zeichen, alle mit derselben duennen Textzeile als Kopf. Jetzt wird die Kachel weitergereicht. Der Kopf jeder Seite bekommt dieselbe Behandlung wie die Kachel: Plakette mit dem Zeichen, der Bereichsname mit leuchtendem Strich in der Kachelfarbe, ein groesserer Titel und dasselbe Zeichen noch einmal riesig und fast unsichtbar als Wasserzeichen dahinter. Aufgaben ist ueberall orange, Kalender ueberall tuerkis, Personen ueberall rot-gold. EINE QUELLE STATT ZWEIER LISTEN. Zeichen, Ton, Rolle und Ziel jedes Bereichs standen nur in start.js. Sie einfach zu kopieren waere der sichere Weg dazu, dass "Aufgaben" irgendwann auf der Startseite gelb und auf der Aufgabenseite gruen ist. Beides liegt jetzt in assets/js/bereiche.js und wird von start.js UND kopf.js benutzt -- wer eine Kachel aendert, aendert damit automatisch auch den Kopf der Seite. Sie koennen gar nicht auseinanderlaufen. Eingesetzt wird die Plakette von kopf.js, nicht in dreizehn HTML-Dateien: Das vorhandene Markup wird nur umschlossen, nicht ersetzt. Der Kalender hat einen eigenen Kopf (dort ist der Zeitraum die Ueberschrift) und wird ausdruecklich mitgenommen -- sonst waere ausgerechnet die aufwendigste Seite die einzige ohne Zeichen. Die Seitenpruefung sieht jetzt auf allen dreizehn Seiten nach, dass Ton UND Zeichen UND Wasserzeichen da sind, und gibt beides aus (ton=9 zeichen=3/3). Eine Seite, die ihre Zuordnung verliert, faellt damit sofort auf statt erst beim Hinsehen. Kontrast danach an echten Bildpunkten nachgemessen: haelt auf allen sechs geprueften Seiten (schlechtester Wert 4,80:1). 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=202609011022" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609011022" />
|
||
</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=202609011022" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609011022" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609011022" defer></script>
|
||
<script src="assets/js/start.js?v=202609011022" defer></script>
|
||
</body>
|
||
</html>
|