diff --git a/Caddyfile.example b/Caddyfile.example index 4eea358..aaee10e 100644 --- a/Caddyfile.example +++ b/Caddyfile.example @@ -17,7 +17,7 @@ sync.koalastuff.net { # Security Headers & Content Security Policy (CSP) header { # Strict Content Security Policy (restricts scripts and connections to self, forbids frames) - Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none';" + Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none';" # Prevent FLoC tracking Permissions-Policy interest-cohort=() # Security best practices diff --git a/website/README.md b/website/README.md index 1e6193d..26709bc 100644 --- a/website/README.md +++ b/website/README.md @@ -44,7 +44,7 @@ sync.koalastuff.net { # Security Headers & Content Security Policy (CSP) header { # Strict Content Security Policy (restricts scripts and connections to self, forbids frames) - Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none';" + Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none';" # Prevent FLoC tracking Permissions-Policy interest-cohort=() # Security best practices diff --git a/website/app.js b/website/app.js index 2a0f050..d607311 100644 --- a/website/app.js +++ b/website/app.js @@ -350,6 +350,61 @@ document.addEventListener('DOMContentLoaded', () => { }); } + // Mobile Hamburger Menu Toggle + const hamburger = document.querySelector('.hamburger'); + const navLinks = document.querySelector('.nav-links'); + if (hamburger && navLinks) { + hamburger.addEventListener('click', () => { + navLinks.classList.toggle('open'); + }); + } + + // Language Selection Umschalter + const toggleLanguage = (e) => { + if (e) e.preventDefault(); + const html = document.documentElement; + const currentIsEnglish = html.classList.contains('lang-en'); + const newLang = currentIsEnglish ? 'de' : 'en'; + html.classList.remove('lang-en', 'lang-de'); + html.classList.add('lang-' + newLang); + html.lang = newLang; + localStorage.setItem('koala_lang', newLang); + + // Update titles dynamically based on page + var path = window.location.pathname; + var isIndex = path === '/' || path.endsWith('index.html') || path.split('/').pop() === ''; + var isJoin = path.endsWith('join.html'); + + if (isIndex) { + const titles = { + en: 'KoalaSync | Real-time Video Synchronization for Friends', + de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' + }; + document.title = titles[newLang] || titles.en; + } else if (isJoin) { + const titles = { + en: 'Join Room | KoalaSync', + de: 'Raum beitreten | KoalaSync' + }; + document.title = titles[newLang] || titles.en; + } + }; + + document.querySelectorAll('.lang-toggle').forEach(btn => { + btn.addEventListener('click', toggleLanguage); + }); + + // Impressum Email Obfuscation Click Reveal + document.querySelectorAll('.email-reveal').forEach(el => { + el.addEventListener('click', function() { + const user = this.getAttribute('data-user'); + const domain = this.getAttribute('data-domain'); + if (user && domain) { + this.innerHTML = `${user}@${domain}`; + } + }); + }); + checkInvite(); updateDynamicVersion(); }); diff --git a/website/datenschutz.html b/website/datenschutz.html index 045f4aa..363ea3b 100644 --- a/website/datenschutz.html +++ b/website/datenschutz.html @@ -7,26 +7,7 @@ - +
@@ -41,11 +22,11 @@ KoalaSync Logo KoalaSync - +
StartseiteHome - GitHub - 🌍 EN/DE + GitHub + 🌐 EN/DE
diff --git a/website/impressum.html b/website/impressum.html index 66176d8..bf7906d 100644 --- a/website/impressum.html +++ b/website/impressum.html @@ -7,26 +7,7 @@ - +
@@ -41,11 +22,11 @@ KoalaSync Logo KoalaSync - +
StartseiteHome - GitHub - 🌍 EN/DE + GitHub + 🌐 EN/DE
@@ -68,8 +49,8 @@

Administrator KoalaSync (Privatperson)

Administrator KoalaSync (Private Individual)

-

E-Mail: [E-Mail anzeigen]

-

E-Mail: [Show Email]

+

E-Mail: [E-Mail anzeigen]

+

E-Mail: [Show Email]

diff --git a/website/index.html b/website/index.html index cf97042..bad76c0 100644 --- a/website/index.html +++ b/website/index.html @@ -13,30 +13,7 @@ - + @@ -52,7 +29,7 @@ KoalaSync Logo KoalaSync - +
FeaturesFunktionen How it worksSo funktioniert's @@ -60,7 +37,7 @@ GitHub - + EN/DE diff --git a/website/join.html b/website/join.html index 1abedbc..64a2018 100644 --- a/website/join.html +++ b/website/join.html @@ -7,30 +7,7 @@ - +
@@ -45,14 +22,14 @@ KoalaSync Logo KoalaSync - +
StartseiteHome GitHub - + EN/DE diff --git a/website/lang-init.js b/website/lang-init.js new file mode 100644 index 0000000..fd07b20 --- /dev/null +++ b/website/lang-init.js @@ -0,0 +1,26 @@ +(function() { + var savedLang = localStorage.getItem('koala_lang'); + var browserLang = navigator.language.startsWith('de') ? 'de' : 'en'; + var activeLang = savedLang || browserLang; + document.documentElement.classList.add('lang-' + activeLang); + document.documentElement.lang = activeLang; + + // Update titles dynamically based on page + var path = window.location.pathname; + var isIndex = path === '/' || path.endsWith('index.html') || path.split('/').pop() === ''; + var isJoin = path.endsWith('join.html'); + + if (isIndex) { + var titles = { + en: 'KoalaSync | Real-time Video Synchronization for Friends', + de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' + }; + document.title = titles[activeLang] || titles.en; + } else if (isJoin) { + var titles = { + en: 'Join Room | KoalaSync', + de: 'Raum beitreten | KoalaSync' + }; + document.title = titles[activeLang] || titles.en; + } +})();