diff --git a/README.md b/README.md index 1c538c2..acaa4aa 100644 --- a/README.md +++ b/README.md @@ -90,8 +90,17 @@ To connect your extension to a self-hosted server, open the popup → **Room** t --- +### 🌐 Localization & Translations + +The official KoalaSync website features a custom static site compiler to offer seamless localization: +- **Available Languages**: Manually verified languages (English, German) and auto-generated variants ready for review (French, Spanish, Brazilian Portuguese, and Russian). +- **Contributing**: We welcome community translations! Please refer directly to the [TRANSLATION.md](website/TRANSLATION.md) file for step-by-step instructions on how to review auto-generated translations or contribute support for new languages. + +--- + ### 📖 Documentation & Links +- **[TRANSLATION.md](website/TRANSLATION.md)**: Translation and localization guide for contributors. - **[PRIVACY.md](PRIVACY.md)**: Data Handling and Privacy Policy. - **[CONTRIBUTING.md](CONTRIBUTING.md)**: How to help make KoalaSync better. - **[HOW_IT_WORKS.md](docs/HOW_IT_WORKS.md)**: Step-by-step walkthrough of the complete user flow. diff --git a/website/TRANSLATION.md b/website/TRANSLATION.md new file mode 100644 index 0000000..040a181 --- /dev/null +++ b/website/TRANSLATION.md @@ -0,0 +1,159 @@ +# KoalaSync Translation & Localization Guide + +This guide describes how the localization system works for the KoalaSync website and provides step-by-step instructions on how a developer or an AI agent should add support for a new language. + +--- + +## Architecture Overview + +The KoalaSync website uses a custom, zero-dependency static site generator to compile localized pages from a single template: +- **Template Source**: `/website/template.html` (single source of truth). +- **Locales Source**: `/website/locales/[lang].json` (language dictionaries). +- **Build Pipeline**: `/website/build.js` (compiles pages into `/website/www/`). + +--- + +## Supported Languages + +> [!NOTE] +> **Contributor Guideline: Translation Quality Distinction** +> To maintain the highest standard of UX and accessibility, KoalaSync categorizes languages into two tiers. Core languages (`en` and `de`) are manually translated and verified by native speakers. Extended languages (`fr` and `es`) are currently machine-translated to broaden accessibility, and need native review. Future contributors are encouraged to audit "Auto-Generated" translations and submit PRs to elevate them to "Verified" status. + +The following table provides an overview of all currently active languages on the KoalaSync platform: + +| Language Code | Language Name | Status | +| :--- | :--- | :--- | +| `en` | English | 100% Manually Verified | +| `de` | German | 100% Manually Verified | +| `fr` | French | Auto-Generated (May contain errors / Needs Native Speaker Review) | +| `es` | Spanish | Auto-Generated (May contain errors / Needs Native Speaker Review) | +| `pt-BR` | Portuguese (Brasil) | Auto-Generated (May contain errors / Needs Native Speaker Review) | +| `ru` | Russian | Auto-Generated (May contain errors / Needs Native Speaker Review) | + +> [!WARNING] +> **Autogeneration Rule** +> Any future languages added to the static site generator (e.g., Italian, Dutch) MUST be marked as `"Auto-Generated (May contain errors / Needs Native Speaker Review)"` in this table until a native speaker manually reviews and signs off on the translations. + +--- + +## Strict Legal Exclusion Rule + +> [!IMPORTANT] +> **DO NOT TRANSLATE LEGAL PAGES** +> The imprint and privacy pages ([impressum.html](file:///Users/koala/Documents/KoalaPlay/website/impressum.html) and [datenschutz.html](file:///Users/koala/Documents/KoalaPlay/website/datenschutz.html)) **MUST NOT** be translated into any other languages. +> They are strictly restricted to **English** and **German** only. +> +> **Rationale:** Legal compliance and liability under European Union (GDPR) and German (DDG) laws. Offering legal notices in auto-generated languages introduces risks of mistranslations that could be legally binding or misrepresent liabilities. +> +> **Technical Fallback:** `lang-init.js` is configured to automatically fall back to **English** for these pages if the user's active preference is French, Spanish, or any other unsupported language, ensuring they see legally verified text while preserving their language state when returning home. + +--- + +## Step-by-Step: Adding a New Language + +Follow this exact workflow to add a new language (for example, Italian - `it`): + +### Step 1: Create the Translation Dictionary +Create a new JSON file inside `/website/locales/` named `[lang].json` (e.g., `/website/locales/it.json`). +- Copy `/website/locales/en.json` to act as your baseline template. +- Translate all key values while preserving key names. +- Update the system configuration keys at the top of the file: + ```json + { + "LANG_CODE": "it", + "HTML_CLASS": "lang-it", + "CANONICAL_PATH": "it/", + "LANG_TOGGLE_URL": "../", + "LANG_TOGGLE_TEXT": "EN", + ... + } + ``` + +### Step 2: Register the Language in the Build Script +Open `/website/build.js` and simply append the new language code to the `languages` array: +```javascript +const languages = ['en', 'de', 'fr', 'es', 'pt-BR', 'ru', 'it']; +``` +The dynamic compiler loop will automatically load your JSON dictionary, create `/website/www/it/`, and compile `/website/www/it/index.html` with correct sitemaps, canoncials, and relative assets. + +### Step 3: Run Compilation +Run the build script from the repository root: +```bash +node website/build.js +``` +Verify the output is generated inside `/website/www/[lang]/index.html`. + +### Step 4: Update this Guide +Add the new language entry to the **Supported Languages** table above with the appropriate status marking. + +--- + +## Future Architecture: Dynamic Utility Pages + +For dynamic utility pages like `join.html`, we need to support unlimited languages in the future under a strict architectural constraint: **the share link URL must never contain language path details or query parameters.** + +### Proposed Client-Side i18n Architecture + +To achieve this without bloating the HTML DOM with duplicate text nodes for every language (which leads to `display: none` sprawl), we propose an **asynchronous JSON dictionary injection architecture**: + +```mermaid +sequenceDiagram + participant Guest as Guest Browser + participant JS as lang-init.js (Sync) + participant DOM as i18n-client.js (Async) + participant Server as Static Web Server + + Guest->>JS: Enters join.html#join:roomID + JS->>JS: Read localStorage & navigator.language + JS->>JS: Resolve activeLang (e.g., "es") + JS->>Guest: Apply html.lang="es" & lang-es class + Guest->>DOM: Page elements render with data-i18n attributes + DOM->>Server: fetch("/locales/es.json") asynchronously + Server-->>DOM: Return JSON dictionary + DOM->>DOM: Scan DOM for data-i18n & replace textContent + DOM->>Guest: Fully localized UI shown seamlessly +``` + +#### 1. Markup Definition (Semantic Tags) +The HTML file `join.html` will contain only generic, language-independent tags with data attributes for translation keys. English text is placed as a native placeholder fallback: +```html +

Ready to sync?

+

You've been invited to join a session.

