DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d7bb0f7e607090ce6b455d2b5ea07d26a7899f85
dogfather-universe/workspace/index.html
T
DogFatherGitandClaude Opus 5 d7bb0f7e60 45 Kachelfarben: acht Paare waren dieselbe Farbe -- und die Pruefung 
konnte es nicht sagen

Filipe am 17.09.: „ich will das jede kachel eine andere farbe hat, es
soll keine die gleiche farben haben bitte und auch keine die sich
irgendwie aehnlich sind ... die farben sollen auch richtig geil und
speziell sein."

Gemessen am 25.09.: #ff8fb4 gegen #fe8ebe, Abstand 0,0154 in OKLab.
Das ist mit blossem Auge DIESELBE Farbe. Acht solche Paare gab es.

=== WARUM ES NIEMAND GEMERKT HAT ===

pruef-kachel-universum hat es gesagt. Jede Nacht. Die Zeile stand da:
„kleinster Abstand 0,0154". Gelesen hat sie niemand -- weil direkt
daneben eine zweite Zeile stand, die NIEMALS gruen werden konnte:
„kein Paar unter 0,10".

Nachgerechnet (tools/_toene-packen.mjs, eine echte Kugelpackung ueber
alle sRGB-Farben, die 4,8:1 gegen den Grund halten, nicht blenden und
bunt genug sind):

  30 Farben  ->  0,115        48 Farben  ->  0,0925
  40 Farben  ->  0,103        52 Farben  ->  0,0840
  45 Farben  ->  0,0974       60 Farben  ->  0,0805

Die Forderung war fuer 21 Farben geschrieben. Bei den heutigen 45
liegt die DECKE bei 0,0974 -- „kein Paar unter 0,10" konnte niemand
erfuellen, mit keiner Palette der Welt.

DAS IST DER EIGENTLICHE BEFUND. Eine Bedingung, die niemand erfuellen
kann, macht nicht nur sich selbst wertlos. Sie faerbt die ganze Datei
rot, und ab da liest man die Zeile darueber nicht mehr. Der echte
Mangel lag acht Tage offen da, versteckt hinter einem Fehlalarm.

=== DIE NEUE PALETTE WURDE GERECHNET, NICHT NACHGEBESSERT ===

Von Hand nachbessern hat sie erst dahin gebracht: Am 08.09. waren es
21 Farben, danach kamen sechzehn dazu, jede einzeln gewaehlt, keine
gegen die anderen geprueft. In drei Schritten:

  1. Aus allen erlaubten sRGB-Farben 45 so waehlen, dass der kleinste
     Abstand so gross wie moeglich wird.
  2. Sie den 45 Kachelnummern so zuordnen, dass jede moeglichst nah an
     ihrer bisherigen Farbe bleibt -- eine Kachel soll wiedererkennbar
     sein, sie rueckt, sie wechselt nicht.
  3. Nachziehen: Jeder Ton darf zurueck in Richtung seiner alten Farbe
     wandern, solange der Mindestabstand haelt.

Ergebnis: kleinster Abstand 0,0154 -> 0,0931, kein Paar mehr unter
0,09. Dreissig der 45 Kacheln haben sich um weniger als 0,02 bewegt --
das sieht man nicht. Nur sieben sind sichtbar gewandert, und alle
sieben lagen in dem Gedraenge aus neun fast gleichen Rot- und
Rosatoenen, das den Ausschlag gegeben hat.

„Richtig geil und speziell" bleibt messbar erhalten: Die Buntheit hat
eine Untergrenze von 0,10 in der Rechnung, damit keine Farbe ins Graue
rutscht. Gemessen kostet das nichts -- mit dieser Grenze ist die Decke
sogar minimal hoeher als ohne (0,0974 gegen 0,0973).

=== UND DIE PRUEFUNG SAGT JETZT ETWAS ERFUELLBARES ===

  kleinster Abstand >= 0,09          (Decke fuer 45 Farben: 0,097)
  hoechstens 48 Farben               (darueber ist 0,09 nicht mehr
                                      erreichbar -- gemessen, nicht
                                      gesetzt)
  Gegenprobe: #ff8fb4 gegen #fe8ebe  muss durchfallen

Die zweite Zeile ist die wichtige: Sie bewacht den GRUND. Wer die
46., 47., 48. Kachel anlegt, kommt noch durch; wer die 52. anlegt,
bekommt gesagt, dass jetzt ueber die Palette geredet werden muss,
statt still wieder in zwei gleiche Farben zu rutschen. Genau das ist
zwischen dem 08.09. und dem 17.09. passiert.

GEMESSEN: pruef-kachel-universum 13 Pruefungen, 0 Fehler (vorher 12
mit 2 Fehlern). Schlechtester Textkontrast auf der fertigen Kachel
7,02:1, am Bildschirmfoto gemessen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-25 23:19:29 +02:00

434 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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=202609252318" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609252318" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609252318" />
</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&nbsp;Workspace</h1>
<p class="unterzeile">Privater Bereich für die Manager, Scouts und Creator von Spicy&nbsp;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 &amp; 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 &amp; 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 &amp; 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 &amp; 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=202609252318" defer></script>
<script src="assets/js/installieren.js?v=202609252318" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink