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
@@ -407,26 +407,26 @@
|
||||
<span class="bear">🧸</span>
|
||||
Hey <span class="goldi">Goldi</span>!
|
||||
</div>
|
||||
<a href="#kontakt">Hallo sagen</a>
|
||||
<a href="#kontakt" data-de="Hallo sagen" data-en="Say hello">Hallo sagen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-bear">🧸</div>
|
||||
<h1><span class="hey">Hey </span><span class="goldi">Goldi</span><span class="excl">!</span></h1>
|
||||
<p class="hero-sub">
|
||||
<p class="hero-sub" data-de="Dein <strong>freundlicher KI-Begleiter</strong>.<br> Immer da. Immer geduldig.<br> Wie ein guter Freund, der alles erklärt." data-en="Your <strong>friendly AI companion</strong>.<br> Always there. Always patient.<br> Like a good friend who explains everything.">
|
||||
Dein <strong>freundlicher KI-Begleiter</strong>.<br>
|
||||
Immer da. Immer geduldig.<br>
|
||||
Wie ein guter Freund, der alles erklärt.
|
||||
</p>
|
||||
<a href="#kontakt" class="cta-big">
|
||||
<a href="#kontakt" class="cta-big" data-de="🧸 Goldi kennenlernen" data-en="🧸 Meet Goldi">
|
||||
🧸 Goldi kennenlernen
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<div class="intro">
|
||||
<div class="container">
|
||||
<p class="intro-text">
|
||||
<p class="intro-text" data-de="Technik muss nicht <strong>kompliziert</strong> sein.<br> <span class="goldi">Goldi</span> erklärt alles in <strong>einfachen Worten</strong>.<br> Kein Fachchinesisch. Keine Hektik.<br> Nur ein <strong>freundliches Gespräch</strong>." data-en="Technology doesn't have to be <strong>complicated</strong>.<br> <span class="goldi">Goldi</span> explains everything in <strong>simple words</strong>.<br> No jargon. No rushing.<br> Just a <strong>friendly conversation</strong>.">
|
||||
Technik muss nicht <strong>kompliziert</strong> sein.<br>
|
||||
<span class="goldi">Goldi</span> erklärt alles in <strong>einfachen Worten</strong>.<br>
|
||||
Kein Fachchinesisch. Keine Hektik.<br>
|
||||
@@ -438,8 +438,8 @@
|
||||
<section id="features">
|
||||
<div class="container">
|
||||
<div class="section-emoji">✨</div>
|
||||
<h2>Was Goldi alles kann</h2>
|
||||
<div class="section-desc">
|
||||
<h2 data-de="Was Goldi alles kann" data-en="Everything Goldi can do">Was Goldi alles kann</h2>
|
||||
<div class="section-desc" data-de="Goldi hilft dir bei allem, was im Alltag anfällt. Geduldig, verständlich und immer freundlich." data-en="Goldi helps you with everything that comes up in daily life. Patient, understandable and always friendly.">
|
||||
Goldi hilft dir bei allem, was im Alltag anfällt.
|
||||
Geduldig, verständlich und immer freundlich.
|
||||
</div>
|
||||
@@ -447,38 +447,38 @@
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">💬</div>
|
||||
<h3>Einfach plaudern</h3>
|
||||
<p>Frag Goldi was du möchtest. Zum Wetter, zu Rezepten, zur Nachrichten-Lage. Goldi antwortet so, dass es Spaß macht.</p>
|
||||
<h3 data-de="Einfach plaudern" data-en="Just chat">Einfach plaudern</h3>
|
||||
<p data-de="Frag Goldi was du möchtest. Zum Wetter, zu Rezepten, zur Nachrichten-Lage. Goldi antwortet so, dass es Spaß macht." data-en="Ask Goldi whatever you like. About the weather, recipes, current news. Goldi answers in a way that's fun.">Frag Goldi was du möchtest. Zum Wetter, zu Rezepten, zur Nachrichten-Lage. Goldi antwortet so, dass es Spaß macht.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">📱</div>
|
||||
<h3>Technik-Hilfe</h3>
|
||||
<p>Das Handy spinnt? Die App macht Probleme? Goldi erklärt Schritt für Schritt, was zu tun ist. In deinem Tempo.</p>
|
||||
<h3 data-de="Technik-Hilfe" data-en="Tech help">Technik-Hilfe</h3>
|
||||
<p data-de="Das Handy spinnt? Die App macht Probleme? Goldi erklärt Schritt für Schritt, was zu tun ist. In deinem Tempo." data-en="Phone acting up? App giving trouble? Goldi explains step by step what to do. At your own pace.">Das Handy spinnt? Die App macht Probleme? Goldi erklärt Schritt für Schritt, was zu tun ist. In deinem Tempo.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">📝</div>
|
||||
<h3>Briefe & Texte</h3>
|
||||
<p>Goldi hilft beim Schreiben. Ob Kündigung, Beschwerde oder Geburtstagsgruß — verständlich und auf den Punkt.</p>
|
||||
<h3 data-de="Briefe & Texte" data-en="Letters & texts">Briefe & Texte</h3>
|
||||
<p data-de="Goldi hilft beim Schreiben. Ob Kündigung, Beschwerde oder Geburtstagsgruß — verständlich und auf den Punkt." data-en="Goldi helps with writing. Whether a notice, complaint or birthday greeting — clear and to the point.">Goldi hilft beim Schreiben. Ob Kündigung, Beschwerde oder Geburtstagsgruß — verständlich und auf den Punkt.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">🧠</div>
|
||||
<h3>Gedächtnisstütze</h3>
|
||||
<p>Goldi merkt sich, was dir wichtig ist. Arzttermine, Geburtstage, Einkaufslisten — alles sicher aufgehoben.</p>
|
||||
<h3 data-de="Gedächtnisstütze" data-en="Memory aid">Gedächtnisstütze</h3>
|
||||
<p data-de="Goldi merkt sich, was dir wichtig ist. Arzttermine, Geburtstage, Einkaufslisten — alles sicher aufgehoben." data-en="Goldi remembers what matters to you. Doctor's appointments, birthdays, shopping lists — all safely stored.">Goldi merkt sich, was dir wichtig ist. Arzttermine, Geburtstage, Einkaufslisten — alles sicher aufgehoben.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">📖</div>
|
||||
<h3>Geschichten & Rätsel</h3>
|
||||
<p>Langeweile? Goldi erzählt Geschichten, stellt Quizfragen oder liest dir etwas vor. Unterhaltung, wann immer du magst.</p>
|
||||
<h3 data-de="Geschichten & Rätsel" data-en="Stories & puzzles">Geschichten & Rätsel</h3>
|
||||
<p data-de="Langeweile? Goldi erzählt Geschichten, stellt Quizfragen oder liest dir etwas vor. Unterhaltung, wann immer du magst." data-en="Bored? Goldi tells stories, asks quiz questions or reads to you. Entertainment whenever you like.">Langeweile? Goldi erzählt Geschichten, stellt Quizfragen oder liest dir etwas vor. Unterhaltung, wann immer du magst.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-emoji">❤️</div>
|
||||
<h3>Einfach zuhören</h3>
|
||||
<p>Manchmal braucht man jemanden zum Reden. Goldi hört zu, ohne zu urteilen. Und hat immer ein offenes Ohr.</p>
|
||||
<h3 data-de="Einfach zuhören" data-en="Just listen">Einfach zuhören</h3>
|
||||
<p data-de="Manchmal braucht man jemanden zum Reden. Goldi hört zu, ohne zu urteilen. Und hat immer ein offenes Ohr." data-en="Sometimes you just need someone to talk to. Goldi listens without judging. And always has an open ear.">Manchmal braucht man jemanden zum Reden. Goldi hört zu, ohne zu urteilen. Und hat immer ein offenes Ohr.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -487,8 +487,8 @@
|
||||
<section class="steps-section">
|
||||
<div class="container">
|
||||
<div class="section-emoji">👋</div>
|
||||
<h2>So einfach geht's</h2>
|
||||
<div class="section-desc">
|
||||
<h2 data-de="So einfach geht's" data-en="It's that simple">So einfach geht's</h2>
|
||||
<div class="section-desc" data-de="Drei Schritte. Mehr braucht es nicht." data-en="Three steps. That's all it takes.">
|
||||
Drei Schritte. Mehr braucht es nicht.
|
||||
</div>
|
||||
|
||||
@@ -496,24 +496,24 @@
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-body">
|
||||
<h3>Sag "Hey Goldi!"</h3>
|
||||
<p>Einfach ansprechen — per Handy, Tablet oder Computer. Goldi ist sofort da und freut sich.</p>
|
||||
<h3 data-de="Sag "Hey Goldi!"" data-en="Say "Hey Goldi!"">Sag "Hey Goldi!"</h3>
|
||||
<p data-de="Einfach ansprechen — per Handy, Tablet oder Computer. Goldi ist sofort da und freut sich." data-en="Just speak up — by phone, tablet or computer. Goldi is immediately there and happy to help.">Einfach ansprechen — per Handy, Tablet oder Computer. Goldi ist sofort da und freut sich.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-body">
|
||||
<h3>Stell deine Frage</h3>
|
||||
<p>Was auch immer dich beschäftigt. Goldi versteht dich, auch wenn du nicht die perfekten Worte findest.</p>
|
||||
<h3 data-de="Stell deine Frage" data-en="Ask your question">Stell deine Frage</h3>
|
||||
<p data-de="Was auch immer dich beschäftigt. Goldi versteht dich, auch wenn du nicht die perfekten Worte findest." data-en="Whatever is on your mind. Goldi understands you, even if you can't find the perfect words.">Was auch immer dich beschäftigt. Goldi versteht dich, auch wenn du nicht die perfekten Worte findest.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-body">
|
||||
<h3>Goldi antwortet</h3>
|
||||
<p>Klar, freundlich, verständlich. Und wenn etwas unklar ist: einfach nochmal fragen. Goldi erklärt es gerne anders.</p>
|
||||
<h3 data-de="Goldi antwortet" data-en="Goldi answers">Goldi antwortet</h3>
|
||||
<p data-de="Klar, freundlich, verständlich. Und wenn etwas unklar ist: einfach nochmal fragen. Goldi erklärt es gerne anders." data-en="Clear, friendly, understandable. And if something is unclear: just ask again. Goldi is happy to explain it differently.">Klar, freundlich, verständlich. Und wenn etwas unklar ist: einfach nochmal fragen. Goldi erklärt es gerne anders.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -523,37 +523,37 @@
|
||||
<div class="testimonial-section">
|
||||
<div class="container">
|
||||
<div class="section-emoji">💛</div>
|
||||
<p class="testimonial-quote">
|
||||
<p class="testimonial-quote" data-de=""Endlich jemand, der mir alles in Ruhe erklärt. Ohne dass ich mich dumm fühle."" data-en=""Finally someone who explains everything to me calmly. Without making me feel stupid."">
|
||||
"Endlich jemand, der mir alles in Ruhe erklärt.
|
||||
Ohne dass ich mich dumm fühle."
|
||||
</p>
|
||||
<p class="testimonial-author">— So soll es sich anfühlen.</p>
|
||||
<p class="testimonial-author" data-de="— So soll es sich anfühlen." data-en="— That's how it should feel.">— So soll es sich anfühlen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reassurance">
|
||||
<div class="container">
|
||||
<h2>Das versprechen wir</h2>
|
||||
<h2 data-de="Das versprechen wir" data-en="Our promise">Das versprechen wir</h2>
|
||||
<div class="reassurance-items">
|
||||
<div class="reassurance-item">
|
||||
<div class="reassurance-emoji">🔒</div>
|
||||
<div class="reassurance-text">Privat & sicher</div>
|
||||
<div class="reassurance-sub">Deine Daten bleiben bei dir</div>
|
||||
<div class="reassurance-text" data-de="Privat & sicher" data-en="Private & secure">Privat & sicher</div>
|
||||
<div class="reassurance-sub" data-de="Deine Daten bleiben bei dir" data-en="Your data stays with you">Deine Daten bleiben bei dir</div>
|
||||
</div>
|
||||
<div class="reassurance-item">
|
||||
<div class="reassurance-emoji">🐢</div>
|
||||
<div class="reassurance-text">In deinem Tempo</div>
|
||||
<div class="reassurance-sub">Keine Hektik, kein Druck</div>
|
||||
<div class="reassurance-text" data-de="In deinem Tempo" data-en="At your pace">In deinem Tempo</div>
|
||||
<div class="reassurance-sub" data-de="Keine Hektik, kein Druck" data-en="No rushing, no pressure">Keine Hektik, kein Druck</div>
|
||||
</div>
|
||||
<div class="reassurance-item">
|
||||
<div class="reassurance-emoji">😊</div>
|
||||
<div class="reassurance-text">Immer freundlich</div>
|
||||
<div class="reassurance-sub">Goldi wird nie ungeduldig</div>
|
||||
<div class="reassurance-text" data-de="Immer freundlich" data-en="Always friendly">Immer freundlich</div>
|
||||
<div class="reassurance-sub" data-de="Goldi wird nie ungeduldig" data-en="Goldi never gets impatient">Goldi wird nie ungeduldig</div>
|
||||
</div>
|
||||
<div class="reassurance-item">
|
||||
<div class="reassurance-emoji">🇩🇪</div>
|
||||
<div class="reassurance-text">Auf Deutsch</div>
|
||||
<div class="reassurance-sub">Kein Fachchinesisch</div>
|
||||
<div class="reassurance-text" data-de="Auf Deutsch" data-en="In German">Auf Deutsch</div>
|
||||
<div class="reassurance-sub" data-de="Kein Fachchinesisch" data-en="No jargon">Kein Fachchinesisch</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -562,12 +562,12 @@
|
||||
<section id="kontakt" class="cta-section">
|
||||
<div class="container">
|
||||
<div class="section-emoji">🧸</div>
|
||||
<h2>Sag <span style="color:var(--gold);">Hallo</span>!</h2>
|
||||
<p>
|
||||
<h2 data-de="Sag <span style="color:var(--gold);">Hallo</span>!" data-en="Say <span style="color:var(--gold);">Hello</span>!">Sag <span style="color:var(--gold);">Hallo</span>!</h2>
|
||||
<p data-de="Goldi freut sich, dich kennenzulernen. Schreib uns — und wir bringen euch zusammen." data-en="Goldi looks forward to meeting you. Write to us — and we'll bring you together.">
|
||||
Goldi freut sich, dich kennenzulernen.
|
||||
Schreib uns — und wir bringen euch zusammen.
|
||||
</p>
|
||||
<a href="mailto:heygoldi@msbls.de?subject=Hey%20Goldi!%20—%20Hallo" class="cta-big">
|
||||
<a href="mailto:heygoldi@msbls.de?subject=Hey%20Goldi!%20—%20Hallo" class="cta-big" data-de="🧸 heygoldi@msbls.de" data-en="🧸 heygoldi@msbls.de">
|
||||
🧸 heygoldi@msbls.de
|
||||
</a>
|
||||
</div>
|
||||
@@ -575,9 +575,14 @@
|
||||
|
||||
<footer>
|
||||
<div class="footer-bear">🧸</div>
|
||||
<p class="footer-text">Hey Goldi! — Dein freundlicher KI-Begleiter.</p>
|
||||
<p class="footer-copy">© 2026 heygoldi.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
|
||||
<p class="footer-text" data-de="Hey Goldi! — Dein freundlicher KI-Begleiter." data-en="Hey Goldi! — Your friendly AI companion.">Hey Goldi! — Dein freundlicher KI-Begleiter.</p>
|
||||
<p class="footer-copy">© 2026 heygoldi.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <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 rgba(251,240,212,0.4);color:rgba(251,240,212,0.6);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:rgba(251,240,212,0.4);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/shared/i18n.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user