DogFatherGitandClaude Opus 5
f3d5bcf198
Wunsch Filipe: "ich will dass die rollen auch alle in einer grossen kacheln sind, die soll richtig krass sein, richtig speziell." Vorher waren es fuenf einzelne Kaesten mit je eigenem Rand, eigenen runden Ecken und 8 px Luft dazwischen -- der Hintergrund des Motivs schien ueberall durch. Das las sich als fuenf Dinge, die zufaellig untereinander stehen. Es ist aber EINE Frage mit fuenf Antworten, und genau so sieht es jetzt aus: ein Koerper mit abgeschraegten Ecken, in den fuenf Felder eingelassen sind. DIE FUGE MACHT DIE KACHEL, nicht der Rand aussen. Ein Spalt, durch den der Untergrund scheint, TRENNT; eine dunkle Fuge (#05070c) VERBINDET, weil sie zum selben Koerper gehoert. Dieselbe Entscheidung wie beim Kalender. DIE FASSUNG traegt dieselben vier Farben wie der Rand der Zentrale -- links Rot, rechts Babyblau, Silber als Treffpunkt, Schwarz als Fuge. Wer sich anmeldet, sieht damit schon hier die Handschrift der Seite dahinter. WAS BLEIBT, IST DIE SCHIENE. Sie war das Beste am alten Entwurf: Wer sich als Manager anmeldet, sieht schon hier das Lila, in dem ihm gleich seine Kacheln begegnen. Sie sitzt jetzt buendig an der Innenkante statt am Rand einer eigenen Karte -- dieselbe Wirkung, ein Koerper weniger. ZWEI SACHEN, DIE DABEI AUFFIELEN: 1. ES GAB ZWEI ENTWUERFE FUER DIESELBEN FUENF ZEILEN. Einen ab 1100 px (`.tafel .rolle`, mit Schiene und Tastenwirkung) und einen darunter (`.rolle`, schlicht). Mein erster Anlauf legte einen DRITTEN darueber -- im Bildschirmfoto standen die alten Karten unveraendert in meiner neuen Kachel. Statt der dritten Schicht sind jetzt beide vorhandenen auf Felder umgestellt: eine Aussage, zwei Groessen. 2. `transform: translateY(1px)` BEIM DRUECKEN MUSSTE WEG. Bei fuenf einzelnen Karten war das richtig -- eine Taste, die nachgibt. In einem geschlossenen Koerper schiebt sich damit ein Feld um einen Pixel aus der Kachel heraus, reisst die Fuge auf und sieht nach einem Fehler aus. Der eingelassene Schatten sagt dasselbe, ohne etwas zu verschieben. Nebenbei: Die Markierung der gewaehlten Rolle stand unter 1100 px fuer alle fuenf auf demselben Blau-Violett -- wer "Scout" waehlte, bekam Blau, obwohl Scout gruen ist. Die Rollenfarbe `--rf` war zwei Zeilen darueber definiert und wurde nicht benutzt. Jetzt kommt sie per `color-mix` aus den zentralen Hausfarben. Geprueft: pruef-rollen (97 Pruefungen, alles in Ordnung), pruef-css-klassen (alles in Ordnung), dazu 390/320/820 px nachgemessen -- nichts ragt heraus, nichts laesst sich seitlich schieben. Dabei hat meine eigene Messung erst fuenf Fehler gemeldet, die es nicht gab: Die Untertitel sind auf schmalen Geraeten ausgeblendet, ein ausgeblendetes Element hat die Masse 0/0, und 0 liegt links von jeder Kachel. Ohne den Blick aufs Bild haette ich einen Fehler gesucht, den nur die Pruefung hatte. Co-Authored-By: Claude Opus 5 <[email protected]>
89 lines
3.6 KiB
HTML
89 lines
3.6 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>Start-Check · Spicy & Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
|
||
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
|
||
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
|
||
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
|
||
eine Flaeche sind statt zweier. -->
|
||
<meta name="theme-color" content="#06090f" />
|
||
<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=202609090002" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609090002" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090002" />
|
||
<link rel="stylesheet" href="assets/css/startcheck.css?v=202609090002" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609090002" />
|
||
</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">
|
||
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
|
||
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M14.5 5.5 8 12l6.5 6.5" />
|
||
</svg>
|
||
<span class="zurueck-knopf__text">Zurück</span>
|
||
</button>
|
||
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator Workspace</a> · Start-Check</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="inhalt inhalt--breit">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Onboarding · Erstanalyse</p>
|
||
<h1 class="titel">Start-Check</h1>
|
||
<p class="unterzeile" id="unterzeile">
|
||
Ausgangslage verstehen – und daraus konkrete Arbeitspakete bauen.
|
||
</p>
|
||
</div>
|
||
<div class="steuerung">
|
||
<div id="creator-block" hidden>
|
||
<label class="feld-schild" for="f-creator">Creator</label>
|
||
<select id="f-creator"></select>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<section class="fortschritt" id="fortschritt" hidden>
|
||
<div class="fortschritt__kopf">
|
||
<span class="fortschritt__zahl" id="f-zahl">0 von 16</span>
|
||
<span class="fortschritt__text" id="f-text">Punkten geprüft</span>
|
||
</div>
|
||
<div class="fortschritt__balken" role="progressbar" aria-valuemin="0" aria-valuemax="16"
|
||
aria-valuenow="0" id="f-balken-aussen">
|
||
<div class="fortschritt__fuellung" id="f-balken"></div>
|
||
</div>
|
||
<p class="fortschritt__hinweis" id="f-hinweis"></p>
|
||
</section>
|
||
|
||
<div id="felder" aria-busy="true"><p class="leise">Start-Check wird geladen …</p></div>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/ki.js?v=202609090002" defer></script>
|
||
<script src="assets/js/wahl.js?v=202609090002" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609090002" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609090002" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609090002" defer></script>
|
||
<script src="assets/js/startcheck.js?v=202609090002" defer></script>
|
||
</body>
|
||
</html>
|