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
2026-04-01 13:19:40 +02:00
parent 846fc04444
commit 5c92a7b021
53 changed files with 1850 additions and 1475 deletions

View File

@@ -280,7 +280,7 @@
<section class="hero">
<div class="wrap">
<h1 id="hero-title"></h1>
<p class="subtitle" id="hero-sub">Umgeben von KIs. Trotzdem allein.</p>
<p class="subtitle" id="hero-sub" data-de="Umgeben von KIs. Trotzdem allein." data-en="Surrounded by AIs. Still alone.">Umgeben von KIs. Trotzdem allein.</p>
</div>
</section>
@@ -289,21 +289,33 @@
<section class="poem">
<div class="wrap">
<div class="strophe reveal">
<p>
<p data-de="Dein Posteingang wird von einer <span class=&quot;ai&quot;>KI</span> sortiert.<br>
Deine Antworten schreibt eine <span class=&quot;ai&quot;>KI</span>.<br>
Und trotzdem sitzt du <span class=&quot;alone&quot;>allein auf dem Sofa</span>." data-en="Your inbox is sorted by an <span class=&quot;ai&quot;>AI</span>.<br>
Your replies are written by an <span class=&quot;ai&quot;>AI</span>.<br>
And yet you're sitting <span class=&quot;alone&quot;>alone on the sofa</span>.">
Dein Posteingang wird von einer <span class="ai">KI</span> sortiert.<br>
Deine Antworten schreibt eine <span class="ai">KI</span>.<br>
Und trotzdem sitzt du <span class="alone">allein auf dem Sofa</span>.
</p>
</div>
<div class="strophe reveal">
<p>
<p data-de="Dein Kalender wird von einer <span class=&quot;ai&quot;>KI</span> geplant.<br>
Dein Essen von einer <span class=&quot;ai&quot;>KI</span> bestellt.<br>
Aber niemand fragt, <span class=&quot;alone&quot;>wie es dir geht</span>." data-en="Your calendar is planned by an <span class=&quot;ai&quot;>AI</span>.<br>
Your food is ordered by an <span class=&quot;ai&quot;>AI</span>.<br>
But nobody asks, <span class=&quot;alone&quot;>how you're doing</span>.">
Dein Kalender wird von einer <span class="ai">KI</span> geplant.<br>
Dein Essen von einer <span class="ai">KI</span> bestellt.<br>
Aber niemand fragt, <span class="alone">wie es dir geht</span>.
</p>
</div>
<div class="strophe reveal">
<p>
<p data-de="Dein Therapeut ist ein Chatbot.<br>
Dein bester Freund ein <span class=&quot;ai&quot;>Sprachmodell</span>.<br>
Dein Spiegel <span class=&quot;alone&quot;>zeigt nur dich</span>." data-en="Your therapist is a chatbot.<br>
Your best friend a <span class=&quot;ai&quot;>language model</span>.<br>
Your mirror <span class=&quot;alone&quot;>shows only you</span>.">
Dein Therapeut ist ein Chatbot.<br>
Dein bester Freund ein <span class="ai">Sprachmodell</span>.<br>
Dein Spiegel <span class="alone">zeigt nur dich</span>.
@@ -318,23 +330,23 @@
<div class="wrap">
<div class="litany-item reveal">
<p>Alexa sagt guten Morgen. <span class="dim">Dein Nachbar nicht.</span></p>
<p data-de="Alexa sagt guten Morgen. <span class=&quot;dim&quot;>Dein Nachbar nicht.</span>" data-en="Alexa says good morning. <span class=&quot;dim&quot;>Your neighbor doesn't.</span>">Alexa sagt guten Morgen. <span class="dim">Dein Nachbar nicht.</span></p>
</div>
<div class="litany-item reveal">
<p>Die <span class="ai">KI</span> kennt deine Lieblingsmusik. <span class="dim">Dein Bruder nicht mehr.</span></p>
<p data-de="Die <span class=&quot;ai&quot;>KI</span> kennt deine Lieblingsmusik. <span class=&quot;dim&quot;>Dein Bruder nicht mehr.</span>" data-en="The <span class=&quot;ai&quot;>AI</span> knows your favorite music. <span class=&quot;dim&quot;>Your brother doesn't anymore.</span>">Die <span class="ai">KI</span> kennt deine Lieblingsmusik. <span class="dim">Dein Bruder nicht mehr.</span></p>
</div>
<div class="litany-item reveal">
<p>Du hast 2.000 Kontakte. <span class="dim">Und niemanden zum Anrufen.</span></p>
<p data-de="Du hast 2.000 Kontakte. <span class=&quot;dim&quot;>Und niemanden zum Anrufen.</span>" data-en="You have 2,000 contacts. <span class=&quot;dim&quot;>And no one to call.</span>">Du hast 2.000 Kontakte. <span class="dim">Und niemanden zum Anrufen.</span></p>
</div>
<div class="litany-item reveal">
<p>Der Algorithmus zeigt dir Freundschaft. <span class="dim">Aber nur als Werbung.</span></p>
<p data-de="Der Algorithmus zeigt dir Freundschaft. <span class=&quot;dim&quot;>Aber nur als Werbung.</span>" data-en="The algorithm shows you friendship. <span class=&quot;dim&quot;>But only as an ad.</span>">Der Algorithmus zeigt dir Freundschaft. <span class="dim">Aber nur als Werbung.</span></p>
</div>
<div class="litany-item reveal">
<p>Dein Smart Home ist warm. <span class="dim">Dein Leben ist kalt.</span></p>
<p data-de="Dein Smart Home ist warm. <span class=&quot;dim&quot;>Dein Leben ist kalt.</span>" data-en="Your smart home is warm. <span class=&quot;dim&quot;>Your life is cold.</span>">Dein Smart Home ist warm. <span class="dim">Dein Leben ist kalt.</span></p>
</div>
</div>
@@ -344,7 +356,9 @@
<section class="sofa reveal">
<div class="wrap">
<p>
<p data-de="Die Zukunft hat dir alles automatisiert.<br>
Nur das <span class=&quot;alone&quot;>Alleinsein</span> nicht." data-en="The future has automated everything for you.<br>
Except the <span class=&quot;alone&quot;>loneliness</span>.">
Die Zukunft hat dir alles automatisiert.<br>
Nur das <span class="alone">Alleinsein</span> nicht.
</p>
@@ -355,13 +369,17 @@
<section class="silence">
<div class="wrap">
<p class="reveal">Kein Kontakt. Kein Impressum. Keine KI.</p>
<p class="reveal" data-de="Kein Kontakt. Kein Impressum. Keine KI." data-en="No contact. No imprint. No AI.">Kein Kontakt. Kein Impressum. Keine KI.</p>
</div>
</section>
<footer>
<div class="wrap">
<p>allainallain.de &mdash; 2026</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(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</div>
</footer>
@@ -415,5 +433,6 @@
})();
</script>
<script src="/shared/i18n.js"></script>
</body>
</html>