feat: i18n annotations — data-de/data-en + toggle for all 54 custom sites
Phase 2 of i18n rollout: - All 54 static custom sites now have data-de/data-en attributes on visible text elements with English translations - i18n.js script tag injected into all sites - Language toggle button with machine-translation disclaimer added to every site's footer area - Brand names / domain wordplay preserved unchanged in both languages - 2 dynamic sites (dasbes.de, dumusst.com) skipped — no static HTML
This commit is contained in:
m
@@ -663,7 +663,7 @@
|
||||
<h1 class="title-main wobble-target">
|
||||
ElefantenHor<span class="dot">.</span><span class="de">de</span>
|
||||
</h1>
|
||||
<p class="tagline shake-target">Wenn der Boden bebt.</p>
|
||||
<p class="tagline shake-target" data-de="Wenn der Boden bebt." data-en="When the ground shakes.">Wenn der Boden bebt.</p>
|
||||
|
||||
<div class="dust-container">
|
||||
<div class="dust-particle"></div>
|
||||
@@ -682,7 +682,7 @@
|
||||
<div class="crack-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-hint shake-target">
|
||||
<div class="scroll-hint shake-target" data-de="BODEN BEOBACHTEN" data-en="WATCH THE GROUND">
|
||||
BODEN BEOBACHTEN
|
||||
<span>▾</span>
|
||||
</div>
|
||||
@@ -692,39 +692,39 @@
|
||||
<div class="warning-bar">
|
||||
<div class="warning-bar-inner shake-target danger-pulse">
|
||||
<span class="blink-dot"></span>
|
||||
Stampede-Warnung aktiv
|
||||
<span data-de="Stampede-Warnung aktiv" data-en="Stampede warning active">Stampede-Warnung aktiv</span>
|
||||
<span class="blink-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STAMPEDE WARNINGS -->
|
||||
<section class="stampede-section">
|
||||
<h2 class="section-title shake-target">Aktuelle Stampede-Warnungen</h2>
|
||||
<h2 class="section-title shake-target" data-de="Aktuelle Stampede-Warnungen" data-en="Current Stampede Warnings">Aktuelle Stampede-Warnungen</h2>
|
||||
<div class="warnings-grid">
|
||||
<div class="warning-card level-critical wobble-target">
|
||||
<span class="warning-level">Kritisch</span>
|
||||
<span class="warning-level" data-de="Kritisch" data-en="Critical">Kritisch</span>
|
||||
<span class="warning-emoji">💥</span>
|
||||
<h3>Sektor 7 — Wohnzimmer</h3>
|
||||
<p>Herde von 43 Elefanten im Anmarsch. Geschätzte Ankunft: jetzt. Vasen sichern. Sofa aufgeben.</p>
|
||||
<h3 data-de="Sektor 7 — Wohnzimmer" data-en="Sector 7 — Living Room">Sektor 7 — Wohnzimmer</h3>
|
||||
<p data-de="Herde von 43 Elefanten im Anmarsch. Geschätzte Ankunft: jetzt. Vasen sichern. Sofa aufgeben." data-en="Herd of 43 elephants approaching. Estimated arrival: now. Secure vases. Abandon sofa.">Herde von 43 Elefanten im Anmarsch. Geschätzte Ankunft: jetzt. Vasen sichern. Sofa aufgeben.</p>
|
||||
</div>
|
||||
<div class="warning-card level-high shake-target">
|
||||
<span class="warning-level">Hoch</span>
|
||||
<span class="warning-level" data-de="Hoch" data-en="High">Hoch</span>
|
||||
<span class="warning-emoji">🌍</span>
|
||||
<h3>Seismische Aktivität</h3>
|
||||
<p>Richter-Skala zeigt 4.2 an. Ursache: kein Erdbeben, nur Dienstags-Stampede. Alles normal.</p>
|
||||
<h3 data-de="Seismische Aktivität" data-en="Seismic Activity">Seismische Aktivität</h3>
|
||||
<p data-de="Richter-Skala zeigt 4.2 an. Ursache: kein Erdbeben, nur Dienstags-Stampede. Alles normal." data-en="Richter scale reads 4.2. Cause: not an earthquake, just Tuesday stampede. All normal.">Richter-Skala zeigt 4.2 an. Ursache: kein Erdbeben, nur Dienstags-Stampede. Alles normal.</p>
|
||||
</div>
|
||||
<div class="warning-card level-medium wobble-target">
|
||||
<span class="warning-level">Mittel</span>
|
||||
<span class="warning-level" data-de="Mittel" data-en="Medium">Mittel</span>
|
||||
<span class="warning-emoji">🥜</span>
|
||||
<h3>Erdnuss-Vorräte kritisch</h3>
|
||||
<p>Lagerbestand unter 2 Tonnen gefallen. Notfall-Lieferung aus Tansania unterwegs. ETA: 3 Stunden.</p>
|
||||
<h3 data-de="Erdnuss-Vorräte kritisch" data-en="Peanut Supplies Critical">Erdnuss-Vorräte kritisch</h3>
|
||||
<p data-de="Lagerbestand unter 2 Tonnen gefallen. Notfall-Lieferung aus Tansania unterwegs. ETA: 3 Stunden." data-en="Stock dropped below 2 tonnes. Emergency delivery from Tanzania en route. ETA: 3 hours.">Lagerbestand unter 2 Tonnen gefallen. Notfall-Lieferung aus Tansania unterwegs. ETA: 3 Stunden.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SEISMOGRAPH -->
|
||||
<section class="seismo-section">
|
||||
<h2 class="section-title shake-target">Live-Seismograph</h2>
|
||||
<h2 class="section-title shake-target" data-de="Live-Seismograph" data-en="Live Seismograph">Live-Seismograph</h2>
|
||||
<div class="seismograph">
|
||||
<svg id="seismo-svg" width="100%" height="100" viewBox="0 0 700 100" preserveAspectRatio="none">
|
||||
<path id="seismo-path" class="seismo-line" d="M0,50 L700,50"/>
|
||||
@@ -734,49 +734,49 @@
|
||||
|
||||
<!-- HERD METER -->
|
||||
<section class="meter-section">
|
||||
<h2 class="section-title shake-target">Herdenmesser</h2>
|
||||
<h2 class="section-title shake-target" data-de="Herdenmesser" data-en="Herd Meter">Herdenmesser</h2>
|
||||
<div class="meter-container">
|
||||
<div class="meter-label">
|
||||
<span>Ruhig</span>
|
||||
<span data-de="Ruhig" data-en="Calm">Ruhig</span>
|
||||
<span>Stampede</span>
|
||||
</div>
|
||||
<div class="meter-bar shake-target">
|
||||
<div class="meter-fill" id="meter-fill"></div>
|
||||
</div>
|
||||
<div class="meter-value" id="meter-value">
|
||||
23 <span>Elefanten</span>
|
||||
23 <span data-de="Elefanten" data-en="Elephants">Elefanten</span>
|
||||
</div>
|
||||
<p class="meter-subtitle">Aktuelle Herdenstärke im Einzugsgebiet</p>
|
||||
<p class="meter-subtitle" data-de="Aktuelle Herdenstärke im Einzugsgebiet" data-en="Current herd strength in the catchment area">Aktuelle Herdenstärke im Einzugsgebiet</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FACTS -->
|
||||
<section class="facts-section">
|
||||
<h2 class="section-title wobble-target">Unnützes Elefantenwissen</h2>
|
||||
<h2 class="section-title wobble-target" data-de="Unnützes Elefantenwissen" data-en="Useless Elephant Facts">Unnützes Elefantenwissen</h2>
|
||||
<div class="facts-grid">
|
||||
<div class="fact-card shake-target">
|
||||
<div class="fact-icon">🦶</div>
|
||||
<div class="fact-number">6.000</div>
|
||||
<div class="fact-unit">kg</div>
|
||||
<p class="fact-desc">wiegt ein ausgewachsener Bulle. Dein Boden so: 💀</p>
|
||||
<p class="fact-desc" data-de="wiegt ein ausgewachsener Bulle. Dein Boden so: 💀" data-en="is what a full-grown bull weighs. Your floor: 💀">wiegt ein ausgewachsener Bulle. Dein Boden so: 💀</p>
|
||||
</div>
|
||||
<div class="fact-card wobble-target">
|
||||
<div class="fact-icon">👂</div>
|
||||
<div class="fact-number">32</div>
|
||||
<div class="fact-unit">km</div>
|
||||
<p class="fact-desc">weit hören Elefanten Infraschall. Du hörst sie erst bei 32 Metern.</p>
|
||||
<p class="fact-desc" data-de="weit hören Elefanten Infraschall. Du hörst sie erst bei 32 Metern." data-en="is how far elephants hear infrasound. You hear them at 32 metres.">weit hören Elefanten Infraschall. Du hörst sie erst bei 32 Metern.</p>
|
||||
</div>
|
||||
<div class="fact-card shake-target">
|
||||
<div class="fact-icon">💨</div>
|
||||
<div class="fact-number">40</div>
|
||||
<div class="fact-unit">km/h</div>
|
||||
<p class="fact-desc">Spitze bei Stampede. Du schaffst 15. Viel Glück.</p>
|
||||
<p class="fact-desc" data-de="Spitze bei Stampede. Du schaffst 15. Viel Glück." data-en="top speed in stampede. You manage 15. Good luck.">Spitze bei Stampede. Du schaffst 15. Viel Glück.</p>
|
||||
</div>
|
||||
<div class="fact-card wobble-target">
|
||||
<div class="fact-icon">🧠</div>
|
||||
<div class="fact-number">5</div>
|
||||
<div class="fact-unit">kg</div>
|
||||
<p class="fact-desc">Gehirn. Größtes aller Landtiere. Vergisst nie. Nie.</p>
|
||||
<p class="fact-desc" data-de="Gehirn. Größtes aller Landtiere. Vergisst nie. Nie." data-en="Brain. Largest of all land animals. Never forgets. Never.">Gehirn. Größtes aller Landtiere. Vergisst nie. Nie.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -791,21 +791,25 @@
|
||||
<div class="footprint">🐾</div>
|
||||
<div class="footprint">🐾</div>
|
||||
<div class="footprint">🐾</div>
|
||||
<p class="footprints-text">Die Spuren führen immer hierher.</p>
|
||||
<p class="footprints-text" data-de="Die Spuren führen immer hierher." data-en="The tracks always lead here.">Die Spuren führen immer hierher.</p>
|
||||
</section>
|
||||
|
||||
<!-- RUMBLE COUNTER -->
|
||||
<section class="counter-section">
|
||||
<div class="section-title">Erschütterungen seit Seitenaufruf</div>
|
||||
<div class="section-title" data-de="Erschütterungen seit Seitenaufruf" data-en="Tremors since page load">Erschütterungen seit Seitenaufruf</div>
|
||||
<div class="rumble-counter shake-heavy-target" id="rumble-count">0</div>
|
||||
<p class="rumble-counter-label">und es werden mehr.</p>
|
||||
<p class="rumble-counter-label" data-de="und es werden mehr." data-en="and there will be more.">und es werden mehr.</p>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p class="footer-text shake-target">Hier war mal eine Webseite. Dann kam die Horde.</p>
|
||||
<p class="footer-text shake-target" data-de="Hier war mal eine Webseite. Dann kam die Horde." data-en="There used to be a website here. Then came the horde.">Hier war mal eine Webseite. Dann kam die Horde.</p>
|
||||
<div class="footer-elephants wobble-target">🐘 🐘 🐘 🐘 🐘</div>
|
||||
<p class="footer-copy">© 2026 ElefantenHor.de — Alle Rechte zertrampelt.</p>
|
||||
<p class="footer-copy" data-de="© 2026 ElefantenHor.de — Alle Rechte zertrampelt." data-en="© 2026 ElefantenHor.de — All rights trampled.">© 2026 ElefantenHor.de — Alle Rechte zertrampelt.</p>
|
||||
<div style="text-align:center;margin-top:16px;">
|
||||
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--dust-light,#E8D5A3);color:var(--dust-light,#E8D5A3);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.7;">EN</button>
|
||||
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--dust-light,#E8D5A3);font-size:0.6rem;opacity:0.4;">Maschinell übersetzt</small>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -895,5 +899,6 @@
|
||||
});
|
||||
}, 800);
|
||||
</script>
|
||||
<script src="/shared/i18n.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user