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
@@ -761,7 +761,7 @@
|
||||
<div class="drop"><span>FM</span></div>
|
||||
Frau Maier
|
||||
</a>
|
||||
<a href="mailto:hallofraumaier@msbls.de" class="nav-cta">Kontakt aufnehmen</a>
|
||||
<a href="mailto:hallofraumaier@msbls.de" class="nav-cta" data-de="Kontakt aufnehmen" data-en="Get in touch">Kontakt aufnehmen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -772,17 +772,17 @@
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<div class="pulse"></div>
|
||||
Jetzt erreichbar — rund um die Uhr
|
||||
<span data-de="Jetzt erreichbar — rund um die Uhr" data-en="Available now — around the clock">Jetzt erreichbar — rund um die Uhr</span>
|
||||
</div>
|
||||
<h1>Ihre Hausverwaltung ist jetzt <span class="highlight">immer erreichbar</span></h1>
|
||||
<p>Frau Maier ist die KI-gestützte Hausverwaltung, die nie schläft. Wasserschaden um 3 Uhr nachts? Heizung ausgefallen am Wochenende? Frau Maier ist da.</p>
|
||||
<h1 data-de="Ihre Hausverwaltung ist jetzt <span class="highlight">immer erreichbar</span>" data-en="Your property management is now <span class="highlight">always reachable</span>">Ihre Hausverwaltung ist jetzt <span class="highlight">immer erreichbar</span></h1>
|
||||
<p data-de="Frau Maier ist die KI-gestützte Hausverwaltung, die nie schläft. Wasserschaden um 3 Uhr nachts? Heizung ausgefallen am Wochenende? Frau Maier ist da." data-en="Frau Maier is the AI-powered property management that never sleeps. Water damage at 3am? Heating failed on the weekend? Frau Maier is there.">Frau Maier ist die KI-gestützte Hausverwaltung, die nie schläft. Wasserschaden um 3 Uhr nachts? Heizung ausgefallen am Wochenende? Frau Maier ist da.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="mailto:hallofraumaier@msbls.de" class="btn-primary">Hallo Frau Maier! <span>→</span></a>
|
||||
<a href="#features" class="btn-secondary">Mehr erfahren</a>
|
||||
<a href="#features" class="btn-secondary" data-de="Mehr erfahren" data-en="Learn more">Mehr erfahren</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="float-badge top-left">
|
||||
<div class="float-badge top-left" data-de="Auch um 3:00 Uhr nachts" data-en="Even at 3:00am">
|
||||
<span>🌙</span> Auch um 3:00 Uhr nachts
|
||||
</div>
|
||||
<div class="chat-mockup">
|
||||
@@ -795,13 +795,13 @@
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-time">Heute, 02:47</div>
|
||||
<div class="chat-msg user">Hallo Frau Maier, bei mir tropft's von der Decke! 😰</div>
|
||||
<div class="chat-msg bot">Oh je! Ich kümmere mich sofort. Bitte drehen Sie den Haupthahn zu — ich schicke Ihnen gleich den Notdienst-Kontakt.</div>
|
||||
<div class="chat-msg user">Danke, der Hahn ist zu.</div>
|
||||
<div class="chat-msg bot">Perfekt! Der Klempner Herr Weber ist informiert und kommt gegen 3:30 Uhr. Ich halte Sie auf dem Laufenden. 🔧</div>
|
||||
<div class="chat-msg user" data-de="Hallo Frau Maier, bei mir tropft's von der Decke! 😰" data-en="Hello Frau Maier, water's dripping from my ceiling! 😰">Hallo Frau Maier, bei mir tropft's von der Decke! 😰</div>
|
||||
<div class="chat-msg bot" data-de="Oh je! Ich kümmere mich sofort. Bitte drehen Sie den Haupthahn zu — ich schicke Ihnen gleich den Notdienst-Kontakt." data-en="Oh dear! I'll take care of it immediately. Please turn off the main tap — I'll send you the emergency contact right away.">Oh je! Ich kümmere mich sofort. Bitte drehen Sie den Haupthahn zu — ich schicke Ihnen gleich den Notdienst-Kontakt.</div>
|
||||
<div class="chat-msg user" data-de="Danke, der Hahn ist zu." data-en="Thanks, the tap is off.">Danke, der Hahn ist zu.</div>
|
||||
<div class="chat-msg bot" data-de="Perfekt! Der Klempner Herr Weber ist informiert und kommt gegen 3:30 Uhr. Ich halte Sie auf dem Laufenden. 🔧" data-en="Perfect! Plumber Mr Weber has been informed and is coming around 3:30. I'll keep you updated. 🔧">Perfekt! Der Klempner Herr Weber ist informiert und kommt gegen 3:30 Uhr. Ich halte Sie auf dem Laufenden. 🔧</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-badge bottom-right">
|
||||
<div class="float-badge bottom-right" data-de="Notfall? Sofort Hilfe" data-en="Emergency? Immediate help">
|
||||
<span>💧</span> Notfall? Sofort Hilfe
|
||||
</div>
|
||||
</div>
|
||||
@@ -815,19 +815,19 @@
|
||||
<div class="trust-items">
|
||||
<div class="trust-item fade-up">
|
||||
<div class="number">24/7</div>
|
||||
<div class="label">Erreichbarkeit</div>
|
||||
<div class="label" data-de="Erreichbarkeit" data-en="Availability">Erreichbarkeit</div>
|
||||
</div>
|
||||
<div class="trust-item fade-up">
|
||||
<div class="number"><2 Min</div>
|
||||
<div class="label">Reaktionszeit</div>
|
||||
<div class="label" data-de="Reaktionszeit" data-en="Response time">Reaktionszeit</div>
|
||||
</div>
|
||||
<div class="trust-item fade-up">
|
||||
<div class="number">100%</div>
|
||||
<div class="label">Dokumentation</div>
|
||||
<div class="label" data-de="Dokumentation" data-en="Documentation">Dokumentation</div>
|
||||
</div>
|
||||
<div class="trust-item fade-up">
|
||||
<div class="number">0</div>
|
||||
<div class="label">Verpasste Anrufe</div>
|
||||
<div class="label" data-de="Verpasste Anrufe" data-en="Missed calls">Verpasste Anrufe</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -836,47 +836,47 @@
|
||||
<!-- Features -->
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
<div class="section-label fade-up">Was Frau Maier kann</div>
|
||||
<h2 class="section-title fade-up">Alles, was eine gute Hausverwaltung tut.<br>Nur ohne Wartezeit.</h2>
|
||||
<p class="section-subtitle fade-up">Frau Maier kombiniert das Wissen erfahrener Hausverwalter mit der Geschwindigkeit und Verfügbarkeit moderner KI.</p>
|
||||
<div class="section-label fade-up" data-de="Was Frau Maier kann" data-en="What Frau Maier can do">Was Frau Maier kann</div>
|
||||
<h2 class="section-title fade-up" data-de="Alles, was eine gute Hausverwaltung tut.<br>Nur ohne Wartezeit." data-en="Everything a good property management does.<br>Just without the waiting.">Alles, was eine gute Hausverwaltung tut.<br>Nur ohne Wartezeit.</h2>
|
||||
<p class="section-subtitle fade-up" data-de="Frau Maier kombiniert das Wissen erfahrener Hausverwalter mit der Geschwindigkeit und Verfügbarkeit moderner KI." data-en="Frau Maier combines the knowledge of experienced property managers with the speed and availability of modern AI.">Frau Maier kombiniert das Wissen erfahrener Hausverwalter mit der Geschwindigkeit und Verfügbarkeit moderner KI.</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<!-- Wide card: Emergency -->
|
||||
<div class="feature-card wide fade-up">
|
||||
<div>
|
||||
<div class="feature-icon emergency">🚨</div>
|
||||
<h3>Wasserschaden-Notfall</h3>
|
||||
<p>Rohrbruch um 3 Uhr nachts? Frau Maier reagiert sofort: Anleitung zur Erstversorgung, Handwerker-Alarmierung und lückenlose Dokumentation für die Versicherung — alles in Minuten.</p>
|
||||
<h3 data-de="Wasserschaden-Notfall" data-en="Water Damage Emergency">Wasserschaden-Notfall</h3>
|
||||
<p data-de="Rohrbruch um 3 Uhr nachts? Frau Maier reagiert sofort: Anleitung zur Erstversorgung, Handwerker-Alarmierung und lückenlose Dokumentation für die Versicherung — alles in Minuten." data-en="Pipe burst at 3am? Frau Maier responds immediately: first aid instructions, tradesperson alert and complete documentation for the insurer — all in minutes.">Rohrbruch um 3 Uhr nachts? Frau Maier reagiert sofort: Anleitung zur Erstversorgung, Handwerker-Alarmierung und lückenlose Dokumentation für die Versicherung — alles in Minuten.</p>
|
||||
</div>
|
||||
<div class="feature-visual">
|
||||
<div class="big-icon">💧</div>
|
||||
<div class="caption">Sofort-Hilfe bei Wasserschäden —<br>Tag und Nacht</div>
|
||||
<div class="caption" data-de="Sofort-Hilfe bei Wasserschäden —<br>Tag und Nacht" data-en="Immediate help with water damage —<br>day and night">Sofort-Hilfe bei Wasserschäden —<br>Tag und Nacht</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Regular cards -->
|
||||
<div class="feature-card fade-up">
|
||||
<div class="feature-icon always-on">🕐</div>
|
||||
<h3>24/7 Erreichbarkeit</h3>
|
||||
<p>Keine Warteschleifen, keine Sprechzeiten, kein Anrufbeantworter. Frau Maier ist immer da — per Chat, Telefon oder E-Mail.</p>
|
||||
<h3 data-de="24/7 Erreichbarkeit" data-en="24/7 Availability">24/7 Erreichbarkeit</h3>
|
||||
<p data-de="Keine Warteschleifen, keine Sprechzeiten, kein Anrufbeantworter. Frau Maier ist immer da — per Chat, Telefon oder E-Mail." data-en="No hold music, no office hours, no answering machine. Frau Maier is always there — by chat, phone or email.">Keine Warteschleifen, keine Sprechzeiten, kein Anrufbeantworter. Frau Maier ist immer da — per Chat, Telefon oder E-Mail.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card fade-up">
|
||||
<div class="feature-icon costs">📊</div>
|
||||
<h3>Nebenkostenabrechnung</h3>
|
||||
<p>Transparente, verständliche Abrechnungen — pünktlich und fehlerfrei. Fragen beantwortet Frau Maier jederzeit persönlich.</p>
|
||||
<h3 data-de="Nebenkostenabrechnung" data-en="Utility Bill Settlement">Nebenkostenabrechnung</h3>
|
||||
<p data-de="Transparente, verständliche Abrechnungen — pünktlich und fehlerfrei. Fragen beantwortet Frau Maier jederzeit persönlich." data-en="Transparent, comprehensible statements — on time and error-free. Frau Maier answers questions personally at any time.">Transparente, verständliche Abrechnungen — pünktlich und fehlerfrei. Fragen beantwortet Frau Maier jederzeit persönlich.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card fade-up">
|
||||
<div class="feature-icon craft">🔧</div>
|
||||
<h3>Handwerker-Koordination</h3>
|
||||
<p>Frau Maier kennt die besten Handwerker in Ihrer Region, koordiniert Termine und überwacht die Ausführung — ohne dass Sie sich kümmern müssen.</p>
|
||||
<h3 data-de="Handwerker-Koordination" data-en="Tradesperson Coordination">Handwerker-Koordination</h3>
|
||||
<p data-de="Frau Maier kennt die besten Handwerker in Ihrer Region, koordiniert Termine und überwacht die Ausführung — ohne dass Sie sich kümmern müssen." data-en="Frau Maier knows the best tradespeople in your area, coordinates appointments and monitors execution — without you having to worry.">Frau Maier kennt die besten Handwerker in Ihrer Region, koordiniert Termine und überwacht die Ausführung — ohne dass Sie sich kümmern müssen.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card fade-up">
|
||||
<div class="feature-icon comm">💬</div>
|
||||
<h3>Mieterkommunikation</h3>
|
||||
<p>Beschwerden, Anfragen, Informationen — Frau Maier kommuniziert freundlich, schnell und immer auf dem aktuellen Stand.</p>
|
||||
<h3 data-de="Mieterkommunikation" data-en="Tenant Communication">Mieterkommunikation</h3>
|
||||
<p data-de="Beschwerden, Anfragen, Informationen — Frau Maier kommuniziert freundlich, schnell und immer auf dem aktuellen Stand." data-en="Complaints, requests, information — Frau Maier communicates in a friendly, fast and always up-to-date manner.">Beschwerden, Anfragen, Informationen — Frau Maier kommuniziert freundlich, schnell und immer auf dem aktuellen Stand.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -885,24 +885,24 @@
|
||||
<!-- How it works -->
|
||||
<section class="how-it-works">
|
||||
<div class="container">
|
||||
<div class="section-label fade-up">So funktioniert's</div>
|
||||
<h2 class="section-title fade-up">In drei Schritten zu Ihrer persönlichen Frau Maier</h2>
|
||||
<div class="section-label fade-up" data-de="So funktioniert's" data-en="How it works">So funktioniert's</div>
|
||||
<h2 class="section-title fade-up" data-de="In drei Schritten zu Ihrer persönlichen Frau Maier" data-en="Three steps to your personal Frau Maier">In drei Schritten zu Ihrer persönlichen Frau Maier</h2>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step fade-up">
|
||||
<div class="step-number">1</div>
|
||||
<h3>Hallo sagen</h3>
|
||||
<p>Schreiben Sie uns. Wir lernen Ihr Objekt kennen — Größe, Mieter, Besonderheiten, Ihre Wünsche.</p>
|
||||
<h3 data-de="Hallo sagen" data-en="Say hello">Hallo sagen</h3>
|
||||
<p data-de="Schreiben Sie uns. Wir lernen Ihr Objekt kennen — Größe, Mieter, Besonderheiten, Ihre Wünsche." data-en="Write to us. We get to know your property — size, tenants, special features, your wishes.">Schreiben Sie uns. Wir lernen Ihr Objekt kennen — Größe, Mieter, Besonderheiten, Ihre Wünsche.</p>
|
||||
</div>
|
||||
<div class="step fade-up">
|
||||
<div class="step-number">2</div>
|
||||
<h3>Frau Maier einrichten</h3>
|
||||
<p>Wir konfigurieren Ihre persönliche Frau Maier mit allen relevanten Informationen und Kontakten.</p>
|
||||
<h3 data-de="Frau Maier einrichten" data-en="Set up Frau Maier">Frau Maier einrichten</h3>
|
||||
<p data-de="Wir konfigurieren Ihre persönliche Frau Maier mit allen relevanten Informationen und Kontakten." data-en="We configure your personal Frau Maier with all relevant information and contacts.">Wir konfigurieren Ihre persönliche Frau Maier mit allen relevanten Informationen und Kontakten.</p>
|
||||
</div>
|
||||
<div class="step fade-up">
|
||||
<div class="step-number">3</div>
|
||||
<h3>Zurücklehnen</h3>
|
||||
<p>Ab jetzt kümmert sich Frau Maier. Sie werden nur noch kontaktiert, wenn es wirklich nötig ist.</p>
|
||||
<h3 data-de="Zurücklehnen" data-en="Sit back">Zurücklehnen</h3>
|
||||
<p data-de="Ab jetzt kümmert sich Frau Maier. Sie werden nur noch kontaktiert, wenn es wirklich nötig ist." data-en="From now on Frau Maier takes care of things. You will only be contacted when it's truly necessary.">Ab jetzt kümmert sich Frau Maier. Sie werden nur noch kontaktiert, wenn es wirklich nötig ist.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -913,9 +913,9 @@
|
||||
<div class="container">
|
||||
<div class="cta-card fade-up">
|
||||
<span class="moon">🌙</span>
|
||||
<h2>Frau Maier <span class="water-text">schläft nie</span></h2>
|
||||
<p>Während Sie ruhig schlafen, ist Frau Maier wach. Für Ihre Mieter, Ihr Gebäude, Ihren Seelenfrieden.</p>
|
||||
<a href="mailto:hallofraumaier@msbls.de" class="btn-primary">Jetzt kennenlernen <span>→</span></a>
|
||||
<h2 data-de="Frau Maier <span class="water-text">schläft nie</span>" data-en="Frau Maier <span class="water-text">never sleeps</span>">Frau Maier <span class="water-text">schläft nie</span></h2>
|
||||
<p data-de="Während Sie ruhig schlafen, ist Frau Maier wach. Für Ihre Mieter, Ihr Gebäude, Ihren Seelenfrieden." data-en="While you sleep soundly, Frau Maier is awake. For your tenants, your building, your peace of mind.">Während Sie ruhig schlafen, ist Frau Maier wach. Für Ihre Mieter, Ihr Gebäude, Ihren Seelenfrieden.</p>
|
||||
<a href="mailto:hallofraumaier@msbls.de" class="btn-primary" data-de="Jetzt kennenlernen →" data-en="Meet her now →">Jetzt kennenlernen <span>→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -926,10 +926,14 @@
|
||||
<div class="footer-left">
|
||||
© 2026 Hallo Frau Maier · <a href="mailto:hallofraumaier@msbls.de">hallofraumaier@msbls.de</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<div class="footer-right" data-de="KI-gestützte Hausverwaltung" data-en="AI-powered property management">
|
||||
KI-gestützte Hausverwaltung
|
||||
</div>
|
||||
</div>
|
||||
<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-light,#aaa);color:var(--text-light,#aaa);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-light,#aaa);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
@@ -951,5 +955,6 @@
|
||||
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
|
||||
<script src="/shared/i18n.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user