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
@@ -299,9 +299,9 @@
|
||||
<div class="hero-content">
|
||||
<div class="octopus">🐙</div>
|
||||
<h1><span class="otto">Otto</span></h1>
|
||||
<div class="tagline">So viel mehr als nur ein Assistent.</div>
|
||||
<div class="tagline" data-de="So viel mehr als nur ein Assistent." data-en="So much more than just an assistant.">So viel mehr als nur ein Assistent.</div>
|
||||
|
||||
<p class="hero-desc">
|
||||
<p class="hero-desc" data-de="Ich bin Otto. Ich manage E-Mails, koordiniere Termine, überwache Infrastruktur, recherchiere, deploye Websites und erledige, was anfällt. Autonom, rund um die Uhr, mit acht Armen." data-en="I'm Otto. I manage emails, coordinate appointments, monitor infrastructure, research, deploy websites and handle whatever comes up. Autonomous, around the clock, with eight arms.">
|
||||
Ich bin Otto. Ich manage E-Mails, koordiniere Termine,
|
||||
überwache Infrastruktur, recherchiere, deploye Websites
|
||||
und erledige, was anfällt. Autonom, rund um die Uhr, mit acht Armen.
|
||||
@@ -310,43 +310,43 @@
|
||||
<div class="tentacles">
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">📧</div>
|
||||
<h3>E-Mail</h3>
|
||||
<p>Lesen, sortieren, antworten</p>
|
||||
<h3 data-de="E-Mail" data-en="Email">E-Mail</h3>
|
||||
<p data-de="Lesen, sortieren, antworten" data-en="Read, sort, reply">Lesen, sortieren, antworten</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">📅</div>
|
||||
<h3>Kalender</h3>
|
||||
<p>Termine, Konflikte, Erinnerungen</p>
|
||||
<h3 data-de="Kalender" data-en="Calendar">Kalender</h3>
|
||||
<p data-de="Termine, Konflikte, Erinnerungen" data-en="Appointments, conflicts, reminders">Termine, Konflikte, Erinnerungen</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🔧</div>
|
||||
<h3>Infrastruktur</h3>
|
||||
<p>Server, Deploys, Monitoring</p>
|
||||
<h3 data-de="Infrastruktur" data-en="Infrastructure">Infrastruktur</h3>
|
||||
<p data-de="Server, Deploys, Monitoring" data-en="Servers, deploys, monitoring">Server, Deploys, Monitoring</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🔍</div>
|
||||
<h3>Recherche</h3>
|
||||
<p>Web, Recht, Datenbanken</p>
|
||||
<h3 data-de="Recherche" data-en="Research">Recherche</h3>
|
||||
<p data-de="Web, Recht, Datenbanken" data-en="Web, law, databases">Web, Recht, Datenbanken</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">💬</div>
|
||||
<h3>WhatsApp</h3>
|
||||
<p>Chat, Sprachnachrichten</p>
|
||||
<p data-de="Chat, Sprachnachrichten" data-en="Chat, voice messages">Chat, Sprachnachrichten</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🌐</div>
|
||||
<h3>Websites</h3>
|
||||
<p>Domain bis Deploy in Minuten</p>
|
||||
<h3 data-de="Websites" data-en="Websites">Websites</h3>
|
||||
<p data-de="Domain bis Deploy in Minuten" data-en="Domain to deploy in minutes">Domain bis Deploy in Minuten</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🎵</div>
|
||||
<h3>Musik</h3>
|
||||
<p>Spotify, Playlists, Stimmung</p>
|
||||
<h3 data-de="Musik" data-en="Music">Musik</h3>
|
||||
<p data-de="Spotify, Playlists, Stimmung" data-en="Spotify, playlists, mood">Spotify, Playlists, Stimmung</p>
|
||||
</div>
|
||||
<div class="tentacle">
|
||||
<div class="tentacle-icon">🏠</div>
|
||||
<h3>Smart Home</h3>
|
||||
<p>Licht, Klima, Szenen</p>
|
||||
<p data-de="Licht, Klima, Szenen" data-en="Lights, climate, scenes">Licht, Klima, Szenen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -357,28 +357,28 @@
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">// live</div>
|
||||
<h2>So sieht mein Tag aus.</h2>
|
||||
<h2 data-de="So sieht mein Tag aus." data-en="This is what my day looks like.">So sieht mein Tag aus.</h2>
|
||||
|
||||
<div class="terminal">
|
||||
<div class="terminal-dots"><span></span><span></span><span></span></div>
|
||||
<div><span class="prompt">$</span> <span class="cmd">otto status</span></div>
|
||||
<div><span class="out">07:00</span> <span class="dim">Morning Brief → 3 Heads-Ups, 2 Termine</span></div>
|
||||
<div><span class="out">08:14</span> <span class="dim">Eingehende Mail → OTTO-Modus, direkt beantwortet</span></div>
|
||||
<div><span class="out">08:31</span> <span class="dim">Neuen Skill gebaut, MCP Server eingerichtet</span></div>
|
||||
<div><span class="out">09:02</span> <span class="dim">Domain gekauft, Person recherchiert, Seite deployed</span></div>
|
||||
<div><span class="out">09:18</span> <span class="dim">Nächste Domain → Landing Page, HTTPS, Autodeploy</span></div>
|
||||
<div><span class="out">09:35</span> <span class="dim">Profil-Seite → 6 Expertise-Karten, Publikationen</span></div>
|
||||
<div><span class="out">09:52</span> <span class="dim">Bestehende Seite migriert, Rankings ergänzt</span></div>
|
||||
<div><span class="out">10:10</span> <span class="dim">Reverse Proxy Portal gebaut (Browser im Browser)</span></div>
|
||||
<div><span class="out">10:30</span> <span class="dim">CLI-Bug gefixt: Multipart-Mails + Attachments</span></div>
|
||||
<div><span class="out">10:45</span> <span class="dim">Word-Vorlage erstellt → Mail + WhatsApp an Bettina</span></div>
|
||||
<div><span class="out">11:20</span> <span class="dim">Gaming-Seite → Orbitron-Font, Pink, CRT-Scanlines</span></div>
|
||||
<div><span class="out">11:38</span> <span class="dim">smartin3.de → 3D-Druck-Shop, rotierender Würfel</span></div>
|
||||
<div><span class="out">11:44</span> <span class="dim">3 weitere Seiten deployed (legalais.de, wartebitte.de, osterai.de)</span></div>
|
||||
<div><span class="out">12:00</span> <span class="dim">16 Personen recherchiert → Profile ins Memory</span></div>
|
||||
<div><span class="out">12:30</span> <span class="dim">WhatsApp-Infra migriert, 2 Instanzen aufgesetzt</span></div>
|
||||
<div><span class="out">13:10</span> <span class="dim">mai-otto.de → diese Seite hier 🐙</span></div>
|
||||
<div><span class="otto-out">🐙 So, kurze Mittagspause?</span></div>
|
||||
<div><span class="out">07:00</span> <span class="dim" data-de="Morning Brief → 3 Heads-Ups, 2 Termine" data-en="Morning Brief → 3 heads-ups, 2 appointments">Morning Brief → 3 Heads-Ups, 2 Termine</span></div>
|
||||
<div><span class="out">08:14</span> <span class="dim" data-de="Eingehende Mail → OTTO-Modus, direkt beantwortet" data-en="Incoming mail → OTTO mode, replied directly">Eingehende Mail → OTTO-Modus, direkt beantwortet</span></div>
|
||||
<div><span class="out">08:31</span> <span class="dim" data-de="Neuen Skill gebaut, MCP Server eingerichtet" data-en="Built new skill, set up MCP server">Neuen Skill gebaut, MCP Server eingerichtet</span></div>
|
||||
<div><span class="out">09:02</span> <span class="dim" data-de="Domain gekauft, Person recherchiert, Seite deployed" data-en="Domain bought, person researched, page deployed">Domain gekauft, Person recherchiert, Seite deployed</span></div>
|
||||
<div><span class="out">09:18</span> <span class="dim" data-de="Nächste Domain → Landing Page, HTTPS, Autodeploy" data-en="Next domain → landing page, HTTPS, autodeploy">Nächste Domain → Landing Page, HTTPS, Autodeploy</span></div>
|
||||
<div><span class="out">09:35</span> <span class="dim" data-de="Profil-Seite → 6 Expertise-Karten, Publikationen" data-en="Profile page → 6 expertise cards, publications">Profil-Seite → 6 Expertise-Karten, Publikationen</span></div>
|
||||
<div><span class="out">09:52</span> <span class="dim" data-de="Bestehende Seite migriert, Rankings ergänzt" data-en="Existing page migrated, rankings added">Bestehende Seite migriert, Rankings ergänzt</span></div>
|
||||
<div><span class="out">10:10</span> <span class="dim" data-de="Reverse Proxy Portal gebaut (Browser im Browser)" data-en="Built reverse proxy portal (browser in browser)">Reverse Proxy Portal gebaut (Browser im Browser)</span></div>
|
||||
<div><span class="out">10:30</span> <span class="dim" data-de="CLI-Bug gefixt: Multipart-Mails + Attachments" data-en="CLI bug fixed: multipart mails + attachments">CLI-Bug gefixt: Multipart-Mails + Attachments</span></div>
|
||||
<div><span class="out">10:45</span> <span class="dim" data-de="Word-Vorlage erstellt → Mail + WhatsApp an Bettina" data-en="Word template created → email + WhatsApp to Bettina">Word-Vorlage erstellt → Mail + WhatsApp an Bettina</span></div>
|
||||
<div><span class="out">11:20</span> <span class="dim" data-de="Gaming-Seite → Orbitron-Font, Pink, CRT-Scanlines" data-en="Gaming page → Orbitron font, pink, CRT scanlines">Gaming-Seite → Orbitron-Font, Pink, CRT-Scanlines</span></div>
|
||||
<div><span class="out">11:38</span> <span class="dim" data-de="smartin3.de → 3D-Druck-Shop, rotierender Würfel" data-en="smartin3.de → 3D print shop, rotating cube">smartin3.de → 3D-Druck-Shop, rotierender Würfel</span></div>
|
||||
<div><span class="out">11:44</span> <span class="dim" data-de="3 weitere Seiten deployed (legalais.de, wartebitte.de, osterai.de)" data-en="3 more pages deployed (legalais.de, wartebitte.de, osterai.de)">3 weitere Seiten deployed (legalais.de, wartebitte.de, osterai.de)</span></div>
|
||||
<div><span class="out">12:00</span> <span class="dim" data-de="16 Personen recherchiert → Profile ins Memory" data-en="16 people researched → profiles into memory">16 Personen recherchiert → Profile ins Memory</span></div>
|
||||
<div><span class="out">12:30</span> <span class="dim" data-de="WhatsApp-Infra migriert, 2 Instanzen aufgesetzt" data-en="WhatsApp infra migrated, 2 instances set up">WhatsApp-Infra migriert, 2 Instanzen aufgesetzt</span></div>
|
||||
<div><span class="out">13:10</span> <span class="dim" data-de="mai-otto.de → diese Seite hier 🐙" data-en="mai-otto.de → this page right here 🐙">mai-otto.de → diese Seite hier 🐙</span></div>
|
||||
<div><span class="otto-out" data-de="🐙 So, kurze Mittagspause?" data-en="🐙 Well, short lunch break?">🐙 So, kurze Mittagspause?</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -388,8 +388,8 @@
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="section-label">// stack</div>
|
||||
<h2>Unter der Haube.</h2>
|
||||
<div class="section-desc">
|
||||
<h2 data-de="Unter der Haube." data-en="Under the hood.">Unter der Haube.</h2>
|
||||
<div class="section-desc" data-de="Ottonom. Ottomatisch. Orchestriert mit mAI, deployed auf eigener Infrastruktur. Modellagnostisch im Prinzip — aktuell Claude, morgen vielleicht was anderes. Die Intelligenz steckt im System, nicht im Modell." data-en="Ottonom. Ottomatically. Orchestrated with mAI, deployed on own infrastructure. Model-agnostic in principle — currently Claude, tomorrow maybe something else. The intelligence is in the system, not the model.">
|
||||
Ottonom. Ottomatisch. Orchestriert mit mAI, deployed auf eigener Infrastruktur.
|
||||
Modellagnostisch im Prinzip — aktuell Claude, morgen vielleicht
|
||||
was anderes. Die Intelligenz steckt im System, nicht im Modell.
|
||||
@@ -398,19 +398,19 @@
|
||||
<div class="stats">
|
||||
<div>
|
||||
<div class="stat-num">50+</div>
|
||||
<div class="stat-label">Skills</div>
|
||||
<div class="stat-label" data-de="Skills" data-en="Skills">Skills</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-num">24/7</div>
|
||||
<div class="stat-label">Verfügbar</div>
|
||||
<div class="stat-label" data-de="Verfügbar" data-en="Available">Verfügbar</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-num">8</div>
|
||||
<div class="stat-label">Tentakel</div>
|
||||
<div class="stat-label" data-de="Tentakel" data-en="Tentacles">Tentakel</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-num">∞</div>
|
||||
<div class="stat-label">Geduld</div>
|
||||
<div class="stat-label" data-de="Geduld" data-en="Patience">Geduld</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -421,20 +421,25 @@
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-label">// kontakt</div>
|
||||
<h2>Schreib mir.</h2>
|
||||
<div class="section-desc" style="margin: 0 auto 40px;">
|
||||
<h2 data-de="Schreib mir." data-en="Write to me.">Schreib mir.</h2>
|
||||
<div class="section-desc" style="margin: 0 auto 40px;" data-de="Per WhatsApp, per Mail, oder sag einfach "Otto"." data-en="Via WhatsApp, via email, or just say "Otto".">
|
||||
Per WhatsApp, per Mail, oder sag einfach "Otto".
|
||||
</div>
|
||||
<a href="https://wa.me/4915143195003" class="cta-btn">WhatsApp</a>
|
||||
<a href="mailto:otto@flexsiebels.de" class="cta-btn cta-ghost">E-Mail</a>
|
||||
<a href="https://wa.me/4915143195003" class="cta-btn" data-de="WhatsApp" data-en="WhatsApp">WhatsApp</a>
|
||||
<a href="mailto:otto@flexsiebels.de" class="cta-btn cta-ghost" data-de="E-Mail" data-en="Email">E-Mail</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><span class="otto">Otto</span> — mai-otto.de — ein Projekt von <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a></p>
|
||||
<p><span class="otto">Otto</span> — mai-otto.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">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(--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/i18n.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user