From 1e3bb9466004e109de93cc06253468ad3c95764d Mon Sep 17 00:00:00 2001 From: MacBook Date: Mon, 4 May 2026 05:49:16 +0200 Subject: [PATCH] website: fix HTML issues, mobile nav, i18n, and SEO MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bug Fixes: - index.html: remove duplicate tags (invalid HTML), use single title + JS swap; fix og:image relative→absolute URL (logo.png) - join.html: fix hardcoded lang=de, add language detection IIFE, add lang toggle to nav, make badge/title/desc/actions bilingual, add missing </head> closing tag, add noindex meta - app.js: join status handler was German-only; now fully bilingual (Success/Error titles, countdown, close/retry button labels) Improvements: - Add Firefox 'Add to Firefox' button to hero CTA (placeholder href=#) - impressum.html / datenschutz.html: add noindex meta to keep legal pages out of search results - robots.txt: add Sitemap directive for SEO crawlability - sitemap.xml: new file listing main page + legal pages with priorities - style.css: mobile nav hamburger menu (☰) replaces display:none blackout; nav-links drop down on mobile with backdrop blur - style.css: cta-group flex-wrap for narrow screens - Hamburger button added to all 4 page navs --- website/app.js | 21 ++++++++++++++------- website/datenschutz.html | 2 ++ website/impressum.html | 2 ++ website/index.html | 23 +++++++++++------------ website/join.html | 40 ++++++++++++++++++++++++++++++++++------ website/robots.txt | 2 ++ website/sitemap.xml | 18 ++++++++++++++++++ website/style.css | 31 +++++++++++++++++++++++++++++++ 8 files changed, 114 insertions(+), 25 deletions(-) create mode 100644 website/sitemap.xml diff --git a/website/app.js b/website/app.js index 2b96792..331df51 100644 --- a/website/app.js +++ b/website/app.js @@ -161,14 +161,18 @@ document.addEventListener('DOMContentLoaded', () => { if (success) { if (icon) icon.textContent = '✅'; - title.textContent = 'Erfolgreich!'; + const isDE = document.documentElement.classList.contains('lang-de'); + title.textContent = isDE ? 'Erfolgreich!' : 'Success!'; let count = 3; const updateCountdown = () => { - desc.innerHTML = `Du bist dem Raum beigetreten. <br><span style="color:var(--accent); font-weight:bold;">Dieser Tab schließt sich in ${count} Sekunden...</span>`; + const closingMsg = isDE + ? `Du bist dem Raum beigetreten. <br><span style="color:var(--accent); font-weight:bold;">Dieser Tab schließt sich in ${count} Sekunden...</span>` + : `You joined the room. <br><span style="color:var(--accent); font-weight:bold;">This tab will close in ${count} seconds...</span>`; + desc.innerHTML = closingMsg; if (count <= 0) { window.close(); - desc.textContent = 'Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schließen.'; + desc.textContent = isDE ? 'Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schließen.' : 'Joined successfully! You can close this tab manually.'; } else { count--; setTimeout(updateCountdown, 1000); @@ -176,12 +180,15 @@ document.addEventListener('DOMContentLoaded', () => { }; updateCountdown(); - actions.innerHTML = '<button class="primary" onclick="window.close()" style="background:var(--success); width: 100%;">TAB JETZT SCHLIESSEN</button>'; + const closeLabel = isDE ? 'TAB JETZT SCHLIESSEN' : 'CLOSE TAB NOW'; + actions.innerHTML = `<button class="primary" onclick="window.close()" style="background:var(--success); width: 100%;">${closeLabel}</button>`; } else { if (icon) icon.textContent = '❌'; - title.textContent = 'Fehler'; - desc.textContent = `Beitritt fehlgeschlagen: ${message}`; - actions.innerHTML = '<button class="primary" onclick="location.reload()" style="width: 100%;">ERNEUT VERSUCHEN</button>'; + const isDE = document.documentElement.classList.contains('lang-de'); + title.textContent = isDE ? 'Fehler' : 'Error'; + desc.textContent = isDE ? `Beitritt fehlgeschlagen: ${message}` : `Join failed: ${message}`; + const retryLabel = isDE ? 'ERNEUT VERSUCHEN' : 'TRY AGAIN'; + actions.innerHTML = `<button class="primary" onclick="location.reload()" style="width: 100%;">${retryLabel}</button>`; } } else { const banner = document.getElementById('koala-banner'); diff --git a/website/datenschutz.html b/website/datenschutz.html index 44bd914..045f4aa 100644 --- a/website/datenschutz.html +++ b/website/datenschutz.html @@ -6,6 +6,7 @@ <title>Datenschutz / Privacy Policy | KoalaSync + @@ -58,6 +52,7 @@ KoalaSync Logo KoalaSync +
FeaturesFunktionen How it worksSo funktioniert's @@ -84,6 +79,10 @@ Add to ChromeZu Chrome hinzufügen + + 🦊 + Add to FirefoxZu Firefox hinzufügen + GitHub Repo diff --git a/website/join.html b/website/join.html index f375379..c258ed7 100644 --- a/website/join.html +++ b/website/join.html @@ -1,11 +1,36 @@ - + - Beitreten | KoalaSync + Join Room | KoalaSync + +
@@ -20,19 +45,22 @@ KoalaSync Logo KoalaSync +
Home GitHub + 🌍 EN/DE
diff --git a/website/robots.txt b/website/robots.txt index c2a49f4..4aa4a23 100644 --- a/website/robots.txt +++ b/website/robots.txt @@ -1,2 +1,4 @@ User-agent: * Allow: / + +Sitemap: https://koalasync.shik3i.net/sitemap.xml diff --git a/website/sitemap.xml b/website/sitemap.xml new file mode 100644 index 0000000..a7d4e55 --- /dev/null +++ b/website/sitemap.xml @@ -0,0 +1,18 @@ + + + + https://koalasync.shik3i.net/ + monthly + 1.0 + + + https://koalasync.shik3i.net/impressum.html + yearly + 0.3 + + + https://koalasync.shik3i.net/datenschutz.html + yearly + 0.3 + + diff --git a/website/style.css b/website/style.css index eafd68d..e497d10 100644 --- a/website/style.css +++ b/website/style.css @@ -399,9 +399,26 @@ footer { } .cta-group { justify-content: center; + flex-wrap: wrap; } .nav-links { display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + flex-direction: column; + background: rgba(15, 23, 42, 0.95); + backdrop-filter: blur(12px); + padding: 1rem 2rem; + gap: 1rem; + border-bottom: 1px solid var(--glass-border); + } + .nav-links.open { + display: flex; + } + .hamburger { + display: flex; } .legal-card { padding: 1.5rem; @@ -425,3 +442,17 @@ html.lang-de [lang="en"] { .lang-toggle:hover { color: var(--accent); } + +/* --- Hamburger Menu --- */ +.hamburger { + display: none; + align-items: center; + justify-content: center; + background: none; + border: none; + color: var(--text); + font-size: 1.5rem; + cursor: pointer; + padding: 0.25rem; + line-height: 1; +}