DogFatherGitandClaude Opus 5
90d5898640
Filipe: "perfektionier alle kacheln die du vorhin gewechselt hast auf
der ganzen website, mach sie alle noch geiler und geiler und noch
spezieller. sie gehen aber in eine gute richtung schon."
Alle drei Stufen sind FORM, keine neue Farbe -- das war die Lehre der
letzten Runden. Sie gelten fuer alle 35 Bauteile auf allen 18 Seiten,
weil sie in module.css stehen.
STUFE 1 -- DIE SCHRAEGE WIRD EINE ECHTE FASE
Bisher war die abgeschnittene Ecke ein Loch: Material, das fehlt. Eine
gefraeste Fase hat eine FLAECHE, und auf der liegt Schatten, weil sie
schraeg zum Licht steht. Ein Innenschatten aus der Richtung der
Schraege macht daraus ein bearbeitetes Werkstueck.
STUFE 2 -- ECKWINKEL AN DREI ECKEN STATT AN EINER
Eine einzelne Ecke liest sich als Verzierung, drei lesen sich als
RAHMUNG: Das Auge schliesst sie zu einem Ausschnitt. Die vierte bleibt
frei, dort sitzt die Fase -- ein Winkel auf einer abgeschnittenen Ecke
zeigte ins Leere.
STUFE 3 -- DAS ZEICHEN BEKOMMT EINE METALLFASSUNG
Die Plakette war ein abgerundetes Quadrat mit Farbschleier, also
dieselbe Form wie ueberall sonst im Netz. Jetzt ist sie ein gefasstes
Schild: dieselbe abgeschnittene Ecke wie ihre Karte, ein 2 px breiter
Ring aus gebuerstetem Metall, und die Kategoriefarbe INNEN. Damit
spricht die Anwendung EINE Materialsprache -- Konsole, Luenette der
Uhr und Schild sind dasselbe Metall.
ZWEI FEHLER DABEI, BEIDE GEMESSEN STATT VERMUTET
* DIE RUNDUNG BLIEB. `.kachel[data-gross="ja"] .kachel__zeichen`
setzt in start.css zweimal einen Radius (21 px, 18 px) und ist
staerker als eine einzelne Klasse. Gemessen: 18 px, obwohl
module.css 0 setzt und zuletzt geladen wird. Heraus kam ein Schild
mit abgeschnittener Ecke UND runden Ecken. Das ist heute die
dritte Spielart derselben Falle -- `:where()` war zu schwach,
`body.start .willkommen` zu stark, hier ist es die
Verschachtelung.
* DIE FASSUNG WAR ZU GRELL. Fast weiss auf 2 px Breite las sich als
Rahmen, der lauter ist als das Zeichen darin. Eine Fassung soll
das Schild halten, nicht mit ihm konkurrieren -- dieselben Stopps,
eine Blende dunkler.
18 Pruefungen gelaufen, alle gruen, keine mit gesunkener Anzahl.
Rechner und Handy (412 px) angesehen.
Co-Authored-By: Claude Opus 5 <[email protected]>
106 lines
4.8 KiB
HTML
106 lines
4.8 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 · 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=202609071321" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609071321" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609071321" />
|
||
<link rel="stylesheet" href="assets/css/dateien.css?v=202609071321" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609071321" />
|
||
</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=202609071321" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609071321" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609071321" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609071321" defer></script>
|
||
<script src="assets/js/dateien.js?v=202609071321" defer></script>
|
||
</body>
|
||
</html>
|