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

@@ -175,63 +175,63 @@
<nav>
<div class="container">
<div class="logo"><span class="star"></span> <span class="ki">KI</span>LITÄR</div>
<div class="nav-links"><a href="#operationen">Operationen</a></div>
<div class="nav-links"><a href="#operationen" data-de="Operationen" data-en="Operations">Operationen</a></div>
</div>
</nav>
<section class="hero">
<div class="container">
<div class="classification">★ Geheim ★ Nur für KI-Personal</div>
<div class="classification" data-de="★ Geheim ★ Nur für KI-Personal" data-en="★ Secret ★ Authorised AI Personnel Only">★ Geheim ★ Nur für KI-Personal</div>
<h1><span class="ki">KI</span>litär</h1>
<p>KI im Einsatz. Strategisch. Taktisch. Satirisch.</p>
<p data-de="KI im Einsatz. Strategisch. Taktisch. Satirisch." data-en="AI deployed. Strategic. Tactical. Satirical.">KI im Einsatz. Strategisch. Taktisch. Satirisch.</p>
<div class="status-bar">
<div class="status-item"><span class="status-dot green"></span> Prompt-Kanone geladen</div>
<div class="status-item"><span class="status-dot amber"></span> Halluzination möglich</div>
<div class="status-item"><span class="status-dot red"></span> Budget: KRITISCH</div>
<div class="status-item"><span class="status-dot green"></span> <span data-de="Prompt-Kanone geladen" data-en="Prompt cannon loaded">Prompt-Kanone geladen</span></div>
<div class="status-item"><span class="status-dot amber"></span> <span data-de="Halluzination möglich" data-en="Hallucination possible">Halluzination möglich</span></div>
<div class="status-item"><span class="status-dot red"></span> <span data-de="Budget: KRITISCH" data-en="Budget: CRITICAL">Budget: KRITISCH</span></div>
</div>
</div>
</section>
<section class="section" id="operationen">
<div class="container">
<div class="section-label">★ Aktive Operationen</div>
<h2><span class="ki">KI</span>-Einsatzkommandos</h2>
<div class="section-label" data-de="★ Aktive Operationen" data-en="★ Active Operations">★ Aktive Operationen</div>
<h2 data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;-Einsatzkommandos" data-en="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; Task Forces"><span class="ki">KI</span>-Einsatzkommandos</h2>
<div class="ops-grid">
<div class="ops-card">
<div class="ops-code">OP-KI-001</div>
<h3>Operation Prompt Storm</h3>
<p>Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%.</p>
<div class="ops-status">★ Status: Aktiv</div>
<h3 data-de="Operation Prompt Storm" data-en="Operation Prompt Storm">Operation Prompt Storm</h3>
<p data-de="Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%." data-en="Strategic deployment of ChatGPT to create memos nobody reads. Hit rate: 100%. Relevance: 0%.">Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%.</p>
<div class="ops-status" data-de="★ Status: Aktiv" data-en="★ Status: Active">★ Status: Aktiv</div>
</div>
<div class="ops-card">
<div class="ops-code">OP-KI-002</div>
<h3>Operation Datenschutz</h3>
<p>Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups.</p>
<div class="ops-status">★ Status: Gescheitert</div>
<h3 data-de="Operation Datenschutz" data-en="Operation Data Protection">Operation Datenschutz</h3>
<p data-de="Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups." data-en="Defence line against cookie banners. No survivors yet. The enemy has infinite pop-ups.">Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups.</p>
<div class="ops-status" data-de="★ Status: Gescheitert" data-en="★ Status: Failed">★ Status: Gescheitert</div>
</div>
<div class="ops-card">
<div class="ops-code">OP-KI-003</div>
<h3>Operation Autopilot</h3>
<p>Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt.</p>
<div class="ops-status">★ Status: Testphase</div>
<h3 data-de="Operation Autopilot" data-en="Operation Autopilot">Operation Autopilot</h3>
<p data-de="Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt." data-en="Autonomous AI vehicles in urban deployment. Has only collided with traffic lights so far. Progress.">Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt.</p>
<div class="ops-status" data-de="★ Status: Testphase" data-en="★ Status: Testing Phase">★ Status: Testphase</div>
</div>
<div class="ops-card">
<div class="ops-code">OP-KI-004</div>
<h3>Operation Deep Fake</h3>
<p>Generierung von Präsentationsfolien die aussehen als hätte ein Mensch sie gemacht. Niemand merkt den Unterschied. Weil alle Folien gleich aussehen.</p>
<div class="ops-status">★ Status: Erfolgreich</div>
<h3 data-de="Operation Deep Fake" data-en="Operation Deep Fake">Operation Deep Fake</h3>
<p data-de="Generierung von Präsentationsfolien die aussehen als hätte ein Mensch sie gemacht. Niemand merkt den Unterschied. Weil alle Folien gleich aussehen." data-en="Generation of presentation slides that look like a human made them. Nobody notices the difference. Because all slides look the same.">Generierung von Präsentationsfolien die aussehen als hätte ein Mensch sie gemacht. Niemand merkt den Unterschied. Weil alle Folien gleich aussehen.</p>
<div class="ops-status" data-de="★ Status: Erfolgreich" data-en="★ Status: Successful">★ Status: Erfolgreich</div>
</div>
<div class="ops-card">
<div class="ops-code">OP-KI-005</div>
<h3>Operation Kaffeemaschine</h3>
<p>KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt.</p>
<div class="ops-status">★ Status: Koffein-Defizit</div>
<h3 data-de="Operation Kaffeemaschine" data-en="Operation Coffee Machine">Operation Kaffeemaschine</h3>
<p data-de="KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt." data-en="AI-assisted coffee logistics. Algorithm calculates optimal timing. Result: coffee is always cold.">KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt.</p>
<div class="ops-status" data-de="★ Status: Koffein-Defizit" data-en="★ Status: Caffeine Deficit">★ Status: Koffein-Defizit</div>
</div>
<div class="ops-card">
<div class="ops-code">OP-KI-006</div>
<h3>Operation Floskelalarm</h3>
<p>Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 "Game-Changer" in einer Stunde.</p>
<div class="ops-status">★ Status: Überlastet</div>
<h3 data-de="Operation Floskelalarm" data-en="Operation Buzzword Alert">Operation Floskelalarm</h3>
<p data-de="Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 &quot;Game-Changer&quot; in einer Stunde." data-en="Detection and neutralisation of AI buzzwords in meetings. Record: 47 &quot;game-changers&quot; in one hour.">Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 "Game-Changer" in einer Stunde.</p>
<div class="ops-status" data-de="★ Status: Überlastet" data-en="★ Status: Overloaded">★ Status: Überlastet</div>
</div>
</div>
</div>
@@ -239,18 +239,18 @@
<section class="terminal-section">
<div class="container">
<div class="section-label" style="text-align: center;">★ Kommandozentrale</div>
<div class="section-label" style="text-align: center;" data-de="★ Kommandozentrale" data-en="★ Command Centre">★ Kommandozentrale</div>
<div class="terminal">
<span class="prompt">kilitaer@hq:~$</span> ki deploy --strategie<br>
<span class="output">[INFO] Strategie wird generiert...</span><br>
<span class="output">[INFO] Schritt 1: PowerPoint erstellen</span><br>
<span class="output">[INFO] Schritt 2: "Synergien" erwähnen</span><br>
<span class="output">[INFO] Schritt 3: Budget verdreifachen</span><br>
<span class="error">[FEHLER] Budget nicht gefunden</span><br>
<span class="error">[FEHLER] Strategie nicht gefunden</span><br>
<span class="error">[FEHLER] Sinn nicht gefunden</span><br>
<span class="output" data-de="[INFO] Strategie wird generiert..." data-en="[INFO] Generating strategy...">[INFO] Strategie wird generiert...</span><br>
<span class="output" data-de="[INFO] Schritt 1: PowerPoint erstellen" data-en="[INFO] Step 1: Create PowerPoint">[INFO] Schritt 1: PowerPoint erstellen</span><br>
<span class="output" data-de="[INFO] Schritt 2: &quot;Synergien&quot; erwähnen" data-en="[INFO] Step 2: Mention &quot;Synergies&quot;">[INFO] Schritt 2: "Synergien" erwähnen</span><br>
<span class="output" data-de="[INFO] Schritt 3: Budget verdreifachen" data-en="[INFO] Step 3: Triple the budget">[INFO] Schritt 3: Budget verdreifachen</span><br>
<span class="error" data-de="[FEHLER] Budget nicht gefunden" data-en="[ERROR] Budget not found">[FEHLER] Budget nicht gefunden</span><br>
<span class="error" data-de="[FEHLER] Strategie nicht gefunden" data-en="[ERROR] Strategy not found">[FEHLER] Strategie nicht gefunden</span><br>
<span class="error" data-de="[FEHLER] Sinn nicht gefunden" data-en="[ERROR] Meaning not found">[FEHLER] Sinn nicht gefunden</span><br>
<span class="prompt">kilitaer@hq:~$</span> ki --help<br>
<span class="output">[INFO] Hilfe? Im KIlitär? Meldung machen!</span><br>
<span class="output" data-de="[INFO] Hilfe? Im KIlitär? Meldung machen!" data-en="[INFO] Help? In KIlitär? Report to duty!">[INFO] Hilfe? Im KIlitär? Meldung machen!</span><br>
<span class="prompt">kilitaer@hq:~$</span> <span class="cursor"></span>
</div>
</div>
@@ -258,28 +258,28 @@
<section class="ranks-section">
<div class="container" style="text-align: center;">
<div class="section-label">★ Dienstgrade</div>
<h2 style="font-family: 'Share Tech Mono', monospace; text-transform: uppercase; margin-bottom: 40px;"><span class="ki" style="color: var(--olive-light);">KI</span>-Ränge</h2>
<div class="section-label" data-de="★ Dienstgrade" data-en="★ Ranks">★ Dienstgrade</div>
<h2 style="font-family: 'Share Tech Mono', monospace; text-transform: uppercase; margin-bottom: 40px;" data-de="&lt;span class=&quot;ki&quot; style=&quot;color: var(--olive-light);&quot;&gt;KI&lt;/span&gt;-Ränge" data-en="&lt;span class=&quot;ki&quot; style=&quot;color: var(--olive-light);&quot;&gt;KI&lt;/span&gt; Ranks"><span class="ki" style="color: var(--olive-light);">KI</span>-Ränge</h2>
<div class="rank-grid">
<div class="rank-card">
<div class="rank-star"></div>
<h4>Prompt-Rekrut</h4>
<p>Tippt "Hilfe" in ChatGPT</p>
<h4 data-de="Prompt-Rekrut" data-en="Prompt Recruit">Prompt-Rekrut</h4>
<p data-de="Tippt &quot;Hilfe&quot; in ChatGPT" data-en="Types &quot;Help&quot; into ChatGPT">Tippt "Hilfe" in ChatGPT</p>
</div>
<div class="rank-card">
<div class="rank-star">★★</div>
<h4>Daten-Gefreiter</h4>
<p>Kann CSV von Excel unterscheiden</p>
<h4 data-de="Daten-Gefreiter" data-en="Data Private">Daten-Gefreiter</h4>
<p data-de="Kann CSV von Excel unterscheiden" data-en="Can tell CSV from Excel">Kann CSV von Excel unterscheiden</p>
</div>
<div class="rank-card">
<div class="rank-star">★★★</div>
<h4>Algorithmus-Offizier</h4>
<p>Hat mal "Machine Learning" gegoogelt</p>
<h4 data-de="Algorithmus-Offizier" data-en="Algorithm Officer">Algorithmus-Offizier</h4>
<p data-de="Hat mal &quot;Machine Learning&quot; gegoogelt" data-en="Has googled &quot;Machine Learning&quot; once">Hat mal "Machine Learning" gegoogelt</p>
</div>
<div class="rank-card">
<div class="rank-star">★★★★</div>
<h4>KI-General</h4>
<p>Sagt "neuronales Netz" im Meeting ohne zu zögern</p>
<h4 data-de="KI-General" data-en="AI General">KI-General</h4>
<p data-de="Sagt &quot;neuronales Netz&quot; im Meeting ohne zu zögern" data-en="Says &quot;neural network&quot; in meetings without hesitating">Sagt "neuronales Netz" im Meeting ohne zu zögern</p>
</div>
</div>
</div>
@@ -287,10 +287,14 @@
<footer>
<div class="container">
<p><span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★</p>
<p data-de="★ &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;litär — &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; im Einsatz. Strategisch. Taktisch. Sinnlos. ★" data-en="★ &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;litär — &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; deployed. Strategic. Tactical. Pointless. ★"><span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★</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>