DogFatherGitandClaude Opus 5
db8dd2fbea
Filipe: „nur die kacheln noch viel geiler. so dass ich die texte auch
besser erkenne."
NAHELIEGEND WAERE GEWESEN, die Farben aufzuhellen. Erst gemessen,
dann gebaut -- und die Vermutung war falsch:
Kontrast .s-karte__text 15,7 : 1 (noetig 4,5)
Kontrast aller zehn Textarten 7,5 bis 15,7 : 1
ZEICHEN JE ZEILE 147 (angenehm 45-75)
Am Kontrast lag es nicht; der ist ueberall ueppig. Es lag an der
ZEILENLAENGE. Auf 1280 px lief der Meldungstext ueber die ganze
Kartenbreite: 1120 px, knapp 150 Zeichen. Beim Zeilenwechsel findet
das Auge die naechste Zeile nicht mehr sicher -- man liest dieselbe
zweimal oder ueberspringt eine. Das ist der groesste Hebel beim
Lesen, und er kostet nichts.
GEAENDERT
Meldungstext 15,2 -> 17 px, max-width 72ch, Zeilenhoehe 1.6
Verlaufstext 14,4 -> 15,2 px, max-width 70ch
Kartenrand 16/18/15/22 -> 18/20/16/24 px
Trennlinie zwischen Meldung und Verlauf
147 -> 78 Zeichen je Zeile (PC), 39 auf dem Handy
`ch` UND NICHT PIXEL: `ch` ist die Breite der Null und waechst mit
der Schrift mit. Eine Angabe in Pixeln waere bei der naechsten
Schriftgroesse wieder falsch -- dieselbe Falle wie jede feste Zahl.
MEHR RAND, WEIL DIE SCHRIFT GEWACHSEN IST. Bei unveraendertem Rand
haette sie die Kante beruehrt, und die Karte waere voller gewirkt
statt lesbarer. Links bleibt es breiter: dort laeuft die
Leuchtschiene in der Farbe des Stands.
DIE TRENNLINIE kostet einen Pixel und beantwortet „wo hoert die
Meldung auf und wo faengt die Vorgeschichte an?". Vorher lief beides
ohne Zaesur ineinander.
EIN FEHLER IN MEINER EIGENEN MESSUNG -- und er haette Schaden
angerichtet
Die erste Fassung der Kontrastrechnung meldete fuer drei gut lesbare
Texte einen Kontrast von 1,04. Ich war nah dran, Farben zu
„reparieren", die in Ordnung sind.
Der Grund: `rgb()` zaehlt 0..255, `color(srgb …)` zaehlt 0..1 -- und
genau das liefert Chrome fuer jedes `color-mix()`. 0,77 als 0,77/255
gelesen ist fast Schwarz. Aufgefallen ist es nur, weil die Zahl
nicht zum Bildschirmfoto passte: Dort waren die Texte deutlich
lesbar.
DESHALB STEHT IN DER PRUEFUNG EINE GEGENPROBE IM BROWSER: Ein
absichtlich zu blasser Absatz wird eingehaengt und MUSS auffallen
(gemessen 1,23 : 1). Ohne sie waere „alle ueber 4,5" auch dann
gruen, wenn die Rechnung kaputt ist -- und genau das war sie.
GEPRUEFT -- pruef-support-bilder 56 -> 64 ok
9 Textarten in der Karte gemessen
der Meldungstext ist 16.96 px gross (mindestens 16)
und bricht nach etwa 78 Zeichen um (hoechstens 85, vorher 147)
der Verlaufstext: 15.2 px, etwa 75 Zeichen
jeder Text haelt die Kontrastschwelle (0 darunter)
— schwaechster 7.55 : 1
Gegenprobe: ein absichtlich blasser Text faellt auf (1.23 : 1)
auf 390 px ragt mit der groesseren Schrift nichts heraus (0 px)
und die Zeile bleibt lesbar lang (etwa 39 Zeichen)
Dazu gruen: pruef-css-klassen · pruef-fingermass.
Co-Authored-By: Claude Opus 5 <[email protected]>
234 lines
10 KiB
HTML
234 lines
10 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>Manager-Ziele · Spicy & Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#06090f" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610031234" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610031234" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202610031234" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202610031234" />
|
||
<link rel="stylesheet" href="assets/css/manager-ziele.css?v=202610031234" />
|
||
<!-- module.css an VORLETZTER, haus.css an LETZTER Stelle. Die
|
||
Reihenfolge ist keine Geschmacksfrage: haus.css setzt nur
|
||
Variablen, und bei Variablen entscheidet allein, wer zuletzt
|
||
kommt. pruef-css-klassen.mjs misst genau dieses Paar nach. -->
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202610031234" />
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202610031234" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<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> · Manager-Ziele</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 mz-seite">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Manager-Ziele</p>
|
||
<h1 class="titel" id="seiten-titel">Dein Monat</h1>
|
||
<p class="unterzeile">
|
||
Vier feste Aufgaben pro Monat. Trag ein, was du gemacht hast –
|
||
der Rest rechnet sich von selbst.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ==================================================================
|
||
DER KOPF: Monat, Gesamtfortschritt, Resttage.
|
||
|
||
Der Ring steht VOR dem Text und nicht daneben-rechts: Auf einem
|
||
Handy ist er damit das Erste, was ins Auge fällt, und man weiß
|
||
in einer halben Sekunde, ob noch etwas offen ist.
|
||
================================================================== -->
|
||
<div class="mz-kopf" id="kopf" hidden>
|
||
<div class="mz-ring" id="ring" role="img" aria-label="Fortschritt">
|
||
<span class="mz-ring__text">
|
||
<span class="mz-ring__zahl" id="ring-zahl">–</span>
|
||
<span class="mz-ring__von" id="ring-von"></span>
|
||
</span>
|
||
</div>
|
||
<div class="mz-kopf__text">
|
||
<p class="mz-kopf__monat" id="kopf-monat">…</p>
|
||
<p class="mz-kopf__stand" id="kopf-stand"></p>
|
||
<p class="mz-kopf__rest" id="kopf-rest"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="ladefehler" id="ladefehler" hidden>
|
||
<span class="ladefehler__satz">Die Seite konnte nicht geladen werden.</span>
|
||
<span class="ladefehler__grund" id="ladefehler-grund"></span>
|
||
<button type="button" class="ladefehler__knopf" id="nochmal">Erneut versuchen</button>
|
||
</p>
|
||
|
||
<!-- Die vier Aufgabenzeilen. Werden gebaut, nicht geschrieben:
|
||
Welche Aufgaben es gibt, sagt der Server (AUFGABEN in
|
||
manager-ziele-tabellen.js). Stünden sie hier noch einmal,
|
||
wären es zwei Listen, von denen eine veraltet. -->
|
||
<ul class="mz-liste" id="liste" aria-live="polite"></ul>
|
||
|
||
<!-- ==================================================================
|
||
DER DAUERHAFTE HINWEIS
|
||
|
||
Wörtlich aus der Vorlage. Er steht unter den Aufgaben und nicht
|
||
darüber: Oben wäre er eine Drohung, bevor man überhaupt
|
||
gesehen hat, worum es geht.
|
||
================================================================== -->
|
||
<p class="mz-merksatz">
|
||
Inaktive Manager können nicht mehr berücksichtigt werden, da die
|
||
Anforderungen von TikTok stetig wachsen und wir als Firma diesen
|
||
nachkommen müssen.
|
||
</p>
|
||
|
||
<!-- ---------- VERLAUF: vergangene Monate, nur lesbar -------------- -->
|
||
<section class="mz-block" id="verlauf-block" hidden>
|
||
<h2 class="mz-block__titel">Verlauf</h2>
|
||
<div id="verlauf" aria-live="polite"></div>
|
||
</section>
|
||
|
||
<!-- ---------- TEAM: nur DogFather und Spicy Media ----------------- -->
|
||
<section class="mz-block" id="team-block" hidden>
|
||
<h2 class="mz-block__titel">Team-Übersicht</h2>
|
||
<div class="mz-steuer">
|
||
<label class="mz-feld__schild" for="team-monat">Monat</label>
|
||
<select id="team-monat"></select>
|
||
<label class="mz-feld__schild" for="team-filter">Zeigen</label>
|
||
<select id="team-filter">
|
||
<option value="alle">alle</option>
|
||
<option value="rot">nur Rot</option>
|
||
<option value="orange">Rot und Orange</option>
|
||
<option value="offen">alle mit offenen Zielen</option>
|
||
</select>
|
||
<!-- SORTIEREN AUCH HIER UND NICHT NUR AN DEN SPALTEN.
|
||
|
||
Auf dem Handy wird die Tabelle zu Karten, und die
|
||
Spaltenueberschriften verschwinden dabei (sie wuerden dort
|
||
mehr Platz kosten als der Inhalt). Ohne dieses Feld waere
|
||
das Sortieren auf einem Telefon schlicht nicht erreichbar
|
||
-- eine Funktion, die nur auf dem grossen Bildschirm
|
||
existiert, ist eine halbe Funktion.
|
||
|
||
Die Liste wird von manager-ziele.js gefuellt, damit sie zu
|
||
den Aufgaben passt, die der Server nennt. Eine zweite,
|
||
hier hingeschriebene Liste waere die, die auseinanderlaeuft. -->
|
||
<label class="mz-feld__schild" for="team-sort">Sortieren</label>
|
||
<select id="team-sort"></select>
|
||
<button type="button" class="schritt" id="team-richtung"
|
||
aria-label="Sortierrichtung umdrehen">aufsteigend ▴</button>
|
||
<button type="button" class="schritt" id="team-csv">Als CSV laden</button>
|
||
<button type="button" class="schritt" id="ziele-auf">Zielzahlen</button>
|
||
</div>
|
||
<div id="team" aria-live="polite"></div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ==================================================================
|
||
DAS FORMULAR
|
||
|
||
Ein echtes <dialog>: Es bringt Fokusfang, Escape und den
|
||
abdunkelnden Hintergrund mit, ohne dass davon eine Zeile selbst
|
||
geschrieben werden muss. Nachgebaute Fenster vergessen davon
|
||
immer mindestens eines -- meist den Fokus.
|
||
================================================================== -->
|
||
<dialog class="dialog" id="form-dialog">
|
||
<form class="mz-form" id="form" method="dialog">
|
||
<div>
|
||
<h2 class="dialog__titel" id="form-titel">Eintragen</h2>
|
||
<p class="dialog__unter dialog__unter--still" id="form-unter"></p>
|
||
</div>
|
||
|
||
<label class="mz-feld mz-feld--vorschlag" id="feld-name" hidden>
|
||
<span class="mz-feld__schild">TikTok-Name des Creators</span>
|
||
<input type="text" id="e-name" maxlength="120" autocomplete="off"
|
||
placeholder="z. B. @lunatanzt" />
|
||
<ul class="mz-treffer" id="treffer" hidden></ul>
|
||
</label>
|
||
|
||
<label class="mz-feld" id="feld-link" hidden>
|
||
<span class="mz-feld__schild">Link zum Video</span>
|
||
<input type="url" id="e-link" maxlength="500" inputmode="url"
|
||
placeholder="https://www.tiktok.com/@…/video/…" />
|
||
</label>
|
||
|
||
<label class="mz-feld" id="feld-art" hidden>
|
||
<span class="mz-feld__schild" id="art-schild">Art</span>
|
||
<select id="e-art"></select>
|
||
</label>
|
||
|
||
<div class="mz-feld">
|
||
<span class="mz-feld__schild">Datum</span>
|
||
<!-- Die drei fertigen Tage werden von manager-ziele.js gefuellt:
|
||
welche es gibt, haengt davon ab, welcher Tag heute ist (am
|
||
1. des Monats gibt es kein „gestern" in diesem Monat). Eine
|
||
feste Liste hier waere an zwei Tagen im Monat falsch. -->
|
||
<div class="mz-schnelltage" id="datum-schnell"></div>
|
||
<input type="date" id="e-datum" required />
|
||
</div>
|
||
|
||
<label class="mz-feld">
|
||
<span class="mz-feld__schild">Notiz (freiwillig)</span>
|
||
<textarea id="e-notiz" maxlength="1000" rows="2"></textarea>
|
||
</label>
|
||
|
||
<p class="mz-form__fehler" id="form-fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<div class="dialog__knoepfe">
|
||
<button type="button" class="knopf-still" id="form-abbruch">Abbrechen</button>
|
||
<button type="submit" class="knopf" id="form-speichern">Speichern</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- Die Zielzahlen. Eigener Dialog und keine zweite Seite: Es sind
|
||
sechzehn Zahlen, die man einmal im Monat ansieht. -->
|
||
<dialog class="dialog dialog--breit" id="ziele-dialog">
|
||
<form class="mz-form" id="ziele-form" method="dialog">
|
||
<div>
|
||
<h2 class="dialog__titel">Zielzahlen je Rolle</h2>
|
||
<p class="dialog__unter dialog__unter--still" id="ziele-gilt"></p>
|
||
</div>
|
||
<div id="ziele-felder"></div>
|
||
<p class="mz-form__fehler" id="ziele-fehler" role="alert" aria-live="polite"></p>
|
||
<div class="dialog__knoepfe">
|
||
<button type="button" class="knopf-still" id="ziele-abbruch">Abbrechen</button>
|
||
<button type="submit" class="knopf" id="ziele-speichern">Für nächsten Monat speichern</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und
|
||
kopf.js liest daraus die Leitungsrollen. Ohne sie stürzt jede
|
||
Seite ab, und zwar nur in der Browserkonsole -- die Kopfleiste
|
||
kommt trotzdem. -->
|
||
<script src="assets/js/bereiche.js?v=202610031234" defer></script>
|
||
<!-- wahl.js gehört zu kopf.js: Der Sicht-Umschalter baut daraus seine
|
||
Liste. pruef-css-klassen setzt das durch, und zwar auch die
|
||
Reihenfolge -- kopf.js fragt beim Aufbau nach dem fertigen
|
||
Bedienelement. -->
|
||
<script src="assets/js/wahl.js?v=202610031234" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202610031234" defer></script>
|
||
<script src="assets/js/installieren.js?v=202610031234" defer></script>
|
||
<script src="assets/js/kopf.js?v=202610031234" defer></script>
|
||
<script src="assets/js/glocke.js?v=202610031234" defer></script>
|
||
<script src="assets/js/manager-ziele.js?v=202610031234" defer></script>
|
||
</body>
|
||
</html>
|