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

@@ -172,7 +172,7 @@
<nav>
<div class="container">
<div class="logo"><span class="bird">🐦</span> <span class="ki">KI</span>libri</div>
<a href="#features">Entdecken</a>
<a href="#features" data-de="Entdecken" data-en="Discover">Entdecken</a>
</div>
</nav>
@@ -180,45 +180,45 @@
<div class="container">
<span class="hero-bird">🐦</span>
<h1><span class="ki">KI</span>libri</h1>
<p>Die kleinste KI die du je gesehen hast. Klein wie ein Kolibri. Schnell wie ein Kolibri. Bunt wie ein Kolibri. Nur ohne Flügel.</p>
<a href="#features" class="hero-cta">Mikro-KI entdecken</a>
<p data-de="Die kleinste KI die du je gesehen hast. Klein wie ein Kolibri. Schnell wie ein Kolibri. Bunt wie ein Kolibri. Nur ohne Flügel." data-en="The smallest AI you've ever seen. Small like a hummingbird. Fast like a hummingbird. Colourful like a hummingbird. Just without wings.">Die kleinste KI die du je gesehen hast. Klein wie ein Kolibri. Schnell wie ein Kolibri. Bunt wie ein Kolibri. Nur ohne Flügel.</p>
<a href="#features" class="hero-cta" data-de="Mikro-KI entdecken" data-en="Discover micro-AI">Mikro-KI entdecken</a>
</div>
</section>
<section class="section" id="features">
<div class="container">
<div class="section-label">Smart. Klein. Bunt.</div>
<h2>Was <span class="ki">KI</span>libri kann</h2>
<div class="section-label" data-de="Smart. Klein. Bunt." data-en="Smart. Small. Colourful.">Smart. Klein. Bunt.</div>
<h2 data-de="Was &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri kann" data-en="What &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri can do">Was <span class="ki">KI</span>libri kann</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon teal">💡</div>
<h3>Licht-Flüsterer</h3>
<p>Dimmt das Licht bevor du es merkst. Weil KIlibri schon weiß, dass du müde bist. Du weißt es nur noch nicht.</p>
<h3 data-de="Licht-Flüsterer" data-en="Light Whisperer">Licht-Flüsterer</h3>
<p data-de="Dimmt das Licht bevor du es merkst. Weil KIlibri schon weiß, dass du müde bist. Du weißt es nur noch nicht." data-en="Dims the light before you notice. Because KIlibri already knows you're tired. You just don't know it yet.">Dimmt das Licht bevor du es merkst. Weil KIlibri schon weiß, dass du müde bist. Du weißt es nur noch nicht.</p>
</div>
<div class="feature-card">
<div class="feature-icon orange">🌡️</div>
<h3>Klima-Kolibri</h3>
<p>Regelt die Heizung. Auf 0,01 Grad genau. Niemand merkt den Unterschied. Aber KIlibri ist stolz.</p>
<h3 data-de="Klima-Kolibri" data-en="Climate Hummingbird">Klima-Kolibri</h3>
<p data-de="Regelt die Heizung. Auf 0,01 Grad genau. Niemand merkt den Unterschied. Aber KIlibri ist stolz." data-en="Controls the heating. To 0.01 degrees. Nobody notices the difference. But KIlibri is proud.">Regelt die Heizung. Auf 0,01 Grad genau. Niemand merkt den Unterschied. Aber KIlibri ist stolz.</p>
</div>
<div class="feature-card">
<div class="feature-icon pink">🎵</div>
<h3>Nest-DJ</h3>
<p>Spielt Musik passend zur Stimmung. Erkennt 47 verschiedene Formen von "keine Lust". Für jede den passenden Song.</p>
<h3 data-de="Nest-DJ" data-en="Nest DJ">Nest-DJ</h3>
<p data-de="Spielt Musik passend zur Stimmung. Erkennt 47 verschiedene Formen von &quot;keine Lust&quot;. Für jede den passenden Song." data-en="Plays music to match the mood. Recognises 47 different forms of &quot;not feeling it&quot;. A matching song for each.">Spielt Musik passend zur Stimmung. Erkennt 47 verschiedene Formen von "keine Lust". Für jede den passenden Song.</p>
</div>
<div class="feature-card">
<div class="feature-icon sky">🔒</div>
<h3>Tür-Wächter</h3>
<p>Erkennt wer vor der Tür steht. Öffnet nur für Freunde. Und den Lieferdienst. Prioritäten.</p>
<h3 data-de="Tür-Wächter" data-en="Door Guardian">Tür-Wächter</h3>
<p data-de="Erkennt wer vor der Tür steht. Öffnet nur für Freunde. Und den Lieferdienst. Prioritäten." data-en="Recognises who's at the door. Opens only for friends. And the delivery service. Priorities.">Erkennt wer vor der Tür steht. Öffnet nur für Freunde. Und den Lieferdienst. Prioritäten.</p>
</div>
<div class="feature-card">
<div class="feature-icon lime">🌱</div>
<h3>Pflanzen-Pfleger</h3>
<p>Gießt deine Pflanzen automatisch. Hat bisher nur 3 ertränkt. Lernkurve. Die vierte lebt noch.</p>
<h3 data-de="Pflanzen-Pfleger" data-en="Plant Carer">Pflanzen-Pfleger</h3>
<p data-de="Gießt deine Pflanzen automatisch. Hat bisher nur 3 ertränkt. Lernkurve. Die vierte lebt noch." data-en="Waters your plants automatically. Has only drowned 3 so far. Learning curve. The fourth is still alive.">Gießt deine Pflanzen automatisch. Hat bisher nur 3 ertränkt. Lernkurve. Die vierte lebt noch.</p>
</div>
<div class="feature-card">
<div class="feature-icon warm"></div>
<h3>Kaffee-Prophet</h3>
<p>Startet die Kaffeemaschine 4 Minuten bevor dein Wecker klingelt. Wahre KI versteht: erst Kaffee, dann Mensch.</p>
<h3 data-de="Kaffee-Prophet" data-en="Coffee Prophet">Kaffee-Prophet</h3>
<p data-de="Startet die Kaffeemaschine 4 Minuten bevor dein Wecker klingelt. Wahre KI versteht: erst Kaffee, dann Mensch." data-en="Starts the coffee machine 4 minutes before your alarm. True AI understands: coffee first, then human.">Startet die Kaffeemaschine 4 Minuten bevor dein Wecker klingelt. Wahre KI versteht: erst Kaffee, dann Mensch.</p>
</div>
</div>
</div>
@@ -226,28 +226,28 @@
<section class="specs-section">
<div class="container">
<div class="section-label" style="text-align: center;">Technische Daten</div>
<h2 style="text-align: center; margin-bottom: 40px;"><span class="ki" style="color: var(--teal);">KI</span>libri in Zahlen</h2>
<div class="section-label" style="text-align: center;" data-de="Technische Daten" data-en="Technical Specs">Technische Daten</div>
<h2 style="text-align: center; margin-bottom: 40px;" data-de="&lt;span class=&quot;ki&quot; style=&quot;color: var(--teal);&quot;&gt;KI&lt;/span&gt;libri in Zahlen" data-en="&lt;span class=&quot;ki&quot; style=&quot;color: var(--teal);&quot;&gt;KI&lt;/span&gt;libri by the numbers"><span class="ki" style="color: var(--teal);">KI</span>libri in Zahlen</h2>
<div class="specs-grid">
<div class="spec-item">
<div class="spec-value">3</div>
<div class="spec-unit">Gramm</div>
<div class="spec-label">Gewicht (wie ein Kolibri)</div>
<div class="spec-label" data-de="Gewicht (wie ein Kolibri)" data-en="Weight (like a hummingbird)">Gewicht (wie ein Kolibri)</div>
</div>
<div class="spec-item">
<div class="spec-value">80</div>
<div class="spec-unit">Flügelschläge/s</div>
<div class="spec-label">Rechenleistung</div>
<div class="spec-unit" data-de="Flügelschläge/s" data-en="wingbeats/s">Flügelschläge/s</div>
<div class="spec-label" data-de="Rechenleistung" data-en="Processing power">Rechenleistung</div>
</div>
<div class="spec-item">
<div class="spec-value"></div>
<div class="spec-unit">Blumen</div>
<div class="spec-label">Datenpunkte besucht</div>
<div class="spec-unit" data-de="Blumen" data-en="Flowers">Blumen</div>
<div class="spec-label" data-de="Datenpunkte besucht" data-en="Data points visited">Datenpunkte besucht</div>
</div>
<div class="spec-item">
<div class="spec-value">1</div>
<div class="spec-unit">Zuhause</div>
<div class="spec-label">Optimales Habitat</div>
<div class="spec-unit" data-de="Zuhause" data-en="Home">Zuhause</div>
<div class="spec-label" data-de="Optimales Habitat" data-en="Optimal habitat">Optimales Habitat</div>
</div>
</div>
</div>
@@ -256,20 +256,24 @@
<section class="cta-section">
<div class="container">
<div class="cta-box">
<h3>Hol dir deinen <span class="ki">KI</span>libri</h3>
<p>Die kleinste, schnellste, bunteste KI für dein Zuhause. Passt in jede Ecke. Macht jede Ecke smarter.</p>
<a href="#" class="hero-cta" style="display: inline-block; padding: 14px 36px; background: var(--teal); color: #fff; font-weight: 700; border-radius: 100px; text-decoration: none;">Jetzt vorbestellen*</a>
<p class="note">* Existiert nicht wirklich. Wie die meisten Smart-Home-Versprechen.</p>
<h3 data-de="Hol dir deinen &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri" data-en="Get your &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri">Hol dir deinen <span class="ki">KI</span>libri</h3>
<p data-de="Die kleinste, schnellste, bunteste KI für dein Zuhause. Passt in jede Ecke. Macht jede Ecke smarter." data-en="The smallest, fastest, most colourful AI for your home. Fits in every corner. Makes every corner smarter.">Die kleinste, schnellste, bunteste KI für dein Zuhause. Passt in jede Ecke. Macht jede Ecke smarter.</p>
<a href="#" class="hero-cta" style="display: inline-block; padding: 14px 36px; background: var(--teal); color: #fff; font-weight: 700; border-radius: 100px; text-decoration: none;" data-de="Jetzt vorbestellen*" data-en="Pre-order now*">Jetzt vorbestellen*</a>
<p class="note" data-de="* Existiert nicht wirklich. Wie die meisten Smart-Home-Versprechen." data-en="* Doesn't really exist. Like most smart home promises.">* Existiert nicht wirklich. Wie die meisten Smart-Home-Versprechen.</p>
</div>
</div>
</section>
<footer>
<div class="container">
<p>🐦 <span class="ki">KI</span>libri — Klein, schnell, bunt. Die <span class="ki">KI</span> für dein Nest.</p>
<p data-de="🐦 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri — Klein, schnell, bunt. Die &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; für dein Nest." data-en="🐦 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri — Small, fast, colourful. The &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; for your nest.">🐦 <span class="ki">KI</span>libri — Klein, schnell, bunt. Die <span class="ki">KI</span> für dein Nest.</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>
<script src="/shared/impressum.js"></script>
<script src="/shared/i18n.js"></script>
</body>
</html>