m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: i18n annotations — data-de/data-en + toggle for all 54 custom sites

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

85
sites/kilofant.de/index.html
View File

@@ -566,21 +566,21 @@
<span class="elephant-icon">🐘</span>
<span class="ki">KI</span>lofant
</div>
<a href="#kontakt">Kontakt</a>
<a href="#kontakt" data-de="Kontakt" data-en="Contact">Kontakt</a>
</div>
</nav>
<section class="hero">
<div class="hero-elephant shake-heavy" id="hero-elephant" title="Klick mich!">🐘</div>
<h1 class="wobble-it"><span class="ki">KI</span>lofant</h1>
<p class="tagline shake-it">Groß denken. Größer machen.</p>
<p class="hero-desc">
<p class="tagline shake-it" data-de="Groß denken. Größer machen." data-en="Think big. Make bigger.">Groß denken. Größer machen.</p>
<p class="hero-desc" data-de="KI-Lösungen, die man nicht übersieht. Nicht überhört. Und ganz bestimmt nicht vergisst." data-en="AI solutions you can't overlook. Can't ignore. And definitely won't forget.">
KI-Lösungen, die man nicht übersieht. Nicht überhört.
Und ganz bestimmt nicht vergisst.
</p>
<div class="cta-group">
<a href="#kontakt" class="btn btn-primary shake-it">Herde kontaktieren</a>
<a href="#stampede" class="btn btn-ghost">Was wir stampfen</a>
<a href="#kontakt" class="btn btn-primary shake-it" data-de="Herde kontaktieren" data-en="Contact the herd">Herde kontaktieren</a>
<a href="#stampede" class="btn btn-ghost" data-de="Was wir stampfen" data-en="What we stomp">Was wir stampfen</a>
</div>
<div class="dust-zone">
@@ -616,7 +616,7 @@
<div class="philosophy">
<div class="container">
<p class="philosophy-text shake-it">
<p class="philosophy-text shake-it" data-de="Die meisten KI-Lösungen sind &lt;strong&gt;Mäuse&lt;/strong&gt;.&lt;br&gt;Klein, schnell, leicht zu übersehen.&lt;br&gt;Unsere sind &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lofanten — &lt;strong&gt;groß, klug&lt;br&gt;und sie vergessen nie&lt;/strong&gt;." data-en="Most AI solutions are &lt;strong&gt;mice&lt;/strong&gt;.&lt;br&gt;Small, fast, easy to overlook.&lt;br&gt;Ours are &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lofants — &lt;strong&gt;large, smart&lt;br&gt;and they never forget&lt;/strong&gt;.">
Die meisten KI-Lösungen sind <strong>Mäuse</strong>.<br>
Klein, schnell, leicht zu übersehen.<br>
Unsere sind <span class="ki">KI</span>lofanten — <strong>groß, klug<br>
@@ -627,9 +627,9 @@
<section id="stampede">
<div class="container">
<span class="section-badge">Was wir stampfen</span>
<h2 class="wobble-it">Elefantenstarke KI</h2>
<div class="section-desc">
<span class="section-badge" data-de="Was wir stampfen" data-en="What we stomp">Was wir stampfen</span>
<h2 class="wobble-it" data-de="Elefantenstarke KI" data-en="Elephant-strong AI">Elefantenstarke KI</h2>
<div class="section-desc" data-de="Sechs Tonnen pure KI-Power. Wir bringen die schweren Geschütze — und hinterlassen Eindruck, keine Verwüstung." data-en="Six tons of pure AI power. We bring the heavy artillery — and leave an impression, not a wasteland.">
Sechs Tonnen pure KI-Power. Wir bringen die schweren Geschütze —
und hinterlassen Eindruck, keine Verwüstung.
</div>
@@ -637,38 +637,38 @@
<div class="features-grid">
<div class="feature-card shake-it">
<span class="feature-emoji">🧠</span>
<h3>Elefantengedächtnis</h3>
<p>KI-Systeme die lernen, sich erinnern und immer schlauer werden. Wie ein Elefant — vergisst nie.</p>
<h3 data-de="Elefantengedächtnis" data-en="Elephant Memory">Elefantengedächtnis</h3>
<p data-de="KI-Systeme die lernen, sich erinnern und immer schlauer werden. Wie ein Elefant — vergisst nie." data-en="AI systems that learn, remember and keep getting smarter. Like an elephant — never forgets.">KI-Systeme die lernen, sich erinnern und immer schlauer werden. Wie ein Elefant — vergisst nie.</p>
</div>
<div class="feature-card wobble-it">
<span class="feature-emoji">🦶</span>
<h3>Stampede-Strategie</h3>
<p>Kraftvolle KI-Implementierung die Wirkung zeigt. Kein zaghaftes Tasten — sondern ein koordinierter Vorstoß.</p>
<h3 data-de="Stampede-Strategie" data-en="Stampede Strategy">Stampede-Strategie</h3>
<p data-de="Kraftvolle KI-Implementierung die Wirkung zeigt. Kein zaghaftes Tasten — sondern ein koordinierter Vorstoß." data-en="Powerful AI implementation that shows results. No tentative tiptoeing — a coordinated charge.">Kraftvolle KI-Implementierung die Wirkung zeigt. Kein zaghaftes Tasten — sondern ein koordinierter Vorstoß.</p>
</div>
<div class="feature-card shake-it">
<span class="feature-emoji">🌿</span>
<h3>Herdenwissen</h3>
<p>Die Herde weiß mehr als das Individuum. Wir vernetzen Ihre Daten zu kollektiver Intelligenz.</p>
<h3 data-de="Herdenwissen" data-en="Herd Knowledge">Herdenwissen</h3>
<p data-de="Die Herde weiß mehr als das Individuum. Wir vernetzen Ihre Daten zu kollektiver Intelligenz." data-en="The herd knows more than the individual. We connect your data into collective intelligence.">Die Herde weiß mehr als das Individuum. Wir vernetzen Ihre Daten zu kollektiver Intelligenz.</p>
</div>
<div class="feature-card wobble-it">
<span class="feature-emoji">🛡️</span>
<h3>Dickhäuter-Sicherheit</h3>
<p>Dicke Haut gegen Angriffe. Unsere KI-Lösungen sind robust, DSGVO-konform und standhaft.</p>
<h3 data-de="Dickhäuter-Sicherheit" data-en="Thick-skin Security">Dickhäuter-Sicherheit</h3>
<p data-de="Dicke Haut gegen Angriffe. Unsere KI-Lösungen sind robust, DSGVO-konform und standhaft." data-en="Thick skin against attacks. Our AI solutions are robust, GDPR-compliant and steadfast.">Dicke Haut gegen Angriffe. Unsere KI-Lösungen sind robust, DSGVO-konform und standhaft.</p>
</div>
<div class="feature-card shake-it">
<span class="feature-emoji">👶</span>
<h3>Kalb-Modus</h3>
<p>Jede große Lösung fängt klein an. Prototypen in Tagen, Skalierung wenn die Herde bereit ist.</p>
<h3 data-de="Kalb-Modus" data-en="Calf Mode">Kalb-Modus</h3>
<p data-de="Jede große Lösung fängt klein an. Prototypen in Tagen, Skalierung wenn die Herde bereit ist." data-en="Every big solution starts small. Prototypes in days, scaling when the herd is ready.">Jede große Lösung fängt klein an. Prototypen in Tagen, Skalierung wenn die Herde bereit ist.</p>
</div>
<div class="feature-card wobble-it">
<span class="feature-emoji">🎺</span>
<h3>Trompeten-Support</h3>
<p>Wenn es klemmt, hört man uns. Lauter Support, schnelle Reaktion, keine Warteschleifen.</p>
<h3 data-de="Trompeten-Support" data-en="Trumpet Support">Trompeten-Support</h3>
<p data-de="Wenn es klemmt, hört man uns. Lauter Support, schnelle Reaktion, keine Warteschleifen." data-en="When things get stuck, you'll hear us. Loud support, fast response, no hold music.">Wenn es klemmt, hört man uns. Lauter Support, schnelle Reaktion, keine Warteschleifen.</p>
</div>
</div>
</div>
@@ -676,32 +676,32 @@
<section class="facts-section">
<div class="container">
<span class="section-badge">Unnützes KIlofantenwissen</span>
<h2 class="shake-heavy">Zahlen die stampfen</h2>
<span class="section-badge" data-de="Unnützes KIlofantenwissen" data-en="Useless KIlofant facts">Unnützes KIlofantenwissen</span>
<h2 class="shake-heavy" data-de="Zahlen die stampfen" data-en="Numbers that stomp">Zahlen die stampfen</h2>
<div class="facts-grid">
<div class="fact-card wobble-it">
<div class="fact-emoji">⚖️</div>
<div class="fact-number">6.000</div>
<div class="fact-unit">kg Lösungskompetenz</div>
<div class="fact-desc">So schwer wie ein ausgewachsener Bulle. So gewichtig wie unsere Ergebnisse.</div>
<div class="fact-unit" data-de="kg Lösungskompetenz" data-en="kg solution competence">kg Lösungskompetenz</div>
<div class="fact-desc" data-de="So schwer wie ein ausgewachsener Bulle. So gewichtig wie unsere Ergebnisse." data-en="As heavy as a full-grown bull. As weighty as our results.">So schwer wie ein ausgewachsener Bulle. So gewichtig wie unsere Ergebnisse.</div>
</div>
<div class="fact-card shake-it">
<div class="fact-emoji">👂</div>
<div class="fact-number">32</div>
<div class="fact-unit">km Reichweite</div>
<div class="fact-desc">Elefanten hören Infraschall über 32 km. Wir hören Ihre Probleme noch weiter.</div>
<div class="fact-unit" data-de="km Reichweite" data-en="km range">km Reichweite</div>
<div class="fact-desc" data-de="Elefanten hören Infraschall über 32 km. Wir hören Ihre Probleme noch weiter." data-en="Elephants hear infrasound over 32 km. We hear your problems even further.">Elefanten hören Infraschall über 32 km. Wir hören Ihre Probleme noch weiter.</div>
</div>
<div class="fact-card wobble-it">
<div class="fact-emoji">🧠</div>
<div class="fact-number">5</div>
<div class="fact-unit">kg Gehirnmasse</div>
<div class="fact-desc">Größtes Gehirn aller Landtiere. Vergisst nie. Wir auch nicht.</div>
<div class="fact-unit" data-de="kg Gehirnmasse" data-en="kg brain mass">kg Gehirnmasse</div>
<div class="fact-desc" data-de="Größtes Gehirn aller Landtiere. Vergisst nie. Wir auch nicht." data-en="Largest brain of all land animals. Never forgets. Neither do we.">Größtes Gehirn aller Landtiere. Vergisst nie. Wir auch nicht.</div>
</div>
<div class="fact-card shake-it">
<div class="fact-emoji">💨</div>
<div class="fact-number">40</div>
<div class="fact-unit">km/h Stampede</div>
<div class="fact-desc">Sprint-Geschwindigkeit. Unsere Deployments sind schneller.</div>
<div class="fact-unit" data-de="km/h Stampede" data-en="km/h stampede">km/h Stampede</div>
<div class="fact-desc" data-de="Sprint-Geschwindigkeit. Unsere Deployments sind schneller." data-en="Sprint speed. Our deployments are faster.">Sprint-Geschwindigkeit. Unsere Deployments sind schneller.</div>
</div>
</div>
</div>
@@ -709,25 +709,25 @@
<section class="herd-section">
<div class="container">
<span class="section-badge">Die Herde</span>
<h2 class="wobble-it">Zusammen sind wir groß</h2>
<span class="section-badge" data-de="Die Herde" data-en="The Herd">Die Herde</span>
<h2 class="wobble-it" data-de="Zusammen sind wir groß" data-en="Together we are great">Zusammen sind wir groß</h2>
<div class="herd-parade shake-heavy" id="herd-parade">
🐘🐘🐘🐘🐘
</div>
<p class="herd-text shake-it">Die Herde wächst. Du auch?</p>
<p class="herd-text shake-it" data-de="Die Herde wächst. Du auch?" data-en="The herd is growing. Are you?">Die Herde wächst. Du auch?</p>
</div>
</section>
<div class="counter-section">
<div class="counter-value shake-heavy" id="counter">0</div>
<div class="counter-label">Stampeden seit Seitenaufruf</div>
<div class="counter-label" data-de="Stampeden seit Seitenaufruf" data-en="Stampedes since page load">Stampeden seit Seitenaufruf</div>
</div>
<section id="kontakt" class="cta-section">
<div class="container">
<span class="section-badge">Kontakt</span>
<h2 class="wobble-it">Die Herde rufen</h2>
<div class="section-desc" style="margin-left:auto; margin-right:auto;">
<span class="section-badge" data-de="Kontakt" data-en="Contact">Kontakt</span>
<h2 class="wobble-it" data-de="Die Herde rufen" data-en="Call the herd">Die Herde rufen</h2>
<div class="section-desc" style="margin-left:auto; margin-right:auto;" data-de="Lass den Boden beben. Schreib uns — wir stampfen los." data-en="Let the ground shake. Write to us — we'll start stomping.">
Lass den Boden beben. Schreib uns — wir stampfen los.
</div>
<a href="mailto:kilofant@msbls.de?subject=KIlofant%20—%20Anfrage" class="btn btn-primary shake-it">
@@ -738,8 +738,12 @@
<footer>
<div class="footer-elephants wobble-it">🐘 🐘 🐘 🐘 🐘</div>
<p class="footer-text shake-it">Hier war mal eine Webseite. Dann kam der KIlofant.</p>
<p class="footer-copy">&copy; 2026 KIlofant.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
<p class="footer-text shake-it" data-de="Hier war mal eine Webseite. Dann kam der KIlofant." data-en="There used to be a website here. Then came the KIlofant.">Hier war mal eine Webseite. Dann kam der KIlofant.</p>
<p class="footer-copy" data-de="© 2026 KIlofant.de — ein Projekt von &lt;a href=&quot;https://msbls.de&quot;&gt;msbls.de&lt;/a&gt;" data-en="© 2026 KIlofant.de — a project by &lt;a href=&quot;https://msbls.de&quot;&gt;msbls.de&lt;/a&gt;">&copy; 2026 KIlofant.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></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(--tusk,#F5E6C8);color:var(--tusk,#F5E6C8);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(--tusk,#F5E6C8);font-size:0.6rem;opacity:0.4;">Maschinell übersetzt</small>
</div>
</footer>
</div>
@@ -782,5 +786,6 @@
}, { threshold: 0.5 });
observer.observe(herdParade);
</script>
<script src="/shared/i18n.js"></script>
</body>
</html>