DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Die fuenf Rollen bekommen eigene Farben und echte Zeichen

Browse Source 
Auftrag von Filipe (Nachtliste, screen3): "die farben sollen jeden rollen
angepasst werden ueber die ganze website ... diese farben sollen auch
immer danach bei den rollen benutzt werden", dazu die Zeichen "viel viel
viel realistischer und geiler".

DIE FARBEN STEHEN JETZT AN EINER STELLE. Vorher lagen dieselben Hex-Werte
ueber chat.css, personen.css, kalender.css, start.css und gate.css
verstreut -- 47 Fundstellen, allein in chat.css sechzehn. Wer eine Farbe
aendern wollte, musste sie ueberall finden; wer eine uebersah, hatte zwei
Wahrheiten auf einem Bildschirm. Sie stehen jetzt in gate.css, der
einzigen Datei, die auf allen 19 Seiten liegt, mit je drei Toenen
(haupt/zweit/tief) fuer Flaeche, Verlauf und Schatten.

  spicy    rot        #ef5f57  warmes Chili-Rot, kein Signalrot
  admin    babyblau   #7ec8f2  + Lila #a78bfa als zweiter Ton
  manager  lila       #8a76ff  bleibt
  scout    gruen      #5fc99a  bleibt
  creator  bronze     #c79a6d  + Silber #d8dee9 -- neu

Zwei davon waren inhaltlich falsch: `admin` stand auf Gold und `creator`
auf demselben Blau wie der allgemeine Akzent -- die Rolle war dadurch
nicht von "irgendein Bedienelement" zu unterscheiden. In der
Personenliste fehlten Spicy und Manager ganz, und Creator trug das Lila
des Managers: zwei Rollen sahen in derselben Liste gleich aus.

Umgeschaltet wird am <html> (kopf.js), nicht an einzelnen Bausteinen:
Wer die Farbe an jedem Element einzeln setzt, vergisst das naechste, das
dazukommt.

DIE ZEICHEN TRAGEN IHRE FARBEN SELBST. Vorher hatte jedes genau eine
Farbe (currentColor). "Peperoni rot UND gruen" oder "gruenes Schild mit
einer roten Peperoni drin" ist damit nicht darstellbar, egal wie man
mischt. Jedes Zeichen bringt jetzt eigene Verlaeufe mit: Chili rot mit
gruenem Stiel, Husky in Silber mit blauen Augen (Radialverlauf plus
Lichtpunkt -- ein flacher blauer Punkt sieht aus wie ein Loch), Stern in
Gold mit wanderndem Glanz, Schild gruen mit Chili darin, Creator als
geschliffener Kristall in Lila und Silber statt der alten
Person-Silhouette, die aussah wie ein leeres Benutzerbild.

Das Funkeln des Sterns laeuft ueber eine wandernde Maske, nicht ueber die
Deckkraft: Auf- und Abblenden waere ein Pulsieren, kein Glitzern. 4,5 s
und schwach, damit es in einer Liste aus fuenf Rollen nicht dauerhaft den
Blick zieht -- und bei `prefers-reduced-motion` steht es still.

ZWEI FEHLER, DIE NUR DAS HINSEHEN GEFUNDEN HAT:

1. `.rollenwahl__symbol` setzte `fill: none; stroke: var(--r)`. Beides
   wird an die Pfade VERERBT -- jedes neue Zeichen waere von einem
   1,55 px dicken Rand in der Rollenfarbe ueberzogen worden.

2. Das Sprite stand in einem <svg style="display:none">. Solange die
   Zeichen einfarbig waren, war das harmlos. Ein <linearGradient> in
   einem `display:none`-Teilbaum wird aber NICHT ausgewertet, und ein
   <use> darauf bekommt gar keine Fuellung: Im Bildschirmfoto standen
   fuenf Bruchstuecke -- nur Striche, keine Flaechen. Die Zahlen sagten
   dazu nichts, das Sprite war ja vorhanden. Jetzt ein Kasten ohne
   Groesse: wird gerendert, nimmt keinen Platz.

