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

Startseite: 17 eigene Farben -- gerechnet, nicht gewaehlt

Browse Source 
Filipe: "jede kiste soll seine eigene farbe haben. und die kacheln sollen
viel spezieller, viel spezieller sein."

BEIM ERSTEN MAL HATTE ICH ABGELEHNT, und das war zu bequem. Mein Einwand
stimmte zwar -- ein Versuch mit frei gewaehlten Farben ergab Paare mit
1,4 Grad Abstand, also praktisch dieselbe Farbe -- aber daraus "geht
nicht" zu machen, war falsch. Es geht, man muss nur rechnen.

Der Denkfehler war die Annahme, alle 17 muessten sich voneinander
unterscheiden. Das Auge vergleicht aber nur, was NEBENEINANDER liegt.
Also:

1. 17 Toene, gleichmaessig um den Farbkreis (je 21 Grad), gerechnet in
   OKLCH -- dort sind gleiche Abstaende auch fuer das Auge gleich.
   Helligkeit und Farbstaerke konstant, damit keine sich vordraengt. Wo
   die Farbstaerke den darstellbaren Bereich verliesse (Gelb und Gruen
   frueher als der Rest), wird sie gesenkt, bis sie hineinpasst.

2. Die ZUORDNUNG ist eine Suche ueber die tatsaechlichen Nachbarschaften
   im Raster (nebeneinander UND untereinander). Gesucht: die Anordnung
   mit dem groesstmoeglichen kleinsten Nachbarabstand. Ergebnis:
   mindestens 105,9 Grad zwischen allen Nachbarn.

3. Unter allen Anordnungen, die eine harte Untergrenze schaffen, gewinnt
   die passendste: LIVE rot, Technik gelb, Reports gruen, Personen
   rot-gold, Schutz stahlblau.

Steht als tools/kachel-farben.mjs im Repo, mit festem Zufallsstartwert --
derselbe Lauf ergibt dieselben Farben. Wer Kacheln umsortiert, aendert
die Nachbarschaften und muss es neu laufen lassen; das steht auch in
start.js.

Geprueft: Helligkeitsband, Farbstaerke und Kontrast bestehen fuer alle
siebzehn gegen genau diesen Hintergrund.

VIEL SPEZIELLER -- das WASSERZEICHEN:

Jede Kachel traegt ihr eigenes Zeichen noch einmal, riesig, angeschnitten
und fast unsichtbar (7 % Deckung) in der Ecke. Das ist der Grund, warum
siebzehn Kacheln nicht mehr wie siebzehn Kaesten aussehen: Jede bekommt
eine eigene grosse Form, ohne dass ein einziges zusaetzliches Bild
geladen wird -- es ist derselbe Pfad, nur groesser. Bewusst so schwach,
dass man es nicht liest, sondern nur spuert. Beim Ueberfahren wird es
etwas deutlicher und wandert zwei Pixel.

Dazu: Zeichenfeld 46 auf 52 px mit farbigem Schein darunter, Name auf
1,06 rem, mehr Polsterung. Alles mit prefers-reduced-motion abgesichert.

