From d59fc4777d4c2cb79da17bc1da5de5d5644f0664 Mon Sep 17 00:00:00 2001 From: Timo <6156589+Shik3i@users.noreply.github.com> Date: Thu, 4 Jun 2026 15:18:57 +0200 Subject: [PATCH] chore: release v2.1.0 with stabilization and audit fixes --- CHANGELOG.md | 12 + extension/background.js | 17 +- extension/bridge.js | 4 +- extension/content.js | 11 +- extension/i18n.js | 43 +++- extension/popup.html | 2 +- extension/popup.js | 1 + website/app.js | 83 +++++- website/build.js | 24 +- website/datenschutz-de.html | 169 +++++++++++++ website/datenschutz.html | 236 ++---------------- website/impressum-de.html | 156 ++++++++++++ website/impressum.html | 210 ++-------------- website/imprint.html | 154 ++++++++++++ website/lang-init.js | 25 +- website/locales/de.json | 4 +- website/locales/en.json | 4 +- website/locales/es.json | 4 +- website/locales/fr.json | 4 +- website/locales/it.json | 6 +- website/locales/ja.json | 6 +- website/locales/ko.json | 6 +- website/locales/nl.json | 6 +- website/locales/pl.json | 6 +- website/locales/pt-BR.json | 4 +- website/locales/pt.json | 6 +- website/locales/ru.json | 4 +- website/locales/tr.json | 6 +- website/privacy.html | 169 +++++++++++++ website/sitemap.xml | 194 +++++++++++++- website/style.css | 4 + website/template.html | 4 +- website/www/app.877f29ac.min.js | 59 +++++ website/www/app.bd666530.min.js | 59 ----- website/www/datenschutz.html | 236 ++---------------- website/www/de/datenschutz.html | 169 +++++++++++++ website/www/de/impressum.html | 156 ++++++++++++ website/www/de/index.html | 12 +- website/www/es/index.html | 12 +- website/www/fr/index.html | 12 +- website/www/impressum.html | 210 ++-------------- website/www/imprint.html | 154 ++++++++++++ website/www/index.html | 12 +- website/www/it/index.html | 12 +- website/www/ja/index.html | 12 +- website/www/join.html | 8 +- website/www/ko/index.html | 12 +- website/www/lang-init.1b13bbf2.min.js | 1 + website/www/lang-init.efcb118a.min.js | 1 - website/www/nl/index.html | 12 +- website/www/pl/index.html | 12 +- website/www/privacy.html | 169 +++++++++++++ website/www/pt-BR/index.html | 12 +- website/www/pt/index.html | 12 +- website/www/ru/index.html | 12 +- website/www/sitemap.xml | 194 +++++++++++++- ...ca56f45.min.css => style.39c35bf7.min.css} | 2 +- website/www/tr/index.html | 12 +- 58 files changed, 2119 insertions(+), 1039 deletions(-) create mode 100644 website/datenschutz-de.html create mode 100644 website/impressum-de.html create mode 100644 website/imprint.html create mode 100644 website/privacy.html create mode 100644 website/www/app.877f29ac.min.js delete mode 100644 website/www/app.bd666530.min.js create mode 100644 website/www/de/datenschutz.html create mode 100644 website/www/de/impressum.html create mode 100644 website/www/imprint.html create mode 100644 website/www/lang-init.1b13bbf2.min.js delete mode 100644 website/www/lang-init.efcb118a.min.js create mode 100644 website/www/privacy.html rename website/www/{style.3ca56f45.min.css => style.39c35bf7.min.css} (72%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 020ffa0..681cf26 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,18 @@ All notable changes to the KoalaSync browser extension and relay server. - Added flag emojis to language selector dropdowns in both the extension popup and landing/utility web pages for quicker visual identification. - Added 181 translation keys parity validation suite checks for the new languages. +### Fixed & Hardened (Extension Audit) +- Guarded all website `localStorage` interactions to prevent initialization/join flow script failures on privacy-hardened or cookie-blocked browser configurations. +- Added robust validation null-guards to `chrome.runtime.onMessage` listeners across all extension scripts (`bridge.js`, `content.js`, `background.js`, `popup.js`) to reject unexpected runtime messages. +- Guarded CustomEvent payload destructuring in `bridge.js` to ensure stability when receiving third-party page events. +- Wrapped `video.currentTime` seeking adjustments during forced sync in content scripts with exception handling to absorb uninitialized video state DOMExceptions. +- Added payload validation guards on incoming Socket.IO events within the background script's event handlers to secure against malformed server updates. +- Prevented noisy browser console exceptions from context invalidation in target tabs by catching promise rejections on extension message dispatches. + +### Performance +- Implemented in-memory language dictionary caching in the background script to completely avoid redundant extension package filesystem reads during translations. + + --- ## [v2.0.8] — 2026-06-03 diff --git a/extension/background.js b/extension/background.js index 09e0caf..46a4c33 100644 --- a/extension/background.js +++ b/extension/background.js @@ -690,6 +690,10 @@ function addToHistory(action, senderId) { // --- Event Handlers --- function handleServerEvent(event, data) { + if (!data) { + addLog(`Ignored server event ${event} due to empty payload`, 'warn'); + return; + } switch (event) { case EVENTS.ROOM_DATA: currentRoom = data; @@ -1292,6 +1296,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { }); async function handleAsyncMessage(message, sender, sendResponse) { + if (!message) return; await ensureState(); if (message.type === 'CONNECT') { @@ -1448,15 +1453,19 @@ async function handleAsyncMessage(message, sender, sendResponse) { localSeq++; chrome.storage.session.set({ localSeq }); updateLastAction(message.action, 'You', timestamp); - lastActionState.targetTime = message.payload?.targetTime !== undefined ? message.payload.targetTime : message.payload?.currentTime; + + const payload = message.payload || {}; + lastActionState.targetTime = payload.targetTime !== undefined ? payload.targetTime : payload.currentTime; if (storageInitialized) chrome.storage.session.set({ lastActionState }); - message.payload.actionTimestamp = timestamp; - message.payload.seq = localSeq; + + payload.actionTimestamp = timestamp; + payload.seq = localSeq; + message.payload = payload; // Local Reactive Update updateLocalPeerState(peerId, { playbackState: message.action === EVENTS.PLAY ? 'playing' : (message.action === EVENTS.PAUSE ? 'paused' : undefined), - currentTime: message.payload.currentTime !== undefined ? message.payload.currentTime : (message.payload.targetTime !== undefined ? message.payload.targetTime : undefined) + currentTime: payload.currentTime !== undefined ? payload.currentTime : (payload.targetTime !== undefined ? payload.targetTime : undefined) }); if (message.action === EVENTS.FORCE_SYNC_PREPARE) { diff --git a/extension/bridge.js b/extension/bridge.js index cbc56f0..d4584cb 100644 --- a/extension/bridge.js +++ b/extension/bridge.js @@ -10,6 +10,7 @@ document.documentElement.dataset.koalasyncInstalled = 'true'; // 2. Listen for Join Requests from the Website window.addEventListener('KOALASYNC_JOIN_REQUEST', (e) => { + if (!e || !e.detail) return; const { roomId, password, useCustomServer, serverUrl } = e.detail; chrome.runtime.sendMessage({ type: 'WEB_JOIN_REQUEST', @@ -17,11 +18,12 @@ window.addEventListener('KOALASYNC_JOIN_REQUEST', (e) => { password, useCustomServer, serverUrl - }); + }).catch(() => {}); }); // 3. Listen for Status Updates from the Extension and relay to Website chrome.runtime.onMessage.addListener((msg) => { + if (!msg) return; if (msg.type === 'JOIN_STATUS') { const detail = { success: msg.success, message: msg.message }; // Firefox MV3 content scripts run in an isolated world. When dispatching diff --git a/extension/content.js b/extension/content.js index ba8d37d..1d0824d 100644 --- a/extension/content.js +++ b/extension/content.js @@ -344,6 +344,7 @@ // Listen for commands from background.js chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + if (!message) return; if (message.action === 'get_current_time') { const video = findVideo(); sendResponse({ currentTime: video ? video.currentTime : null }); @@ -366,7 +367,7 @@ if (isDifferentEpisode(senderTitle, myTitle)) { reportLog(`Episode mismatch: sender="${senderTitle || '?'}" vs mine="${myTitle || '?'}" — skipping ${action}. Disable "Auto-Sync next Episode" in settings if this causes issues.`, 'warn'); if (action !== EVENTS.FORCE_SYNC_PREPARE && action !== EVENTS.FORCE_SYNC_EXECUTE) { - chrome.runtime.sendMessage({ type: 'CMD_ACK', actionTimestamp: message.actionTimestamp, commandSenderId: message.commandSenderId }); + chrome.runtime.sendMessage({ type: 'CMD_ACK', actionTimestamp: message.actionTimestamp, commandSenderId: message.commandSenderId }).catch(() => {}); } return; } @@ -395,7 +396,11 @@ _setSuppress('paused'); _setSuppress('seek'); video.pause(); - video.currentTime = payload.targetTime; + try { + video.currentTime = payload.targetTime; + } catch (e) { + reportLog(`Force Sync Seek Error: ${e.message}`, 'error'); + } pollSeekReady(payload.targetTime).then((ready) => { chrome.runtime.sendMessage({ type: 'FORCE_SYNC_ACK' }).catch(() => {}); if (ready) { @@ -622,7 +627,7 @@ mediaTitle: mediaTitle, timestamp: Date.now() } - }); + }).catch(() => {}); // Trigger proactive heartbeat to push stabilized state scheduleProactiveHeartbeat(); diff --git a/extension/i18n.js b/extension/i18n.js index 7ed4d79..9bfb2c3 100644 --- a/extension/i18n.js +++ b/extension/i18n.js @@ -3,6 +3,8 @@ export const SUPPORTED_LANGUAGES = ['en', 'de', 'fr', 'es', 'pt-BR', 'ru', 'it', export const DEFAULT_LANGUAGE = 'en'; let activeDictionary = {}; +const dictionaryCache = {}; +let currentLanguage = null; /** * Resolves, loads, and merges the target language with the English baseline fallback. @@ -11,13 +13,30 @@ let activeDictionary = {}; export async function loadLocale(langCode) { const resolvedLang = SUPPORTED_LANGUAGES.includes(langCode) ? langCode : DEFAULT_LANGUAGE; + if (currentLanguage === resolvedLang && Object.keys(activeDictionary).length > 0) { + return; + } + + if (dictionaryCache[resolvedLang]) { + activeDictionary = dictionaryCache[resolvedLang]; + currentLanguage = resolvedLang; + return; + } + try { // Load Baseline English - const enResponse = await fetch(chrome.runtime.getURL(`locales/${DEFAULT_LANGUAGE}.json`)); - const enDict = await enResponse.json(); + let enDict; + if (dictionaryCache[DEFAULT_LANGUAGE]) { + enDict = dictionaryCache[DEFAULT_LANGUAGE]; + } else { + const enResponse = await fetch(chrome.runtime.getURL(`locales/${DEFAULT_LANGUAGE}.json`)); + enDict = await enResponse.json(); + dictionaryCache[DEFAULT_LANGUAGE] = enDict; + } if (resolvedLang === DEFAULT_LANGUAGE) { activeDictionary = enDict; + currentLanguage = resolvedLang; return; } @@ -26,15 +45,27 @@ export async function loadLocale(langCode) { const targetDict = await targetResponse.json(); // Airtight Fallback Merge: target overrides en, missing elements fallback to en - activeDictionary = Object.assign({}, enDict, targetDict); + const mergedDict = Object.assign({}, enDict, targetDict); + dictionaryCache[resolvedLang] = mergedDict; + activeDictionary = mergedDict; + currentLanguage = resolvedLang; } catch (err) { console.error('[i18n] Failed to load locale. Defaulting to English:', err); // Fallback directly to static English if fetching fails try { - const enResponse = await fetch(chrome.runtime.getURL(`locales/${DEFAULT_LANGUAGE}.json`)); - activeDictionary = await enResponse.json(); + let enDict; + if (dictionaryCache[DEFAULT_LANGUAGE]) { + enDict = dictionaryCache[DEFAULT_LANGUAGE]; + } else { + const enResponse = await fetch(chrome.runtime.getURL(`locales/${DEFAULT_LANGUAGE}.json`)); + enDict = await enResponse.json(); + dictionaryCache[DEFAULT_LANGUAGE] = enDict; + } + activeDictionary = enDict; + currentLanguage = DEFAULT_LANGUAGE; } catch (_) { activeDictionary = {}; + currentLanguage = null; } } } @@ -46,7 +77,7 @@ export async function loadLocale(langCode) { * @returns {string} Translated string or the key itself */ export function getMessage(key, placeholders = null) { - let msg = activeDictionary[key] || key; + let msg = activeDictionary[key] !== undefined ? String(activeDictionary[key]) : key; if (placeholders && typeof placeholders === 'object') { for (const [k, v] of Object.entries(placeholders)) { msg = msg.replace(new RegExp(`{${k}}`, 'g'), v); diff --git a/extension/popup.html b/extension/popup.html index 1bfb22d..cf6f225 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -497,7 +497,7 @@
- diff --git a/extension/popup.js b/extension/popup.js index 92abeca..020fd0d 100644 --- a/extension/popup.js +++ b/extension/popup.js @@ -1380,6 +1380,7 @@ async function refreshLogs() { } chrome.runtime.onMessage.addListener((msg) => { + if (!msg) return; if (msg.type === 'LOG_UPDATE') { refreshLogs(); if (msg.log && msg.log.type === 'error') { diff --git a/website/app.js b/website/app.js index 80e94c8..0d400f7 100644 --- a/website/app.js +++ b/website/app.js @@ -1,6 +1,22 @@ // KoalaSync Landing Page Logic document.addEventListener('DOMContentLoaded', () => { + const safeGetLocalStorage = (key) => { + try { + return localStorage.getItem(key); + } catch (_) { + return null; + } + }; + + const safeSetLocalStorage = (key, val) => { + try { + localStorage.setItem(key, val); + } catch (_) { + return; + } + }; + // Scroll Reveal Logic (IntersectionObserver for performance) const revealElements = document.querySelectorAll('[data-reveal]'); @@ -456,7 +472,7 @@ document.addEventListener('DOMContentLoaded', () => { // Dynamically localize home links on root dynamic pages (impressum, datenschutz, join) const localizeHomeLinks = () => { - const activeLang = localStorage.getItem('koala_lang') || (navigator.language.startsWith('de') ? 'de' : 'en'); + const activeLang = safeGetLocalStorage('koala_lang') || (navigator.language.startsWith('de') ? 'de' : 'en'); const path = window.location.pathname; const pathSegments = path.split('/'); const isSubdir = pathSegments.some(seg => ['de', 'fr', 'es', 'pt-BR', 'ru', 'it', 'pl', 'tr', 'nl', 'ja', 'ko', 'pt'].includes(seg)); @@ -477,11 +493,39 @@ document.addEventListener('DOMContentLoaded', () => { const path = window.location.pathname; // Save the user's preference - localStorage.setItem('koala_lang', newLang); + safeSetLocalStorage('koala_lang', newLang); + + const isLegalImprint = path.includes('impressum') || path.includes('imprint'); + const isLegalPrivacy = path.includes('datenschutz') || path.includes('privacy'); + + if (isLegalImprint) { + let target; + const hasHtml = path.endsWith('.html'); + if (newLang === 'de') { + target = hasHtml ? 'de/impressum.html' : 'de/impressum'; + if (path.includes('/de/')) target = hasHtml ? 'impressum.html' : 'impressum'; + } else { + target = hasHtml ? 'imprint.html' : 'imprint'; + if (path.includes('/de/')) target = hasHtml ? '../imprint.html' : '../imprint'; + } + window.location.href = target; + return; + } else if (isLegalPrivacy) { + let target; + const hasHtml = path.endsWith('.html'); + if (newLang === 'de') { + target = hasHtml ? 'de/datenschutz.html' : 'de/datenschutz'; + if (path.includes('/de/')) target = hasHtml ? 'datenschutz.html' : 'datenschutz'; + } else { + target = hasHtml ? 'privacy.html' : 'privacy'; + if (path.includes('/de/')) target = hasHtml ? '../privacy.html' : '../privacy'; + } + window.location.href = target; + return; + } // Determine if we are on a static landing page versus a dynamic utility page - const isLegalOrJoin = path.includes('impressum') || path.includes('datenschutz') || path.includes('join'); - const isIndex = !isLegalOrJoin; + const isIndex = !path.includes('join'); if (isIndex) { // Static navigation: Route to correct subdirectory @@ -533,20 +577,47 @@ document.addEventListener('DOMContentLoaded', () => { } }; + // Dynamically adjust language select width to fit the selected option's text length + const adjustDropdownWidth = () => { + document.querySelectorAll('.lang-dropdown').forEach(select => { + const tempSpan = document.createElement('span'); + const style = window.getComputedStyle(select); + tempSpan.style.fontFamily = style.fontFamily; + tempSpan.style.fontSize = style.fontSize; + tempSpan.style.fontWeight = style.fontWeight; + tempSpan.style.visibility = 'hidden'; + tempSpan.style.position = 'absolute'; + tempSpan.style.whiteSpace = 'nowrap'; + + const activeOption = select.options[select.selectedIndex]; + if (activeOption) { + tempSpan.textContent = activeOption.textContent; + document.body.appendChild(tempSpan); + const textWidth = tempSpan.getBoundingClientRect().width; + select.style.width = (textWidth + 18) + 'px'; + document.body.removeChild(tempSpan); + } + }); + }; + // Register change event listener for the dropdowns document.querySelectorAll('.lang-dropdown').forEach(select => { - select.addEventListener('change', handleLanguageChange); + select.addEventListener('change', (e) => { + handleLanguageChange(e); + adjustDropdownWidth(); + }); }); // Initialize language select elements to show the current preferred language const initLanguageSelectorValue = () => { - const savedLang = localStorage.getItem('koala_lang'); + const savedLang = safeGetLocalStorage('koala_lang'); const browserLang = navigator.language.startsWith('de') ? 'de' : 'en'; const activePref = savedLang || browserLang; document.querySelectorAll('.lang-dropdown').forEach(select => { select.value = activePref; }); + adjustDropdownWidth(); }; // Impressum Email Obfuscation Click Reveal diff --git a/website/build.js b/website/build.js index f3842e3..4d20632 100644 --- a/website/build.js +++ b/website/build.js @@ -203,13 +203,25 @@ async function compile() { } } - // ── 4. Copy static HTML files (join, impressum, datenschutz) ── + // ── 4. Copy static HTML files ── console.log('Copying static pages...'); - const staticHtml = ['join.html', 'impressum.html', 'datenschutz.html']; - for (const file of staticHtml) { - const src = path.join(websiteDir, file); - const dest = path.join(wwwDir, file); - if (fs.existsSync(src)) { fs.copyFileSync(src, dest); console.log(` Copied: ${file}`); } + fs.mkdirSync(path.join(wwwDir, 'de'), { recursive: true }); + const staticMappings = [ + { src: 'join.html', dest: 'join.html' }, + { src: 'imprint.html', dest: 'imprint.html' }, + { src: 'privacy.html', dest: 'privacy.html' }, + { src: 'impressum-de.html', dest: 'de/impressum.html' }, + { src: 'datenschutz-de.html', dest: 'de/datenschutz.html' }, + { src: 'impressum.html', dest: 'impressum.html' }, + { src: 'datenschutz.html', dest: 'datenschutz.html' } + ]; + for (const mapping of staticMappings) { + const src = path.join(websiteDir, mapping.src); + const dest = path.join(wwwDir, mapping.dest); + if (fs.existsSync(src)) { + fs.copyFileSync(src, dest); + console.log(` Copied: ${mapping.src} → ${mapping.dest}`); + } } // ── 5. Copy generic static files ── diff --git a/website/datenschutz-de.html b/website/datenschutz-de.html new file mode 100644 index 0000000..769c938 --- /dev/null +++ b/website/datenschutz-de.html @@ -0,0 +1,169 @@ + + + + + + Datenschutz | KoalaSync + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+ Niedlicher Koala, der den Datenschutz repräsentiert +
+

Datenschutz

+

+ Sicherheit & Privatsphäre +

+ +
+

1. Hosting & Logfiles

+

+ Diese Seite wird auf einem privaten Server gehostet. Zur Gewährleistung der Stabilität werden standardmäßige Server-Logs (IP, Browser, Zeit) erhoben, aber nicht mit Personen verknüpft und nach 7 Tagen automatisch gelöscht. +

+
+ +
+

2. Keine Drittanbieter & Open Source

+

+ KoalaSync verzichtet bewusst auf Analyse-Tools, Tracking-Cookies oder Werbenetzwerke. Wir laden keine Ressourcen von Drittanbietern (wie Google Fonts) nach, um Ihre Privatsphäre maximal zu schützen. +

+

+ Da KoalaSync vollständig Open Source ist, kann zudem jede Zeile Code auf unserem GitHub-Repository öffentlich eingesehen und auf Sicherheit geprüft werden. +

+
+ +
+

3. Relay-Server Architektur

+

+ Unser Relay-Server arbeitet ausschließlich im Arbeitsspeicher (RAM). Nachrichten zwischen Teilnehmern werden nicht auf Festplatten gespeichert und sind flüchtig. Sobald ein Raum geschlossen wird, werden alle zugehörigen Metadaten sofort gelöscht. Wir tracken Sie nicht. Wir überwachen lediglich unseren Server auf Basis von aggregierten, anonymen, nicht-personenbezogenen System-Leistungsmetriken. +

+
+ +
+

4. Browser-Erweiterung (Extension)

+

+ Um die geräteübergreifende Synchronisation zu ermöglichen, erfasst die KoalaSync Browser-Erweiterung temporär Daten des aktuell aktiven Video-Tabs (z. B. Tab-Titel, Medien-Metadaten wie den Videotitel sowie den Wiedergabestatus). Diese Daten werden ausschließlich zur Synchronisation an die anderen Teilnehmer in Ihrem Raum gesendet. Es wird ausdrücklich kein allgemeiner Browserverlauf (Browsing History) ausgelesen, gespeichert oder übermittelt. +

+
+ +
+

5. Berechtigungen der Erweiterung

+

+ Um ihre technischen Zweck zu erfüllen, benötigt die Browser-Erweiterung bestimmte Berechtigungen. Jede Berechtigung wird ausschließlich für die Kernfunktionalität genutzt: +

+
    +
  • storage: Erlaubt das lokale Speichern von Benutzernamen, Server-URLs und Raum-Zugangsdaten im Browser, damit Sie sich nicht jedes Mal neu anmelden müssen.
    • +
  • tabs: Wird benötigt, um geöffnete Tabs im Dropdown der Erweiterung aufzulisten und deren Titel auszulesen, damit Sie bequem den richtigen Video-Tab auswählen können.
    • +
  • scripting: Erforderlich, um das Synchronisationsskript (content.js) sicher in den von Ihnen ausgewählten Videotab zu injizieren.
    • +
  • alarms: Verhindert, dass der Hintergrunddienst der Erweiterung (Service Worker) während einer aktiven Synchronisationssitzung vom Browser in den Ruhezustand versetzt wird.
    • +
  • activeTab: Ermöglicht eine sichere, temporäre Interaktion mit dem momentan aktiven Tab für direkte Steuerungsbefehle.
    • +
  • notifications: Ermöglicht optionale Desktop-Benachrichtigungen, wenn beispielsweise ein neuer Freund dem Raum beitritt.
    • +
  • <all_urls> (Host-Berechtigung): Ermöglicht der Erweiterung, auf beliebigen Webseiten nach HTML5-Videoelementen zu suchen, damit die Synchronisation plattformübergreifend (z. B. auf YouTube, Netflix, Jellyfin etc.) funktioniert.
    • +
+
+ +
+

6. Brute-Force Schutz

+

+ Zur Sicherheit unserer Nutzer speichern wir fehlgeschlagene Login-Versuche (IP-Adresse und Raum-ID) für maximal 15 Minuten im RAM, um automatisierte Angriffe zu verhindern. Diese Daten werden danach rückstandslos gelöscht. +

+
+ +
+

7. Ihre Rechte

+

+ Sie haben das Recht auf Auskunft, Berichtigung oder Löschung Ihrer Daten. Da wir jedoch keine personenbezogenen Daten dauerhaft speichern, ist eine Zuordnung zu Ihrer Person in der Regel technisch nicht möglich. +

+

Kontakt bei Fragen:

+
+
+
+ + + + + + diff --git a/website/datenschutz.html b/website/datenschutz.html index 000dfb8..06100a8 100644 --- a/website/datenschutz.html +++ b/website/datenschutz.html @@ -2,229 +2,23 @@ - - Datenschutz / Privacy Policy | KoalaSync - - - - - - - - - - - - - -
-
-
-
-
- - - -
-
-
- Cute Koala representing privacy and data security - Niedlicher Koala, der den Datenschutz repräsentiert -
-

Datenschutz

-

Privacy Policy

-

- Sicherheit & Privatsphäre -

-

- Security & Privacy -

- -
-

- 1. Hosting & Logfiles - 1. Hosting & Logfiles -

-

- Diese Seite wird auf einem privaten Server gehostet. Zur Gewährleistung der Stabilität werden standardmäßige Server-Logs (IP, Browser, Zeit) erhoben, aber nicht mit Personen verknüpft und nach 7 Tagen automatisch gelöscht. -

-

- This site is hosted on a private server. To ensure stability, standard server logs (IP, browser, time) are collected, but not linked to individuals and are automatically deleted after 7 days. -

-
- -
-

- 2. Keine Drittanbieter & Open Source - 2. No Third Parties & Open Source -

-

- KoalaSync verzichtet bewusst auf Analyse-Tools, Tracking-Cookies oder Werbenetzwerke. Wir laden keine Ressourcen von Drittanbietern (wie Google Fonts) nach, um Ihre Privatsphäre maximal zu schützen. -

-

- Da KoalaSync vollständig Open Source ist, kann zudem jede Zeile Code auf unserem GitHub-Repository öffentlich eingesehen und auf Sicherheit geprüft werden. -

-

- KoalaSync deliberately avoids analytics tools, tracking cookies, or advertising networks. We do not load any third-party resources (such as Google Fonts) to maximize the protection of your privacy. -

-

- Since KoalaSync is 100% open-source, every single line of code can also be publicly viewed and audited for security on our GitHub repository. -

-
- -
-

- 3. Relay-Server Architektur - 3. Relay Server Architecture -

-

- Unser Relay-Server arbeitet ausschließlich im Arbeitsspeicher (RAM). Nachrichten zwischen Teilnehmern werden nicht auf Festplatten gespeichert und sind flüchtig. Sobald ein Raum geschlossen wird, werden alle zugehörigen Metadaten sofort gelöscht. Wir tracken Sie nicht. Wir überwachen lediglich unseren Server auf Basis von aggregierten, anonymen, nicht-personenbezogenen System-Leistungsmetriken. -

-

- Our relay server operates exclusively in memory (RAM). Messages between participants are not stored on hard drives and are volatile. As soon as a room is closed, all associated metadata is immediately deleted. We don't track you. We only track our server, relying on aggregated, anonymous, and non-personal system performance metrics to monitor server health. -

-
- -
-

- 4. Browser-Erweiterung (Extension) - 4. Browser Extension -

-

- Um die geräteübergreifende Synchronisation zu ermöglichen, erfasst die KoalaSync Browser-Erweiterung temporär Daten des aktuell aktiven Video-Tabs (z. B. Tab-Titel, Medien-Metadaten wie den Videotitel sowie den Wiedergabestatus). Diese Daten werden ausschließlich zur Synchronisation an die anderen Teilnehmer in Ihrem Raum gesendet. Es wird ausdrücklich kein allgemeiner Browserverlauf (Browsing History) ausgelesen, gespeichert oder übermittelt. -

-

- To enable cross-device synchronization, the KoalaSync browser extension temporarily captures data from the currently active video tab (e.g., tab title, media metadata like the video title, and playback state). This data is exclusively sent to other participants in your room for synchronization. We explicitly do not read, store, or transmit your general browsing history. -

-
- -
-

- 5. Berechtigungen der Erweiterung - 5. Extension Permissions -

-

- Um ihren technischen Zweck zu erfüllen, benötigt die Browser-Erweiterung bestimmte Berechtigungen. Jede Berechtigung wird ausschließlich für die Kernfunktionalität genutzt: -

-
    -
  • storage: Erlaubt das lokale Speichern von Benutzernamen, Server-URLs und Raum-Zugangsdaten im Browser, damit Sie sich nicht jedes Mal neu anmelden müssen.
    • -
  • tabs: Wird benötigt, um geöffnete Tabs im Dropdown der Erweiterung aufzulisten und deren Titel auszulesen, damit Sie bequem den richtigen Video-Tab auswählen können.
    • -
  • scripting: Erforderlich, um das Synchronisationsskript (content.js) sicher in den von Ihnen ausgewählten Videotab zu injizieren.
    • -
  • alarms: Verhindert, dass der Hintergrunddienst der Erweiterung (Service Worker) während einer aktiven Synchronisationssitzung vom Browser in den Ruhezustand versetzt wird.
    • -
  • activeTab: Ermöglicht eine sichere, temporäre Interaktion mit dem momentan aktiven Tab für direkte Steuerungsbefehle.
    • -
  • notifications: Ermöglicht optionale Desktop-Benachrichtigungen, wenn beispielsweise ein neuer Freund dem Raum beitritt.
    • -
  • <all_urls> (Host-Berechtigung): Ermöglicht der Erweiterung, auf beliebigen Webseiten nach HTML5-Videoelementen zu suchen, damit die Synchronisation plattformübergreifend (z. B. auf YouTube, Netflix, Jellyfin etc.) funktioniert.
    • -
-

- To fulfill its technical purpose, the browser extension requires certain permissions. Each permission is used exclusively for core functionality: -

-
    -
  • storage: Allows local storage of your username, server URL, and room credentials in your browser so you don't have to log in every time.
    • -
  • tabs: Required to list open tabs in the extension's dropdown and read their titles, making it easy for you to select the correct video tab.
    • -
  • scripting: Required to securely inject the synchronization script (content.js) into your selected video tab.
    • -
  • alarms: Prevents the extension's background service worker from being suspended by the browser during an active synchronization session.
    • -
  • activeTab: Enables secure, temporary interaction with the currently active tab for direct playback commands.
    • -
  • notifications: Enables optional desktop notifications, such as when a new friend joins the room.
    • -
  • <all_urls> (Host permission): Allows the extension to scan for HTML5 video elements on any website, enabling cross-platform synchronization (e.g., on YouTube, Netflix, Jellyfin etc.).
    • -
-
- -
-

- 6. Brute-Force Schutz - 6. Brute-Force Protection -

-

- Zur Sicherheit unserer Nutzer speichern wir fehlgeschlagene Login-Versuche (IP-Adresse und Raum-ID) für maximal 15 Minuten im RAM, um automatisierte Angriffe zu verhindern. Diese Daten werden danach rückstandslos gelöscht. -

-

- For the security of our users, we store failed login attempts (IP address and room ID) for a maximum of 15 minutes in RAM to prevent automated attacks. This data is deleted without a trace afterwards. -

-
- -
-

- 7. Ihre Rechte - 7. Your Rights -

-

- Sie haben das Recht auf Auskunft, Berichtigung oder Löschung Ihrer Daten. Da wir jedoch keine personenbezogenen Daten dauerhaft speichern, ist eine Zuordnung zu Ihrer Person in der Regel technisch nicht möglich. -

-

- You have the right to information, correction, or deletion of your data. However, since we do not store any personal data permanently, linking data to your person is technically impossible in most cases. -

-

Kontakt bei Fragen:

-

Contact for questions:

-
-
-
- - - - +

Redirecting / Weiterleitung...

diff --git a/website/impressum-de.html b/website/impressum-de.html new file mode 100644 index 0000000..a0c254c --- /dev/null +++ b/website/impressum-de.html @@ -0,0 +1,156 @@ + + + + + + Impressum | KoalaSync + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+ Niedlicher Koala, der das Impressum repräsentiert +
+

Impressum

+

+ Transparenz & Identifikation +

+ +
+

Betreiber & Kontakt

+

Timo (KoalaDev) – Privatperson

+

+ E-Mail: +

+

+ 🔒 Private Nachricht: + @koalastuff auf Mastodon +

+

+ 🐛 Active Bedenken / Bug Reports: + GitHub Issues +

+
+ +
+

Privatprojekt-Hinweis

+

+ Diese Website ist ein rein privates Hobby-Projekt und dient keinen geschäftsmäßigen Zwecken. + Eine Impressumspflicht nach § 5 DDG (ehemals TMG) besteht daher nicht. + Diese Angaben erfolgen rein freiwillig zur Transparenz gegenüber der Community. +

+
+ +
+

Haftung für Inhalte

+

+ Gemäß § 7 Abs.1 DDG sind wir für eigene Inhalte verantwortlich. Nach §§ 8 bis 10 DDG sind wir jedoch nicht verpflichtet, + übermittelte oder gespeicherte fremde Informationen zu überwachen. +

+
+ +
+

Haftung für Links

+

+ Unser Angebot enthält Links zu externen Websites Dritter. Auf deren Inhalte haben wir keinen Einfluss und + können daher keine Gewähr für diese fremden Inhalte übernehmen. +

+
+ +
+

Urheberrecht

+

+ Die durch die Seitenbetreiber erstellten Inhalte auf diesen Seiten unterliegen dem deutschen Urheberrecht. + Vervielfältigung, Bearbeitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung. +

+
+
+
+ + + + + + diff --git a/website/impressum.html b/website/impressum.html index d2ac53e..caf8317 100644 --- a/website/impressum.html +++ b/website/impressum.html @@ -2,203 +2,23 @@ - - Impressum / Legal Notice | KoalaSync - - - - - - - - - - - - - -
-
-
-
-
- - - -
-
-
- Cute Koala representing the legal notice page - Niedlicher Koala, der das Impressum repräsentiert -
-

Impressum

-

Legal Notice

-

- Transparenz & Identifikation -

-

- Transparency & Identification -

- -
-

- Betreiber & Kontakt - Operator & Contact -

-

Timo (KoalaDev) – Privatperson

-

Timo (KoalaDev) – Private Individual

-

- E-Mail: -

-

- E-Mail: -

-

- 🔒 Private Nachricht: - @koalastuff auf Mastodon -

-

- 🔒 Private message: - @koalastuff on Mastodon -

-

- 🐛 Active Bedenken / Bug Reports: - GitHub Issues -

-

- 🐛 Active concerns / Bug reports: - GitHub Issues -

-
- -
-

- Privatprojekt-Hinweis - Private Project Notice -

-

- Diese Website ist ein rein privates Hobby-Projekt und dient keinen geschäftsmäßigen Zwecken. - Eine Impressumspflicht nach § 5 DDG (ehemals TMG) besteht daher nicht. - Diese Angaben erfolgen rein freiwillig zur Transparenz gegenüber der Community. -

-

- This website is a purely private hobby project and does not serve any commercial purposes. - Therefore, there is no obligation to provide a legal notice according to § 5 DDG (formerly TMG). - This information is provided voluntarily for transparency towards the community. -

-
- -
-

- Haftung für Inhalte - Liability for Content -

-

- Gemäß § 7 Abs.1 DDG sind wir für eigene Inhalte verantwortlich. Nach §§ 8 bis 10 DDG sind wir jedoch nicht verpflichtet, - übermittelte oder gespeicherte fremde Informationen zu überwachen. -

-

- According to § 7 Abs.1 DDG we are responsible for our own content. According to §§ 8 to 10 DDG, however, we are not obligated to monitor transmitted or stored third-party information. -

-
- -
-

- Haftung für Links - Liability for Links -

-

- Unser Angebot enthält Links zu externen Websites Dritter. Auf deren Inhalte haben wir keinen Einfluss und - können daher keine Gewähr für diese fremden Inhalte übernehmen. -

-

- Our offer contains links to external third-party websites. We have no influence on their content and therefore cannot assume any liability for these external contents. -

-
- -
-

- Urheberrecht - Copyright -

-

- Die durch die Seitenbetreiber erstellten Inhalte auf diesen Seiten unterliegen dem deutschen Urheberrecht. - Vervielfältigung, Bearbeitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung. -

-

- The content and works created by the site operators on these pages are subject to German copyright law. - Duplication, processing, and any kind of exploitation outside the limits of copyright require written consent. -

-
-
-
- - - - +

Redirecting / Weiterleitung...

diff --git a/website/imprint.html b/website/imprint.html new file mode 100644 index 0000000..8b90927 --- /dev/null +++ b/website/imprint.html @@ -0,0 +1,154 @@ + + + + + + Legal Notice | KoalaSync + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+ Cute Koala representing the legal notice page +
+

Legal Notice

+

+ Transparency & Identification +

+ +
+

Operator & Contact

+

Timo (KoalaDev) – Private Individual

+

+ E-Mail: +

+

+ 🔒 Private message: + @koalastuff on Mastodon +

+

+ 🐛 Active concerns / Bug reports: + GitHub Issues +

+
+ +
+

Private Project Notice

+

+ This website is a purely private hobby project and does not serve any commercial purposes. + Therefore, there is no obligation to provide a legal notice according to § 5 DDG (formerly TMG). + This information is provided voluntarily for transparency towards the community. +

+
+ +
+

Liability for Content

+

+ According to § 7 Abs.1 DDG we are responsible for our own content. According to §§ 8 to 10 DDG, however, we are not obligated to monitor transmitted or stored third-party information. +

+
+ +
+

Liability for Links

+

+ Our offer contains links to external third-party websites. We have no influence on their content and therefore cannot assume any liability for these external contents. +

+
+ +
+

Copyright

+

+ The content and works created by the site operators on these pages are subject to German copyright law. + Duplication, processing, and any kind of exploitation outside the limits of copyright require written consent. +

+
+
+
+ + + + + + diff --git a/website/lang-init.js b/website/lang-init.js index 29901bf..656caed 100644 --- a/website/lang-init.js +++ b/website/lang-init.js @@ -2,6 +2,22 @@ var html = document.documentElement; var path = window.location.pathname; + var safeGetLocalStorage = function(key) { + try { + return localStorage.getItem(key); + } catch (_) { + return null; + } + }; + + var safeSetLocalStorage = function(key, val) { + try { + localStorage.setItem(key, val); + } catch (_) { + return; + } + }; + // Mapping of browser language codes to KoalaSync locale directories var langMap = { 'de': 'de', @@ -29,7 +45,7 @@ var isRootIndex = path === '/' || path === '/index.html' || path === ''; if (isRootIndex) { - var savedLang = localStorage.getItem('koala_lang'); + var savedLang = safeGetLocalStorage('koala_lang'); var browserLang = getBrowserLang(); var preferredLang = savedLang || langMap[browserLang] || 'en'; @@ -52,9 +68,12 @@ } if (hasStaticLang) { - localStorage.setItem('koala_lang', activeLang); + var isLegal = path.indexOf('impressum') !== -1 || path.indexOf('datenschutz') !== -1 || path.indexOf('imprint') !== -1 || path.indexOf('privacy') !== -1; + if (!isLegal) { + safeSetLocalStorage('koala_lang', activeLang); + } } else { - var savedLang = localStorage.getItem('koala_lang'); + var savedLang = safeGetLocalStorage('koala_lang'); var browserLang = getBrowserLang(); activeLang = savedLang || langMap[browserLang] || 'en'; diff --git a/website/locales/de.json b/website/locales/de.json index ebc00f8..64ca7bb 100644 --- a/website/locales/de.json +++ b/website/locales/de.json @@ -161,5 +161,7 @@ "MOCK_29": "Video-Debug-Info", "MOCK_30": "Aktivitätsverlauf", "MOCK_31": "Protokoll (Letzte 50)", - "MOCK_32": "LÖSCHEN" + "MOCK_32": "LÖSCHEN", + "FOOTER_LEGAL_LINK": "de/impressum", + "FOOTER_PRIVACY_LINK": "de/datenschutz" } diff --git a/website/locales/en.json b/website/locales/en.json index 249930d..2f7de4f 100644 --- a/website/locales/en.json +++ b/website/locales/en.json @@ -161,5 +161,7 @@ "MOCK_29": "Video Debug Info", "MOCK_30": "Full Action History", "MOCK_31": "Logs (Last 50)", - "MOCK_32": "CLEAR" + "MOCK_32": "CLEAR", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" } diff --git a/website/locales/es.json b/website/locales/es.json index 192af48..df984b0 100644 --- a/website/locales/es.json +++ b/website/locales/es.json @@ -161,5 +161,7 @@ "MOCK_29": "Historial completo", "MOCK_30": "Registros (últimos 50)", "MOCK_31": "BORRAR", - "MOCK_32": "CLEAR" + "MOCK_32": "CLEAR", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" } diff --git a/website/locales/fr.json b/website/locales/fr.json index 40d81a8..101102f 100644 --- a/website/locales/fr.json +++ b/website/locales/fr.json @@ -161,5 +161,7 @@ "MOCK_29": "Historique complet d'actions", "MOCK_30": "Logs (50 derniers)", "MOCK_31": "EFFACER", - "MOCK_32": "CLEAR" + "MOCK_32": "CLEAR", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" } diff --git a/website/locales/it.json b/website/locales/it.json index d8c5a34..edb250d 100644 --- a/website/locales/it.json +++ b/website/locales/it.json @@ -161,5 +161,7 @@ "MOCK_29": "Info Debug Video", "MOCK_30": "Cronologia Azioni Completa", "MOCK_31": "Log (Ultimi 50)", - "MOCK_32": "PULISCI" -} \ No newline at end of file + "MOCK_32": "PULISCI", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" +} diff --git a/website/locales/ja.json b/website/locales/ja.json index 4f1b944..d013776 100644 --- a/website/locales/ja.json +++ b/website/locales/ja.json @@ -161,5 +161,7 @@ "MOCK_29": "ビデオデバッグ情報", "MOCK_30": "全アクション履歴", "MOCK_31": "ログ（直近50件）", - "MOCK_32": "消去" -} \ No newline at end of file + "MOCK_32": "消去", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" +} diff --git a/website/locales/ko.json b/website/locales/ko.json index 23c8de2..dd5c66f 100644 --- a/website/locales/ko.json +++ b/website/locales/ko.json @@ -161,5 +161,7 @@ "MOCK_29": "비디오 디버그 정보", "MOCK_30": "전체 작업 내역", "MOCK_31": "로그 (최근 50개)", - "MOCK_32": "지우기" -} \ No newline at end of file + "MOCK_32": "지우기", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" +} diff --git a/website/locales/nl.json b/website/locales/nl.json index f0d605b..31be1b3 100644 --- a/website/locales/nl.json +++ b/website/locales/nl.json @@ -161,5 +161,7 @@ "MOCK_29": "Video-debuginfo", "MOCK_30": "Volledige actiegeschiedenis", "MOCK_31": "Logs (Laatste 50)", - "MOCK_32": "WISSEN" -} \ No newline at end of file + "MOCK_32": "WISSEN", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" +} diff --git a/website/locales/pl.json b/website/locales/pl.json index 0adc19f..025d7e9 100644 --- a/website/locales/pl.json +++ b/website/locales/pl.json @@ -161,5 +161,7 @@ "MOCK_29": "Info debugowania wideo", "MOCK_30": "Pełna historia akcji", "MOCK_31": "Logi (ostatnie 50)", - "MOCK_32": "WYCZYŚĆ" -} \ No newline at end of file + "MOCK_32": "WYCZYŚĆ", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" +} diff --git a/website/locales/pt-BR.json b/website/locales/pt-BR.json index 1b1c93e..7e32263 100644 --- a/website/locales/pt-BR.json +++ b/website/locales/pt-BR.json @@ -161,5 +161,7 @@ "MOCK_29": "Histórico completo", "MOCK_30": "Logs (últimos 50)", "MOCK_31": "LIMPAR", - "MOCK_32": "CLEAR" + "MOCK_32": "CLEAR", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" } diff --git a/website/locales/pt.json b/website/locales/pt.json index d20a25e..a0304de 100644 --- a/website/locales/pt.json +++ b/website/locales/pt.json @@ -161,5 +161,7 @@ "MOCK_29": "Info de Debug de Vídeo", "MOCK_30": "Histórico Completo de Ações", "MOCK_31": "Registos (Últimos 50)", - "MOCK_32": "LIMPAR" -} \ No newline at end of file + "MOCK_32": "LIMPAR", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" +} diff --git a/website/locales/ru.json b/website/locales/ru.json index ede2038..63c892f 100644 --- a/website/locales/ru.json +++ b/website/locales/ru.json @@ -161,5 +161,7 @@ "MOCK_29": "Полная история действий", "MOCK_30": "Логи (последние 50)", "MOCK_31": "ОЧИСТИТЬ", - "MOCK_32": "CLEAR" + "MOCK_32": "CLEAR", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" } diff --git a/website/locales/tr.json b/website/locales/tr.json index 5d89b3f..222c00b 100644 --- a/website/locales/tr.json +++ b/website/locales/tr.json @@ -161,5 +161,7 @@ "MOCK_29": "Video Hata Ayıklama Bilgisi", "MOCK_30": "Tam İşlem Geçmişi", "MOCK_31": "Günlükler (Son 50)", - "MOCK_32": "TEMİZLE" -} \ No newline at end of file + "MOCK_32": "TEMİZLE", + "FOOTER_LEGAL_LINK": "imprint", + "FOOTER_PRIVACY_LINK": "privacy" +} diff --git a/website/privacy.html b/website/privacy.html new file mode 100644 index 0000000..dc9da4b --- /dev/null +++ b/website/privacy.html @@ -0,0 +1,169 @@ + + + + + + Privacy Policy | KoalaSync + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+ Cute Koala representing privacy and data security +
+

Privacy Policy

+

+ Security & Privacy +

+ +
+

1. Hosting & Logfiles

+

+ This site is hosted on a private server. To ensure stability, standard server logs (IP, browser, time) are collected, but not linked to individuals and are automatically deleted after 7 days. +

+
+ +
+

2. No Third Parties & Open Source

+

+ KoalaSync deliberately avoids analytics tools, tracking cookies, or advertising networks. We do not load any third-party resources (such as Google Fonts) to maximize the protection of your privacy. +

+

+ Since KoalaSync is 100% open-source, every single line of code can also be publicly viewed and audited for security on our GitHub repository. +

+
+ +
+

3. Relay Server Architecture

+

+ Our relay server operates exclusively in memory (RAM). Messages between participants are not stored on hard drives and are volatile. As soon as a room is closed, all associated metadata is immediately deleted. We don't track you. We only track our server, relying on aggregated, anonymous, and non-personal system performance metrics to monitor server health. +

+
+ +
+

4. Browser Extension

+

+ To enable cross-device synchronization, the KoalaSync browser extension temporarily captures data from the currently active video tab (e.g., tab title, media metadata like the video title, and playback state). This data is exclusively sent to other participants in your room for synchronization. We explicitly do not read, store, or transmit your general browsing history. +

+
+ +
+

5. Extension Permissions

+

+ To fulfill its technical purpose, the browser extension requires certain permissions. Each permission is used exclusively for core functionality: +

+
    +
  • storage: Allows local storage of your username, server URL, and room credentials in your browser so you don't have to log in every time.
    • +
  • tabs: Required to list open tabs in the extension's dropdown and read their titles, making it easy for you to select the correct video tab.
    • +
  • scripting: Required to securely inject the synchronization script (content.js) into your selected video tab.
    • +
  • alarms: Prevents the extension's background service worker from being suspended by the browser during an active synchronization session.
    • +
  • activeTab: Enables secure, temporary interaction with the currently active tab for direct playback commands.
    • +
  • notifications: Enables optional desktop notifications, such as when a new friend joins the room.
    • +
  • <all_urls> (Host permission): Allows the extension to scan for HTML5 video elements on any website, enabling cross-platform synchronization (e.g., on YouTube, Netflix, Jellyfin etc.).
    • +
+
+ +
+

6. Brute-Force Protection

+

+ For the security of our users, we store failed login attempts (IP address and room ID) for a maximum of 15 minutes in RAM to prevent automated attacks. This data is deleted without a trace afterwards. +

+
+ +
+

7. Your Rights

+

+ You have the right to information, correction, or deletion of your data. However, since we do not store any personal data permanently, linking data to your person is technically impossible in most cases. +

+

Contact for questions:

+
+
+
+ + + + + + diff --git a/website/sitemap.xml b/website/sitemap.xml index fd247ec..616cb43 100644 --- a/website/sitemap.xml +++ b/website/sitemap.xml @@ -3,7 +3,7 @@ xmlns:xhtml="http://www.w3.org/1999/xhtml"> https://sync.koalastuff.net/ - 2026-06-01 + 2026-06-04 weekly 1.0 @@ -12,11 +12,18 @@ + + + + + + + https://sync.koalastuff.net/de/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -25,11 +32,18 @@ + + + + + + + https://sync.koalastuff.net/fr/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -38,11 +52,18 @@ + + + + + + + https://sync.koalastuff.net/es/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -51,11 +72,18 @@ + + + + + + + https://sync.koalastuff.net/pt-BR/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -64,11 +92,18 @@ + + + + + + + https://sync.koalastuff.net/ru/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -77,6 +112,153 @@ + + + + + + + + + + + https://sync.koalastuff.net/it/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/pl/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/tr/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/nl/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/ja/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/ko/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/pt/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + diff --git a/website/style.css b/website/style.css index 80f27d6..3ddd09d 100644 --- a/website/style.css +++ b/website/style.css @@ -2021,6 +2021,10 @@ html:not(.lang-de) [lang="de"] { padding: 0 12px 0 0; margin: 0; width: auto; + max-width: 150px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .lang-dropdown option { diff --git a/website/template.html b/website/template.html index bbf2736..b655f03 100644 --- a/website/template.html +++ b/website/template.html @@ -1207,8 +1207,8 @@

© 2026 KoalaSync. {{FOOTER_MIT}}

{{FOOTER_RAM}}

- {{FOOTER_LEGAL}} - {{FOOTER_PRIVACY}} + {{FOOTER_LEGAL}} + {{FOOTER_PRIVACY}} Mastodon diff --git a/website/www/app.877f29ac.min.js b/website/www/app.877f29ac.min.js new file mode 100644 index 0000000..8eba0f8 --- /dev/null +++ b/website/www/app.877f29ac.min.js @@ -0,0 +1,59 @@ +document.addEventListener("DOMContentLoaded",()=>{const E=s=>{try{return localStorage.getItem(s)}catch{return null}},C=(s,o)=>{try{localStorage.setItem(s,o)}catch{return}},A=document.querySelectorAll("[data-reveal]"),b=new IntersectionObserver(s=>{s.forEach(o=>{o.isIntersecting&&(o.target.classList.add("revealed"),b.unobserve(o.target))})},{rootMargin:"0px 0px -150px 0px",threshold:.1});A.forEach(s=>b.observe(s));const v=document.querySelector("nav");window.addEventListener("scroll",()=>{window.scrollY>50?(v.style.padding="0.75rem 0",v.style.background="rgba(15, 23, 42, 0.9)"):(v.style.padding="1rem 0",v.style.background="rgba(30, 41, 59, 0.7)")}),document.querySelectorAll('a[href^="#"]').forEach(s=>{s.addEventListener("click",function(o){o.preventDefault();const a=document.querySelector(this.getAttribute("href"));a&&a.scrollIntoView({behavior:"smooth",block:"start"})})});const I=()=>{const s=window.location.pathname.includes("join");let a=new URLSearchParams(window.location.search).get("dev");if(!a){const t=window.location.hash.startsWith("#")?window.location.hash.substring(1):window.location.hash;a=new URLSearchParams(t).get("dev")}if(a||((window.location.hash.includes("devsuccess")||window.location.search.includes("devsuccess"))&&(a="success"),(window.location.hash.includes("devfailure")||window.location.search.includes("devfailure"))&&(a="failure")),s&&a){setTimeout(()=>{const t=document.getElementById("display-room-id"),e=document.getElementById("join-actions");t&&(t.textContent="DEV-ROOM"),e&&(e.innerHTML=` + + `,setTimeout(()=>{window.dispatchEvent(new CustomEvent("KOALASYNC_STATUS",{detail:{success:a==="success",message:a==="failure"?"Simulated Connection Timeout!":""}}))},1500))},600);return}setTimeout(()=>{const t=document.documentElement.dataset.koalasyncInstalled==="true";if(window.location.hash.startsWith("#join:")){const e=window.location.hash.split(":");if(e.length>=3){const l=e[1],u=e[2],r=e[3]||"0",n=e[4]?decodeURIComponent(e[4]):"";if(s){const i=document.getElementById("display-room-id"),c=document.getElementById("join-actions");i&&(i.textContent=l),c&&(t?(c.innerHTML=` + + `,setTimeout(()=>{window.dispatchEvent(new CustomEvent("KOALASYNC_JOIN_REQUEST",{detail:{roomId:l,password:u,useCustomServer:r==="1",serverUrl:n}}))},500)):navigator.userAgent.includes("Firefox")?c.innerHTML=` +
+ + Firefox + GET IT ON MOZILLA ADD-ONSIM FIREFOX ADD-ON STORE HERUNTERLADEN + + + + Download via GitHub\xDCber GitHub herunterladen + +
+

+ The extension is required to join and sync videos. + Die Erweiterung ist erforderlich, um beizutreten und Videos zu synchronisieren. +

+ `:c.innerHTML=` +
+ + Chrome + GET IT ON CHROME WEBSTOREIM CHROME WEB STORE HERUNTERLADEN + + + + Download via GitHub\xDCber GitHub herunterladen + +
+

+ The extension is required to join and sync videos. + Die Erweiterung ist erforderlich, um beizutreten und Videos zu synchronisieren. +

+ `)}else if(!document.getElementById("koala-banner")){const i=document.createElement("div");i.className="invite-banner",i.id="koala-banner";const c=document.createElement("div");c.className="container",c.style.cssText="display:flex; justify-content:space-between; align-items:center;";const d=document.createElement("span");d.appendChild(document.createTextNode("\u{1F3AB} Invitation for "));const m=document.createElement("b");m.textContent=l,d.appendChild(m),d.appendChild(document.createTextNode(" detected!"));const g=document.createElement("a");g.href="join"+window.location.hash,g.className="btn-banner",g.textContent="OPEN JOIN PAGE",c.appendChild(d),c.appendChild(g),i.appendChild(c),document.body.prepend(i)}document.addEventListener("click",i=>{i.target&&i.target.id==="webJoinBtn"&&(i.target.textContent="JOINING...",i.target.disabled=!0,window.dispatchEvent(new CustomEvent("KOALASYNC_JOIN_REQUEST",{detail:{roomId:l,password:u,useCustomServer:r==="1",serverUrl:n}})))})}}},600)};window.addEventListener("KOALASYNC_STATUS",s=>{const{success:o,message:a}=s.detail;if(window.location.pathname.includes("join")){const e=document.getElementById("join-status-icon"),l=document.getElementById("join-title"),u=document.getElementById("join-actions"),r=document.getElementById("join-desc"),n=document.getElementById("status-ring");if(o){n&&(n.classList.remove("active-pulse"),n.style.display="none"),e&&(e.innerHTML='Success',e.style.transform="scale(1)");const i=document.documentElement.classList.contains("lang-de");l.textContent=i?"Erfolgreich!":"Success!",r.innerHTML=i?'Verbunden!
W\xE4hle jetzt einen Video-Tab in der Erweiterung aus.':'Connected!
Now select a video tab in the extension.';let c=3;const d=()=>{c<=0?(window.close(),r.textContent=i?"Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schlie\xDFen.":"Joined successfully! You can close this tab manually."):(c--,setTimeout(d,1e3))};setTimeout(d,1e3);const m=i?"TAB JETZT SCHLIESSEN":"CLOSE TAB NOW";u.innerHTML=` +
+ +
+ `}else{n&&(n.classList.remove("active-pulse"),n.style.display="none"),e&&(e.innerHTML=`Error`,e.style.transform="scale(1)");const i=document.documentElement.classList.contains("lang-de");l.textContent=i?"Fehler":"Error",r.textContent=i?`Beitritt fehlgeschlagen: ${a}`:`Join failed: ${a}`;const c=i?"ERNEUT VERSUCHEN":"TRY AGAIN";u.innerHTML=` +
+ +
+ `}}else{const e=document.getElementById("koala-banner");if(e)if(o)e.style.background="var(--success)",e.innerHTML='
\u2705 Joined! This tab will close in 2s...
',setTimeout(()=>window.close(),2e3);else{e.style.background="var(--error)",e.innerHTML="";const l=document.createElement("div");l.className="container",l.textContent="\u274C Error: "+a,e.appendChild(l)}}});const j=async()=>{try{const s=document.documentElement.lang==="en"?"version.json":"../version.json",o=await fetch(s);if(!o.ok)return;const a=await o.json(),{version:t,date:e}=a;if(!t||!e)return;const l=new Date(e),r=new Date-l,n=Math.floor(r/(1e3*60*60*24)),i=Math.floor(r/(1e3*60*60)),c=Math.floor(r/(1e3*60));let d="",m="";n>0?(d=`${n} ${n===1?"day":"days"} ago`,m=`vor ${n} ${n===1?"Tag":"Tagen"}`):i>0?(d=`${i} ${i===1?"hour":"hours"} ago`,m=`vor ${i} ${i===1?"Stunde":"Stunden"}`):c>0?(d=`${c} ${c===1?"minute":"minutes"} ago`,m=`vor ${c} ${c===1?"Minute":"Minuten"}`):(d="just now",m="gerade eben");const g=document.querySelector(".version-text-en"),T=document.querySelector(".version-text-de");g&&(g.textContent=`v${t} OUT NOW \u2022 ${d}`),T&&(T.textContent=`v${t} JETZT VERF\xDCGBAR \u2022 ${m}`);const w=document.getElementById("schema-software");if(w)try{const y=JSON.parse(w.textContent);y.softwareVersion=t,w.textContent=JSON.stringify(y,null,2)}catch(y){console.warn("Failed to dynamically update schema version:",y)}}catch(s){console.warn("Failed to fetch dynamic version info:",s)}},S=document.querySelectorAll(".mock-tab"),B=document.querySelectorAll(".mock-screen");S.forEach(s=>{s.addEventListener("click",()=>{S.forEach(t=>t.classList.remove("active")),B.forEach(t=>t.classList.remove("active")),s.classList.add("active");const o=s.getAttribute("data-target"),a=document.getElementById(o);a&&a.classList.add("active")})});const L=document.querySelectorAll(".terminal-tab-btn"),M=document.querySelectorAll(".terminal-pane");L.forEach(s=>{s.addEventListener("click",()=>{L.forEach(t=>t.classList.remove("active")),M.forEach(t=>t.classList.remove("active")),s.classList.add("active");const o=s.getAttribute("data-tab"),a=document.getElementById(o);a&&a.classList.add("active")})});const h=document.querySelector(".terminal-copy-btn");h&&h.addEventListener("click",()=>{const s=document.querySelector(".terminal-pane.active");if(!s)return;const o=s.querySelector("code");if(!o)return;const a=o.innerText||o.textContent;navigator.clipboard.writeText(a).then(()=>{const t=document.documentElement.classList.contains("lang-de"),e=h.innerHTML;h.innerHTML=t?"\u2705 Kopiert!":"\u2705 Copied!",h.disabled=!0,setTimeout(()=>{h.innerHTML=e,h.disabled=!1},2e3)}).catch(t=>{console.error("Failed to copy text: ",t)})});const p=document.querySelector(".hamburger"),f=document.querySelector("#primary-nav");if(p&&f){p.setAttribute("aria-expanded","false");const s=()=>{f.classList.add("open"),p.setAttribute("aria-expanded","true"),document.addEventListener("keydown",t)},o=()=>{f.classList.remove("open"),p.setAttribute("aria-expanded","false"),document.removeEventListener("keydown",t)},a=()=>f.classList.contains("open")?o():s(),t=e=>{e.key==="Escape"&&o()};p.addEventListener("click",a),f.querySelectorAll("a").forEach(e=>e.addEventListener("click",o))}const x=()=>{const s=E("koala_lang")||(navigator.language.startsWith("de")?"de":"en");window.location.pathname.split("/").some(e=>["de","fr","es","pt-BR","ru","it","pl","tr","nl","ja","ko","pt"].includes(e))||document.querySelectorAll('a[href="./"], a[href="de/"], a[href="fr/"], a[href="es/"], a[href="pt-BR/"], a[href="ru/"], a[href="it/"], a[href="pl/"], a[href="tr/"], a[href="nl/"], a[href="ja/"], a[href="ko/"], a[href="pt/"]').forEach(l=>{l.href=s==="en"?"./":`${s}/`})},N=s=>{const a=s.currentTarget.value,t=window.location.pathname;C("koala_lang",a);const e=t.includes("impressum")||t.includes("imprint"),l=t.includes("datenschutz")||t.includes("privacy");if(e){let r;const n=t.endsWith(".html");a==="de"?(r=n?"de/impressum.html":"de/impressum",t.includes("/de/")&&(r=n?"impressum.html":"impressum")):(r=n?"imprint.html":"imprint",t.includes("/de/")&&(r=n?"../imprint.html":"../imprint")),window.location.href=r;return}else if(l){let r;const n=t.endsWith(".html");a==="de"?(r=n?"de/datenschutz.html":"de/datenschutz",t.includes("/de/")&&(r=n?"datenschutz.html":"datenschutz")):(r=n?"privacy.html":"privacy",t.includes("/de/")&&(r=n?"../privacy.html":"../privacy")),window.location.href=r;return}if(!t.includes("join")){const n=t.split("/").some(c=>["de","fr","es","pt-BR","ru","it","pl","tr","nl","ja","ko","pt"].includes(c));let i;a==="en"?n?i="../":i="./":n?i="../"+a+"/":i=a+"/",window.location.href=i}else{const r=document.documentElement;r.classList.remove("lang-en","lang-de","lang-fr","lang-es","lang-pt-br","lang-ru","lang-it","lang-pl","lang-tr","lang-nl","lang-ja","lang-ko","lang-pt");const n=a==="de"?"de":"en";if(r.classList.add("lang-"+n),r.lang=n,document.querySelectorAll(".lang-dropdown").forEach(c=>{c.value=a}),t.includes("join")){const c={en:"Join Room | KoalaSync",de:"Raum beitreten | KoalaSync"};document.title=c[n]||c.en}x()}},k=()=>{document.querySelectorAll(".lang-dropdown").forEach(s=>{const o=document.createElement("span"),a=window.getComputedStyle(s);o.style.fontFamily=a.fontFamily,o.style.fontSize=a.fontSize,o.style.fontWeight=a.fontWeight,o.style.visibility="hidden",o.style.position="absolute",o.style.whiteSpace="nowrap";const t=s.options[s.selectedIndex];if(t){o.textContent=t.textContent,document.body.appendChild(o);const e=o.getBoundingClientRect().width;s.style.width=e+18+"px",document.body.removeChild(o)}})};document.querySelectorAll(".lang-dropdown").forEach(s=>{s.addEventListener("change",o=>{N(o),k()})});const O=()=>{const s=E("koala_lang"),o=navigator.language.startsWith("de")?"de":"en",a=s||o;document.querySelectorAll(".lang-dropdown").forEach(t=>{t.value=a}),k()};document.querySelectorAll(".email-reveal").forEach(s=>{s.addEventListener("click",function(){const o=this.getAttribute("data-user"),a=this.getAttribute("data-domain");o&&a&&(this.textContent=`${o}@${a}`)})}),(()=>{const s=navigator.userAgent.includes("Firefox"),o=navigator.userAgent.includes("Chrome")||navigator.userAgent.includes("Chromium"),a=document.querySelectorAll(".btn-primary"),t=document.querySelectorAll(".btn-firefox");s&&a.length>0&&t.length>0?(a.forEach(e=>{e.classList.remove("btn-primary"),e.classList.add("btn-secondary")}),t.forEach(e=>{e.style.order="-1",e.style.transform="scale(1.05)",e.addEventListener("mouseleave",()=>{e.style.transform="scale(1)"}),e.addEventListener("mouseenter",()=>{e.style.transform="scale(1.05) translateY(-2px)"})})):o&&a.length>0&&t.length>0&&t.forEach(e=>{e.classList.remove("btn-firefox"),e.classList.add("btn-secondary"),e.style.color="var(--text)",e.style.background="var(--card)",e.style.border="1px solid var(--glass-border)",e.style.boxShadow="none"}),setTimeout(()=>{const e=document.documentElement.dataset.koalasyncInstalled==="true",l=document.getElementById("nav-extension-status");e&&l&&(l.style.display="inline-flex");const u=document.querySelectorAll(".illus-store-btn.chrome"),r=document.querySelectorAll(".illus-store-btn.firefox");if(s&&r.length>0?(r.forEach(n=>{n.style.order="-1",e||(n.classList.add("install-breathe"),n.style.cursor="pointer",n.onclick=()=>window.open("https://addons.mozilla.org/de/firefox/addon/koalasync/","_blank"))}),u.forEach(n=>{n.style.opacity="0.5",n.style.transform="scale(0.95)"})):o&&u.length>0&&(u.forEach(n=>{n.style.order="-1",e||(n.classList.add("install-breathe"),n.style.cursor="pointer",n.onclick=()=>window.open("https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc","_blank"))}),r.forEach(n=>{n.style.opacity="0.5",n.style.transform="scale(0.95)"})),!e){const n=document.querySelectorAll(s?".btn-firefox":o?".btn-primary":null);n&&n.length>0&&n.forEach(i=>{const d=i.classList.contains("btn-firefox")?"rgba(249, 115, 22, ":"rgba(99, 102, 241, ";i.animate([{transform:"scale(1)",boxShadow:`0 0 15px ${d}0.2)`},{transform:"scale(1.05)",boxShadow:`0 0 25px ${d}0.5)`},{transform:"scale(1)",boxShadow:`0 0 15px ${d}0.2)`}],{duration:2500,iterations:1/0,easing:"ease-in-out"})})}},600)})(),I(),j(),x(),O()}); diff --git a/website/www/app.bd666530.min.js b/website/www/app.bd666530.min.js deleted file mode 100644 index e78ce4b..0000000 --- a/website/www/app.bd666530.min.js +++ /dev/null @@ -1,59 +0,0 @@ -document.addEventListener("DOMContentLoaded",()=>{const k=document.querySelectorAll("[data-reveal]"),w=new IntersectionObserver(n=>{n.forEach(i=>{i.isIntersecting&&(i.target.classList.add("revealed"),w.unobserve(i.target))})},{rootMargin:"0px 0px -150px 0px",threshold:.1});k.forEach(n=>w.observe(n));const v=document.querySelector("nav");window.addEventListener("scroll",()=>{window.scrollY>50?(v.style.padding="0.75rem 0",v.style.background="rgba(15, 23, 42, 0.9)"):(v.style.padding="1rem 0",v.style.background="rgba(30, 41, 59, 0.7)")}),document.querySelectorAll('a[href^="#"]').forEach(n=>{n.addEventListener("click",function(i){i.preventDefault();const t=document.querySelector(this.getAttribute("href"));t&&t.scrollIntoView({behavior:"smooth",block:"start"})})});const T=()=>{const n=window.location.pathname.includes("join");let t=new URLSearchParams(window.location.search).get("dev");if(!t){const a=window.location.hash.startsWith("#")?window.location.hash.substring(1):window.location.hash;t=new URLSearchParams(a).get("dev")}if(t||((window.location.hash.includes("devsuccess")||window.location.search.includes("devsuccess"))&&(t="success"),(window.location.hash.includes("devfailure")||window.location.search.includes("devfailure"))&&(t="failure")),n&&t){setTimeout(()=>{const a=document.getElementById("display-room-id"),e=document.getElementById("join-actions");a&&(a.textContent="DEV-ROOM"),e&&(e.innerHTML=` - - `,setTimeout(()=>{window.dispatchEvent(new CustomEvent("KOALASYNC_STATUS",{detail:{success:t==="success",message:t==="failure"?"Simulated Connection Timeout!":""}}))},1500))},600);return}setTimeout(()=>{const a=document.documentElement.dataset.koalasyncInstalled==="true";if(window.location.hash.startsWith("#join:")){const e=window.location.hash.split(":");if(e.length>=3){const l=e[1],u=e[2],c=e[3]||"0",s=e[4]?decodeURIComponent(e[4]):"";if(n){const o=document.getElementById("display-room-id"),r=document.getElementById("join-actions");o&&(o.textContent=l),r&&(a?(r.innerHTML=` - - `,setTimeout(()=>{window.dispatchEvent(new CustomEvent("KOALASYNC_JOIN_REQUEST",{detail:{roomId:l,password:u,useCustomServer:c==="1",serverUrl:s}}))},500)):navigator.userAgent.includes("Firefox")?r.innerHTML=` -
- - Firefox - GET IT ON MOZILLA ADD-ONSIM FIREFOX ADD-ON STORE HERUNTERLADEN - - - - Download via GitHub\xDCber GitHub herunterladen - -
-

- The extension is required to join and sync videos. - Die Erweiterung ist erforderlich, um beizutreten und Videos zu synchronisieren. -

- `:r.innerHTML=` -
- - Chrome - GET IT ON CHROME WEBSTOREIM CHROME WEB STORE HERUNTERLADEN - - - - Download via GitHub\xDCber GitHub herunterladen - -
-

- The extension is required to join and sync videos. - Die Erweiterung ist erforderlich, um beizutreten und Videos zu synchronisieren. -

- `)}else if(!document.getElementById("koala-banner")){const o=document.createElement("div");o.className="invite-banner",o.id="koala-banner";const r=document.createElement("div");r.className="container",r.style.cssText="display:flex; justify-content:space-between; align-items:center;";const d=document.createElement("span");d.appendChild(document.createTextNode("\u{1F3AB} Invitation for "));const m=document.createElement("b");m.textContent=l,d.appendChild(m),d.appendChild(document.createTextNode(" detected!"));const h=document.createElement("a");h.href="join"+window.location.hash,h.className="btn-banner",h.textContent="OPEN JOIN PAGE",r.appendChild(d),r.appendChild(h),o.appendChild(r),document.body.prepend(o)}document.addEventListener("click",o=>{o.target&&o.target.id==="webJoinBtn"&&(o.target.textContent="JOINING...",o.target.disabled=!0,window.dispatchEvent(new CustomEvent("KOALASYNC_JOIN_REQUEST",{detail:{roomId:l,password:u,useCustomServer:c==="1",serverUrl:s}})))})}}},600)};window.addEventListener("KOALASYNC_STATUS",n=>{const{success:i,message:t}=n.detail;if(window.location.pathname.includes("join")){const e=document.getElementById("join-status-icon"),l=document.getElementById("join-title"),u=document.getElementById("join-actions"),c=document.getElementById("join-desc"),s=document.getElementById("status-ring");if(i){s&&(s.classList.remove("active-pulse"),s.style.display="none"),e&&(e.innerHTML='Success',e.style.transform="scale(1)");const o=document.documentElement.classList.contains("lang-de");l.textContent=o?"Erfolgreich!":"Success!",c.innerHTML=o?'Verbunden!
W\xE4hle jetzt einen Video-Tab in der Erweiterung aus.':'Connected!
Now select a video tab in the extension.';let r=3;const d=()=>{r<=0?(window.close(),c.textContent=o?"Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schlie\xDFen.":"Joined successfully! You can close this tab manually."):(r--,setTimeout(d,1e3))};setTimeout(d,1e3);const m=o?"TAB JETZT SCHLIESSEN":"CLOSE TAB NOW";u.innerHTML=` -
- -
- `}else{s&&(s.classList.remove("active-pulse"),s.style.display="none"),e&&(e.innerHTML=`Error`,e.style.transform="scale(1)");const o=document.documentElement.classList.contains("lang-de");l.textContent=o?"Fehler":"Error",c.textContent=o?`Beitritt fehlgeschlagen: ${t}`:`Join failed: ${t}`;const r=o?"ERNEUT VERSUCHEN":"TRY AGAIN";u.innerHTML=` -
- -
- `}}else{const e=document.getElementById("koala-banner");if(e)if(i)e.style.background="var(--success)",e.innerHTML='
\u2705 Joined! This tab will close in 2s...
',setTimeout(()=>window.close(),2e3);else{e.style.background="var(--error)",e.innerHTML="";const l=document.createElement("div");l.className="container",l.textContent="\u274C Error: "+t,e.appendChild(l)}}});const C=async()=>{try{const n=document.documentElement.lang==="en"?"version.json":"../version.json",i=await fetch(n);if(!i.ok)return;const t=await i.json(),{version:a,date:e}=t;if(!a||!e)return;const l=new Date(e),c=new Date-l,s=Math.floor(c/(1e3*60*60*24)),o=Math.floor(c/(1e3*60*60)),r=Math.floor(c/(1e3*60));let d="",m="";s>0?(d=`${s} ${s===1?"day":"days"} ago`,m=`vor ${s} ${s===1?"Tag":"Tagen"}`):o>0?(d=`${o} ${o===1?"hour":"hours"} ago`,m=`vor ${o} ${o===1?"Stunde":"Stunden"}`):r>0?(d=`${r} ${r===1?"minute":"minutes"} ago`,m=`vor ${r} ${r===1?"Minute":"Minuten"}`):(d="just now",m="gerade eben");const h=document.querySelector(".version-text-en"),x=document.querySelector(".version-text-de");h&&(h.textContent=`v${a} OUT NOW \u2022 ${d}`),x&&(x.textContent=`v${a} JETZT VERF\xDCGBAR \u2022 ${m}`);const E=document.getElementById("schema-software");if(E)try{const y=JSON.parse(E.textContent);y.softwareVersion=a,E.textContent=JSON.stringify(y,null,2)}catch(y){console.warn("Failed to dynamically update schema version:",y)}}catch(n){console.warn("Failed to fetch dynamic version info:",n)}},b=document.querySelectorAll(".mock-tab"),A=document.querySelectorAll(".mock-screen");b.forEach(n=>{n.addEventListener("click",()=>{b.forEach(a=>a.classList.remove("active")),A.forEach(a=>a.classList.remove("active")),n.classList.add("active");const i=n.getAttribute("data-target"),t=document.getElementById(i);t&&t.classList.add("active")})});const L=document.querySelectorAll(".terminal-tab-btn"),I=document.querySelectorAll(".terminal-pane");L.forEach(n=>{n.addEventListener("click",()=>{L.forEach(a=>a.classList.remove("active")),I.forEach(a=>a.classList.remove("active")),n.classList.add("active");const i=n.getAttribute("data-tab"),t=document.getElementById(i);t&&t.classList.add("active")})});const g=document.querySelector(".terminal-copy-btn");g&&g.addEventListener("click",()=>{const n=document.querySelector(".terminal-pane.active");if(!n)return;const i=n.querySelector("code");if(!i)return;const t=i.innerText||i.textContent;navigator.clipboard.writeText(t).then(()=>{const a=document.documentElement.classList.contains("lang-de"),e=g.innerHTML;g.innerHTML=a?"\u2705 Kopiert!":"\u2705 Copied!",g.disabled=!0,setTimeout(()=>{g.innerHTML=e,g.disabled=!1},2e3)}).catch(a=>{console.error("Failed to copy text: ",a)})});const f=document.querySelector(".hamburger"),p=document.querySelector("#primary-nav");if(f&&p){f.setAttribute("aria-expanded","false");const n=()=>{p.classList.add("open"),f.setAttribute("aria-expanded","true"),document.addEventListener("keydown",a)},i=()=>{p.classList.remove("open"),f.setAttribute("aria-expanded","false"),document.removeEventListener("keydown",a)},t=()=>p.classList.contains("open")?i():n(),a=e=>{e.key==="Escape"&&i()};f.addEventListener("click",t),p.querySelectorAll("a").forEach(e=>e.addEventListener("click",i))}const S=()=>{const n=localStorage.getItem("koala_lang")||(navigator.language.startsWith("de")?"de":"en");window.location.pathname.split("/").some(e=>["de","fr","es","pt-BR","ru","it","pl","tr","nl","ja","ko","pt"].includes(e))||document.querySelectorAll('a[href="./"], a[href="de/"], a[href="fr/"], a[href="es/"], a[href="pt-BR/"], a[href="ru/"], a[href="it/"], a[href="pl/"], a[href="tr/"], a[href="nl/"], a[href="ja/"], a[href="ko/"], a[href="pt/"]').forEach(l=>{l.href=n==="en"?"./":`${n}/`})},j=n=>{const t=n.currentTarget.value,a=window.location.pathname;if(localStorage.setItem("koala_lang",t),!(a.includes("impressum")||a.includes("datenschutz")||a.includes("join"))){const c=a.split("/").some(o=>["de","fr","es","pt-BR","ru","it","pl","tr","nl","ja","ko","pt"].includes(o));let s;t==="en"?c?s="../":s="./":c?s="../"+t+"/":s=t+"/",window.location.href=s}else{const u=document.documentElement;u.classList.remove("lang-en","lang-de","lang-fr","lang-es","lang-pt-br","lang-ru","lang-it","lang-pl","lang-tr","lang-nl","lang-ja","lang-ko","lang-pt");const c=t==="de"?"de":"en";if(u.classList.add("lang-"+c),u.lang=c,document.querySelectorAll(".lang-dropdown").forEach(o=>{o.value=t}),a.includes("join")){const o={en:"Join Room | KoalaSync",de:"Raum beitreten | KoalaSync"};document.title=o[c]||o.en}S()}};document.querySelectorAll(".lang-dropdown").forEach(n=>{n.addEventListener("change",j)});const B=()=>{const n=localStorage.getItem("koala_lang"),i=navigator.language.startsWith("de")?"de":"en",t=n||i;document.querySelectorAll(".lang-dropdown").forEach(a=>{a.value=t})};document.querySelectorAll(".email-reveal").forEach(n=>{n.addEventListener("click",function(){const i=this.getAttribute("data-user"),t=this.getAttribute("data-domain");i&&t&&(this.textContent=`${i}@${t}`)})}),(()=>{const n=navigator.userAgent.includes("Firefox"),i=navigator.userAgent.includes("Chrome")||navigator.userAgent.includes("Chromium"),t=document.querySelectorAll(".btn-primary"),a=document.querySelectorAll(".btn-firefox");n&&t.length>0&&a.length>0?(t.forEach(e=>{e.classList.remove("btn-primary"),e.classList.add("btn-secondary")}),a.forEach(e=>{e.style.order="-1",e.style.transform="scale(1.05)",e.addEventListener("mouseleave",()=>{e.style.transform="scale(1)"}),e.addEventListener("mouseenter",()=>{e.style.transform="scale(1.05) translateY(-2px)"})})):i&&t.length>0&&a.length>0&&a.forEach(e=>{e.classList.remove("btn-firefox"),e.classList.add("btn-secondary"),e.style.color="var(--text)",e.style.background="var(--card)",e.style.border="1px solid var(--glass-border)",e.style.boxShadow="none"}),setTimeout(()=>{const e=document.documentElement.dataset.koalasyncInstalled==="true",l=document.getElementById("nav-extension-status");e&&l&&(l.style.display="inline-flex");const u=document.querySelectorAll(".illus-store-btn.chrome"),c=document.querySelectorAll(".illus-store-btn.firefox");if(n&&c.length>0?(c.forEach(s=>{s.style.order="-1",e||(s.classList.add("install-breathe"),s.style.cursor="pointer",s.onclick=()=>window.open("https://addons.mozilla.org/de/firefox/addon/koalasync/","_blank"))}),u.forEach(s=>{s.style.opacity="0.5",s.style.transform="scale(0.95)"})):i&&u.length>0&&(u.forEach(s=>{s.style.order="-1",e||(s.classList.add("install-breathe"),s.style.cursor="pointer",s.onclick=()=>window.open("https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc","_blank"))}),c.forEach(s=>{s.style.opacity="0.5",s.style.transform="scale(0.95)"})),!e){const s=document.querySelectorAll(n?".btn-firefox":i?".btn-primary":null);s&&s.length>0&&s.forEach(o=>{const d=o.classList.contains("btn-firefox")?"rgba(249, 115, 22, ":"rgba(99, 102, 241, ";o.animate([{transform:"scale(1)",boxShadow:`0 0 15px ${d}0.2)`},{transform:"scale(1.05)",boxShadow:`0 0 25px ${d}0.5)`},{transform:"scale(1)",boxShadow:`0 0 15px ${d}0.2)`}],{duration:2500,iterations:1/0,easing:"ease-in-out"})})}},600)})(),T(),C(),S(),B()}); diff --git a/website/www/datenschutz.html b/website/www/datenschutz.html index 03ea3ee..06100a8 100644 --- a/website/www/datenschutz.html +++ b/website/www/datenschutz.html @@ -2,229 +2,23 @@ - - Datenschutz / Privacy Policy | KoalaSync - - - - - - - - - - - - - -
-
-
-
-
- - - -
-
-
- Cute Koala representing privacy and data security - Niedlicher Koala, der den Datenschutz repräsentiert -
-

Datenschutz

-

Privacy Policy

-

- Sicherheit & Privatsphäre -

-

- Security & Privacy -

- -
-

- 1. Hosting & Logfiles - 1. Hosting & Logfiles -

-

- Diese Seite wird auf einem privaten Server gehostet. Zur Gewährleistung der Stabilität werden standardmäßige Server-Logs (IP, Browser, Zeit) erhoben, aber nicht mit Personen verknüpft und nach 7 Tagen automatisch gelöscht. -

-

- This site is hosted on a private server. To ensure stability, standard server logs (IP, browser, time) are collected, but not linked to individuals and are automatically deleted after 7 days. -

-
- -
-

- 2. Keine Drittanbieter & Open Source - 2. No Third Parties & Open Source -

-

- KoalaSync verzichtet bewusst auf Analyse-Tools, Tracking-Cookies oder Werbenetzwerke. Wir laden keine Ressourcen von Drittanbietern (wie Google Fonts) nach, um Ihre Privatsphäre maximal zu schützen. -

-

- Da KoalaSync vollständig Open Source ist, kann zudem jede Zeile Code auf unserem GitHub-Repository öffentlich eingesehen und auf Sicherheit geprüft werden. -

-

- KoalaSync deliberately avoids analytics tools, tracking cookies, or advertising networks. We do not load any third-party resources (such as Google Fonts) to maximize the protection of your privacy. -

-

- Since KoalaSync is 100% open-source, every single line of code can also be publicly viewed and audited for security on our GitHub repository. -

-
- -
-

- 3. Relay-Server Architektur - 3. Relay Server Architecture -

-

- Unser Relay-Server arbeitet ausschließlich im Arbeitsspeicher (RAM). Nachrichten zwischen Teilnehmern werden nicht auf Festplatten gespeichert und sind flüchtig. Sobald ein Raum geschlossen wird, werden alle zugehörigen Metadaten sofort gelöscht. Wir tracken Sie nicht. Wir überwachen lediglich unseren Server auf Basis von aggregierten, anonymen, nicht-personenbezogenen System-Leistungsmetriken. -

-

- Our relay server operates exclusively in memory (RAM). Messages between participants are not stored on hard drives and are volatile. As soon as a room is closed, all associated metadata is immediately deleted. We don't track you. We only track our server, relying on aggregated, anonymous, and non-personal system performance metrics to monitor server health. -

-
- -
-

- 4. Browser-Erweiterung (Extension) - 4. Browser Extension -

-

- Um die geräteübergreifende Synchronisation zu ermöglichen, erfasst die KoalaSync Browser-Erweiterung temporär Daten des aktuell aktiven Video-Tabs (z. B. Tab-Titel, Medien-Metadaten wie den Videotitel sowie den Wiedergabestatus). Diese Daten werden ausschließlich zur Synchronisation an die anderen Teilnehmer in Ihrem Raum gesendet. Es wird ausdrücklich kein allgemeiner Browserverlauf (Browsing History) ausgelesen, gespeichert oder übermittelt. -

-

- To enable cross-device synchronization, the KoalaSync browser extension temporarily captures data from the currently active video tab (e.g., tab title, media metadata like the video title, and playback state). This data is exclusively sent to other participants in your room for synchronization. We explicitly do not read, store, or transmit your general browsing history. -

-
- -
-

- 5. Berechtigungen der Erweiterung - 5. Extension Permissions -

-

- Um ihren technischen Zweck zu erfüllen, benötigt die Browser-Erweiterung bestimmte Berechtigungen. Jede Berechtigung wird ausschließlich für die Kernfunktionalität genutzt: -

-
    -
  • storage: Erlaubt das lokale Speichern von Benutzernamen, Server-URLs und Raum-Zugangsdaten im Browser, damit Sie sich nicht jedes Mal neu anmelden müssen.
    • -
  • tabs: Wird benötigt, um geöffnete Tabs im Dropdown der Erweiterung aufzulisten und deren Titel auszulesen, damit Sie bequem den richtigen Video-Tab auswählen können.
    • -
  • scripting: Erforderlich, um das Synchronisationsskript (content.js) sicher in den von Ihnen ausgewählten Videotab zu injizieren.
    • -
  • alarms: Verhindert, dass der Hintergrunddienst der Erweiterung (Service Worker) während einer aktiven Synchronisationssitzung vom Browser in den Ruhezustand versetzt wird.
    • -
  • activeTab: Ermöglicht eine sichere, temporäre Interaktion mit dem momentan aktiven Tab für direkte Steuerungsbefehle.
    • -
  • notifications: Ermöglicht optionale Desktop-Benachrichtigungen, wenn beispielsweise ein neuer Freund dem Raum beitritt.
    • -
  • <all_urls> (Host-Berechtigung): Ermöglicht der Erweiterung, auf beliebigen Webseiten nach HTML5-Videoelementen zu suchen, damit die Synchronisation plattformübergreifend (z. B. auf YouTube, Netflix, Jellyfin etc.) funktioniert.
    • -
-

- To fulfill its technical purpose, the browser extension requires certain permissions. Each permission is used exclusively for core functionality: -

-
    -
  • storage: Allows local storage of your username, server URL, and room credentials in your browser so you don't have to log in every time.
    • -
  • tabs: Required to list open tabs in the extension's dropdown and read their titles, making it easy for you to select the correct video tab.
    • -
  • scripting: Required to securely inject the synchronization script (content.js) into your selected video tab.
    • -
  • alarms: Prevents the extension's background service worker from being suspended by the browser during an active synchronization session.
    • -
  • activeTab: Enables secure, temporary interaction with the currently active tab for direct playback commands.
    • -
  • notifications: Enables optional desktop notifications, such as when a new friend joins the room.
    • -
  • <all_urls> (Host permission): Allows the extension to scan for HTML5 video elements on any website, enabling cross-platform synchronization (e.g., on YouTube, Netflix, Jellyfin etc.).
    • -
-
- -
-

- 6. Brute-Force Schutz - 6. Brute-Force Protection -

-

- Zur Sicherheit unserer Nutzer speichern wir fehlgeschlagene Login-Versuche (IP-Adresse und Raum-ID) für maximal 15 Minuten im RAM, um automatisierte Angriffe zu verhindern. Diese Daten werden danach rückstandslos gelöscht. -

-

- For the security of our users, we store failed login attempts (IP address and room ID) for a maximum of 15 minutes in RAM to prevent automated attacks. This data is deleted without a trace afterwards. -

-
- -
-

- 7. Ihre Rechte - 7. Your Rights -

-

- Sie haben das Recht auf Auskunft, Berichtigung oder Löschung Ihrer Daten. Da wir jedoch keine personenbezogenen Daten dauerhaft speichern, ist eine Zuordnung zu Ihrer Person in der Regel technisch nicht möglich. -

-

- You have the right to information, correction, or deletion of your data. However, since we do not store any personal data permanently, linking data to your person is technically impossible in most cases. -

-

Kontakt bei Fragen:

-

Contact for questions:

-
-
-
- - - - +

Redirecting / Weiterleitung...

diff --git a/website/www/de/datenschutz.html b/website/www/de/datenschutz.html new file mode 100644 index 0000000..6de2d04 --- /dev/null +++ b/website/www/de/datenschutz.html @@ -0,0 +1,169 @@ + + + + + + Datenschutz | KoalaSync + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+ Niedlicher Koala, der den Datenschutz repräsentiert +
+

Datenschutz

+

+ Sicherheit & Privatsphäre +

+ +
+

1. Hosting & Logfiles

+

+ Diese Seite wird auf einem privaten Server gehostet. Zur Gewährleistung der Stabilität werden standardmäßige Server-Logs (IP, Browser, Zeit) erhoben, aber nicht mit Personen verknüpft und nach 7 Tagen automatisch gelöscht. +

+
+ +
+

2. Keine Drittanbieter & Open Source

+

+ KoalaSync verzichtet bewusst auf Analyse-Tools, Tracking-Cookies oder Werbenetzwerke. Wir laden keine Ressourcen von Drittanbietern (wie Google Fonts) nach, um Ihre Privatsphäre maximal zu schützen. +

+

+ Da KoalaSync vollständig Open Source ist, kann zudem jede Zeile Code auf unserem GitHub-Repository öffentlich eingesehen und auf Sicherheit geprüft werden. +

+
+ +
+

3. Relay-Server Architektur

+

+ Unser Relay-Server arbeitet ausschließlich im Arbeitsspeicher (RAM). Nachrichten zwischen Teilnehmern werden nicht auf Festplatten gespeichert und sind flüchtig. Sobald ein Raum geschlossen wird, werden alle zugehörigen Metadaten sofort gelöscht. Wir tracken Sie nicht. Wir überwachen lediglich unseren Server auf Basis von aggregierten, anonymen, nicht-personenbezogenen System-Leistungsmetriken. +

+
+ +
+

4. Browser-Erweiterung (Extension)

+

+ Um die geräteübergreifende Synchronisation zu ermöglichen, erfasst die KoalaSync Browser-Erweiterung temporär Daten des aktuell aktiven Video-Tabs (z. B. Tab-Titel, Medien-Metadaten wie den Videotitel sowie den Wiedergabestatus). Diese Daten werden ausschließlich zur Synchronisation an die anderen Teilnehmer in Ihrem Raum gesendet. Es wird ausdrücklich kein allgemeiner Browserverlauf (Browsing History) ausgelesen, gespeichert oder übermittelt. +

+
+ +
+

5. Berechtigungen der Erweiterung

+

+ Um ihre technischen Zweck zu erfüllen, benötigt die Browser-Erweiterung bestimmte Berechtigungen. Jede Berechtigung wird ausschließlich für die Kernfunktionalität genutzt: +

+
    +
  • storage: Erlaubt das lokale Speichern von Benutzernamen, Server-URLs und Raum-Zugangsdaten im Browser, damit Sie sich nicht jedes Mal neu anmelden müssen.
    • +
  • tabs: Wird benötigt, um geöffnete Tabs im Dropdown der Erweiterung aufzulisten und deren Titel auszulesen, damit Sie bequem den richtigen Video-Tab auswählen können.
    • +
  • scripting: Erforderlich, um das Synchronisationsskript (content.js) sicher in den von Ihnen ausgewählten Videotab zu injizieren.
    • +
  • alarms: Verhindert, dass der Hintergrunddienst der Erweiterung (Service Worker) während einer aktiven Synchronisationssitzung vom Browser in den Ruhezustand versetzt wird.
    • +
  • activeTab: Ermöglicht eine sichere, temporäre Interaktion mit dem momentan aktiven Tab für direkte Steuerungsbefehle.
    • +
  • notifications: Ermöglicht optionale Desktop-Benachrichtigungen, wenn beispielsweise ein neuer Freund dem Raum beitritt.
    • +
  • <all_urls> (Host-Berechtigung): Ermöglicht der Erweiterung, auf beliebigen Webseiten nach HTML5-Videoelementen zu suchen, damit die Synchronisation plattformübergreifend (z. B. auf YouTube, Netflix, Jellyfin etc.) funktioniert.
    • +
+
+ +
+

6. Brute-Force Schutz

+

+ Zur Sicherheit unserer Nutzer speichern wir fehlgeschlagene Login-Versuche (IP-Adresse und Raum-ID) für maximal 15 Minuten im RAM, um automatisierte Angriffe zu verhindern. Diese Daten werden danach rückstandslos gelöscht. +

+
+ +
+

7. Ihre Rechte

+

+ Sie haben das Recht auf Auskunft, Berichtigung oder Löschung Ihrer Daten. Da wir jedoch keine personenbezogenen Daten dauerhaft speichern, ist eine Zuordnung zu Ihrer Person in der Regel technisch nicht möglich. +

+

Kontakt bei Fragen:

+
+
+
+ +
+
+

© 2026 KoalaSync. Open Source unter der MIT-Lizenz.

+

Keine Daten werden auf unseren Servern gespeichert. Reines RAM-basiertes Relay.

+
+ Impressum + Datenschutz + + + Mastodon + +
+
+
+ + + + diff --git a/website/www/de/impressum.html b/website/www/de/impressum.html new file mode 100644 index 0000000..967f9b3 --- /dev/null +++ b/website/www/de/impressum.html @@ -0,0 +1,156 @@ + + + + + + Impressum | KoalaSync + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+ Niedlicher Koala, der das Impressum repräsentiert +
+

Impressum

+

+ Transparenz & Identifikation +

+ +
+

Betreiber & Kontakt

+

Timo (KoalaDev) – Privatperson

+

+ E-Mail: +

+

+ 🔒 Private Nachricht: + @koalastuff auf Mastodon +

+

+ 🐛 Active Bedenken / Bug Reports: + GitHub Issues +

+
+ +
+

Privatprojekt-Hinweis

+

+ Diese Website ist ein rein privates Hobby-Projekt und dient keinen geschäftsmäßigen Zwecken. + Eine Impressumspflicht nach § 5 DDG (ehemals TMG) besteht daher nicht. + Diese Angaben erfolgen rein freiwillig zur Transparenz gegenüber der Community. +

+
+ +
+

Haftung für Inhalte

+

+ Gemäß § 7 Abs.1 DDG sind wir für eigene Inhalte verantwortlich. Nach §§ 8 bis 10 DDG sind wir jedoch nicht verpflichtet, + übermittelte oder gespeicherte fremde Informationen zu überwachen. +

+
+ +
+

Haftung für Links

+

+ Unser Angebot enthält Links zu externen Websites Dritter. Auf deren Inhalte haben wir keinen Einfluss und + können daher keine Gewähr für diese fremden Inhalte übernehmen. +

+
+ +
+

Urheberrecht

+

+ Die durch die Seitenbetreiber erstellten Inhalte auf diesen Seiten unterliegen dem deutschen Urheberrecht. + Vervielfältigung, Bearbeitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung. +

+
+
+
+ +
+
+

© 2026 KoalaSync. Open Source unter der MIT-Lizenz.

+

Keine Daten werden auf unseren Servern gespeichert. Reines RAM-basiertes Relay.

+
+ Impressum + Datenschutz + + + Mastodon + +
+
+
+ + + + diff --git a/website/www/de/index.html b/website/www/de/index.html index 44e6b26..2556b38 100644 --- a/website/www/de/index.html +++ b/website/www/de/index.html @@ -6,9 +6,9 @@ KoalaSync | Netflix, YouTube & jedes Video mit Freunden synchronisieren - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/es/index.html b/website/www/es/index.html index db14797..efa4134 100644 --- a/website/www/es/index.html +++ b/website/www/es/index.html @@ -6,9 +6,9 @@ KoalaSync | Sincroniza Netflix, YouTube y cualquier video con amigos - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/fr/index.html b/website/www/fr/index.html index 65f2212..048ff57 100644 --- a/website/www/fr/index.html +++ b/website/www/fr/index.html @@ -6,9 +6,9 @@ KoalaSync | Synchronisez Netflix, YouTube et n'importe quelle vidéo avec vos amis - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/impressum.html b/website/www/impressum.html index 0b8c55e..caf8317 100644 --- a/website/www/impressum.html +++ b/website/www/impressum.html @@ -2,203 +2,23 @@ - - Impressum / Legal Notice | KoalaSync - - - - - - - - - - - - - -
-
-
-
-
- - - -
-
-
- Cute Koala representing the legal notice page - Niedlicher Koala, der das Impressum repräsentiert -
-

Impressum

-

Legal Notice

-

- Transparenz & Identifikation -

-

- Transparency & Identification -

- -
-

- Betreiber & Kontakt - Operator & Contact -

-

Timo (KoalaDev) – Privatperson

-

Timo (KoalaDev) – Private Individual

-

- E-Mail: -

-

- E-Mail: -

-

- 🔒 Private Nachricht: - @koalastuff auf Mastodon -

-

- 🔒 Private message: - @koalastuff on Mastodon -

-

- 🐛 Active Bedenken / Bug Reports: - GitHub Issues -

-

- 🐛 Active concerns / Bug reports: - GitHub Issues -

-
- -
-

- Privatprojekt-Hinweis - Private Project Notice -

-

- Diese Website ist ein rein privates Hobby-Projekt und dient keinen geschäftsmäßigen Zwecken. - Eine Impressumspflicht nach § 5 DDG (ehemals TMG) besteht daher nicht. - Diese Angaben erfolgen rein freiwillig zur Transparenz gegenüber der Community. -

-

- This website is a purely private hobby project and does not serve any commercial purposes. - Therefore, there is no obligation to provide a legal notice according to § 5 DDG (formerly TMG). - This information is provided voluntarily for transparency towards the community. -

-
- -
-

- Haftung für Inhalte - Liability for Content -

-

- Gemäß § 7 Abs.1 DDG sind wir für eigene Inhalte verantwortlich. Nach §§ 8 bis 10 DDG sind wir jedoch nicht verpflichtet, - übermittelte oder gespeicherte fremde Informationen zu überwachen. -

-

- According to § 7 Abs.1 DDG we are responsible for our own content. According to §§ 8 to 10 DDG, however, we are not obligated to monitor transmitted or stored third-party information. -

-
- -
-

- Haftung für Links - Liability for Links -

-

- Unser Angebot enthält Links zu externen Websites Dritter. Auf deren Inhalte haben wir keinen Einfluss und - können daher keine Gewähr für diese fremden Inhalte übernehmen. -

-

- Our offer contains links to external third-party websites. We have no influence on their content and therefore cannot assume any liability for these external contents. -

-
- -
-

- Urheberrecht - Copyright -

-

- Die durch die Seitenbetreiber erstellten Inhalte auf diesen Seiten unterliegen dem deutschen Urheberrecht. - Vervielfältigung, Bearbeitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung. -

-

- The content and works created by the site operators on these pages are subject to German copyright law. - Duplication, processing, and any kind of exploitation outside the limits of copyright require written consent. -

-
-
-
- - - - +

Redirecting / Weiterleitung...

diff --git a/website/www/imprint.html b/website/www/imprint.html new file mode 100644 index 0000000..6bb517f --- /dev/null +++ b/website/www/imprint.html @@ -0,0 +1,154 @@ + + + + + + Legal Notice | KoalaSync + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+ Cute Koala representing the legal notice page +
+

Legal Notice

+

+ Transparency & Identification +

+ +
+

Operator & Contact

+

Timo (KoalaDev) – Private Individual

+

+ E-Mail: +

+

+ 🔒 Private message: + @koalastuff on Mastodon +

+

+ 🐛 Active concerns / Bug reports: + GitHub Issues +

+
+ +
+

Private Project Notice

+

+ This website is a purely private hobby project and does not serve any commercial purposes. + Therefore, there is no obligation to provide a legal notice according to § 5 DDG (formerly TMG). + This information is provided voluntarily for transparency towards the community. +

+
+ +
+

Liability for Content

+

+ According to § 7 Abs.1 DDG we are responsible for our own content. According to §§ 8 to 10 DDG, however, we are not obligated to monitor transmitted or stored third-party information. +

+
+ +
+

Liability for Links

+

+ Our offer contains links to external third-party websites. We have no influence on their content and therefore cannot assume any liability for these external contents. +

+
+ +
+

Copyright

+

+ The content and works created by the site operators on these pages are subject to German copyright law. + Duplication, processing, and any kind of exploitation outside the limits of copyright require written consent. +

+
+
+
+ + + + + + diff --git a/website/www/index.html b/website/www/index.html index e17ae96..14e6a2e 100644 --- a/website/www/index.html +++ b/website/www/index.html @@ -6,9 +6,9 @@ KoalaSync | Sync Netflix, YouTube & Any Video with Friends - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/it/index.html b/website/www/it/index.html index 98dbd7e..cd726be 100644 --- a/website/www/it/index.html +++ b/website/www/it/index.html @@ -6,9 +6,9 @@ KoalaSync | Sincronizza Netflix, YouTube e qualsiasi video con gli amici - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/ja/index.html b/website/www/ja/index.html index 90c5961..6e0aa67 100644 --- a/website/www/ja/index.html +++ b/website/www/ja/index.html @@ -6,9 +6,9 @@ KoalaSync | Netflix、YouTube、あらゆる動画を友達と同期視聴 - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/join.html b/website/www/join.html index 17ab171..3e86438 100644 --- a/website/www/join.html +++ b/website/www/join.html @@ -4,8 +4,8 @@ Join Room | KoalaSync - - + + @@ -29,7 +29,7 @@ - +
@@ -128,6 +128,6 @@
- + diff --git a/website/www/ko/index.html b/website/www/ko/index.html index afbb621..186d5d8 100644 --- a/website/www/ko/index.html +++ b/website/www/ko/index.html @@ -6,9 +6,9 @@ KoalaSync | Netflix, YouTube 및 모든 비디오를 친구와 실시간 동기화 시청 - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/lang-init.1b13bbf2.min.js b/website/www/lang-init.1b13bbf2.min.js new file mode 100644 index 0000000..b81e543 --- /dev/null +++ b/website/www/lang-init.1b13bbf2.min.js @@ -0,0 +1 @@ +(function(){var i=document.documentElement,a=window.location.pathname,c=function(n){try{return localStorage.getItem(n)}catch{return null}},m=function(n,g){try{localStorage.setItem(n,g)}catch{return}},d={de:"de",fr:"fr",es:"es","pt-br":"pt-BR",pt:"pt",ru:"ru",it:"it",pl:"pl",tr:"tr",nl:"nl",ja:"ja",ko:"ko"},f=function(){var n=(navigator.language||"").toLowerCase();return n.indexOf("pt-br")===0?"pt-br":n.indexOf("pt")===0?"pt":n.split("-")[0]},h=a==="/"||a==="/index.html"||a==="";if(h){var l=c("koala_lang"),o=f(),u=l||d[o]||"en";if(u!=="en"){window.location.replace(u+"/");return}}for(var s=i.className.split(" "),e=null,v=!1,r=0;rKoalaSync | Synchroniseer Netflix, YouTube & elke video met vrienden - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/pl/index.html b/website/www/pl/index.html index 75a1474..7047819 100644 --- a/website/www/pl/index.html +++ b/website/www/pl/index.html @@ -6,9 +6,9 @@ KoalaSync | Synchronizuj Netflix, YouTube i dowolne wideo ze znajomymi - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/privacy.html b/website/www/privacy.html new file mode 100644 index 0000000..049928d --- /dev/null +++ b/website/www/privacy.html @@ -0,0 +1,169 @@ + + + + + + Privacy Policy | KoalaSync + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+ Cute Koala representing privacy and data security +
+

Privacy Policy

+

+ Security & Privacy +

+ +
+

1. Hosting & Logfiles

+

+ This site is hosted on a private server. To ensure stability, standard server logs (IP, browser, time) are collected, but not linked to individuals and are automatically deleted after 7 days. +

+
+ +
+

2. No Third Parties & Open Source

+

+ KoalaSync deliberately avoids analytics tools, tracking cookies, or advertising networks. We do not load any third-party resources (such as Google Fonts) to maximize the protection of your privacy. +

+

+ Since KoalaSync is 100% open-source, every single line of code can also be publicly viewed and audited for security on our GitHub repository. +

+
+ +
+

3. Relay Server Architecture

+

+ Our relay server operates exclusively in memory (RAM). Messages between participants are not stored on hard drives and are volatile. As soon as a room is closed, all associated metadata is immediately deleted. We don't track you. We only track our server, relying on aggregated, anonymous, and non-personal system performance metrics to monitor server health. +

+
+ +
+

4. Browser Extension

+

+ To enable cross-device synchronization, the KoalaSync browser extension temporarily captures data from the currently active video tab (e.g., tab title, media metadata like the video title, and playback state). This data is exclusively sent to other participants in your room for synchronization. We explicitly do not read, store, or transmit your general browsing history. +

+
+ +
+

5. Extension Permissions

+

+ To fulfill its technical purpose, the browser extension requires certain permissions. Each permission is used exclusively for core functionality: +

+
    +
  • storage: Allows local storage of your username, server URL, and room credentials in your browser so you don't have to log in every time.
    • +
  • tabs: Required to list open tabs in the extension's dropdown and read their titles, making it easy for you to select the correct video tab.
    • +
  • scripting: Required to securely inject the synchronization script (content.js) into your selected video tab.
    • +
  • alarms: Prevents the extension's background service worker from being suspended by the browser during an active synchronization session.
    • +
  • activeTab: Enables secure, temporary interaction with the currently active tab for direct playback commands.
    • +
  • notifications: Enables optional desktop notifications, such as when a new friend joins the room.
    • +
  • <all_urls> (Host permission): Allows the extension to scan for HTML5 video elements on any website, enabling cross-platform synchronization (e.g., on YouTube, Netflix, Jellyfin etc.).
    • +
+
+ +
+

6. Brute-Force Protection

+

+ For the security of our users, we store failed login attempts (IP address and room ID) for a maximum of 15 minutes in RAM to prevent automated attacks. This data is deleted without a trace afterwards. +

+
+ +
+

7. Your Rights

+

+ You have the right to information, correction, or deletion of your data. However, since we do not store any personal data permanently, linking data to your person is technically impossible in most cases. +

+

Contact for questions:

+
+
+
+ + + + + + diff --git a/website/www/pt-BR/index.html b/website/www/pt-BR/index.html index 28fd402..ebb4fd8 100644 --- a/website/www/pt-BR/index.html +++ b/website/www/pt-BR/index.html @@ -6,9 +6,9 @@ KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com amigos - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/pt/index.html b/website/www/pt/index.html index b7fd948..a9c162f 100644 --- a/website/www/pt/index.html +++ b/website/www/pt/index.html @@ -6,9 +6,9 @@ KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com os amigos - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/ru/index.html b/website/www/ru/index.html index 4d6f629..57807bc 100644 --- a/website/www/ru/index.html +++ b/website/www/ru/index.html @@ -6,9 +6,9 @@ KoalaSync | Синхронизация Netflix, YouTube и любого видео с друзьями - + - + @@ -63,7 +63,7 @@ - + + diff --git a/website/www/sitemap.xml b/website/www/sitemap.xml index fd247ec..616cb43 100644 --- a/website/www/sitemap.xml +++ b/website/www/sitemap.xml @@ -3,7 +3,7 @@ xmlns:xhtml="http://www.w3.org/1999/xhtml"> https://sync.koalastuff.net/ - 2026-06-01 + 2026-06-04 weekly 1.0 @@ -12,11 +12,18 @@ + + + + + + + https://sync.koalastuff.net/de/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -25,11 +32,18 @@ + + + + + + + https://sync.koalastuff.net/fr/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -38,11 +52,18 @@ + + + + + + + https://sync.koalastuff.net/es/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -51,11 +72,18 @@ + + + + + + + https://sync.koalastuff.net/pt-BR/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -64,11 +92,18 @@ + + + + + + + https://sync.koalastuff.net/ru/ - 2026-06-01 + 2026-06-04 weekly 0.8 @@ -77,6 +112,153 @@ + + + + + + + + + + + https://sync.koalastuff.net/it/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/pl/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/tr/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/nl/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/ja/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/ko/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + + + + + https://sync.koalastuff.net/pt/ + 2026-06-04 + weekly + 0.8 + + + + + + + + + + + + + diff --git a/website/www/style.3ca56f45.min.css b/website/www/style.39c35bf7.min.css similarity index 72% rename from website/www/style.3ca56f45.min.css rename to website/www/style.39c35bf7.min.css index 609514e..48095a4 100644 --- a/website/www/style.3ca56f45.min.css +++ b/website/www/style.39c35bf7.min.css @@ -1 +1 @@ -:root{--bg:#0f172a;--card:#1e293b;--accent:#6366f1;--accent-glow:rgba(99,102,241,0.3);--text:#f8fafc;--text-muted:#cbd5e1;--success:#22c55e;--glass:rgba(30,41,59,0.4);--glass-border:rgba(255,255,255,0.05)}.invite-banner{background:var(--accent);color:white;padding:0.75rem 0;text-align:center;font-weight:600;font-size:0.9rem;position:relative;z-index:2000;box-shadow:0 4px 12px rgba(0,0,0,0.3)}.btn-banner{background:white;color:var(--accent);padding:4px 12px;border-radius:6px;text-decoration:none;font-size:0.8rem;font-weight:700;margin-left:12px;cursor:pointer;border:none;transition:transform 0.2s}.btn-banner:hover{transform:scale(1.05)}*{margin:0;padding:0;box-sizing:border-box}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";background-color:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;position:relative}.bg-blobs{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;background:radial-gradient(circle at 50% 50%,#1e1b4b 0%,#0f172a 100%)}.blob{position:absolute;width:600px;height:600px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);filter:blur(80px);border-radius:50%;opacity:0.5;animation:move 25s infinite alternate ease-in-out}.blob-1{top:-100px;left:-100px;animation-delay:0s}.blob-2{bottom:-100px;right:-100px;animation-delay:-5s;background:radial-gradient(circle,rgba(139,92,246,0.2) 0%,transparent 70%)}.blob-3{top:40%;left:30%;animation-duration:35s;animation-delay:-10s}@keyframes move{0%{transform:translate(0,0) scale(1)}33%{transform:translate(100px,100px) scale(1.2)}66%{transform:translate(-50px,200px) scale(0.8)}100%{transform:translate(0,0) scale(1)}}.container{max-width:1100px;margin:0 auto;padding:0 2rem}section{padding:6rem 0}.use-cases-section,#features,#self-hosting,.comparison-section{content-visibility:auto;contain-intrinsic-size:auto 1400px}nav{position:fixed;top:0;width:100%;z-index:1000;background:var(--glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);padding:1rem 0}.nav-content{display:flex;align-items:center}.logo-area{display:flex;align-items:center;gap:0.75rem;font-weight:800;font-size:1.5rem;letter-spacing:-0.5px}.logo-area picture{display:contents}.logo-area img{height:64px;width:64px;object-fit:contain;border-radius:8px;margin:-4px 0}.nav-ext-status{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);color:#10b981;border-radius:12px;font-size:0.55rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;box-shadow:0 0 10px rgba(16,185,129,0.1);animation:fade-in 0.4s ease-out;margin-left:0.2rem}@keyframes fade-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.nav-links{display:flex;gap:2rem;margin-left:auto}.nav-links a{color:var(--text-muted);text-decoration:none;font-weight:500;transition:color 0.3s}.nav-links a:hover{color:var(--accent)}.nav-right{display:flex;align-items:center;gap:0.5rem;margin-left:2rem;flex-shrink:0}.hero{min-height:100vh;display:flex;align-items:center;padding-top:8rem;padding-bottom:4rem}.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:4rem;text-align:left;width:100%}.hero-text h1{font-size:4.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;background:linear-gradient(to bottom,#fff 40%,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-text p,.hero-subtitle{font-size:1.25rem;color:var(--text-muted);margin-bottom:2.5rem;max-width:600px;font-weight:400;line-height:1.6}.hero-mascot-container{display:block;margin-bottom:-0.5rem;margin-left:2.2rem}.hero-lookdown-mascot{display:block;width:90px;height:auto}@media (max-width:768px){.hero-mascot-container{margin-left:0;display:flex;justify-content:center}}.cta-group{display:flex;gap:1rem;flex-wrap:wrap}.btn{padding:0.85rem 1.75rem;border-radius:12px;font-weight:600;text-decoration:none;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),background-color 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1),color 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s cubic-bezier(0.4,0,0.2,1),border-color 0.3s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;gap:0.5rem;font-size:0.95rem}.btn-primary{background:#5b5de8;color:white;box-shadow:0 10px 15px -3px var(--accent-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px var(--accent-glow)}.btn-firefox{background:#e66000;color:white;box-shadow:0 10px 15px -3px rgba(230,96,0,0.3)}.btn-firefox:hover{background:#ff7300;transform:translateY(-2px);box-shadow:0 20px 25px -5px rgba(230,96,0,0.4)}.btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--glass-border)}.btn-secondary:hover{background:#2d3748;transform:translateY(-2px)}.version-badge{display:inline-block;background:rgba(99,102,241,0.1);color:var(--accent);padding:0.4rem 1rem;border-radius:99px;font-size:0.8rem;font-weight:700;margin-bottom:1.5rem;border:1px solid rgba(99,102,241,0.3);letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,background 0.2s}.version-badge:hover{background:rgba(99,102,241,0.2);box-shadow:0 0 16px rgba(99,102,241,0.3);transform:translateY(-1px)}.hero-mockup-wrapper{display:flex;justify-content:center;align-items:center;width:100%}.extension-mockup{width:320px;height:520px;background:#0f172a;border-radius:20px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 40px rgba(0,0,0,0.4),0 0 20px rgba(99,102,241,0.15);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden;position:relative;user-select:none;padding:16px;padding-bottom:0;box-sizing:border-box}.mock-header-row{display:flex;align-items:center;margin-bottom:16px;flex-shrink:0}.mock-header-title{font-size:18px;margin:0;color:var(--accent);letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;font-weight:800}.mock-header-title picture{display:contents}.mock-header-title img{width:28px;height:28px;object-fit:contain;border-radius:6px}.mock-version-link{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-muted);text-decoration:none;opacity:0.5;transition:opacity 0.2s,color 0.2s;cursor:pointer}.mock-version-link:hover{opacity:1;color:var(--accent)}.mock-tabs{display:flex;gap:4px;background:#1e293b;padding:4px;border-radius:12px;margin-bottom:20px;flex-shrink:0}.mock-tab{flex:1;background:none;border:none;color:var(--text-muted);font-size:0.75rem;font-weight:600;padding:8px 4px;cursor:pointer;border-radius:8px;transition:color 0.2s,background-color 0.2s;text-align:center}.mock-tab:hover{color:var(--text)}.mock-tab.active{background:var(--accent);color:white}.mock-body{flex:1;overflow-y:auto;padding:0;padding-bottom:16px;display:flex;flex-direction:column;font-size:0.8rem;scrollbar-width:none}.mock-body::-webkit-scrollbar{display:none}.mock-screen{display:none;flex-direction:column;gap:12px}.mock-screen.active{display:flex}.mock-card{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:12px}.mock-label{font-size:0.65rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.4rem}.mock-section-label{display:block;font-size:11px;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;font-weight:700}.mock-input{background:#1e293b;border:1px solid #334155;border-radius:8px;color:white;padding:8px 10px;font-size:0.75rem;width:100%;outline:none}.mock-btn{background:var(--accent);color:white;border:none;border-radius:6px;padding:0.5rem;font-weight:600;font-size:0.75rem;cursor:pointer;transition:background 0.2s;text-align:center}.mock-btn:hover{background:#4f46e5}.mock-joined-room{display:flex;justify-content:space-between;align-items:center;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:8px;padding:0.6rem 0.75rem}.mock-room-name{font-weight:700;color:var(--accent);font-size:0.85rem}.mock-server-badge{background:rgba(99,102,241,0.2);color:var(--accent);font-size:0.6rem;font-weight:700;padding:2px 6px;border-radius:4px}.mock-invite-box{display:flex;gap:0.4rem}.mock-invite-box input{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-peer-list{display:flex;flex-direction:column;gap:0.5rem}.mock-peer-item{display:flex;flex-direction:column;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);border-radius:8px;padding:0.5rem 0.6rem}.mock-peer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem}.mock-peer-name{font-weight:700;color:var(--text)}.mock-peer-meta{font-size:0.65rem;color:var(--text-muted)}.mock-peer-tab{font-size:0.7rem;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mock-peer-status{font-size:0.65rem;color:var(--text-muted);display:flex;align-items:center;gap:0.25rem}.mock-target-box{display:flex;align-items:center;gap:0.4rem;background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.2);color:#facc15;padding:0.5rem 0.6rem;border-radius:8px;font-weight:600;font-size:0.7rem}.mock-ctrl-buttons{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.mock-btn-play{background:#22c55e}.mock-btn-play:hover{background:#16a34a}.mock-btn-pause{background:#ef4444}.mock-btn-pause:hover{background:#dc2626}.mock-btn-force{background:var(--accent);grid-column:span 2}.mock-status-display{display:flex;align-items:center;justify-content:space-between}.mock-status-pill{display:inline-flex;align-items:center;gap:0.3rem;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);color:#22c55e;padding:2px 8px;border-radius:99px;font-size:0.65rem;font-weight:700}.mock-log-item{font-size:0.7rem;color:var(--text-muted);border-left:2px solid var(--accent);padding-left:0.4rem;margin-top:0.4rem}.mock-settings-row{display:flex;align-items:flex-start;gap:0.5rem;margin-bottom:0.6rem}.mock-settings-row input[type="checkbox"]{margin-top:0.2rem;cursor:pointer}.mock-settings-row label{cursor:pointer;font-weight:600}.mock-settings-row p{font-size:0.65rem;color:var(--text-muted);margin-top:0.1rem}.mock-toggle-switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}.mock-toggle-switch input{opacity:0;width:0;height:0}.mock-slider{position:absolute;cursor:default;top:0;left:0;right:0;bottom:0;background-color:#334155;transition:.3s;border-radius:20px}.mock-slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#94a3b8;transition:.3s;border-radius:50%}input:checked + .mock-slider{background-color:var(--accent)}input:checked + .mock-slider:before{transform:translateX(16px);background-color:white}.mock-diagnostic-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem}.mock-diag-box{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:6px;padding:0.4rem}.mock-diag-box .diag-val{font-family:monospace;font-weight:700;color:var(--accent);font-size:0.75rem}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:4rem}.feature-card{background:rgba(30,41,59,0.45);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);padding:2.5rem;border-radius:24px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 32px 0 rgba(0,0,0,0.3);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1),border-color 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:24px;padding:1px;background:linear-gradient(to bottom right,rgba(255,255,255,0.12),transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.feature-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(99,102,241,0.2);border-color:rgba(99,102,241,0.3)}.feature-card:hover::before{background:linear-gradient(to bottom right,rgba(99,102,241,0.3),transparent)}.feature-icon-svg{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(99,102,241,0.12);color:var(--accent);border-radius:12px;margin-right:14px;transition:background 0.3s ease,color 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease}.feature-card:hover .feature-icon-svg{background:var(--accent);color:white;box-shadow:0 0 15px var(--accent-glow);transform:scale(1.05)}.bento-icon{width:22px;height:22px;display:block;flex-shrink:0}.feature-card h3{margin-bottom:1rem;font-size:1.25rem;font-weight:700;display:flex;align-items:center}.feature-card p{color:var(--text-muted);font-size:0.95rem;line-height:1.6}.feature-card.bento-large{grid-column:span 2;background:linear-gradient(135deg,rgba(30,41,59,0.45) 0%,rgba(99,102,241,0.08) 100%);padding:3rem 3.5rem;display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:center}.feature-card.bento-large h3{flex-direction:column;align-items:center;text-align:center;gap:1rem;margin-bottom:0;font-size:1.25rem}.feature-card.bento-large .feature-icon,.feature-card.bento-large .feature-icon-svg{width:52px;height:52px;border-radius:14px;margin-right:0;flex-shrink:0}.feature-card.bento-large .bento-icon{width:24px;height:24px}.feature-card.bento-large p{font-size:1rem;line-height:1.7;margin:0}.feature-card.bento-large::after{content:'';position:absolute;top:0;left:2.5rem;right:2.5rem;height:2px;background:linear-gradient(90deg,transparent,rgba(99,102,241,0.4),transparent);opacity:0;transition:opacity 0.3s ease}.feature-card.bento-large:hover::after{opacity:1}@media (max-width:900px){.features-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}.feature-card.bento-large{grid-column:span 2;padding:2.5rem;gap:2rem}.feature-card.bento-large h3{font-size:1.15rem}}@media (max-width:600px){.features-grid{grid-template-columns:1fr;gap:1rem}.feature-card.bento-large{grid-column:span 1;display:flex;flex-direction:column;padding:1.75rem;gap:1rem}.feature-card.bento-large h3{flex-direction:row;align-items:center;text-align:left;gap:0.75rem;margin-bottom:0;font-size:1.15rem}.feature-card.bento-large .feature-icon,.feature-card.bento-large .feature-icon-svg{width:40px;height:40px;border-radius:10px;margin-right:0}.feature-card.bento-large .bento-icon{width:18px;height:18px}.feature-card.bento-large p{font-size:0.9rem;line-height:1.6}.feature-card.bento-large::after{display:none}.feature-card{padding:1.75rem}.feature-card h3{font-size:1.1rem}.feature-icon-svg{width:40px;height:40px;border-radius:10px;margin-right:12px}.bento-icon{width:18px;height:18px}}.steps{display:flex;flex-direction:column;gap:6rem}.step{display:grid;grid-template-columns:1fr 1.1fr;gap:6rem;align-items:center}.step:nth-child(even) .step-text{order:2}.step-num{font-size:4rem;font-weight:800;color:rgba(99,102,241,0.15);line-height:1;margin-bottom:0.5rem}.step-text h3{font-size:1.85rem;margin-bottom:1rem;font-weight:800}.step-text p{color:var(--text-muted);font-size:1.05rem;line-height:1.6}.step-illustration-1,.step-illustration-2,.step-illustration-3{background:radial-gradient(circle at top left,#1e293b,#0f172a);height:280px;border-radius:24px;border:1px solid var(--glass-border);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 40px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),border-color 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s cubic-bezier(0.16,1,0.3,1)}.step-illustration-1:hover,.step-illustration-2:hover,.step-illustration-3:hover{transform:translateY(-6px) scale(1.02);border-color:rgba(99,102,241,0.25);box-shadow:0 25px 50px rgba(99,102,241,0.15),inset 0 1px 0 rgba(255,255,255,0.1)}.illus-browser-container{width:90%;height:80%;background:#090d16;border:1px solid rgba(255,255,255,0.05);border-radius:12px;overflow:hidden;box-shadow:0 15px 30px rgba(0,0,0,0.5);display:flex;flex-direction:column}.illus-browser-header{background:#131924;padding:0.6rem 0.8rem;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,0.05)}.illus-browser-dots{display:flex;gap:6px;margin-right:1.5rem}.illus-browser-dot{width:8px;height:8px;border-radius:50%;opacity:0.6}.illus-browser-dot:nth-child(1){background:#ef4444}.illus-browser-dot:nth-child(2){background:#fbbf24}.illus-browser-dot:nth-child(3){background:#22c55e}.illus-browser-address-bar{background:#090d16;border:1px solid rgba(255,255,255,0.08);border-radius:6px;color:var(--text-muted);font-size:0.68rem;padding:3px 12px;flex-grow:1;max-width:60%;text-align:center;font-family:monospace;letter-spacing:0.2px}.illus-browser-address-bar .url-protocol{color:#22c55e;font-weight:600}.illus-browser-toolbar{display:flex;margin-left:auto}.illus-extension-btn{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:opacity 0.3s,box-shadow 0.3s}.illus-extension-btn.active{background:rgba(99,102,241,0.2);border:1px solid var(--accent);box-shadow:0 0 10px rgba(99,102,241,0.4);animation:active-pulse 2s infinite alternate}@keyframes active-pulse{0%{transform:scale(1);box-shadow:0 0 5px rgba(99,102,241,0.4)}100%{transform:scale(1.08);box-shadow:0 0 12px rgba(99,102,241,0.7)}}.illus-browser-content{flex-grow:1;padding:1rem;position:relative;display:flex;align-items:flex-start}.illus-store-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:0.8rem;width:65%;display:flex;flex-direction:column;gap:10px}.illus-store-card-header{display:flex;align-items:center;gap:8px}.illus-large-logo{width:30px;height:30px;object-fit:contain;border-radius:6px;box-shadow:0 0 10px rgba(99,102,241,0.2)}.illus-store-info{display:flex;flex-direction:column}.illus-store-title{font-size:0.88rem;font-weight:800;color:var(--text);line-height:1.1}.illus-store-desc{font-size:0.58rem;color:var(--text-muted);line-height:1.2;margin-top:2px}.illus-store-buttons{display:flex;flex-direction:column;gap:6px}.illus-store-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;font-size:0.58rem;font-weight:700;color:white;border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.03);box-shadow:0 2px 5px rgba(0,0,0,0.2);cursor:default;transition:opacity 0.2s,transform 0.2s}.illus-store-btn img{width:11px;height:11px;display:block}.illus-store-btn.chrome{border-color:rgba(99,102,241,0.25);background:rgba(99,102,241,0.08);box-shadow:0 0 10px rgba(99,102,241,0.05)}.illus-store-btn.firefox{border-color:rgba(249,115,22,0.25);background:rgba(249,115,22,0.08);box-shadow:0 0 10px rgba(249,115,22,0.05)}.install-breathe{animation:install-breathe 2.5s ease-in-out infinite;z-index:2;position:relative}@keyframes install-breathe{0%,100%{transform:scale(1);box-shadow:0 0 15px rgba(99,102,241,0.2)}50%{transform:scale(1.05);box-shadow:0 0 25px rgba(99,102,241,0.5)}}.install-breathe.firefox,.btn-firefox.install-breathe{animation-name:install-breathe-ff}@keyframes install-breathe-ff{0%,100%{transform:scale(1);box-shadow:0 0 15px rgba(249,115,22,0.2)}50%{transform:scale(1.05);box-shadow:0 0 25px rgba(249,115,22,0.5)}}.illus-extension-popup{position:absolute;top:0.6rem;right:0.6rem;width:145px;background:rgba(30,41,59,0.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:0.6rem 0.8rem;box-shadow:0 10px 25px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.1);animation:popup-float 4s ease-in-out infinite;z-index:5}@keyframes popup-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}.illus-extension-popup .popup-title{display:flex;align-items:center;gap:5px;font-size:0.72rem;font-weight:700;color:var(--text);margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:4px}.illus-extension-popup .popup-title img{width:12px;height:12px}.illus-extension-popup .popup-status{margin-bottom:4px}.status-badge-success{background:rgba(34,197,94,0.12);color:#22c55e;font-size:0.6rem;font-weight:700;padding:2px 6px;border-radius:4px;border:1px solid rgba(34,197,94,0.2);display:inline-flex;align-items:center;gap:3px;animation:status-glow 2s infinite alternate}@keyframes status-glow{0%{box-shadow:0 0 0 rgba(34,197,94,0)}100%{box-shadow:0 0 6px rgba(34,197,94,0.3)}}.illus-extension-popup .popup-quick-start{font-size:0.55rem;color:var(--text-muted);font-weight:500;line-height:1.2}.illus-popup-card{width:220px;background:rgba(30,41,59,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:0.95rem;box-shadow:0 15px 35px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.1);display:flex;flex-direction:column;gap:0.75rem;animation:popup-float 4s ease-in-out infinite;animation-delay:-1s}.illus-popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px}.illus-popup-brand{display:flex;align-items:center;gap:6px;font-size:0.82rem;font-weight:800;letter-spacing:-0.2px}.illus-popup-version{font-size:0.58rem;color:var(--text-muted)}.illus-popup-tabs{display:flex;gap:4px;background:rgba(9,13,22,0.4);padding:3px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}.illus-popup-tab{flex:1;text-align:center;font-size:0.62rem;padding:4px 0;border-radius:6px;color:var(--text-muted);font-weight:600}.illus-popup-tab.active{background:var(--card);color:var(--accent);box-shadow:0 2px 5px rgba(0,0,0,0.2)}.illus-popup-body{display:flex;flex-direction:column;gap:0.75rem;position:relative}.illus-popup-btn{background:linear-gradient(135deg,var(--accent),#8b5cf6);border-radius:8px;padding:9px;color:white;font-weight:700;font-size:0.7rem;text-align:center;box-shadow:0 4px 12px rgba(99,102,241,0.3);position:relative;overflow:hidden;cursor:default;animation:create-btn-pulse 2s infinite alternate}@keyframes create-btn-pulse{0%{transform:scale(1);box-shadow:0 4px 12px rgba(99,102,241,0.3)}100%{transform:scale(1.03);box-shadow:0 6px 16px rgba(99,102,241,0.5)}}.illus-btn-shine{position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transform:skewX(-20deg);animation:shimmer-sweep 3s infinite ease-in-out}@keyframes shimmer-sweep{0%{left:-100%}50%,100%{left:150%}}.illus-collapsed-details{background:rgba(9,13,22,0.4);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:7px 12px;font-size:0.56rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:6px;letter-spacing:0.2px}.details-arrow{font-size:0.48rem;color:var(--text-muted);opacity:0.7}.illus-floating-success{position:absolute;bottom:-1.2rem;left:50%;transform:translateX(-50%);background:rgba(9,13,22,0.9);border:1px solid rgba(34,197,94,0.3);border-radius:20px;padding:3px 10px;display:flex;align-items:center;gap:4px;box-shadow:0 4px 10px rgba(0,0,0,0.4);animation:floating-success-fade 5s infinite;white-space:nowrap;z-index:10}@keyframes floating-success-fade{0%,100%,75%{opacity:0;transform:translate(-50%,5px) scale(0.9)}15%,60%{opacity:1;transform:translate(-50%,0) scale(1)}}.illus-floating-success .success-icon{font-size:0.65rem}.illus-floating-success span[lang]{font-size:0.58rem;color:#22c55e;font-weight:700}.illus-sync-theater{width:95%;display:flex;align-items:center;justify-content:center;position:relative;gap:0.6rem}.illus-player-card{width:145px;background:rgba(15,23,42,0.7);border:1px solid rgba(255,255,255,0.05);border-radius:12px;padding:6px;box-shadow:0 10px 25px rgba(0,0,0,0.4);display:flex;flex-direction:column;gap:4px;position:relative;z-index:2}.illus-player-card.player-a{animation:popup-float 4s ease-in-out infinite;animation-delay:-2s}.illus-player-card.player-b{animation:popup-float 4s ease-in-out infinite;animation-delay:-3s}.player-header{display:flex;justify-content:space-between;align-items:center;font-size:0.55rem}.player-user{font-weight:700;color:var(--text)}.player-badge{font-size:0.42rem;font-weight:800;padding:1px 3px;border-radius:3px}.player-badge.active{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.25)}.player-video-canvas{height:70px;border-radius:8px;background:linear-gradient(135deg,#1e1b4b,#311042);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.02)}.player-video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(139,92,246,0.1) 0%,transparent 80%)}.player-play-pulse{width:24px;height:24px;border-radius:50%;background:rgba(99,102,241,0.85);color:white;font-size:0.65rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(99,102,241,0.5);z-index:3;animation:play-pulse 2s infinite alternate}@keyframes play-pulse{0%{transform:scale(1);box-shadow:0 0 6px rgba(99,102,241,0.4)}100%{transform:scale(1.15);box-shadow:0 0 15px rgba(99,102,241,0.8)}}.player-controls{display:flex;align-items:center;gap:4px;padding:2px 2px 0 2px}.control-btn{font-size:0.58rem;color:var(--accent)}.player-timeline{flex-grow:1;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;position:relative}.timeline-fill{position:absolute;top:0;left:0;height:100%;background:var(--accent);border-radius:2px;width:60%;animation:theater-grow 6s infinite linear}.timeline-knob{position:absolute;top:-2px;left:60%;width:7px;height:7px;border-radius:50%;background:white;box-shadow:0 0 4px rgba(0,0,0,0.5);transform:translateX(-50%);animation:theater-knob-grow 6s infinite linear}@keyframes theater-grow{0%{width:0%}100%{width:100%}}@keyframes theater-knob-grow{0%{left:0%}100%{left:100%}}.control-time{font-size:0.5rem;color:var(--text-muted);font-family:monospace}.illus-sync-bridge{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;z-index:1}.illus-sync-bridge .sync-line{width:100%;height:2px;background:rgba(255,255,255,0.06);position:relative;overflow:hidden}.illus-sync-bridge .sync-beam{position:absolute;top:0;left:-100%;width:50px;height:100%;background:linear-gradient(90deg,transparent,var(--accent),var(--success),transparent);animation:sync-flow 2.5s infinite linear}@keyframes sync-flow{0%{left:-100%}100%{left:100%}}.sync-status-badge{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.25);color:#22c55e;font-size:0.5rem;font-weight:800;letter-spacing:0.5px;padding:2px 6px;border-radius:6px;white-space:nowrap;animation:active-pulse-green 2s infinite alternate}@keyframes active-pulse-green{0%{box-shadow:0 0 3px rgba(34,197,94,0.1)}100%{box-shadow:0 0 8px rgba(34,197,94,0.4)}}.terminal-container{max-width:850px;margin:3rem auto 0 auto;background:#0f172a;border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;box-shadow:0 20px 45px rgba(0,0,0,0.5);text-align:left}.terminal-header{background:#1e293b;padding:0.85rem 1.25rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,0.06)}.terminal-dots{display:flex;gap:6px}.terminal-dot{width:10px;height:10px;border-radius:50%}.terminal-dot.red{background:#ef4444}.terminal-dot.yellow{background:#f59e0b}.terminal-dot.green{background:#10b981}.terminal-tabs{display:flex;gap:0.5rem}.terminal-tab-btn{background:none;border:none;color:var(--text-muted);font-weight:600;font-size:0.8rem;padding:0.35rem 0.75rem;border-radius:6px;cursor:pointer;transition:color 0.2s,background-color 0.2s}.terminal-tab-btn:hover{color:var(--text);background:rgba(255,255,255,0.03)}.terminal-tab-btn.active{color:var(--accent);background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2)}.terminal-body{position:relative;padding:1.5rem}.terminal-pane{display:none;margin:0}.terminal-pane.active{display:block}.terminal-pane pre{margin:0;overflow-x:auto}.terminal-pane code{font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:0.85rem;line-height:1.6;color:#e2e8f0}.t-comment{color:#64748b;font-style:italic}.t-key{color:#f472b6}.t-val{color:#38bdf8}.t-str{color:#34d399}.t-num{color:#fbbf24}.terminal-copy-btn{position:absolute;top:1rem;right:1.5rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:var(--text-muted);padding:0.35rem 0.75rem;font-size:0.75rem;font-weight:600;border-radius:6px;cursor:pointer;transition:background-color 0.2s,color 0.2s,opacity 0.2s;display:flex;align-items:center;gap:0.3rem}.terminal-copy-btn:hover{background:rgba(255,255,255,0.08);color:var(--text);border-color:rgba(255,255,255,0.15)}.terminal-copy-btn:active{transform:scale(0.97)}footer{padding:4rem 0;border-top:1px solid var(--glass-border);text-align:center;color:var(--text-muted)}[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1)}[data-reveal].revealed{opacity:1;transform:translateY(0)}.legal-content{max-width:800px;margin:8rem auto 4rem auto;padding:0 2rem}.legal-card{background:var(--card);padding:3rem;border-radius:24px;border:1px solid var(--glass-border)}.legal-card h1{font-size:2.5rem;margin-bottom:2rem;text-align:center}.legal-card h2{font-size:1.25rem;margin-top:1rem;margin-bottom:0.5rem;color:var(--accent)}.legal-card p{color:var(--text-muted);margin-bottom:0.5rem;font-size:0.95rem}.legal-card section{padding:0 !important;margin-bottom:0.75rem}.join-card{max-width:450px;margin:6rem auto;text-align:center}.room-badge{display:inline-block;background:rgba(99,102,241,0.1);color:var(--accent);padding:0.5rem 1rem;border-radius:99px;font-size:0.8rem;font-weight:700;margin-bottom:1rem;border:1px solid rgba(99,102,241,0.2)}@media (max-width:768px){.hero-grid,.step{grid-template-columns:1fr;text-align:center}.hero-text h1{font-size:2.5rem}.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);margin-left:0}.nav-links.open{display:flex}.nav-right{margin-left:auto}.hamburger{display:none !important}nav .container{padding:0 0.5rem}.logo-area{gap:0.25rem;font-size:1.1rem}.logo-area img{height:40px;width:40px;margin:0}.lang-select-container{padding:4px 10px 4px 8px;gap:4px}.lang-select-container .globe-icon{width:14px;height:14px}.lang-dropdown{font-size:0.7rem;padding:0 6px 0 0}.lang-select-container .chevron-icon{width:10px;height:10px}.legal-card{padding:1.5rem}}html.lang-de [lang="en"]{display:none !important}html:not(.lang-de) [lang="de"]{display:none !important}.lang-select-container{position:relative;display:inline-flex;align-items:center;gap:8px;background:rgba(30,41,59,0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:9999px;padding:6px 14px 6px 12px;transition:background-color 0.3s cubic-bezier(0.4,0,0.2,1),border-color 0.3s cubic-bezier(0.4,0,0.2,1),color 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);color:var(--text-muted)}.lang-select-container:hover{background:rgba(30,41,59,0.6);border-color:rgba(99,102,241,0.3);color:var(--text);box-shadow:0 0 15px rgba(99,102,241,0.1)}.lang-select-container .globe-icon{width:16px;height:16px;flex-shrink:0;opacity:0.8;transition:transform 0.5s ease}.lang-select-container:hover .globe-icon{transform:rotate(15deg);opacity:1}.lang-select-container .chevron-icon{width:12px;height:12px;flex-shrink:0;pointer-events:none;opacity:0.6;margin-left:-2px}.lang-select-container:hover .chevron-icon{opacity:1}.lang-dropdown{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;font-family:inherit;font-size:0.8rem;font-weight:600;color:currentColor;cursor:pointer;padding:0 12px 0 0;margin:0;width:auto}.lang-dropdown option{background:#0f172a;color:white;font-family:inherit;font-size:0.9rem}.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}.feature-card:nth-child(1){--card-accent:rgba(99,102,241,0.06)}.feature-card:nth-child(2){--card-accent:rgba(139,92,246,0.06)}.feature-card:nth-child(3){--card-accent:rgba(34,197,94,0.06)}.feature-card:nth-child(4){--card-accent:rgba(56,189,248,0.06)}.feature-card:nth-child(5){--card-accent:rgba(245,158,11,0.06)}.feature-card:nth-child(6){--card-accent:rgba(236,72,153,0.06)}.feature-card{background:linear-gradient(135deg,var(--card-accent,transparent),var(--card))}.compat-section{padding:1rem 0 3.5rem 0;text-align:center;background:rgba(255,255,255,0.01);border-bottom:1px solid var(--glass-border)}.compat-mascot{display:block;margin:0 auto 0.5rem auto;max-width:368px;width:100%;height:auto;transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.compat-mascot:hover{transform:scale(1.05) translateY(-5px) rotate(1deg)}.compat-heading{font-size:1rem;font-weight:600;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:2rem}.compat-row{display:flex;justify-content:center;align-items:center;gap:3rem;flex-wrap:wrap}.compat-logo{display:flex;flex-direction:column;align-items:center;gap:0.5rem;font-size:0.75rem;font-weight:700;color:var(--text-muted);transition:opacity 0.3s;opacity:0.55}.compat-logo:hover{opacity:0.85}.compat-logo img{width:28px;height:28px;display:block}.compat-more{opacity:0.4;cursor:help;flex-direction:row;gap:0.35rem;position:relative}.compat-more:hover{opacity:0.6}.compat-more-icon{font-size:1.1rem;font-weight:700;color:var(--accent);line-height:1}.compat-tooltip{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--card);color:var(--text-muted);padding:0.6rem 0.9rem;border-radius:8px;font-size:0.72rem;font-weight:500;white-space:nowrap;border:1px solid var(--glass-border);box-shadow:0 8px 20px rgba(0,0,0,0.4);z-index:10;line-height:1.4}.compat-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--glass-border)}.compat-more:hover .compat-tooltip{display:block}.join-spinner{width:36px;height:36px;border:3px solid rgba(99,102,241,0.2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 0.75rem}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}[data-reveal]{opacity:1;transform:none}.blob{animation:none}.illus-typing-text::after{animation:none}.illus-timeline-progress{animation:none;width:60%}.illus-sync-pulse{animation:none}.illus-extension-icon{animation:none}}.use-cases-section{padding:6rem 0;position:relative;border-bottom:1px solid var(--glass-border)}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:1rem}.use-case-card{background:rgba(30,41,59,0.4);border:1px solid var(--glass-border);border-radius:16px;padding:1.2rem 1.6rem 1.7rem 1.6rem;text-align:left;transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),box-shadow 0.3s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:0.8rem;position:relative;overflow:hidden}.use-case-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--card-accent-border,var(--accent)),transparent);opacity:0;transition:opacity 0.3s ease}.use-case-card:nth-child(1){--card-accent-border:#f59e0b}.use-case-card:nth-child(2){--card-accent-border:#38bdf8}.use-case-card:nth-child(3){--card-accent-border:#ec4899}.use-case-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.35);border-color:rgba(255,255,255,0.15)}.use-case-card:hover::before{opacity:1}.use-case-image{display:block;width:100%;max-width:272px;height:150px;object-fit:contain;border-radius:8px;margin:0 auto 0 auto}.cta-github-mascot{display:block;width:100%;max-width:250px;height:auto;margin:1.5rem auto}.features-questions-mascot{display:block;width:100%;max-width:250px;height:auto;margin:-1.5rem auto 0.2rem auto;transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.features-questions-mascot:hover{transform:scale(1.05) translateY(-4px) rotate(-1.5deg)}.comparison-mascot{display:block;width:100%;max-width:260px;height:auto;margin:-2.2rem auto 0.2rem auto;transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.comparison-mascot:hover{transform:scale(1.05) translateY(-4px) rotate(1deg)}.use-case-icon{font-size:1.6rem;margin-right:0.6rem;display:inline-block;vertical-align:middle;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.2))}.use-case-card h3{font-size:1.25rem;font-weight:700;margin:0;color:white}.use-case-card p{font-size:0.9rem;line-height:1.6;color:var(--text-muted);margin:0}.comparison-section{padding:6rem 0;background:rgba(255,255,255,0.01);border-bottom:1px solid var(--glass-border)}.comparison-table-wrapper{overflow-x:auto;background:rgba(30,41,59,0.35);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-top:1rem}.comparison-table{width:100%;border-collapse:collapse;text-align:left;font-size:0.95rem}.comparison-table th,.comparison-table td{padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,0.06)}.comparison-table th{background:rgba(15,23,42,0.6);font-weight:700;color:white;text-transform:uppercase;font-size:0.8rem;letter-spacing:0.08em}.comparison-table th.highlight,.comparison-table td.highlight{background:rgba(99,102,241,0.08)}.comparison-table tbody tr:hover{background:rgba(255,255,255,0.02)}.comparison-table tbody tr:last-child td{border-bottom:none}.feat-name{display:flex;flex-direction:column;gap:0.25rem}.feat-name strong{color:white;font-weight:600}.feat-desc{font-size:0.8rem;color:var(--text-muted)}.check{color:#22c55e;font-weight:700}.cross{color:#ef4444;font-weight:500;opacity:0.8}@media (max-width:768px){.comparison-table th,.comparison-table td{padding:1rem;font-size:0.85rem}.feat-desc{display:none}}.source-link{color:var(--accent);text-decoration:none;font-size:0.72rem;font-weight:700;margin-left:0.25rem;display:inline-flex;align-items:center;vertical-align:super;opacity:0.6;transition:opacity 0.2s ease,color 0.2s ease,transform 0.2s ease}.source-link:hover{opacity:1;color:#38bdf8;transform:translateY(-1px)}.table-footnotes{padding:0.8rem 1.25rem;background:rgba(15,23,42,0.45);border-top:1px solid rgba(255,255,255,0.05);font-size:0.72rem;color:var(--text-muted);line-height:1.5;opacity:0.65;transition:opacity 0.2s ease}.table-footnotes:hover{opacity:0.95}.table-footnotes p{margin:0;display:flex;align-items:baseline;gap:0.4rem}.table-footnotes p:not(:last-child){margin-bottom:0.4rem}.table-footnotes a{color:var(--accent);text-decoration:none;font-weight:500;transition:color 0.2s ease,text-decoration 0.2s ease}.table-footnotes a:hover{color:#38bdf8;text-decoration:underline}.table-footnotes sup{font-weight:700;color:var(--accent)}@media (max-width:768px){.table-footnotes{padding:0.75rem 1rem;font-size:0.68rem}}.join-status-visual{margin-bottom:2rem;position:relative;height:200px;display:flex;align-items:center;justify-content:center}.join-status-mascot{display:block;width:140px;height:auto;z-index:2;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15))}.join-status-mascot.searching-mascot{width:175px}.join-status-pulse{animation:mascot-gentle-pulse 2s ease-in-out infinite}@keyframes mascot-gentle-pulse{0%{transform:scale(0.96);filter:drop-shadow(0 4px 10px rgba(99,102,241,0.15))}50%{transform:scale(1.04);filter:drop-shadow(0 8px 20px rgba(99,102,241,0.35))}100%{transform:scale(0.96);filter:drop-shadow(0 4px 10px rgba(99,102,241,0.15))}}.legal-mascot{display:block;width:180px;height:auto;margin:-0.75rem auto 0.4rem auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.legal-mascot:hover{transform:scale(1.06) translateY(-4px) rotate(1.5deg)}.selfhost-mascot{display:block;width:300px;height:auto;margin:0 auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.selfhost-mascot:hover{transform:scale(1.05) translateY(-4px) rotate(-1deg)}.status-ring{position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(99,102,241,0.05);border:2px dashed rgba(99,102,241,0.25);z-index:1}.status-ring.active-pulse{animation:radar-pulse 3s cubic-bezier(0.25,0.8,0.25,1) infinite}@keyframes radar-pulse{0%{transform:scale(0.85);opacity:0.9;border-color:rgba(99,102,241,0.3);box-shadow:0 0 0 0px rgba(99,102,241,0.15)}50%{transform:scale(1.18);opacity:0.35;border-color:rgba(56,189,248,0.2);box-shadow:0 0 0 15px rgba(56,189,248,0)}100%{transform:scale(0.85);opacity:0.9;border-color:rgba(99,102,241,0.3);box-shadow:0 0 0 0px rgba(99,102,241,0.15)}}.join-card-actions{display:flex;flex-direction:column;gap:0.75rem;width:100%}.join-card-actions .btn{width:100%;justify-content:center;padding:1.1rem;font-size:0.88rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}.join-card-actions .btn svg{margin-right:0.3rem;flex-shrink:0}.join-card-actions .btn img{margin-right:0.3rem;flex-shrink:0}.btn-success{background:#22c55e;color:white !important;box-shadow:0 10px 15px -3px rgba(34,197,94,0.3)}.btn-success:hover{background:#16a34a;transform:translateY(-2px);box-shadow:0 20px 25px -5px rgba(34,197,94,0.4)}.faq-grid{display:flex;flex-direction:column;gap:1rem;max-width:800px;margin:0 auto}.faq-item{background:rgba(30,41,59,0.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:1.5rem 2rem;cursor:pointer;transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease}.faq-item:hover{border-color:rgba(99,102,241,0.3);box-shadow:0 8px 20px rgba(99,102,241,0.1)}.faq-item[open]{border-color:rgba(99,102,241,0.4);background:rgba(30,41,59,0.65)}.faq-item summary{font-weight:700;font-size:1.05rem;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:'+';font-size:1.4rem;color:var(--accent);font-weight:300;transition:transform 0.3s ease;flex-shrink:0}.faq-item[open] summary::after{content:'−';transform:rotate(180deg)}.faq-item p{color:var(--text-muted);font-size:0.95rem;line-height:1.6;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.06)}.feature-card:focus-visible,.use-case-card:focus-visible,.compat-logo:focus-visible{outline:2px solid var(--accent);outline-offset:4px;transform:translateY(-5px)}.feature-card,.use-case-card,.compat-logo{scroll-margin-top:100px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:white;padding:0.75rem 1.25rem;border-radius:0 0 8px 0;font-weight:700;z-index:9999;text-decoration:none}.skip-link:focus{left:0}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}.blob{animation:none}.join-status-pulse{animation:none}.status-ring.active-pulse{animation:none}}.blob,.join-status-pulse,.status-ring.active-pulse,.hero-mockup-wrapper,.cta-group .btn{will-change:transform,opacity}@media (prefers-reduced-motion:reduce){.blob,.join-status-pulse,.status-ring.active-pulse,.hero-mockup-wrapper,.cta-group .btn{will-change:auto}} \ No newline at end of file +:root{--bg:#0f172a;--card:#1e293b;--accent:#6366f1;--accent-glow:rgba(99,102,241,0.3);--text:#f8fafc;--text-muted:#cbd5e1;--success:#22c55e;--glass:rgba(30,41,59,0.4);--glass-border:rgba(255,255,255,0.05)}.invite-banner{background:var(--accent);color:white;padding:0.75rem 0;text-align:center;font-weight:600;font-size:0.9rem;position:relative;z-index:2000;box-shadow:0 4px 12px rgba(0,0,0,0.3)}.btn-banner{background:white;color:var(--accent);padding:4px 12px;border-radius:6px;text-decoration:none;font-size:0.8rem;font-weight:700;margin-left:12px;cursor:pointer;border:none;transition:transform 0.2s}.btn-banner:hover{transform:scale(1.05)}*{margin:0;padding:0;box-sizing:border-box}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";background-color:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;position:relative}.bg-blobs{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;background:radial-gradient(circle at 50% 50%,#1e1b4b 0%,#0f172a 100%)}.blob{position:absolute;width:600px;height:600px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);filter:blur(80px);border-radius:50%;opacity:0.5;animation:move 25s infinite alternate ease-in-out}.blob-1{top:-100px;left:-100px;animation-delay:0s}.blob-2{bottom:-100px;right:-100px;animation-delay:-5s;background:radial-gradient(circle,rgba(139,92,246,0.2) 0%,transparent 70%)}.blob-3{top:40%;left:30%;animation-duration:35s;animation-delay:-10s}@keyframes move{0%{transform:translate(0,0) scale(1)}33%{transform:translate(100px,100px) scale(1.2)}66%{transform:translate(-50px,200px) scale(0.8)}100%{transform:translate(0,0) scale(1)}}.container{max-width:1100px;margin:0 auto;padding:0 2rem}section{padding:6rem 0}.use-cases-section,#features,#self-hosting,.comparison-section{content-visibility:auto;contain-intrinsic-size:auto 1400px}nav{position:fixed;top:0;width:100%;z-index:1000;background:var(--glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);padding:1rem 0}.nav-content{display:flex;align-items:center}.logo-area{display:flex;align-items:center;gap:0.75rem;font-weight:800;font-size:1.5rem;letter-spacing:-0.5px}.logo-area picture{display:contents}.logo-area img{height:64px;width:64px;object-fit:contain;border-radius:8px;margin:-4px 0}.nav-ext-status{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);color:#10b981;border-radius:12px;font-size:0.55rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;box-shadow:0 0 10px rgba(16,185,129,0.1);animation:fade-in 0.4s ease-out;margin-left:0.2rem}@keyframes fade-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.nav-links{display:flex;gap:2rem;margin-left:auto}.nav-links a{color:var(--text-muted);text-decoration:none;font-weight:500;transition:color 0.3s}.nav-links a:hover{color:var(--accent)}.nav-right{display:flex;align-items:center;gap:0.5rem;margin-left:2rem;flex-shrink:0}.hero{min-height:100vh;display:flex;align-items:center;padding-top:8rem;padding-bottom:4rem}.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:4rem;text-align:left;width:100%}.hero-text h1{font-size:4.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;background:linear-gradient(to bottom,#fff 40%,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-text p,.hero-subtitle{font-size:1.25rem;color:var(--text-muted);margin-bottom:2.5rem;max-width:600px;font-weight:400;line-height:1.6}.hero-mascot-container{display:block;margin-bottom:-0.5rem;margin-left:2.2rem}.hero-lookdown-mascot{display:block;width:90px;height:auto}@media (max-width:768px){.hero-mascot-container{margin-left:0;display:flex;justify-content:center}}.cta-group{display:flex;gap:1rem;flex-wrap:wrap}.btn{padding:0.85rem 1.75rem;border-radius:12px;font-weight:600;text-decoration:none;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),background-color 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1),color 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s cubic-bezier(0.4,0,0.2,1),border-color 0.3s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;gap:0.5rem;font-size:0.95rem}.btn-primary{background:#5b5de8;color:white;box-shadow:0 10px 15px -3px var(--accent-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px var(--accent-glow)}.btn-firefox{background:#e66000;color:white;box-shadow:0 10px 15px -3px rgba(230,96,0,0.3)}.btn-firefox:hover{background:#ff7300;transform:translateY(-2px);box-shadow:0 20px 25px -5px rgba(230,96,0,0.4)}.btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--glass-border)}.btn-secondary:hover{background:#2d3748;transform:translateY(-2px)}.version-badge{display:inline-block;background:rgba(99,102,241,0.1);color:var(--accent);padding:0.4rem 1rem;border-radius:99px;font-size:0.8rem;font-weight:700;margin-bottom:1.5rem;border:1px solid rgba(99,102,241,0.3);letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,background 0.2s}.version-badge:hover{background:rgba(99,102,241,0.2);box-shadow:0 0 16px rgba(99,102,241,0.3);transform:translateY(-1px)}.hero-mockup-wrapper{display:flex;justify-content:center;align-items:center;width:100%}.extension-mockup{width:320px;height:520px;background:#0f172a;border-radius:20px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 40px rgba(0,0,0,0.4),0 0 20px rgba(99,102,241,0.15);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden;position:relative;user-select:none;padding:16px;padding-bottom:0;box-sizing:border-box}.mock-header-row{display:flex;align-items:center;margin-bottom:16px;flex-shrink:0}.mock-header-title{font-size:18px;margin:0;color:var(--accent);letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;font-weight:800}.mock-header-title picture{display:contents}.mock-header-title img{width:28px;height:28px;object-fit:contain;border-radius:6px}.mock-version-link{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-muted);text-decoration:none;opacity:0.5;transition:opacity 0.2s,color 0.2s;cursor:pointer}.mock-version-link:hover{opacity:1;color:var(--accent)}.mock-tabs{display:flex;gap:4px;background:#1e293b;padding:4px;border-radius:12px;margin-bottom:20px;flex-shrink:0}.mock-tab{flex:1;background:none;border:none;color:var(--text-muted);font-size:0.75rem;font-weight:600;padding:8px 4px;cursor:pointer;border-radius:8px;transition:color 0.2s,background-color 0.2s;text-align:center}.mock-tab:hover{color:var(--text)}.mock-tab.active{background:var(--accent);color:white}.mock-body{flex:1;overflow-y:auto;padding:0;padding-bottom:16px;display:flex;flex-direction:column;font-size:0.8rem;scrollbar-width:none}.mock-body::-webkit-scrollbar{display:none}.mock-screen{display:none;flex-direction:column;gap:12px}.mock-screen.active{display:flex}.mock-card{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:12px}.mock-label{font-size:0.65rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.4rem}.mock-section-label{display:block;font-size:11px;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;font-weight:700}.mock-input{background:#1e293b;border:1px solid #334155;border-radius:8px;color:white;padding:8px 10px;font-size:0.75rem;width:100%;outline:none}.mock-btn{background:var(--accent);color:white;border:none;border-radius:6px;padding:0.5rem;font-weight:600;font-size:0.75rem;cursor:pointer;transition:background 0.2s;text-align:center}.mock-btn:hover{background:#4f46e5}.mock-joined-room{display:flex;justify-content:space-between;align-items:center;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:8px;padding:0.6rem 0.75rem}.mock-room-name{font-weight:700;color:var(--accent);font-size:0.85rem}.mock-server-badge{background:rgba(99,102,241,0.2);color:var(--accent);font-size:0.6rem;font-weight:700;padding:2px 6px;border-radius:4px}.mock-invite-box{display:flex;gap:0.4rem}.mock-invite-box input{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-peer-list{display:flex;flex-direction:column;gap:0.5rem}.mock-peer-item{display:flex;flex-direction:column;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);border-radius:8px;padding:0.5rem 0.6rem}.mock-peer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem}.mock-peer-name{font-weight:700;color:var(--text)}.mock-peer-meta{font-size:0.65rem;color:var(--text-muted)}.mock-peer-tab{font-size:0.7rem;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mock-peer-status{font-size:0.65rem;color:var(--text-muted);display:flex;align-items:center;gap:0.25rem}.mock-target-box{display:flex;align-items:center;gap:0.4rem;background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.2);color:#facc15;padding:0.5rem 0.6rem;border-radius:8px;font-weight:600;font-size:0.7rem}.mock-ctrl-buttons{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.mock-btn-play{background:#22c55e}.mock-btn-play:hover{background:#16a34a}.mock-btn-pause{background:#ef4444}.mock-btn-pause:hover{background:#dc2626}.mock-btn-force{background:var(--accent);grid-column:span 2}.mock-status-display{display:flex;align-items:center;justify-content:space-between}.mock-status-pill{display:inline-flex;align-items:center;gap:0.3rem;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);color:#22c55e;padding:2px 8px;border-radius:99px;font-size:0.65rem;font-weight:700}.mock-log-item{font-size:0.7rem;color:var(--text-muted);border-left:2px solid var(--accent);padding-left:0.4rem;margin-top:0.4rem}.mock-settings-row{display:flex;align-items:flex-start;gap:0.5rem;margin-bottom:0.6rem}.mock-settings-row input[type="checkbox"]{margin-top:0.2rem;cursor:pointer}.mock-settings-row label{cursor:pointer;font-weight:600}.mock-settings-row p{font-size:0.65rem;color:var(--text-muted);margin-top:0.1rem}.mock-toggle-switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}.mock-toggle-switch input{opacity:0;width:0;height:0}.mock-slider{position:absolute;cursor:default;top:0;left:0;right:0;bottom:0;background-color:#334155;transition:.3s;border-radius:20px}.mock-slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#94a3b8;transition:.3s;border-radius:50%}input:checked + .mock-slider{background-color:var(--accent)}input:checked + .mock-slider:before{transform:translateX(16px);background-color:white}.mock-diagnostic-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem}.mock-diag-box{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:6px;padding:0.4rem}.mock-diag-box .diag-val{font-family:monospace;font-weight:700;color:var(--accent);font-size:0.75rem}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:4rem}.feature-card{background:rgba(30,41,59,0.45);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);padding:2.5rem;border-radius:24px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 32px 0 rgba(0,0,0,0.3);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1),border-color 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:24px;padding:1px;background:linear-gradient(to bottom right,rgba(255,255,255,0.12),transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.feature-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(99,102,241,0.2);border-color:rgba(99,102,241,0.3)}.feature-card:hover::before{background:linear-gradient(to bottom right,rgba(99,102,241,0.3),transparent)}.feature-icon-svg{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(99,102,241,0.12);color:var(--accent);border-radius:12px;margin-right:14px;transition:background 0.3s ease,color 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease}.feature-card:hover .feature-icon-svg{background:var(--accent);color:white;box-shadow:0 0 15px var(--accent-glow);transform:scale(1.05)}.bento-icon{width:22px;height:22px;display:block;flex-shrink:0}.feature-card h3{margin-bottom:1rem;font-size:1.25rem;font-weight:700;display:flex;align-items:center}.feature-card p{color:var(--text-muted);font-size:0.95rem;line-height:1.6}.feature-card.bento-large{grid-column:span 2;background:linear-gradient(135deg,rgba(30,41,59,0.45) 0%,rgba(99,102,241,0.08) 100%);padding:3rem 3.5rem;display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:center}.feature-card.bento-large h3{flex-direction:column;align-items:center;text-align:center;gap:1rem;margin-bottom:0;font-size:1.25rem}.feature-card.bento-large .feature-icon,.feature-card.bento-large .feature-icon-svg{width:52px;height:52px;border-radius:14px;margin-right:0;flex-shrink:0}.feature-card.bento-large .bento-icon{width:24px;height:24px}.feature-card.bento-large p{font-size:1rem;line-height:1.7;margin:0}.feature-card.bento-large::after{content:'';position:absolute;top:0;left:2.5rem;right:2.5rem;height:2px;background:linear-gradient(90deg,transparent,rgba(99,102,241,0.4),transparent);opacity:0;transition:opacity 0.3s ease}.feature-card.bento-large:hover::after{opacity:1}@media (max-width:900px){.features-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}.feature-card.bento-large{grid-column:span 2;padding:2.5rem;gap:2rem}.feature-card.bento-large h3{font-size:1.15rem}}@media (max-width:600px){.features-grid{grid-template-columns:1fr;gap:1rem}.feature-card.bento-large{grid-column:span 1;display:flex;flex-direction:column;padding:1.75rem;gap:1rem}.feature-card.bento-large h3{flex-direction:row;align-items:center;text-align:left;gap:0.75rem;margin-bottom:0;font-size:1.15rem}.feature-card.bento-large .feature-icon,.feature-card.bento-large .feature-icon-svg{width:40px;height:40px;border-radius:10px;margin-right:0}.feature-card.bento-large .bento-icon{width:18px;height:18px}.feature-card.bento-large p{font-size:0.9rem;line-height:1.6}.feature-card.bento-large::after{display:none}.feature-card{padding:1.75rem}.feature-card h3{font-size:1.1rem}.feature-icon-svg{width:40px;height:40px;border-radius:10px;margin-right:12px}.bento-icon{width:18px;height:18px}}.steps{display:flex;flex-direction:column;gap:6rem}.step{display:grid;grid-template-columns:1fr 1.1fr;gap:6rem;align-items:center}.step:nth-child(even) .step-text{order:2}.step-num{font-size:4rem;font-weight:800;color:rgba(99,102,241,0.15);line-height:1;margin-bottom:0.5rem}.step-text h3{font-size:1.85rem;margin-bottom:1rem;font-weight:800}.step-text p{color:var(--text-muted);font-size:1.05rem;line-height:1.6}.step-illustration-1,.step-illustration-2,.step-illustration-3{background:radial-gradient(circle at top left,#1e293b,#0f172a);height:280px;border-radius:24px;border:1px solid var(--glass-border);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 40px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),border-color 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s cubic-bezier(0.16,1,0.3,1)}.step-illustration-1:hover,.step-illustration-2:hover,.step-illustration-3:hover{transform:translateY(-6px) scale(1.02);border-color:rgba(99,102,241,0.25);box-shadow:0 25px 50px rgba(99,102,241,0.15),inset 0 1px 0 rgba(255,255,255,0.1)}.illus-browser-container{width:90%;height:80%;background:#090d16;border:1px solid rgba(255,255,255,0.05);border-radius:12px;overflow:hidden;box-shadow:0 15px 30px rgba(0,0,0,0.5);display:flex;flex-direction:column}.illus-browser-header{background:#131924;padding:0.6rem 0.8rem;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,0.05)}.illus-browser-dots{display:flex;gap:6px;margin-right:1.5rem}.illus-browser-dot{width:8px;height:8px;border-radius:50%;opacity:0.6}.illus-browser-dot:nth-child(1){background:#ef4444}.illus-browser-dot:nth-child(2){background:#fbbf24}.illus-browser-dot:nth-child(3){background:#22c55e}.illus-browser-address-bar{background:#090d16;border:1px solid rgba(255,255,255,0.08);border-radius:6px;color:var(--text-muted);font-size:0.68rem;padding:3px 12px;flex-grow:1;max-width:60%;text-align:center;font-family:monospace;letter-spacing:0.2px}.illus-browser-address-bar .url-protocol{color:#22c55e;font-weight:600}.illus-browser-toolbar{display:flex;margin-left:auto}.illus-extension-btn{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:opacity 0.3s,box-shadow 0.3s}.illus-extension-btn.active{background:rgba(99,102,241,0.2);border:1px solid var(--accent);box-shadow:0 0 10px rgba(99,102,241,0.4);animation:active-pulse 2s infinite alternate}@keyframes active-pulse{0%{transform:scale(1);box-shadow:0 0 5px rgba(99,102,241,0.4)}100%{transform:scale(1.08);box-shadow:0 0 12px rgba(99,102,241,0.7)}}.illus-browser-content{flex-grow:1;padding:1rem;position:relative;display:flex;align-items:flex-start}.illus-store-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:0.8rem;width:65%;display:flex;flex-direction:column;gap:10px}.illus-store-card-header{display:flex;align-items:center;gap:8px}.illus-large-logo{width:30px;height:30px;object-fit:contain;border-radius:6px;box-shadow:0 0 10px rgba(99,102,241,0.2)}.illus-store-info{display:flex;flex-direction:column}.illus-store-title{font-size:0.88rem;font-weight:800;color:var(--text);line-height:1.1}.illus-store-desc{font-size:0.58rem;color:var(--text-muted);line-height:1.2;margin-top:2px}.illus-store-buttons{display:flex;flex-direction:column;gap:6px}.illus-store-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;font-size:0.58rem;font-weight:700;color:white;border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.03);box-shadow:0 2px 5px rgba(0,0,0,0.2);cursor:default;transition:opacity 0.2s,transform 0.2s}.illus-store-btn img{width:11px;height:11px;display:block}.illus-store-btn.chrome{border-color:rgba(99,102,241,0.25);background:rgba(99,102,241,0.08);box-shadow:0 0 10px rgba(99,102,241,0.05)}.illus-store-btn.firefox{border-color:rgba(249,115,22,0.25);background:rgba(249,115,22,0.08);box-shadow:0 0 10px rgba(249,115,22,0.05)}.install-breathe{animation:install-breathe 2.5s ease-in-out infinite;z-index:2;position:relative}@keyframes install-breathe{0%,100%{transform:scale(1);box-shadow:0 0 15px rgba(99,102,241,0.2)}50%{transform:scale(1.05);box-shadow:0 0 25px rgba(99,102,241,0.5)}}.install-breathe.firefox,.btn-firefox.install-breathe{animation-name:install-breathe-ff}@keyframes install-breathe-ff{0%,100%{transform:scale(1);box-shadow:0 0 15px rgba(249,115,22,0.2)}50%{transform:scale(1.05);box-shadow:0 0 25px rgba(249,115,22,0.5)}}.illus-extension-popup{position:absolute;top:0.6rem;right:0.6rem;width:145px;background:rgba(30,41,59,0.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:0.6rem 0.8rem;box-shadow:0 10px 25px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.1);animation:popup-float 4s ease-in-out infinite;z-index:5}@keyframes popup-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}.illus-extension-popup .popup-title{display:flex;align-items:center;gap:5px;font-size:0.72rem;font-weight:700;color:var(--text);margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:4px}.illus-extension-popup .popup-title img{width:12px;height:12px}.illus-extension-popup .popup-status{margin-bottom:4px}.status-badge-success{background:rgba(34,197,94,0.12);color:#22c55e;font-size:0.6rem;font-weight:700;padding:2px 6px;border-radius:4px;border:1px solid rgba(34,197,94,0.2);display:inline-flex;align-items:center;gap:3px;animation:status-glow 2s infinite alternate}@keyframes status-glow{0%{box-shadow:0 0 0 rgba(34,197,94,0)}100%{box-shadow:0 0 6px rgba(34,197,94,0.3)}}.illus-extension-popup .popup-quick-start{font-size:0.55rem;color:var(--text-muted);font-weight:500;line-height:1.2}.illus-popup-card{width:220px;background:rgba(30,41,59,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:0.95rem;box-shadow:0 15px 35px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.1);display:flex;flex-direction:column;gap:0.75rem;animation:popup-float 4s ease-in-out infinite;animation-delay:-1s}.illus-popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px}.illus-popup-brand{display:flex;align-items:center;gap:6px;font-size:0.82rem;font-weight:800;letter-spacing:-0.2px}.illus-popup-version{font-size:0.58rem;color:var(--text-muted)}.illus-popup-tabs{display:flex;gap:4px;background:rgba(9,13,22,0.4);padding:3px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}.illus-popup-tab{flex:1;text-align:center;font-size:0.62rem;padding:4px 0;border-radius:6px;color:var(--text-muted);font-weight:600}.illus-popup-tab.active{background:var(--card);color:var(--accent);box-shadow:0 2px 5px rgba(0,0,0,0.2)}.illus-popup-body{display:flex;flex-direction:column;gap:0.75rem;position:relative}.illus-popup-btn{background:linear-gradient(135deg,var(--accent),#8b5cf6);border-radius:8px;padding:9px;color:white;font-weight:700;font-size:0.7rem;text-align:center;box-shadow:0 4px 12px rgba(99,102,241,0.3);position:relative;overflow:hidden;cursor:default;animation:create-btn-pulse 2s infinite alternate}@keyframes create-btn-pulse{0%{transform:scale(1);box-shadow:0 4px 12px rgba(99,102,241,0.3)}100%{transform:scale(1.03);box-shadow:0 6px 16px rgba(99,102,241,0.5)}}.illus-btn-shine{position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transform:skewX(-20deg);animation:shimmer-sweep 3s infinite ease-in-out}@keyframes shimmer-sweep{0%{left:-100%}50%,100%{left:150%}}.illus-collapsed-details{background:rgba(9,13,22,0.4);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:7px 12px;font-size:0.56rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:6px;letter-spacing:0.2px}.details-arrow{font-size:0.48rem;color:var(--text-muted);opacity:0.7}.illus-floating-success{position:absolute;bottom:-1.2rem;left:50%;transform:translateX(-50%);background:rgba(9,13,22,0.9);border:1px solid rgba(34,197,94,0.3);border-radius:20px;padding:3px 10px;display:flex;align-items:center;gap:4px;box-shadow:0 4px 10px rgba(0,0,0,0.4);animation:floating-success-fade 5s infinite;white-space:nowrap;z-index:10}@keyframes floating-success-fade{0%,100%,75%{opacity:0;transform:translate(-50%,5px) scale(0.9)}15%,60%{opacity:1;transform:translate(-50%,0) scale(1)}}.illus-floating-success .success-icon{font-size:0.65rem}.illus-floating-success span[lang]{font-size:0.58rem;color:#22c55e;font-weight:700}.illus-sync-theater{width:95%;display:flex;align-items:center;justify-content:center;position:relative;gap:0.6rem}.illus-player-card{width:145px;background:rgba(15,23,42,0.7);border:1px solid rgba(255,255,255,0.05);border-radius:12px;padding:6px;box-shadow:0 10px 25px rgba(0,0,0,0.4);display:flex;flex-direction:column;gap:4px;position:relative;z-index:2}.illus-player-card.player-a{animation:popup-float 4s ease-in-out infinite;animation-delay:-2s}.illus-player-card.player-b{animation:popup-float 4s ease-in-out infinite;animation-delay:-3s}.player-header{display:flex;justify-content:space-between;align-items:center;font-size:0.55rem}.player-user{font-weight:700;color:var(--text)}.player-badge{font-size:0.42rem;font-weight:800;padding:1px 3px;border-radius:3px}.player-badge.active{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.25)}.player-video-canvas{height:70px;border-radius:8px;background:linear-gradient(135deg,#1e1b4b,#311042);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.02)}.player-video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(139,92,246,0.1) 0%,transparent 80%)}.player-play-pulse{width:24px;height:24px;border-radius:50%;background:rgba(99,102,241,0.85);color:white;font-size:0.65rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(99,102,241,0.5);z-index:3;animation:play-pulse 2s infinite alternate}@keyframes play-pulse{0%{transform:scale(1);box-shadow:0 0 6px rgba(99,102,241,0.4)}100%{transform:scale(1.15);box-shadow:0 0 15px rgba(99,102,241,0.8)}}.player-controls{display:flex;align-items:center;gap:4px;padding:2px 2px 0 2px}.control-btn{font-size:0.58rem;color:var(--accent)}.player-timeline{flex-grow:1;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;position:relative}.timeline-fill{position:absolute;top:0;left:0;height:100%;background:var(--accent);border-radius:2px;width:60%;animation:theater-grow 6s infinite linear}.timeline-knob{position:absolute;top:-2px;left:60%;width:7px;height:7px;border-radius:50%;background:white;box-shadow:0 0 4px rgba(0,0,0,0.5);transform:translateX(-50%);animation:theater-knob-grow 6s infinite linear}@keyframes theater-grow{0%{width:0%}100%{width:100%}}@keyframes theater-knob-grow{0%{left:0%}100%{left:100%}}.control-time{font-size:0.5rem;color:var(--text-muted);font-family:monospace}.illus-sync-bridge{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;z-index:1}.illus-sync-bridge .sync-line{width:100%;height:2px;background:rgba(255,255,255,0.06);position:relative;overflow:hidden}.illus-sync-bridge .sync-beam{position:absolute;top:0;left:-100%;width:50px;height:100%;background:linear-gradient(90deg,transparent,var(--accent),var(--success),transparent);animation:sync-flow 2.5s infinite linear}@keyframes sync-flow{0%{left:-100%}100%{left:100%}}.sync-status-badge{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.25);color:#22c55e;font-size:0.5rem;font-weight:800;letter-spacing:0.5px;padding:2px 6px;border-radius:6px;white-space:nowrap;animation:active-pulse-green 2s infinite alternate}@keyframes active-pulse-green{0%{box-shadow:0 0 3px rgba(34,197,94,0.1)}100%{box-shadow:0 0 8px rgba(34,197,94,0.4)}}.terminal-container{max-width:850px;margin:3rem auto 0 auto;background:#0f172a;border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;box-shadow:0 20px 45px rgba(0,0,0,0.5);text-align:left}.terminal-header{background:#1e293b;padding:0.85rem 1.25rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,0.06)}.terminal-dots{display:flex;gap:6px}.terminal-dot{width:10px;height:10px;border-radius:50%}.terminal-dot.red{background:#ef4444}.terminal-dot.yellow{background:#f59e0b}.terminal-dot.green{background:#10b981}.terminal-tabs{display:flex;gap:0.5rem}.terminal-tab-btn{background:none;border:none;color:var(--text-muted);font-weight:600;font-size:0.8rem;padding:0.35rem 0.75rem;border-radius:6px;cursor:pointer;transition:color 0.2s,background-color 0.2s}.terminal-tab-btn:hover{color:var(--text);background:rgba(255,255,255,0.03)}.terminal-tab-btn.active{color:var(--accent);background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2)}.terminal-body{position:relative;padding:1.5rem}.terminal-pane{display:none;margin:0}.terminal-pane.active{display:block}.terminal-pane pre{margin:0;overflow-x:auto}.terminal-pane code{font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:0.85rem;line-height:1.6;color:#e2e8f0}.t-comment{color:#64748b;font-style:italic}.t-key{color:#f472b6}.t-val{color:#38bdf8}.t-str{color:#34d399}.t-num{color:#fbbf24}.terminal-copy-btn{position:absolute;top:1rem;right:1.5rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:var(--text-muted);padding:0.35rem 0.75rem;font-size:0.75rem;font-weight:600;border-radius:6px;cursor:pointer;transition:background-color 0.2s,color 0.2s,opacity 0.2s;display:flex;align-items:center;gap:0.3rem}.terminal-copy-btn:hover{background:rgba(255,255,255,0.08);color:var(--text);border-color:rgba(255,255,255,0.15)}.terminal-copy-btn:active{transform:scale(0.97)}footer{padding:4rem 0;border-top:1px solid var(--glass-border);text-align:center;color:var(--text-muted)}[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1)}[data-reveal].revealed{opacity:1;transform:translateY(0)}.legal-content{max-width:800px;margin:8rem auto 4rem auto;padding:0 2rem}.legal-card{background:var(--card);padding:3rem;border-radius:24px;border:1px solid var(--glass-border)}.legal-card h1{font-size:2.5rem;margin-bottom:2rem;text-align:center}.legal-card h2{font-size:1.25rem;margin-top:1rem;margin-bottom:0.5rem;color:var(--accent)}.legal-card p{color:var(--text-muted);margin-bottom:0.5rem;font-size:0.95rem}.legal-card section{padding:0 !important;margin-bottom:0.75rem}.join-card{max-width:450px;margin:6rem auto;text-align:center}.room-badge{display:inline-block;background:rgba(99,102,241,0.1);color:var(--accent);padding:0.5rem 1rem;border-radius:99px;font-size:0.8rem;font-weight:700;margin-bottom:1rem;border:1px solid rgba(99,102,241,0.2)}@media (max-width:768px){.hero-grid,.step{grid-template-columns:1fr;text-align:center}.hero-text h1{font-size:2.5rem}.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);margin-left:0}.nav-links.open{display:flex}.nav-right{margin-left:auto}.hamburger{display:none !important}nav .container{padding:0 0.5rem}.logo-area{gap:0.25rem;font-size:1.1rem}.logo-area img{height:40px;width:40px;margin:0}.lang-select-container{padding:4px 10px 4px 8px;gap:4px}.lang-select-container .globe-icon{width:14px;height:14px}.lang-dropdown{font-size:0.7rem;padding:0 6px 0 0}.lang-select-container .chevron-icon{width:10px;height:10px}.legal-card{padding:1.5rem}}html.lang-de [lang="en"]{display:none !important}html:not(.lang-de) [lang="de"]{display:none !important}.lang-select-container{position:relative;display:inline-flex;align-items:center;gap:8px;background:rgba(30,41,59,0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:9999px;padding:6px 14px 6px 12px;transition:background-color 0.3s cubic-bezier(0.4,0,0.2,1),border-color 0.3s cubic-bezier(0.4,0,0.2,1),color 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);color:var(--text-muted)}.lang-select-container:hover{background:rgba(30,41,59,0.6);border-color:rgba(99,102,241,0.3);color:var(--text);box-shadow:0 0 15px rgba(99,102,241,0.1)}.lang-select-container .globe-icon{width:16px;height:16px;flex-shrink:0;opacity:0.8;transition:transform 0.5s ease}.lang-select-container:hover .globe-icon{transform:rotate(15deg);opacity:1}.lang-select-container .chevron-icon{width:12px;height:12px;flex-shrink:0;pointer-events:none;opacity:0.6;margin-left:-2px}.lang-select-container:hover .chevron-icon{opacity:1}.lang-dropdown{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;font-family:inherit;font-size:0.8rem;font-weight:600;color:currentColor;cursor:pointer;padding:0 12px 0 0;margin:0;width:auto;max-width:150px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lang-dropdown option{background:#0f172a;color:white;font-family:inherit;font-size:0.9rem}.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}.feature-card:nth-child(1){--card-accent:rgba(99,102,241,0.06)}.feature-card:nth-child(2){--card-accent:rgba(139,92,246,0.06)}.feature-card:nth-child(3){--card-accent:rgba(34,197,94,0.06)}.feature-card:nth-child(4){--card-accent:rgba(56,189,248,0.06)}.feature-card:nth-child(5){--card-accent:rgba(245,158,11,0.06)}.feature-card:nth-child(6){--card-accent:rgba(236,72,153,0.06)}.feature-card{background:linear-gradient(135deg,var(--card-accent,transparent),var(--card))}.compat-section{padding:1rem 0 3.5rem 0;text-align:center;background:rgba(255,255,255,0.01);border-bottom:1px solid var(--glass-border)}.compat-mascot{display:block;margin:0 auto 0.5rem auto;max-width:368px;width:100%;height:auto;transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.compat-mascot:hover{transform:scale(1.05) translateY(-5px) rotate(1deg)}.compat-heading{font-size:1rem;font-weight:600;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:2rem}.compat-row{display:flex;justify-content:center;align-items:center;gap:3rem;flex-wrap:wrap}.compat-logo{display:flex;flex-direction:column;align-items:center;gap:0.5rem;font-size:0.75rem;font-weight:700;color:var(--text-muted);transition:opacity 0.3s;opacity:0.55}.compat-logo:hover{opacity:0.85}.compat-logo img{width:28px;height:28px;display:block}.compat-more{opacity:0.4;cursor:help;flex-direction:row;gap:0.35rem;position:relative}.compat-more:hover{opacity:0.6}.compat-more-icon{font-size:1.1rem;font-weight:700;color:var(--accent);line-height:1}.compat-tooltip{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--card);color:var(--text-muted);padding:0.6rem 0.9rem;border-radius:8px;font-size:0.72rem;font-weight:500;white-space:nowrap;border:1px solid var(--glass-border);box-shadow:0 8px 20px rgba(0,0,0,0.4);z-index:10;line-height:1.4}.compat-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--glass-border)}.compat-more:hover .compat-tooltip{display:block}.join-spinner{width:36px;height:36px;border:3px solid rgba(99,102,241,0.2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 0.75rem}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}[data-reveal]{opacity:1;transform:none}.blob{animation:none}.illus-typing-text::after{animation:none}.illus-timeline-progress{animation:none;width:60%}.illus-sync-pulse{animation:none}.illus-extension-icon{animation:none}}.use-cases-section{padding:6rem 0;position:relative;border-bottom:1px solid var(--glass-border)}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:1rem}.use-case-card{background:rgba(30,41,59,0.4);border:1px solid var(--glass-border);border-radius:16px;padding:1.2rem 1.6rem 1.7rem 1.6rem;text-align:left;transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),box-shadow 0.3s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:0.8rem;position:relative;overflow:hidden}.use-case-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--card-accent-border,var(--accent)),transparent);opacity:0;transition:opacity 0.3s ease}.use-case-card:nth-child(1){--card-accent-border:#f59e0b}.use-case-card:nth-child(2){--card-accent-border:#38bdf8}.use-case-card:nth-child(3){--card-accent-border:#ec4899}.use-case-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.35);border-color:rgba(255,255,255,0.15)}.use-case-card:hover::before{opacity:1}.use-case-image{display:block;width:100%;max-width:272px;height:150px;object-fit:contain;border-radius:8px;margin:0 auto 0 auto}.cta-github-mascot{display:block;width:100%;max-width:250px;height:auto;margin:1.5rem auto}.features-questions-mascot{display:block;width:100%;max-width:250px;height:auto;margin:-1.5rem auto 0.2rem auto;transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.features-questions-mascot:hover{transform:scale(1.05) translateY(-4px) rotate(-1.5deg)}.comparison-mascot{display:block;width:100%;max-width:260px;height:auto;margin:-2.2rem auto 0.2rem auto;transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.comparison-mascot:hover{transform:scale(1.05) translateY(-4px) rotate(1deg)}.use-case-icon{font-size:1.6rem;margin-right:0.6rem;display:inline-block;vertical-align:middle;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.2))}.use-case-card h3{font-size:1.25rem;font-weight:700;margin:0;color:white}.use-case-card p{font-size:0.9rem;line-height:1.6;color:var(--text-muted);margin:0}.comparison-section{padding:6rem 0;background:rgba(255,255,255,0.01);border-bottom:1px solid var(--glass-border)}.comparison-table-wrapper{overflow-x:auto;background:rgba(30,41,59,0.35);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-top:1rem}.comparison-table{width:100%;border-collapse:collapse;text-align:left;font-size:0.95rem}.comparison-table th,.comparison-table td{padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,0.06)}.comparison-table th{background:rgba(15,23,42,0.6);font-weight:700;color:white;text-transform:uppercase;font-size:0.8rem;letter-spacing:0.08em}.comparison-table th.highlight,.comparison-table td.highlight{background:rgba(99,102,241,0.08)}.comparison-table tbody tr:hover{background:rgba(255,255,255,0.02)}.comparison-table tbody tr:last-child td{border-bottom:none}.feat-name{display:flex;flex-direction:column;gap:0.25rem}.feat-name strong{color:white;font-weight:600}.feat-desc{font-size:0.8rem;color:var(--text-muted)}.check{color:#22c55e;font-weight:700}.cross{color:#ef4444;font-weight:500;opacity:0.8}@media (max-width:768px){.comparison-table th,.comparison-table td{padding:1rem;font-size:0.85rem}.feat-desc{display:none}}.source-link{color:var(--accent);text-decoration:none;font-size:0.72rem;font-weight:700;margin-left:0.25rem;display:inline-flex;align-items:center;vertical-align:super;opacity:0.6;transition:opacity 0.2s ease,color 0.2s ease,transform 0.2s ease}.source-link:hover{opacity:1;color:#38bdf8;transform:translateY(-1px)}.table-footnotes{padding:0.8rem 1.25rem;background:rgba(15,23,42,0.45);border-top:1px solid rgba(255,255,255,0.05);font-size:0.72rem;color:var(--text-muted);line-height:1.5;opacity:0.65;transition:opacity 0.2s ease}.table-footnotes:hover{opacity:0.95}.table-footnotes p{margin:0;display:flex;align-items:baseline;gap:0.4rem}.table-footnotes p:not(:last-child){margin-bottom:0.4rem}.table-footnotes a{color:var(--accent);text-decoration:none;font-weight:500;transition:color 0.2s ease,text-decoration 0.2s ease}.table-footnotes a:hover{color:#38bdf8;text-decoration:underline}.table-footnotes sup{font-weight:700;color:var(--accent)}@media (max-width:768px){.table-footnotes{padding:0.75rem 1rem;font-size:0.68rem}}.join-status-visual{margin-bottom:2rem;position:relative;height:200px;display:flex;align-items:center;justify-content:center}.join-status-mascot{display:block;width:140px;height:auto;z-index:2;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15))}.join-status-mascot.searching-mascot{width:175px}.join-status-pulse{animation:mascot-gentle-pulse 2s ease-in-out infinite}@keyframes mascot-gentle-pulse{0%{transform:scale(0.96);filter:drop-shadow(0 4px 10px rgba(99,102,241,0.15))}50%{transform:scale(1.04);filter:drop-shadow(0 8px 20px rgba(99,102,241,0.35))}100%{transform:scale(0.96);filter:drop-shadow(0 4px 10px rgba(99,102,241,0.15))}}.legal-mascot{display:block;width:180px;height:auto;margin:-0.75rem auto 0.4rem auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.legal-mascot:hover{transform:scale(1.06) translateY(-4px) rotate(1.5deg)}.selfhost-mascot{display:block;width:300px;height:auto;margin:0 auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}.selfhost-mascot:hover{transform:scale(1.05) translateY(-4px) rotate(-1deg)}.status-ring{position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(99,102,241,0.05);border:2px dashed rgba(99,102,241,0.25);z-index:1}.status-ring.active-pulse{animation:radar-pulse 3s cubic-bezier(0.25,0.8,0.25,1) infinite}@keyframes radar-pulse{0%{transform:scale(0.85);opacity:0.9;border-color:rgba(99,102,241,0.3);box-shadow:0 0 0 0px rgba(99,102,241,0.15)}50%{transform:scale(1.18);opacity:0.35;border-color:rgba(56,189,248,0.2);box-shadow:0 0 0 15px rgba(56,189,248,0)}100%{transform:scale(0.85);opacity:0.9;border-color:rgba(99,102,241,0.3);box-shadow:0 0 0 0px rgba(99,102,241,0.15)}}.join-card-actions{display:flex;flex-direction:column;gap:0.75rem;width:100%}.join-card-actions .btn{width:100%;justify-content:center;padding:1.1rem;font-size:0.88rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}.join-card-actions .btn svg{margin-right:0.3rem;flex-shrink:0}.join-card-actions .btn img{margin-right:0.3rem;flex-shrink:0}.btn-success{background:#22c55e;color:white !important;box-shadow:0 10px 15px -3px rgba(34,197,94,0.3)}.btn-success:hover{background:#16a34a;transform:translateY(-2px);box-shadow:0 20px 25px -5px rgba(34,197,94,0.4)}.faq-grid{display:flex;flex-direction:column;gap:1rem;max-width:800px;margin:0 auto}.faq-item{background:rgba(30,41,59,0.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:1.5rem 2rem;cursor:pointer;transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease}.faq-item:hover{border-color:rgba(99,102,241,0.3);box-shadow:0 8px 20px rgba(99,102,241,0.1)}.faq-item[open]{border-color:rgba(99,102,241,0.4);background:rgba(30,41,59,0.65)}.faq-item summary{font-weight:700;font-size:1.05rem;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:'+';font-size:1.4rem;color:var(--accent);font-weight:300;transition:transform 0.3s ease;flex-shrink:0}.faq-item[open] summary::after{content:'−';transform:rotate(180deg)}.faq-item p{color:var(--text-muted);font-size:0.95rem;line-height:1.6;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.06)}.feature-card:focus-visible,.use-case-card:focus-visible,.compat-logo:focus-visible{outline:2px solid var(--accent);outline-offset:4px;transform:translateY(-5px)}.feature-card,.use-case-card,.compat-logo{scroll-margin-top:100px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:white;padding:0.75rem 1.25rem;border-radius:0 0 8px 0;font-weight:700;z-index:9999;text-decoration:none}.skip-link:focus{left:0}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}.blob{animation:none}.join-status-pulse{animation:none}.status-ring.active-pulse{animation:none}}.blob,.join-status-pulse,.status-ring.active-pulse,.hero-mockup-wrapper,.cta-group .btn{will-change:transform,opacity}@media (prefers-reduced-motion:reduce){.blob,.join-status-pulse,.status-ring.active-pulse,.hero-mockup-wrapper,.cta-group .btn{will-change:auto}} \ No newline at end of file diff --git a/website/www/tr/index.html b/website/www/tr/index.html index c67e3af..dd8a9ad 100644 --- a/website/www/tr/index.html +++ b/website/www/tr/index.html @@ -6,9 +6,9 @@ KoalaSync | Netflix, YouTube ve Herhangi Bir Videoyu Arkadaşlarınızla Eşitleyin - + - + @@ -63,7 +63,7 @@ - + +