DogFatherGitandClaude Opus 5
b1810ddbc5
Filipe, mit Bildschirmfoto der beiden Felder: "die sollen geiler sein."
WAS SIE WIRKLICH SIND, stand nur im Klassennamen. Auf einer
Unterweisung bestaetigen ZWEI Personen, dass sie sie durchgegangen
sind -- der Creator und seine Betreuung. Das ist kein Statusfeld, das
ist eine Gegenzeichnung. Gezeichnet waren sie als zwei graue Kaesten
mit runden Ecken, die man auf dem dunklen Grund kaum sah. Zwei
Rechtecke sagen "hier steht etwas". Eine Unterschriftszeile sagt "hier
fehlt jemand".
ZWEI ZUSTAENDE, ZWEI BILDER -- und beide gab es im Code laengst als
`data-da="ja"/"nein"`, nur unterschieden sie sich um einen Hauch Gruen:
OFFEN eine gestrichelte Linie mit einem leeren Platz darauf. Sie
WARTET sichtbar. Der Federstrich links deutet an, wo man
ansetzt.
DA eine durchgezogene gruene Linie, der Name darueber, und ein
gepraegtes Siegel mit Haken -- wie ein abgestempeltes
Formular.
GLEICHE HOEHE IN BEIDEN ZUSTAENDEN, und das ist keine Kosmetik: Die
Felder stehen nebeneinander in einem Raster. Waere das unterschriebene
hoeher, spraenge die Karte in dem Moment, in dem jemand unterschreibt
-- unter dem Finger dessen, der gerade gedrueckt hat.
KEINE ZWEITE FASE. Die Karte drumherum steht schon in der Modulliste.
Eine abgeschraegte Ecke IN einer abgeschraegten Ecke liest sich als
Fehler, nicht als Absicht. Das Feld traegt deshalb die andere
Formensprache des Hauses: die Linie.
DER HAKEN IST EINE MASKE, kein Zeichensatz-Haken (der sieht in jeder
Schrift anders aus und faellt weg, wenn eine fehlt) und kein Bild
(eine Datei mehr fuer fuenfzehn Pixel). Erst stand er nur im
Kommentar, waehrend im Code eine leere Muenze lag -- nachgebaut, bevor
es committet wurde. Ein Kommentar, der mehr behauptet als der Code
tut, ist schlimmer als keiner.
ZWEI ANSICHTEN NACHGEMESSEN: Auf 1400 px nebeneinander, auf 390 px
untereinander. Das Siegel sass im ersten Anlauf mit
`translate(100%)` AUSSERHALB des Feldes -- breit sah das gut aus,
schmal waere es aus der Karte gelaufen. Jetzt sitzt es innen; die
Seite laesst sich bei 390 px nicht seitlich schieben.
(Fuer die Ansicht musste ich Testdaten anlegen -- ohne Unterweisung
gibt es keine Unterschriften, und ein Bildschirmfoto von einem leeren
Bereich beweist nichts. Die Daten liegen in der Wegwerf-Datenbank der
Pruefung, nicht im echten System.)
Geprueft: pruef-schulung, pruef-css-klassen -- beide in Ordnung.
Co-Authored-By: Claude Opus 5 <[email protected]>
110 lines
4.6 KiB
HTML
110 lines
4.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>Reports & Review · 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=202609090101" />
|
|
<link rel="stylesheet" href="assets/css/start.css?v=202609090101" />
|
|
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090101" />
|
|
<link rel="stylesheet" href="assets/css/report.css?v=202609090101" />
|
|
<link rel="stylesheet" href="assets/css/module.css?v=202609090101" />
|
|
</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> · Review</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">Reports</p>
|
|
<h1 class="titel">Review & nächste Schritte</h1>
|
|
<p class="unterzeile" id="unterzeile">Fortschritt wird nicht gefühlt, sondern nachvollziehbar gemacht.</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>
|
|
<label class="feld-schild" for="f-tage">Zeitraum</label>
|
|
<select id="f-tage">
|
|
<option value="7">7 Tage</option>
|
|
<option value="30" selected>30 Tage</option>
|
|
<option value="90">90 Tage</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
|
|
|
<div id="bericht" aria-busy="true"><p class="leise">Report wird erstellt …</p></div>
|
|
|
|
<!-- Der Kern aus dem Konzept: Ein Review endet mit einer Entscheidung. -->
|
|
<section class="entscheidung" id="entscheidung-block" hidden>
|
|
<p class="marke">Abschluss</p>
|
|
<h2 class="entscheidung__titel">Was ist die Entscheidung?</h2>
|
|
<p class="entscheidung__text">
|
|
Ein Review endet nicht mit einer Zusammenfassung, sondern mit einem nächsten Schritt.
|
|
Was hier steht, wird sofort als Aufgabe mit hoher Priorität angelegt.
|
|
</p>
|
|
<form id="entscheidung">
|
|
<div class="entscheidung__raster">
|
|
<div>
|
|
<label class="feld-schild" for="e-titel">Nächster Schritt</label>
|
|
<input id="e-titel" maxlength="160" placeholder="z. B. Mikro-Problem bis Freitag lösen" required />
|
|
</div>
|
|
<div>
|
|
<label class="feld-schild" for="e-frist">Bis wann <span class="leise">(optional)</span></label>
|
|
<input id="e-frist" type="date" />
|
|
</div>
|
|
</div>
|
|
<p class="fehler" id="e-fehler" role="alert" aria-live="polite"></p>
|
|
<div class="neu__knoepfe">
|
|
<button type="submit" class="knopf knopf--klein" id="e-speichern">Als Aufgabe festhalten</button>
|
|
<span class="leise" id="e-stand"></span>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script src="assets/js/ki.js?v=202609090101" defer></script>
|
|
<script src="assets/js/wahl.js?v=202609090101" defer></script>
|
|
<script src="assets/js/bereiche.js?v=202609090101" defer></script>
|
|
<script src="assets/js/kopf.js?v=202609090101" defer></script>
|
|
<script src="assets/js/glocke.js?v=202609090101" defer></script>
|
|
<script src="assets/js/report.js?v=202609090101" defer></script>
|
|
</body>
|
|
</html>
|