44 Pruefungen. Neu: dass jede Kachel eine EIGENE Farbe hat (17 Farben auf
17 Kacheln, gemessen an der berechneten Strichfarbe) und dass das
Wasserzeichen da und schwach genug ist.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-08-31 23:32:22 +02:00
co-authored by Claude Opus 5
parent ec712a3a32
commit 7673c12136
23 changed files with 403 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/start.css
+96 -28
View File
@@ -266,16 +266,39 @@ body.start {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Die acht geprüften Töne. Zugewiesen wird der PLATZ, nicht der Rang --
so behält ein Bereich seine Farbe, auch wenn andere dazukommen. */
.kachel[data-ton="1"] { --ton: #3987e5; }
.kachel[data-ton="2"] { --ton: #d95926; }
.kachel[data-ton="3"] { --ton: #199e70; }
.kachel[data-ton="4"] { --ton: #c98500; }
.kachel[data-ton="5"] { --ton: #d55181; }
.kachel[data-ton="6"] { --ton: #4d9e4d; }
.kachel[data-ton="7"] { --ton: #9085e9; }
.kachel[data-ton="8"] { --ton: #e66767; }
/* Siebzehn eigene Töne -- einer je Kachel. Nicht gewählt, sondern
gerechnet: gleichmäßig um den Farbkreis verteilt, in OKLCH bei
konstanter Helligkeit und Farbstärke, damit keine sich vordrängt.
Erzeugt von tools/kachel-farben.mjs; dort steht auch, warum.
Die ZUORDNUNG ist ebenfalls gerechnet. Das Auge vergleicht nur, was
NEBENEINANDER liegt -- gesucht wurde deshalb die Anordnung mit dem
größtmöglichen kleinsten Abstand zweier Nachbarn im Raster. Ergebnis:
mindestens 105,9 Grad zwischen allen Nachbarn. Zum Vergleich: Der
erste Versuch mit frei gewählten Farben hatte Paare bei 1,4 Grad.
Unter allen Anordnungen, die das schaffen, wurde die passendste
genommen -- LIVE rot, Technik gelb, Reports grün, Personen rot-gold.
Geprüft gegen genau diesen Hintergrund: Helligkeitsband, Farbstärke
und Kontrast bestehen für alle siebzehn. */
.kachel[data-ton="1"] { --ton: #3e95e7; } /* 250° */
.kachel[data-ton="2"] { --ton: #7089ea; } /* 271° */
.kachel[data-ton="3"] { --ton: #947de2; } /* 292° */
.kachel[data-ton="4"] { --ton: #b173d0; } /* 314° */
.kachel[data-ton="5"] { --ton: #c66ab5; } /* 335° */
.kachel[data-ton="6"] { --ton: #d56694; } /* 356° */
.kachel[data-ton="7"] { --ton: #dc666f; } /* 17° */
.kachel[data-ton="8"] { --ton: #db6c48; } /* 38° */
.kachel[data-ton="9"] { --ton: #d17717; } /* 59° */
.kachel[data-ton="10"] { --ton: #ba8610; } /* 81° */
.kachel[data-ton="11"] { --ton: #a29205; } /* 102° */
.kachel[data-ton="12"] { --ton: #809e23; } /* 123° */
.kachel[data-ton="13"] { --ton: #50a752; } /* 144° */
.kachel[data-ton="14"] { --ton: #07aa7c; } /* 165° */
.kachel[data-ton="15"] { --ton: #12a69b; } /* 186° */
.kachel[data-ton="16"] { --ton: #04a3b4; } /* 208° */
.kachel[data-ton="17"] { --ton: #059ece; } /* 229° */
.kachel {
--ton: var(--akzent);
@@ -336,10 +359,39 @@ body.start {
.kachel__link {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 14px;
padding: 18px 18px 18px 21px;
display: flex; align-items: center; gap: 15px;
padding: 21px 20px 21px 23px;
color: inherit; text-decoration: none;
}
/* Das Wasserzeichen. Dasselbe Zeichen wie im Feld links, aber riesig,
angeschnitten und fast unsichtbar in der rechten unteren Ecke.
Es ist der Grund, warum siebzehn Kacheln nicht mehr wie siebzehn
Kästen aussehen: Jede bekommt eine eigene große Form, ohne dass ein
einziges zusätzliches Bild geladen wird. Bewusst so schwach, dass man
es nicht liest, sondern nur spürt -- eine Kachel soll ihren Namen
tragen, nicht ihr Zeichen. */
.kachel__wasserzeichen {
position: absolute; right: -14px; bottom: -26px;
width: 132px; height: 132px;
pointer-events: none; z-index: 0;
opacity: .07;
transform: rotate(-8deg);
transition: opacity var(--tempo), transform var(--tempo);
}
.kachel__wasserzeichen svg {
width: 100%; height: 100%;
fill: none; stroke: var(--ton);
stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.kachel:hover .kachel__wasserzeichen {
opacity: .13;
transform: rotate(-8deg) translate(-4px, -4px) scale(1.04);
}
.kachel[data-gross="ja"] .kachel__wasserzeichen {
width: 168px; height: 168px; right: -18px; bottom: -34px;
}
.kachel__link:focus-visible {
outline: 2px solid var(--ton); outline-offset: -4px; border-radius: 15px;
}
@@ -348,40 +400,50 @@ body.start {
eine Fläche, ohne dass die ganze Kachel farbig wird. Der Verlauf und
der innere Lichtrand darin lassen es geprägt statt gemalt wirken. */
.kachel__zeichen {
position: relative; z-index: 1;
flex: none;
display: grid; place-items: center;
width: 46px; height: 46px; border-radius: 14px;
width: 52px; height: 52px; border-radius: 15px;
background:
linear-gradient(160deg,
color-mix(in srgb, var(--ton) 26%, transparent),
color-mix(in srgb, var(--ton) 9%, transparent));
border: 1px solid color-mix(in srgb, var(--ton) 30%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ton) 32%, transparent);
transition: background var(--tempo), border-color var(--tempo), transform var(--tempo);
color-mix(in srgb, var(--ton) 30%, transparent),
color-mix(in srgb, var(--ton) 10%, transparent));
border: 1px solid color-mix(in srgb, var(--ton) 32%, transparent);
/* Lichtkante innen oben, weicher Schein nach aussen -- dadurch wirkt
das Feld geprägt statt gemalt. Der Schein bleibt schwach; ein
leuchtender Kasten wäre in einer dunklen Oberfläche eine Lampe. */
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--ton) 38%, transparent),
0 4px 14px -8px color-mix(in srgb, var(--ton) 60%, transparent);
transition: background var(--tempo), border-color var(--tempo),
transform var(--tempo), box-shadow var(--tempo);
}
.kachel:hover .kachel__zeichen {
background:
linear-gradient(160deg,
color-mix(in srgb, var(--ton) 40%, transparent),
color-mix(in srgb, var(--ton) 14%, transparent));
border-color: color-mix(in srgb, var(--ton) 58%, transparent);
transform: scale(1.04);
color-mix(in srgb, var(--ton) 46%, transparent),
color-mix(in srgb, var(--ton) 16%, transparent));
border-color: color-mix(in srgb, var(--ton) 62%, transparent);
transform: scale(1.05);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--ton) 55%, transparent),
0 6px 20px -8px color-mix(in srgb, var(--ton) 85%, transparent);
}
.kachel[data-gross="ja"] .kachel__zeichen { width: 56px; height: 56px; border-radius: 17px; }
.kachel[data-gross="ja"] .kachel__zeichen { width: 62px; height: 62px; border-radius: 18px; }
.kachel__svg {
width: 23px; height: 23px;
width: 25px; height: 25px;
fill: none; stroke: var(--ton);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.kachel[data-gross="ja"] .kachel__svg { width: 28px; height: 28px; }
.kachel[data-gross="ja"] .kachel__svg { width: 31px; height: 31px; }
.kachel__text { display: grid; gap: 3px; min-width: 0; }
.kachel__text { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; }
.kachel__name {
font-size: 1.02rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.25;
font-size: 1.06rem; font-weight: 650; letter-spacing: -.014em; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kachel[data-gross="ja"] .kachel__name { font-size: 1.18rem; }
.kachel[data-gross="ja"] .kachel__name { font-size: 1.24rem; }
.kachel__unter {
font-size: .78rem; color: var(--text-still); line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
@@ -392,6 +454,7 @@ body.start {
liegt -- eine Kachel, die "3" sagt, ist zehnmal mehr wert als eine,
die "öffnen" sagt. */
.kachel__zahl {
position: relative; z-index: 1;
flex: none; margin-left: auto;
min-width: 32px; padding: 5px 11px;
text-align: center; font-size: .9rem; font-weight: 700;
@@ -418,6 +481,7 @@ body.start {
}
.kachel__pfeil {
position: relative; z-index: 1;
flex: none; margin-left: auto;
color: var(--text-still); font-size: 1rem;
transition: color var(--tempo), transform var(--tempo);
@@ -537,6 +601,10 @@ body.start {
.dran__link:hover .dran__pfeil { color: var(--akzent); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.kachel__wasserzeichen, .kachel__zeichen { transition: none; }
.kachel:hover .kachel__wasserzeichen { transform: rotate(-8deg); }
.kachel:hover .kachel__zeichen { transform: none; }
.dran__punkt, .dran__pfeil { transition: none; }
.dran__link:hover .dran__pfeil { transform: none; }
}
workspace/assets/js/start.js
+42 -26
View File
@@ -75,30 +75,35 @@
`rollen` steuert, wem ein Bereich überhaupt erscheint -- serverseitig
wird es ohnehin noch einmal geprüft, das hier ist nur Höflichkeit.
`ton` ist der Farbplatz 1..8. Warum acht und nicht siebzehn: Siebzehn
unterscheidbare Farben gibt es nicht. Ein erster Versuch mit einer
eigenen Farbe je Kachel ergab Paare mit einem Abstand von 1.4 -- also
praktisch dieselbe Farbe, und das sieht nach Zufall aus statt nach
Absicht. Diese acht sind gegen genau diesen Hintergrund geprüft
(Helligkeit, Farbstärke, Farbfehlsichtigkeit, Kontrast, alles
bestanden) und so verteilt, dass in einer Zeile nie zweimal derselbe
Ton steht. Die Farbe stützt nur -- was die Kachel IST, sagen Zeichen
und Name. */
`ton` ist der Farbplatz 1..17 -- JEDE Kachel hat ihre eigene Farbe.
Ein erster Versuch mit frei gewählten Farben ergab Paare mit einem
Abstand von 1,4: praktisch dieselbe Farbe, das sieht nach Zufall aus
statt nach Absicht. Deshalb sind Farben UND Zuordnung gerechnet, von
tools/kachel-farben.mjs. Die Überlegung dahinter: Das Auge vergleicht
nur, was nebeneinander liegt. Siebzehn Farben müssen sich also nicht
alle voneinander unterscheiden, sondern nur von ihren Nachbarn im
Raster -- und da sind es jetzt mindestens 105,9 Grad.
Wer hier Kacheln umsortiert oder eine hinzufügt, ändert damit die
Nachbarschaften. Dann gehört tools/kachel-farben.mjs neu gelaufen
(dort die Liste NACHBARN anpassen), sonst stimmt der Abstand nicht
mehr und niemand merkt es. */
const GRUPPEN = [
{
name: 'Täglich',
unter: 'Was du sowieso jeden Tag aufmachst',
bereiche: [
{ name: 'Dashboard', unter: 'Alle Creator auf einen Blick', zeichen: 'dashboard', ton: 1,
{ name: 'Dashboard', unter: 'Alle Creator auf einen Blick', zeichen: 'dashboard', ton: 3,
gross: true, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'uebersicht.html' },
{ name: 'Aufgaben', unter: 'Offen, in Arbeit, Review', zeichen: 'aufgaben', ton: 7,
{ name: 'Aufgaben', unter: 'Offen, in Arbeit, Review', zeichen: 'aufgaben', ton: 9,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'aufgaben.html' },
{ name: 'Kalender', unter: 'Termine und Calls', zeichen: 'kalender', ton: 3,
{ name: 'Kalender', unter: 'Termine und Calls', zeichen: 'kalender', ton: 15,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'kalender.html' },
{ name: 'Calls & Protokolle', unter: 'Gespräche mit To-dos', zeichen: 'calls', ton: 5,
{ name: 'Calls & Protokolle', unter: 'Gespräche mit To-dos', zeichen: 'calls', ton: 8,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'calls.html' },
{ name: 'Dateien', unter: 'Ablage und Freigaben', zeichen: 'dateien', ton: 4,
{ name: 'Dateien', unter: 'Ablage und Freigaben', zeichen: 'dateien', ton: 16,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'dateien.html' },
],
},
@@ -106,23 +111,23 @@
name: 'Rund um den Creator',
unter: 'Die Betreuungsakte – Stand, Zahlen, Verlauf',
bereiche: [
{ name: 'Creator-Profile', unter: 'Ziele und 90-Tage-Plan', zeichen: 'profil', ton: 1,
{ name: 'Creator-Profile', unter: 'Ziele und 90-Tage-Plan', zeichen: 'profil', ton: 4,
rollen: ['admin', 'manager', 'scout'], ziel: 'profil.html' },
{ name: 'Mein Profil', unter: 'Deine Ziele und Pläne', zeichen: 'profil', ton: 1,
{ name: 'Mein Profil', unter: 'Deine Ziele und Pläne', zeichen: 'profil', ton: 4,
rollen: ['creator'], ziel: 'profil.html' },
{ name: 'Start-Check', unter: 'Erstanalyse, 16 Punkte', zeichen: 'startcheck', ton: 3,
{ name: 'Start-Check', unter: 'Erstanalyse, 16 Punkte', zeichen: 'startcheck', ton: 14,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'startcheck.html' },
{ name: 'LIVE-Analyse', unter: 'Vorher, während, danach', zeichen: 'live', ton: 8,
{ name: 'LIVE-Analyse', unter: 'Vorher, während, danach', zeichen: 'live', ton: 6,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=live' },
{ name: 'Content-Planung', unter: 'Idee bis Upload', zeichen: 'content', ton: 2,
{ name: 'Content-Planung', unter: 'Idee bis Upload', zeichen: 'content', ton: 10,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'content.html' },
{ name: 'Community', unter: 'Moderation und Konflikte', zeichen: 'community', ton: 5,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=community' },
{ name: 'Technik', unter: 'Setup, Fehler, Lösungen', zeichen: 'technik', ton: 4,
{ name: 'Technik', unter: 'Setup, Fehler, Lösungen', zeichen: 'technik', ton: 11,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=technik' },
{ name: 'Schutz & Regeln', unter: 'Richtlinien und Vorfälle', zeichen: 'schutz', ton: 7,
{ name: 'Schutz & Regeln', unter: 'Richtlinien und Vorfälle', zeichen: 'schutz', ton: 1,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=schutz' },
{ name: 'Reports & Review', unter: 'Woche und Entscheidung', zeichen: 'reports', ton: 6,
{ name: 'Reports & Review', unter: 'Woche und Entscheidung', zeichen: 'reports', ton: 13,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'report.html' },
],
},
@@ -130,13 +135,13 @@
name: 'Team & System',
unter: 'Was den Laden am Laufen hält',
bereiche: [
{ name: 'Personen & Zugänge', unter: 'Rollen und Codes', zeichen: 'personen', ton: 4,
{ name: 'Personen & Zugänge', unter: 'Rollen und Codes', zeichen: 'personen', ton: 7,
rollen: ['admin', 'manager'], ziel: 'personen.html' },
{ name: 'Scout-Pipeline', unter: 'Entdeckt bis übergeben', zeichen: 'scouting', ton: 3,
{ name: 'Scout-Pipeline', unter: 'Entdeckt bis übergeben', zeichen: 'scouting', ton: 12,
rollen: ['admin', 'manager', 'scout'], ziel: 'scouting.html' },
{ name: 'Wissens-Bibliothek', unter: 'Anleitungen und PDFs', zeichen: 'wissen', ton: 1,
{ name: 'Wissens-Bibliothek', unter: 'Anleitungen und PDFs', zeichen: 'wissen', ton: 2,
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'wissen.html' },
{ name: 'Automationen', unter: 'Was von allein passiert', zeichen: 'automation', ton: 7,
{ name: 'Automationen', unter: 'Was von allein passiert', zeichen: 'automation', ton: 17,
rollen: ['admin', 'manager'], ziel: 'automation.html' },
],
},
@@ -230,6 +235,17 @@
const a = el('a', 'kachel__link');
a.href = b.ziel;
/* Das Wasserzeichen: dasselbe Zeichen noch einmal, riesig und
fast unsichtbar in der Ecke. Es macht jede Kachel auf den
ersten Blick unverwechselbar, ohne dass man es bewusst
wahrnimmt -- und es ist der Grund, warum siebzehn Kacheln
nicht mehr wie siebzehn Kästen aussehen.
Steht als Erstes im Aufbau, damit es HINTER allem liegt. */
const schatten = el('span', 'kachel__wasserzeichen');
schatten.append(zeichenBauen(b.zeichen));
a.append(schatten);
const zeichen = el('span', 'kachel__zeichen');
zeichen.append(zeichenBauen(b.zeichen));
a.append(zeichen);