Startseite: 17 eigene Farben -- gerechnet, nicht gewaehlt
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:
Claude Opus 5
Binary file not shown.
|
Before Width: | Height: | Size: 698 KiB After Width: | Height: | Size: 801 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 616 KiB After Width: | Height: | Size: 705 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 565 KiB After Width: | Height: | Size: 650 KiB |
@@ -99,6 +99,10 @@ const lesen = (seite) => seite.evaluate(() => ({
|
||||
.filter((z) => z.offsetParent !== null).length,
|
||||
hinweiseGesamt: document.querySelectorAll("#dran .dran__punkt").length,
|
||||
zeichenGroesse: Math.round(document.querySelector(".kachel__zeichen")?.getBoundingClientRect().width || 0),
|
||||
wasserzeichen: document.querySelectorAll(".kachel__wasserzeichen").length,
|
||||
wasserzeichenDeckung: getComputedStyle(document.querySelector(".kachel__wasserzeichen") || document.body).opacity,
|
||||
wasserzeichenSchwach: Number(getComputedStyle(
|
||||
document.querySelector(".kachel__wasserzeichen") || document.body).opacity) <= 0.15,
|
||||
namenGroesse: Math.round(parseFloat(getComputedStyle(document.querySelector(".kachel__name")).fontSize) || 0),
|
||||
kachelHoehe: Math.round(document.querySelectorAll(".kachel")[1]?.getBoundingClientRect().height || 0),
|
||||
zahlenLeer: !document.getElementById("zahlen-leer")?.hidden,
|
||||
@@ -131,6 +135,13 @@ for (const [breite, wie] of [[1440, "Computer"], [390, "Handy"]]) {
|
||||
|
||||
/* Jede Kachel muss ein Zeichen haben -- eine ohne waere ein leeres
|
||||
Kaestchen und faellt sofort auf. */
|
||||
/* Das Wasserzeichen: dasselbe Zeichen noch einmal, riesig und schwach
|
||||
im Hintergrund. Es macht jede Kachel unverwechselbar -- fehlt es,
|
||||
sehen alle wieder gleich aus. */
|
||||
ok(r.wasserzeichen === r.kacheln.length,
|
||||
`jede Kachel trägt ihr Wasserzeichen (${r.wasserzeichen} von ${r.kacheln.length})`);
|
||||
ok(r.wasserzeichenSchwach, `und es ist schwach genug, um nicht zu stören (${r.wasserzeichenDeckung})`);
|
||||
|
||||
ok(r.kacheln.every((k) => k.pfade > 0),
|
||||
`jede Kachel hat ein Zeichen (${r.kacheln.filter((k) => !k.pfade).map((k) => k.name).join(", ") || "alle"})`);
|
||||
ok(r.kacheln.every((k) => k.unter && k.unter.length > 4), "jede Kachel sagt, was drin ist");
|
||||
@@ -138,7 +149,12 @@ for (const [breite, wie] of [[1440, "Computer"], [390, "Handy"]]) {
|
||||
|
||||
/* Acht verschiedene Farben, und nirgends steht "ÖFFNEN" mehr. */
|
||||
const toene = new Set(r.kacheln.map((k) => k.farbe));
|
||||
ok(toene.size === 8, `acht verschiedene Farbtöne im Einsatz (${toene.size})`);
|
||||
/* JEDE Kachel ihre eigene Farbe -- siebzehn verschiedene, keine
|
||||
doppelt. (Der Creator sieht "Mein Profil" statt "Creator-Profile";
|
||||
das sind zwei Namen fuer denselben Bereich und teilen sich einen
|
||||
Ton -- deshalb wird hier gegen die Zahl der KACHELN geprueft.) */
|
||||
ok(toene.size === r.kacheln.length,
|
||||
`jede Kachel hat ihre eigene Farbe (${toene.size} Farben auf ${r.kacheln.length} Kacheln)`);
|
||||
const oeffnen = await seite.evaluate(() => document.body.textContent.includes("ÖFFNEN"));
|
||||
ok(!oeffnen, "das Wort ÖFFNEN kommt nicht mehr vor");
|
||||
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
/* ===================================================================
|
||||
Die 17 Kachelfarben der Startseite -- und wer welche bekommt.
|
||||
|
||||
Filipe wollte, dass JEDE Kachel ihre eigene Farbe hat. Ein erster
|
||||
Versuch mit frei gewaehlten Farben ergab Paare mit einem Abstand von
|
||||
1,4 -- also praktisch dieselbe Farbe. Das sieht nach Zufall aus, nicht
|
||||
nach Absicht.
|
||||
|
||||
Deshalb wird hier gerechnet statt gewaehlt:
|
||||
|
||||
1. 17 Farbtoene, gleichmaessig um den Farbkreis verteilt, in OKLCH
|
||||
gerechnet (dort sind gleiche Abstaende auch fuer das Auge gleich).
|
||||
Helligkeit und Farbstaerke bleiben konstant -- dadurch wirken alle
|
||||
gleich stark und keine draengt sich vor. Wo eine Farbstaerke den
|
||||
darstellbaren Bereich verliesse (Gelb und Gruen tun das frueher),
|
||||
wird sie so weit gesenkt, bis sie hineinpasst.
|
||||
|
||||
2. Die Zuordnung ist eine Suche, kein Geschmack. Verglichen wird vom
|
||||
Auge nur, was NEBENEINANDER liegt -- 17 Farben muessen sich also
|
||||
nicht alle voneinander unterscheiden, sondern nur von ihren
|
||||
Nachbarn im Raster. Gesucht wird die Anordnung, bei der der
|
||||
kleinste Abstand zweier Nachbarn so gross wie moeglich ist.
|
||||
|
||||
3. Unter allen Anordnungen, die eine harte Untergrenze schaffen, wird
|
||||
die genommen, deren Farben am besten zur Sache passen: LIVE rot,
|
||||
weil "on air" rot ist. Technik gelb wie ein Warnschild. Reports
|
||||
gruen wie ein Ergebnis. Personen golden wie ein Schluessel.
|
||||
|
||||
Aufrufen mit: node tools/kachel-farben.mjs
|
||||
Die Ausgabe wird nach start.css uebertragen (Abschnitt "Kacheln").
|
||||
=================================================================== */
|
||||
|
||||
const L = 0.655, C_MAX = 0.148;
|
||||
|
||||
function oklchZuRgb(L, C, hGrad) {
|
||||
const h = hGrad * Math.PI / 180;
|
||||
const a = C * Math.cos(h), b = C * Math.sin(h);
|
||||
const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
|
||||
const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
|
||||
const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
|
||||
const l = l_ ** 3, m = m_ ** 3, s = s_ ** 3;
|
||||
const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
|
||||
const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
|
||||
const bl = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;
|
||||
const gam = (v) => (v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055);
|
||||
return [gam(r), gam(g), gam(bl)];
|
||||
}
|
||||
const imRaum = (rgb) => rgb.every((v) => v >= -0.001 && v <= 1.001);
|
||||
const hex = (rgb) => "#" + rgb.map((v) =>
|
||||
Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0")).join("");
|
||||
|
||||
const winkel = (i) => (i * 360 / 17 + 250) % 360;
|
||||
function farbe(i) {
|
||||
let C = C_MAX;
|
||||
while (C > 0.02 && !imRaum(oklchZuRgb(L, C, winkel(i)))) C -= 0.004;
|
||||
return hex(oklchZuRgb(L, C, winkel(i)));
|
||||
}
|
||||
|
||||
const KACHELN = [
|
||||
"Dashboard", "Aufgaben", "Kalender", "Calls", "Dateien",
|
||||
"Creator-Profile", "Start-Check", "LIVE", "Content", "Community",
|
||||
"Technik", "Schutz", "Reports",
|
||||
"Personen", "Scout", "Bibliothek", "Automationen",
|
||||
];
|
||||
const N = (n) => KACHELN.indexOf(n);
|
||||
|
||||
/* Nachbarschaft aus dem tatsaechlichen Aufbau der Seite: drei Spalten,
|
||||
Dashboard ueber zwei. Nebeneinander UND untereinander. */
|
||||
const NACHBARN = [
|
||||
["Dashboard", "Aufgaben"], ["Dashboard", "Kalender"], ["Dashboard", "Calls"],
|
||||
["Aufgaben", "Dateien"], ["Kalender", "Calls"], ["Calls", "Dateien"],
|
||||
["Creator-Profile", "Start-Check"], ["Start-Check", "LIVE"],
|
||||
["Content", "Community"], ["Community", "Technik"], ["Schutz", "Reports"],
|
||||
["Creator-Profile", "Content"], ["Start-Check", "Community"], ["LIVE", "Technik"],
|
||||
["Content", "Schutz"], ["Community", "Reports"],
|
||||
["Personen", "Scout"], ["Scout", "Bibliothek"], ["Personen", "Automationen"],
|
||||
].map(([a, b]) => [N(a), N(b)]);
|
||||
|
||||
const abstand = (a, b) => {
|
||||
const d = Math.abs(winkel(a) - winkel(b)) % 360;
|
||||
return Math.min(d, 360 - d);
|
||||
};
|
||||
|
||||
const WUNSCH = {
|
||||
LIVE: 17, Content: 38, Technik: 81, Reports: 144, Personen: 59,
|
||||
Schutz: 250, Community: 335, Dashboard: 250, Kalender: 208,
|
||||
Bibliothek: 271, "Start-Check": 165,
|
||||
};
|
||||
function wunschNaehe(z) {
|
||||
let punkte = 0;
|
||||
for (const [name, wunsch] of Object.entries(WUNSCH)) {
|
||||
const d = Math.abs(winkel(z[N(name)]) - wunsch) % 360;
|
||||
punkte += 180 - Math.min(d, 360 - d);
|
||||
}
|
||||
return punkte;
|
||||
}
|
||||
|
||||
/* Erst die Unterscheidbarkeit sichern, dann unter allem, was das
|
||||
schafft, die passendste Anordnung waehlen. */
|
||||
const MINDEST = 95;
|
||||
function bewerte(z) {
|
||||
let schlechtestes = 999;
|
||||
for (const [a, b] of NACHBARN) schlechtestes = Math.min(schlechtestes, abstand(z[a], z[b]));
|
||||
if (schlechtestes < MINDEST) return schlechtestes; // noch nicht gut genug
|
||||
return 1e6 + schlechtestes * 1000 + wunschNaehe(z);
|
||||
}
|
||||
|
||||
/* Fester Zufall: Dieselbe Eingabe muss dieselbe Ausgabe ergeben, sonst
|
||||
waeren die Farben nach jedem Lauf andere. */
|
||||
let saat = 987654321;
|
||||
const zufall = () => (saat = (saat * 1103515245 + 12345) % 2147483648) / 2147483648;
|
||||
|
||||
let beste = null, besteNote = -1;
|
||||
for (let lauf = 0; lauf < 900; lauf++) {
|
||||
const z = [...Array(17).keys()];
|
||||
for (let i = 16; i > 0; i--) { const j = Math.floor(zufall() * (i + 1)); [z[i], z[j]] = [z[j], z[i]]; }
|
||||
let note = bewerte(z), besser = true;
|
||||
while (besser) {
|
||||
besser = false;
|
||||
for (let a = 0; a < 17; a++) for (let b = a + 1; b < 17; b++) {
|
||||
[z[a], z[b]] = [z[b], z[a]];
|
||||
const neu = bewerte(z);
|
||||
if (neu > note) { note = neu; besser = true; } else { [z[a], z[b]] = [z[b], z[a]]; }
|
||||
}
|
||||
}
|
||||
if (note > besteNote) { besteNote = note; beste = [...z]; }
|
||||
}
|
||||
|
||||
let schlechtestes = 999, paar = "";
|
||||
for (const [a, b] of NACHBARN) {
|
||||
const d = abstand(beste[a], beste[b]);
|
||||
if (d < schlechtestes) { schlechtestes = d; paar = `${KACHELN[a]} / ${KACHELN[b]}`; }
|
||||
}
|
||||
|
||||
console.log(`Kleinster Abstand zweier Nachbarn: ${schlechtestes.toFixed(1)}° (${paar})\n`);
|
||||
console.log("--- fuer start.css ---");
|
||||
KACHELN.forEach((k, i) => {
|
||||
console.log(`.kachel[data-ton="${beste[i] + 1}"] { --ton: ${farbe(beste[i])}; } /* ${k}, ${Math.round(winkel(beste[i]))}° */`);
|
||||
});
|
||||
console.log("\n--- fuer start.js (ton je Kachel) ---");
|
||||
console.log(JSON.stringify(Object.fromEntries(KACHELN.map((k, i) => [k, beste[i] + 1]))));
|
||||
console.log("\n--- alle Farben in der Reihenfolge der Plaetze ---");
|
||||
console.log([...Array(17).keys()].map((i) => farbe(i)).join(","));
|
||||
@@ -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; }
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -134,8 +134,8 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/aufgaben.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/aufgaben.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/automation.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/automation.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -127,8 +127,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/automation.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/automation.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/bereich.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/bereich.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -98,8 +98,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/bereich.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/bereich.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/calls.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/calls.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -49,9 +49,9 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/ki.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/calls.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/ki.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/calls.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/content.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/content.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -153,8 +153,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/content.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/content.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/dateien.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/dateien.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -88,8 +88,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/dateien.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/dateien.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
type="image/webp" media="(max-width: 899px)" />
|
||||
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="gate">
|
||||
@@ -143,6 +143,6 @@
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<script src="assets/js/gate.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/gate.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/kalender.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/kalender.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -94,8 +94,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kalender.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kalender.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/personen.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/personen.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -116,8 +116,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/personen.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/personen.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/profil.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/profil.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -127,8 +127,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/profil.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/profil.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/report.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/report.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -86,9 +86,9 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/ki.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/report.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/ki.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/report.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/scouting.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/scouting.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -124,8 +124,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/scouting.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/scouting.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -68,8 +68,8 @@
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/start.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/start.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/startcheck.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/startcheck.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -65,9 +65,9 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/ki.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/startcheck.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/ki.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/startcheck.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/uebersicht.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/uebersicht.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/uebersicht.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/wissen.css?v=202608312317" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/start.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608312332" />
|
||||
<link rel="stylesheet" href="assets/css/wissen.css?v=202608312332" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
@@ -170,8 +170,8 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/wahl.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wissen.js?v=202608312317" defer></script>
|
||||
<script src="assets/js/wahl.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/kopf.js?v=202608312332" defer></script>
|
||||
<script src="assets/js/wissen.js?v=202608312332" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user