DogFatherGitandClaude Opus 5
3b356d6eef
DIE UHR: Sekunde nach AUSSEN, Minute in die Mitte, Stunde nach innen (Wunsch Filipe). Das ist die Anordnung eines Chronographen und nicht die eines Fortschrittsbalkens: Der schnellste Zeiger laeuft auf der laengsten Bahn, weil man Bewegung dort am besten sieht -- der langsamste innen, wo eine kleine Drehung viel bedeutet. Die drei Umfaenge sind mitgewandert; ein vertauschter Ring ohne vertauschte Zahlen endet nie dort, wo er soll. EIN MATERIAL FUER ALLE SEITEN. Die Startseite hatte seit heute beleuchtete Platten, die anderen sechzehn Seiten flache Rechtecke -- man wechselte die Seite und fiel aus einer Oberflaeche in eine andere. Ich habe das bisher Seite fuer Seite nachgezogen, und genau deshalb war es nie fertig: Es sind FUENFUNDVIERZIG Stellen. Jetzt EINE Regel. Die Klassenliste ist nicht erfunden, sondern gemessen -- es sind genau die, die `var(--flaeche)` als Kartenflaeche benutzen. `:where()` ist der Kniff dabei: Spezifitaet null, also ueberschreibt die Regel nichts, was eine Seite selbst festlegt. Eine Warnkarte bleibt rot, eine Spalte behaelt ihre Statusfarbe. Ohne das haette ich an dreissig Stellen `!important` gebraucht. DREI FUNDE DER PRUEFUNGEN, alle berechtigt: 1. `.profil-gruppe` gibt es nicht -- ich hatte den Namen aus dem Kopf geschrieben statt aus der Datei. pruef-struktur meldete totes CSS. Die Karten auf profil.html heissen `.gruppe`, und genau der Name darf NICHT in die Liste: Auf der Startseite heissen die Kachelgruppen ebenso und haetten ploetzlich eine Kartenflaeche. 2. Der erste Verlauf war HELLER als das, was er ersetzt. Ein Material, das die ganze Website aufhellt, hellt auch jeden Text darauf auf -- und das faellt an der leisesten Schrift zuerst auf. 3. `.gruppe__unter` stand auf 4,21:1. Und das ist der interessante Fall: Die Farbe war nicht schuld, eine VERSCHIEBUNG war es. Mit der fuenften Rolle rutschte auf personen.html alles eine Zeile nach unten, und die Zeile landete auf einer helleren Stelle des Buehnenbilds. Sie ist die einzige Beschriftung ohne Karte -- ein Text, dessen Untergrund ein FOTO ist, bekommt nicht den leisesten Ton. Jetzt 5,51:1. Der zweite Fund fiel nur auf, weil die Zahl sich nach meiner ersten Korrektur KEIN Stueck bewegte (zweimal exakt 4,21) -- dasselbe Zeichen wie schon zweimal heute: falsche Stelle, nicht zu wenig. Gruen: buehne (38), css-klassen (15), struktur (32), handy (59), breiten (23), start-ansicht (136), lesbarkeit (14), tempo (8), personen-liste (33). Co-Authored-By: Claude Opus 5 <[email protected]>
273 lines
13 KiB
HTML
273 lines
13 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" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#0674b9" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609070507" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609070507" />
|
||
<!-- Nur die Startseite: Begrüßungskachel, Uhr, Glockenmulde. Siehe
|
||
den Hinweis in start.css -- dort stand es bis zum 07.09.2026. -->
|
||
<link rel="stylesheet" href="assets/css/heim.css?v=202609070507" />
|
||
</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>
|
||
|
||
<!-- ==== Rechts in der Kachel: Glocke und Uhr ==================
|
||
Die Glocke stand bisher in der Kopfleiste. Dort ist sie eine
|
||
von sechs Schaltflächen; hier ist sie das, was sie ist -- eine
|
||
Einstellung zum eigenen Tag, neben der Uhrzeit.
|
||
glocke.js setzt sie in `#glocke-platz`, wenn es den Platz auf
|
||
der Seite gibt, sonst weiterhin in die Leiste. -->
|
||
<div class="willkommen__rechts">
|
||
<div class="glocke-platz" id="glocke-platz"></div>
|
||
|
||
<!-- Die Uhr ist eine ANZEIGE, kein Bedienelement: role="timer"
|
||
mit aria-live="off". Eine Uhr, die sich jede Sekunde
|
||
vorlesen lässt, macht jede Vorleseausgabe unbenutzbar. -->
|
||
<!-- ROT UND BABYBLAU (07.09.2026, Wunsch Filipe: "soll eine
|
||
mischung von rot und babyblau haben").
|
||
|
||
Die beiden Farben sind nicht frei gewählt: Rot ist Spicy
|
||
Media, Babyblau ist DogFather -- dieselben zwei, die oben
|
||
im Kopf der Anmeldekarte nebeneinanderstehen und die im
|
||
Motiv den Neonrahmen bilden. Die Uhr trägt damit dieselbe
|
||
Handschrift wie alles andere, statt eine dritte einzuführen.
|
||
|
||
Zwei Verläufe, absichtlich GEGENLÄUFIG: Der Stundenring
|
||
geht von Rot nach Babyblau, der Sekundenring zurück. Wo der
|
||
eine warm ist, ist der andere kühl -- so bleiben die beiden
|
||
Ringe auseinanderzuhalten, auch wenn sie sich überlagern. -->
|
||
<!-- DREI RINGE (07.09.2026, Wunsch Filipe).
|
||
|
||
Aussen die STUNDE in Schwarzsilber, in der Mitte die MINUTE
|
||
in Blau, innen die SEKUNDE in Rot. Von aussen nach innen
|
||
immer schneller -- so liest man eine Uhr, ohne nachzudenken:
|
||
Der aeussere Ring bewegt sich fast nie, der innere staendig.
|
||
|
||
ALLES SCHARF. Kein blur() und kein drop-shadow auf den
|
||
Boegen. Ein Weichzeichner auf einer Linie macht sie nicht
|
||
edler, sondern unscharf -- und genau das war der Vorwurf.
|
||
Der Glanz im Silber entsteht aus dem VERLAUF selbst (hell,
|
||
dunkel, hell), nicht aus einem Schein darum herum. Genau so
|
||
glaenzt echtes Metall.
|
||
|
||
`shape-rendering="geometricPrecision"` steht bewusst dran:
|
||
Ohne das rastert der Browser duenne Boegen mit einer
|
||
schnelleren, groberen Methode. -->
|
||
<div class="uhr" id="uhr" role="timer" aria-live="off">
|
||
<svg class="uhr__ring" viewBox="0 0 100 100" aria-hidden="true"
|
||
shape-rendering="geometricPrecision">
|
||
<defs>
|
||
<!-- Schwarzsilber: vier Stopps, nicht zwei. Ein Verlauf von
|
||
Hell nach Dunkel ist ein Farbverlauf; erst der Wechsel
|
||
hell-dunkel-hell-dunkel liest sich als geschliffenes
|
||
Metall, weil eine gebogene Flaeche das Licht genau so
|
||
zurueckwirft. -->
|
||
<linearGradient id="uhr-silber" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#f2f6fa" />
|
||
<stop offset="26%" stop-color="#7d8794" />
|
||
<stop offset="48%" stop-color="#dfe7ef" />
|
||
<stop offset="70%" stop-color="#5b646f" />
|
||
<stop offset="100%" stop-color="#c8d2dc" />
|
||
</linearGradient>
|
||
<linearGradient id="uhr-blau" x1="0" y1="1" x2="1" y2="0">
|
||
<stop offset="0%" stop-color="#2f7fd4" />
|
||
<stop offset="50%" stop-color="#63b8f5" />
|
||
<stop offset="100%" stop-color="#a8ddff" />
|
||
</linearGradient>
|
||
<linearGradient id="uhr-rot" x1="1" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#ff8a91" />
|
||
<stop offset="50%" stop-color="#ff4d5c" />
|
||
<stop offset="100%" stop-color="#c22636" />
|
||
</linearGradient>
|
||
</defs>
|
||
|
||
<!-- Die Bahnen. Sie stehen immer da, damit man sieht, wie
|
||
weit ein Ring noch zu laufen hat -- ein Bogen ohne Bahn
|
||
ist ein Strich ohne Bezug. -->
|
||
<circle class="uhr__bahn" cx="50" cy="50" r="45.5" />
|
||
<circle class="uhr__bahn" cx="50" cy="50" r="38.5" />
|
||
<circle class="uhr__bahn" cx="50" cy="50" r="31.5" />
|
||
|
||
<!-- REIHENFOLGE GEDREHT (07.09.2026, Wunsch Filipe: "die
|
||
minuten in der mitte und sekunden aussen").
|
||
|
||
Aussen die SEKUNDE, in der Mitte die MINUTE, innen die
|
||
STUNDE. Das ist die Anordnung eines Chronographen: Der
|
||
schnellste Zeiger laeuft auf der laengsten Bahn, weil
|
||
man dort die Bewegung am besten sieht -- und der
|
||
langsamste innen, wo eine kleine Drehung schon viel
|
||
heisst. Die alte Anordnung war die eines
|
||
Fortschrittsbalkens, nicht die einer Uhr. -->
|
||
<circle class="uhr__sekunde" cx="50" cy="50" r="45.5" id="uhr-sekunde" />
|
||
<circle class="uhr__minute" cx="50" cy="50" r="38.5" id="uhr-minute" />
|
||
<circle class="uhr__stunde" cx="50" cy="50" r="31.5" id="uhr-stunde" />
|
||
</svg>
|
||
<span class="uhr__skala" aria-hidden="true"></span>
|
||
<span class="uhr__glas" aria-hidden="true"></span>
|
||
<div class="uhr__mitte">
|
||
<span class="uhr__zeit" id="uhr-zeit">--:--</span>
|
||
<span class="uhr__sek" id="uhr-sek">--</span>
|
||
</div>
|
||
</div>
|
||
</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. -->
|
||
<!-- DER TAGESBLICK (05.09.2026).
|
||
Wunsch: "eine ganze kachel, links die sachen die du da siehst und
|
||
rechts die termine vom tag, in der mitte gesplittet."
|
||
|
||
WARUM DIE BEIDEN ZUSAMMENGEHÖREN: Links steht, was zu TUN ist,
|
||
rechts, was schon FESTSTEHT. Zusammen ergeben sie die einzige
|
||
Frage, die man morgens hat -- wie sieht mein Tag aus. Getrennt
|
||
untereinander musste man scrollen, um sie zu beantworten.
|
||
|
||
Eine Kachel und nicht zwei nebeneinander: Zwei Kacheln mit Rand
|
||
und Abstand lesen sich als zwei Themen. Der Trenner in der Mitte
|
||
sagt "zwei Seiten derselben Sache".
|
||
|
||
<section> mit Überschrift je Hälfte, damit ein Vorleseprogramm
|
||
die beiden Bereiche ansagen und anspringen kann -- ein Raster
|
||
allein ist für ihn nur eine Reihenfolge. -->
|
||
<!-- PLATZ WIRD VORHER RESERVIERT, nicht nachträglich genommen.
|
||
|
||
Die Kachel war zuerst `hidden` und erschien erst, wenn ihre
|
||
Daten da waren. Sie ist aber hoch -- alles darunter sprang
|
||
dadurch nach unten. Gemessen von pruef-tempo-workspace: Der
|
||
Layout-Sprung von start.html stieg von 0 auf 0,96, zweimal
|
||
hintereinander bestätigt.
|
||
|
||
Ein Sprung ist kein Schönheitsfehler: Er ist der Grund, warum
|
||
man auf den falschen Knopf drückt. Man zielt auf etwas, und im
|
||
Moment des Klicks rutscht es weg.
|
||
|
||
Deshalb steht die Kachel von Anfang an da und hält ihre Höhe
|
||
(data-laedt="ja" → min-height im CSS). Erst wenn feststeht, dass
|
||
BEIDE Hälften leer sind, verschwindet sie -- und dieser Sprung
|
||
ist klein, weil sie dann nur die Platzhalterhöhe hatte. -->
|
||
<section class="tagesblick" id="dran-block" data-laedt="ja"
|
||
aria-labelledby="tagesblick-titel">
|
||
<h2 class="tagesblick__titel" id="tagesblick-titel">Dein Tag</h2>
|
||
|
||
<div class="tagesblick__seite tagesblick__seite--dran" id="dran-seite">
|
||
<div class="klapp-kopf tagesblick__kopf">
|
||
<p class="feldschild" id="dran-titel">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"
|
||
aria-labelledby="dran-titel"></ul>
|
||
<!-- Steht nur da, wenn wirklich nichts offen ist. Eine leere
|
||
Hälfte ohne Wort sieht aus wie ein Ladefehler. -->
|
||
<p class="tagesblick__leer" id="dran-leer" hidden>
|
||
Nichts offen – der Tag ist frei von Rückständen.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="tagesblick__seite tagesblick__seite--heute" id="heute-seite">
|
||
<div class="klapp-kopf tagesblick__kopf">
|
||
<p class="feldschild" id="heute-titel">Heute</p>
|
||
<a class="knopf-still tagesblick__mehr" href="kalender.html">
|
||
<span>Kalender</span>
|
||
<svg class="klapp-pfeil tagesblick__mehr-pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="m9.5 6 6 6-6 6" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<ol class="tagesliste" id="tagestermine" aria-labelledby="heute-titel"></ol>
|
||
<p class="tagesblick__leer" id="heute-leer" hidden>
|
||
Heute steht nichts an.
|
||
</p>
|
||
</div>
|
||
</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=202609070507" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609070507" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609070507" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609070507" defer></script>
|
||
<script src="assets/js/start.js?v=202609070507" defer></script>
|
||
</body>
|
||
</html>
|