DogFatherGitandClaude Opus 5
4219ac3f9d
Filipe, mit dem Fenster im Bild: "perfektionnier auch diese kachel die sieht so scheisse aus." Er hatte recht, und der Grund war nicht die Farbe, sondern die REIHENFOLGE. Vor dem Feld, in das man einfuegt, standen fuenf lange Schritte und zwei Absaetze -- rund 1400 px Text, bevor die eigentliche Arbeit anfing. Wer das Fenster zum zwanzigsten Mal oeffnet, scrollt jedes Mal an einer Anleitung vorbei, die er laengst kennt; wer es zum ersten Mal oeffnet, liest eine Wand, bevor er weiss, worum es geht. Das habe ich selbst gebaut, heute Vormittag, auf den Wunsch "ich brauch auch eine erklaerung immer dabei". Die Erklaerung war richtig -- ihr Platz war falsch. JETZT: ein Satz oben, sofort das Feld, dann Tag und Vorschau. Die ausfuehrliche Anleitung liegt unter einer aufklappbaren Zeile, die zugeklappt 37 px braucht statt 560. DIE UEBERSCHRIFTENZEILE BLEIBT OBEN, ausserhalb des Aufklappers. Sie ist die einzige Angabe, ohne die es gar nicht geht -- den haeufigsten Fehlgriff hinter einen Klick zu legen waere genau der falsche Tausch. Nebenbei: Der Erklaersatz zum Tag stand IN der Feldbeschriftung und machte sie zweizeilig -- eine Beschriftung, die man lesen muss, ist keine mehr. Er steht jetzt darunter. Das Datumsfeld erbt die Schrift des Hauses (ohne Angabe nimmt der Browser seine eigene, und das sah aus wie ein vergessener Rest) und ist auf die Breite gedeckelt, die ein Datum braucht. Und das Fenster rollt INNEN, damit "Uebernehmen" immer erreichbar bleibt. pruef-backstage-import 72 -> 77. Die neuen Zeilen messen die POSITION in Pixeln, nicht den Text: Die bestehenden Pruefungen lesen `textContent` des ganzen Dialogs und waeren auch dann gruen, wenn die Anleitung wieder nach vorn rutscht. Dazu: zugeklappt beim Oeffnen, Ueberschriftenzeile trotzdem sichtbar, die Zeile nimmt unter 90 px, und der Aufklapper klappt wirklich auf (ein Aufklapper, der klemmt, versteckt die Anleitung endgueltig). Mit SCHIRM=1 legt die Pruefung drei Bilder ab: leer, zugeklappt, aufgeklappt. Co-Authored-By: Claude Opus 5 <[email protected]>
118 lines
5.5 KiB
HTML
118 lines
5.5 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>Dateien · 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?v=202609111554" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609111554" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609111554" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609111554" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609111554" />
|
||
<link rel="stylesheet" href="assets/css/dateien.css?v=202609111554" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609111554" />
|
||
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
|
||
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
|
||
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
|
||
genau diesen Dateinamen auf crew-haus.css um, und die Seite
|
||
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
|
||
ohne Umfaerben im Browser, ohne Flackern. -->
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202609111554" />
|
||
</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> · Dateien</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">Ablage</p>
|
||
<h1 class="titel">Dateien & Freigaben</h1>
|
||
<p class="unterzeile">Entwurf → Review → Freigabe. Die aktuelle Version ist immer klar erkennbar.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Hinweis für alle, die nicht ablegen dürfen (Creator). Steht statt
|
||
des Ablegefeldes, damit klar ist warum -- ein einfach fehlendes
|
||
Feld wirkt wie ein Fehler. -->
|
||
<p class="nur-lesen" id="nur-lesen" hidden>
|
||
Hier siehst du die Dateien deines Bereichs. <strong>Abgelegt werden sie
|
||
von DogFather oder von Scouts</strong> – du kannst sie öffnen, aber nichts hochladen.
|
||
</p>
|
||
|
||
<!-- Ablegefeld. Klick öffnet die Dateiauswahl, Ziehen funktioniert
|
||
ebenso -- beides landet im selben Ablauf. -->
|
||
<div class="ablage" id="ablage" tabindex="0" role="button"
|
||
aria-label="Datei auswählen oder hierher ziehen">
|
||
<svg class="ablage__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5" />
|
||
<path d="M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15" />
|
||
</svg>
|
||
<p class="ablage__text">Datei hierher ziehen oder <strong>auswählen</strong></p>
|
||
<p class="ablage__klein" id="ablage-grenze">bis 25 MB</p>
|
||
<input type="file" id="feld-datei" hidden />
|
||
</div>
|
||
|
||
<div class="hochlade-zeile" id="zuordnung" hidden>
|
||
<div class="feld feld--breit">
|
||
<label class="feld-schild" for="f-creator">Ablegen im Bereich von <span class="leise">(optional)</span></label>
|
||
<select id="f-creator"><option value="">— kein Bereich —</option></select>
|
||
</div>
|
||
<!-- Wer die Datei sehen darf. Mehrfachauswahl: dieselbe Datei kann
|
||
an mehrere Personen gehen, ohne sie mehrfach hochzuladen. -->
|
||
<div class="feld feld--breit">
|
||
<label class="feld-schild">Wer darf sie sehen?</label>
|
||
<p class="leise" id="wahl-hinweis">Niemand ausgewählt – dann sieht sie nur DogFather.</p>
|
||
<div class="wahl" id="wahl"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="fortschritt" id="fortschritt" hidden><span id="fortschritt-text"></span></p>
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<div class="filter" id="filter">
|
||
<button type="button" class="schritt" data-status="" aria-pressed="true">Alle</button>
|
||
<button type="button" class="schritt" data-status="entwurf" aria-pressed="false">Entwurf</button>
|
||
<button type="button" class="schritt" data-status="review" aria-pressed="false">Review</button>
|
||
<button type="button" class="schritt" data-status="freigegeben" aria-pressed="false">Freigegeben</button>
|
||
</div>
|
||
|
||
<div id="liste" aria-busy="true"><p class="leise">Dateien werden geladen …</p></div>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609111554" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609111554" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609111554" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609111554" defer></script>
|
||
<script src="assets/js/dateien.js?v=202609111554" defer></script>
|
||
</body>
|
||
</html>
|