DogFatherGitandClaude Opus 5
e1ee778c04
Filipe, mit dem Bildschirmfoto der LIVE-Punkte: "diese aufgaben auf
screen. alle auf dieser app getrennt von denen auf der team dogi
website bitte, sehr wichtig. die sollen die manager und scouts bewerten
können mit passt passt nicht verbesserung möglich und was weiß ich. und
die creator sollen sehen was bei ihnen passt oder nicht mit der notiz
vom manager oder scout. spicy und dogfather sollen auch bewerten können
wie vorher. ... und wie gesagt von der team dogi seite da ist ein
anderes system auf diesen aufgaben."
WAS AUF DEM BILDSCHIRMFOTO STAND, WAR NICHT SEINE SEITE
Unter "Vor der Sendung" stand die Liste eines MODIS -- erkennbar am
Satz darueber ("Was du vor und beim Start gesehen hast") und an den
Punkten ("Die Ankuendigung kam rechtzeitig"). Am echten Bestand
nachgemessen: Die Auswahl "Person" fuellte sich aus allen Creatorn PLUS
allen Modis, sortiert nach Namen. Der erste Name im Haus ist "Diene",
eine Modi -- und ohne ausdrueckliche Wahl nimmt die Seite den ersten.
DogFather bekam auf der Agenturadresse also zuverlaessig das Teamhaus
zu sehen, und druecken konnte er dort nichts, weil ein Modi-Bericht nur
dem Modi selbst gehoert.
DIE GRENZE, AN DREI STELLEN STATT AN EINER
* Die Auswahl geht durch EIN Sieb (hat diese Person ueberhaupt eine
Liste, und steht sie in diesem Haus?) statt durch drei einzeln
gepflegte Bedingungen.
* Die Grenze haelt auch gegen eine von Hand eingetragene Nummer --
eine ausgeduennte Auswahlliste ist Kosmetik, solange ?creator_id=
durchgeht.
* Die gueltigen Punkt-Schluessel lagen fuer beide Haeuser in EINER
Menge. Ein Scout konnte damit bei einem Creator den Stand eines
Modi-Punktes setzen: angenommen, gespeichert, nie zu sehen.
* Dazu: `darfCreator` sagt fuer DogFather bei JEDER Nummer ja -- er
konnte einen Stand an einer Managerin oder an sich selbst setzen.
Drei Lagen wie bei den Aufgaben: crew / agentur / keine Adresse. Der
dritte Ausgang ist kein Schlupfloch, sondern die Bedingung dafuer, dass
die Pruefungen ueberhaupt noch etwas messen koennen.
ZWEI SKALEN, WEIL ES ZWEI VERSCHIEDENE DINGE SIND
Agentur (Betreuung urteilt, Creator liest): Passt / Verbesserung
moeglich / Passt nicht / Trifft nicht zu. Team (Modi berichtet,
DogFather behandelt im Eingang): Passt so / Verbessern, unveraendert --
eine Stufe "Passt nicht" haette dort keinen Empfaenger.
"Trifft nicht zu" ist kein Beiwerk: Ohne sie steht ein Punkt, der bei
diesem Creator gar nicht vorkommt, fuer immer auf "offen" und die
Bilanz zaehlt ihn als unerledigt mit.
Die Worte, die Toene und die Frage im Nachfragefenster kommen vom
Server. Der Browser baut Knoepfe, Marken und Kacheln daraus und kennt
keine Stufe beim Namen -- sonst muesste er ausserdem wissen, WANN
welche gilt, und das waere ein Rollenvergleich in einer Datei, die
jeder herunterladen kann.
DIE NOTIZ TRAEGT JETZT AUCH DIE ROLLE
"mit der notiz vom manager oder scout" -- bis hierher stand am Satz nur
ein Vorname. Wer die Namen im ersten Monat nicht kennt, weiss nicht,
wer da urteilt. Jetzt: "Patrick, Scout · 24.09., 23:43".
DIE UMSTELLUNG DER DATENBANK KOMMT NICHT VON MIR
Eine CHECK-Regel laesst sich in SQLite nicht aendern; die Tabelle muss
neu gebaut werden. Ich hatte den Griff hier zuerst ein zweites Mal
geschrieben -- mit Zeilenzaehlung und PRAGMA-Spaltenliste, aber OHNE
die Sicherung davor, ohne die Indizes und ohne `foreign_key_check`
danach. Drei von fuenf Absicherungen fehlten, und keine davon haette
gefehlt, wenn ich die vorhandene Funktion benutzt haette. Genau davor
warnt ihr eigener Kommentar seit dem 09.09.2026.
Jetzt: `checkListeErweitern` aus workspace.js, ausgegeben statt
nachgebaut. Der Marker ist die erste fehlende Stufe und keine
hingeschriebene -- eine feste Angabe waere an dem Tag falsch, an dem
eine weitere dazukommt.
Und danach wird NACHGESEHEN, was wirklich erlaubt ist: Bricht die
Umstellung ab, werden die neuen Stufen auch nicht angeboten. Ein Knopf,
der beim Druecken scheitert, ist schlechter als kein Knopf.
WAS SONST NOCH NACHGEZOGEN WURDE
* Der Zaehler auf der Creator-Startseite zaehlte fest
`stufe = 'verbessern'`. Die staerkste Rueckmeldung, die es gibt,
waere als Einzige nicht dort erschienen. Jetzt aus dem Katalog.
* Der Satz unter "Feste Punkte" stand im Browser und sprach in BEIDEN
Haeusern vom "Creator". Die Teamfassung bleibt wortgleich -- ab dem
24.09. wird jeder Umbau je Haus getrennt gefuehrt, und dies ist der
des Agenturhauses.
* "Passt" setzt weiterhin mit einem Klick. Ein Nachfragefenster vor
dem haeufigsten Klick einer Betreuung, die vierzig Punkte durchgeht,
macht aus einem Durchgang eine Sitzung.
GEMESSEN
* pruef-checkliste-stufen.mjs, neu: 56 Pruefungen, 0 Fehler. Darin
die Umstellung an einer Datenbank mit dem ALTEN Bauplan und echten
Zeilen -- Zeilen, Spalten UND Spalteninhalte nachgezaehlt, plus die
Sicherung. Zu jeder Schranke die Gegenprobe, die durchkommen muss.
* pruef-checkliste 97, pruef-modi-checkliste 75, pruef-haus-trennung
97, pruef-manager-sicht 43 -- alle unveraendert gruen.
* pruef-checkliste rechnete mit festen Zahlen (drei Bilanzkacheln,
zwei Knoepfe je Punkt) und war rot, ohne dass etwas kaputt war. Sie
fragt die Zahlen jetzt bei der Schnittstelle ab und zaehlt sie im
Browser nach. Gleich viele Pruefstellen, 57.
* Bildschirmfotos bei 1280 px und 390 px (Betreuung, Creator, das
Nachfragefenster): vier Knoepfe passen auf dem Handy als 2x2, 0 px
Ueberhang, keine Konsolenfehler.
* Die neuen Toene sind gerechnet, nicht gegriffen: #d97f87 hat die
relative Helligkeit 0,317 -- so hell wie das vorhandene Gruen
(0,320) und heller als das Blaugrau von "offen" (0,241), das den
Barrierefreiheits-Lauf schon bestanden hat. Kein Signalrot: Ein
gedaempftes Rosé sagt "das gehoert geaendert", ein Rot sagt "du
hast versagt".
Co-Authored-By: Claude Opus 5 <[email protected]>
434 lines
22 KiB
HTML
434 lines
22 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?v=202609242347" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609242347" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609242347" />
|
||
</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>
|
||
|
||
<!-- DAS ANGEBOT ZUM INSTALLIEREN GEHOERT HIERHER (22.09.2026).
|
||
Filipe: "ich will einen installieren button. damit die leute es
|
||
viel einfacher haben die seite auf dem pc oder auf dem handy zu
|
||
installieren!!!"
|
||
|
||
Diese Seite ist die, auf der jeder zuerst landet -- und die
|
||
einzige, die keine Kopfleiste hat. Genau deshalb fehlte das
|
||
Angebot hier bisher ganz.
|
||
|
||
UNTER dem Anmelden-Knopf und nicht darueber: Wer hier ist, will
|
||
sich anmelden. Das Installieren ist das zweite Anliegen, nicht
|
||
das erste. Der Knopf ist von selbst weg, sobald die App liegt. -->
|
||
<p class="gate-install" data-install-platz></p>
|
||
|
||
<p class="fuss">
|
||
Verschlüsselte Verbindung · Zugriffe werden protokolliert
|
||
</p>
|
||
</main>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<script src="assets/js/gate.js?v=202609242347" defer></script>
|
||
<script src="assets/js/installieren.js?v=202609242347" defer></script>
|
||
</body>
|
||
</html>
|