Nichts verschwindet mehr ohne eine Nachfrage, die sagt was passiert
Filipe: "Es darf vor allem keine Stellen geben, an denen ein Benutzer
etwas falsch machen kann, nur weil die Seite es nicht verstaendlich
genug erklaert."
Gemessen: 30 Stellen in 16 Dateien benutzten confirm() oder prompt().
Das Haus hatte die richtige Bauweise laengst -- einen <dialog>, in
aufgaben.html sogar ausfuehrlich begruendet -- aber sie stand IN EINER
SEITE. Wer anderswo etwas loeschen liess, hatte sie nicht.
confirm('Wirklich loeschen?') stellt die falsche Frage: Es fragt, ob
man sicher ist, und nennt nicht, WAS passiert, was BLEIBT und ob es
ZURUECK geht. Jetzt beantwortet jeder der 41 Dialoge alle drei.
Neu: workspace/assets/js/nachfrage.js -- window.frageNach() mit
Pflichtgrund, Zahlenfeld, einzeiliger Eingabe und Abtippsicherung.
Drei Ausgaenge: <dialog> / confirm()-Notnagel fuer Safari vor 15.4 /
Abbruch (Esc, Klick daneben, "Doch nicht" -- immer false).
DREIMAL DERSELBE FALLSTRICK, dreimal nachgemessen statt vermutet:
.dialog stand in aufgaben.css und leistung.css -> auf dateien.html
waere der Dialog ein weisser Systemkasten gewesen. 14 Regeln
klammergenau nach module.css verschoben (Klammern gezaehlt, nicht
per Muster geschnitten -- heute frueh hat ein nicht-gieriges
Muster schon einmal CSS zerrissen).
Das Formular trug .neu neu--blank -- und .neu gibt seine Abstaende
nur in aufgaben.css. Gemessen: padding 0px, und die Felder
verloren ihre height:44px. Jetzt steht alles unter
.nachfrage__form in module.css; der Dialog borgt nichts mehr.
Die erste Fassung der Pruefung zaehlte nachfrage.js SELBST als
Nutzer -- damit war jede Seite trivialerweise "Nutzer" und die
Pruefung gruen ohne Inhalt. Jetzt ausdruecklich ausgenommen.
ZWEI FUNDE NEBENBEI:
hilfeAufraeumen() wird im Betrieb NIE aufgerufen. Der Kommentar
behauptete "wird beim Start aufgerufen (siehe index.js)" -- das
war nie wahr; einziger Aufrufer ist die eigene Pruefung. Folge:
geschlossene vertrauliche Faelle bleiben unbegrenzt stehen. NICHT
eingeschaltet (das loescht echte Daten und ist Filipes
Entscheidung), sondern der Kommentar richtiggestellt.
Einen Hilfe-Fall zu schliessen ist endgueltig -- es gibt keine
Route, die ihn wieder oeffnet. Vorher stand darueber nur die
Frage nach einem Schlusswort. Jetzt sagt der Dialog es.
pruef-struktur hat meine eigene Pruefung von heute Nachmittag
erwischt: Sie bildete ihr Datum aus UTC. Beim Beheben erst
heuteLokal(datum) genommen -- die Funktion nimmt gar kein Argument
und haette still "heute" statt "+3 Tage" geliefert. Jetzt tagLokal(3),
nachgerechnet: Abstand 3 Tage.
Am Bildschirm angesehen (Rechner 1280, Handy 390): passt rein, Esc
ergibt false, Fokus liegt auf dem harmlosen Knopf, Knoepfe 44px auf
Touch. Der Platzhalter im Abtippfeld zeigte den erwarteten Namen --
das sah aus wie ein schon ausgefuelltes Feld, entfernt.
Neu: server/pruef-nachfrage.mjs -- 17/0, mit sechs Gegenproben und
beiden Richtungen (wer fragt, laedt die Datei; wer nie fragt, laedt
sie nicht -- sonst truege die Anmeldewand 4,8 KB fuer nichts).
pruef-meldungen 8/0, pruef-css-klassen gruen, pruef-struktur gruen,
pruef-leistung gruen.
This commit is contained in:
+417
-417
@@ -1,417 +1,417 @@
|
||||
<!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?v=202609191915" />
|
||||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609191915" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609191915" />
|
||||
</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>
|
||||
<!-- `rs-silber` ist am 09.09.2026 entfallen. Er faerbte den alten,
|
||||
selbstgebauten Husky; seit dort das echte Logo steht (mit einem
|
||||
eigenen Duotonie-Filter), benutzte ihn niemand mehr. Ein
|
||||
Verlauf, den man im Quelltext findet und der nichts faerbt,
|
||||
kostet den naechsten Leser eine Suche. -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- DER HUSKY IST JETZT DAS ECHTE LOGO (09.09.2026, screen3).
|
||||
|
||||
Filipe: "dieses husky symbol soll ersetzt werden durch den husky
|
||||
oben in der leiste ... die farbe von der rolle und die barre soll
|
||||
so richtig geil silber sein ... und der husky soll eine geile
|
||||
babyblau sein haben."
|
||||
|
||||
Hier stand eine geometrische Eigenkonstruktion: ein Fuenfeck mit
|
||||
zwei dreieckigen Ohren und zwei Punkten. Sie war ordentlich
|
||||
gebaut, aber sie war nicht DER Husky -- oben in der Leiste steht
|
||||
die richtige Marke, und zwei verschiedene Huskys auf einer Seite
|
||||
sind einer zu viel.
|
||||
|
||||
DAS BILD KOMMT ALS <image>, DIE FARBE AUS EINEM FILTER. Die
|
||||
Datei ist schwarz-weiss und freigestellt. `feComponentTransfer`
|
||||
mit einer zweistufigen Tabelle bildet sie auf zwei Farben ab:
|
||||
Schwarz wird zu dunklem Stahl (#2a3644), Weiss zu Silber
|
||||
(#e8eef6). Das ist eine echte Duotonie -- ein `feColorMatrix`
|
||||
koennte das nicht, der kann nur linear mischen und wuerde die
|
||||
Mitteltoene flach ziehen.
|
||||
|
||||
DAS AUGE IST GEMESSEN, NICHT GESETZT: Ein Durchlauf ueber die
|
||||
Bildpunkte hat die Pupille als einzige dunkle Insel gefunden,
|
||||
die ringsum von Hellem umgeben ist -- bei 165/258 von 512, also
|
||||
32,2 % und 50,4 %. Im 24er Raster sind das 7,73 und 12,1.
|
||||
Darauf liegen Iris (babyblau), Pupille und ein Glanzpunkt.
|
||||
|
||||
Warum ueberhaupt eine Iris: Das Logo hat ein schwarzes Auge.
|
||||
Babyblau war seit dem ersten Auftrag gewuenscht ("husky: silber
|
||||
und blaue augen") und ist es jetzt wieder -- es ist der einzige
|
||||
Farbfleck an einem sonst silbernen Zeichen und traegt damit
|
||||
genau so viel Farbe wie die anderen Rollen auch. -->
|
||||
<filter id="rs-husky-duo" color-interpolation-filters="sRGB">
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="table" tableValues="0.165 0.910"/>
|
||||
<feFuncG type="table" tableValues="0.212 0.933"/>
|
||||
<feFuncB type="table" tableValues="0.267 0.965"/>
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
<g id="r-husky">
|
||||
<image href="assets/img/marke-husky.webp" x="0" y="0" width="24" height="24"
|
||||
preserveAspectRatio="xMidYMid meet" filter="url(#rs-husky-duo)"/>
|
||||
<circle fill="#7ec8f2" cx="7.73" cy="12.1" r="1.05"/>
|
||||
<circle fill="#16232f" cx="7.73" cy="12.1" r="0.52"/>
|
||||
<circle fill="#ffffff" opacity=".85" cx="7.5" cy="11.85" r="0.2"/>
|
||||
</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>
|
||||
|
||||
<!-- EINE TÜR BRAUCHT EINE KLINGEL (ergänzt 19.09.2026).
|
||||
|
||||
Hier standen vier Kacheln, ein Feld „Code eingeben" und ein
|
||||
Knopf. Wer keinen Code hat, fand keinen einzigen Satz, der ihm
|
||||
sagt, was jetzt zu tun ist. Für die Community ist das besonders
|
||||
teuer: Sie ist die einzige Rolle, die von außen kommt und
|
||||
niemanden im Haus kennt. -->
|
||||
<p class="fuss fuss--woher">Noch keinen Code? Den bekommst du von deinem Manager oder von DogFather.</p>
|
||||
|
||||
<p class="fuss">
|
||||
Verschlüsselte Verbindung · Zugriffe werden protokolliert
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/meldung.js?v=202609191915" defer></script>
|
||||
|
||||
<script src="assets/js/gate.js?v=202609191915" defer></script>
|
||||
</body>
|
||||
</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?v=202609191956" />
|
||||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609191956" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202609191956" />
|
||||
</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>
|
||||
<!-- `rs-silber` ist am 09.09.2026 entfallen. Er faerbte den alten,
|
||||
selbstgebauten Husky; seit dort das echte Logo steht (mit einem
|
||||
eigenen Duotonie-Filter), benutzte ihn niemand mehr. Ein
|
||||
Verlauf, den man im Quelltext findet und der nichts faerbt,
|
||||
kostet den naechsten Leser eine Suche. -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- DER HUSKY IST JETZT DAS ECHTE LOGO (09.09.2026, screen3).
|
||||
|
||||
Filipe: "dieses husky symbol soll ersetzt werden durch den husky
|
||||
oben in der leiste ... die farbe von der rolle und die barre soll
|
||||
so richtig geil silber sein ... und der husky soll eine geile
|
||||
babyblau sein haben."
|
||||
|
||||
Hier stand eine geometrische Eigenkonstruktion: ein Fuenfeck mit
|
||||
zwei dreieckigen Ohren und zwei Punkten. Sie war ordentlich
|
||||
gebaut, aber sie war nicht DER Husky -- oben in der Leiste steht
|
||||
die richtige Marke, und zwei verschiedene Huskys auf einer Seite
|
||||
sind einer zu viel.
|
||||
|
||||
DAS BILD KOMMT ALS <image>, DIE FARBE AUS EINEM FILTER. Die
|
||||
Datei ist schwarz-weiss und freigestellt. `feComponentTransfer`
|
||||
mit einer zweistufigen Tabelle bildet sie auf zwei Farben ab:
|
||||
Schwarz wird zu dunklem Stahl (#2a3644), Weiss zu Silber
|
||||
(#e8eef6). Das ist eine echte Duotonie -- ein `feColorMatrix`
|
||||
koennte das nicht, der kann nur linear mischen und wuerde die
|
||||
Mitteltoene flach ziehen.
|
||||
|
||||
DAS AUGE IST GEMESSEN, NICHT GESETZT: Ein Durchlauf ueber die
|
||||
Bildpunkte hat die Pupille als einzige dunkle Insel gefunden,
|
||||
die ringsum von Hellem umgeben ist -- bei 165/258 von 512, also
|
||||
32,2 % und 50,4 %. Im 24er Raster sind das 7,73 und 12,1.
|
||||
Darauf liegen Iris (babyblau), Pupille und ein Glanzpunkt.
|
||||
|
||||
Warum ueberhaupt eine Iris: Das Logo hat ein schwarzes Auge.
|
||||
Babyblau war seit dem ersten Auftrag gewuenscht ("husky: silber
|
||||
und blaue augen") und ist es jetzt wieder -- es ist der einzige
|
||||
Farbfleck an einem sonst silbernen Zeichen und traegt damit
|
||||
genau so viel Farbe wie die anderen Rollen auch. -->
|
||||
<filter id="rs-husky-duo" color-interpolation-filters="sRGB">
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="table" tableValues="0.165 0.910"/>
|
||||
<feFuncG type="table" tableValues="0.212 0.933"/>
|
||||
<feFuncB type="table" tableValues="0.267 0.965"/>
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
<g id="r-husky">
|
||||
<image href="assets/img/marke-husky.webp" x="0" y="0" width="24" height="24"
|
||||
preserveAspectRatio="xMidYMid meet" filter="url(#rs-husky-duo)"/>
|
||||
<circle fill="#7ec8f2" cx="7.73" cy="12.1" r="1.05"/>
|
||||
<circle fill="#16232f" cx="7.73" cy="12.1" r="0.52"/>
|
||||
<circle fill="#ffffff" opacity=".85" cx="7.5" cy="11.85" r="0.2"/>
|
||||
</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>
|
||||
|
||||
<!-- EINE TÜR BRAUCHT EINE KLINGEL (ergänzt 19.09.2026).
|
||||
|
||||
Hier standen vier Kacheln, ein Feld „Code eingeben" und ein
|
||||
Knopf. Wer keinen Code hat, fand keinen einzigen Satz, der ihm
|
||||
sagt, was jetzt zu tun ist. Für die Community ist das besonders
|
||||
teuer: Sie ist die einzige Rolle, die von außen kommt und
|
||||
niemanden im Haus kennt. -->
|
||||
<p class="fuss fuss--woher">Noch keinen Code? Den bekommst du von deinem Manager oder von DogFather.</p>
|
||||
|
||||
<p class="fuss">
|
||||
Verschlüsselte Verbindung · Zugriffe werden protokolliert
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/meldung.js?v=202609191956" defer></script>␍
|
||||
|
||||
<script src="assets/js/gate.js?v=202609191956" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user