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

Sprachumschalter: Farben stärker + auch über die Schrift, Polarlicht-Leuchten

Browse Source 
Kräftigere, gesättigtere Akzentfarbe pro Sprache (glut) statt der eher
stumpfen Original-Flaggentöne. Die Farbe liegt jetzt nicht mehr nur auf
der Kugel, sondern auch auf dem Sprachcode-Text (DE/EN/...) und den
Dropdown-Einträgen, inklusive leuchtendem text-shadow. Sanft
pulsierender Glow-Effekt (Helligkeit/Sättigung, alle 3,2s) sorgt für den
gewünschten "Polarlicht"-Charakter, respektiert aber
prefers-reduced-motion.
This commit is contained in:
DogFatherGit
2026-08-02 00:51:29 +02:00
parent 276a5cf97b
commit 9484bc60a0
2 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/main.js
+14 -9
View File
@@ -33,12 +33,17 @@
"GB EN" (Flagge≠Sprachcode bei Englisch) usw. Ein einzelnes
Globus-Symbol im Knopf plus volle Sprachnamen im Dropdown ist
eindeutig und funktioniert auf jedem Betriebssystem gleich. */
/* Pro Sprache eine kräftige, gut leuchtende Akzentfarbe (glut) für Text
+ Kugel-Glanz, plus einen zweifarbigen Verlauf (farben) für die Kugel
selbst — angelehnt an die jeweilige Landesfarbe, aber bewusst
gesättigter/heller gewählt (nicht die originalen, oft eher stumpfen
Flaggenfarben), damit der Polarlicht-Leuchteffekt gut trägt. */
const SPRACHEN = [
{ code: "de", kurz: "DE", name: "Deutsch", farben: "linear-gradient(160deg, #1a1a1a 0%, #dd0000 50%, #ffce00 100%)" },
{ code: "de-CH", kurz: "CH", name: "Deutsch (Schweiz)", farben: "linear-gradient(160deg, #d52b1e 0%, #d52b1e 60%, #ffffff 100%)" },
{ code: "en", kurz: "EN", name: "English", farben: "linear-gradient(160deg, #00247d 0%, #ffffff 50%, #cf142b 100%)" },
{ code: "fr", kurz: "FR", name: "Français", farben: "linear-gradient(160deg, #0055a4 0%, #ffffff 50%, #ef4135 100%)" },
{ code: "pt", kurz: "PT", name: "Português", farben: "linear-gradient(160deg, #046a38 0%, #046a38 45%, #da291c 100%)" },
{ code: "de", kurz: "DE", name: "Deutsch", glut: "#ffb300", farben: "linear-gradient(160deg, #ffe066 0%, #ff8c00 100%)" },
{ code: "de-CH", kurz: "CH", name: "Deutsch (Schweiz)", glut: "#ff3b3b", farben: "linear-gradient(160deg, #ff8080 0%, #d90000 100%)" },
{ code: "en", kurz: "EN", name: "English", glut: "#2f6bff", farben: "linear-gradient(160deg, #7fa8ff 0%, #1a3fd6 100%)" },
{ code: "fr", kurz: "FR", name: "Français", glut: "#00c2ff", farben: "linear-gradient(160deg, #7fe3ff 0%, #0090cc 100%)" },
{ code: "pt", kurz: "PT", name: "Português", glut: "#20d97a", farben: "linear-gradient(160deg, #7cf5b0 0%, #0a9e4c 100%)" },
];
const SPRACHE_SCHLUESSEL = "dogi-sprache";
@@ -252,14 +257,14 @@
const aktiv = SPRACHEN.find((s) => s.code === aktuell) || SPRACHEN[0];
return `
<div class="nav-group sprach-schalter">
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">
<span class="sprach-kugel" style="background:${aktiv.farben};" aria-hidden="true"></span>
${aktiv.kurz} <span aria-hidden="true">▾</span>
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}" style="--sprach-glut:${aktiv.glut};">
<span class="sprach-kugel" style="background:${aktiv.farben};--sprach-glut:${aktiv.glut};" aria-hidden="true"></span>
<span class="sprach-kurz">${aktiv.kurz}</span> <span aria-hidden="true">▾</span>
</button>
<div class="nav-dropdown">
${SPRACHEN.map(
(s) =>
`<a href="#" data-sprache="${s.code}"${s.code === aktuell ? ' class="active"' : ""}><span class="sprach-kugel" style="background:${s.farben};" aria-hidden="true"></span>${s.name}</a>`
`<a href="#" data-sprache="${s.code}" style="--sprach-glut:${s.glut};"${s.code === aktuell ? ' class="active"' : ""}><span class="sprach-kugel" style="background:${s.farben};--sprach-glut:${s.glut};" aria-hidden="true"></span>${s.name}</a>`
).join("")}
</div>
</div>`;