"ich will die symbole in den kacheln noch viel krasser und geiler."
Bis eben war jedes Zeichen eine reine Kontur. Sauber, aber neutral --
siebzehn gleich starke Umrisse nebeneinander, wie aus jedem
Symbolbaukasten.
Jetzt besteht jedes aus ZWEI Teilen:
FUELLUNG eine gefuellte Grundform, gedeckt hinterlegt
LINIE die scharfe Zeichnung darueber, mit dem Verlauf von gestern
Das ist der Unterschied zwischen einem Symbol und einem Piktogramm.
Sobald ein Teil FLAECHE hat, bekommt das Zeichen ein Vorn und ein
Hinten, und das Auge erkennt es, ohne es zu lesen.
Gefuellt wird immer das, WORUM ES GEHT -- nie alles:
Kalender der Kopf des Blattes (daran erkennt man ihn aus drei Metern)
Aufgaben die mittlere Spalte -- "in Arbeit", dort passiert etwas
Dashboard zwei der vier Felder ueber Eck, das gibt Rhythmus
Ordner der Korpus ohne die Lasche, damit die Stufe sichtbar bleibt
Berichte aus drei Strichen werden drei SAEULEN (ein Balkendiagramm
hat Balken)
Start-Check nur der Haken -- ein gefuelltes Klemmbrett waere ein Kasten
Personen der Kopf; bei zwei Personen nur der VORDERE, daraus
entsteht die Tiefe
Buch die linke Seite -- eine im Licht, eine im Schatten
Technik die drei Griffe
LIVE der Sender in der Mitte; gefuellte Wellen saehen aus wie
ein Auge
Trichter nur der obere Teil, sonst kippt das Zeichen nach unten
20 % Deckkraft sind gemessen, nicht geraten: darueber wird das Zeichen
zum Fleck und die Linie darin unsichtbar, darunter sieht man die Flaeche
gar nicht. Beim Ueberfahren geht sie auf 30 %, als kaeme Licht dazu.
WARUM NICHT EINFACH DICKER -- der Unterschied zum gescheiterten Versuch
von gestern: Der legte eine dicke, WEICHGEZEICHNETE KOPIE DER LINIE
darunter und hat damit jede Luecke zugeschmiert (aus dem Kalender wurde
ein leerer Kasten). Eine Flaeche ist etwas anderes als ein aufgeblasener
Strich: Sie liegt INNERHALB der Kontur und laesst die Zwischenraeume
unberuehrt. Genau deshalb funktioniert es jetzt.
Im Wasserzeichen und im Kontrastmodus bleibt die Flaeche aus -- dort
wuerde sie den Text hinterlegen bzw. zu einem massiven Block werden.
GEPRUEFT: Buehne 38 (Textkontrast an echten Bildpunkten -- die Flaeche
darf die Lesbarkeit nicht antasten), Startansicht 133, Rollen 97,
Handy 50, Team 30, Grosscheck 15, Lesbarkeit 14. Alle gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
120 lines
5.0 KiB
HTML
120 lines
5.0 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>Mein Steckbrief · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<meta name="theme-color" content="#05070d" />
|
||
<link rel="icon" href="assets/img/favicon.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609030141" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609030141" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609030141" />
|
||
<link rel="stylesheet" href="assets/css/profil.css?v=202609030141" />
|
||
</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> · Mein Steckbrief</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">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Über mich</p>
|
||
<h1 class="titel">Mein Steckbrief</h1>
|
||
<p class="unterzeile">
|
||
Das hier gehört dir. Dein Bild steht danach in der Kopfleiste, in der
|
||
Personenliste und überall dort, wo dein Name auftaucht.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Der eigene Steckbrief. Steht GANZ OBEN und über allem anderen: Er
|
||
gehört jedem im Workspace, nicht nur Creatorn – ein Scout, ein
|
||
Manager und DogFather haben ihn genauso. Die Creator-Akte darunter
|
||
ist etwas anderes (die führen die Betreuer). -->
|
||
<section class="steckbrief" id="steckbrief" hidden>
|
||
<div class="steckbrief__kopf">
|
||
<div class="steckbrief__bildfeld">
|
||
<span class="steckbrief__bild" id="sb-bild" aria-hidden="true"></span>
|
||
<div class="steckbrief__bildknoepfe">
|
||
<label class="schritt" for="sb-datei">Bild wählen</label>
|
||
<input type="file" id="sb-datei" accept="image/jpeg,image/png,image/webp" hidden />
|
||
<button type="button" class="schritt" id="sb-bild-weg" hidden>entfernen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="steckbrief__text">
|
||
<p class="feldschild">Mein Profil</p>
|
||
<h2 class="steckbrief__name" id="sb-name">…</h2>
|
||
<p class="steckbrief__rolle" id="sb-rolle"></p>
|
||
|
||
<label class="feld-schild" for="sb-ueber">Ein Satz über dich</label>
|
||
<textarea id="sb-ueber" rows="2" maxlength="400"
|
||
placeholder="z. B. Ich streame Gaming und Just Chatting, meistens abends."></textarea>
|
||
|
||
<p class="feldschild steckbrief__schild">Meine Kanäle</p>
|
||
<!-- Bewusst nur der öffentliche Name, kein Login: siehe die
|
||
Begründung im Kopf von server/workspace-steckbrief.js. -->
|
||
<div class="steckbrief__kanaele" id="sb-kanaele"></div>
|
||
|
||
<p class="fehler" id="sb-fehler" role="alert" aria-live="polite"></p>
|
||
<div class="steckbrief__fuss">
|
||
<button type="button" class="knopf knopf--klein" id="sb-speichern">Profil speichern</button>
|
||
<span class="steckbrief__stand" id="sb-stand" role="status" aria-live="polite"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DAS TEAM. Wunsch vom 01.09.2026: "ich will, dass wir Manager,
|
||
Scouts, DogFather auch die Fotos, Namen und so alles sehen, alles
|
||
was die in ihrem Profil eintragen."
|
||
|
||
Bis dahin war der Steckbrief eine Einbahnstraße: Jeder pflegte
|
||
seinen, und niemand bekam ihn je zu Gesicht. Die Schnittstelle
|
||
dafür lag fertig da (GET /workspace/api/steckbrief) und wurde von
|
||
keiner einzigen Seite aufgerufen.
|
||
|
||
Wer wen sieht, entscheidet weiterhin der Server. -->
|
||
<!-- EIGENE KLASSEN, nicht die vorhandenen .block__* : Die stehen in
|
||
automation.css und wissen.css, und diese Seite lädt beide nicht.
|
||
Genau so sind hier schon zweimal Stile ins Leere gelaufen -- der
|
||
Aufbau sah richtig aus, auf dem Bildschirm stand nacktes HTML.
|
||
Alles zu .team-* steht in start.css, die jede Seite lädt. -->
|
||
<section class="team-block" id="team-block" hidden>
|
||
<div class="team-block__kopf">
|
||
<div>
|
||
<p class="feldschild">Das Team</p>
|
||
<h2 class="team-block__titel">Wer hier mitarbeitet</h2>
|
||
</div>
|
||
<span class="team-block__zahl" id="team-zahl"></span>
|
||
</div>
|
||
<p class="team-block__text" id="team-text"></p>
|
||
<div class="team-gitter" id="team"></div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609030141" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609030141" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609030141" defer></script>
|
||
<script src="assets/js/steckbrief.js?v=202609030141" defer></script>
|
||
</body>
|
||
</html>
|