+``` + +#### 2. Client-Side i18n Engine (`i18n-client.js`) +We will create a lightweight client-side translation engine that executes asynchronously on page load: +```javascript +document.addEventListener('DOMContentLoaded', async () => { + // 1. Recover localized preference determined by lang-init.js + const activeLang = document.documentElement.lang || 'en'; + + // 2. Fetch the corresponding locale JSON file asynchronously + try { + const response = await fetch(`locales/${activeLang}.json`); + if (!response.ok) throw new Error('Locale not found'); + const dictionary = await response.json(); + + // 3. Update DOM elements carrying data-i18n attribute + document.querySelectorAll('[data-i18n]').forEach(el => { + const key = el.getAttribute('data-i18n'); + if (dictionary[key]) { + // If it is an image, update alt text instead + if (el.tagName === 'IMG') { + el.alt = dictionary[key]; + } else { + el.textContent = dictionary[key]; + } + } + }); + } catch (err) { + console.warn('i18n dynamic load failed, falling back to English defaults:', err); + } +}); +``` + +#### Advantages of this Approach +1. **Zero URL Contamination**: The share link remains clean (e.g., `/join.html#join:room:pass`), ensuring absolute anonymity and avoiding hardcoding the sender's language onto the receiver. +2. **Minimal DOM Footprint**: Eliminates duplicate ``, `` blocks entirely, reducing page size by 50% and eliminating slow style recalculations. +3. **Infinite Scale**: Support for new languages (e.g., Italian, Japanese) requires zero modifications to `join.html`. The client simply downloads the appropriate locale JSON file asynchronously on demand. + diff --git a/website/app.js b/website/app.js index ccbf916..b52f9ae 100644 --- a/website/app.js +++ b/website/app.js @@ -310,7 +310,8 @@ document.addEventListener('DOMContentLoaded', () => { const updateDynamicVersion = async () => { try { - const response = await fetch('version.json'); + const versionPath = document.documentElement.lang === 'de' ? '../version.json' : 'version.json'; + const response = await fetch(versionPath); if (!response.ok) return; const data = await response.json(); const { version, date } = data; @@ -443,41 +444,102 @@ document.addEventListener('DOMContentLoaded', () => { }); } - // Language Selection Umschalter - const toggleLanguage = (e) => { - if (e) e.preventDefault(); + // Dynamically localize home links on root dynamic pages (impressum, datenschutz, join) + const localizeHomeLinks = () => { const html = document.documentElement; - const currentIsEnglish = html.classList.contains('lang-en'); - const newLang = currentIsEnglish ? 'de' : 'en'; - html.classList.remove('lang-en', 'lang-de'); - html.classList.add('lang-' + newLang); - html.lang = newLang; - localStorage.setItem('koala_lang', newLang); - - // Update titles dynamically based on page - var path = window.location.pathname; - var isIndex = path === '/' || path.endsWith('index.html') || path.split('/').pop() === ''; - var isJoin = path.includes('join'); - - if (isIndex) { - const titles = { - en: 'KoalaSync | Real-time Video Synchronization for Friends', - de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' - }; - document.title = titles[newLang] || titles.en; - } else if (isJoin) { - const titles = { - en: 'Join Room | KoalaSync', - de: 'Raum beitreten | KoalaSync' - }; - document.title = titles[newLang] || titles.en; + const activeLang = localStorage.getItem('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'].includes(seg)); + + // Only need to do this dynamic rewrite if we are NOT already inside a localized subdirectory + if (!isSubdir) { + const homeLinks = document.querySelectorAll('a[href="index.html"], a[href="de/index.html"], a[href="fr/index.html"], a[href="es/index.html"], a[href="pt-BR/index.html"], a[href="ru/index.html"]'); + homeLinks.forEach(link => { + link.href = (activeLang === 'en') ? 'index.html' : `${activeLang}/index.html`; + }); } }; - document.querySelectorAll('.lang-toggle').forEach(btn => { - btn.addEventListener('click', toggleLanguage); + // Modern Language Selector Navigation and State Toggling + const handleLanguageChange = (e) => { + const select = e.currentTarget; + const newLang = select.value; + const path = window.location.pathname; + + // Save the user's preference + localStorage.setItem('koala_lang', newLang); + + // 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; + + if (isIndex) { + // Static navigation: Route to correct subdirectory + const pathSegments = path.split('/'); + const isSubdir = pathSegments.some(seg => ['de', 'fr', 'es', 'pt-BR', 'ru'].includes(seg)); + + let targetPath; + if (newLang === 'en') { + if (isSubdir) { + targetPath = '../index.html'; + } else { + targetPath = 'index.html'; + } + } else { + if (isSubdir) { + // Switching from one language subdirectory to another (e.g., /de/ to /fr/) + targetPath = '../' + newLang + '/index.html'; + } else { + // Switching from root (English) to a language subdirectory (e.g., / to /fr/) + targetPath = newLang + '/index.html'; + } + } + + window.location.href = targetPath; + } else { + // Dynamic page: Toggle classes and update elements dynamically without navigating away + const html = document.documentElement; + html.classList.remove('lang-en', 'lang-de', 'lang-fr', 'lang-es', 'lang-pt-br', 'lang-ru'); + + // Fallback dynamic pages to 'en' if 'de' is not chosen (since fr/es markup is not present) + const activeDisplayLang = (newLang === 'de') ? 'de' : 'en'; + html.classList.add('lang-' + activeDisplayLang); + html.lang = activeDisplayLang; + + // Sync all selects on the page to the new value + document.querySelectorAll('.lang-dropdown').forEach(sel => { + sel.value = newLang; + }); + + // Update titles dynamically + const isJoin = path.includes('join'); + if (isJoin) { + const titles = { en: 'Join Room | KoalaSync', de: 'Raum beitreten | KoalaSync' }; + document.title = titles[activeDisplayLang] || titles.en; + } + + // Localize home links dynamically + localizeHomeLinks(); + } + }; + + // Register change event listener for the dropdowns + document.querySelectorAll('.lang-dropdown').forEach(select => { + select.addEventListener('change', handleLanguageChange); }); + // Initialize language select elements to show the current preferred language + const initLanguageSelectorValue = () => { + const savedLang = localStorage.getItem('koala_lang'); + const browserLang = navigator.language.startsWith('de') ? 'de' : 'en'; + const activePref = savedLang || browserLang; + + document.querySelectorAll('.lang-dropdown').forEach(select => { + select.value = activePref; + }); + }; + // Impressum Email Obfuscation Click Reveal document.querySelectorAll('.email-reveal').forEach(el => { el.addEventListener('click', function() { @@ -595,4 +657,6 @@ document.addEventListener('DOMContentLoaded', () => { detectBrowserAndElevateBadge(); checkInvite(); updateDynamicVersion(); + localizeHomeLinks(); + initLanguageSelectorValue(); }); diff --git a/website/build.js b/website/build.js new file mode 100644 index 0000000..90cdca6 --- /dev/null +++ b/website/build.js @@ -0,0 +1,128 @@ +/** + * KoalaSync Static Site Generator (i18n compiler) + * Pure, dependency-free Node.js build pipeline. + */ + +const fs = require('fs'); +const path = require('path'); + +// Helper to recursively copy directories +function copyDirSync(src, dest) { + fs.mkdirSync(dest, { recursive: true }); + const entries = fs.readdirSync(src, { withFileTypes: true }); + + for (let entry of entries) { + const srcPath = path.join(src, entry.name); + const destPath = path.join(dest, entry.name); + + if (entry.isDirectory()) { + copyDirSync(srcPath, destPath); + } else { + fs.copyFileSync(srcPath, destPath); + } + } +} + +function compile() { + console.log('Starting KoalaSync i18n compilation...'); + + const websiteDir = __dirname; + const wwwDir = path.join(websiteDir, 'www'); + + // 1. Create build directories + fs.mkdirSync(wwwDir, { recursive: true }); + + // 2. Read template + const templatePath = path.join(websiteDir, 'template.html'); + if (!fs.existsSync(templatePath)) { + console.error('Error: template.html not found! Run from website/ directory or repo root.'); + process.exit(1); + } + const templateContent = fs.readFileSync(templatePath, 'utf8'); + + const localesDir = path.join(websiteDir, 'locales'); + const languages = ['en', 'de', 'fr', 'es', 'pt-BR', 'ru']; + + // 3. Compile helper function + function compilePage(locale, assetPath, lang) { + let compiled = templateContent; + + // Inject asset path prefix first + compiled = compiled.replace(/\{\{ASSET_PATH\}\}/g, assetPath); + + // Inject selected state for the dropdown + languages.forEach(l => { + const placeholder = `{{SELECTED_${l.toUpperCase()}}}`; + compiled = compiled.replace(new RegExp(placeholder, 'g'), l === lang ? 'selected' : ''); + }); + + // Inject all translations + for (let [key, value] of Object.entries(locale)) { + const regex = new RegExp(`\\{\\{${key}\\}\\}`, 'g'); + compiled = compiled.replace(regex, value); + } + + return compiled; + } + + // 4. Generate HTML files + for (let lang of languages) { + const localePath = path.join(localesDir, `${lang}.json`); + if (!fs.existsSync(localePath)) { + console.warn(`Warning: Locale file for ${lang} not found.`); + continue; + } + const locale = JSON.parse(fs.readFileSync(localePath, 'utf8')); + + if (lang === 'en') { + console.log('Compiling English version (index.html)...'); + const enHtml = compilePage(locale, '', lang); + fs.writeFileSync(path.join(wwwDir, 'index.html'), enHtml, 'utf8'); + } else { + console.log(`Compiling ${lang.toUpperCase()} version (${lang}/index.html)...`); + const langDir = path.join(wwwDir, lang); + fs.mkdirSync(langDir, { recursive: true }); + const langHtml = compilePage(locale, '../', lang); + fs.writeFileSync(path.join(langDir, 'index.html'), langHtml, 'utf8'); + } + } + + // 5. Copy static assets + console.log('Copying assets and static website files...'); + const staticFiles = [ + 'style.css', + 'app.js', + 'lang-init.js', + 'robots.txt', + 'sitemap.xml', + 'version.json', + 'join.html', + 'impressum.html', + 'datenschutz.html' + ]; + + for (let file of staticFiles) { + const srcPath = path.join(websiteDir, file); + const destPath = path.join(wwwDir, file); + if (fs.existsSync(srcPath)) { + fs.copyFileSync(srcPath, destPath); + console.log(`Copied: ${file}`); + } else { + console.warn(`Warning: Static file ${file} not found.`); + } + } + + // Copy assets folder recursively + const srcAssets = path.join(websiteDir, 'assets'); + const destAssets = path.join(wwwDir, 'assets'); + if (fs.existsSync(srcAssets)) { + copyDirSync(srcAssets, destAssets); + console.log('Copied assets directory recursively.'); + } else { + console.error('Error: assets/ directory not found in website/.'); + } + + console.log('KoalaSync compilation finished successfully! Output is in website/www/'); +} + +compile(); diff --git a/website/datenschutz.html b/website/datenschutz.html index 2bcb999..1792381 100644 --- a/website/datenschutz.html +++ b/website/datenschutz.html @@ -39,10 +39,18 @@ GitHub - - - EN/DE - +
+ + + +
diff --git a/website/impressum.html b/website/impressum.html index f438f79..4dbd67b 100644 --- a/website/impressum.html +++ b/website/impressum.html @@ -39,10 +39,18 @@ GitHub - - - EN/DE - +
+ + + +
diff --git a/website/join.html b/website/join.html index 93bc9c3..ae72f4b 100644 --- a/website/join.html +++ b/website/join.html @@ -9,6 +9,19 @@ + + + + + + + + + + + + + @@ -39,10 +52,18 @@ GitHub - - - EN/DE - +
+ + + +
diff --git a/website/lang-init.js b/website/lang-init.js index a74c38a..3485abc 100644 --- a/website/lang-init.js +++ b/website/lang-init.js @@ -1,12 +1,52 @@ (function() { - var savedLang = localStorage.getItem('koala_lang'); - var browserLang = navigator.language.startsWith('de') ? 'de' : 'en'; - var activeLang = savedLang || browserLang; - document.documentElement.classList.add('lang-' + activeLang); - document.documentElement.lang = activeLang; + var html = document.documentElement; + var path = window.location.pathname; + + // Check if we are on the root index page (either "/" or "/index.html" at the root) + var isRootIndex = path === '/' || path === '/index.html' || path === ''; + + if (isRootIndex) { + var savedLang = localStorage.getItem('koala_lang'); + var browserLang = navigator.language.startsWith('de') ? 'de' : 'en'; + var preferredLang = savedLang || browserLang; + + if (preferredLang === 'de') { + // Redirect to German version + window.location.replace('de/'); + return; + } + } + + var htmlClasses = html.className.split(' '); + var activeLang = null; + var hasStaticLang = false; + for (var i = 0; i < htmlClasses.length; i++) { + if (htmlClasses[i].indexOf('lang-') === 0) { + hasStaticLang = true; + var langPart = htmlClasses[i].substring(5); + activeLang = langPart === 'pt-br' ? 'pt-BR' : langPart; + break; + } + } + + if (hasStaticLang) { + localStorage.setItem('koala_lang', activeLang); + } else { + var savedLang = localStorage.getItem('koala_lang'); + var browserLang = navigator.language.startsWith('de') ? 'de' : 'en'; + activeLang = savedLang || browserLang; + + // Dynamic utility pages currently only support English and German markup. + // Fallback to English for any other language preference (e.g. fr, es) to avoid bilingual text duplication. + if (activeLang !== 'de') { + activeLang = 'en'; + } + + html.classList.add('lang-' + activeLang); + html.lang = activeLang; + } // Update titles dynamically based on page - var path = window.location.pathname; var isIndex = path === '/' || path.endsWith('index.html') || path.split('/').pop() === ''; var isJoin = path.includes('join'); diff --git a/website/locales/de.json b/website/locales/de.json new file mode 100644 index 0000000..26743b9 --- /dev/null +++ b/website/locales/de.json @@ -0,0 +1,118 @@ +{ + "LANG_CODE": "de", + "HTML_CLASS": "lang-de", + "CANONICAL_PATH": "de/", + "LANG_TOGGLE_URL": "../", + "LANG_TOGGLE_TEXT": "EN", + + "META_TITLE": "KoalaSync | Netflix, YouTube & jedes Video mit Freunden synchronisieren", + "META_DESCRIPTION": "Schaue Netflix, YouTube, Twitch und jedes HTML5-Video perfekt synchronisiert mit Freunden. Kostenlose, quelloffene Browser-Erweiterung für Chrome und Firefox. Keine Anmeldung erforderlich.", + "OG_TITLE": "KoalaSync | Netflix, Emby, Jellyfin & fast jedes Video mit Freunden synchronisieren", + "OG_DESCRIPTION": "Schaue Netflix, Emby, Jellyfin, YouTube, Twitch und fast jedes HTML5-Video perfekt synchronisiert. Quelloffene, datenschutzfreundliche Browser-Erweiterung für Chrome und Firefox.", + "TWITTER_TITLE": "KoalaSync | Netflix, Emby, Jellyfin & fast jedes Video mit Freunden synchronisieren – Browser-Erweiterung", + "TWITTER_DESCRIPTION": "Schaue Netflix, Emby, Jellyfin, YouTube, Twitch und fast jedes HTML5-Video perfekt synchronisiert mit Freunden. Datenschutzfreundliche Browser-Erweiterung für Chrome und Firefox.", + + "NAV_FEATURES": "Funktionen", + "NAV_HOW_IT_WORKS": "So funktioniert's", + + "HERO_TITLE": "Gemeinsam schauen.
Perfekt synchron.", + "HERO_SUBTITLE": "Dein Kino-Abend auf Distanz. Keine Lags, keine Anmeldung. Einfach Link teilen und zusammen schauen.", + "HERO_MASCOT_ALT": "Ein niedlicher Koala steht da und schaut nach unten auf die Download-Buttons", + "ADD_TO_CHROME": "Zu Chrome hinzufügen", + "ADD_TO_FIREFOX": "Zu Firefox hinzufügen", + + "COMPAT_HEADING": "Funktioniert auf deinen Lieblingsplattformen", + "COMPAT_MORE": "und viele mehr", + "COMPAT_TOOLTIP": "Funktioniert auf fast jeder Seite mit einem Video-Element", + + "USE_CASES_TITLE": "Perfekt für jeden Anlass", + "USE_CASES_SUBTITLE": "Ob nah oder fern, KoalaSync bringt Menschen bei ihren Lieblingsvideos zusammen.", + "USE_CASE_1_ALT": "Zwei niedliche Koalas sitzen zusammen und teilen sich einen Eimer Popcorn", + "USE_CASE_1_TITLE": "Filmabend mit Freunden", + "USE_CASE_1_DESC": "Synchronisiere eure Filme in Echtzeit und quatscht nebenbei auf Discord, Zoom oder im Tool eurer Wahl. Es fühlt sich an, als säßet ihr im selben Raum.", + "USE_CASE_2_ALT": "Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas", + "USE_CASE_2_TITLE": "Gemeinsam Lernen", + "USE_CASE_2_DESC": "Analysiert Online-Tutorials, Vorlesungen oder Streams gemeinsam mit Mitschülern oder Kollegen. Pausiert und besprecht komplizierte Schritte in perfektem Sync.", + "USE_CASE_3_ALT": "Ein niedliches Koala-Pärchen schaut remote zusammen; einer sitzt am PC und sie liegt mit dem Laptop im Bett, während Herzen zwischen ihnen fliegen", + "USE_CASE_3_TITLE": "Fernbeziehungen", + "USE_CASE_3_DESC": "Überbrückt die Distanz und genießt gemeinsame Date-Nächte. Erlebt jeden Plot-Twist, lacht über dieselben Witze und teilt emotionale Momente zur selben Millisekunde.", + + "WHY_TITLE": "Warum KoalaSync?", + "WHY_SUBTITLE": "Entwickelt für zuverlässigen Sync, Datenschutz und einfache Einrichtung.", + + "FEATURE_1_TITLE": "Volle Kontrolle, in Echtzeit", + "FEATURE_1_DESC": "Einer pausiert, alle pausieren. Einer spult, alle folgen. Unser Zwei-Phasen-Synchronisationsprotokoll koordiniert die Wiedergabe aller Teilnehmer in Echtzeit.", + "FEATURE_2_TITLE": "Grenzenloses Bingen", + "FEATURE_2_DESC": "Nächste Episode startet für jeden zeitgleich. KoalaSync erkennt den Episodenwechsel und pausiert, bis jeder Teilnehmer das neue Video fertig geladen hat.", + "FEATURE_3_TITLE": "Keine Accounts / Datenschutz", + "FEATURE_3_DESC": "Kein Login. Keine Daten. Einfach Link teilen und schauen. Der Server läuft flüchtig im RAM und löscht deinen Raum komplett nach dem Verlassen.", + "FEATURE_4_TITLE": "Universeller HTML5-Support", + "FEATURE_4_DESC": "Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und fast jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.", + "FEATURE_5_TITLE": "Self-Hostable & Docker-Ready", + "FEATURE_5_DESC": "Unsere Server sind kostenlos und schnell, aber du kannst auch die volle Kontrolle übernehmen, wenn du willst. Starte dein eigenes privates Relay in Sekunden via Docker.", + "FEATURE_6_TITLE": "Direkte Einladungen & 1-Klick Beitritt", + "FEATURE_6_DESC": "Keine lästigen IPs oder Passwörter austauschen. Teile einfach einen Einladungslink mit deinen Freunden, um sie mit einem Klick in den Raum zu holen.", + + "COMP_TITLE": "KoalaSync vs. Teleparty", + "COMP_SUBTITLE": "Erfahre, warum Open Source, Werbefreiheit und echter Datenschutz die bessere Wahl für gemeinsames Schauen sind.", + "COMP_COL_FEATURE": "Funktion", + "COMP_FEAT_1_NAME": "Kosten / Paywalls", + "COMP_FEAT_1_DESC": "Premium-Abos, versteckte Kosten oder gesperrte Funktionen.", + "COMP_FEAT_1_KOALA": "100% Kostenlos", + "COMP_FEAT_1_TELE": "Premium-Abo / Paywalls", + "COMP_FEAT_2_NAME": "Lizenz / Quellcode", + "COMP_FEAT_2_DESC": "Ob der Quellcode quelloffen und frei einsehbar ist.", + "COMP_FEAT_2_KOALA": "Open Source (MIT)", + "COMP_FEAT_2_TELE": "Proprietär", + "COMP_FEAT_3_NAME": "Self-Hosting", + "COMP_FEAT_3_DESC": "Möglichkeit, einen eigenen privaten Relay-Server zu betreiben.", + "COMP_FEAT_3_KOALA": "Ja (Docker-bereit)", + "COMP_FEAT_3_TELE": "Nein", + "COMP_FEAT_4_NAME": "Datenschutz & Tracking", + "COMP_FEAT_4_DESC": "Registrierungszwang, Tracking-Cookies und Analysen.", + "COMP_FEAT_4_KOALA": "Keine Speicherung (RAM-only)", + "COMP_FEAT_4_TELE": "Google Analytics & Cookies", + "COMP_FEAT_5_NAME": "Kompatibilität", + "COMP_FEAT_5_DESC": "Unterstützte Webseiten und Player-Kompatibilität.", + "COMP_FEAT_5_KOALA": "Fast jedes HTML5-Video", + "COMP_FEAT_5_TELE": "Nur unterstützte Seiten", + "COMP_FOOTNOTE_1": "Stand des Vergleichs: Mai 2026.", + "COMP_FOOTNOTE_2": "Details zu Preisen und unterstützten Netzwerken von Teleparty Premium:", + "COMP_FOOTNOTE_3": "Datenschutzerklärung und Tracker-Erfassung von Teleparty:", + "COMP_FOOTNOTE_4": "Funktioniert auf allen Seiten, die Skript-Injektionen in Standard-HTML5-Videoplayer erlauben. Seiten mit extrem strengen Content Security Policies (CSP), DRM-Kopierschutz oder stark verschachtelten Player-Wrappern (z. B. komplexe Shadow-DOMs) können die automatische Steuerung blockieren.", + + "STEPS_TITLE": "Erste Schritte", + "STEP_1_TITLE": "Erweiterung installieren", + "STEP_1_DESC": "Füge KoalaSync aus dem Chrome Web Store, den Firefox Add-ons oder über die Entwickler-ZIP von GitHub zu deinem Browser hinzu.", + "STEP_1_ILLUS_DESC": "Privatsphäre-fokussierte Video-Synchronisation", + "STEP_1_ILLUS_DL_CHROME": "Download für Chrome", + "STEP_1_ILLUS_DL_FIREFOX": "Download für Firefox", + "STEP_1_ILLUS_ACTIVE": "Erweiterung aktiv", + "STEP_1_ILLUS_READY": "Bereit zum Mitschauen!", + "STEP_2_TITLE": "Raum erstellen", + "STEP_2_DESC": "Öffne die Erweiterung und klicke auf „+ Neuer Raum“. KoalaSync generiert automatisch eine sichere Raum-ID samt Passwort, tritt dem Raum bei und kopiert den Einladungslink in deine Zwischenablage.", + "STEP_2_ILLUS_ROOM": "Raum", + "STEP_2_ILLUS_SYNC": "Sync", + "STEP_2_ILLUS_SETTINGS": "Optionen", + "STEP_2_ILLUS_CREATE": "+ Neuer Raum", + "STEP_2_ILLUS_MANUAL": "Manuell verbinden / Erweitert", + "STEP_2_ILLUS_COPIED": "Einladungslink kopiert!", + "STEP_3_TITLE": "Teilen & Synchronisieren", + "STEP_3_DESC": "Sende den Einladungslink an deine Freunde. Sobald sie beitreten, wähle deinen Video-Tab aus und genieße die synchronisierte Wiedergabe.", + "STEP_3_ILLUS_IN_SYNC": "SYNCHRON", + + "SELF_TITLE": "Für Self-Hoster", + "SELF_SUBTITLE": "Du traust dem Server nicht? Behalte die volle Datenhoheit. Richte deinen eigenen privaten Relay-Server in wenigen Minuten ein.", + "SELF_MASCOT_ALT": "Ein niedlicher Koala sitzt am Laptop und deployt einen Docker-Container für das Self-Hosting", + "SELF_COPY_CODE": "Code kopieren", + "SELF_GITHUB_PACKAGES": "Alle Image-Tags auf GitHub Packages ansehen", + + "BOTTOM_TITLE": "Noch nicht überzeugt? Überzeug dich selbst.", + "BOTTOM_SUBTITLE": "KoalaSync ist zu 100 % Open Source, werbefrei und trackingsicher. Überprüfe unseren Code auf GitHub oder installiere direkt die Browser-Erweiterung.", + "BOTTOM_MASCOT_ALT": "Ein niedlicher Koala hält eine GitHub-Projektseite zusammen mit dem GitHub Maskottchen Octocat", + + "FOOTER_MIT": "Open Source unter der MIT-Lizenz.", + "FOOTER_RAM": "Keine Daten werden auf unseren Servern gespeichert. Reines RAM-basiertes Relay.", + "FOOTER_LEGAL": "Impressum", + "FOOTER_PRIVACY": "Datenschutz" +} diff --git a/website/locales/en.json b/website/locales/en.json new file mode 100644 index 0000000..6f47e0d --- /dev/null +++ b/website/locales/en.json @@ -0,0 +1,118 @@ +{ + "LANG_CODE": "en", + "HTML_CLASS": "lang-en", + "CANONICAL_PATH": "", + "LANG_TOGGLE_URL": "de/", + "LANG_TOGGLE_TEXT": "DE", + + "META_TITLE": "KoalaSync | Sync Netflix, YouTube & Any Video with Friends", + "META_DESCRIPTION": "Watch Netflix, YouTube, Twitch & any HTML5 video in perfect sync with friends. Free, open-source browser extension for Chrome and Firefox. No sign-up needed.", + "OG_TITLE": "KoalaSync | Sync Netflix, Emby, Jellyfin & Almost Any Video with Friends", + "OG_DESCRIPTION": "Watch Netflix, Emby, Jellyfin, YouTube, Twitch and almost any HTML5 video in perfect sync. Privacy-first, open-source browser extension for Chrome & Firefox.", + "TWITTER_TITLE": "KoalaSync | Sync Netflix, Emby, Jellyfin & Almost Any Video with Friends – Browser Extension", + "TWITTER_DESCRIPTION": "Watch Netflix, Emby, Jellyfin, YouTube, Twitch and almost any HTML5 video in perfect sync with friends. Privacy-first, open-source browser extension for Chrome and Firefox.", + + "NAV_FEATURES": "Features", + "NAV_HOW_IT_WORKS": "How it works", + + "HERO_TITLE": "Watch Together.
Sync Perfectly.", + "HERO_SUBTITLE": "Your remote movie night without lags. No registration, no data collection. Just share a link and watch together.", + "HERO_MASCOT_ALT": "A cute koala standing and looking down at the download buttons", + "ADD_TO_CHROME": "Add to Chrome", + "ADD_TO_FIREFOX": "Add to Firefox", + + "COMPAT_HEADING": "Works on your favorite platforms", + "COMPAT_MORE": "and many more", + "COMPAT_TOOLTIP": "Works on almost any site with a video element", + + "USE_CASES_TITLE": "Perfect for Any Occasion", + "USE_CASES_SUBTITLE": "Whether near or far, KoalaSync brings people together around their favorite videos.", + "USE_CASE_1_ALT": "Two cute koalas sitting together and sharing a bucket of popcorn", + "USE_CASE_1_TITLE": "Movie Night with Friends", + "USE_CASE_1_DESC": "Sync your movies in real time and talk via Discord, Zoom, or your favorite voice call application. It feels just like sitting in the same room.", + "USE_CASE_2_ALT": "A koala professor presenting on a screen to two remote student koalas", + "USE_CASE_2_TITLE": "Remote Learning", + "USE_CASE_2_DESC": "Analyze online tutorials, lectures, or developer training streams together with classmates or colleagues. Pause and discuss complex steps in perfect harmony.", + "USE_CASE_3_ALT": "A cute koala couple watching together remotely; one is sitting at a PC and the other is in bed with a laptop, with flying hearts between them", + "USE_CASE_3_TITLE": "Long-Distance Relationships", + "USE_CASE_3_DESC": "Bridge the distance and enjoy date nights. Experience every plot twist, laugh at the same jokes, and share emotional moments at the exact same millisecond.", + + "WHY_TITLE": "Why KoalaSync?", + "WHY_SUBTITLE": "Built for reliable sync, privacy-first design, and easy setup.", + + "FEATURE_1_TITLE": "Full Control / Instant Sync", + "FEATURE_1_DESC": "One pauses, everyone pauses. One seeks, everyone follows. Our two-phase sync protocol coordinates playback in real time across all participants.", + "FEATURE_2_TITLE": "Endless Binge-Watching", + "FEATURE_2_DESC": "Autoplay in sync. KoalaSync automatically detects episode transitions and holds playback until all peers have successfully loaded the next video.", + "FEATURE_3_TITLE": "Zero Accounts / Pure Privacy", + "FEATURE_3_DESC": "No registration, no tracking, no persistency footprints. The server runs entirely in ephemeral RAM and purges your room when you leave.", + "FEATURE_4_TITLE": "Universal HTML5 Support", + "FEATURE_4_DESC": "Works on YouTube, Twitch, Netflix, Jellyfin, Emby, and almost any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.", + "FEATURE_5_TITLE": "Self-Hostable & Docker-Ready", + "FEATURE_5_DESC": "Our official servers are free and fast, but you can take full ownership if you want to. Launch your own private relay server in seconds via Docker.", + "FEATURE_6_TITLE": "Instant Invites / 1-Click Join", + "FEATURE_6_DESC": "No IP addresses or passwords to exchange. Share a generated invite link with your friends to let them join your room automatically with a single click.", + + "COMP_TITLE": "KoalaSync vs. Teleparty", + "COMP_SUBTITLE": "See why open source, ad-free and privacy-first is the superior way to watch together.", + "COMP_COL_FEATURE": "Feature", + "COMP_FEAT_1_NAME": "Cost / Paywalls", + "COMP_FEAT_1_DESC": "Premium subscriptions, hidden fees or locked features.", + "COMP_FEAT_1_KOALA": "100% Free", + "COMP_FEAT_1_TELE": "Paid Tiers / Premium Locks", + "COMP_FEAT_2_NAME": "License / Code Auditable", + "COMP_FEAT_2_DESC": "Whether the source code is open and freely auditable.", + "COMP_FEAT_2_KOALA": "Open Source (MIT)", + "COMP_FEAT_2_TELE": "Proprietary", + "COMP_FEAT_3_NAME": "Self-Hosting", + "COMP_FEAT_3_DESC": "Ability to deploy your own private relay server.", + "COMP_FEAT_3_KOALA": "Yes (Docker-ready)", + "COMP_FEAT_3_TELE": "No", + "COMP_FEAT_4_NAME": "Privacy & Tracking", + "COMP_FEAT_4_DESC": "Registration requirements, tracking cookies and analytics.", + "COMP_FEAT_4_KOALA": "Zero-Persistence (RAM-only)", + "COMP_FEAT_4_TELE": "Google Analytics & Cookies", + "COMP_FEAT_5_NAME": "Site Compatibility", + "COMP_FEAT_5_DESC": "Supported websites and player compatibility.", + "COMP_FEAT_5_KOALA": "Almost any HTML5 Video", + "COMP_FEAT_5_TELE": "Supported sites only", + "COMP_FOOTNOTE_1": "Comparison state: May 2026.", + "COMP_FOOTNOTE_2": "Official Teleparty Premium pricing and supported networks details:", + "COMP_FOOTNOTE_3": "Teleparty privacy policies and tracking data collection:", + "COMP_FOOTNOTE_4": "Works on websites that allow script injections into standard HTML5 video tags. Websites with highly strict Content Security Policies (CSP), DRM copy protection, or heavily obfuscated player wrappers (like complex shadow DOMs) might restrict automated control or injection.", + + "STEPS_TITLE": "Getting Started", + "STEP_1_TITLE": "Install Extension", + "STEP_1_DESC": "Add KoalaSync to your browser from the Chrome Web Store, Firefox Add-ons, or download the latest developer ZIP from GitHub.", + "STEP_1_ILLUS_DESC": "Privacy-first video synchronizer", + "STEP_1_ILLUS_DL_CHROME": "Download for Chrome", + "STEP_1_ILLUS_DL_FIREFOX": "Download for Firefox", + "STEP_1_ILLUS_ACTIVE": "Extension Active", + "STEP_1_ILLUS_READY": "Ready to watch together!", + "STEP_2_TITLE": "Create a Room", + "STEP_2_DESC": "Open the extension popup and click '+ Create New Room'. KoalaSync automatically generates a secure Room ID and Password, joins it, and copies the invite link to your clipboard.", + "STEP_2_ILLUS_ROOM": "Room", + "STEP_2_ILLUS_SYNC": "Sync", + "STEP_2_ILLUS_SETTINGS": "Settings", + "STEP_2_ILLUS_CREATE": "+ Create New Room", + "STEP_2_ILLUS_MANUAL": "Manual Connect / Advanced", + "STEP_2_ILLUS_COPIED": "Invite link copied!", + "STEP_3_TITLE": "Share & Sync", + "STEP_3_DESC": "Send the invite link to your friends. Once they join, select your video tab and enjoy synchronized playback.", + "STEP_3_ILLUS_IN_SYNC": "IN SYNC", + + "SELF_TITLE": "For Self-Hosters", + "SELF_SUBTITLE": "Don't trust our server? Maintain full data sovereignty. Deploy your own private relay server in minutes.", + "SELF_MASCOT_ALT": "A cute koala sitting at a laptop deploying a Docker container for self-hosting", + "SELF_COPY_CODE": "Copy Code", + "SELF_GITHUB_PACKAGES": "View all image tags on GitHub Packages", + + "BOTTOM_TITLE": "Not convinced? See for yourself.", + "BOTTOM_SUBTITLE": "KoalaSync is 100% open source, ad-free and tracking-free. Audit our codebase on GitHub or install the browser extension directly.", + "BOTTOM_MASCOT_ALT": "A cute koala holding a GitHub repository page next to the GitHub mascot Octocat", + + "FOOTER_MIT": "Open source under the MIT License.", + "FOOTER_RAM": "No data is stored on our servers. Pure RAM-based relay.", + "FOOTER_LEGAL": "Legal Notice", + "FOOTER_PRIVACY": "Privacy Policy" +} diff --git a/website/locales/es.json b/website/locales/es.json new file mode 100644 index 0000000..cfa4a0c --- /dev/null +++ b/website/locales/es.json @@ -0,0 +1,118 @@ +{ + "LANG_CODE": "es", + "HTML_CLASS": "lang-es", + "CANONICAL_PATH": "es/", + "LANG_TOGGLE_URL": "../", + "LANG_TOGGLE_TEXT": "EN", + + "META_TITLE": "KoalaSync | Sincroniza Netflix, YouTube y cualquier video con amigos", + "META_DESCRIPTION": "Mira Netflix, YouTube, Twitch y cualquier video HTML5 en perfecta sincronización con amigos. Extensión de navegador gratuita y de código abierto para Chrome y Firefox. No se requiere registro.", + "OG_TITLE": "KoalaSync | Sincroniza Netflix, Emby, Jellyfin y casi cualquier video con amigos", + "OG_DESCRIPTION": "Mira Netflix, Emby, Jellyfin, YouTube, Twitch y casi cualquier video HTML5 en perfecta sincronización. Extensión de navegador de código abierto y respetuosa con la privacidad para Chrome y Firefox.", + "TWITTER_TITLE": "KoalaSync | Sincroniza Netflix, Emby, Jellyfin y casi cualquier video con amigos – Extensión de navegador", + "TWITTER_DESCRIPTION": "Mira Netflix, Emby, Jellyfin, YouTube, Twitch y casi cualquier video HTML5 en perfecta sincronización con amigos. Extensión de navegador de código abierto y respetuosa con la privacidad para Chrome y Firefox.", + + "NAV_FEATURES": "Características", + "NAV_HOW_IT_WORKS": "Cómo funciona", + + "HERO_TITLE": "Miren juntos.
Sincronización perfecta.", + "HERO_SUBTITLE": "Tu noche de películas a distancia sin retrasos. Sin registro ni recopilación de datos. Solo comparte un enlace y miren juntos.", + "HERO_MASCOT_ALT": "Un lindo koala de pie mirando hacia abajo a los botones de descarga", + "ADD_TO_CHROME": "Añadir a Chrome", + "ADD_TO_FIREFOX": "Añadir a Firefox", + + "COMPAT_HEADING": "Funciona en tus plataformas favoritas", + "COMPAT_MORE": "y muchas más", + "COMPAT_TOOLTIP": "Funciona en casi cualquier sitio con un elemento de video", + + "USE_CASES_TITLE": "Perfecto para cualquier ocasión", + "USE_CASES_SUBTITLE": "Ya sea cerca o lejos, KoalaSync une a las personas en torno a sus videos favoritos.", + "USE_CASE_1_ALT": "Dos lindos koalas sentados juntos compartiendo un cubo de palomitas de maíz", + "USE_CASE_1_TITLE": "Noche de películas con amigos", + "USE_CASE_1_DESC": "Sincroniza tus películas en tiempo real y habla por Discord, Zoom o tu aplicación de llamada de voz favorita. Es como estar en la misma habitación.", + "USE_CASE_2_ALT": "Un profesor koala presentando en una pantalla a dos estudiantes koala remotos", + "USE_CASE_2_TITLE": "Aprendizaje a distancia", + "USE_CASE_2_DESC": "Analiza tutoriales en línea, conferencias o transmisiones de capacitación de desarrolladores con compañeros o colegas. Pausa y discute pasos complejos en perfecta armonía.", + "USE_CASE_3_ALT": "Una linda pareja de koalas viendo juntos de forma remota; uno está sentado frente a una PC y el otro en la cama con una computadora portátil, con corazones volando entre ellos", + "USE_CASE_3_TITLE": "Relaciones a larga distancia", + "USE_CASE_3_DESC": "Reduce la distancia y disfruta de noches de citas. Experimenta cada giro de la trama, ríete de los mismos chistes y comparte momentos emotivos en el mismo milisegundo exacto.", + + "WHY_TITLE": "¿Por qué KoalaSync?", + "WHY_SUBTITLE": "Diseñado para una sincronización confiable, privacidad y una configuración sencilla.", + + "FEATURE_1_TITLE": "Control total / Sincronización instantánea", + "FEATURE_1_DESC": "Uno pausa, todos pausan. Uno avanza, todos siguen. Nuestro protocolo de sincronización en dos fases coordina la reproducción en tiempo real para todos los participantes.", + "FEATURE_2_TITLE": "Maratones sin fin", + "FEATURE_2_DESC": "Reproducción automática sincronizada. KoalaSync detecta automáticamente transiciones de episodios y suspende la reproducción hasta que todos los participantes hayan cargado el siguiente video.", + "FEATURE_3_TITLE": "Sin cuentas / Privacidad absoluta", + "FEATURE_3_DESC": "Sin registros, sin seguimiento, sin almacenamiento de datos. El servidor funciona completamente en RAM efímera y elimina tu sala tan pronto como sales.", + "FEATURE_4_TITLE": "Soporte universal HTML5", + "FEATURE_4_DESC": "Funciona en YouTube, Twitch, Netflix, Jellyfin, Emby y casi cualquier página web estándar que contenga un elemento de video HTML5. También es compatible con configuraciones personalizadas.", + "FEATURE_5_TITLE": "Auto-alojable y listo para Docker", + "FEATURE_5_DESC": "Nuestros servidores oficiales son gratuitos y rápidos, pero puedes tomar el control total si lo deseas. Inicia tu propio servidor de retransmisión privado en segundos a través de Docker.", + "FEATURE_6_TITLE": "Invitaciones al instante / Unirse en 1 clic", + "FEATURE_6_DESC": "Sin direcciones IP o contraseñas que intercambiar. Comparte un enlace de invitación generado para permitir que tus amigos se unan automáticamente a tu sala con un solo clic.", + + "COMP_TITLE": "KoalaSync vs Teleparty", + "COMP_SUBTITLE": "Descubre por qué una herramienta de código abierto, sin anuncios y respetuosa con la privacidad es la mejor opción para ver juntos.", + "COMP_COL_FEATURE": "Característica", + "COMP_FEAT_1_NAME": "Costo / Funciones de pago", + "COMP_FEAT_1_DESC": "Suscripciones premium, tarifas ocultas o funciones bloqueadas.", + "COMP_FEAT_1_KOALA": "100% Gratis", + "COMP_FEAT_1_TELE": "Suscripciones de pago / Bloqueos Premium", + "COMP_FEAT_2_NAME": "Licence / Code auditable", + "COMP_FEAT_2_DESC": "Si el código fuente es abierto y libremente auditable.", + "COMP_FEAT_2_KOALA": "Código Abierto (MIT)", + "COMP_FEAT_2_TELE": "Propietario", + "COMP_FEAT_3_NAME": "Auto-alojamiento", + "COMP_FEAT_3_DESC": "Capacidad para desplegar tu propio servidor de retransmisión privado.", + "COMP_FEAT_3_KOALA": "Sí (listo para Docker)", + "COMP_FEAT_3_TELE": "No", + "COMP_FEAT_4_NAME": "Privacidad y Seguimiento", + "COMP_FEAT_4_DESC": "Requisitos de registro, cookies de seguimiento y análisis.", + "COMP_FEAT_4_KOALA": "Sin persistencia (solo RAM)", + "COMP_FEAT_4_TELE": "Google Analytics y Cookies", + "COMP_FEAT_5_NAME": "Compatibilidad del sitio", + "COMP_FEAT_5_DESC": "Sitios web compatibles y compatibilidad de reproductores.", + "COMP_FEAT_5_KOALA": "Casi cualquier video HTML5", + "COMP_FEAT_5_TELE": "Solo sitios compatibles", + "COMP_FOOTNOTE_1": "Estado de la comparación: mayo de 2026.", + "COMP_FOOTNOTE_2": "Detalles oficiales de precios de Teleparty Premium y redes compatibles:", + "COMP_FOOTNOTE_3": "Políticas de privacidad y recopilación de datos de seguimiento de Teleparty:", + "COMP_FOOTNOTE_4": "Funciona en sitios web que permiten inyecciones de scripts en etiquetas de video HTML5 estándar. Los sitios con políticas de seguridad de contenido (CSP) muy estrictas, protección de copia DRM o contenedores de reproductores fuertemente ocultos (como DOMs de sombra complejos) pueden restringir el control automatizado o la inyección.", + + "STEPS_TITLE": "Cómo empezar", + "STEP_1_TITLE": "Instalar la extensión", + "STEP_1_DESC": "Añade KoalaSync a tu navegador desde Chrome Web Store, complementos de Firefox o descarga el último archivo ZIP de desarrollador desde GitHub.", + "STEP_1_ILLUS_DESC": "Sincronizador de video respetuoso con la privacidad", + "STEP_1_ILLUS_DL_CHROME": "Descargar para Chrome", + "STEP_1_ILLUS_DL_FIREFOX": "Descargar para Firefox", + "STEP_1_ILLUS_ACTIVE": "Extensión activa", + "STEP_1_ILLUS_READY": "¡Listo para ver juntos!", + "STEP_2_TITLE": "Crear una sala", + "STEP_2_DESC": "Abre la ventana de la extensión y haz clic en '+ Crear nueva sala'. KoalaSync genera automáticamente un identificador de sala y una contraseña seguros, se conecta y copia el enlace de invitación a tu portapapeles.", + "STEP_2_ILLUS_ROOM": "Sala", + "STEP_2_ILLUS_SYNC": "Sincro", + "STEP_2_ILLUS_SETTINGS": "Opciones", + "STEP_2_ILLUS_CREATE": "+ Crear nueva sala", + "STEP_2_ILLUS_MANUAL": "Conexión manual / Avanzado", + "STEP_2_ILLUS_COPIED": "¡Enlace de invitación copiado!", + "STEP_3_TITLE": "Compartir y Sincronizar", + "STEP_3_DESC": "Envía el enlace de invitación a tus amigos. Tan pronto como se unan, selecciona tu pestaña de video y disfruta de la reproducción sincronizada.", + "STEP_3_ILLUS_IN_SYNC": "SINCRONIZADO", + + "SELF_TITLE": "Para auto-alojadores", + "SELF_SUBTITLE": "¿No confías en nuestro servidor? Mantén la soberanía total de los datos. Despliega tu propio servidor de retransmisión en minutos.", + "SELF_MASCOT_ALT": "Un lindo koala sentado frente a una computadora portátil desplegando un contenedor Docker para auto-alojamiento", + "SELF_COPY_CODE": "Copiar código", + "SELF_GITHUB_PACKAGES": "Ver todas las etiquetas de imágenes en GitHub Packages", + + "BOTTOM_TITLE": "¿Aún no te convence? Compruébalo tú mismo.", + "BOTTOM_SUBTITLE": "KoalaSync es 100% de código abierto, sin anuncios y sin seguimiento. Audita nuestra base de código en GitHub o instala la extensión del navegador directamente.", + "BOTTOM_MASCOT_ALT": "Un lindo koala sosteniendo una página de repositorio de GitHub junto a Octocat, la mascota de GitHub", + + "FOOTER_MIT": "Código abierto bajo la Licencia MIT.", + "FOOTER_RAM": "No se almacenan datos en nuestros servidores. Retransmisión solo en RAM.", + "FOOTER_LEGAL": "Legal Notice", + "FOOTER_PRIVACY": "Privacy Policy" +} diff --git a/website/locales/fr.json b/website/locales/fr.json new file mode 100644 index 0000000..241af42 --- /dev/null +++ b/website/locales/fr.json @@ -0,0 +1,118 @@ +{ + "LANG_CODE": "fr", + "HTML_CLASS": "lang-fr", + "CANONICAL_PATH": "fr/", + "LANG_TOGGLE_URL": "../", + "LANG_TOGGLE_TEXT": "EN", + + "META_TITLE": "KoalaSync | Synchronisez Netflix, YouTube et n'importe quelle vidéo avec vos amis", + "META_DESCRIPTION": "Regardez Netflix, YouTube, Twitch et n'importe quelle vidéo HTML5 en parfaite synchronisation avec vos amis. Extension de navigateur gratuite et open-source pour Chrome et Firefox. Aucune inscription requise.", + "OG_TITLE": "KoalaSync | Synchronisez Netflix, Emby, Jellyfin et presque toutes les vidéos avec vos amis", + "OG_DESCRIPTION": "Regardez Netflix, Emby, Jellyfin, YouTube, Twitch et presque n'importe quelle vidéo HTML5 en parfaite synchronisation. Extension de navigateur open-source et respectueuse de la vie privée pour Chrome et Firefox.", + "TWITTER_TITLE": "KoalaSync | Synchronisez Netflix, Emby, Jellyfin et presque toutes les vidéos avec vos amis – Extension de navigateur", + "TWITTER_DESCRIPTION": "Regardez Netflix, Emby, Jellyfin, YouTube, Twitch et presque n'importe quelle vidéo HTML5 en parfaite synchronisation avec vos amis. Extension de navigateur open-source et respectueuse de la vie privée pour Chrome et Firefox.", + + "NAV_FEATURES": "Fonctionnalités", + "NAV_HOW_IT_WORKS": "Comment ça marche", + + "HERO_TITLE": "Regardez ensemble.
Synchronisation parfaite.", + "HERO_SUBTITLE": "Votre soirée cinéma à distance sans décalage. Pas d'inscription, pas de collecte de données. Partagez simplement un lien et regardez ensemble.", + "HERO_MASCOT_ALT": "Un koala mignon debout et regardant vers le bas les boutons de téléchargement", + "ADD_TO_CHROME": "Ajouter à Chrome", + "ADD_TO_FIREFOX": "Ajouter à Firefox", + + "COMPAT_HEADING": "Fonctionne sur vos plateformes préférées", + "COMPAT_MORE": "et beaucoup d'autres", + "COMPAT_TOOLTIP": "Fonctionne sur presque tous les sites avec un élément vidéo", + + "USE_CASES_TITLE": "Parfait pour toutes les occasions", + "USE_CASES_SUBTITLE": "Que ce soit de près ou de loin, KoalaSync rassemble les gens autour de leurs vidéos préférées.", + "USE_CASE_1_ALT": "Deux koalas mignons assis ensemble et partageant un seau de pop-corn", + "USE_CASE_1_TITLE": "Soirée cinéma entre amis", + "USE_CASE_1_DESC": "Synchronisez vos films en temps réel et parlez via Discord, Zoom ou votre application d'appel vocal préférée. C'est comme si vous étiez dans la même pièce.", + "USE_CASE_2_ALT": "Un professeur koala faisant une présentation sur un écran à deux élèves koalas à distance", + "USE_CASE_2_TITLE": "Apprentissage à distance", + "USE_CASE_2_DESC": "Analysez des tutoriels en ligne, des conférences ou des flux de formation de développeurs avec des camarades ou des collègues. Faites une pause et discutez des étapes complexes en parfaite harmonie.", + "USE_CASE_3_ALT": "Un couple de koalas mignons regardant ensemble à distance ; l'un est assis devant un PC et l'autre est au lit avec un ordinateur portable, avec des cœurs volants entre eux", + "USE_CASE_3_TITLE": "Relations à distance", + "USE_CASE_3_DESC": "Comblez la distance et profitez de soirées en tête-à-tête. Vivez chaque rebondissement, riez des mêmes blagues et partagez des moments émotionnels à la milliseconde près.", + + "WHY_TITLE": "Pourquoi KoalaSync ?", + "WHY_SUBTITLE": "Conçu pour une synchronisation fiable, le respect de la vie privée et une configuration facile.", + + "FEATURE_1_TITLE": "Contrôle total / Synchro instantanée", + "FEATURE_1_DESC": "Un joueur met en pause, tout le monde met en pause. Un joueur avance, tout le monde suit. Notre protocole de synchronisation en deux phases coordonne la lecture en temps réel pour tous les participants.", + "FEATURE_2_TITLE": "Binge-watching sans fin", + "FEATURE_2_DESC": "Lecture automatique synchronisée. KoalaSync détecte automatiquement les transitions d'épisodes et suspend la lecture jusqu'à ce que tous les participants aient chargé la vidéo suivante.", + "FEATURE_3_TITLE": "Aucun compte / Vie privée garantie", + "FEATURE_3_DESC": "Pas d'inscription, pas de suivi, pas de stockage de données. Le serveur fonctionne entièrement dans une RAM éphémère et supprime votre salon dès votre départ.", + "FEATURE_4_TITLE": "Support HTML5 universel", + "FEATURE_4_DESC": "Fonctionne sur YouTube, Twitch, Netflix, Jellyfin, Emby et presque n'importe quelle page web standard contenant un élément vidéo HTML5. Également compatible avec les installations personnalisées.", + "FEATURE_5_TITLE": "Hébergeable soi-même & prêt pour Docker", + "FEATURE_5_DESC": "Nos serveurs officiels sont gratuits et rapides, mais vous pouvez prendre le contrôle total si vous le souhaitez. Lancez votre propre serveur relais privé en quelques secondes via Docker.", + "FEATURE_6_TITLE": "Invitations instantanées / Rejoindre en 1 clic", + "FEATURE_6_DESC": "Pas d'adresses IP ou de mots de passe à échanger. Partagez un lien d'invitation généré pour permettre à vos amis de rejoindre automatiquement votre salon en un seul clic.", + + "COMP_TITLE": "KoalaSync vs Teleparty", + "COMP_SUBTITLE": "Découvrez pourquoi un outil open-source, sans publicité et respectueux de la vie privée est le meilleur choix pour regarder ensemble.", + "COMP_COL_FEATURE": "Fonctionnalité", + "COMP_FEAT_1_NAME": "Coût / Limites payantes", + "COMP_FEAT_1_DESC": "Abonnements premium, frais cachés ou fonctionnalités verrouillées.", + "COMP_FEAT_1_KOALA": "100% Gratuit", + "COMP_FEAT_1_TELE": "Abonnements payants / Verrous Premium", + "COMP_FEAT_2_NAME": "Licence / Code auditable", + "COMP_FEAT_2_DESC": "Si le code source est ouvert et librement auditable.", + "COMP_FEAT_2_KOALA": "Open Source (MIT)", + "COMP_FEAT_2_TELE": "Propriétaire", + "COMP_FEAT_3_NAME": "Auto-hébergement", + "COMP_FEAT_3_DESC": "Possibilité de déployer votre propre serveur relais privé.", + "COMP_FEAT_3_KOALA": "Oui (prêt pour Docker)", + "COMP_FEAT_3_TELE": "Non", + "COMP_FEAT_4_NAME": "Vie privée & Suivi", + "COMP_FEAT_4_DESC": "Obligation d'inscription, cookies de suivi et analyses.", + "COMP_FEAT_4_KOALA": "Zéro persistance (RAM uniquement)", + "COMP_FEAT_4_TELE": "Google Analytics & Cookies", + "COMP_FEAT_5_NAME": "Compatibilité des sites", + "COMP_FEAT_5_DESC": "Sites web pris en charge et compatibilité des lecteurs.", + "COMP_FEAT_5_KOALA": "Presque toutes les vidéos HTML5", + "COMP_FEAT_5_TELE": "Sites pris en charge uniquement", + "COMP_FOOTNOTE_1": "État de la comparaison : mai 2026.", + "COMP_FOOTNOTE_2": "Détails sur les tarifs officiels de Teleparty Premium et les réseaux pris en charge :", + "COMP_FOOTNOTE_3": "Politiques de confidentialité et collecte de données de suivi de Teleparty :", + "COMP_FOOTNOTE_4": "Fonctionne sur les sites web qui autorisent les injections de scripts dans les balises vidéo HTML5 standard. Les sites avec des politiques de sécurité du contenu (CSP) très strictes, une protection contre la copie DRM ou des conteneurs de lecteurs fortement obscurcis (comme des DOM fantômes complexes) peuvent restreindre le contrôle automatisé ou l'injection.", + + "STEPS_TITLE": "Pour commencer", + "STEP_1_TITLE": "Installer l'extension", + "STEP_1_DESC": "Ajoutez KoalaSync à votre navigateur depuis le Chrome Web Store, les modules complémentaires de Firefox, ou téléchargez le dernier fichier ZIP développeur depuis GitHub.", + "STEP_1_ILLUS_DESC": "Synchronisateur vidéo respectueux de la vie privée", + "STEP_1_ILLUS_DL_CHROME": "Télécharger pour Chrome", + "STEP_1_ILLUS_DL_FIREFOX": "Télécharger pour Firefox", + "STEP_1_ILLUS_ACTIVE": "Extension active", + "STEP_1_ILLUS_READY": "Prêt à regarder ensemble !", + "STEP_2_TITLE": "Créer un salon", + "STEP_2_DESC": "Ouvrez la fenêtre de l'extension et cliquez sur '+ Créer un nouveau salon'. KoalaSync génère automatiquement un identifiant de salon et un mot de passe sécurisés, s'y connecte et copie le lien d'invitation dans votre presse-papiers.", + "STEP_2_ILLUS_ROOM": "Salon", + "STEP_2_ILLUS_SYNC": "Synchro", + "STEP_2_ILLUS_SETTINGS": "Options", + "STEP_2_ILLUS_CREATE": "+ Créer un nouveau salon", + "STEP_2_ILLUS_MANUAL": "Connexion manuelle / Avancé", + "STEP_2_ILLUS_COPIED": "Lien d'invitation copié !", + "STEP_3_TITLE": "Partager & Synchroniser", + "STEP_3_DESC": "Envoyez le lien d'invitation à vos amis. Dès qu'ils rejoignent, sélectionnez votre onglet vidéo et profitez de la lecture synchronisée.", + "STEP_3_ILLUS_IN_SYNC": "SYNCHRONISÉ", + + "SELF_TITLE": "Pour l'auto-hébergement", + "SELF_SUBTITLE": "Vous ne faites pas confiance à notre serveur ? Conservez votre souveraineté totale sur les données. Déployez votre propre serveur relais en quelques minutes.", + "SELF_MASCOT_ALT": "Un koala mignon assis devant un ordinateur portable déployant un conteneur Docker pour l'auto-hébergement", + "SELF_COPY_CODE": "Copier le code", + "SELF_GITHUB_PACKAGES": "Voir tous les tags d'images sur GitHub Packages", + + "BOTTOM_TITLE": "Pas encore convaincu ? Voyez par vous-même.", + "BOTTOM_SUBTITLE": "KoalaSync est 100% open source, sans publicité et sans suivi. Auditez notre base de code sur GitHub ou installez directement l'extension de navigateur.", + "BOTTOM_MASCOT_ALT": "Un koala mignon tenant une page de dépôt GitHub à côté d'Octocat, la mascotte de GitHub", + + "FOOTER_MIT": "Open source sous licence MIT.", + "FOOTER_RAM": "Aucune donnée n'est stockée sur nos serveurs. Relais uniquement en RAM.", + "FOOTER_LEGAL": "Legal Notice", + "FOOTER_PRIVACY": "Privacy Policy" +} diff --git a/website/locales/pt-BR.json b/website/locales/pt-BR.json new file mode 100644 index 0000000..e209381 --- /dev/null +++ b/website/locales/pt-BR.json @@ -0,0 +1,120 @@ +{ + "LANG_CODE": "pt-BR", + "HTML_CLASS": "lang-pt-br", + "CANONICAL_PATH": "pt-BR/", + "LANG_TOGGLE_URL": "../", + "LANG_TOGGLE_TEXT": "EN", + + "META_TITLE": "KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com amigos", + "META_DESCRIPTION": "Assista à Netflix, YouTube, Twitch e qualquer vídeo HTML5 em perfeita sincronia com amigos. Extensão de navegador gratuita e de código aberto para Chrome e Firefox. Sem necessidade de registro.", + "OG_TITLE": "KoalaSync | Sincronize Netflix, Emby, Jellyfin e quase qualquer vídeo com amigos", + "OG_DESCRIPTION": "Assista à Netflix, Emby, Jellyfin, YouTube, Twitch e quase qualquer vídeo HTML5 em perfeita sincronia. Extensão de navegador de código aberto e focada em privacidade para Chrome e Firefox.", + "TWITTER_TITLE": "KoalaSync | Sincronize Netflix, Emby, Jellyfin e quase qualquer vídeo com amigos – Extensão de navegador", + "TWITTER_DESCRIPTION": "Assista à Netflix, Emby, Jellyfin, YouTube, Twitch e quase qualquer vídeo HTML5 em perfeita sincronia com amigos. Extensão de navegador de código aberto e focada em privacidade para Chrome e Firefox.", + + "NAV_FEATURES": "Recursos", + "NAV_HOW_IT_WORKS": "Como funciona", + + "HERO_TITLE": "Assistam juntos.
Sincronia perfeita.", + "HERO_SUBTITLE": "Sua noite de cinema à distância sem atrasos. Sem registro, sem coleta de dados. Apenas compartilhe o link e assistam juntos.", + "HERO_MASCOT_ALT": "Um lindo coala em pé olhando para baixo em direção aos botões de download", + "ADD_TO_CHROME": "Adicionar ao Chrome", + "ADD_TO_FIREFOX": "Adicionar ao Firefox", + + "COMPAT_HEADING": "Funciona nas suas plataformas favoritas", + "COMPAT_MORE": "e muitas mais", + "COMPAT_TOOLTIP": "Funciona em quase qualquer site com um elemento de vídeo", + + "USE_CASES_TITLE": "Perfeito para qualquer ocasião", + "USE_CASES_SUBTITLE": "Seja perto ou longe, o KoalaSync une as pessoas em torno de seus vídeos favoritos.", + "USE_CASE_1_ALT": "Dois coalas fofos sentados juntos e compartilhando um balde de pipoca", + "USE_CASE_1_TITLE": "Noite de cinema com amigos", + "USE_CASE_1_DESC": "Sincronize seus filmes em tempo real e converse pelo Discord, Zoom ou seu aplicativo de chamada de voz favorito. É como se estivessem na mesma sala.", + "USE_CASE_2_ALT": "Um professor coala fazendo uma apresentação em uma tela para dois alunos coala remotos", + "USE_CASE_2_TITLE": "Aprendizado remoto", + "USE_CASE_2_DESC": "Analise tutoriais online, palestras ou transmissões de treinamento de desenvolvedores junto com colegas de classe ou de trabalho. Pause e discuta etapas complexas em perfeita harmonia.", + "USE_CASE_3_ALT": "Um casal de coalas fofos assistindo juntos remotamente; um está no PC e o outro deitado com um laptop, com corações voando entre eles", + "USE_CASE_3_TITLE": "Relacionamentos à distância", + "USE_CASE_3_DESC": "Aproxime a distância e aproveite encontros virtuais. Experimente cada reviravolta, ria das mesmas piadas e compartilhe momentos emocionante no mesmo milissegundo.", + + "WHY_TITLE": "Por que o KoalaSync?", + "WHY_SUBTITLE": "Desenvolvido para uma sincronização confiável, privacidade em primeiro lugar e configuração simples.", + + "FEATURE_1_TITLE": "Controle total / Sincronia instantânea", + "FEATURE_1_DESC": "Um pausa, todos pausam. Um avança, todos seguem. Nosso protocolo de sincronização em duas fases coordena a reprodução em tempo real entre todos os participantes.", + "FEATURE_2_TITLE": "Maratones sem fim", + "FEATURE_2_DESC": "Reprodução automática sincronizada. O KoalaSync detecta automaticamente transições de episódios e pausa a reprodução até que todos os participantes tenham carregado o próximo vídeo.", + "FEATURE_3_TITLE": "Sem contas / Privacidade absoluta", + "FEATURE_3_DESC": "Sem registro, sem rastreamento, sem armazenamento de dados. O servidor roda inteiramente em memória RAM efêmera e limpa sua sala assim que você sai.", + "FEATURE_4_TITLE": "Suporte universal a HTML5", + "FEATURE_4_DESC": "Funciona no YouTube, Twitch, Netflix, Jellyfin, Emby e em quase qualquer página web padrão com um elemento de vídeo HTML5. Também é compatível com servidores próprios.", + "FEATURE_5_TITLE": "Auto-hospedável e pronto para Docker", + "FEATURE_5_DESC": "Nossos servidores oficiais são rápidos e gratuitos, mas você pode ter controle total se desejar. Inicie seu próprio servidor de retransmissão privado em segundos via Docker.", + "FEATURE_6_TITLE": "Convites instantâneos / Entrada em 1 clique", + "FEATURE_6_DESC": "Sem troca de endereços IP ou senhas. Compartilhe um link de convite gerado para que seus amigos entrem automaticamente na sua sala com um único clique.", + + "COMP_TITLE": "KoalaSync vs Teleparty", + "COMP_SUBTITLE": "Veja por que o código aberto, sem anúncios e com privacidade em primeiro lugar é a melhor escolha para assistirem juntos.", + "COMP_COL_FEATURE": "Recurso", + "COMP_FEAT_1_NAME": "Custo / Bloqueios de recursos", + "COMP_FEAT_1_DESC": "Assinaturas premium, taxas ocultas ou recursos bloqueados.", + "COMP_FEAT_1_KOALA": "100% Gratuito", + "COMP_FEAT_1_TELE": "Assinaturas pagas / Bloqueios Premium", + "COMP_FEAT_2_NAME": "Licença / Código auditável", + "COMP_FEAT_2_DESC": "Se o código-fonte é aberto e de livre auditoria.", + "COMP_FEAT_2_KOALA": "Código Aberto (MIT)", + "COMP_FEAT_2_TELE": "Proprietário", + "COMP_FEAT_3_NAME": "Auto-hospedagem", + "COMP_FEAT_3_DESC": "Capacidade de implantar seu próprio servidor de retransmissão privado.", + "COMP_FEAT_3_KOALA": "Sim (pronto para Docker)", + "COMP_FEAT_3_TELE": "Não", + "COMP_FEAT_4_NAME": "Privacidade e Rastreamento", + "COMP_FEAT_4_DESC": "Exigências de registro, cookies de rastreamento e análises.", + "COMP_FEAT_4_KOALA": "Sem persistência (apenas RAM)", + "COMP_FEAT_4_TELE": "Google Analytics e Cookies", + "COMP_FEAT_5_NAME": "Compatibilidade de sites", + "COMP_FEAT_5_DESC": "Sites suportados e compatibilidade do player.", + "COMP_FEAT_5_KOALA": "Quase qualquer vídeo HTML5", + "COMP_FEAT_5_TELE": "Apenas sites suportados", + "COMP_FOOTNOTE_1": "Estado da comparação: maio de 2026.", + "COMP_FOOTNOTE_2": "Preços oficiais do Teleparty Premium e detalhes das redes suportadas:", + "COMP_FOOTNOTE_3": "Políticas de privacidade do Teleparty e coleta de dados de rastreamento:", + "COMP_FOOTNOTE_4": "Funciona em sites que permitem injeções de scripts em tags de vídeo HTML5 padrão. Sites com políticas de segurança de conteúdo (CSP) muito rígidas, proteção contra cópia DRM ou contêineres de player fortemente ocultos (como DOMs de sombra complexos) podem limitar o controle automatizado ou a injeção.", + + "STEPS_TITLE": "Como começar", + "STEP_1_TITLE": "Instalar a extensão", + "STEP_1_DESC": "Adicione o KoalaSync ao seu navegador a partir da Chrome Web Store, Firefox Add-ons ou baixe o arquivo ZIP de desenvolvedor mais recente do GitHub.", + "STEP_1_ILLUS_DESC": "Sincronizador de vídeo focado em privacidade", + "STEP_1_ILLUS_DL_CHROME": "Baixar para o Chrome", + "STEP_1_ILLUS_DL_FIREFOX": "Baixar para o Firefox", + "STEP_1_ILLUS_ACTIVE": "Extensão ativa", + "STEP_1_ILLUS_READY": "Prontos para assistir juntos!", + + "STEP_2_TITLE": "Criar uma sala", + "STEP_2_DESC": "Abra a janela da extensão e clique em '+ Criar nova sala'. O KoalaSync gera automaticamente um ID de sala e senha seguros, entra nela e copia o link de convite para a sua área de transferência.", + "STEP_2_ILLUS_ROOM": "Sala", + "STEP_2_ILLUS_SYNC": "Sincro", + "STEP_2_ILLUS_SETTINGS": "Opções", + "STEP_2_ILLUS_CREATE": "+ Criar nova sala", + "STEP_2_ILLUS_MANUAL": "Conexão manual / Avançado", + "STEP_2_ILLUS_COPIED": "Link de convite copiado!", + + "STEP_3_TITLE": "Compartilhar e Sincronizar", + "STEP_3_DESC": "Envie o link de convite para seus amigos. Assim que eles entrarem, selecione a aba do seu vídeo e aproveite a reprodução sincronizada.", + "STEP_3_ILLUS_IN_SYNC": "SINCRONIZADO", + + "SELF_TITLE": "Para quem hospeda próprio", + "SELF_SUBTITLE": "Não confia no nosso servidor? Mantenha a soberania total dos seus dados. Implante seu próprio servidor de retransmissão em minutos.", + "SELF_MASCOT_ALT": "Um coala fofo sentado à frente de um laptop implantando um contêiner Docker para hospedagem própria", + "SELF_COPY_CODE": "Copiar código", + "SELF_GITHUB_PACKAGES": "Ver todas as tags de imagens no GitHub Packages", + + "BOTTOM_TITLE": "Ainda não se convenceu? Veja por si mesmo.", + "BOTTOM_SUBTITLE": "O KoalaSync é 100% de código aberto, livre de anúncios e sem rastreamento. Audite nosso código no GitHub ou instale a extensão do navegador diretamente.", + "BOTTOM_MASCOT_ALT": "Um coala fofo segurando uma página de repositório do GitHub ao lado de Octocat, a mascotte do GitHub", + + "FOOTER_MIT": "Código aberto sob a Licença MIT.", + "FOOTER_RAM": "Nenhum dado é armazenado em nossos servidores. Retransmissão apenas em RAM.", + "FOOTER_LEGAL": "Legal Notice", + "FOOTER_PRIVACY": "Privacy Policy" +} diff --git a/website/locales/ru.json b/website/locales/ru.json new file mode 100644 index 0000000..0e96901 --- /dev/null +++ b/website/locales/ru.json @@ -0,0 +1,120 @@ +{ + "LANG_CODE": "ru", + "HTML_CLASS": "lang-ru", + "CANONICAL_PATH": "ru/", + "LANG_TOGGLE_URL": "../", + "LANG_TOGGLE_TEXT": "EN", + + "META_TITLE": "KoalaSync | Синхронизация Netflix, YouTube и любого видео с друзьями", + "META_DESCRIPTION": "Смотрите Netflix, YouTube, Twitch и любые HTML5-видео в идеальной синхронизации с друзьями. Бесплатное расширение с открытым исходным кодом для Chrome и Firefox. Регистрация не требуется.", + "OG_TITLE": "KoalaSync | Синхронизация Netflix, Emby, Jellyfin и почти любого видео с друзьями", + "OG_DESCRIPTION": "Смотрите Netflix, Emby, Jellyfin, YouTube, Twitch и почти любое HTML5-видео в идеальной синхронизации. Открытое и ориентированное на конфиденциальность расширение для Chrome и Firefox.", + "TWITTER_TITLE": "KoalaSync | Синхронизация Netflix, Emby, Jellyfin и почти любого видео с друзьями – Расширение", + "TWITTER_DESCRIPTION": "Смотрите Netflix, Emby, Jellyfin, YouTube, Twitch и почти любое HTML5-видео в идеальной синхронизации с друзьями. Открытое и конфиденциальное расширение для Chrome и Firefox.", + + "NAV_FEATURES": "Функции", + "NAV_HOW_IT_WORKS": "Как это работает", + + "HERO_TITLE": "Смотрите вместе.
Синхронно на 100%.", + "HERO_SUBTITLE": "Ваш киновечер на расстоянии без задержек. Без регистрации и сбора данных. Просто поделитесь ссылкой и смотрите вместе.", + "HERO_MASCOT_ALT": "Милый коала стоит и смотрит вниз на кнопки загрузки", + "ADD_TO_CHROME": "Установить в Chrome", + "ADD_TO_FIREFOX": "Установить в Firefox", + + "COMPAT_HEADING": "Работает на ваших любимых платформах", + "COMPAT_MORE": "и многих других", + "COMPAT_TOOLTIP": "Работает почти на любом сайте с видеоэлементом", + + "USE_CASES_TITLE": "Идеально для любого случая", + "USE_CASES_SUBTITLE": "Близко или далеко — KoalaSync объединяет людей за просмотром любимых видео.", + "USE_CASE_1_ALT": "Два милых коалы сидят вместе и делят ведро попкорна", + "USE_CASE_1_TITLE": "Киноночь с друзьями", + "USE_CASE_1_DESC": "Синхронизируйте фильмы в реальном времени и общайтесь в Discord, Zoom или вашей любимой программе. Это ощущается так, будто вы сидите в одной комнате.", + "USE_CASE_2_ALT": "Профессор коала проводит презентацию на экране для двух удаленных студентов коал", + "USE_CASE_2_TITLE": "Удаленное обучение", + "USE_CASE_2_DESC": "Разбирайте обучающие видео, лекции или стримы для разработчиков вместе с однокурсниками или коллегами. Ставьте на паузу и обсуждайте сложные шаги в идеальном согласии.", + "USE_CASE_3_ALT": "Милая пара коал смотрит видео удаленно; один сидит за ПК, другая в постели с ноутбуком, между ними летают сердечки", + "USE_CASE_3_TITLE": "Отношения на расстоянии", + "USE_CASE_3_DESC": "Сократите расстояние и наслаждайтесь свиданиями. Переживайте каждый поворот сюжета, смейтесь над шутками и делитесь эмоциями в одну и ту же миллисекунду.", + + "WHY_TITLE": "Почему KoalaSync?", + "WHY_SUBTITLE": "Создан для надежной синхронизации, конфиденциальности и простой настройки.", + + "FEATURE_1_TITLE": "Полный контроль и мгновенный синхро", + "FEATURE_1_DESC": "Один ставит на паузу — пауза у всех. Один перематывает — все перематывают. Наш двухфазный протокол координирует воспроизведение в реальном времени у всех участников.", + "FEATURE_2_TITLE": "Бесконечные марафоны", + "FEATURE_2_DESC": "Синхронное автовоспроизведение. KoalaSync автоматически определяет переход на следующую серию и ждет, пока она загрузится у всех участников.", + "FEATURE_3_TITLE": "Без аккаунтов и хранения данных", + "FEATURE_3_DESC": "Без регистрации, без отслеживания, без следов на диске. Сервер работает исключительно во временной RAM и полностью стирает вашу комнату при выходе.", + "FEATURE_4_TITLE": "Универсальная поддержка HTML5", + "FEATURE_4_DESC": "Работает на YouTube, Twitch, Netflix, Jellyfin, Emby и почти на любой веб-странице со стандартным HTML5-видеотегом. Подходит для локальных медиатек.", + "FEATURE_5_TITLE": "Self-Hosted и готов к Docker", + "FEATURE_5_DESC": "Наши официальные серверы бесплатны и быстры, но вы можете получить полный контроль. Запустите свой собственный приватный ретранслятор в Docker за секунды.", + "FEATURE_6_TITLE": "Быстрые приглашения в 1 клик", + "FEATURE_6_DESC": "Не нужно обмениваться IP-адресами или паролями. Отправьте сгенерированную ссылку друзьям, чтобы они автоматически вошли в комнату в один клик.", + + "COMP_TITLE": "KoalaSync против Teleparty", + "COMP_SUBTITLE": "Узнайте, почему открытый исходный код, отсутствие рекламы и конфиденциальность делают нас лучшим выбором для совместного просмотра.", + "COMP_COL_FEATURE": "Функция", + "COMP_FEAT_1_NAME": "Стоимость и ограничения", + "COMP_FEAT_1_DESC": "Платные подписки, скрытые платежи или заблокированные функции.", + "COMP_FEAT_1_KOALA": "100% Бесплатно", + "COMP_FEAT_1_TELE": "Платные тарифы и ограничения", + "COMP_FEAT_2_NAME": "Лицензия и аудит кода", + "COMP_FEAT_2_DESC": "Открыт ли исходный код для свободного изучения и аудита безопасности.", + "COMP_FEAT_2_KOALA": "Open Source (MIT)", + "COMP_FEAT_2_TELE": "Проприетарный", + "COMP_FEAT_3_NAME": "Self-Hosting", + "COMP_FEAT_3_DESC": "Возможность развернуть свой собственный приватный сервер.", + "COMP_FEAT_3_KOALA": "Да (готов к Docker)", + "COMP_FEAT_3_TELE": "Нет", + "COMP_FEAT_4_NAME": "Конфиденциальность и трекеры", + "COMP_FEAT_4_DESC": "Обязательная регистрация, отслеживающие файлы cookie и аналитика.", + "COMP_FEAT_4_KOALA": "Без сохранения (только RAM)", + "COMP_FEAT_4_TELE": "Google Analytics и Cookies", + "COMP_FEAT_5_NAME": "Совместимость с сайтами", + "COMP_FEAT_5_DESC": "Поддерживаемые веб-ресурсы и совместимость плееров.", + "COMP_FEAT_5_KOALA": "Почти любое HTML5 видео", + "COMP_FEAT_5_TELE": "Только поддерживаемые сайты", + "COMP_FOOTNOTE_1": "Состояние сравнения: май 2026.", + "COMP_FOOTNOTE_2": "Официальные цены Teleparty Premium и поддерживаемые сети:", + "COMP_FOOTNOTE_3": "Политика конфиденциальности Teleparty и сбор трекеров:", + "COMP_FOOTNOTE_4": "Работает на сайтах, разрешающих инъекцию скриптов в стандартные видеотеги HTML5. Сайты с очень строгой политикой безопасности контента (CSP), защитой от копирования DRM или сильно обфусцированными оболочками плееров (например, сложные теневые DOM) могут блокировать автоматическое управление.", + + "STEPS_TITLE": "С чего начать", + "STEP_1_TITLE": "Установить расширение", + "STEP_1_DESC": "Добавьте KoalaSync в браузер из Chrome Web Store, Firefox Add-ons or скачайте последний ZIP-архив разработчика с GitHub.", + "STEP_1_ILLUS_DESC": "Ориентированный на конфиденциальность синхронизатор видео", + "STEP_1_ILLUS_DL_CHROME": "Скачать для Chrome", + "STEP_1_ILLUS_DL_FIREFOX": "Скачать для Firefox", + "STEP_1_ILLUS_ACTIVE": "Расширение активно", + "STEP_1_ILLUS_READY": "Готовы смотреть вместе!", + + "STEP_2_TITLE": "Создать комнату", + "STEP_2_DESC": "Откройте меню расширения и нажмите «+ Создать новую комнату». KoalaSync автоматически сгенерирует ID и пароль, войдет в нее и скопирует ссылку-приглашение.", + "STEP_2_ILLUS_ROOM": "Комната", + "STEP_2_ILLUS_SYNC": "Синхро", + "STEP_2_ILLUS_SETTINGS": "Опции", + "STEP_2_ILLUS_CREATE": "+ Создать комнату", + "STEP_2_ILLUS_MANUAL": "Ручное подключение / Дополнительно", + "STEP_2_ILLUS_COPIED": "Ссылка скопирована!", + + "STEP_3_TITLE": "Поделиться и смотреть", + "STEP_3_DESC": "Отправьте ссылку друзьям. Как только они присоединятся, выберите вкладку с видео и наслаждайтесь синхронным просмотром.", + "STEP_3_ILLUS_IN_SYNC": "В СИНХРОНЕ", + + "SELF_TITLE": "Для селф-хостеров", + "SELF_SUBTITLE": "Не доверяете нашему серверу? Сохраняйте полный контроль над данными. Разверните собственный приватный сервер за пару минут.", + "SELF_MASCOT_ALT": "Милый коала сидит за ноутбуком и разворачивает контейнер Docker для селф-хостинга", + "SELF_COPY_CODE": "Копировать код", + "SELF_GITHUB_PACKAGES": "Посмотреть все теги образов на GitHub Packages", + + "BOTTOM_TITLE": "Все еще сомневаетесь? Убедитесь сами.", + "BOTTOM_SUBTITLE": "KoalaSync на 100% бесплатен, открыт и безопасен. Изучите наш код на GitHub или установите расширение в браузер напрямую.", + "BOTTOM_MASCOT_ALT": "Милый коала держит страницу репозитория GitHub рядом с маскотом GitHub Octocat", + + "FOOTER_MIT": "Открытый исходный код под лицензией MIT.", + "FOOTER_RAM": "Никакие данные не сохраняются на наших серверах. Только RAM-трансляция.", + "FOOTER_LEGAL": "Legal Notice", + "FOOTER_PRIVACY": "Privacy Policy" +} diff --git a/website/sitemap.xml b/website/sitemap.xml index 270ecc5..64080a4 100644 --- a/website/sitemap.xml +++ b/website/sitemap.xml @@ -6,15 +6,45 @@ weekly 1.0 + + https://sync.koalastuff.net/de/ + 2026-05-31 + weekly + 0.8 + + + https://sync.koalastuff.net/fr/ + 2026-05-31 + weekly + 0.8 + + + https://sync.koalastuff.net/es/ + 2026-05-31 + weekly + 0.8 + + + https://sync.koalastuff.net/pt-BR/ + 2026-05-31 + weekly + 0.8 + + + https://sync.koalastuff.net/ru/ + 2026-05-31 + weekly + 0.8 + https://sync.koalastuff.net/impressum.html - 2026-05-30 + 2026-05-31 yearly 0.3 https://sync.koalastuff.net/datenschutz.html - 2026-05-30 + 2026-05-31 yearly 0.3 diff --git a/website/style.css b/website/style.css index c4ae24c..d088fdc 100644 --- a/website/style.css +++ b/website/style.css @@ -6,7 +6,7 @@ --accent: #6366f1; --accent-glow: rgba(99, 102, 241, 0.3); --text: #f8fafc; - --text-muted: #94a3b8; + --text-muted: #cbd5e1; /* Increased contrast for WCAG AA (6.28:1 contrast ratio) */ --success: #22c55e; --glass: rgba(30, 41, 59, 0.4); --glass-border: rgba(255, 255, 255, 0.05); @@ -698,20 +698,25 @@ input:checked + .mock-slider:before { } /* --- Features --- */ +/* Bento Grid Layout Configuration */ .features-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 2rem; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; margin-top: 4rem; } .feature-card { - background: var(--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 var(--glass-border); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; + overflow: hidden; } .feature-card::before { @@ -720,7 +725,7 @@ input:checked + .mock-slider:before { top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; padding: 1px; - background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.25), transparent); + 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; @@ -729,28 +734,80 @@ input:checked + .mock-slider:before { .feature-card:hover { transform: translateY(-5px); - box-shadow: 0 15px 30px rgba(99, 102, 241, 0.15); - border-color: rgba(99, 102, 241, 0.2); + box-shadow: 0 15px 30px rgba(99, 102, 241, 0.2); + border-color: rgba(99, 102, 241, 0.3); } -.feature-icon { - font-size: 1.6rem; - margin-right: 0.6rem; - display: inline-block; +.feature-card:hover::before { + background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), transparent); +} + +/* Feature Icon with Inline SVG Wrapper */ +.feature-icon-svg { + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + background: rgba(99, 102, 241, 0.12); + color: var(--accent); + border-radius: 12px; + margin-right: 12px; vertical-align: middle; - filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2)); + transition: all 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: 20px; + height: 20px; + display: block; } .feature-card h3 { - margin-bottom: 0.75rem; + margin-bottom: 1rem; font-size: 1.35rem; font-weight: 700; + display: flex; + align-items: center; } .feature-card p { color: var(--text-muted); font-size: 0.95rem; - line-height: 1.5; + line-height: 1.6; +} + +/* Bento Asymmetric Spanning */ +.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%); +} + +@media (max-width: 900px) { + .features-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1.25rem; + } + .feature-card.bento-large { + grid-column: span 2; + } +} + +@media (max-width: 600px) { + .features-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + .feature-card.bento-large { + grid-column: span 1; + } } /* --- How it works --- */ @@ -1709,21 +1766,84 @@ footer { } /* --- Language Toggle --- */ -html.lang-en [lang="de"], html.lang-de [lang="en"] { display: none !important; } - -.lang-toggle { - cursor: pointer; - font-weight: 600; - user-select: none; - color: var(--text-muted); - transition: color 0.3s; +html:not(.lang-de) [lang="de"] { + display: none !important; } -.lang-toggle:hover { - color: var(--accent); +/* --- Modern Glassmorphic Language Selector --- */ +.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: all 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 Menu --- */ diff --git a/website/template.html b/website/template.html new file mode 100644 index 0000000..9816824 --- /dev/null +++ b/website/template.html @@ -0,0 +1,1014 @@ + + + + + + {{META_TITLE}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+
+ v1.5.3 OUT NOW + v1.5.3 JETZT VERFÜGBAR +
+

{{HERO_TITLE}}

+

{{HERO_SUBTITLE}}

+
+ {{HERO_MASCOT_ALT}} +
+
+ + Chrome + {{ADD_TO_CHROME}} + + + Firefox + {{ADD_TO_FIREFOX}} + + + + GitHub Releases + +
+
+ + +
+
+
+
KoalaSync LogoKoalaSync
+ + + v1.9.3 + +
+
+ + + + +
+
+ +
+
+
+ Active RoomAktiver Raum + brave-eagle-80 +
+ Official ServerOffizieller Server +
+
+
Invite LinkEinladungs-Link
+
+ + +
+
+
+
Peers in RoomTeilnehmer im Raum
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ +
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
+ + Jump to OthersZu anderen springen + + ▼ +
+
+ + +
+
+ PAUSE + CoolUsername @ 12:44:32 +
+
+
+
✓
+ 🐨 KoalaPC +
+
+
+ + +
+
+ ⏳ + Episode Lobby +
+
+ 🎬 Stranger Things - S4E2 +
+
+ Waiting for 1 peer (KoalaPC)...Warten auf 1 Partner (KoalaPC)... +
+ +
+ + +
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +

+ Use this if you see "Duplicate Identity" errors. + Nutze dies bei "Duplicate Identity" Fehlern. +

+
+
+ + +
+ +
+ + + ConnectedVerbunden + + +
+ + +
+
readyState: HAVE_ENOUGH_DATA
+
seekDelta: 0.05s
+
buffered: 300.2s
+
engineState: SYNCED
+
+ + +
+
+ CoolUsername: PAUSE + 0:55 +
+
+ KoalaPC: PLAY + 0:00 +
+
+ +
+ + +
+
+
[18:37:32] EVENT: PLAY -> ACK
+
[18:37:32] FORCE_SYNC -> 0.05s diff
+
[18:37:38] EVENT: PAUSE -> BROADCAST
+
[18:37:42] content_heartbeat: active
+
+ +
+ GitHub Repository +
v1.9.3
+
+
+
+
+
+
+
+ +
+
+ A cute koala juggling multiple browser tabs showing streaming platforms +

+ {{COMPAT_HEADING}} +

+
+ + + + + + + +
+
+
+ +
+
+

+ {{USE_CASES_TITLE}} +

+

+ {{USE_CASES_SUBTITLE}} +

+
+
+ {{USE_CASE_1_ALT}} +

+ {{USE_CASE_1_TITLE}} +

+

{{USE_CASE_1_DESC}}

+
+
+ {{USE_CASE_2_ALT}} +

+ {{USE_CASE_2_TITLE}} +

+

{{USE_CASE_2_DESC}}

+
+
+ {{USE_CASE_3_ALT}} +

+ {{USE_CASE_3_TITLE}} +

+

{{USE_CASE_3_DESC}}

+
+
+
+
+ +
+
+ A cute koala with a question mark above its head wondering why to choose KoalaSync +

+ {{WHY_TITLE}} +

+

+ {{WHY_SUBTITLE}} +

+ +
+ +
+

+ + + + {{FEATURE_1_TITLE}} +

+

{{FEATURE_1_DESC}}

+
+ + +
+

+ + + + {{FEATURE_2_TITLE}} +

+

{{FEATURE_2_DESC}}

+
+ + +
+

+ + + + {{FEATURE_3_TITLE}} +

+

{{FEATURE_3_DESC}}

+
+ STATE: VOLATILE + RAM-ONLY +
+
+ + +
+

+ + + + {{FEATURE_4_TITLE}} +

+

{{FEATURE_4_DESC}}

+
+ + +
+

+ + + + {{FEATURE_5_TITLE}} +

+

{{FEATURE_5_DESC}}

+
+ + +
+

+ + + + {{FEATURE_6_TITLE}} +

+

{{FEATURE_6_DESC}}

+
+
+ +
+
+ +
+
+ A cute koala weighing options in both hands to compare KoalaSync vs Teleparty +

+ {{COMP_TITLE}} +

+

+ {{COMP_SUBTITLE}} +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{COMP_COL_FEATURE}}KoalaSyncTeleparty
+ {{COMP_FEAT_1_NAME}} + {{COMP_FEAT_1_DESC}} + ✔ {{COMP_FEAT_1_KOALA}} + ✘ {{COMP_FEAT_1_TELE}} + [1] +
+ {{COMP_FEAT_2_NAME}} + {{COMP_FEAT_2_DESC}} + ✔ {{COMP_FEAT_2_KOALA}} + ✘ {{COMP_FEAT_2_TELE}} + [2] +
+ {{COMP_FEAT_3_NAME}} + {{COMP_FEAT_3_DESC}} + ✔ {{COMP_FEAT_3_KOALA}} + ✘ {{COMP_FEAT_3_TELE}} + [2] +
+ {{COMP_FEAT_4_NAME}} + {{COMP_FEAT_4_DESC}} + ✔ {{COMP_FEAT_4_KOALA}} + ✘ {{COMP_FEAT_4_TELE}} + [2] +
+ {{COMP_FEAT_5_NAME}} + {{COMP_FEAT_5_DESC}} + ✔ {{COMP_FEAT_5_KOALA}}[3] + ✘ {{COMP_FEAT_5_TELE}} + [1] +
+
+

+ {{COMP_FOOTNOTE_1}} +

+

+ [1] + {{COMP_FOOTNOTE_2}} + teleparty.com/premium +

+

+ [2] + {{COMP_FOOTNOTE_3}} + teleparty.com/privacy +

+

+ [3] + {{COMP_FOOTNOTE_4}} +

+
+
+
+
+ +
+
+

+ {{STEPS_TITLE}} +

+ +
+
+
+
01
+

{{STEP_1_TITLE}}

+

{{STEP_1_DESC}}

+
+ +
+
+
+
+ + + +
+
+ https://sync.koalastuff.net +
+
+
+ KoalaSync Extension +
+
+
+
+
+
+ +
+
KoalaSync
+
+ {{STEP_1_ILLUS_DESC}} +
+
+
+
+
+ Chrome Logo + {{STEP_1_ILLUS_DL_CHROME}} +
+
+ Firefox Logo + {{STEP_1_ILLUS_DL_FIREFOX}} +
+
+
+ + +
+
+ KoalaSync Logo + KoalaSync +
+
+
+ ✓ + {{STEP_1_ILLUS_ACTIVE}} +
+
+
+ {{STEP_1_ILLUS_READY}} +
+
+
+
+
+
+
+
+
02
+

{{STEP_2_TITLE}}

+

{{STEP_2_DESC}}

+
+ +
+
+
+
+ KoalaSync Logo + KoalaSync +
+
v1.9.3
+
+
+
+ {{STEP_2_ILLUS_ROOM}} +
+
+ {{STEP_2_ILLUS_SYNC}} +
+
+ {{STEP_2_ILLUS_SETTINGS}} +
+
+
+
+ {{STEP_2_ILLUS_CREATE}} +
+
+ +
+ ▶ + {{STEP_2_ILLUS_MANUAL}} +
+ +
+ 📋 + {{STEP_2_ILLUS_COPIED}} +
+
+
+
+
+
+
+
03
+

{{STEP_3_TITLE}}

+

{{STEP_3_DESC}}

+
+ +
+
+ +
+
+ 🐨 KoalaPC + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+ + +
+
+
+
+
+ {{STEP_3_ILLUS_IN_SYNC}} +
+
+ + +
+
+ 💻 LaptopKoala + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+
+
+
+
+
+
+ + +
+
+

+ {{SELF_TITLE}} +

+

+ {{SELF_SUBTITLE}} +

+ + +
+ {{SELF_MASCOT_ALT}} +
+ +
+
+
+ + + +
+
+ + +
+
+
+ + +
+ 
services:
+  koala-sync:
+    image: ghcr.io/shik3i/koalasync:latest
+    container_name: KoalaSync
+    restart: always
+    # Access internally by proxying to container port 3000
+    environment:
+      - TZ=Europe/Berlin
+      - PORT=3000
+      - MIN_VERSION=1.0.0
+      - MAX_ROOMS=100
+      - MAX_PEERS_PER_ROOM=50
+    pids_limit: 2048
+ +
+ +
+ 
sync.koalastuff.net {
+    # Specify the web root inside the container
+    root * /var/www/html
+
+    # Enable static file server to deliver HTML, CSS, JS
+    file_server
+}
+
+syncserver.koalastuff.net {
+    reverse_proxy KoalaSync:3000
+}
+
+
+
+
+
+ +
+
+

+ {{BOTTOM_TITLE}} +

+

+ {{BOTTOM_SUBTITLE}} +

+
+ + Chrome + {{ADD_TO_CHROME}} + + + Firefox + {{ADD_TO_FIREFOX}} + +
+ + + {{BOTTOM_MASCOT_ALT}} + + +
+ + + GitHub + +
+
+
+ + + + + + diff --git a/website/www/app.js b/website/www/app.js new file mode 100644 index 0000000..b52f9ae --- /dev/null +++ b/website/www/app.js @@ -0,0 +1,662 @@ +// KoalaSync Landing Page Logic + +document.addEventListener('DOMContentLoaded', () => { + // Scroll Reveal Logic (IntersectionObserver for performance) + const revealElements = document.querySelectorAll('[data-reveal]'); + + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('revealed'); + revealObserver.unobserve(entry.target); + } + }); + }, { + rootMargin: '0px 0px -150px 0px', + threshold: 0.1 + }); + + revealElements.forEach(el => revealObserver.observe(el)); + + // Navbar scroll effect + const nav = document.querySelector('nav'); + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + nav.style.padding = '0.75rem 0'; + nav.style.background = 'rgba(15, 23, 42, 0.9)'; + } else { + nav.style.padding = '1rem 0'; + nav.style.background = 'rgba(30, 41, 59, 0.7)'; + } + }); + + // Smooth scroll for anchors + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); + + // Invite Detection & Bridge + const checkInvite = () => { + const isJoinPage = window.location.pathname.includes('join'); + + // Dev Simulation Mode via URL Search Parameter (?dev=success) or Hash (#dev=success / #devsuccess) + const urlParams = new URLSearchParams(window.location.search); + let devMode = urlParams.get('dev'); + + if (!devMode) { + const hashClean = window.location.hash.startsWith('#') ? window.location.hash.substring(1) : window.location.hash; + const hashParams = new URLSearchParams(hashClean); + devMode = hashParams.get('dev'); + } + + if (!devMode) { + if (window.location.hash.includes('devsuccess') || window.location.search.includes('devsuccess')) devMode = 'success'; + if (window.location.hash.includes('devfailure') || window.location.search.includes('devfailure')) devMode = 'failure'; + } + + if (isJoinPage && devMode) { + setTimeout(() => { + const displayRoom = document.getElementById('display-room-id'); + const actions = document.getElementById('join-actions'); + if (displayRoom) displayRoom.textContent = 'DEV-ROOM'; + + if (actions) { + actions.innerHTML = ` + + `; + setTimeout(() => { + window.dispatchEvent(new CustomEvent('KOALASYNC_STATUS', { + detail: { + success: devMode === 'success', + message: devMode === 'failure' ? 'Simulated Connection Timeout!' : '' + } + })); + }, 1500); + } + }, 600); + return; + } + + // Use a short timeout to let the bridge script initialize its dataset attribute + setTimeout(() => { + const isInstalled = document.documentElement.dataset.koalasyncInstalled === 'true'; + + if (window.location.hash.startsWith('#join:')) { + const parts = window.location.hash.split(':'); + if (parts.length >= 3) { + const roomId = parts[1]; + const password = parts[2]; + const serverFlag = parts[3] || '0'; + const serverUrl = parts[4] ? decodeURIComponent(parts[4]) : ''; + + if (isJoinPage) { + const displayRoom = document.getElementById('display-room-id'); + const actions = document.getElementById('join-actions'); + if (displayRoom) displayRoom.textContent = roomId; + + if (actions) { + if (!isInstalled) { + const isFirefox = navigator.userAgent.includes('Firefox'); + if (isFirefox) { + actions.innerHTML = ` +
+ + Firefox + GET IT ON MOZILLA ADD-ONSIM FIREFOX ADD-ON STORE HERUNTERLADEN + + + + Download via GitHubÜber GitHub herunterladen + +
+

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

+ `; + } else { + actions.innerHTML = ` +
+ + Chrome + GET IT ON CHROME WEBSTOREIM CHROME WEB STORE HERUNTERLADEN + + + + Download via GitHubÜber GitHub herunterladen + +
+

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

+ `; + } + } else { + actions.innerHTML = ` + + `; + + // AUTO-TRIGGER JOIN + setTimeout(() => { + window.dispatchEvent(new CustomEvent('KOALASYNC_JOIN_REQUEST', { + detail: { + roomId, + password, + useCustomServer: serverFlag === '1', + serverUrl: serverUrl + } + })); + }, 500); + } + } + } else { + // Fallback banner for index.html + if (!document.getElementById('koala-banner')) { + const banner = document.createElement('div'); + banner.className = 'invite-banner'; + banner.id = 'koala-banner'; + + const container = document.createElement('div'); + container.className = 'container'; + container.style.cssText = 'display:flex; justify-content:space-between; align-items:center;'; + + const inviteSpan = document.createElement('span'); + inviteSpan.appendChild(document.createTextNode('🎫 Invitation for ')); + const boldRoom = document.createElement('b'); + boldRoom.textContent = roomId; + inviteSpan.appendChild(boldRoom); + inviteSpan.appendChild(document.createTextNode(' detected!')); + + const joinLink = document.createElement('a'); + joinLink.href = 'join.html' + window.location.hash; + joinLink.className = 'btn-banner'; + joinLink.textContent = 'OPEN JOIN PAGE'; + + container.appendChild(inviteSpan); + container.appendChild(joinLink); + banner.appendChild(container); + document.body.prepend(banner); + } + } + + // Global listener for Join Button + document.addEventListener('click', (e) => { + if (e.target && e.target.id === 'webJoinBtn') { + e.target.textContent = 'JOINING...'; + e.target.disabled = true; + window.dispatchEvent(new CustomEvent('KOALASYNC_JOIN_REQUEST', { + detail: { + roomId, + password, + useCustomServer: serverFlag === '1', + serverUrl: serverUrl + } + })); + } + }); + } + } + }, 600); // 600ms delay to ensure bridge.js has set the dataset + }; + + // Listen for status from Extension + window.addEventListener('KOALASYNC_STATUS', (e) => { + const { success, message } = e.detail; + const isJoinPage = window.location.pathname.includes('join'); + + if (isJoinPage) { + const icon = document.getElementById('join-status-icon'); + const title = document.getElementById('join-title'); + const actions = document.getElementById('join-actions'); + const desc = document.getElementById('join-desc'); + const ring = document.getElementById('status-ring'); + + if (success) { + if (ring) { + ring.classList.remove('active-pulse'); + ring.style.display = 'none'; + } + if (icon) { + icon.innerHTML = 'Success'; + icon.style.transform = 'scale(1)'; + } + const isDE = document.documentElement.classList.contains('lang-de'); + title.textContent = isDE ? 'Erfolgreich!' : 'Success!'; + desc.innerHTML = isDE + ? 'Verbunden!
Wähle jetzt einen Video-Tab in der Erweiterung aus.' + : 'Connected!
Now select a video tab in the extension.'; + + let count = 3; + const updateCountdown = () => { + if (count <= 0) { + window.close(); + desc.textContent = isDE ? 'Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schließen.' : 'Joined successfully! You can close this tab manually.'; + } else { + count--; + setTimeout(updateCountdown, 1000); + } + }; + setTimeout(updateCountdown, 1000); + + const closeLabel = isDE ? 'TAB JETZT SCHLIESSEN' : 'CLOSE TAB NOW'; + actions.innerHTML = ` +
+ +
+ `; + } else { + if (ring) { + ring.classList.remove('active-pulse'); + ring.style.display = 'none'; + } + if (icon) { + icon.innerHTML = 'Error'; + icon.style.transform = 'scale(1)'; + } + const isDE = document.documentElement.classList.contains('lang-de'); + title.textContent = isDE ? 'Fehler' : 'Error'; + desc.textContent = isDE ? `Beitritt fehlgeschlagen: ${message}` : `Join failed: ${message}`; + const retryLabel = isDE ? 'ERNEUT VERSUCHEN' : 'TRY AGAIN'; + actions.innerHTML = ` +
+ +
+ `; + } + } else { + const banner = document.getElementById('koala-banner'); + if (banner) { + if (success) { + banner.style.background = 'var(--success)'; + banner.innerHTML = '
✅ Joined! This tab will close in 2s...
'; + setTimeout(() => window.close(), 2000); + } else { + banner.style.background = 'var(--error)'; + banner.innerHTML = ''; + const errDiv = document.createElement('div'); + errDiv.className = 'container'; + errDiv.textContent = '❌ Error: ' + message; + banner.appendChild(errDiv); + } + } + } + }); + + const updateDynamicVersion = async () => { + try { + const versionPath = document.documentElement.lang === 'de' ? '../version.json' : 'version.json'; + const response = await fetch(versionPath); + if (!response.ok) return; + const data = await response.json(); + const { version, date } = data; + if (!version || !date) return; + + const releaseDate = new Date(date); + const now = new Date(); + const diffMs = now - releaseDate; + const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); + const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); + const diffMins = Math.floor(diffMs / (1000 * 60)); + + let relativeTimeEn = ''; + let relativeTimeDe = ''; + + if (diffDays > 0) { + relativeTimeEn = `${diffDays} ${diffDays === 1 ? 'day' : 'days'} ago`; + relativeTimeDe = `vor ${diffDays} ${diffDays === 1 ? 'Tag' : 'Tagen'}`; + } else if (diffHours > 0) { + relativeTimeEn = `${diffHours} ${diffHours === 1 ? 'hour' : 'hours'} ago`; + relativeTimeDe = `vor ${diffHours} ${diffHours === 1 ? 'Stunde' : 'Stunden'}`; + } else if (diffMins > 0) { + relativeTimeEn = `${diffMins} ${diffMins === 1 ? 'minute' : 'minutes'} ago`; + relativeTimeDe = `vor ${diffMins} ${diffMins === 1 ? 'Minute' : 'Minuten'}`; + } else { + relativeTimeEn = 'just now'; + relativeTimeDe = 'gerade eben'; + } + + const badgeEn = document.querySelector('.version-text-en'); + const badgeDe = document.querySelector('.version-text-de'); + + if (badgeEn) { + badgeEn.textContent = `v${version} OUT NOW • ${relativeTimeEn}`; + } + if (badgeDe) { + badgeDe.textContent = `v${version} JETZT VERFÜGBAR • ${relativeTimeDe}`; + } + + // Update Schema.org structured data dynamically + const schemaScript = document.getElementById('schema-software'); + if (schemaScript) { + try { + const schema = JSON.parse(schemaScript.textContent); + schema.softwareVersion = version; + schemaScript.textContent = JSON.stringify(schema, null, 2); + } catch (err) { + console.warn('Failed to dynamically update schema version:', err); + } + } + } catch (e) { + console.warn('Failed to fetch dynamic version info:', e); + } + }; + + // Extension Mockup Tab Switcher + const mockTabs = document.querySelectorAll('.mock-tab'); + const mockScreens = document.querySelectorAll('.mock-screen'); + + mockTabs.forEach(tab => { + tab.addEventListener('click', () => { + mockTabs.forEach(t => t.classList.remove('active')); + mockScreens.forEach(s => s.classList.remove('active')); + + tab.classList.add('active'); + const targetId = tab.getAttribute('data-target'); + const targetScreen = document.getElementById(targetId); + if (targetScreen) { + targetScreen.classList.add('active'); + } + }); + }); + + // Terminal Tab Switcher + const termTabBtns = document.querySelectorAll('.terminal-tab-btn'); + const termPanes = document.querySelectorAll('.terminal-pane'); + + termTabBtns.forEach(btn => { + btn.addEventListener('click', () => { + termTabBtns.forEach(b => b.classList.remove('active')); + termPanes.forEach(p => p.classList.remove('active')); + + btn.classList.add('active'); + const targetPaneId = btn.getAttribute('data-tab'); + const targetPane = document.getElementById(targetPaneId); + if (targetPane) { + targetPane.classList.add('active'); + } + }); + }); + + // Terminal Clipboard Copy + const copyBtn = document.querySelector('.terminal-copy-btn'); + if (copyBtn) { + copyBtn.addEventListener('click', () => { + const activePane = document.querySelector('.terminal-pane.active'); + if (!activePane) return; + const codeElement = activePane.querySelector('code'); + if (!codeElement) return; + + const textToCopy = codeElement.innerText || codeElement.textContent; + + navigator.clipboard.writeText(textToCopy).then(() => { + const isDE = document.documentElement.classList.contains('lang-de'); + const originalHTML = copyBtn.innerHTML; + + copyBtn.innerHTML = isDE ? '✅ Kopiert!' : '✅ Copied!'; + copyBtn.disabled = true; + + setTimeout(() => { + copyBtn.innerHTML = originalHTML; + copyBtn.disabled = false; + }, 2000); + }).catch(err => { + console.error('Failed to copy text: ', err); + }); + }); + } + + // Mobile Hamburger Menu Toggle + const hamburger = document.querySelector('.hamburger'); + const navLinks = document.querySelector('.nav-links'); + if (hamburger && navLinks) { + // Initialize accessibility attribute + hamburger.setAttribute('aria-expanded', 'false'); + + hamburger.addEventListener('click', () => { + const isOpen = navLinks.classList.toggle('open'); + hamburger.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); + }); + } + + // Dynamically localize home links on root dynamic pages (impressum, datenschutz, join) + const localizeHomeLinks = () => { + const html = document.documentElement; + const activeLang = localStorage.getItem('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'].includes(seg)); + + // Only need to do this dynamic rewrite if we are NOT already inside a localized subdirectory + if (!isSubdir) { + const homeLinks = document.querySelectorAll('a[href="index.html"], a[href="de/index.html"], a[href="fr/index.html"], a[href="es/index.html"], a[href="pt-BR/index.html"], a[href="ru/index.html"]'); + homeLinks.forEach(link => { + link.href = (activeLang === 'en') ? 'index.html' : `${activeLang}/index.html`; + }); + } + }; + + // Modern Language Selector Navigation and State Toggling + const handleLanguageChange = (e) => { + const select = e.currentTarget; + const newLang = select.value; + const path = window.location.pathname; + + // Save the user's preference + localStorage.setItem('koala_lang', newLang); + + // 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; + + if (isIndex) { + // Static navigation: Route to correct subdirectory + const pathSegments = path.split('/'); + const isSubdir = pathSegments.some(seg => ['de', 'fr', 'es', 'pt-BR', 'ru'].includes(seg)); + + let targetPath; + if (newLang === 'en') { + if (isSubdir) { + targetPath = '../index.html'; + } else { + targetPath = 'index.html'; + } + } else { + if (isSubdir) { + // Switching from one language subdirectory to another (e.g., /de/ to /fr/) + targetPath = '../' + newLang + '/index.html'; + } else { + // Switching from root (English) to a language subdirectory (e.g., / to /fr/) + targetPath = newLang + '/index.html'; + } + } + + window.location.href = targetPath; + } else { + // Dynamic page: Toggle classes and update elements dynamically without navigating away + const html = document.documentElement; + html.classList.remove('lang-en', 'lang-de', 'lang-fr', 'lang-es', 'lang-pt-br', 'lang-ru'); + + // Fallback dynamic pages to 'en' if 'de' is not chosen (since fr/es markup is not present) + const activeDisplayLang = (newLang === 'de') ? 'de' : 'en'; + html.classList.add('lang-' + activeDisplayLang); + html.lang = activeDisplayLang; + + // Sync all selects on the page to the new value + document.querySelectorAll('.lang-dropdown').forEach(sel => { + sel.value = newLang; + }); + + // Update titles dynamically + const isJoin = path.includes('join'); + if (isJoin) { + const titles = { en: 'Join Room | KoalaSync', de: 'Raum beitreten | KoalaSync' }; + document.title = titles[activeDisplayLang] || titles.en; + } + + // Localize home links dynamically + localizeHomeLinks(); + } + }; + + // Register change event listener for the dropdowns + document.querySelectorAll('.lang-dropdown').forEach(select => { + select.addEventListener('change', handleLanguageChange); + }); + + // Initialize language select elements to show the current preferred language + const initLanguageSelectorValue = () => { + const savedLang = localStorage.getItem('koala_lang'); + const browserLang = navigator.language.startsWith('de') ? 'de' : 'en'; + const activePref = savedLang || browserLang; + + document.querySelectorAll('.lang-dropdown').forEach(select => { + select.value = activePref; + }); + }; + + // Impressum Email Obfuscation Click Reveal + document.querySelectorAll('.email-reveal').forEach(el => { + el.addEventListener('click', function() { + const user = this.getAttribute('data-user'); + const domain = this.getAttribute('data-domain'); + if (user && domain) { + this.innerHTML = `${user}@${domain}`; + } + }); + }); + + // Automated Store/Local Badge Linking based on User-Agent + const detectBrowserAndElevateBadge = () => { + const isFirefox = navigator.userAgent.includes('Firefox'); + const isChrome = navigator.userAgent.includes('Chrome') || navigator.userAgent.includes('Chromium'); + const chromeBtns = document.querySelectorAll('.btn-primary'); + const firefoxBtns = document.querySelectorAll('.btn-firefox'); + + if (isFirefox && chromeBtns.length > 0 && firefoxBtns.length > 0) { + // User is on Firefox: Elevate Firefox button to primary, make Chrome secondary + chromeBtns.forEach(btn => { + btn.classList.remove('btn-primary'); + btn.classList.add('btn-secondary'); + }); + + firefoxBtns.forEach(btn => { + // Put Firefox first in visual order + btn.style.order = '-1'; + + // Add subtle focus scale effect + btn.style.transform = 'scale(1.05)'; + btn.addEventListener('mouseleave', () => { + btn.style.transform = 'scale(1)'; + }); + btn.addEventListener('mouseenter', () => { + btn.style.transform = 'scale(1.05) translateY(-2px)'; + }); + }); + } else if (isChrome && chromeBtns.length > 0 && firefoxBtns.length > 0) { + // User is on Chrome: Make Firefox secondary + firefoxBtns.forEach(btn => { + btn.classList.remove('btn-firefox'); + btn.classList.add('btn-secondary'); + btn.style.color = 'var(--text)'; + btn.style.background = 'var(--card)'; + btn.style.border = '1px solid var(--glass-border)'; + btn.style.boxShadow = 'none'; + }); + } + + // Handle Step 1 Landing Page Download Badges & Nav Badge + setTimeout(() => { + const isInstalled = document.documentElement.dataset.koalasyncInstalled === 'true'; + + // Nav Badge Logic + const navBadge = document.getElementById('nav-extension-status'); + if (isInstalled && navBadge) { + navBadge.style.display = 'inline-flex'; + } + + const illusChrome = document.querySelectorAll('.illus-store-btn.chrome'); + const illusFirefox = document.querySelectorAll('.illus-store-btn.firefox'); + + if (isFirefox && illusFirefox.length > 0) { + illusFirefox.forEach(btn => { + btn.style.order = '-1'; + if (!isInstalled) { + btn.classList.add('install-breathe'); + btn.style.cursor = 'pointer'; + btn.onclick = () => window.open('https://addons.mozilla.org/de/firefox/addon/koalasync/', '_blank'); + } + }); + illusChrome.forEach(btn => { + btn.style.opacity = '0.5'; + btn.style.transform = 'scale(0.95)'; + }); + } else if (isChrome && illusChrome.length > 0) { + illusChrome.forEach(btn => { + btn.style.order = '-1'; + if (!isInstalled) { + btn.classList.add('install-breathe'); + btn.style.cursor = 'pointer'; + btn.onclick = () => window.open('https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc', '_blank'); + } + }); + illusFirefox.forEach(btn => { + btn.style.opacity = '0.5'; + btn.style.transform = 'scale(0.95)'; + }); + } + + // Pulse main hero CTA buttons via Web Animations API + // (avoids CSS transition/inline-style conflicts from mouse handlers) + if (!isInstalled) { + const heroBtns = document.querySelectorAll(isFirefox ? '.btn-firefox' : (isChrome ? '.btn-primary' : null)); + if (heroBtns && heroBtns.length > 0) { + heroBtns.forEach(btn => { + const isFF = btn.classList.contains('btn-firefox'); + const glowColor = isFF ? 'rgba(249, 115, 22, ' : 'rgba(99, 102, 241, '; + btn.animate([ + { transform: 'scale(1)', boxShadow: `0 0 15px ${glowColor}0.2)` }, + { transform: 'scale(1.05)', boxShadow: `0 0 25px ${glowColor}0.5)` }, + { transform: 'scale(1)', boxShadow: `0 0 15px ${glowColor}0.2)` } + ], { + duration: 2500, + iterations: Infinity, + easing: 'ease-in-out' + }); + }); + } + } + }, 600); + }; + + detectBrowserAndElevateBadge(); + checkInvite(); + updateDynamicVersion(); + localizeHomeLinks(); + initLanguageSelectorValue(); +}); diff --git a/website/www/assets/KoalaCupple_New-1x.webp b/website/www/assets/KoalaCupple_New-1x.webp new file mode 100644 index 0000000..05faa83 Binary files /dev/null and b/website/www/assets/KoalaCupple_New-1x.webp differ diff --git a/website/www/assets/KoalaCupple_New.webp b/website/www/assets/KoalaCupple_New.webp new file mode 100644 index 0000000..bfa8a72 Binary files /dev/null and b/website/www/assets/KoalaCupple_New.webp differ diff --git a/website/www/assets/KoalaDeploy-1x.webp b/website/www/assets/KoalaDeploy-1x.webp new file mode 100644 index 0000000..9163993 Binary files /dev/null and b/website/www/assets/KoalaDeploy-1x.webp differ diff --git a/website/www/assets/KoalaDeploy.webp b/website/www/assets/KoalaDeploy.webp new file mode 100644 index 0000000..ae599d9 Binary files /dev/null and b/website/www/assets/KoalaDeploy.webp differ diff --git a/website/www/assets/KoalaGithub-1x.webp b/website/www/assets/KoalaGithub-1x.webp new file mode 100644 index 0000000..09cd235 Binary files /dev/null and b/website/www/assets/KoalaGithub-1x.webp differ diff --git a/website/www/assets/KoalaGithub.webp b/website/www/assets/KoalaGithub.webp new file mode 100644 index 0000000..71204cb Binary files /dev/null and b/website/www/assets/KoalaGithub.webp differ diff --git a/website/www/assets/KoalaImprintl.webp b/website/www/assets/KoalaImprintl.webp new file mode 100644 index 0000000..0b4f5ed Binary files /dev/null and b/website/www/assets/KoalaImprintl.webp differ diff --git a/website/www/assets/KoalaPrivacy.webp b/website/www/assets/KoalaPrivacy.webp new file mode 100644 index 0000000..5903975 Binary files /dev/null and b/website/www/assets/KoalaPrivacy.webp differ diff --git a/website/www/assets/KoalaQuestions-1x.webp b/website/www/assets/KoalaQuestions-1x.webp new file mode 100644 index 0000000..fb9c4fc Binary files /dev/null and b/website/www/assets/KoalaQuestions-1x.webp differ diff --git a/website/www/assets/KoalaQuestions.webp b/website/www/assets/KoalaQuestions.webp new file mode 100644 index 0000000..539bd17 Binary files /dev/null and b/website/www/assets/KoalaQuestions.webp differ diff --git a/website/www/assets/KoalaSearching.webp b/website/www/assets/KoalaSearching.webp new file mode 100644 index 0000000..201a864 Binary files /dev/null and b/website/www/assets/KoalaSearching.webp differ diff --git a/website/www/assets/KoalaThumbsDown.webp b/website/www/assets/KoalaThumbsDown.webp new file mode 100644 index 0000000..ac07452 Binary files /dev/null and b/website/www/assets/KoalaThumbsDown.webp differ diff --git a/website/www/assets/KoalaThumbsUp.webp b/website/www/assets/KoalaThumbsUp.webp new file mode 100644 index 0000000..4712ba5 Binary files /dev/null and b/website/www/assets/KoalaThumbsUp.webp differ diff --git a/website/www/assets/LookDownKoala-1x.webp b/website/www/assets/LookDownKoala-1x.webp new file mode 100644 index 0000000..51ea600 Binary files /dev/null and b/website/www/assets/LookDownKoala-1x.webp differ diff --git a/website/www/assets/LookDownKoala.webp b/website/www/assets/LookDownKoala.webp new file mode 100644 index 0000000..a719a9b Binary files /dev/null and b/website/www/assets/LookDownKoala.webp differ diff --git a/website/www/assets/NewLogoIcon.webp b/website/www/assets/NewLogoIcon.webp new file mode 100644 index 0000000..f6564df Binary files /dev/null and b/website/www/assets/NewLogoIcon.webp differ diff --git a/website/www/assets/NewLogoIcon_128.webp b/website/www/assets/NewLogoIcon_128.webp new file mode 100644 index 0000000..9bd0189 Binary files /dev/null and b/website/www/assets/NewLogoIcon_128.webp differ diff --git a/website/www/assets/NewLogoIcon_40.webp b/website/www/assets/NewLogoIcon_40.webp new file mode 100644 index 0000000..12fa074 Binary files /dev/null and b/website/www/assets/NewLogoIcon_40.webp differ diff --git a/website/www/assets/NewLogoIcon_64.webp b/website/www/assets/NewLogoIcon_64.webp new file mode 100644 index 0000000..c50e0d9 Binary files /dev/null and b/website/www/assets/NewLogoIcon_64.webp differ diff --git a/website/www/assets/NewLogoIcon_80.webp b/website/www/assets/NewLogoIcon_80.webp new file mode 100644 index 0000000..9ac7ac4 Binary files /dev/null and b/website/www/assets/NewLogoIcon_80.webp differ diff --git a/website/www/assets/PlatformJuggler_New-1x.webp b/website/www/assets/PlatformJuggler_New-1x.webp new file mode 100644 index 0000000..20ba2fe Binary files /dev/null and b/website/www/assets/PlatformJuggler_New-1x.webp differ diff --git a/website/www/assets/PlatformJuggler_New.webp b/website/www/assets/PlatformJuggler_New.webp new file mode 100644 index 0000000..61570c6 Binary files /dev/null and b/website/www/assets/PlatformJuggler_New.webp differ diff --git a/website/www/assets/PopcornFriends-1x.webp b/website/www/assets/PopcornFriends-1x.webp new file mode 100644 index 0000000..5fcc67d Binary files /dev/null and b/website/www/assets/PopcornFriends-1x.webp differ diff --git a/website/www/assets/PopcornFriends.webp b/website/www/assets/PopcornFriends.webp new file mode 100644 index 0000000..157438e Binary files /dev/null and b/website/www/assets/PopcornFriends.webp differ diff --git a/website/www/assets/ProContraKoala-1x.webp b/website/www/assets/ProContraKoala-1x.webp new file mode 100644 index 0000000..4773e0f Binary files /dev/null and b/website/www/assets/ProContraKoala-1x.webp differ diff --git a/website/www/assets/ProContraKoala.webp b/website/www/assets/ProContraKoala.webp new file mode 100644 index 0000000..21e9683 Binary files /dev/null and b/website/www/assets/ProContraKoala.webp differ diff --git a/website/www/assets/RemoteProf-1x.webp b/website/www/assets/RemoteProf-1x.webp new file mode 100644 index 0000000..df0e9b3 Binary files /dev/null and b/website/www/assets/RemoteProf-1x.webp differ diff --git a/website/www/assets/RemoteProf.webp b/website/www/assets/RemoteProf.webp new file mode 100644 index 0000000..e95e6f4 Binary files /dev/null and b/website/www/assets/RemoteProf.webp differ diff --git a/website/www/assets/chrome.svg b/website/www/assets/chrome.svg new file mode 100644 index 0000000..4ff6ab6 --- /dev/null +++ b/website/www/assets/chrome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/www/assets/emby.svg b/website/www/assets/emby.svg new file mode 100644 index 0000000..2b54f92 --- /dev/null +++ b/website/www/assets/emby.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/www/assets/firefox.svg b/website/www/assets/firefox.svg new file mode 100644 index 0000000..8b3b9ab --- /dev/null +++ b/website/www/assets/firefox.svg @@ -0,0 +1 @@ +Firefox Browser \ No newline at end of file diff --git a/website/www/assets/github.svg b/website/www/assets/github.svg new file mode 100644 index 0000000..8a900d1 --- /dev/null +++ b/website/www/assets/github.svg @@ -0,0 +1 @@ + diff --git a/website/www/assets/jellyfin.svg b/website/www/assets/jellyfin.svg new file mode 100644 index 0000000..8a26899 --- /dev/null +++ b/website/www/assets/jellyfin.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/www/assets/logo.png b/website/www/assets/logo.png new file mode 100644 index 0000000..433c8ab Binary files /dev/null and b/website/www/assets/logo.png differ diff --git a/website/www/assets/netflix.svg b/website/www/assets/netflix.svg new file mode 100644 index 0000000..47ab6ac --- /dev/null +++ b/website/www/assets/netflix.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/www/assets/primevideo.svg b/website/www/assets/primevideo.svg new file mode 100644 index 0000000..e0af9a9 --- /dev/null +++ b/website/www/assets/primevideo.svg @@ -0,0 +1,5 @@ + + prime + video + + \ No newline at end of file diff --git a/website/www/assets/twitch.svg b/website/www/assets/twitch.svg new file mode 100644 index 0000000..1d2686f --- /dev/null +++ b/website/www/assets/twitch.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/www/assets/youtube.svg b/website/www/assets/youtube.svg new file mode 100644 index 0000000..a80a93f --- /dev/null +++ b/website/www/assets/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/www/datenschutz.html b/website/www/datenschutz.html new file mode 100644 index 0000000..1792381 --- /dev/null +++ b/website/www/datenschutz.html @@ -0,0 +1,210 @@ + + + + + + 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. +

+

+ 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. +

+
+ +
+

+ 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:

+
+
+
+ + + + + + diff --git a/website/www/de/index.html b/website/www/de/index.html new file mode 100644 index 0000000..6831c31 --- /dev/null +++ b/website/www/de/index.html @@ -0,0 +1,1014 @@ + + + + + + KoalaSync | Netflix, YouTube & jedes Video mit Freunden synchronisieren + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+
+ v1.5.3 OUT NOW + v1.5.3 JETZT VERFÜGBAR +
+

Gemeinsam schauen.
Perfekt synchron.

+

Dein Kino-Abend auf Distanz. Keine Lags, keine Anmeldung. Einfach Link teilen und zusammen schauen.

+
+ Ein niedlicher Koala steht da und schaut nach unten auf die Download-Buttons +
+
+ + Chrome + Zu Chrome hinzufügen + + + Firefox + Zu Firefox hinzufügen + + + + GitHub Releases + +
+
+ + +
+
+
+
KoalaSync LogoKoalaSync
+ + + v1.9.3 + +
+
+ + + + +
+
+ +
+
+
+ Active RoomAktiver Raum + brave-eagle-80 +
+ Official ServerOffizieller Server +
+
+
Invite LinkEinladungs-Link
+
+ + +
+
+
+
Peers in RoomTeilnehmer im Raum
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ +
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
+ + Jump to OthersZu anderen springen + + ▼ +
+
+ + +
+
+ PAUSE + CoolUsername @ 12:44:32 +
+
+
+
✓
+ 🐨 KoalaPC +
+
+
+ + +
+
+ ⏳ + Episode Lobby +
+
+ 🎬 Stranger Things - S4E2 +
+
+ Waiting for 1 peer (KoalaPC)...Warten auf 1 Partner (KoalaPC)... +
+ +
+ + +
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +

+ Use this if you see "Duplicate Identity" errors. + Nutze dies bei "Duplicate Identity" Fehlern. +

+
+
+ + +
+ +
+ + + ConnectedVerbunden + + +
+ + +
+
readyState: HAVE_ENOUGH_DATA
+
seekDelta: 0.05s
+
buffered: 300.2s
+
engineState: SYNCED
+
+ + +
+
+ CoolUsername: PAUSE + 0:55 +
+
+ KoalaPC: PLAY + 0:00 +
+
+ +
+ + +
+
+
[18:37:32] EVENT: PLAY -> ACK
+
[18:37:32] FORCE_SYNC -> 0.05s diff
+
[18:37:38] EVENT: PAUSE -> BROADCAST
+
[18:37:42] content_heartbeat: active
+
+ +
+ GitHub Repository +
v1.9.3
+
+
+
+
+
+
+
+ +
+
+ A cute koala juggling multiple browser tabs showing streaming platforms +

+ Funktioniert auf deinen Lieblingsplattformen +

+
+ + + + + + + +
+
+
+ +
+
+

+ Perfekt für jeden Anlass +

+

+ Ob nah oder fern, KoalaSync bringt Menschen bei ihren Lieblingsvideos zusammen. +

+
+
+ Zwei niedliche Koalas sitzen zusammen und teilen sich einen Eimer Popcorn +

+ Filmabend mit Freunden +

+

Synchronisiere eure Filme in Echtzeit und quatscht nebenbei auf Discord, Zoom oder im Tool eurer Wahl. Es fühlt sich an, als säßet ihr im selben Raum.

+
+
+ Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas +

+ Gemeinsam Lernen +

+

Analysiert Online-Tutorials, Vorlesungen oder Streams gemeinsam mit Mitschülern oder Kollegen. Pausiert und besprecht komplizierte Schritte in perfektem Sync.

+
+
+ Ein niedliches Koala-Pärchen schaut remote zusammen; einer sitzt am PC und sie liegt mit dem Laptop im Bett, während Herzen zwischen ihnen fliegen +

+ Fernbeziehungen +

+

Überbrückt die Distanz und genießt gemeinsame Date-Nächte. Erlebt jeden Plot-Twist, lacht über dieselben Witze und teilt emotionale Momente zur selben Millisekunde.

+
+
+
+
+ +
+
+ A cute koala with a question mark above its head wondering why to choose KoalaSync +

+ Warum KoalaSync? +

+

+ Entwickelt für zuverlässigen Sync, Datenschutz und einfache Einrichtung. +

+ +
+ +
+

+ + + + Volle Kontrolle, in Echtzeit +

+

Einer pausiert, alle pausieren. Einer spult, alle folgen. Unser Zwei-Phasen-Synchronisationsprotokoll koordiniert die Wiedergabe aller Teilnehmer in Echtzeit.

+
+ + +
+

+ + + + Grenzenloses Bingen +

+

Nächste Episode startet für jeden zeitgleich. KoalaSync erkennt den Episodenwechsel und pausiert, bis jeder Teilnehmer das neue Video fertig geladen hat.

+
+ + +
+

+ + + + Keine Accounts / Datenschutz +

+

Kein Login. Keine Daten. Einfach Link teilen und schauen. Der Server läuft flüchtig im RAM und löscht deinen Raum komplett nach dem Verlassen.

+
+ STATE: VOLATILE + RAM-ONLY +
+
+ + +
+

+ + + + Universeller HTML5-Support +

+

Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und fast jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.

+
+ + +
+

+ + + + Self-Hostable & Docker-Ready +

+

Unsere Server sind kostenlos und schnell, aber du kannst auch die volle Kontrolle übernehmen, wenn du willst. Starte dein eigenes privates Relay in Sekunden via Docker.

+
+ + +
+

+ + + + Direkte Einladungen & 1-Klick Beitritt +

+

Keine lästigen IPs oder Passwörter austauschen. Teile einfach einen Einladungslink mit deinen Freunden, um sie mit einem Klick in den Raum zu holen.

+
+
+ +
+
+ +
+
+ A cute koala weighing options in both hands to compare KoalaSync vs Teleparty +

+ KoalaSync vs. Teleparty +

+

+ Erfahre, warum Open Source, Werbefreiheit und echter Datenschutz die bessere Wahl für gemeinsames Schauen sind. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionKoalaSyncTeleparty
+ Kosten / Paywalls + Premium-Abos, versteckte Kosten oder gesperrte Funktionen. + ✔ 100% Kostenlos + ✘ Premium-Abo / Paywalls + [1] +
+ Lizenz / Quellcode + Ob der Quellcode quelloffen und frei einsehbar ist. + ✔ Open Source (MIT) + ✘ Proprietär + [2] +
+ Self-Hosting + Möglichkeit, einen eigenen privaten Relay-Server zu betreiben. + ✔ Ja (Docker-bereit) + ✘ Nein + [2] +
+ Datenschutz & Tracking + Registrierungszwang, Tracking-Cookies und Analysen. + ✔ Keine Speicherung (RAM-only) + ✘ Google Analytics & Cookies + [2] +
+ Kompatibilität + Unterstützte Webseiten und Player-Kompatibilität. + ✔ Fast jedes HTML5-Video[3] + ✘ Nur unterstützte Seiten + [1] +
+
+

+ Stand des Vergleichs: Mai 2026. +

+

+ [1] + Details zu Preisen und unterstützten Netzwerken von Teleparty Premium: + teleparty.com/premium +

+

+ [2] + Datenschutzerklärung und Tracker-Erfassung von Teleparty: + teleparty.com/privacy +

+

+ [3] + Funktioniert auf allen Seiten, die Skript-Injektionen in Standard-HTML5-Videoplayer erlauben. Seiten mit extrem strengen Content Security Policies (CSP), DRM-Kopierschutz oder stark verschachtelten Player-Wrappern (z. B. komplexe Shadow-DOMs) können die automatische Steuerung blockieren. +

+
+
+
+
+ +
+
+

+ Erste Schritte +

+ +
+
+
+
01
+

Erweiterung installieren

+

Füge KoalaSync aus dem Chrome Web Store, den Firefox Add-ons oder über die Entwickler-ZIP von GitHub zu deinem Browser hinzu.

+
+ +
+
+
+
+ + + +
+
+ https://sync.koalastuff.net +
+
+
+ KoalaSync Extension +
+
+
+
+
+
+ +
+
KoalaSync
+
+ Privatsphäre-fokussierte Video-Synchronisation +
+
+
+
+
+ Chrome Logo + Download für Chrome +
+
+ Firefox Logo + Download für Firefox +
+
+
+ + +
+
+ KoalaSync Logo + KoalaSync +
+
+
+ ✓ + Erweiterung aktiv +
+
+
+ Bereit zum Mitschauen! +
+
+
+
+
+
+
+
+
02
+

Raum erstellen

+

Öffne die Erweiterung und klicke auf „+ Neuer Raum“. KoalaSync generiert automatisch eine sichere Raum-ID samt Passwort, tritt dem Raum bei und kopiert den Einladungslink in deine Zwischenablage.

+
+ +
+
+
+
+ KoalaSync Logo + KoalaSync +
+
v1.9.3
+
+
+
+ Raum +
+
+ Sync +
+
+ Optionen +
+
+
+
+ + Neuer Raum +
+
+ +
+ ▶ + Manuell verbinden / Erweitert +
+ +
+ 📋 + Einladungslink kopiert! +
+
+
+
+
+
+
+
03
+

Teilen & Synchronisieren

+

Sende den Einladungslink an deine Freunde. Sobald sie beitreten, wähle deinen Video-Tab aus und genieße die synchronisierte Wiedergabe.

+
+ +
+
+ +
+
+ 🐨 KoalaPC + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+ + +
+
+
+
+
+ SYNCHRON +
+
+ + +
+
+ 💻 LaptopKoala + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+
+
+
+
+
+
+ + +
+
+

+ Für Self-Hoster +

+

+ Du traust dem Server nicht? Behalte die volle Datenhoheit. Richte deinen eigenen privaten Relay-Server in wenigen Minuten ein. +

+ + +
+ Ein niedlicher Koala sitzt am Laptop und deployt einen Docker-Container für das Self-Hosting +
+ +
+
+
+ + + +
+
+ + +
+
+
+ + +
+ 
services:
+  koala-sync:
+    image: ghcr.io/shik3i/koalasync:latest
+    container_name: KoalaSync
+    restart: always
+    # Access internally by proxying to container port 3000
+    environment:
+      - TZ=Europe/Berlin
+      - PORT=3000
+      - MIN_VERSION=1.0.0
+      - MAX_ROOMS=100
+      - MAX_PEERS_PER_ROOM=50
+    pids_limit: 2048
+ +
+ +
+ 
sync.koalastuff.net {
+    # Specify the web root inside the container
+    root * /var/www/html
+
+    # Enable static file server to deliver HTML, CSS, JS
+    file_server
+}
+
+syncserver.koalastuff.net {
+    reverse_proxy KoalaSync:3000
+}
+
+
+
+
+
+ +
+
+

+ Noch nicht überzeugt? Überzeug dich selbst. +

+

+ KoalaSync ist zu 100 % Open Source, werbefrei und trackingsicher. Überprüfe unseren Code auf GitHub oder installiere direkt die Browser-Erweiterung. +

+
+ + Chrome + Zu Chrome hinzufügen + + + Firefox + Zu Firefox hinzufügen + +
+ + + Ein niedlicher Koala hält eine GitHub-Projektseite zusammen mit dem GitHub Maskottchen Octocat + + +
+ + + GitHub + +
+
+
+ +
+
+

© 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/es/index.html b/website/www/es/index.html new file mode 100644 index 0000000..2573e26 --- /dev/null +++ b/website/www/es/index.html @@ -0,0 +1,1014 @@ + + + + + + KoalaSync | Sincroniza Netflix, YouTube y cualquier video con amigos + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+
+ v1.5.3 OUT NOW + v1.5.3 JETZT VERFÜGBAR +
+

Miren juntos.
Sincronización perfecta.

+

Tu noche de películas a distancia sin retrasos. Sin registro ni recopilación de datos. Solo comparte un enlace y miren juntos.

+
+ Un lindo koala de pie mirando hacia abajo a los botones de descarga +
+
+ + Chrome + Añadir a Chrome + + + Firefox + Añadir a Firefox + + + + GitHub Releases + +
+
+ + +
+
+
+
KoalaSync LogoKoalaSync
+ + + v1.9.3 + +
+
+ + + + +
+
+ +
+
+
+ Active RoomAktiver Raum + brave-eagle-80 +
+ Official ServerOffizieller Server +
+
+
Invite LinkEinladungs-Link
+
+ + +
+
+
+
Peers in RoomTeilnehmer im Raum
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ +
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
+ + Jump to OthersZu anderen springen + + ▼ +
+
+ + +
+
+ PAUSE + CoolUsername @ 12:44:32 +
+
+
+
✓
+ 🐨 KoalaPC +
+
+
+ + +
+
+ ⏳ + Episode Lobby +
+
+ 🎬 Stranger Things - S4E2 +
+
+ Waiting for 1 peer (KoalaPC)...Warten auf 1 Partner (KoalaPC)... +
+ +
+ + +
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +

+ Use this if you see "Duplicate Identity" errors. + Nutze dies bei "Duplicate Identity" Fehlern. +

+
+
+ + +
+ +
+ + + ConnectedVerbunden + + +
+ + +
+
readyState: HAVE_ENOUGH_DATA
+
seekDelta: 0.05s
+
buffered: 300.2s
+
engineState: SYNCED
+
+ + +
+
+ CoolUsername: PAUSE + 0:55 +
+
+ KoalaPC: PLAY + 0:00 +
+
+ +
+ + +
+
+
[18:37:32] EVENT: PLAY -> ACK
+
[18:37:32] FORCE_SYNC -> 0.05s diff
+
[18:37:38] EVENT: PAUSE -> BROADCAST
+
[18:37:42] content_heartbeat: active
+
+ +
+ GitHub Repository +
v1.9.3
+
+
+
+
+
+
+
+ +
+
+ A cute koala juggling multiple browser tabs showing streaming platforms +

+ Funciona en tus plataformas favoritas +

+
+ + + + + + + +
+
+
+ +
+
+

+ Perfecto para cualquier ocasión +

+

+ Ya sea cerca o lejos, KoalaSync une a las personas en torno a sus videos favoritos. +

+
+
+ Dos lindos koalas sentados juntos compartiendo un cubo de palomitas de maíz +

+ Noche de películas con amigos +

+

Sincroniza tus películas en tiempo real y habla por Discord, Zoom o tu aplicación de llamada de voz favorita. Es como estar en la misma habitación.

+
+
+ Un profesor koala presentando en una pantalla a dos estudiantes koala remotos +

+ Aprendizaje a distancia +

+

Analiza tutoriales en línea, conferencias o transmisiones de capacitación de desarrolladores con compañeros o colegas. Pausa y discute pasos complejos en perfecta armonía.

+
+
+ Una linda pareja de koalas viendo juntos de forma remota; uno está sentado frente a una PC y el otro en la cama con una computadora portátil, con corazones volando entre ellos +

+ Relaciones a larga distancia +

+

Reduce la distancia y disfruta de noches de citas. Experimenta cada giro de la trama, ríete de los mismos chistes y comparte momentos emotivos en el mismo milisegundo exacto.

+
+
+
+
+ +
+
+ A cute koala with a question mark above its head wondering why to choose KoalaSync +

+ ¿Por qué KoalaSync? +

+

+ Diseñado para una sincronización confiable, privacidad y una configuración sencilla. +

+ +
+ +
+

+ + + + Control total / Sincronización instantánea +

+

Uno pausa, todos pausan. Uno avanza, todos siguen. Nuestro protocolo de sincronización en dos fases coordina la reproducción en tiempo real para todos los participantes.

+
+ + +
+

+ + + + Maratones sin fin +

+

Reproducción automática sincronizada. KoalaSync detecta automáticamente transiciones de episodios y suspende la reproducción hasta que todos los participantes hayan cargado el siguiente video.

+
+ + +
+

+ + + + Sin cuentas / Privacidad absoluta +

+

Sin registros, sin seguimiento, sin almacenamiento de datos. El servidor funciona completamente en RAM efímera y elimina tu sala tan pronto como sales.

+
+ STATE: VOLATILE + RAM-ONLY +
+
+ + +
+

+ + + + Soporte universal HTML5 +

+

Funciona en YouTube, Twitch, Netflix, Jellyfin, Emby y casi cualquier página web estándar que contenga un elemento de video HTML5. También es compatible con configuraciones personalizadas.

+
+ + +
+

+ + + + Auto-alojable y listo para Docker +

+

Nuestros servidores oficiales son gratuitos y rápidos, pero puedes tomar el control total si lo deseas. Inicia tu propio servidor de retransmisión privado en segundos a través de Docker.

+
+ + +
+

+ + + + Invitaciones al instante / Unirse en 1 clic +

+

Sin direcciones IP o contraseñas que intercambiar. Comparte un enlace de invitación generado para permitir que tus amigos se unan automáticamente a tu sala con un solo clic.

+
+
+ +
+
+ +
+
+ A cute koala weighing options in both hands to compare KoalaSync vs Teleparty +

+ KoalaSync vs Teleparty +

+

+ Descubre por qué una herramienta de código abierto, sin anuncios y respetuosa con la privacidad es la mejor opción para ver juntos. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaKoalaSyncTeleparty
+ Costo / Funciones de pago + Suscripciones premium, tarifas ocultas o funciones bloqueadas. + ✔ 100% Gratis + ✘ Suscripciones de pago / Bloqueos Premium + [1] +
+ Licence / Code auditable + Si el código fuente es abierto y libremente auditable. + ✔ Código Abierto (MIT) + ✘ Propietario + [2] +
+ Auto-alojamiento + Capacidad para desplegar tu propio servidor de retransmisión privado. + ✔ Sí (listo para Docker) + ✘ No + [2] +
+ Privacidad y Seguimiento + Requisitos de registro, cookies de seguimiento y análisis. + ✔ Sin persistencia (solo RAM) + ✘ Google Analytics y Cookies + [2] +
+ Compatibilidad del sitio + Sitios web compatibles y compatibilidad de reproductores. + ✔ Casi cualquier video HTML5[3] + ✘ Solo sitios compatibles + [1] +
+
+

+ Estado de la comparación: mayo de 2026. +

+

+ [1] + Detalles oficiales de precios de Teleparty Premium y redes compatibles: + teleparty.com/premium +

+

+ [2] + Políticas de privacidad y recopilación de datos de seguimiento de Teleparty: + teleparty.com/privacy +

+

+ [3] + Funciona en sitios web que permiten inyecciones de scripts en etiquetas de video HTML5 estándar. Los sitios con políticas de seguridad de contenido (CSP) muy estrictas, protección de copia DRM o contenedores de reproductores fuertemente ocultos (como DOMs de sombra complejos) pueden restringir el control automatizado o la inyección. +

+
+
+
+
+ +
+
+

+ Cómo empezar +

+ +
+
+
+
01
+

Instalar la extensión

+

Añade KoalaSync a tu navegador desde Chrome Web Store, complementos de Firefox o descarga el último archivo ZIP de desarrollador desde GitHub.

+
+ +
+
+
+
+ + + +
+
+ https://sync.koalastuff.net +
+
+
+ KoalaSync Extension +
+
+
+
+
+
+ +
+
KoalaSync
+
+ Sincronizador de video respetuoso con la privacidad +
+
+
+
+
+ Chrome Logo + Descargar para Chrome +
+
+ Firefox Logo + Descargar para Firefox +
+
+
+ + +
+
+ KoalaSync Logo + KoalaSync +
+
+
+ ✓ + Extensión activa +
+
+
+ ¡Listo para ver juntos! +
+
+
+
+
+
+
+
+
02
+

Crear una sala

+

Abre la ventana de la extensión y haz clic en '+ Crear nueva sala'. KoalaSync genera automáticamente un identificador de sala y una contraseña seguros, se conecta y copia el enlace de invitación a tu portapapeles.

+
+ +
+
+
+
+ KoalaSync Logo + KoalaSync +
+
v1.9.3
+
+
+
+ Sala +
+
+ Sincro +
+
+ Opciones +
+
+
+
+ + Crear nueva sala +
+
+ +
+ ▶ + Conexión manual / Avanzado +
+ +
+ 📋 + ¡Enlace de invitación copiado! +
+
+
+
+
+
+
+
03
+

Compartir y Sincronizar

+

Envía el enlace de invitación a tus amigos. Tan pronto como se unan, selecciona tu pestaña de video y disfruta de la reproducción sincronizada.

+
+ +
+
+ +
+
+ 🐨 KoalaPC + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+ + +
+
+
+
+
+ SINCRONIZADO +
+
+ + +
+
+ 💻 LaptopKoala + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+
+
+
+
+
+
+ + +
+
+

+ Para auto-alojadores +

+

+ ¿No confías en nuestro servidor? Mantén la soberanía total de los datos. Despliega tu propio servidor de retransmisión en minutos. +

+ + +
+ Un lindo koala sentado frente a una computadora portátil desplegando un contenedor Docker para auto-alojamiento +
+ +
+
+
+ + + +
+
+ + +
+
+
+ + +
+ 
services:
+  koala-sync:
+    image: ghcr.io/shik3i/koalasync:latest
+    container_name: KoalaSync
+    restart: always
+    # Access internally by proxying to container port 3000
+    environment:
+      - TZ=Europe/Berlin
+      - PORT=3000
+      - MIN_VERSION=1.0.0
+      - MAX_ROOMS=100
+      - MAX_PEERS_PER_ROOM=50
+    pids_limit: 2048
+ +
+ +
+ 
sync.koalastuff.net {
+    # Specify the web root inside the container
+    root * /var/www/html
+
+    # Enable static file server to deliver HTML, CSS, JS
+    file_server
+}
+
+syncserver.koalastuff.net {
+    reverse_proxy KoalaSync:3000
+}
+
+
+
+
+
+ +
+
+

+ ¿Aún no te convence? Compruébalo tú mismo. +

+

+ KoalaSync es 100% de código abierto, sin anuncios y sin seguimiento. Audita nuestra base de código en GitHub o instala la extensión del navegador directamente. +

+
+ + Chrome + Añadir a Chrome + + + Firefox + Añadir a Firefox + +
+ + + Un lindo koala sosteniendo una página de repositorio de GitHub junto a Octocat, la mascota de GitHub + + +
+ + + GitHub + +
+
+
+ + + + + + diff --git a/website/www/fr/index.html b/website/www/fr/index.html new file mode 100644 index 0000000..d51e830 --- /dev/null +++ b/website/www/fr/index.html @@ -0,0 +1,1014 @@ + + + + + + KoalaSync | Synchronisez Netflix, YouTube et n'importe quelle vidéo avec vos amis + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+
+ v1.5.3 OUT NOW + v1.5.3 JETZT VERFÜGBAR +
+

Regardez ensemble.
Synchronisation parfaite.

+

Votre soirée cinéma à distance sans décalage. Pas d'inscription, pas de collecte de données. Partagez simplement un lien et regardez ensemble.

+
+ Un koala mignon debout et regardant vers le bas les boutons de téléchargement +
+
+ + Chrome + Ajouter à Chrome + + + Firefox + Ajouter à Firefox + + + + GitHub Releases + +
+
+ + +
+
+
+
KoalaSync LogoKoalaSync
+ + + v1.9.3 + +
+
+ + + + +
+
+ +
+
+
+ Active RoomAktiver Raum + brave-eagle-80 +
+ Official ServerOffizieller Server +
+
+
Invite LinkEinladungs-Link
+
+ + +
+
+
+
Peers in RoomTeilnehmer im Raum
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ +
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
+ + Jump to OthersZu anderen springen + + ▼ +
+
+ + +
+
+ PAUSE + CoolUsername @ 12:44:32 +
+
+
+
✓
+ 🐨 KoalaPC +
+
+
+ + +
+
+ ⏳ + Episode Lobby +
+
+ 🎬 Stranger Things - S4E2 +
+
+ Waiting for 1 peer (KoalaPC)...Warten auf 1 Partner (KoalaPC)... +
+ +
+ + +
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +

+ Use this if you see "Duplicate Identity" errors. + Nutze dies bei "Duplicate Identity" Fehlern. +

+
+
+ + +
+ +
+ + + ConnectedVerbunden + + +
+ + +
+
readyState: HAVE_ENOUGH_DATA
+
seekDelta: 0.05s
+
buffered: 300.2s
+
engineState: SYNCED
+
+ + +
+
+ CoolUsername: PAUSE + 0:55 +
+
+ KoalaPC: PLAY + 0:00 +
+
+ +
+ + +
+
+
[18:37:32] EVENT: PLAY -> ACK
+
[18:37:32] FORCE_SYNC -> 0.05s diff
+
[18:37:38] EVENT: PAUSE -> BROADCAST
+
[18:37:42] content_heartbeat: active
+
+ +
+ GitHub Repository +
v1.9.3
+
+
+
+
+
+
+
+ +
+
+ A cute koala juggling multiple browser tabs showing streaming platforms +

+ Fonctionne sur vos plateformes préférées +

+
+ + + + + + + +
+
+
+ +
+
+

+ Parfait pour toutes les occasions +

+

+ Que ce soit de près ou de loin, KoalaSync rassemble les gens autour de leurs vidéos préférées. +

+
+
+ Deux koalas mignons assis ensemble et partageant un seau de pop-corn +

+ Soirée cinéma entre amis +

+

Synchronisez vos films en temps réel et parlez via Discord, Zoom ou votre application d'appel vocal préférée. C'est comme si vous étiez dans la même pièce.

+
+
+ Un professeur koala faisant une présentation sur un écran à deux élèves koalas à distance +

+ Apprentissage à distance +

+

Analysez des tutoriels en ligne, des conférences ou des flux de formation de développeurs avec des camarades ou des collègues. Faites une pause et discutez des étapes complexes en parfaite harmonie.

+
+
+ Un couple de koalas mignons regardant ensemble à distance ; l'un est assis devant un PC et l'autre est au lit avec un ordinateur portable, avec des cœurs volants entre eux +

+ Relations à distance +

+

Comblez la distance et profitez de soirées en tête-à-tête. Vivez chaque rebondissement, riez des mêmes blagues et partagez des moments émotionnels à la milliseconde près.

+
+
+
+
+ +
+
+ A cute koala with a question mark above its head wondering why to choose KoalaSync +

+ Pourquoi KoalaSync ? +

+

+ Conçu pour une synchronisation fiable, le respect de la vie privée et une configuration facile. +

+ +
+ +
+

+ + + + Contrôle total / Synchro instantanée +

+

Un joueur met en pause, tout le monde met en pause. Un joueur avance, tout le monde suit. Notre protocole de synchronisation en deux phases coordonne la lecture en temps réel pour tous les participants.

+
+ + +
+

+ + + + Binge-watching sans fin +

+

Lecture automatique synchronisée. KoalaSync détecte automatiquement les transitions d'épisodes et suspend la lecture jusqu'à ce que tous les participants aient chargé la vidéo suivante.

+
+ + +
+

+ + + + Aucun compte / Vie privée garantie +

+

Pas d'inscription, pas de suivi, pas de stockage de données. Le serveur fonctionne entièrement dans une RAM éphémère et supprime votre salon dès votre départ.

+
+ STATE: VOLATILE + RAM-ONLY +
+
+ + +
+

+ + + + Support HTML5 universel +

+

Fonctionne sur YouTube, Twitch, Netflix, Jellyfin, Emby et presque n'importe quelle page web standard contenant un élément vidéo HTML5. Également compatible avec les installations personnalisées.

+
+ + +
+

+ + + + Hébergeable soi-même & prêt pour Docker +

+

Nos serveurs officiels sont gratuits et rapides, mais vous pouvez prendre le contrôle total si vous le souhaitez. Lancez votre propre serveur relais privé en quelques secondes via Docker.

+
+ + +
+

+ + + + Invitations instantanées / Rejoindre en 1 clic +

+

Pas d'adresses IP ou de mots de passe à échanger. Partagez un lien d'invitation généré pour permettre à vos amis de rejoindre automatiquement votre salon en un seul clic.

+
+
+ +
+
+ +
+
+ A cute koala weighing options in both hands to compare KoalaSync vs Teleparty +

+ KoalaSync vs Teleparty +

+

+ Découvrez pourquoi un outil open-source, sans publicité et respectueux de la vie privée est le meilleur choix pour regarder ensemble. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéKoalaSyncTeleparty
+ Coût / Limites payantes + Abonnements premium, frais cachés ou fonctionnalités verrouillées. + ✔ 100% Gratuit + ✘ Abonnements payants / Verrous Premium + [1] +
+ Licence / Code auditable + Si le code source est ouvert et librement auditable. + ✔ Open Source (MIT) + ✘ Propriétaire + [2] +
+ Auto-hébergement + Possibilité de déployer votre propre serveur relais privé. + ✔ Oui (prêt pour Docker) + ✘ Non + [2] +
+ Vie privée & Suivi + Obligation d'inscription, cookies de suivi et analyses. + ✔ Zéro persistance (RAM uniquement) + ✘ Google Analytics & Cookies + [2] +
+ Compatibilité des sites + Sites web pris en charge et compatibilité des lecteurs. + ✔ Presque toutes les vidéos HTML5[3] + ✘ Sites pris en charge uniquement + [1] +
+
+

+ État de la comparaison : mai 2026. +

+

+ [1] + Détails sur les tarifs officiels de Teleparty Premium et les réseaux pris en charge : + teleparty.com/premium +

+

+ [2] + Politiques de confidentialité et collecte de données de suivi de Teleparty : + teleparty.com/privacy +

+

+ [3] + Fonctionne sur les sites web qui autorisent les injections de scripts dans les balises vidéo HTML5 standard. Les sites avec des politiques de sécurité du contenu (CSP) très strictes, une protection contre la copie DRM ou des conteneurs de lecteurs fortement obscurcis (comme des DOM fantômes complexes) peuvent restreindre le contrôle automatisé ou l'injection. +

+
+
+
+
+ +
+
+

+ Pour commencer +

+ +
+
+
+
01
+

Installer l'extension

+

Ajoutez KoalaSync à votre navigateur depuis le Chrome Web Store, les modules complémentaires de Firefox, ou téléchargez le dernier fichier ZIP développeur depuis GitHub.

+
+ +
+
+
+
+ + + +
+
+ https://sync.koalastuff.net +
+
+
+ KoalaSync Extension +
+
+
+
+
+
+ +
+
KoalaSync
+
+ Synchronisateur vidéo respectueux de la vie privée +
+
+
+
+
+ Chrome Logo + Télécharger pour Chrome +
+
+ Firefox Logo + Télécharger pour Firefox +
+
+
+ + +
+
+ KoalaSync Logo + KoalaSync +
+
+
+ ✓ + Extension active +
+
+
+ Prêt à regarder ensemble ! +
+
+
+
+
+
+
+
+
02
+

Créer un salon

+

Ouvrez la fenêtre de l'extension et cliquez sur '+ Créer un nouveau salon'. KoalaSync génère automatiquement un identifiant de salon et un mot de passe sécurisés, s'y connecte et copie le lien d'invitation dans votre presse-papiers.

+
+ +
+
+
+
+ KoalaSync Logo + KoalaSync +
+
v1.9.3
+
+
+
+ Salon +
+
+ Synchro +
+
+ Options +
+
+
+
+ + Créer un nouveau salon +
+
+ +
+ ▶ + Connexion manuelle / Avancé +
+ +
+ 📋 + Lien d'invitation copié ! +
+
+
+
+
+
+
+
03
+

Partager & Synchroniser

+

Envoyez le lien d'invitation à vos amis. Dès qu'ils rejoignent, sélectionnez votre onglet vidéo et profitez de la lecture synchronisée.

+
+ +
+
+ +
+
+ 🐨 KoalaPC + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+ + +
+
+
+
+
+ SYNCHRONISÉ +
+
+ + +
+
+ 💻 LaptopKoala + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+
+
+
+
+
+
+ + +
+
+

+ Pour l'auto-hébergement +

+

+ Vous ne faites pas confiance à notre serveur ? Conservez votre souveraineté totale sur les données. Déployez votre propre serveur relais en quelques minutes. +

+ + +
+ Un koala mignon assis devant un ordinateur portable déployant un conteneur Docker pour l'auto-hébergement +
+ +
+
+
+ + + +
+
+ + +
+
+
+ + +
+ 
services:
+  koala-sync:
+    image: ghcr.io/shik3i/koalasync:latest
+    container_name: KoalaSync
+    restart: always
+    # Access internally by proxying to container port 3000
+    environment:
+      - TZ=Europe/Berlin
+      - PORT=3000
+      - MIN_VERSION=1.0.0
+      - MAX_ROOMS=100
+      - MAX_PEERS_PER_ROOM=50
+    pids_limit: 2048
+ +
+ +
+ 
sync.koalastuff.net {
+    # Specify the web root inside the container
+    root * /var/www/html
+
+    # Enable static file server to deliver HTML, CSS, JS
+    file_server
+}
+
+syncserver.koalastuff.net {
+    reverse_proxy KoalaSync:3000
+}
+
+
+
+
+
+ +
+
+

+ Pas encore convaincu ? Voyez par vous-même. +

+

+ KoalaSync est 100% open source, sans publicité et sans suivi. Auditez notre base de code sur GitHub ou installez directement l'extension de navigateur. +

+
+ + Chrome + Ajouter à Chrome + + + Firefox + Ajouter à Firefox + +
+ + + Un koala mignon tenant une page de dépôt GitHub à côté d'Octocat, la mascotte de GitHub + + +
+ + + GitHub + +
+
+
+ + + + + + diff --git a/website/www/impressum.html b/website/www/impressum.html new file mode 100644 index 0000000..4dbd67b --- /dev/null +++ b/website/www/impressum.html @@ -0,0 +1,184 @@ + + + + + + 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. +

+
+
+
+ + + + + + diff --git a/website/www/index.html b/website/www/index.html new file mode 100644 index 0000000..7e86134 --- /dev/null +++ b/website/www/index.html @@ -0,0 +1,1014 @@ + + + + + + KoalaSync | Sync Netflix, YouTube & Any Video with Friends + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+
+ v1.5.3 OUT NOW + v1.5.3 JETZT VERFÜGBAR +
+

Watch Together.
Sync Perfectly.

+

Your remote movie night without lags. No registration, no data collection. Just share a link and watch together.

+
+ A cute koala standing and looking down at the download buttons +
+
+ + Chrome + Add to Chrome + + + Firefox + Add to Firefox + + + + GitHub Releases + +
+
+ + +
+
+
+
KoalaSync LogoKoalaSync
+ + + v1.9.3 + +
+
+ + + + +
+
+ +
+
+
+ Active RoomAktiver Raum + brave-eagle-80 +
+ Official ServerOffizieller Server +
+
+
Invite LinkEinladungs-Link
+
+ + +
+
+
+
Peers in RoomTeilnehmer im Raum
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ +
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
+ + Jump to OthersZu anderen springen + + ▼ +
+
+ + +
+
+ PAUSE + CoolUsername @ 12:44:32 +
+
+
+
✓
+ 🐨 KoalaPC +
+
+
+ + +
+
+ ⏳ + Episode Lobby +
+
+ 🎬 Stranger Things - S4E2 +
+
+ Waiting for 1 peer (KoalaPC)...Warten auf 1 Partner (KoalaPC)... +
+ +
+ + +
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +

+ Use this if you see "Duplicate Identity" errors. + Nutze dies bei "Duplicate Identity" Fehlern. +

+
+
+ + +
+ +
+ + + ConnectedVerbunden + + +
+ + +
+
readyState: HAVE_ENOUGH_DATA
+
seekDelta: 0.05s
+
buffered: 300.2s
+
engineState: SYNCED
+
+ + +
+
+ CoolUsername: PAUSE + 0:55 +
+
+ KoalaPC: PLAY + 0:00 +
+
+ +
+ + +
+
+
[18:37:32] EVENT: PLAY -> ACK
+
[18:37:32] FORCE_SYNC -> 0.05s diff
+
[18:37:38] EVENT: PAUSE -> BROADCAST
+
[18:37:42] content_heartbeat: active
+
+ +
+ GitHub Repository +
v1.9.3
+
+
+
+
+
+
+
+ +
+
+ A cute koala juggling multiple browser tabs showing streaming platforms +

+ Works on your favorite platforms +

+
+ + + + + + + +
+
+
+ +
+
+

+ Perfect for Any Occasion +

+

+ Whether near or far, KoalaSync brings people together around their favorite videos. +

+
+
+ Two cute koalas sitting together and sharing a bucket of popcorn +

+ Movie Night with Friends +

+

Sync your movies in real time and talk via Discord, Zoom, or your favorite voice call application. It feels just like sitting in the same room.

+
+
+ A koala professor presenting on a screen to two remote student koalas +

+ Remote Learning +

+

Analyze online tutorials, lectures, or developer training streams together with classmates or colleagues. Pause and discuss complex steps in perfect harmony.

+
+
+ A cute koala couple watching together remotely; one is sitting at a PC and the other is in bed with a laptop, with flying hearts between them +

+ Long-Distance Relationships +

+

Bridge the distance and enjoy date nights. Experience every plot twist, laugh at the same jokes, and share emotional moments at the exact same millisecond.

+
+
+
+
+ +
+
+ A cute koala with a question mark above its head wondering why to choose KoalaSync +

+ Why KoalaSync? +

+

+ Built for reliable sync, privacy-first design, and easy setup. +

+ +
+ +
+

+ + + + Full Control / Instant Sync +

+

One pauses, everyone pauses. One seeks, everyone follows. Our two-phase sync protocol coordinates playback in real time across all participants.

+
+ + +
+

+ + + + Endless Binge-Watching +

+

Autoplay in sync. KoalaSync automatically detects episode transitions and holds playback until all peers have successfully loaded the next video.

+
+ + +
+

+ + + + Zero Accounts / Pure Privacy +

+

No registration, no tracking, no persistency footprints. The server runs entirely in ephemeral RAM and purges your room when you leave.

+
+ STATE: VOLATILE + RAM-ONLY +
+
+ + +
+

+ + + + Universal HTML5 Support +

+

Works on YouTube, Twitch, Netflix, Jellyfin, Emby, and almost any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.

+
+ + +
+

+ + + + Self-Hostable & Docker-Ready +

+

Our official servers are free and fast, but you can take full ownership if you want to. Launch your own private relay server in seconds via Docker.

+
+ + +
+

+ + + + Instant Invites / 1-Click Join +

+

No IP addresses or passwords to exchange. Share a generated invite link with your friends to let them join your room automatically with a single click.

+
+
+ +
+
+ +
+
+ A cute koala weighing options in both hands to compare KoalaSync vs Teleparty +

+ KoalaSync vs. Teleparty +

+

+ See why open source, ad-free and privacy-first is the superior way to watch together. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureKoalaSyncTeleparty
+ Cost / Paywalls + Premium subscriptions, hidden fees or locked features. + ✔ 100% Free + ✘ Paid Tiers / Premium Locks + [1] +
+ License / Code Auditable + Whether the source code is open and freely auditable. + ✔ Open Source (MIT) + ✘ Proprietary + [2] +
+ Self-Hosting + Ability to deploy your own private relay server. + ✔ Yes (Docker-ready) + ✘ No + [2] +
+ Privacy & Tracking + Registration requirements, tracking cookies and analytics. + ✔ Zero-Persistence (RAM-only) + ✘ Google Analytics & Cookies + [2] +
+ Site Compatibility + Supported websites and player compatibility. + ✔ Almost any HTML5 Video[3] + ✘ Supported sites only + [1] +
+
+

+ Comparison state: May 2026. +

+

+ [1] + Official Teleparty Premium pricing and supported networks details: + teleparty.com/premium +

+

+ [2] + Teleparty privacy policies and tracking data collection: + teleparty.com/privacy +

+

+ [3] + Works on websites that allow script injections into standard HTML5 video tags. Websites with highly strict Content Security Policies (CSP), DRM copy protection, or heavily obfuscated player wrappers (like complex shadow DOMs) might restrict automated control or injection. +

+
+
+
+
+ +
+
+

+ Getting Started +

+ +
+
+
+
01
+

Install Extension

+

Add KoalaSync to your browser from the Chrome Web Store, Firefox Add-ons, or download the latest developer ZIP from GitHub.

+
+ +
+
+
+
+ + + +
+
+ https://sync.koalastuff.net +
+
+
+ KoalaSync Extension +
+
+
+
+
+
+ +
+
KoalaSync
+
+ Privacy-first video synchronizer +
+
+
+
+
+ Chrome Logo + Download for Chrome +
+
+ Firefox Logo + Download for Firefox +
+
+
+ + +
+
+ KoalaSync Logo + KoalaSync +
+
+
+ ✓ + Extension Active +
+
+
+ Ready to watch together! +
+
+
+
+
+
+
+
+
02
+

Create a Room

+

Open the extension popup and click '+ Create New Room'. KoalaSync automatically generates a secure Room ID and Password, joins it, and copies the invite link to your clipboard.

+
+ +
+
+
+
+ KoalaSync Logo + KoalaSync +
+
v1.9.3
+
+
+
+ Room +
+
+ Sync +
+
+ Settings +
+
+
+
+ + Create New Room +
+
+ +
+ ▶ + Manual Connect / Advanced +
+ +
+ 📋 + Invite link copied! +
+
+
+
+
+
+
+
03
+

Share & Sync

+

Send the invite link to your friends. Once they join, select your video tab and enjoy synchronized playback.

+
+ +
+
+ +
+
+ 🐨 KoalaPC + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+ + +
+
+
+
+
+ IN SYNC +
+
+ + +
+
+ 💻 LaptopKoala + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+
+
+
+
+
+
+ + +
+
+

+ For Self-Hosters +

+

+ Don't trust our server? Maintain full data sovereignty. Deploy your own private relay server in minutes. +

+ + +
+ A cute koala sitting at a laptop deploying a Docker container for self-hosting +
+ +
+
+
+ + + +
+
+ + +
+
+
+ + +
+ 
services:
+  koala-sync:
+    image: ghcr.io/shik3i/koalasync:latest
+    container_name: KoalaSync
+    restart: always
+    # Access internally by proxying to container port 3000
+    environment:
+      - TZ=Europe/Berlin
+      - PORT=3000
+      - MIN_VERSION=1.0.0
+      - MAX_ROOMS=100
+      - MAX_PEERS_PER_ROOM=50
+    pids_limit: 2048
+ +
+ +
+ 
sync.koalastuff.net {
+    # Specify the web root inside the container
+    root * /var/www/html
+
+    # Enable static file server to deliver HTML, CSS, JS
+    file_server
+}
+
+syncserver.koalastuff.net {
+    reverse_proxy KoalaSync:3000
+}
+
+
+
+
+
+ +
+
+

+ Not convinced? See for yourself. +

+

+ KoalaSync is 100% open source, ad-free and tracking-free. Audit our codebase on GitHub or install the browser extension directly. +

+
+ + Chrome + Add to Chrome + + + Firefox + Add to Firefox + +
+ + + A cute koala holding a GitHub repository page next to the GitHub mascot Octocat + + +
+ + + GitHub + +
+
+
+ + + + + + diff --git a/website/www/join.html b/website/www/join.html new file mode 100644 index 0000000..ae72f4b --- /dev/null +++ b/website/www/join.html @@ -0,0 +1,122 @@ + + + + + + Join Room | KoalaSync + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+ +
+ + + + + + diff --git a/website/www/lang-init.js b/website/www/lang-init.js new file mode 100644 index 0000000..3485abc --- /dev/null +++ b/website/www/lang-init.js @@ -0,0 +1,66 @@ +(function() { + var html = document.documentElement; + var path = window.location.pathname; + + // Check if we are on the root index page (either "/" or "/index.html" at the root) + var isRootIndex = path === '/' || path === '/index.html' || path === ''; + + if (isRootIndex) { + var savedLang = localStorage.getItem('koala_lang'); + var browserLang = navigator.language.startsWith('de') ? 'de' : 'en'; + var preferredLang = savedLang || browserLang; + + if (preferredLang === 'de') { + // Redirect to German version + window.location.replace('de/'); + return; + } + } + + var htmlClasses = html.className.split(' '); + var activeLang = null; + var hasStaticLang = false; + for (var i = 0; i < htmlClasses.length; i++) { + if (htmlClasses[i].indexOf('lang-') === 0) { + hasStaticLang = true; + var langPart = htmlClasses[i].substring(5); + activeLang = langPart === 'pt-br' ? 'pt-BR' : langPart; + break; + } + } + + if (hasStaticLang) { + localStorage.setItem('koala_lang', activeLang); + } else { + var savedLang = localStorage.getItem('koala_lang'); + var browserLang = navigator.language.startsWith('de') ? 'de' : 'en'; + activeLang = savedLang || browserLang; + + // Dynamic utility pages currently only support English and German markup. + // Fallback to English for any other language preference (e.g. fr, es) to avoid bilingual text duplication. + if (activeLang !== 'de') { + activeLang = 'en'; + } + + html.classList.add('lang-' + activeLang); + html.lang = activeLang; + } + + // Update titles dynamically based on page + var isIndex = path === '/' || path.endsWith('index.html') || path.split('/').pop() === ''; + var isJoin = path.includes('join'); + + if (isIndex) { + var titles = { + en: 'KoalaSync | Real-time Video Synchronization for Friends', + de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' + }; + document.title = titles[activeLang] || titles.en; + } else if (isJoin) { + var titles = { + en: 'Join Room | KoalaSync', + de: 'Raum beitreten | KoalaSync' + }; + document.title = titles[activeLang] || titles.en; + } +})(); diff --git a/website/www/pt-BR/index.html b/website/www/pt-BR/index.html new file mode 100644 index 0000000..2eb83dc --- /dev/null +++ b/website/www/pt-BR/index.html @@ -0,0 +1,1014 @@ + + + + + + KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com amigos + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+
+ v1.5.3 OUT NOW + v1.5.3 JETZT VERFÜGBAR +
+

Assistam juntos.
Sincronia perfeita.

+

Sua noite de cinema à distância sem atrasos. Sem registro, sem coleta de dados. Apenas compartilhe o link e assistam juntos.

+
+ Um lindo coala em pé olhando para baixo em direção aos botões de download +
+
+ + Chrome + Adicionar ao Chrome + + + Firefox + Adicionar ao Firefox + + + + GitHub Releases + +
+
+ + +
+
+
+
KoalaSync LogoKoalaSync
+ + + v1.9.3 + +
+
+ + + + +
+
+ +
+
+
+ Active RoomAktiver Raum + brave-eagle-80 +
+ Official ServerOffizieller Server +
+
+
Invite LinkEinladungs-Link
+
+ + +
+
+
+
Peers in RoomTeilnehmer im Raum
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ +
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
+ + Jump to OthersZu anderen springen + + ▼ +
+
+ + +
+
+ PAUSE + CoolUsername @ 12:44:32 +
+
+
+
✓
+ 🐨 KoalaPC +
+
+
+ + +
+
+ ⏳ + Episode Lobby +
+
+ 🎬 Stranger Things - S4E2 +
+
+ Waiting for 1 peer (KoalaPC)...Warten auf 1 Partner (KoalaPC)... +
+ +
+ + +
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +

+ Use this if you see "Duplicate Identity" errors. + Nutze dies bei "Duplicate Identity" Fehlern. +

+
+
+ + +
+ +
+ + + ConnectedVerbunden + + +
+ + +
+
readyState: HAVE_ENOUGH_DATA
+
seekDelta: 0.05s
+
buffered: 300.2s
+
engineState: SYNCED
+
+ + +
+
+ CoolUsername: PAUSE + 0:55 +
+
+ KoalaPC: PLAY + 0:00 +
+
+ +
+ + +
+
+
[18:37:32] EVENT: PLAY -> ACK
+
[18:37:32] FORCE_SYNC -> 0.05s diff
+
[18:37:38] EVENT: PAUSE -> BROADCAST
+
[18:37:42] content_heartbeat: active
+
+ +
+ GitHub Repository +
v1.9.3
+
+
+
+
+
+
+
+ +
+
+ A cute koala juggling multiple browser tabs showing streaming platforms +

+ Funciona nas suas plataformas favoritas +

+
+ + + + + + + +
+
+
+ +
+
+

+ Perfeito para qualquer ocasião +

+

+ Seja perto ou longe, o KoalaSync une as pessoas em torno de seus vídeos favoritos. +

+
+
+ Dois coalas fofos sentados juntos e compartilhando um balde de pipoca +

+ Noite de cinema com amigos +

+

Sincronize seus filmes em tempo real e converse pelo Discord, Zoom ou seu aplicativo de chamada de voz favorito. É como se estivessem na mesma sala.

+
+
+ Um professor coala fazendo uma apresentação em uma tela para dois alunos coala remotos +

+ Aprendizado remoto +

+

Analise tutoriais online, palestras ou transmissões de treinamento de desenvolvedores junto com colegas de classe ou de trabalho. Pause e discuta etapas complexas em perfeita harmonia.

+
+
+ Um casal de coalas fofos assistindo juntos remotamente; um está no PC e o outro deitado com um laptop, com corações voando entre eles +

+ Relacionamentos à distância +

+

Aproxime a distância e aproveite encontros virtuais. Experimente cada reviravolta, ria das mesmas piadas e compartilhe momentos emocionante no mesmo milissegundo.

+
+
+
+
+ +
+
+ A cute koala with a question mark above its head wondering why to choose KoalaSync +

+ Por que o KoalaSync? +

+

+ Desenvolvido para uma sincronização confiável, privacidade em primeiro lugar e configuração simples. +

+ +
+ +
+

+ + + + Controle total / Sincronia instantânea +

+

Um pausa, todos pausam. Um avança, todos seguem. Nosso protocolo de sincronização em duas fases coordena a reprodução em tempo real entre todos os participantes.

+
+ + +
+

+ + + + Maratones sem fim +

+

Reprodução automática sincronizada. O KoalaSync detecta automaticamente transições de episódios e pausa a reprodução até que todos os participantes tenham carregado o próximo vídeo.

+
+ + +
+

+ + + + Sem contas / Privacidade absoluta +

+

Sem registro, sem rastreamento, sem armazenamento de dados. O servidor roda inteiramente em memória RAM efêmera e limpa sua sala assim que você sai.

+
+ STATE: VOLATILE + RAM-ONLY +
+
+ + +
+

+ + + + Suporte universal a HTML5 +

+

Funciona no YouTube, Twitch, Netflix, Jellyfin, Emby e em quase qualquer página web padrão com um elemento de vídeo HTML5. Também é compatível com servidores próprios.

+
+ + +
+

+ + + + Auto-hospedável e pronto para Docker +

+

Nossos servidores oficiais são rápidos e gratuitos, mas você pode ter controle total se desejar. Inicie seu próprio servidor de retransmissão privado em segundos via Docker.

+
+ + +
+

+ + + + Convites instantâneos / Entrada em 1 clique +

+

Sem troca de endereços IP ou senhas. Compartilhe um link de convite gerado para que seus amigos entrem automaticamente na sua sala com um único clique.

+
+
+ +
+
+ +
+
+ A cute koala weighing options in both hands to compare KoalaSync vs Teleparty +

+ KoalaSync vs Teleparty +

+

+ Veja por que o código aberto, sem anúncios e com privacidade em primeiro lugar é a melhor escolha para assistirem juntos. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoKoalaSyncTeleparty
+ Custo / Bloqueios de recursos + Assinaturas premium, taxas ocultas ou recursos bloqueados. + ✔ 100% Gratuito + ✘ Assinaturas pagas / Bloqueios Premium + [1] +
+ Licença / Código auditável + Se o código-fonte é aberto e de livre auditoria. + ✔ Código Aberto (MIT) + ✘ Proprietário + [2] +
+ Auto-hospedagem + Capacidade de implantar seu próprio servidor de retransmissão privado. + ✔ Sim (pronto para Docker) + ✘ Não + [2] +
+ Privacidade e Rastreamento + Exigências de registro, cookies de rastreamento e análises. + ✔ Sem persistência (apenas RAM) + ✘ Google Analytics e Cookies + [2] +
+ Compatibilidade de sites + Sites suportados e compatibilidade do player. + ✔ Quase qualquer vídeo HTML5[3] + ✘ Apenas sites suportados + [1] +
+
+

+ Estado da comparação: maio de 2026. +

+

+ [1] + Preços oficiais do Teleparty Premium e detalhes das redes suportadas: + teleparty.com/premium +

+

+ [2] + Políticas de privacidade do Teleparty e coleta de dados de rastreamento: + teleparty.com/privacy +

+

+ [3] + Funciona em sites que permitem injeções de scripts em tags de vídeo HTML5 padrão. Sites com políticas de segurança de conteúdo (CSP) muito rígidas, proteção contra cópia DRM ou contêineres de player fortemente ocultos (como DOMs de sombra complexos) podem limitar o controle automatizado ou a injeção. +

+
+
+
+
+ +
+
+

+ Como começar +

+ +
+
+
+
01
+

Instalar a extensão

+

Adicione o KoalaSync ao seu navegador a partir da Chrome Web Store, Firefox Add-ons ou baixe o arquivo ZIP de desenvolvedor mais recente do GitHub.

+
+ +
+
+
+
+ + + +
+
+ https://sync.koalastuff.net +
+
+
+ KoalaSync Extension +
+
+
+
+
+
+ +
+
KoalaSync
+
+ Sincronizador de vídeo focado em privacidade +
+
+
+
+
+ Chrome Logo + Baixar para o Chrome +
+
+ Firefox Logo + Baixar para o Firefox +
+
+
+ + +
+
+ KoalaSync Logo + KoalaSync +
+
+
+ ✓ + Extensão ativa +
+
+
+ Prontos para assistir juntos! +
+
+
+
+
+
+
+
+
02
+

Criar uma sala

+

Abra a janela da extensão e clique em '+ Criar nova sala'. O KoalaSync gera automaticamente um ID de sala e senha seguros, entra nela e copia o link de convite para a sua área de transferência.

+
+ +
+
+
+
+ KoalaSync Logo + KoalaSync +
+
v1.9.3
+
+
+
+ Sala +
+
+ Sincro +
+
+ Opções +
+
+
+
+ + Criar nova sala +
+
+ +
+ ▶ + Conexão manual / Avançado +
+ +
+ 📋 + Link de convite copiado! +
+
+
+
+
+
+
+
03
+

Compartilhar e Sincronizar

+

Envie o link de convite para seus amigos. Assim que eles entrarem, selecione a aba do seu vídeo e aproveite a reprodução sincronizada.

+
+ +
+
+ +
+
+ 🐨 KoalaPC + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+ + +
+
+
+
+
+ SINCRONIZADO +
+
+ + +
+
+ 💻 LaptopKoala + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+
+
+
+
+
+
+ + +
+
+

+ Para quem hospeda próprio +

+

+ Não confia no nosso servidor? Mantenha a soberania total dos seus dados. Implante seu próprio servidor de retransmissão em minutos. +

+ + +
+ Um coala fofo sentado à frente de um laptop implantando um contêiner Docker para hospedagem própria +
+ +
+
+
+ + + +
+
+ + +
+
+
+ + +
+ 
services:
+  koala-sync:
+    image: ghcr.io/shik3i/koalasync:latest
+    container_name: KoalaSync
+    restart: always
+    # Access internally by proxying to container port 3000
+    environment:
+      - TZ=Europe/Berlin
+      - PORT=3000
+      - MIN_VERSION=1.0.0
+      - MAX_ROOMS=100
+      - MAX_PEERS_PER_ROOM=50
+    pids_limit: 2048
+ +
+ +
+ 
sync.koalastuff.net {
+    # Specify the web root inside the container
+    root * /var/www/html
+
+    # Enable static file server to deliver HTML, CSS, JS
+    file_server
+}
+
+syncserver.koalastuff.net {
+    reverse_proxy KoalaSync:3000
+}
+
+
+
+
+
+ +
+
+

+ Ainda não se convenceu? Veja por si mesmo. +

+

+ O KoalaSync é 100% de código aberto, livre de anúncios e sem rastreamento. Audite nosso código no GitHub ou instale a extensão do navegador diretamente. +

+
+ + Chrome + Adicionar ao Chrome + + + Firefox + Adicionar ao Firefox + +
+ + + Um coala fofo segurando uma página de repositório do GitHub ao lado de Octocat, a mascotte do GitHub + + +
+ + + GitHub + +
+
+
+ + + + + + diff --git a/website/www/robots.txt b/website/www/robots.txt new file mode 100644 index 0000000..29788bf --- /dev/null +++ b/website/www/robots.txt @@ -0,0 +1,6 @@ +# KoalaSync Website — Allow all crawlers, full indexing +User-agent: * +Allow: / + +# Sitemap for search engines +Sitemap: https://sync.koalastuff.net/sitemap.xml diff --git a/website/www/ru/index.html b/website/www/ru/index.html new file mode 100644 index 0000000..1c558aa --- /dev/null +++ b/website/www/ru/index.html @@ -0,0 +1,1014 @@ + + + + + + KoalaSync | Синхронизация Netflix, YouTube и любого видео с друзьями + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + +
+
+
+
+ v1.5.3 OUT NOW + v1.5.3 JETZT VERFÜGBAR +
+

Смотрите вместе.
Синхронно на 100%.

+

Ваш киновечер на расстоянии без задержек. Без регистрации и сбора данных. Просто поделитесь ссылкой и смотрите вместе.

+
+ Милый коала стоит и смотрит вниз на кнопки загрузки +
+
+ + Chrome + Установить в Chrome + + + Firefox + Установить в Firefox + + + + GitHub Releases + +
+
+ + +
+
+
+
KoalaSync LogoKoalaSync
+ + + v1.9.3 + +
+
+ + + + +
+
+ +
+
+
+ Active RoomAktiver Raum + brave-eagle-80 +
+ Official ServerOffizieller Server +
+
+
Invite LinkEinladungs-Link
+
+ + +
+
+
+
Peers in RoomTeilnehmer im Raum
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ +
+ + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
+ + Jump to OthersZu anderen springen + + ▼ +
+
+ + +
+
+ PAUSE + CoolUsername @ 12:44:32 +
+
+
+
✓
+ 🐨 KoalaPC +
+
+
+ + +
+
+ ⏳ + Episode Lobby +
+
+ 🎬 Stranger Things - S4E2 +
+
+ Waiting for 1 peer (KoalaPC)...Warten auf 1 Partner (KoalaPC)... +
+ +
+ + +
+
+
+
+ CoolUsername + YOUICH +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+ KoalaPC + PeerPartner +
+
🎬 Stranger Things - S4E1
+
● 0:55 • PlayingWiedergabe
+
+
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +

+ Use this if you see "Duplicate Identity" errors. + Nutze dies bei "Duplicate Identity" Fehlern. +

+
+
+ + +
+ +
+ + + ConnectedVerbunden + + +
+ + +
+
readyState: HAVE_ENOUGH_DATA
+
seekDelta: 0.05s
+
buffered: 300.2s
+
engineState: SYNCED
+
+ + +
+
+ CoolUsername: PAUSE + 0:55 +
+
+ KoalaPC: PLAY + 0:00 +
+
+ +
+ + +
+
+
[18:37:32] EVENT: PLAY -> ACK
+
[18:37:32] FORCE_SYNC -> 0.05s diff
+
[18:37:38] EVENT: PAUSE -> BROADCAST
+
[18:37:42] content_heartbeat: active
+
+ +
+ GitHub Repository +
v1.9.3
+
+
+
+
+
+
+
+ +
+
+ A cute koala juggling multiple browser tabs showing streaming platforms +

+ Работает на ваших любимых платформах +

+
+ + + + + + + +
+
+
+ +
+
+

+ Идеально для любого случая +

+

+ Близко или далеко — KoalaSync объединяет людей за просмотром любимых видео. +

+
+
+ Два милых коалы сидят вместе и делят ведро попкорна +

+ Киноночь с друзьями +

+

Синхронизируйте фильмы в реальном времени и общайтесь в Discord, Zoom или вашей любимой программе. Это ощущается так, будто вы сидите в одной комнате.

+
+
+ Профессор коала проводит презентацию на экране для двух удаленных студентов коал +

+ Удаленное обучение +

+

Разбирайте обучающие видео, лекции или стримы для разработчиков вместе с однокурсниками или коллегами. Ставьте на паузу и обсуждайте сложные шаги в идеальном согласии.

+
+
+ Милая пара коал смотрит видео удаленно; один сидит за ПК, другая в постели с ноутбуком, между ними летают сердечки +

+ Отношения на расстоянии +

+

Сократите расстояние и наслаждайтесь свиданиями. Переживайте каждый поворот сюжета, смейтесь над шутками и делитесь эмоциями в одну и ту же миллисекунду.

+
+
+
+
+ +
+
+ A cute koala with a question mark above its head wondering why to choose KoalaSync +

+ Почему KoalaSync? +

+

+ Создан для надежной синхронизации, конфиденциальности и простой настройки. +

+ +
+ +
+

+ + + + Полный контроль и мгновенный синхро +

+

Один ставит на паузу — пауза у всех. Один перематывает — все перематывают. Наш двухфазный протокол координирует воспроизведение в реальном времени у всех участников.

+
+ + +
+

+ + + + Бесконечные марафоны +

+

Синхронное автовоспроизведение. KoalaSync автоматически определяет переход на следующую серию и ждет, пока она загрузится у всех участников.

+
+ + +
+

+ + + + Без аккаунтов и хранения данных +

+

Без регистрации, без отслеживания, без следов на диске. Сервер работает исключительно во временной RAM и полностью стирает вашу комнату при выходе.

+
+ STATE: VOLATILE + RAM-ONLY +
+
+ + +
+

+ + + + Универсальная поддержка HTML5 +

+

Работает на YouTube, Twitch, Netflix, Jellyfin, Emby и почти на любой веб-странице со стандартным HTML5-видеотегом. Подходит для локальных медиатек.

+
+ + +
+

+ + + + Self-Hosted и готов к Docker +

+

Наши официальные серверы бесплатны и быстры, но вы можете получить полный контроль. Запустите свой собственный приватный ретранслятор в Docker за секунды.

+
+ + +
+

+ + + + Быстрые приглашения в 1 клик +

+

Не нужно обмениваться IP-адресами или паролями. Отправьте сгенерированную ссылку друзьям, чтобы они автоматически вошли в комнату в один клик.

+
+
+ +
+
+ +
+
+ A cute koala weighing options in both hands to compare KoalaSync vs Teleparty +

+ KoalaSync против Teleparty +

+

+ Узнайте, почему открытый исходный код, отсутствие рекламы и конфиденциальность делают нас лучшим выбором для совместного просмотра. +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункцияKoalaSyncTeleparty
+ Стоимость и ограничения + Платные подписки, скрытые платежи или заблокированные функции. + ✔ 100% Бесплатно + ✘ Платные тарифы и ограничения + [1] +
+ Лицензия и аудит кода + Открыт ли исходный код для свободного изучения и аудита безопасности. + ✔ Open Source (MIT) + ✘ Проприетарный + [2] +
+ Self-Hosting + Возможность развернуть свой собственный приватный сервер. + ✔ Да (готов к Docker) + ✘ Нет + [2] +
+ Конфиденциальность и трекеры + Обязательная регистрация, отслеживающие файлы cookie и аналитика. + ✔ Без сохранения (только RAM) + ✘ Google Analytics и Cookies + [2] +
+ Совместимость с сайтами + Поддерживаемые веб-ресурсы и совместимость плееров. + ✔ Почти любое HTML5 видео[3] + ✘ Только поддерживаемые сайты + [1] +
+
+

+ Состояние сравнения: май 2026. +

+

+ [1] + Официальные цены Teleparty Premium и поддерживаемые сети: + teleparty.com/premium +

+

+ [2] + Политика конфиденциальности Teleparty и сбор трекеров: + teleparty.com/privacy +

+

+ [3] + Работает на сайтах, разрешающих инъекцию скриптов в стандартные видеотеги HTML5. Сайты с очень строгой политикой безопасности контента (CSP), защитой от копирования DRM или сильно обфусцированными оболочками плееров (например, сложные теневые DOM) могут блокировать автоматическое управление. +

+
+
+
+
+ +
+
+

+ С чего начать +

+ +
+
+
+
01
+

Установить расширение

+

Добавьте KoalaSync в браузер из Chrome Web Store, Firefox Add-ons or скачайте последний ZIP-архив разработчика с GitHub.

+
+ +
+
+
+
+ + + +
+
+ https://sync.koalastuff.net +
+
+
+ KoalaSync Extension +
+
+
+
+
+
+ +
+
KoalaSync
+
+ Ориентированный на конфиденциальность синхронизатор видео +
+
+
+
+
+ Chrome Logo + Скачать для Chrome +
+
+ Firefox Logo + Скачать для Firefox +
+
+
+ + +
+
+ KoalaSync Logo + KoalaSync +
+
+
+ ✓ + Расширение активно +
+
+
+ Готовы смотреть вместе! +
+
+
+
+
+
+
+
+
02
+

Создать комнату

+

Откройте меню расширения и нажмите «+ Создать новую комнату». KoalaSync автоматически сгенерирует ID и пароль, войдет в нее и скопирует ссылку-приглашение.

+
+ +
+
+
+
+ KoalaSync Logo + KoalaSync +
+
v1.9.3
+
+
+
+ Комната +
+
+ Синхро +
+
+ Опции +
+
+
+
+ + Создать комнату +
+
+ +
+ ▶ + Ручное подключение / Дополнительно +
+ +
+ 📋 + Ссылка скопирована! +
+
+
+
+
+
+
+
03
+

Поделиться и смотреть

+

Отправьте ссылку друзьям. Как только они присоединятся, выберите вкладку с видео и наслаждайтесь синхронным просмотром.

+
+ +
+
+ +
+
+ 🐨 KoalaPC + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+ + +
+
+
+
+
+ В СИНХРОНЕ +
+
+ + +
+
+ 💻 LaptopKoala + PLAYING +
+
+
▶
+
+
+
+ ⏸ +
+
+
+
+ 42:15 +
+
+
+
+
+
+
+
+ + +
+
+

+ Для селф-хостеров +

+

+ Не доверяете нашему серверу? Сохраняйте полный контроль над данными. Разверните собственный приватный сервер за пару минут. +

+ + +
+ Милый коала сидит за ноутбуком и разворачивает контейнер Docker для селф-хостинга +
+ +
+
+
+ + + +
+
+ + +
+
+
+ + +
+ 
services:
+  koala-sync:
+    image: ghcr.io/shik3i/koalasync:latest
+    container_name: KoalaSync
+    restart: always
+    # Access internally by proxying to container port 3000
+    environment:
+      - TZ=Europe/Berlin
+      - PORT=3000
+      - MIN_VERSION=1.0.0
+      - MAX_ROOMS=100
+      - MAX_PEERS_PER_ROOM=50
+    pids_limit: 2048
+ +
+ +
+ 
sync.koalastuff.net {
+    # Specify the web root inside the container
+    root * /var/www/html
+
+    # Enable static file server to deliver HTML, CSS, JS
+    file_server
+}
+
+syncserver.koalastuff.net {
+    reverse_proxy KoalaSync:3000
+}
+
+
+
+
+
+ +
+
+

+ Все еще сомневаетесь? Убедитесь сами. +

+

+ KoalaSync на 100% бесплатен, открыт и безопасен. Изучите наш код на GitHub или установите расширение в браузер напрямую. +

+
+ + Chrome + Установить в Chrome + + + Firefox + Установить в Firefox + +
+ + + Милый коала держит страницу репозитория GitHub рядом с маскотом GitHub Octocat + + +
+ + + GitHub + +
+
+
+ +
+
+

© 2026 KoalaSync. Открытый исходный код под лицензией MIT.

+

Никакие данные не сохраняются на наших серверах. Только RAM-трансляция.

+
+ Legal Notice + Privacy Policy + + + Mastodon + +
+
+
+ + + + diff --git a/website/www/sitemap.xml b/website/www/sitemap.xml new file mode 100644 index 0000000..64080a4 --- /dev/null +++ b/website/www/sitemap.xml @@ -0,0 +1,51 @@ + + + + https://sync.koalastuff.net/ + 2026-05-30 + weekly + 1.0 + + + https://sync.koalastuff.net/de/ + 2026-05-31 + weekly + 0.8 + + + https://sync.koalastuff.net/fr/ + 2026-05-31 + weekly + 0.8 + + + https://sync.koalastuff.net/es/ + 2026-05-31 + weekly + 0.8 + + + https://sync.koalastuff.net/pt-BR/ + 2026-05-31 + weekly + 0.8 + + + https://sync.koalastuff.net/ru/ + 2026-05-31 + weekly + 0.8 + + + https://sync.koalastuff.net/impressum.html + 2026-05-31 + yearly + 0.3 + + + https://sync.koalastuff.net/datenschutz.html + 2026-05-31 + yearly + 0.3 + + diff --git a/website/www/style.css b/website/www/style.css new file mode 100644 index 0000000..d088fdc --- /dev/null +++ b/website/www/style.css @@ -0,0 +1,2455 @@ +/* KoalaSync Design System - Privacy-Focused (No External Assets) */ + +:root { + --bg: #0f172a; + --card: #1e293b; + --accent: #6366f1; + --accent-glow: rgba(99, 102, 241, 0.3); + --text: #f8fafc; + --text-muted: #cbd5e1; /* Increased contrast for WCAG AA (6.28:1 contrast ratio) */ + --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; +} + +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; +} + +/* --- Animated Background --- */ +.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); } +} + +/* --- Layout --- */ +.container { + max-width: 1100px; + margin: 0 auto; + padding: 0 2rem; +} + +section { + padding: 6rem 0; +} + +/* --- Navigation --- */ +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; + justify-content: space-between; + 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 img { + height: 40px; + width: 40px; +} + +.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; +} + +.nav-links a { + color: var(--text-muted); + text-decoration: none; + font-weight: 500; + transition: color 0.3s; +} + +.nav-links a:hover { + color: var(--accent); +} + +/* --- Hero Section --- */ +.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: all 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: var(--accent); + 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; +} + +/* --- Interactive CSS Extension Mockup --- */ +.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 img { + width: 24px; + height: 24px; + object-fit: contain; + border-radius: 4px; +} + +.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: all 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; /* Firefox */ +} + +.mock-body::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ +} + +.mock-screen { + display: none; + flex-direction: column; + gap: 12px; +} + +.mock-screen.active { + display: flex; +} + +/* Common Mockup Components */ +.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-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; +} + +/* Room Tab Details */ +.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; +} + +/* Sync Tab Details */ +.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; +} + +/* Settings Tab Details */ +.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 Details */ +.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; +} + +/* Dev Tab Details */ +.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 --- */ +/* Bento Grid Layout Configuration */ +.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: all 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 with Inline SVG Wrapper */ +.feature-icon-svg { + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; + height: 42px; + background: rgba(99, 102, 241, 0.12); + color: var(--accent); + border-radius: 12px; + margin-right: 12px; + vertical-align: middle; + transition: all 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: 20px; + height: 20px; + display: block; +} + +.feature-card h3 { + margin-bottom: 1rem; + font-size: 1.35rem; + font-weight: 700; + display: flex; + align-items: center; +} + +.feature-card p { + color: var(--text-muted); + font-size: 0.95rem; + line-height: 1.6; +} + +/* Bento Asymmetric Spanning */ +.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%); +} + +@media (max-width: 900px) { + .features-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1.25rem; + } + .feature-card.bento-large { + grid-column: span 2; + } +} + +@media (max-width: 600px) { + .features-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + .feature-card.bento-large { + grid-column: span 1; + } +} + +/* --- How it works --- */ +.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; +} + +/* Custom CSS Mockups for step illustrations */ +.step-illustration-1, .step-illustration-2, .step-illustration-3 { + background: radial-gradient(circle at top left, #1e293b, #0f172a); + height: 280px; /* Slightly taller for more detail and breathing room */ + 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: all 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); +} + +/* ========================================================================== + Step 1 Illustration: Browser & Installed Success Popup + ========================================================================== */ +.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: all 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: all 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); + } +} + +/* Glassmorphic Dropping Success Card */ +.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; +} + + +/* ========================================================================== + Step 2 Illustration: Highly Realistic Extension Popup (Create Room View) + ========================================================================== */ +.illus-popup-card { + width: 220px; /* Scaled up 16% for a bigger, much more detailed view */ + 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; /* Slightly larger padding */ + 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; /* Tighter vertical layout rhythm */ + 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; /* Scaled up font */ + 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; /* Scaled up font */ + 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; /* Scaled up padding */ + color: white; + font-weight: 700; + font-size: 0.7rem; /* Scaled up font */ + 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; /* Scaled up padding */ + font-size: 0.56rem; /* Scaled up font */ + 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; +} + +/* Floating Success Badge */ +.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; +} + + +/* ========================================================================== + Step 3 Illustration: Dual Screen Theater Sync Setup + ========================================================================= */ +.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; +} + +/* Glowing Connection Sync Bridge */ +.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); } +} + +/* --- Self Hosters Terminal --- */ +.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: all 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; +} + +/* Syntax Highlighting */ +.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: all 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 --- */ +footer { + padding: 4rem 0; + border-top: 1px solid var(--glass-border); + text-align: center; + color: var(--text-muted); +} + +/* --- Animations --- */ +[data-reveal] { + opacity: 0; + transform: translateY(30px); + transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +[data-reveal].revealed { + opacity: 1; + transform: translateY(0); +} + + +/* --- Legal Pages --- */ +.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; +} + +/* Reset global section padding for legal sections specifically */ +.legal-card section { + padding: 0 !important; + margin-bottom: 0.75rem; +} + +/* --- Join Page Specifics --- */ +.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); + } + .nav-links.open { + display: flex; + } + .hamburger { + display: flex; + } + .legal-card { + padding: 1.5rem; + } +} + +/* --- Language Toggle --- */ +html.lang-de [lang="en"] { + display: none !important; +} +html:not(.lang-de) [lang="de"] { + display: none !important; +} + +/* --- Modern Glassmorphic Language Selector --- */ +.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: all 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 Menu --- */ +.hamburger { + display: none; + align-items: center; + justify-content: center; + background: none; + border: none; + color: var(--text); + font-size: 1.5rem; + cursor: pointer; + padding: 0.25rem; + line-height: 1; +} + +/* --- Feature Cards: subtle differentiation --- */ +.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)); +} + +/* --- Compatibility Section --- */ +.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 Page Loading Spinner --- */ +.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); } +} + +/* --- Reduced Motion --- */ +@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 / Anwendungsszenarien Section --- */ +.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 --- */ +.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; + } +} + +/* --- Footnotes & Source Links --- */ +.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 & Invitation Page Visuals --- */ +.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; /* Slightly wider due to antenna to keep main body scale identical */ +} + +.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); +} + diff --git a/website/www/version.json b/website/www/version.json new file mode 100644 index 0000000..f836c60 --- /dev/null +++ b/website/www/version.json @@ -0,0 +1,4 @@ +{ + "version": "1.9.3", + "date": "2026-05-30T00:01:24Z" +}