Nav umbenannt/umsortiert + Stimmen-Kachel und Zitat-Karten aufgewertet
Nutzer-Wuensche 20.08.2026 (2. Runde):
- Kategorie "DogFather" -> "Filipe", Kategorie "HasiDog" -> "Dogi&Hasi".
- Unterpunkt "Streamer" (streamer.html) aus "Filipe" heraus nach
"Dogi&Hasi" verschoben, dort GANZ NACH OBEN (ueber "HasiDog") und in
"DogFather" umbenannt.
- Unterpunkt "HasiDog-Welt" -> "HasiDog".
- Fusszeile zieht mit: Spaltenueberschrift nutzt jetzt dieselbe
Kategorie-Bezeichnung wie die Nav ("Filipe" / "Dogi&Hasi & Manager"),
streamer.html steht dort ebenfalls in der Dogi&Hasi-Spalte ganz oben.
Die internen Schluesselnamen (nav_dogfather...) bleiben bewusst
unveraendert -- reine Bezeichner, ein Umbenennen waere nur Fehlerquelle.
- "die kachel soll noch spezieller und geiler aussehen": Einreich-Kachel
auf stimmen.html deutlich aufgewertet -- wandernder Farbverlauf-Rahmen
(Zwei-Ebenen-/background-position-Technik, KEIN rotierender Ring: siehe
dokumentierte Projekt-Lektion zu Verzerrungen auf eckigen Flaechen),
schwebende Herz-Partikel, Medaillon statt nacktem Emoji,
Farbverlauf-Ueberschrift, aufleuchtende Eingabefelder.
- "und auch die die danach kommen ... sollen viel geiler sein": freigegebene
Stimmen sind jetzt echte Praesentationskarten -- farbige Akzentlinie oben,
grosses Anfuehrungszeichen als Wasserzeichen, Avatar-Medaillon mit
Anfangsbuchstabe, TikTok-Handle als eigener Chip, sanftes Anheben beim
Ueberfahren.
Alles augenschonend gehalten (gedeckte Toene, langsame Bewegungen,
vollstaendiger Stillstand bei prefers-reduced-motion) und per Playwright
visuell geprueft, keine JS-Fehler.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+167
-36
@@ -3748,66 +3748,197 @@ body.start-seite .music-toggle:focus-visible {
|
||||
am Rand (dieselbe Zwei-Ebenen-Technik wie schon an mehreren Stellen
|
||||
dieses Projekts, siehe .supp-card::before) — bewusst augenschonend
|
||||
(gedeckte Farben, sanfte Bewegung, respektiert reduzierte Bewegung). ================================================================= */
|
||||
/* Nutzer-Wunsch 20.08.2026 (2. Runde): "die kachel soll noch spezieller und
|
||||
geiler aussehen". Deutlich aufgewertet gegenüber der ersten Fassung:
|
||||
wandernder Farbverlauf-Rahmen rundherum (Zwei-Ebenen-Technik mit
|
||||
background-position statt eines rotierenden Rings — siehe dokumentierte
|
||||
Projekt-Lektion: rotierende Masken verzerren auf eckigen Flächen),
|
||||
schwebende Herz-Partikel im Hintergrund, Medaillon statt nacktem Emoji,
|
||||
Farbverlauf-Überschrift und Eingabefelder, die beim Tippen aufleuchten.
|
||||
Bleibt trotzdem augenschonend: gedeckte Töne, langsame Bewegungen,
|
||||
vollständiger Stillstand bei prefers-reduced-motion. */
|
||||
.stimmen-einreichen-kachel {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
max-width: 560px;
|
||||
max-width: 580px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 2.2rem 2.4rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1.5px solid rgba(143, 217, 234, .35);
|
||||
padding: 2.4rem 2.4rem 2.6rem;
|
||||
border-radius: calc(var(--radius) + 4px);
|
||||
background:
|
||||
radial-gradient(circle at 15% 0%, rgba(255, 154, 208, .1), transparent 55%),
|
||||
radial-gradient(circle at 85% 100%, rgba(143, 217, 234, .1), transparent 55%),
|
||||
var(--card-bg);
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
|
||||
radial-gradient(ellipse at 12% 0%, rgba(255, 154, 208, .13), transparent 58%),
|
||||
radial-gradient(ellipse at 88% 100%, rgba(143, 217, 234, .13), transparent 58%),
|
||||
linear-gradient(180deg, rgba(24, 34, 51, .96), rgba(14, 20, 32, .98));
|
||||
box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 50px rgba(143, 217, 234, .06);
|
||||
}
|
||||
.stimmen-einreichen-glanz {
|
||||
/* Farbverlauf-Rahmen: zwei Ebenen, nur die Hintergrundposition wandert. */
|
||||
.stimmen-einreichen-kachel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 8%; right: 8%;
|
||||
height: 1.5px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 154, 208, .9), rgba(143, 217, 234, .9), transparent);
|
||||
animation: stimmen-glanz-wandert 5s ease-in-out infinite;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
padding: 1.5px;
|
||||
background: linear-gradient(115deg, rgba(255,154,208,.75), rgba(143,217,234,.75), rgba(199,204,209,.5), rgba(255,154,208,.75));
|
||||
background-size: 300% 100%;
|
||||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
animation: stimmen-rahmen-wandert 9s linear infinite;
|
||||
}
|
||||
@keyframes stimmen-glanz-wandert { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
|
||||
@media (prefers-reduced-motion: reduce) { .stimmen-einreichen-glanz { animation: none; opacity: .7; } }
|
||||
.stimmen-einreichen-kopf { text-align: center; margin-bottom: 1.6rem; }
|
||||
@keyframes stimmen-rahmen-wandert { to { background-position: 300% 0; } }
|
||||
/* Schwebende Herz-Partikel — reines CSS, keine zusätzlichen Elemente nötig. */
|
||||
.stimmen-einreichen-glanz {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(255,154,208,.5) 2px, transparent 3px),
|
||||
radial-gradient(circle, rgba(143,217,234,.45) 2px, transparent 3px),
|
||||
radial-gradient(circle, rgba(255,154,208,.35) 1.5px, transparent 3px);
|
||||
background-size: 190px 190px, 260px 260px, 140px 140px;
|
||||
background-position: 12% 18%, 78% 62%, 44% 88%;
|
||||
animation: stimmen-partikel-treiben 16s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes stimmen-partikel-treiben {
|
||||
from { background-position: 12% 18%, 78% 62%, 44% 88%; opacity: .55; }
|
||||
to { background-position: 18% 26%, 71% 54%, 50% 79%; opacity: .95; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.stimmen-einreichen-kachel::before, .stimmen-einreichen-glanz { animation: none; }
|
||||
}
|
||||
.stimmen-einreichen-kopf { text-align: center; margin-bottom: 1.8rem; }
|
||||
/* Medaillon statt nacktem Emoji: Kreis mit Farbschein und sanftem Puls. */
|
||||
.stimmen-einreichen-herz {
|
||||
display: inline-block;
|
||||
font-size: 2.4rem;
|
||||
filter: drop-shadow(0 0 16px rgba(255, 154, 208, .6));
|
||||
animation: stimmen-herz-puls 3s ease-in-out infinite;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 74px; height: 74px;
|
||||
border-radius: 50%;
|
||||
font-size: 2.1rem;
|
||||
background: radial-gradient(circle at 35% 30%, rgba(255,154,208,.28), rgba(143,217,234,.12) 70%);
|
||||
border: 1.5px solid rgba(255, 154, 208, .45);
|
||||
box-shadow: 0 0 26px rgba(255, 154, 208, .3), inset 0 0 22px rgba(255, 154, 208, .12);
|
||||
animation: stimmen-herz-puls 3.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes stimmen-herz-puls {
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 0 22px rgba(255,154,208,.22), inset 0 0 20px rgba(255,154,208,.1); }
|
||||
50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(255,154,208,.45), inset 0 0 26px rgba(255,154,208,.18); }
|
||||
}
|
||||
@keyframes stimmen-herz-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
|
||||
@media (prefers-reduced-motion: reduce) { .stimmen-einreichen-herz { animation: none; } }
|
||||
.stimmen-einreichen-kopf h2 { margin: .5rem 0 .6rem; }
|
||||
.stimmen-einreichen-kopf h2 {
|
||||
margin: .9rem 0 .6rem;
|
||||
background: linear-gradient(100deg, #ffd0e8, #ffffff 40%, #a8e4f2);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.stimmen-einreichen-kopf p { color: var(--text-muted); }
|
||||
#stimmen-formular .field { margin-bottom: 1rem; }
|
||||
#stimmen-formular .field { margin-bottom: 1.1rem; }
|
||||
/* Eingabefelder leuchten beim Tippen in der Kachel-Farbwelt auf. */
|
||||
#stimmen-formular .field input,
|
||||
#stimmen-formular .field textarea {
|
||||
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
|
||||
}
|
||||
#stimmen-formular .field input:focus,
|
||||
#stimmen-formular .field textarea:focus {
|
||||
outline: none;
|
||||
border-color: rgba(255, 154, 208, .75);
|
||||
box-shadow: 0 0 0 3px rgba(255, 154, 208, .14), 0 0 22px rgba(255, 154, 208, .18);
|
||||
background: rgba(255, 255, 255, .06);
|
||||
}
|
||||
.stimmen-erfolg { color: #baf7d6; font-size: .9rem; margin-top: 1rem; display: none; text-align: center; }
|
||||
.stimmen-erfolg.zeige { display: block; }
|
||||
.stimmen-fehler { color: #ff9a9a; font-size: .88rem; margin-top: 1rem; display: none; text-align: center; }
|
||||
.stimmen-fehler.zeige { display: block; }
|
||||
|
||||
/* Freigegebene Stimmen — gehobenere Zitat-Karte statt der schlichten
|
||||
.card, mit farbigem Anführungszeichen + TikTok-Chip. */
|
||||
/* Freigegebene Stimmen (20.08.2026, 2. Runde: "und auch die die danach
|
||||
kommen wenn ich sie eingebe die sollen viel geiler sein"): echte
|
||||
Präsentationskarten statt schlichter Kästen — Farbschein-Bloom in der
|
||||
Ecke, großes Anführungszeichen als Wasserzeichen, farbige Akzentlinie
|
||||
oben, Avatar-Medaillon mit dem Anfangsbuchstaben, TikTok-Handle als
|
||||
eigener Chip. Beim Überfahren hebt sich die Karte leicht an. */
|
||||
.stimmen-karte {
|
||||
position: relative;
|
||||
padding: 1.8rem 1.8rem 1.5rem;
|
||||
border-radius: calc(var(--radius) - 4px);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--card-bg);
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 1.8rem 1.6rem;
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
border: 1px solid rgba(143, 217, 234, .22);
|
||||
background:
|
||||
radial-gradient(ellipse at 100% 0%, rgba(255, 154, 208, .1), transparent 55%),
|
||||
linear-gradient(180deg, rgba(24, 34, 51, .9), rgba(15, 21, 33, .95));
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
|
||||
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
|
||||
}
|
||||
.stimmen-karte:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(255, 154, 208, .5);
|
||||
box-shadow: 0 22px 52px rgba(0, 0, 0, .42), 0 0 30px rgba(255, 154, 208, .14);
|
||||
}
|
||||
/* Farbige Akzentlinie oben — greift die Farbwelt der Einreich-Kachel auf. */
|
||||
.stimmen-karte::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2.5px;
|
||||
background: linear-gradient(90deg, rgba(255,154,208,.9), rgba(143,217,234,.9));
|
||||
}
|
||||
/* Großes Anführungszeichen als dezentes Wasserzeichen im Hintergrund. */
|
||||
.stimmen-karte::before {
|
||||
content: "„";
|
||||
position: absolute;
|
||||
top: .2rem; left: 1.1rem;
|
||||
font-size: 3.5rem;
|
||||
top: -.9rem; right: .6rem;
|
||||
z-index: -1;
|
||||
font-size: 8rem;
|
||||
font-family: Georgia, serif;
|
||||
color: rgba(143, 217, 234, .35);
|
||||
color: rgba(143, 217, 234, .09);
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.stimmen-karte-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
margin: 0 0 1.3rem;
|
||||
line-height: 1.75;
|
||||
font-size: 1.02rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.stimmen-karte-fuss {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .7rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, .07);
|
||||
}
|
||||
/* Avatar-Medaillon mit dem Anfangsbuchstaben (wird in stimmen.js gefüllt). */
|
||||
.stimmen-karte-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px; height: 40px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
color: #0d1420;
|
||||
background: linear-gradient(135deg, #ffd0e8, #a8e4f2);
|
||||
box-shadow: 0 0 16px rgba(255, 154, 208, .3);
|
||||
}
|
||||
.stimmen-karte-namen { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
|
||||
.stimmen-karte-name { font-weight: 700; color: var(--text); font-size: .95rem; }
|
||||
.stimmen-karte-tiktok {
|
||||
align-self: flex-start;
|
||||
font-size: .76rem;
|
||||
font-weight: 600;
|
||||
color: #a8e4f2;
|
||||
padding: .1rem .5rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(143, 217, 234, .12);
|
||||
border: 1px solid rgba(143, 217, 234, .28);
|
||||
}
|
||||
.stimmen-karte-text { position: relative; z-index: 1; margin: 1.2rem 0 1rem; line-height: 1.7; }
|
||||
.stimmen-karte-fuss { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
|
||||
.stimmen-karte-name { font-weight: 700; color: var(--text); }
|
||||
.stimmen-karte-tiktok { color: var(--accent); font-size: .82rem; }
|
||||
|
||||
+23
-8
@@ -76,15 +76,22 @@
|
||||
|
||||
const I18N_CORE = {
|
||||
nav_start: { de: "Start", "de-CH": "Start", en: "Home", fr: "Accueil", pt: "Início" },
|
||||
nav_dogfather: { de: "DogFather", "de-CH": "DogFather", en: "DogFather", fr: "DogFather", pt: "DogFather" },
|
||||
/* Umbenennungen 20.08.2026 (Nutzer-Wunsch): Kategorie "DogFather" -> "Filipe",
|
||||
Kategorie "HasiDog" -> "Dogi&Hasi". Die Schlüsselnamen (nav_dogfather...)
|
||||
bleiben bewusst unverändert — sie sind reine interne Bezeichner und werden
|
||||
an mehreren Stellen (Nav, Fußzeile, Farbzuordnung) referenziert; ein
|
||||
Umbenennen würde nur Fehlerquellen schaffen, ohne sichtbaren Nutzen. */
|
||||
nav_dogfather: { de: "Filipe", "de-CH": "Filipe", en: "Filipe", fr: "Filipe", pt: "Filipe" },
|
||||
nav_dogfather_person: { de: "Die Person", "de-CH": "D Person", en: "The Person", fr: "La personne", pt: "A pessoa" },
|
||||
nav_dogfather_streamer: { de: "Streamer", "de-CH": "Streamer", en: "Streamer", fr: "Streamer", pt: "Streamer" },
|
||||
/* Sitzt seit 20.08.2026 unter "Dogi&Hasi" (nicht mehr unter "Filipe") und heißt
|
||||
dort "DogFather" statt "Streamer" — zeigt weiterhin auf streamer.html. */
|
||||
nav_dogfather_streamer: { de: "DogFather", "de-CH": "DogFather", en: "DogFather", fr: "DogFather", pt: "DogFather" },
|
||||
nav_dogfather_casper: { de: "Casper", "de-CH": "Casper", en: "Casper", fr: "Casper", pt: "Casper" },
|
||||
nav_dogfather_vanvan: { de: "VanVan", "de-CH": "VanVan", en: "VanVan", fr: "VanVan", pt: "VanVan" },
|
||||
nav_dogfather_zeitreise: { de: "Zeitreise", "de-CH": "Zytreis", en: "Timeline", fr: "Chronologie", pt: "Linha do tempo" },
|
||||
nav_dogfather_ttmuddi: { de: "TT-Muddi", "de-CH": "TT-Muddi", en: "TT-Muddi", fr: "TT-Muddi", pt: "TT-Muddi" },
|
||||
nav_hasidog: { de: "HasiDog", "de-CH": "HasiDog", en: "HasiDog", fr: "HasiDog", pt: "HasiDog" },
|
||||
nav_hasidog_welt: { de: "HasiDog-Welt", "de-CH": "HasiDog-Wält", en: "HasiDog World", fr: "Monde HasiDog", pt: "Mundo HasiDog" },
|
||||
nav_hasidog: { de: "Dogi&Hasi", "de-CH": "Dogi&Hasi", en: "Dogi&Hasi", fr: "Dogi&Hasi", pt: "Dogi&Hasi" },
|
||||
nav_hasidog_welt: { de: "HasiDog", "de-CH": "HasiDog", en: "HasiDog", fr: "HasiDog", pt: "HasiDog" },
|
||||
nav_hasidog_modi: { de: "Modi-Team", "de-CH": "Modi-Team", en: "Modi-Team", fr: "Modi-Team", pt: "Modi-Team" },
|
||||
nav_hasidog_community: { de: "Community", "de-CH": "Community", en: "Community", fr: "Communauté", pt: "Comunidade" },
|
||||
nav_hasidog_stimmen: { de: "Stimmen", "de-CH": "Stimme", en: "Voices", fr: "Témoignages", pt: "Depoimentos" },
|
||||
@@ -125,7 +132,9 @@
|
||||
fr: "Streamer. Communauté. HasiDog. Manager. Plus forts ensemble.",
|
||||
pt: "Streamer. Comunidade. HasiDog. Manager. Mais fortes juntos.",
|
||||
},
|
||||
footer_h4_hasidog_manager: { de: "HasiDog & Manager", "de-CH": "HasiDog & Manager", en: "HasiDog & Manager", fr: "HasiDog et Manager", pt: "HasiDog e Manager" },
|
||||
/* Fußzeilen-Überschrift zieht mit der Kategorie-Umbenennung mit (20.08.2026):
|
||||
"HasiDog & Manager" -> "Dogi&Hasi & Manager". */
|
||||
footer_h4_hasidog_manager: { de: "Dogi&Hasi & Manager", "de-CH": "Dogi&Hasi & Manager", en: "Dogi&Hasi & Manager", fr: "Dogi&Hasi et Manager", pt: "Dogi&Hasi e Manager" },
|
||||
footer_h4_mehr: { de: "Mehr", "de-CH": "Meh", en: "More", fr: "Plus", pt: "Mais" },
|
||||
footer_scouts: { de: "Scouts", "de-CH": "Scouts", en: "Scouts", fr: "Scouts", pt: "Scouts" },
|
||||
footer_alle_links: { de: "Alle Links", "de-CH": "Alli Links", en: "All links", fr: "Tous les liens", pt: "Todos os links" },
|
||||
@@ -199,7 +208,6 @@
|
||||
key: "nav_dogfather",
|
||||
children: [
|
||||
{ key: "nav_dogfather_person", href: "dogfather.html" },
|
||||
{ key: "nav_dogfather_streamer", href: "streamer.html" },
|
||||
{ key: "nav_dogfather_casper", href: "casper.html" },
|
||||
{ key: "nav_dogfather_vanvan", href: "vanvan.html" },
|
||||
{ key: "nav_dogfather_ttmuddi", href: "tt-muddi.html" },
|
||||
@@ -209,6 +217,10 @@
|
||||
{
|
||||
key: "nav_hasidog",
|
||||
children: [
|
||||
/* "DogFather" (streamer.html) hierher verschoben — Nutzer-Wunsch
|
||||
20.08.2026: gehört unter "Dogi&Hasi" und dort GANZ NACH OBEN,
|
||||
direkt über "HasiDog". */
|
||||
{ key: "nav_dogfather_streamer", href: "streamer.html" },
|
||||
{ key: "nav_hasidog_welt", href: "hasidog.html" },
|
||||
{ key: "nav_hasidog_modi", href: "team-modis.html" },
|
||||
{ key: "nav_hasidog_community", href: "community.html" },
|
||||
@@ -592,10 +604,9 @@
|
||||
<button type="button" id="pwa-install-btn" class="btn btn-outline" style="display:none;margin-top:1rem;">📲 ${t("footer_app_installieren")}</button>
|
||||
</div>
|
||||
<div>
|
||||
<h4>DogFather</h4>
|
||||
<h4>${t("nav_dogfather")}</h4>
|
||||
<ul>
|
||||
<li><a href="dogfather.html">${t("nav_dogfather_person")}</a></li>
|
||||
<li><a href="streamer.html">${t("nav_dogfather_streamer")}</a></li>
|
||||
<li><a href="casper.html">${t("nav_dogfather_casper")}</a></li>
|
||||
<li><a href="vanvan.html">${t("nav_dogfather_vanvan")}</a></li>
|
||||
<li><a href="tt-muddi.html">${t("nav_dogfather_ttmuddi")}</a></li>
|
||||
@@ -605,6 +616,10 @@
|
||||
<div>
|
||||
<h4>${t("footer_h4_hasidog_manager")}</h4>
|
||||
<ul>
|
||||
<!-- "DogFather"/streamer.html steht seit 20.08.2026 auch in der
|
||||
Fußzeile in dieser Spalte (und ganz oben), damit sie dieselbe
|
||||
Struktur zeigt wie die Navigation darüber. -->
|
||||
<li><a href="streamer.html">${t("nav_dogfather_streamer")}</a></li>
|
||||
<li><a href="hasidog.html">${t("nav_hasidog_welt")}</a></li>
|
||||
<li><a href="team-modis.html">${t("nav_hasidog_modi")}</a></li>
|
||||
<li><a href="community.html">${t("nav_hasidog_community")}</a></li>
|
||||
|
||||
+15
-2
@@ -51,6 +51,16 @@
|
||||
return String(text ?? "").replace(/[&<>"']/g, (z) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[z]));
|
||||
}
|
||||
|
||||
/* Erstes sichtbares Zeichen des Namens fürs Avatar-Medaillon. [...name]
|
||||
statt name[0], damit auch Namen, die mit einem Emoji beginnen, nicht
|
||||
mitten in einem Zeichen abgeschnitten werden (ein Emoji besteht in
|
||||
JavaScript aus mehreren "Zeichen" — name[0] lieferte sonst nur ein
|
||||
kaputtes Halb-Zeichen). */
|
||||
function erstesZeichen(name) {
|
||||
const zeichen = [...String(name || "").trim()];
|
||||
return zeichen.length ? zeichen[0].toUpperCase() : "?";
|
||||
}
|
||||
|
||||
function ladeEchteStimmen() {
|
||||
fetch(`${API_BASE_URL}/testimonials`, { cache: "no-store" })
|
||||
.then((res) => res.json())
|
||||
@@ -64,8 +74,11 @@
|
||||
(t) => `<div class="stimmen-karte">
|
||||
<p class="stimmen-karte-text">${escapeHtml(t.nachricht)}</p>
|
||||
<div class="stimmen-karte-fuss">
|
||||
<span class="stimmen-karte-name">${escapeHtml(t.name)}</span>
|
||||
${t.tiktokUsername ? `<span class="stimmen-karte-tiktok">@${escapeHtml(t.tiktokUsername)}</span>` : ""}
|
||||
<span class="stimmen-karte-avatar" aria-hidden="true">${escapeHtml(erstesZeichen(t.name))}</span>
|
||||
<span class="stimmen-karte-namen">
|
||||
<span class="stimmen-karte-name">${escapeHtml(t.name)}</span>
|
||||
${t.tiktokUsername ? `<span class="stimmen-karte-tiktok">@${escapeHtml(t.tiktokUsername)}</span>` : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>`
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user