dogfather-universe/workspace/start.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=202609070423" />
<link rel="stylesheet" href="assets/css/start.css?v=202609070423" />
<!-- 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=202609070423" />
</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. -->
        <div class="uhr" id="uhr" role="timer" aria-live="off">
          <svg class="uhr__ring" viewBox="0 0 100 100" aria-hidden="true">
            <defs>
              <linearGradient id="uhr-lauf" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%"   stop-color="#ff5f6d" />
                <stop offset="52%"  stop-color="#c97ba8" />
                <stop offset="100%" stop-color="#8fd8ff" />
              </linearGradient>
              <linearGradient id="uhr-sekunde" x1="1" y1="1" x2="0" y2="0">
                <stop offset="0%"   stop-color="#a8e4ff" />
                <stop offset="100%" stop-color="#ff7b84" />
              </linearGradient>
            </defs>
            <circle class="uhr__bahn" cx="50" cy="50" r="44" />
            <circle class="uhr__minute" cx="50" cy="50" r="44" id="uhr-minute" />
            <circle class="uhr__zeiger" cx="50" cy="50" r="44" id="uhr-zeiger" />
            <!-- Der leuchtende Kopf am Ende des Sekundenbogens. Er wird
                 GEDREHT statt neu berechnet -- eine Drehung ist eine
                 Zahl, eine Position wären zwei plus Sinus und Kosinus. -->
            <g class="uhr__kopf" id="uhr-kopf">
              <circle class="uhr__kopf-schein" cx="50" cy="6" r="4.6" />
              <circle class="uhr__kopf-kern"   cx="50" cy="6" r="2.1" />
            </g>
          </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=202609070423" defer></script>
<script src="assets/js/bereiche.js?v=202609070423" defer></script>
<script src="assets/js/kopf.js?v=202609070423" defer></script>
<script src="assets/js/glocke.js?v=202609070423" defer></script>
<script src="assets/js/start.js?v=202609070423" defer></script>
</body>
</html>