DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e744f22fbc70b1b2a01e9a0b120b0403a7be5f25
dogfather-universe/workspace/start.html
T
DogFatherGitandClaude Opus 5 e744f22fbc Vier Tafeln in einer Reihe -- die offene breiter als die Reiter 
Filipe: "die sollen alle in einer reihe sein und nicht 3 und dann eins
drunter. perfektionier das."

DER GRUND WAR EINE RECHNUNG, DIE ICH NICHT KONTROLLIERT HABE

Dort stand `auto-fit` mit 340 px Mindestbreite -- CSS rechnet sich dann
selbst aus, wie viele nebeneinanderpassen. Bei vier Tafeln in einer
1240 px breiten Spalte reichte es fuer drei; die vierte rutschte in
eine zweite Zeile. `auto-fit` ist bequem, solange die Anzahl offen ist.
Sobald sie feststeht, ist es eine Rechnung, die man aus der Hand gibt.

Vier sind es, vier stehen nebeneinander -- und zwar mit `flex` statt
`grid`, weil damit die OFFENE Tafel breiter sein kann als die
geschlossenen. Es ist immer genau eine offen, und die bekommt den
anderthalbfachen Anteil: Dort wird gearbeitet, die anderen sind
Reiter. Das ist der Unterschied zwischen vier gleich grossen Kaesten
und einem Brett.

UND EIN VERSPRECHEN, DAS ERST NACH DEM ERSTEN KLICK GALT

Das Akkordeon griff nur beim Klicken. Beim Laden kamen die gemerkten
Staende aus der Ablage, und die konnten drei offene Tafeln ergeben --
im Bildschirmfoto standen genau so drei offen nebeneinander. Jetzt
bleibt beim Aufbau die erste Tafel offen, die etwas enthaelt; alle
weiteren klappen zu, ohne den gemerkten Stand zu ueberschreiben.

DREIMAL GEMESSEN STATT GESCHAETZT

Nach dem Umbau standen dort "LAEUFT AUTO..." und "FESTGEHALT..." --
252 px je Reiter, gemessen. Ich habe zweimal an den Pixeln gedreht
(Anteil 2,2 -> 1,8 -> 1,5, Sperrung 0,08 -> 0,035 em) und es blieb
abgeschnitten. Die richtige Antwort war nicht die dritte Zahl, sondern
der Name: Ein Reiter braucht ein Wort. Aus "Laeuft automatisch" wurde
"Wiederholungen" -- was es genau heisst, steht im Satz darunter, und
den liest man ohnehin erst, wenn die Tafel offen ist.

Gemessen am Ende: vier Tafeln, EINE Reihe, EINE offen, KEIN
abgeschnittener Titel.

Sechs Pruefungen gelaufen, alle gruen.

OFFEN, damit es nicht untergeht: pruef-call-kategorien meldet auf
Windows sporadisch Rueckgabewert 127 -- NACH "ALLES IN ORDNUNG", also
beim Beenden des Prozesses (libuv-Assertion beim Schliessen des noch
laufenden Servers). Das Ergebnis stimmt, der Rueckgabewert luegt. Wer
nur auf den Code sieht, haelt einen gruenen Lauf fuer rot.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-08 00:05:15 +02:00

330 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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=202609072357" />
<link rel="stylesheet" href="assets/css/start.css?v=202609072357" />
<!-- 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=202609072357" />
<link rel="stylesheet" href="assets/css/module.css?v=202609072357" />
</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&nbsp;Universe · Creator&nbsp;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. -->
<!-- ==== JEDER RING IST DREI LAGEN (07.09.2026) ==============
Filipe: "ich will dass der rand mit den sekunden minuten
und stunden viel krasser und geiler ist ... ultra modern,
ultra speziell, ultra profissionell, ultra phaenomenal."
Ein einzelner Strich ist eine LINIE. Ein Ring ist ein
KOERPER, und ein Koerper hat drei Merkmale, die man
zeichnen muss, sonst bleibt es eine Linie:
SCHATTEN Er liegt ueber dem Zifferblatt, also wirft
er einen. Dieselbe Bahn, dunkel, ein halbes
Rastermass nach UNTEN geschoben.
KOERPER Der Bogen selbst in seiner Farbe.
OBERKANTE Ein duennerer, hellerer Bogen, ein Drittel
nach OBEN geschoben. Weil er verschoben
ist, schaut er oben hervor und verschwindet
unten -- genau das tut eine gewoelbte Kante
bei Licht von oben.
Alle drei tragen `data-ring` und werden vom Skript
gemeinsam gesetzt. Eine Lage, die nicht mitwandert,
waere ein Schatten, der stehen bleibt -- das faellt
sofort auf und sieht kaputt aus.
KEIN Weichzeichner, nirgends: Die Tiefe entsteht aus
dem Versatz, nicht aus Unschaerfe. -->
<g class="uhr__schatten" transform="translate(0 0.55)">
<circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" />
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" />
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" />
</g>
<circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" id="uhr-sekunde" />
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" id="uhr-minute" />
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" id="uhr-stunde" />
<g class="uhr__kante" transform="translate(0 -0.4)">
<circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" />
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" />
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" />
</g>
</svg>
<span class="uhr__skala" aria-hidden="true"></span>
<!-- DER AUFGESETZTE ZWOELF-INDEX. Auf einem echten Zifferblatt
ist die Zwoelf nie nur ein Strich wie die anderen -- sie ist
das, woran das Auge sich ausrichtet. Ein aufgesetzter Keil
in Hausrot, mit heller Metallkante. -->
<span class="uhr__zwoelf" aria-hidden="true"></span>
<!-- DIE PERLE AM KOPF DES SEKUNDENBOGENS. Sie laeuft einmal je
Minute herum und ist das Einzige an der Uhr, das sich
BEWEGT statt nur zu wachsen. Ein Bogen zeigt einen Stand,
eine laufende Perle zeigt LEBEN -- und genau das ist der
Unterschied zwischen einer Anzeige und einem Instrument. -->
<span class="uhr__perle" id="uhr-perle" aria-hidden="true"></span>
<!-- Dieselbe Kappe fuer Minute und Stunde, auf ihren eigenen
Bahnen. Drei Koepfe statt einem: Erst dadurch liest man
die drei Ringe als drei ZEIGER und nicht als drei
Fortschrittsbalken. -->
<span class="uhr__perle uhr__perle--minute" id="uhr-perle-minute" aria-hidden="true"></span>
<span class="uhr__perle uhr__perle--stunde" id="uhr-perle-stunde" 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=202609072357" defer></script>
<script src="assets/js/bereiche.js?v=202609072357" defer></script>
<script src="assets/js/kopf.js?v=202609072357" defer></script>
<script src="assets/js/glocke.js?v=202609072357" defer></script>
<script src="assets/js/start.js?v=202609072357" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink