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

@@ -306,6 +306,19 @@
.question-field { padding: 16px 20px; font-size: 0.9rem; }
.ornament-top, .ornament-bottom { font-size: 0.5rem; letter-spacing: 0.4em; }
}
/* i18n toggle placement at bottom */
.footer-toggle {
position: fixed;
bottom: 48px;
right: 70px;
z-index: 10;
text-align: center;
}
@media (max-width: 640px) {
.footer-toggle { right: 16px; bottom: 36px; }
}
</style>
</head>
<body>
@@ -319,14 +332,14 @@
<section class="oracle">
<h1 class="oracle-title">OraKIl</h1>
<p class="oracle-subtitle">Das Orakel wei&szlig;. Frag.</p>
<p class="oracle-subtitle" data-de="Das Orakel weiß. Frag." data-en="The oracle knows. Ask.">Das Orakel wei&szlig;. Frag.</p>
<div class="question-container">
<input type="text" class="question-field" placeholder="Stelle deine Frage..." autocomplete="off">
<input type="text" class="question-field" placeholder="Stelle deine Frage..." autocomplete="off" data-de-placeholder="Stelle deine Frage..." data-en-placeholder="Ask your question...">
<div class="question-ornament">&#x2014; ORACVLVM &#x2014;</div>
</div>
<p class="hint">Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt.</p>
<p class="hint" data-de="Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt." data-en="The answer was always within you. The AI just showed it to you.">Die Antwort war immer in dir. Die KI hat sie dir nur gezeigt.</p>
<div class="answer-container">
<p class="answer-text"></p>
@@ -335,6 +348,11 @@
<div class="ornament-bottom">&#x2726; &#x2726; &#x2726;</div>
<div class="footer-toggle">
<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>
<script>
(function() {
var hint = document.querySelector('.hint');
@@ -424,5 +442,6 @@
})();
</script>
<script src="/shared/i18n.js"></script>
</body>
</html>