mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
MacBook
1e3bb94660
Bug Fixes: - index.html: remove duplicate <title> 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
91 lines
4.6 KiB
HTML
91 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Join Room | KoalaSync</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="icon" type="image/png" href="assets/logo.png">
|
|
<meta name="robots" content="noindex">
|
|
<script>
|
|
(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;
|
|
var titles = { en: 'Join Room | KoalaSync', de: 'Raum beitreten | KoalaSync' };
|
|
document.title = titles[activeLang] || titles.en;
|
|
})();
|
|
|
|
function toggleLanguage(e) {
|
|
if(e) e.preventDefault();
|
|
var html = document.documentElement;
|
|
var currentIsEnglish = html.classList.contains('lang-en');
|
|
var newLang = currentIsEnglish ? 'de' : 'en';
|
|
html.classList.remove('lang-en', 'lang-de');
|
|
html.classList.add('lang-' + newLang);
|
|
html.lang = newLang;
|
|
localStorage.setItem('koala_lang', newLang);
|
|
var titles = { en: 'Join Room | KoalaSync', de: 'Raum beitreten | KoalaSync' };
|
|
document.title = titles[newLang] || titles.en;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="bg-blobs">
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></div>
|
|
</div>
|
|
|
|
<nav>
|
|
<div class="container nav-content">
|
|
<a href="index.html" class="logo-area" style="text-decoration: none;">
|
|
<img src="assets/logo.png" alt="KoalaSync Logo">
|
|
<span>KoalaSync</span>
|
|
</a>
|
|
<button class="hamburger" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">☰</button>
|
|
<div class="nav-links">
|
|
<a href="index.html">Home</a>
|
|
<a href="https://github.com/shik3i/KoalaSync" target="_blank">GitHub</a>
|
|
<a class="lang-toggle" onclick="toggleLanguage(event)">🌍 EN/DE</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="legal-content join-card">
|
|
<div class="legal-card" id="join-container" data-reveal style="padding: 2.5rem;">
|
|
<div class="room-badge"><span lang="en">INVITATION DETECTED</span><span lang="de">EINLADUNG ERKANNT</span></div>
|
|
<h1 id="join-title" style="font-size: 2rem; margin-bottom: 1rem;"><span lang="en">Ready to sync?</span><span lang="de">Bereit zum Synchronisieren?</span></h1>
|
|
<p id="join-desc" style="text-align: center; color: var(--text-muted); margin-bottom: 2rem; font-size: 0.9rem;">
|
|
<span lang="en">You've been invited to join a synchronized session.</span>
|
|
<span lang="de">Du wurdest eingeladen, einer synchronisierten Sitzung beizutreten.</span>
|
|
</p>
|
|
|
|
<div id="room-info-box" style="background: rgba(255,255,255,0.03); padding: 2rem; border-radius: 20px; margin-bottom: 2rem; border: 1px solid var(--glass-border); text-align: center; position: relative; overflow: hidden;">
|
|
<div style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 0.75rem; font-weight: 700;">Room ID</div>
|
|
<div id="display-room-id" style="font-size: 1.75rem; font-weight: 800; letter-spacing: 1px; color: white;">-------</div>
|
|
</div>
|
|
|
|
<div id="join-actions" style="display: flex; flex-direction: column; gap: 1rem;">
|
|
<div style="text-align: center; color: var(--text-muted); font-size: 0.8rem;"><span lang="en">Detecting extension...</span><span lang="de">Erweiterung wird erkannt...</span></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2026 KoalaSync. Open source under the MIT License.</p>
|
|
<p style="font-size: 0.8rem; margin-top: 0.5rem;">No data is stored on our servers. Pure RAM-based relay.</p>
|
|
<div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; gap: 1.5rem;">
|
|
<a href="impressum.html" style="color: var(--text-muted); text-decoration: none;">Impressum</a>
|
|
<a href="datenschutz.html" style="color: var(--text-muted); text-decoration: none;">Datenschutz</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|