Skip to content

Add Simplified Chinese (ZH) language support with CJK font fix across all pages #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devNull-bootloader merged 4 commits into from
Mar 2, 2026
Merged

Add Simplified Chinese (ZH) language support with CJK font fix across all pages #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
15a147f
Initial plan
Copilot Mar 2, 2026
0048aec
Add Chinese (ZH) language option to XMenu website
Copilot Mar 2, 2026
46cead1
Add EN/DE/ZH language switcher to impressum.html and datenschutz.html
Copilot Mar 2, 2026
9697251
Add Noto Sans SC font to fix Chinese character rendering (white boxes)
Copilot Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 121 additions & 15 deletions datenschutz.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+SC:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<style>
:root {
color-scheme: dark;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-family: "Inter", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
Expand Down Expand Up @@ -78,6 +78,39 @@
border-top: 1px solid rgba(148, 163, 184, 0.15);
padding-top: 24px;
}
.language-switcher {
position: fixed;
top: 24px;
right: 24px;
z-index: 10000;
display: flex;
gap: 8px;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 999px;
padding: 6px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.4);
}
.lang-btn {
appearance: none;
border: none;
background: transparent;
color: #94a3b8;
padding: 8px 16px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.lang-btn:hover { color: #e2e8f0; background: rgba(148, 163, 184, 0.1); }
.lang-btn.active {
background: linear-gradient(135deg, #38bdf8, #0ea5e9);
color: #0f172a;
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}
@media (max-width: 640px) {
body { padding: 24px 16px; }
main { padding: 40px 24px; gap: 24px; }
Expand All @@ -86,49 +119,54 @@
</style>
</head>
<body>
<div class="language-switcher">
<button class="lang-btn" data-lang="en" aria-label="Switch to English">EN</button>
<button class="lang-btn active" data-lang="de" aria-label="Switch to German">DE</button>
<button class="lang-btn" data-lang="zh" aria-label="Switch to Chinese">ZH</button>
</div>
<main>
<div class="nav-links">
<a class="back-link" href="index.html">&#8592; Zurück zur Startseite</a>
<a class="back-link" href="impressum.html">Impressum</a>
<a class="back-link" href="index.html" data-i18n="backLink">&#8592; Zurück zur Startseite</a>
<a class="back-link" href="impressum.html" data-i18n="imprintLink">Impressum</a>
</div>

<h1>Datenschutzerklärung</h1>
<h1 data-i18n="title">Datenschutzerklärung</h1>

<!-- =====================================================================
DATENSCHUTZ CONTENT – edit the fields below freely
===================================================================== -->

<div class="section">
<h2>1. Verantwortlicher</h2>
<h2 data-i18n="section1Title">1. Verantwortlicher</h2>
<address>
XMenu<br />
28259 Huchting/Schwachhausen<br />
Deutschland<br />
<span data-i18n="country">Deutschland</span><br />
E-Mail: <a href="mailto:support@xmenu.dev">support@xmenu.dev</a>
</address>
</div>

<div class="section">
<h2>2. Erhebung und Speicherung personenbezogener Daten</h2>
<p>
<h2 data-i18n="section2Title">2. Erhebung und Speicherung personenbezogener Daten</h2>
<p data-i18n="section2Body">
Datenschutzhinweis
Diese Website verwendet keine Cookies und setzt keine Tracking- oder Analyse-Tools ein. Bei der rein informatorischen Nutzung werden keine personenbezogenen Daten erfasst.
Wenn Sie einen Account erstellen oder sich anmelden, erfolgt die Verarbeitung der dafür erforderlichen Daten über den Dienstleister Supabase. Dabei kann es im Rahmen der Account-Verwaltung zur Verarbeitung personenbezogener Daten kommen.
</p>
</div>

<div class="section">
<h2>3. Cookies</h2>
<p>
<h2 data-i18n="section3Title">3. Cookies</h2>
<p data-i18n="section3Body">
Diese Website verwendet keine Cookies, die personenbezogene Daten
speichern. Es werden ausschließlich technisch notwendige Cookies
verwendet, die für den Betrieb der Website erforderlich sind.
</p>
</div>

<div class="section">
<h2>4. Ihre Rechte</h2>
<p>
<h2 data-i18n="section4Title">4. Ihre Rechte</h2>
<p data-i18n="section4Body">
Sie haben das Recht auf Auskunft über die Sie betreffenden
personenbezogenen Daten sowie auf Berichtigung, Löschung oder
Einschränkung der Verarbeitung. Zur Ausübung Ihrer Rechte wenden Sie
Expand All @@ -137,14 +175,82 @@ <h2>4. Ihre Rechte</h2>
</div>

<div class="section">
<h2>5. Kontakt</h2>
<p>
<h2 data-i18n="section5Title">5. Kontakt</h2>
<p data-i18n="section5Body">
Bei Fragen zum Datenschutz erreichen Sie uns unter:<br />
E-Mail: <a href="mailto:support@xmenu.dev">support@xmenu.dev</a>
</p>
</div>

<!-- ===================================================================== -->
</main>
<script>
const translations = {
de: {
backLink: "\u2190 Zurück zur Startseite",
imprintLink: "Impressum",
title: "Datenschutzerklärung",
section1Title: "1. Verantwortlicher",
country: "Deutschland",
section2Title: "2. Erhebung und Speicherung personenbezogener Daten",
section2Body: "Datenschutzhinweis – Diese Website verwendet keine Cookies und setzt keine Tracking- oder Analyse-Tools ein. Bei der rein informatorischen Nutzung werden keine personenbezogenen Daten erfasst. Wenn Sie einen Account erstellen oder sich anmelden, erfolgt die Verarbeitung der dafür erforderlichen Daten über den Dienstleister Supabase. Dabei kann es im Rahmen der Account-Verwaltung zur Verarbeitung personenbezogener Daten kommen.",
section3Title: "3. Cookies",
section3Body: "Diese Website verwendet keine Cookies, die personenbezogene Daten speichern. Es werden ausschließlich technisch notwendige Cookies verwendet, die für den Betrieb der Website erforderlich sind.",
section4Title: "4. Ihre Rechte",
section4Body: "Sie haben das Recht auf Auskunft über die Sie betreffenden personenbezogenen Daten sowie auf Berichtigung, Löschung oder Einschränkung der Verarbeitung. Zur Ausübung Ihrer Rechte wenden Sie sich bitte an: support@xmenu.dev",
section5Title: "5. Kontakt",
section5Body: "Bei Fragen zum Datenschutz erreichen Sie uns unter: E-Mail: support@xmenu.dev"
},
en: {
backLink: "\u2190 Back to Home",
imprintLink: "Legal Notice",
title: "Privacy Policy",
section1Title: "1. Controller",
country: "Germany",
section2Title: "2. Collection and Storage of Personal Data",
section2Body: "Privacy Notice – This website does not use cookies and does not employ any tracking or analytics tools. When using the site for informational purposes only, no personal data is collected. If you create an account or sign in, the required data is processed by our service provider Supabase. Personal data may be processed in the context of account management.",
section3Title: "3. Cookies",
section3Body: "This website does not use cookies that store personal data. Only technically necessary cookies are used that are required for the operation of the website.",
section4Title: "4. Your Rights",
section4Body: "You have the right to access the personal data concerning you, as well as the right to rectification, erasure or restriction of processing. To exercise your rights, please contact: support@xmenu.dev",
section5Title: "5. Contact",
section5Body: "For questions about data protection, please contact us at: Email: support@xmenu.dev"
},
zh: {
backLink: "\u2190 返回主页",
imprintLink: "法律声明",
title: "隐私政策",
section1Title: "1. 数据控制者",
country: "德国",
section2Title: "2. 个人数据的收集与存储",
section2Body: "隐私声明——本网站不使用 Cookie，也不使用任何跟踪或分析工具。仅作信息性浏览时，不会收集任何个人数据。如果您创建账户或登录，所需数据将由我们的服务提供商 Supabase 进行处理。在账户管理过程中可能涉及个人数据的处理。",
section3Title: "3. Cookie",
section3Body: "本网站不使用存储个人数据的 Cookie。仅使用网站运营所必需的技术性 Cookie。",
section4Title: "4. 您的权利",
section4Body: "您有权查阅与您相关的个人数据，以及要求更正、删除或限制处理。如需行使您的权利，请联系：support@xmenu.dev",
section5Title: "5. 联系方式",
section5Body: "如有数据保护方面的问题，请通过以下方式联系我们：电子邮件：support@xmenu.dev"
}
};

function setLanguage(lang) {
const t = translations[lang] || translations.de;
document.querySelectorAll("[data-i18n]").forEach(el => {
const key = el.getAttribute("data-i18n");
if (t[key] !== undefined) el.textContent = t[key];
});
document.documentElement.lang = lang;
document.querySelectorAll(".lang-btn").forEach(btn => {
btn.classList.toggle("active", btn.getAttribute("data-lang") === lang);
});
localStorage.setItem("xmenu-lang", lang);
}

document.querySelectorAll(".lang-btn").forEach(btn => {
btn.addEventListener("click", () => setLanguage(btn.getAttribute("data-lang")));
});

setLanguage(localStorage.getItem("xmenu-lang") || "de");
</script>
</body>
</html>
116 changes: 105 additions & 11 deletions impressum.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+SC:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<style>
:root {
color-scheme: dark;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-family: "Inter", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
Expand Down Expand Up @@ -78,6 +78,39 @@
border-top: 1px solid rgba(148, 163, 184, 0.15);
padding-top: 24px;
}
.language-switcher {
position: fixed;
top: 24px;
right: 24px;
z-index: 10000;
display: flex;
gap: 8px;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 999px;
padding: 6px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.4);
}
.lang-btn {
appearance: none;
border: none;
background: transparent;
color: #94a3b8;
padding: 8px 16px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.lang-btn:hover { color: #e2e8f0; background: rgba(148, 163, 184, 0.1); }
.lang-btn.active {
background: linear-gradient(135deg, #38bdf8, #0ea5e9);
color: #0f172a;
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}
@media (max-width: 640px) {
body { padding: 24px 16px; }
main { padding: 40px 24px; gap: 24px; }
Expand All @@ -86,45 +119,50 @@
</style>
</head>
<body>
<div class="language-switcher">
<button class="lang-btn" data-lang="en" aria-label="Switch to English">EN</button>
<button class="lang-btn active" data-lang="de" aria-label="Switch to German">DE</button>
<button class="lang-btn" data-lang="zh" aria-label="Switch to Chinese">ZH</button>
</div>
<main>
<div class="nav-links">
<a class="back-link" href="index.html">&#8592; Zurück zur Startseite</a>
<a class="back-link" href="datenschutz.html">Datenschutz</a>
<a class="back-link" href="index.html" data-i18n="backLink">&#8592; Zurück zur Startseite</a>
<a class="back-link" href="datenschutz.html" data-i18n="privacyLink">Datenschutz</a>
</div>

<h1>Impressum</h1>
<h1 data-i18n="title">Impressum</h1>

<!-- =====================================================================
IMPRESSUM CONTENT – edit the fields below freely
===================================================================== -->

<div class="section">
<h2>Angaben gemäß § 5 TMG</h2>
<h2 data-i18n="section1Title">Angaben gemäß § 5 TMG</h2>
<address>
XMenu<br />
28259 Huchting/Schwachhausen<br />
Deutschland
<span data-i18n="country">Deutschland</span>
</address>
</div>

<div class="section">
<h2>Kontakt</h2>
<h2 data-i18n="section2Title">Kontakt</h2>
<p>
E-Mail: <a href="mailto:support@xmenu.dev">support@xmenu.dev</a>
</p>
</div>

<div class="section">
<h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
<h2 data-i18n="section3Title">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
<address>
XMenu<br />
28259 Huchting
</address>
</div>

<div class="section">
<h2>Haftungsausschluss</h2>
<p>
<h2 data-i18n="section4Title">Haftungsausschluss</h2>
<p data-i18n="section4Body">
Die Inhalte dieser Website wurden mit größtmöglicher Sorgfalt erstellt.
Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir
jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs. 1
Expand All @@ -135,5 +173,61 @@ <h2>Haftungsausschluss</h2>

<!-- ===================================================================== -->
</main>
<script>
const translations = {
de: {
backLink: "\u2190 Zurück zur Startseite",
privacyLink: "Datenschutz",
title: "Impressum",
section1Title: "Angaben gemäß § 5 TMG",
country: "Deutschland",
section2Title: "Kontakt",
section3Title: "Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV",
section4Title: "Haftungsausschluss",
section4Body: "Die Inhalte dieser Website wurden mit größtmöglicher Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs. 1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich."
},
en: {
backLink: "\u2190 Back to Home",
privacyLink: "Privacy Policy",
title: "Legal Notice",
section1Title: "Company Information",
country: "Germany",
section2Title: "Contact",
section3Title: "Editorial Responsibility",
section4Title: "Disclaimer",
section4Body: "The contents of this website have been compiled with the utmost care. However, we cannot guarantee the accuracy, completeness or timeliness of the content. As a service provider, we are responsible for our own content on these pages in accordance with general laws."
},
zh: {
backLink: "\u2190 返回主页",
privacyLink: "隐私政策",
title: "法律声明",
section1Title: "公司信息",
country: "德国",
section2Title: "联系方式",
section3Title: "内容责任",
section4Title: "免责声明",
section4Body: "本网站内容经过精心编写，但我们无法保证内容的准确性、完整性和时效性。作为服务提供商，我们依据法律对本网站自有内容负责。"
}
};

function setLanguage(lang) {
const t = translations[lang] || translations.de;
document.querySelectorAll("[data-i18n]").forEach(el => {
const key = el.getAttribute("data-i18n");
if (t[key] !== undefined) el.textContent = t[key];
});
document.documentElement.lang = lang;
document.querySelectorAll(".lang-btn").forEach(btn => {
btn.classList.toggle("active", btn.getAttribute("data-lang") === lang);
});
localStorage.setItem("xmenu-lang", lang);
}

document.querySelectorAll(".lang-btn").forEach(btn => {
btn.addEventListener("click", () => setLanguage(btn.getAttribute("data-lang")));
});

setLanguage(localStorage.getItem("xmenu-lang") || "de");
</script>
</body>
</html>
Loading