Gemessen: pruef-rollen 97 Pruefungen EXIT=0, pruef-personen-formular 23
EXIT=0, pruef-start-ansicht EXIT=0, pruef-css-klassen EXIT=0. Farb-
umschaltung am lebenden System nachgesehen: html[data-rolle]=admin ->
--r-haupt = #7ec8f2.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-08 04:30:12 +02:00
co-authored by Claude Opus 5
parent 863471c3df
commit 963ea492b1
7 changed files with 355 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/personen.html
+145 -27
View File
@@ -37,36 +37,154 @@
</div>
</header>
<svg style="display:none" aria-hidden="true"><defs>
<!-- Chili fuer Spicy Media -- dasselbe Zeichen wie auf der
Anmeldeseite. Zwei Rollen mit derselben Krone waeren genau der
Fehler, den die Kacheln schon einmal hatten: Man klickt zweimal
falsch, bevor man merkt, dass es zwei verschiedene sind. -->
<g id="r-chili"><path class="fuell" 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 class="linie" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/><path class="linie" 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"/></g>
<!-- DER HUSKY FUER DOGFATHER (07.09.2026). Filipe: "die krone bei
dogfather durch einen husky ersetzen, wie mein logo."
<!-- ====================================================================
DIE FÜNF ROLLENZEICHEN, plastisch (08.09.2026)
Bei 22 Pixeln entscheidet die SILHOUETTE, nicht das Detail. Ein
Husky erkennt man an dreierlei, und mehr passt auch nicht hinein:
den spitzen, aufrecht stehenden Ohren, dem breiten Kopf, der
nach unten schmal zulaeuft, und der Gesichtsmaske. Fell, Zunge
oder ein zweiter Ton wuerden bei dieser Groesse zu Matsch --
genau deshalb hat die Krone davor auch funktioniert.
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"
`fuell` traegt die Flaeche, `linie` die Zeichnung darauf; beides
getrennt, damit die Farbe im CSS unabhaengig vom Umriss gesetzt
werden kann. -->
<g id="r-husky">
<path class="fuell" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
<path class="linie" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
<path class="linie" d="M9.6 8.9c-.9 1.4-1.4 2.6-1.5 4.1M14.4 8.9c.9 1.4 1.4 2.6 1.5 4.1"/>
<circle class="auge" cx="9.5" cy="13.1" r="1.05"/>
<circle class="auge" cx="14.5" cy="13.1" r="1.05"/>
<path class="nase" d="M12 15.4l1.5 1.1-1.5 1.4-1.5-1.4z"/>
WAS SICH GRUNDSÄTZLICH ÄNDERT: Vorher trug jedes Zeichen genau EINE
Farbe (`currentColor` über `.fuell`/`.linie`). Damit lässt sich
"rot UND grün" nicht darstellen. Jedes Zeichen bekommt deshalb
eigene Verläufe — dieselbe Technik, mit der auch die Kacheln
plastisch wirken: ein heller Rand oben, die Sättigung in der Mitte,
Abdunklung unten. Das ergibt Volumen statt einer flachen Fläche.
WARUM VERLÄUFE UND KEIN DETAIL: Diese Zeichen stehen bei 22 px.
Mehr Linien werden dort zu Matsch — das stand schon beim Husky hier,
und es gilt weiter. "Realistischer" heißt bei dieser Größe also
nicht "mehr Striche", sondern LICHT: eine Form, auf die Licht fällt,
wirkt körperlich; dieselbe Form flach gefüllt wirkt wie ein
Aufkleber. Alle Verläufe laufen deshalb von oben nach unten, als
stünde das Licht über der Seite — so wie bei allem anderen hier auch.
Die Verlaufs-IDs sind mit `rs-` vorangestellt (RollenSymbol), damit
sie mit nichts kollidieren, was später dazukommt.
==================================================================== -->
<!-- NICHT `display:none` VERSTECKEN -- das war ein echter Fehler, und man
sieht ihn erst im Bild (08.09.2026).
Solange die Zeichen einfarbig waren (`currentColor` ueber CSS), war
`display:none` harmlos. Sobald sie ihre Farbe aus einem <linearGradient>
im selben <defs> holen, ist es das nicht mehr: Ein Verlauf in einem
Teilbaum, der `display:none` traegt, wird nicht ausgewertet, und ein
`<use>` darauf bekommt schlicht KEINE Fuellung. Im Bildschirmfoto
standen daraufhin fuenf Bruchstuecke -- nur die Strichlinien, keine
Flaechen. Die Zahlen sagten dazu nichts, das Sprite war ja da.
Richtig ist ein Kasten ohne Groesse: Er wird gerendert (Verlaeufe
werden also aufgeloest), nimmt aber keinen Platz ein. -->
<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true"><defs>
<linearGradient id="rs-chili-rot" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ff8a6b"/>
<stop offset=".55" stop-color="#ef4136"/>
<stop offset="1" stop-color="#a8221c"/>
</linearGradient>
<linearGradient id="rs-chili-gruen" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#8fd66a"/>
<stop offset="1" stop-color="#3f7d33"/>
</linearGradient>
<linearGradient id="rs-silber" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset=".42" stop-color="#cfd8e3"/>
<stop offset=".72" stop-color="#93a1b3"/>
<stop offset="1" stop-color="#5d6b7d"/>
</linearGradient>
<linearGradient id="rs-gold" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff3b0"/>
<stop offset=".45" stop-color="#ffd24a"/>
<stop offset="1" stop-color="#c88a12"/>
</linearGradient>
<linearGradient id="rs-schild" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7fe0ae"/>
<stop offset=".5" stop-color="#3faa78"/>
<stop offset="1" stop-color="#1c5e42"/>
</linearGradient>
<linearGradient id="rs-lila" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#d9c9ff"/>
<stop offset=".38" stop-color="#a78bfa"/>
<stop offset="1" stop-color="#5b3fa8"/>
</linearGradient>
<linearGradient id="rs-lila-silber" x1="0" y1="1" x2="1" y2="0">
<stop offset="0" stop-color="#6d4fc4"/>
<stop offset=".5" stop-color="#cbd5e1"/>
<stop offset="1" stop-color="#a78bfa"/>
</linearGradient>
<radialGradient id="rs-auge" cx=".38" cy=".32" r=".85">
<stop offset="0" stop-color="#bfe9ff"/>
<stop offset=".45" stop-color="#3fa9f5"/>
<stop offset="1" stop-color="#0f4c75"/>
</radialGradient>
<!-- SPICY MEDIA — die Peperoni, rot mit grünem Stiel.
Der Stiel liegt ÜBER der Frucht und ist eine eigene Form: Als
Teil desselben Pfades hätte er die Farbe der Frucht erben müssen,
und genau das wollte Filipe nicht. -->
<g id="r-chili">
<path fill="url(#rs-chili-rot)" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/>
<path fill="none" stroke="rgba(255,255,255,.5)" stroke-width=".9" stroke-linecap="round" d="M6.2 13.9c2.4 1.9 5 2.6 7.4 2"/>
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.9" stroke-linecap="round" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/>
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.7" stroke-linecap="round" d="M13.4 4.6c-.5 1.2-.3 2.3.5 3.2"/>
</g>
<!-- DOGFATHER — der Husky in Silber, mit blauen Augen.
Silhouette unverändert (sie war richtig): spitze Ohren, breiter
Kopf, schmal zulaufend. Neu ist das Licht darauf und die Augen,
die jetzt aus einem eigenen Radialverlauf kommen — ein blauer
Punkt allein sähe aus wie ein Loch, mit Lichtpunkt wirkt er nass. -->
<g id="r-husky">
<path fill="url(#rs-silber)" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
<path fill="rgba(255,255,255,.34)" d="M6.3 4.2 9.6 8.9h2.4V4.9z"/>
<path fill="none" stroke="rgba(40,58,78,.55)" stroke-width=".85" stroke-linecap="round" d="M9.6 8.9c-.9 1.4-1.4 2.6-1.5 4.1M14.4 8.9c.9 1.4 1.4 2.6 1.5 4.1"/>
<circle fill="url(#rs-auge)" cx="9.5" cy="13.1" r="1.15"/>
<circle fill="url(#rs-auge)" cx="14.5" cy="13.1" r="1.15"/>
<circle fill="#fff" opacity=".9" cx="9.15" cy="12.75" r=".33"/>
<circle fill="#fff" opacity=".9" cx="14.15" cy="12.75" r=".33"/>
<path fill="#2b3746" d="M12 15.4l1.5 1.1-1.5 1.4-1.5-1.4z"/>
</g>
<!-- MANAGER — der goldene Stern, der glitzert.
Das Funkeln ist ein schmaler heller Streifen, der einmal quer
über den Stern wandert. Es ist BEWUSST langsam (4,5 s) und
schwach: Ein schnelles Blinken wäre genau die aggressive Optik,
die hier nicht sein soll. Bei "weniger Bewegung" steht es still
(siehe personen.css) -- dann bleibt ein ruhiger goldener Stern. -->
<g id="r-stern">
<path fill="url(#rs-gold)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
<path fill="rgba(255,255,255,.45)" d="m12 3.4 2.6 5.6-2.6.7z"/>
<path class="rs-funkel" fill="rgba(255,255,255,.75)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
</g>
<!-- SCOUT — grünes Schild mit einer roten Peperoni darin.
Der Haken von früher ist weg: Filipe hat die Peperoni ausdrücklich
verlangt, und beides nebeneinander wäre bei 22 px Matsch. Die
Chili ist stark vereinfacht — bei dieser Größe zählt nur, dass
eine rote, gebogene Form mit grünem Stiel im Schild steht. -->
<g id="r-schutz">
<path fill="url(#rs-schild)" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/>
<path fill="rgba(255,255,255,.28)" d="M12 3.4 5.8 5.9v5c0 1.4.4 2.7 1.1 3.9L12 3.4z"/>
<path fill="url(#rs-chili-rot)" d="M13.6 8.1c-.4.9-.2 1.7.4 2.2 1.9.2 3.2 1.7 3.2 3.4 0 2.1-1.9 3.8-4.3 3.8-2.9 0-5.2-1.8-6.1-4.2 2.3.6 4.2-.3 5-2 .4-.8.3-1.5-.2-2z" transform="translate(-.6 -.9) scale(.92) translate(1 1)"/>
<path fill="none" stroke="#8fd66a" stroke-width="1.3" stroke-linecap="round" d="M12.9 7.6c.9-.4 1.7 0 1.8.8"/>
</g>
<!-- CREATOR — Lila und Silber.
Statt der alten Person-Silhouette (die aussah wie ein leeres
Benutzerbild und damit wie "niemand") jetzt ein geschliffener
Kristall: lila Kern, silberne Facetten. Er hat als einziges der
fünf Zeichen eine Innenzeichnung, und die trägt auch klein --
weil es gerade Kanten sind, keine Rundungen. -->
<g id="r-person">
<path fill="url(#rs-lila)" d="M12 2.6 20 9l-3 11.4H7L4 9z"/>
<path fill="url(#rs-lila-silber)" opacity=".85" d="M12 2.6 20 9h-5.6zM12 2.6 4 9h5.6z"/>
<path fill="rgba(255,255,255,.4)" d="M12 2.6 14.4 9H9.6z"/>
<path fill="none" stroke="rgba(216,222,233,.75)" stroke-width=".8" stroke-linejoin="round" d="M12 2.6 20 9l-3 11.4H7L4 9zM4 9h16M9.6 9 12 20.4 14.4 9"/>
</g>
<g id="r-stern"><path class="fuell" 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 class="linie" 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>
<g id="r-schutz"><path class="fuell" 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 class="linie" 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 class="linie hell" d="m9.5 11.8 1.8 1.8 3.3-3.5"/></g>
<g id="r-person"><circle class="fuell" cx="12" cy="8.4" r="3.6"/><path class="fuell" d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7z"/><circle class="linie" cx="12" cy="8.4" r="3.6"/><path class="linie" d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></g>
</defs></svg>
<main class="inhalt inhalt--breit">