DogFatherGitandClaude Opus 5
f701dae53e
Wunsch Filipe: "ich will das neben diesem kreis auch ein kleiner button
ist fuer den wecker von den aufgaben, oder quasi eine taetige meldung
einmal am tag zu aktivieren wenn noch aufgaben auf sind."
Ein Wecker-Knopf unter der Glocke, neben der Uhr. Eingeschaltet meldet
er sich einmal taeglich zur eingestellten Zeit -- aber nur, wenn
wirklich noch etwas offen ist. Der Satz nennt die Zahl und die
Ueberfaelligen: "3 Aufgaben sind noch offen / Davon eine ueberfaellig."
ALS EINZIGE ART MIT `vorgabe: false`, und das ist keine
Nachlaessigkeit. Alle anderen Benachrichtigungen antworten auf ein
Ereignis, das gerade passiert ist. Der Tagesruf kommt ungefragt zur
selben Zeit, ob es etwas Neues gibt oder nicht -- so etwas schaltet man
sich selbst ein, sonst ist es Werbung. Bei null offenen Aufgaben kommt
nichts: Eine taegliche Meldung "du hast nichts zu tun" ist der
schnellste Weg, dass man die naechste nicht mehr liest.
EIN FENSTER VON DREI STUNDEN. Der Takt laeuft alle fuenf Minuten; ein
einfaches "jetzt >= eingestellte Zeit" wuerde nach einem Serverausfall
den Ruf fuer neun Uhr um zwanzig Uhr zustellen. Wer eine Erinnerung an
einen vergangenen Tag bekommt, schaltet sie ab. Faellt der Tag aus, ist
das die ehrlichere Antwort.
VIER DINGE, DIE ERST DAS NACHMESSEN GEZEIGT HAT:
1. DER KNOPF VERSPRACH ETWAS, DAS ER NICHT HALTEN KONNTE. Chromium
meldet `Notification.permission === 'denied'` -- gemessen, nicht
vermutet. Der Knopf sah einladend aus ("Einmal am Tag melden…") und
sagte erst NACH dem Antippen ab. Ein Bedienelement, das den Grund
erst hinterher nennt, ist die schlechtere Haelfte einer
Fehlermeldung. Jetzt steht er im Titel, und der Knopf ist gedimmt.
2. EINE UHRZEIT IN DER RUHEZEIT WAERE EIN STILLES NICHTS. Der Server
laesst zwischen 22 und 7 Uhr nichts durch. Wer 23:00 einstellt,
bekaeme nie etwas und saehe nur einen Knopf auf "an". Jetzt steht
der Hinweis dort, wo man es einstellt -- mit den Grenzen VOM SERVER,
nicht mit hier getippten Zahlen.
3. `wert` UND `an` SIND ZWEI ENTSCHEIDUNGEN. Wer nur den Schalter
umlegt, schickt kein `wert` -- stumpf `req.body.wert` zu schreiben
haette bei jedem Aus- und Einschalten die Uhrzeit geloescht, und
beim naechsten Mal staende wieder neun Uhr da. Ein Datenverlust, den
niemand meldet, weil er wie eine Vorgabe aussieht. Genau dieser Weg
wird jetzt geprueft.
4. pruef-css-klassen HATTE ZWEIMAL RECHT. Der Stil lag in heim.css
(nur Startseite), die Zeichen entstehen aber in glocke.js (18
Seiten) -- auf 17 davon waere ein nackter Knopf gestanden. Und die
beiden neuen Schriftgroessen (10 und 11 px) haetten die Grundlinie
von 43 zu kleinen Stellen still auf 45 gehoben. Beides behoben:
Stil nach start.css, Schrift auf 12 px.
NEUE PRUEFUNG server/pruef-tagesruf.mjs, drei Schichten getrennt, weil
sie getrennt kaputtgehen: Oberflaeche im Browser, Schalten ueber die
Schnittstelle (aus der SEITE heraus, damit Sitzung und
Herkunftspruefung mitgehen), Zeitentscheidung als reine Rechnung. Die
Entscheidung wurde dafuer aus dem Rundgang herausgeloest -- dazwischen
steckend haette man zum Pruefen Datenbank und Push-Versand aufbauen
muessen, also haette man sie nicht geprueft.
Die Erwartung der ersten Schicht richtet sich nach der GEMESSENEN
Berechtigung statt sie vorauszusetzen: Erlaubt eine kuenftige
Chromium-Fassung Benachrichtigungen von sich aus, waere ein fest
verdrahtetes "muss blockiert sein" ein Fehlalarm ohne Fehler.
Gegenproben sind dabei: "99:99", "7:30" ohne fuehrende Null und ein
Wert an einer Art, die keinen kennt, muessen abgelehnt werden -- sonst
bewiese der Bereichstest nichts.
Der reservierte Platz waechst von 46 auf 104 px, damit der zweite Knopf
die Kachelreihe darunter nicht nach unten schiebt; das Zeitfeld schwebt
statt zu schieben. Beides derselbe Grund wie bei der Glocke: Ein
Sprung ist kein Schoenheitsfehler, sondern der Grund, warum man auf den
falschen Knopf drueckt.
Geprueft: pruef-tagesruf (neu, alles in Ordnung), pruef-push,
pruef-css-klassen, pruef-start-ansicht -- alle in Ordnung.
Co-Authored-By: Claude Opus 5 <[email protected]>
388 lines
20 KiB
HTML
388 lines
20 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>Anmeldung · Spicy & Dogi</title>
|
||
<meta name="description" content="Privater Arbeitsbereich für Creator, Scouts und DogFather." />
|
||
<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" />
|
||
|
||
<!-- Die Bühne ist der erste Eindruck. Ohne diesen Hinweis lädt der Browser sie erst,
|
||
nachdem er das CSS gelesen hat - das kostet spürbar Zeit. Quer- und Hochformat
|
||
sind getrennt, damit das Handy nicht die große Fassung zieht.
|
||
|
||
Hier steht bewusst WebP und nicht AVIF, obwohl die AVIF-Fassungen erzeugt
|
||
werden und rund ein Drittel kleiner wären: Der ausliefernde Server läuft auf
|
||
Express 4, dessen `send` eine alte MIME-Tabelle ohne AVIF mitbringt. Die
|
||
Dateien kämen als application/octet-stream an und würden wegen des
|
||
nosniff-Headers vom Browser verweigert - die Bühne bliebe leer. Sobald der
|
||
Workspace einen eigenen Server bekommt, kann AVIF wieder eingeschaltet
|
||
werden (die Dateien liegen bereit). -->
|
||
<link rel="preload" as="image" href="assets/img/buehne/gate-1920.webp"
|
||
type="image/webp" media="(min-width: 900px)" />
|
||
<link rel="preload" as="image" href="assets/img/buehne/gate-hoch-580.webp"
|
||
type="image/webp" media="(max-width: 899px)" />
|
||
|
||
<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=202609082354" />
|
||
</head>
|
||
|
||
<body class="gate">
|
||
|
||
<!-- ====================================================================
|
||
DIE FÜNF ROLLENZEICHEN, plastisch (08.09.2026)
|
||
|
||
Filipe: "die symbole sollen auch noch viel viel viel realistischer
|
||
und geiler sein", mit genauen Vorgaben je Rolle:
|
||
peperoni rot und grün
|
||
husky silber und blaue Augen
|
||
manager gelber Stern, der glitzert
|
||
scout grünes Schild mit einer roten Peperoni darin
|
||
creator lila und silber, "was richtig geiles"
|
||
|
||
WAS SICH GRUNDSÄTZLICH ÄNDERT: Vorher trug jedes Zeichen genau EINE
|
||
Farbe (`currentColor` über `.fuell`/`.linie`). Damit lässt sich
|
||
"rot UND grün" nicht darstellen. Jedes Zeichen bekommt deshalb
|
||
eigene Verläufe — dieselbe Technik, mit der auch die Kacheln
|
||
plastisch wirken: ein heller Rand oben, die Sättigung in der Mitte,
|
||
Abdunklung unten. Das ergibt Volumen statt einer flachen Fläche.
|
||
|
||
WARUM VERLÄUFE UND KEIN DETAIL: Diese Zeichen stehen bei 22 px.
|
||
Mehr Linien werden dort zu Matsch — das stand schon beim Husky hier,
|
||
und es gilt weiter. "Realistischer" heißt bei dieser Größe also
|
||
nicht "mehr Striche", sondern LICHT: eine Form, auf die Licht fällt,
|
||
wirkt körperlich; dieselbe Form flach gefüllt wirkt wie ein
|
||
Aufkleber. Alle Verläufe laufen deshalb von oben nach unten, als
|
||
stünde das Licht über der Seite — so wie bei allem anderen hier auch.
|
||
|
||
Die Verlaufs-IDs sind mit `rs-` vorangestellt (RollenSymbol), damit
|
||
sie mit nichts kollidieren, was später dazukommt.
|
||
==================================================================== -->
|
||
<!-- NICHT `display:none` VERSTECKEN -- das war ein echter Fehler, und man
|
||
sieht ihn erst im Bild (08.09.2026).
|
||
|
||
Solange die Zeichen einfarbig waren (`currentColor` ueber CSS), war
|
||
`display:none` harmlos. Sobald sie ihre Farbe aus einem <linearGradient>
|
||
im selben <defs> holen, ist es das nicht mehr: Ein Verlauf in einem
|
||
Teilbaum, der `display:none` traegt, wird nicht ausgewertet, und ein
|
||
`<use>` darauf bekommt schlicht KEINE Fuellung. Im Bildschirmfoto
|
||
standen daraufhin fuenf Bruchstuecke -- nur die Strichlinien, keine
|
||
Flaechen. Die Zahlen sagten dazu nichts, das Sprite war ja da.
|
||
|
||
Richtig ist ein Kasten ohne Groesse: Er wird gerendert (Verlaeufe
|
||
werden also aufgeloest), nimmt aber keinen Platz ein. -->
|
||
<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true"><defs>
|
||
|
||
<linearGradient id="rs-chili-rot" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#ff8a6b"/>
|
||
<stop offset=".55" stop-color="#ef4136"/>
|
||
<stop offset="1" stop-color="#a8221c"/>
|
||
</linearGradient>
|
||
<linearGradient id="rs-chili-gruen" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0" stop-color="#8fd66a"/>
|
||
<stop offset="1" stop-color="#3f7d33"/>
|
||
</linearGradient>
|
||
<linearGradient id="rs-silber" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#ffffff"/>
|
||
<stop offset=".42" stop-color="#cfd8e3"/>
|
||
<stop offset=".72" stop-color="#93a1b3"/>
|
||
<stop offset="1" stop-color="#5d6b7d"/>
|
||
</linearGradient>
|
||
<!-- DER STERN WIRD LILA (08.09.2026, zweite Ansage von Filipe).
|
||
Zuerst hiess es "manager: gelber stern der glitzert", dann nach
|
||
dem Bildschirmfoto: "die hauptfarbe von denen ist lila, der stern
|
||
soll so bleiben aber was gelb ist soll lila werden."
|
||
|
||
Die FORM bleibt also, nur die Farbe wechselt -- und das ist auch
|
||
stimmiger: Der Manager traegt Lila als Rollenfarbe, ein goldener
|
||
Stern daneben waere die einzige Stelle gewesen, an der Zeichen und
|
||
Rolle auseinandergehen. Die Wechsel hell/dunkel bleiben, sie sind
|
||
es, die aus einer Flaeche einen Koerper machen.
|
||
|
||
Der Name der Kennung bleibt `rs-gold`: Sie wird an mehreren
|
||
Stellen benutzt, und ein Umbenennen waere eine zweite Gelegenheit,
|
||
eine davon zu vergessen. -->
|
||
<linearGradient id="rs-gold" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#e6d6ff"/>
|
||
<stop offset=".45" stop-color="#a78bfa"/>
|
||
<stop offset="1" stop-color="#5b3fa8"/>
|
||
</linearGradient>
|
||
<linearGradient id="rs-schild" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#7fe0ae"/>
|
||
<stop offset=".5" stop-color="#3faa78"/>
|
||
<stop offset="1" stop-color="#1c5e42"/>
|
||
</linearGradient>
|
||
<linearGradient id="rs-lila" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0" stop-color="#d9c9ff"/>
|
||
<stop offset=".38" stop-color="#a78bfa"/>
|
||
<stop offset="1" stop-color="#5b3fa8"/>
|
||
</linearGradient>
|
||
<linearGradient id="rs-lila-silber" x1="0" y1="1" x2="1" y2="0">
|
||
<stop offset="0" stop-color="#6d4fc4"/>
|
||
<stop offset=".5" stop-color="#cbd5e1"/>
|
||
<stop offset="1" stop-color="#a78bfa"/>
|
||
</linearGradient>
|
||
<radialGradient id="rs-auge" cx=".38" cy=".32" r=".85">
|
||
<stop offset="0" stop-color="#bfe9ff"/>
|
||
<stop offset=".45" stop-color="#3fa9f5"/>
|
||
<stop offset="1" stop-color="#0f4c75"/>
|
||
</radialGradient>
|
||
|
||
<!-- SPICY MEDIA — die Peperoni, rot mit grünem Stiel.
|
||
Der Stiel liegt ÜBER der Frucht und ist eine eigene Form: Als
|
||
Teil desselben Pfades hätte er die Farbe der Frucht erben müssen,
|
||
und genau das wollte Filipe nicht. -->
|
||
<g id="r-chili">
|
||
<path fill="url(#rs-chili-rot)" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/>
|
||
<path fill="none" stroke="rgba(255,255,255,.5)" stroke-width=".9" stroke-linecap="round" d="M6.2 13.9c2.4 1.9 5 2.6 7.4 2"/>
|
||
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.9" stroke-linecap="round" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/>
|
||
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.7" stroke-linecap="round" d="M13.4 4.6c-.5 1.2-.3 2.3.5 3.2"/>
|
||
</g>
|
||
|
||
<!-- DOGFATHER — der Husky in Silber, mit blauen Augen.
|
||
Silhouette unverändert (sie war richtig): spitze Ohren, breiter
|
||
Kopf, schmal zulaufend. Neu ist das Licht darauf und die Augen,
|
||
die jetzt aus einem eigenen Radialverlauf kommen — ein blauer
|
||
Punkt allein sähe aus wie ein Loch, mit Lichtpunkt wirkt er nass. -->
|
||
<g id="r-husky">
|
||
<path fill="url(#rs-silber)" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
|
||
<!-- DIE OHREN, dunkel ausgelegt -- daran erkennt man einen Husky
|
||
zuerst. Vorher war nur das linke angedeutet und beide gingen in
|
||
der silbernen Flaeche unter; Filipe: "der husky soll viel besser
|
||
aussehen und zu sehen sein". -->
|
||
<path fill="#2a3644" d="M6.3 4.2 9.6 8.9H7.5z"/>
|
||
<path fill="#2a3644" d="M17.7 4.2 14.4 8.9h2.1z"/>
|
||
<path fill="rgba(255,255,255,.5)" d="M7.35 5.6 9.1 8.1H8z"/>
|
||
<path fill="rgba(255,255,255,.5)" d="M16.65 5.6 14.9 8.1H16z"/>
|
||
<!-- Die Gesichtsmaske: heller Keil zwischen den Augen bis zur
|
||
Schnauze. Sie macht aus dem Umriss ein GESICHT -- ohne sie ist
|
||
es nur eine spitze Form mit zwei Punkten. -->
|
||
<path fill="rgba(255,255,255,.55)" d="M12 9.4c1.5 0 2.6 1.4 2.6 3.4S13.4 17 12 17s-2.6-2.2-2.6-4.2S10.5 9.4 12 9.4z"/>
|
||
<path fill="none" stroke="rgba(30,44,60,.75)" stroke-width="1" stroke-linecap="round" d="M9.6 8.9c-.9 1.4-1.4 2.6-1.5 4.1M14.4 8.9c.9 1.4 1.4 2.6 1.5 4.1"/>
|
||
<circle fill="url(#rs-auge)" cx="9.5" cy="13.1" r="1.15"/>
|
||
<circle fill="url(#rs-auge)" cx="14.5" cy="13.1" r="1.15"/>
|
||
<circle fill="#fff" opacity=".9" cx="9.15" cy="12.75" r=".33"/>
|
||
<circle fill="#fff" opacity=".9" cx="14.15" cy="12.75" r=".33"/>
|
||
<path fill="#2b3746" d="M12 15.4l1.5 1.1-1.5 1.4-1.5-1.4z"/>
|
||
</g>
|
||
|
||
<!-- MANAGER — der goldene Stern, der glitzert.
|
||
Das Funkeln ist ein schmaler heller Streifen, der einmal quer
|
||
über den Stern wandert. Es ist BEWUSST langsam (4,5 s) und
|
||
schwach: Ein schnelles Blinken wäre genau die aggressive Optik,
|
||
die hier nicht sein soll. Bei "weniger Bewegung" steht es still
|
||
(siehe personen.css) -- dann bleibt ein ruhiger goldener Stern. -->
|
||
<g id="r-stern">
|
||
<path fill="url(#rs-gold)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
|
||
<path fill="rgba(255,255,255,.45)" d="m12 3.4 2.6 5.6-2.6.7z"/>
|
||
<path class="rs-funkel" fill="rgba(255,255,255,.75)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
|
||
</g>
|
||
|
||
<!-- SCOUT — grünes Schild mit einer roten Peperoni darin.
|
||
Der Haken von früher ist weg: Filipe hat die Peperoni ausdrücklich
|
||
verlangt, und beides nebeneinander wäre bei 22 px Matsch. Die
|
||
Chili ist stark vereinfacht — bei dieser Größe zählt nur, dass
|
||
eine rote, gebogene Form mit grünem Stiel im Schild steht. -->
|
||
<g id="r-schutz">
|
||
<path fill="url(#rs-schild)" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/>
|
||
<path fill="rgba(255,255,255,.28)" d="M12 3.4 5.8 5.9v5c0 1.4.4 2.7 1.1 3.9L12 3.4z"/>
|
||
<path fill="url(#rs-chili-rot)" d="M13.6 8.1c-.4.9-.2 1.7.4 2.2 1.9.2 3.2 1.7 3.2 3.4 0 2.1-1.9 3.8-4.3 3.8-2.9 0-5.2-1.8-6.1-4.2 2.3.6 4.2-.3 5-2 .4-.8.3-1.5-.2-2z" transform="translate(-.6 -.9) scale(.92) translate(1 1)"/>
|
||
<path fill="none" stroke="#8fd66a" stroke-width="1.3" stroke-linecap="round" d="M12.9 7.6c.9-.4 1.7 0 1.8.8"/>
|
||
</g>
|
||
|
||
<!-- CREATOR — Lila und Silber.
|
||
Statt der alten Person-Silhouette (die aussah wie ein leeres
|
||
Benutzerbild und damit wie "niemand") jetzt ein geschliffener
|
||
Kristall: lila Kern, silberne Facetten. Er hat als einziges der
|
||
fünf Zeichen eine Innenzeichnung, und die trägt auch klein --
|
||
weil es gerade Kanten sind, keine Rundungen. -->
|
||
<g id="r-person">
|
||
<path fill="url(#rs-lila)" d="M12 2.6 20 9l-3 11.4H7L4 9z"/>
|
||
<path fill="url(#rs-lila-silber)" opacity=".85" d="M12 2.6 20 9h-5.6zM12 2.6 4 9h5.6z"/>
|
||
<path fill="rgba(255,255,255,.4)" d="M12 2.6 14.4 9H9.6z"/>
|
||
<path fill="none" stroke="rgba(216,222,233,.75)" stroke-width=".8" stroke-linejoin="round" d="M12 2.6 20 9l-3 11.4H7L4 9zM4 9h16M9.6 9 12 20.4 14.4 9"/>
|
||
</g>
|
||
</defs></svg>
|
||
|
||
|
||
<!-- ---------- Bühne: Bild + Schleier ---------------------------------- -->
|
||
<div class="buehne" aria-hidden="true">
|
||
<picture>
|
||
<!-- BIS 2560 PIXEL (07.09.2026). Vorher endete die Reihe bei 1600 --
|
||
auf einem 2550 px breiten Schirm rechnete der Browser das Bild
|
||
also um das 1,6-fache hoch, und jede Kante wurde weich. Genau
|
||
das sah man als "nicht hochwertig", ohne es benennen zu koennen.
|
||
Eine hoehere Bildguete haette daran nichts geaendert: Man kann
|
||
keine Bildpunkte zurueckholen, die nie ausgeliefert wurden.
|
||
Ueber srcset laedt trotzdem jeder nur die Stufe, die er
|
||
braucht -- ein Handy weiterhin 32 KB. -->
|
||
<source media="(min-width: 900px)" type="image/webp"
|
||
srcset="assets/img/buehne/gate-960.webp 960w,
|
||
assets/img/buehne/gate-1280.webp 1280w,
|
||
assets/img/buehne/gate-1600.webp 1600w,
|
||
assets/img/buehne/gate-1920.webp 1920w,
|
||
assets/img/buehne/gate-2560.webp 2560w" sizes="100vw" />
|
||
<source type="image/webp"
|
||
srcset="assets/img/buehne/gate-hoch-440.webp 440w,
|
||
assets/img/buehne/gate-hoch-580.webp 580w,
|
||
assets/img/buehne/gate-hoch-900.webp 900w" sizes="100vw" />
|
||
<img class="buehne__bild" src="assets/img/buehne/gate-1280.webp" alt=""
|
||
width="1647" height="955" fetchpriority="high" decoding="async" />
|
||
</picture>
|
||
<div class="buehne__schleier"></div>
|
||
</div>
|
||
|
||
<!-- ---------- Tafel ----------------------------------------------------
|
||
|
||
DER ANKER (06.09.2026). Im Motiv steht rechts eine LEERE TAFEL mit
|
||
Neonrahmen -- dort gehoert die Anmeldekarte hinein, und zwar genau
|
||
hinein, nicht ungefaehr.
|
||
|
||
Das geht nur, wenn man weiss, wo die gemalte Tafel auf dem
|
||
Bildschirm landet. Das Bild liegt mit `object-fit: cover` darunter;
|
||
je nach Fensterform schneidet der Browser oben/unten oder
|
||
links/rechts etwas ab. Dieser Anker rechnet genau dieselbe
|
||
Cover-Geometrie noch einmal nach (siehe gate.css) -- er ist damit
|
||
deckungsgleich mit dem Bild, und die Karte kann in Prozent des
|
||
BILDES sitzen statt in Prozent des Fensters.
|
||
|
||
Er faengt keine Klicks ab (pointer-events: none); nur die Karte
|
||
darin ist bedienbar. -->
|
||
<div class="tafel-anker">
|
||
<main class="tafel" id="tafel">
|
||
<div class="tafel__kante" aria-hidden="true"></div>
|
||
|
||
<!-- 07.09.2026, Wunsch Filipe: "dogfather universe auch ersetzen durch
|
||
SpicyMedia x DogFather" und der Satz darunter soll "nur um manager
|
||
scouts und creator von spicy media" gehen, ohne DogFather.
|
||
|
||
Das "x" steht als eigenes Element, damit es kleiner und in der
|
||
Zwischenfarbe gesetzt werden kann -- so liest man zwei Namen und
|
||
ein Zeichen dazwischen, nicht drei gleich laute Wörter. Es trägt
|
||
aria-hidden nicht: Vorgelesen wird "SpicyMedia x DogFather", und
|
||
genau so spricht man es auch aus. -->
|
||
<header class="kopf">
|
||
<p class="marke marke--paar">
|
||
<span class="marke__spicy">SpicyMedia</span>
|
||
<span class="marke__x">×</span>
|
||
<span class="marke__dogi">DogFather</span>
|
||
</p>
|
||
<h1 class="titel">Creator Workspace</h1>
|
||
<p class="unterzeile">Privater Bereich für die Manager, Scouts und Creator von Spicy Media.</p>
|
||
</header>
|
||
|
||
<div class="rollen" role="radiogroup" aria-labelledby="rollen-schild">
|
||
<p class="feldschild" id="rollen-schild">Womit meldest du dich an?</p>
|
||
|
||
<!-- SPICY MEDIA steht ganz oben (07.09.2026, Wunsch Filipe: "ueber
|
||
dogfather auch eine kategorie, eine neue rolle"). Der Chili ist
|
||
das Zeichen der Marke -- dieselbe Form wie im Logo, nur als
|
||
Umriss, damit sie neben Krone, Stern und Schild dieselbe
|
||
Strichstaerke hat. -->
|
||
<button type="button" class="rolle" data-rolle="spicy" role="radio" aria-checked="false">
|
||
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true"><use href="#r-chili"/></svg>
|
||
<span class="rolle__text">
|
||
<span class="rolle__name">Spicy Media</span>
|
||
<span class="rolle__zusatz">Überblick über alle</span>
|
||
</span>
|
||
</button>
|
||
|
||
<!-- DER HUSKY FÜR DOGFATHER (07.09.2026). Filipe: "bei dogfather ist
|
||
immer noch die krone und da soll ja ein husky sein" -- auf der
|
||
Personenseite war er schon getauscht, hier nicht.
|
||
|
||
Bei 21 Pixeln entscheidet die SILHOUETTE, nicht das Detail: die
|
||
spitzen aufrechten Ohren, der breite Kopf, der nach unten schmal
|
||
zuläuft, die Gesichtsmaske. Mehr passt nicht hinein, und mehr
|
||
braucht es nicht -- ein Husky ist an genau diesen drei Dingen
|
||
zu erkennen.
|
||
|
||
Das Schild ist zum Scout gewandert: Ein Scout schirmt die
|
||
Pipeline ab und prüft, bevor etwas weitergereicht wird. -->
|
||
<button type="button" class="rolle" data-rolle="admin" role="radio" aria-checked="false">
|
||
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true"><use href="#r-husky"/></svg>
|
||
<span class="rolle__text">
|
||
<span class="rolle__name">DogFather</span>
|
||
<!-- "Manager & Technik" statt "Gesamtübersicht & Freigaben"
|
||
(08.09.2026, screen27). Die alte Zeile beschrieb ein RECHT
|
||
("darf alles sehen und freigeben"), die neue eine AUFGABE --
|
||
und danach sucht jemand, der vor der Rollenwahl steht: Er
|
||
fragt sich nicht, was er dürfte, sondern was er hier tut. -->
|
||
<span class="rolle__zusatz">Manager & Technik</span>
|
||
</span>
|
||
</button>
|
||
|
||
<!-- Manager: dieselben Rechte wie DogFather, nur die Personen-
|
||
verwaltung bleibt DogFather vorbehalten. Der Stern steht fuer
|
||
den Rang darunter, ohne "unter" zu sagen. -->
|
||
<button type="button" class="rolle" data-rolle="manager" role="radio" aria-checked="false">
|
||
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true"><use href="#r-stern"/></svg>
|
||
<span class="rolle__text">
|
||
<span class="rolle__name">Manager</span>
|
||
<span class="rolle__zusatz">Betreuung & Freigaben</span>
|
||
</span>
|
||
</button>
|
||
|
||
<button type="button" class="rolle" data-rolle="scout" role="radio" aria-checked="false">
|
||
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true"><use href="#r-schutz"/></svg>
|
||
<span class="rolle__text">
|
||
<span class="rolle__name">Scout</span>
|
||
<span class="rolle__zusatz">Eigene Pipeline & Kontakte</span>
|
||
</span>
|
||
</button>
|
||
|
||
<button type="button" class="rolle" data-rolle="creator" role="radio" aria-checked="false">
|
||
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true"><use href="#r-person"/></svg>
|
||
<span class="rolle__text">
|
||
<span class="rolle__name">Creator</span>
|
||
<span class="rolle__zusatz">Eigener Bereich & Fortschritt</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
<form class="formular" id="formular" novalidate>
|
||
<label class="feldschild" for="code">
|
||
Persönlicher Zugangscode <span class="fuer" id="fuer" hidden></span>
|
||
</label>
|
||
|
||
<div class="feld">
|
||
<input type="password" id="code" name="code" inputmode="text"
|
||
autocomplete="current-password" spellcheck="false"
|
||
placeholder="Code eingeben" aria-describedby="hinweis fehler" />
|
||
<button type="button" class="feld__auge" id="auge"
|
||
aria-label="Code anzeigen" aria-pressed="false">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path class="strich" d="M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12Z"/>
|
||
<circle class="strich" cx="12" cy="12" r="2.9"/>
|
||
<path class="strich durch" d="m4 20 16-16"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<p class="hinweis" id="hinweis" hidden>Feststelltaste ist aktiv.</p>
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<button type="submit" class="knopf" id="knopf">
|
||
<span class="knopf__text">Anmelden</span>
|
||
<span class="knopf__laden" aria-hidden="true"></span>
|
||
</button>
|
||
</form>
|
||
|
||
<p class="fuss">
|
||
Verschlüsselte Verbindung · Zugriffe werden protokolliert
|
||
</p>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="assets/js/gate.js?v=202609082354" defer></script>
|
||
</body>
|
||
</html>
|