feat: new TwoPointZero branding - icons, favicon, mockup i18n

- Replace extension icons with new TwoPointZero design (16/32/48/96/128)
- Update manifest.base.json with 32+96 icon sizes
- Increase popup logo to 48px, website nav logo to 64px
- Generate website webp sizes (64/128/200) + AVIF variants from 600px source
- Add favicon PNGs (16x16, 32x32) + apple-touch-icon + 192x192
- Fix logo vertical centering via display:contents on picture wrappers
- Convert mockup section from inline <span lang> pairs to {{MOCK_*}} template vars
- Add MOCK translations for FR, ES, PT-BR, RU locale files
- Bump AVIF quality 70->80, speed 6->4, remove min 3KB threshold
- Regenerate www/ with build.js

extension/manifest.base.json

@@ -18,7 +18,9 @@
     "default_popup": "popup.html",
     "default_icon": {
       "16": "icons/icon16.png",
+      "32": "icons/icon32.png",
       "48": "icons/icon48.png",
+      "96": "icons/icon96.png",
       "128": "icons/icon128.png"
     }
   },
@@ -35,7 +37,9 @@
   ],
   "icons": {
     "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
     "48": "icons/icon48.png",
+    "96": "icons/icon96.png",
     "128": "icons/icon128.png"
   }
 }

extension/popup.html

@@ -45,8 +45,8 @@
         }
 
         h1 img {
-            width: 24px;
+            width: 48px;
-            height: 24px;
+            height: 48px;
             object-fit: contain;
             border-radius: 4px;
         }

website/build.js

@@ -18,7 +18,7 @@ function minifyCSS(code) {
         .replace(/;\}/g, '}')
         .trim();
 }
-const MIN_AVIF_KB = 3;
+const MIN_AVIF_KB = 0;
 
 function copyDirSync(src, dest) {
     fs.mkdirSync(dest, { recursive: true });
@@ -189,7 +189,7 @@ async function compile() {
         if (stat.size < MIN_AVIF_KB * 1024) continue;
         const dest = path.join(destAssets, f.replace(/\.webp$/, '.avif'));
         if (fs.existsSync(dest) && fs.statSync(dest).mtimeMs >= stat.mtimeMs) continue;
-        await sharp(src).avif({ quality: 70, speed: 6 }).toFile(dest);
+        await sharp(src).avif({ quality: 80, speed: 4 }).toFile(dest);
         avifCount++;
     }
     console.log(`  ${avifCount} AVIF files generated.`);

website/join.html

@@ -6,7 +6,9 @@
     <title>Join Room | KoalaSync</title>
     <link rel="preload" href="style.min.css" as="style">
     <link rel="stylesheet" href="style.min.css">
-    <link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/icon-192x192.png">
     <meta name="robots" content="noindex">
 
     <!-- Open Graph / Facebook -->
@@ -39,7 +41,7 @@
     <nav>
         <div class="container nav-content">
             <a href="./" class="logo-area" style="text-decoration: none;">
-                <img src="assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="40" height="40">
+                <img src="assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="64" height="64">
                 <span>KoalaSync</span>
             </a>
             <button class="hamburger" aria-label="Menu" aria-expanded="false">☰</button>

website/locales/de.json

@@ -5,27 +5,22 @@
   "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "de_DE",
-  
   "META_TITLE": "KoalaSync | Netflix, YouTube & jedes Video mit Freunden synchronisieren",
   "META_DESCRIPTION": "Schaue Netflix, YouTube, Twitch und jedes HTML5-Video synchron mit Freunden. Kostenlose, quelloffene Browser-Erweiterung. 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.<br>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",
@@ -37,10 +32,8 @@
   "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",
@@ -53,7 +46,6 @@
   "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",
@@ -81,7 +73,6 @@
   "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.",
@@ -101,17 +92,14 @@
   "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",
-  
   "FAQ_TITLE": "Häufig gestellte Fragen",
   "FAQ_SUBTITLE": "Alles, was du über synchrones Videoschauen mit Freunden wissen musst.",
   "FAQ_Q1": "Kann ich Netflix, Emby oder Jellyfin synchron mit Freunden schauen?",
@@ -126,7 +114,6 @@
   "FAQ_A5": "Ja, jeder Teilnehmer braucht KoalaSync — aber ohne Anmeldung oder Kontoerstellung. Einfach auf den Einladungslink klicken, die Erweiterung installieren (falls nicht vorhanden) und du bist automatisch im Raum.",
   "FAQ_Q6": "Sind meine Daten sicher? Was, wenn ich dem offiziellen Server nicht traue?",
   "FAQ_A6": "Absolut sicher. Der KoalaSync Relay-Server läuft ausschließlich im RAM — alle Sitzungsdaten werden sofort gelöscht, sobald du den Raum verlässt. Keine Datenbank, keine Protokolle, keine Analysen, keine Benutzerkonten. Wenn du volle Kontrolle möchtest: hoste deinen eigenen privaten Relay-Server via Docker in wenigen Minuten. Der gesamte Quellcode ist Open Source und auf GitHub einsehbar.",
-  
   "HOWTO_TITLE": "So synchronisierst du Videos mit Freunden mit KoalaSync",
   "HOWTO_DESC": "Schaue Videos perfekt synchron mit Freunden auf YouTube, Netflix, Twitch und mehr. Keine Anmeldung, kein Tracking.",
   "HOWTO_STEP_1_NAME": "Browser-Erweiterung installieren",
@@ -135,9 +122,40 @@
   "HOWTO_STEP_2_TEXT": "Öffne das Erweiterungs-Popup und klicke auf Neuen Raum erstellen. Der Einladungslink wird automatisch in deine Zwischenablage kopiert.",
   "HOWTO_STEP_3_NAME": "Teilen und synchronisieren",
   "HOWTO_STEP_3_TEXT": "Sende den Einladungslink an deine Freunde. Wähle einen Video-Tab aus und genieße synchronisierte Wiedergabe in Echtzeit.",
-  
   "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"
+  "FOOTER_PRIVACY": "Datenschutz",
+  "MOCK_01": "Aktiver Raum",
+  "MOCK_02": "Offizieller Server",
+  "MOCK_03": "Einladungs-Link",
+  "MOCK_04": "Teilnehmer im Raum",
+  "MOCK_05": "ICH",
+  "MOCK_06": "Wiedergabe",
+  "MOCK_07": "Partner",
+  "MOCK_08": "Raum verlassen",
+  "MOCK_09": "Video auswählen",
+  "MOCK_10": "Fernsteuerung",
+  "MOCK_11": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg> Start",
+  "MOCK_12": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"14\" height=\"14\" aria-hidden=\"true\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg> Pause",
+  "MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
+  "MOCK_14": "Zu anderen springen",
+  "MOCK_15": "Letzte Aktivität",
+  "MOCK_16": "Warten auf 1 Partner (KoalaPC)...",
+  "MOCK_17": "Überspringen & abspielen",
+  "MOCK_18": "Dein Benutzername",
+  "MOCK_19": "Noise-Filterung",
+  "MOCK_20": "Nächste Folge auto-syncen",
+  "MOCK_21": "Link auto-kopieren",
+  "MOCK_22": "Browser-Meldungen",
+  "MOCK_23": "Fehlerbehebung",
+  "MOCK_24": "Peer ID regenerieren",
+  "MOCK_25": "Nutze dies bei \"Duplicate Identity\" Fehlern.",
+  "MOCK_26": "Verbindungsstatus",
+  "MOCK_27": "Verbunden",
+  "MOCK_28": "Logs kopieren",
+  "MOCK_29": "Video-Debug-Info",
+  "MOCK_30": "Aktivitätsverlauf",
+  "MOCK_31": "Protokoll (Letzte 50)",
+  "MOCK_32": "LÖSCHEN"
 }

website/locales/en.json

@@ -5,27 +5,22 @@
   "LANG_TOGGLE_URL": "de/",
   "LANG_TOGGLE_TEXT": "DE",
   "OG_LOCALE": "en_US",
-  
   "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.<br>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",
@@ -37,10 +32,8 @@
   "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",
@@ -53,7 +46,6 @@
   "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",
@@ -81,7 +73,6 @@
   "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.",
@@ -101,17 +92,14 @@
   "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",
-  
   "FAQ_TITLE": "Frequently Asked Questions",
   "FAQ_SUBTITLE": "Everything you need to know about watching videos together in perfect sync.",
   "FAQ_Q1": "Can I watch Netflix, Emby or Jellyfin together in sync with friends?",
@@ -126,7 +114,6 @@
   "FAQ_A5": "Yes, each participant needs KoalaSync installed — but there's no sign-up or account creation. Simply click the invitation link, install the extension if you haven't already, and you'll join the room automatically in seconds.",
   "FAQ_Q6": "Is my data safe? What if I don't trust the official server?",
   "FAQ_A6": "Completely safe. KoalaSync's relay server is RAM-only — all session data is permanently deleted the moment you leave the room. No database, no logging, no analytics, no accounts. And if you prefer full control: you can self-host your own private relay server via Docker in minutes. The entire codebase is open source and auditable on GitHub.",
-  
   "HOWTO_TITLE": "How to synchronize videos with friends using KoalaSync",
   "HOWTO_DESC": "Watch any video in perfect sync with friends across YouTube, Netflix, Twitch and more. No sign-up, no tracking.",
   "HOWTO_STEP_1_NAME": "Install the browser extension",
@@ -135,9 +122,40 @@
   "HOWTO_STEP_2_TEXT": "Open the extension popup and click Create New Room. The invite link is automatically copied to your clipboard.",
   "HOWTO_STEP_3_NAME": "Share and sync",
   "HOWTO_STEP_3_TEXT": "Send the invite link to your friends. Pick a video tab and enjoy synchronized playback in real time.",
-  
   "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"
+  "FOOTER_PRIVACY": "Privacy Policy",
+  "MOCK_01": "Active Room",
+  "MOCK_02": "Official Server",
+  "MOCK_03": "Invite Link",
+  "MOCK_04": "Peers in Room",
+  "MOCK_05": "YOU",
+  "MOCK_06": "Playing",
+  "MOCK_07": "Peer",
+  "MOCK_08": "Leave Room",
+  "MOCK_09": "Select Video",
+  "MOCK_10": "Remote Control",
+  "MOCK_11": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg> Play",
+  "MOCK_12": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"14\" height=\"14\" aria-hidden=\"true\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg> Pause",
+  "MOCK_13": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/></svg> SYNC",
+  "MOCK_14": "Jump to Others",
+  "MOCK_15": "Last Activity Status",
+  "MOCK_16": "Waiting for 1 peer (KoalaPC)...",
+  "MOCK_17": "Skip & Play anyway",
+  "MOCK_18": "Your Username",
+  "MOCK_19": "Hide Clutter Tabs",
+  "MOCK_20": "Auto-Sync Next Episode",
+  "MOCK_21": "Auto-Copy Invite Link",
+  "MOCK_22": "Browser Notifications",
+  "MOCK_23": "Troubleshooting",
+  "MOCK_24": "Regenerate Peer ID",
+  "MOCK_25": "Use this if you see \"Duplicate Identity\" errors.",
+  "MOCK_26": "Connection Status",
+  "MOCK_27": "Connected",
+  "MOCK_28": "Copy Logs",
+  "MOCK_29": "Video Debug Info",
+  "MOCK_30": "Full Action History",
+  "MOCK_31": "Logs (Last 50)",
+  "MOCK_32": "CLEAR"
 }

website/locales/es.json

@@ -5,27 +5,22 @@
   "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "es_ES",
-  
   "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. Sin 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.<br>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",
@@ -37,10 +32,8 @@
   "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",
@@ -53,7 +46,6 @@
   "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",
@@ -81,7 +73,6 @@
   "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.",
@@ -101,17 +92,14 @@
   "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",
-  
   "FAQ_TITLE": "Preguntas frecuentes",
   "FAQ_SUBTITLE": "Todo lo que necesitas saber para ver videos juntos en perfecta sincronía.",
   "FAQ_Q1": "¿Puedo ver Netflix, Emby o Jellyfin sincronizado con amigos?",
@@ -126,7 +114,6 @@
   "FAQ_A5": "Sí, cada participante necesita KoalaSync — pero sin registro ni creación de cuenta. Solo haz clic en el enlace de invitación, instala la extensión si es necesario y te unes automáticamente a la sala.",
   "FAQ_Q6": "¿Están seguros mis datos? ¿Y si no confío en el servidor oficial?",
   "FAQ_A6": "Totalmente seguro. El servidor relay de KoalaSync usa solo RAM — todos los datos de sesión se eliminan al salir de la sala. Sin base de datos, sin registros, sin análisis, sin cuentas. Si prefieres control total: aloja tu propio servidor relay privado con Docker en minutos. El código fuente es completamente abierto y auditable en GitHub.",
-  
   "HOWTO_TITLE": "Cómo sincronizar videos con amigos usando KoalaSync",
   "HOWTO_DESC": "Mira videos en perfecta sincronía con amigos en YouTube, Netflix, Twitch y más. Sin registro, sin seguimiento.",
   "HOWTO_STEP_1_NAME": "Instalar la extensión",
@@ -135,9 +122,40 @@
   "HOWTO_STEP_2_TEXT": "Abre la extensión y haz clic en Crear nueva sala. El enlace de invitación se copia automáticamente al portapapeles.",
   "HOWTO_STEP_3_NAME": "Compartir y sincronizar",
   "HOWTO_STEP_3_TEXT": "Envía el enlace de invitación a tus amigos. Selecciona una pestaña de video y disfruta de reproducción sincronizada en tiempo real.",
-  
   "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"
+  "FOOTER_PRIVACY": "Privacy Policy",
+  "MOCK_01": "Sala activa",
+  "MOCK_02": "Servidor oficial",
+  "MOCK_03": "Enlace de invitación",
+  "MOCK_04": "Participantes",
+  "MOCK_05": "TÚ",
+  "MOCK_06": "Reproduciendo",
+  "MOCK_07": "Compañero",
+  "MOCK_08": "Salir",
+  "MOCK_09": "Seleccionar video",
+  "MOCK_10": "Control remoto",
+  "MOCK_11": "Reproducir",
+  "MOCK_12": "Pausa",
+  "MOCK_13": "Saltar a otros",
+  "MOCK_14": "Última actividad",
+  "MOCK_15": "Esperando a 1 compañero (KoalaPC)...",
+  "MOCK_16": "Saltar y reproducir",
+  "MOCK_17": "Tu nombre",
+  "MOCK_18": "Ocultar pestañas",
+  "MOCK_19": "Auto-sync siguiente episodio",
+  "MOCK_20": "Auto-copiar enlace",
+  "MOCK_21": "Notificaciones",
+  "MOCK_22": "Solución de problemas",
+  "MOCK_23": "Regenerar ID",
+  "MOCK_24": "Usa esto si ves error de \"Identidad duplicada\".",
+  "MOCK_25": "Estado de conexión",
+  "MOCK_26": "Conectado",
+  "MOCK_27": "Copiar logs",
+  "MOCK_28": "Info de depuración de video",
+  "MOCK_29": "Historial completo",
+  "MOCK_30": "Registros (últimos 50)",
+  "MOCK_31": "BORRAR",
+  "MOCK_32": "CLEAR"
 }

website/locales/fr.json

@@ -5,27 +5,22 @@
   "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "fr_FR",
-  
   "META_TITLE": "KoalaSync | Synchronisez Netflix, YouTube et n'importe quelle vidéo avec vos amis",
   "META_DESCRIPTION": "Regardez Netflix, YouTube, Twitch et des vidéos HTML5 en synchro avec vos amis. Extension de navigateur gratuite et open-source. 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.<br>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",
@@ -37,10 +32,8 @@
   "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",
@@ -53,7 +46,6 @@
   "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é",
@@ -81,7 +73,6 @@
   "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.",
@@ -101,17 +92,14 @@
   "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",
-  
   "FAQ_TITLE": "Foire aux questions",
   "FAQ_SUBTITLE": "Tout ce que vous devez savoir pour regarder des vidéos en parfaite synchronisation.",
   "FAQ_Q1": "Puis-je regarder Netflix, Emby ou Jellyfin en synchronisation avec des amis ?",
@@ -126,7 +114,6 @@
   "FAQ_A5": "Oui, chaque participant a besoin de KoalaSync — mais sans inscription ni création de compte. Cliquez simplement sur le lien d'invitation, installez l'extension si nécessaire et vous rejoignez automatiquement le salon.",
   "FAQ_Q6": "Mes données sont-elles en sécurité ? Et si je ne fais pas confiance au serveur officiel ?",
   "FAQ_A6": "Totalement sûr. Le serveur relay de KoalaSync fonctionne uniquement en RAM — toutes les données de session sont supprimées dès que vous quittez le salon. Aucune base de données, aucun journal, aucune analyse, aucun compte. Si vous préférez un contrôle total : hébergez votre propre serveur relay privé via Docker en quelques minutes. Le code source est entièrement open source et vérifiable sur GitHub.",
-  
   "HOWTO_TITLE": "Comment synchroniser des vidéos avec des amis avec KoalaSync",
   "HOWTO_DESC": "Regardez des vidéos en parfaite synchronisation avec vos amis sur YouTube, Netflix, Twitch et plus. Sans inscription, sans pistage.",
   "HOWTO_STEP_1_NAME": "Installer l'extension",
@@ -135,9 +122,40 @@
   "HOWTO_STEP_2_TEXT": "Ouvrez l'extension et cliquez sur Créer un nouveau salon. Le lien d'invitation est automatiquement copié dans votre presse-papiers.",
   "HOWTO_STEP_3_NAME": "Partager et synchroniser",
   "HOWTO_STEP_3_TEXT": "Envoyez le lien d'invitation à vos amis. Sélectionnez un onglet vidéo et profitez de la lecture synchronisée en temps réel.",
-  
   "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"
+  "FOOTER_PRIVACY": "Privacy Policy",
+  "MOCK_01": "Salle active",
+  "MOCK_02": "Serveur officiel",
+  "MOCK_03": "Lien d'invitation",
+  "MOCK_04": "Participants",
+  "MOCK_05": "VOUS",
+  "MOCK_06": "Lecture",
+  "MOCK_07": "Partenaire",
+  "MOCK_08": "Quitter",
+  "MOCK_09": "Choisir la vidéo",
+  "MOCK_10": "Télécommande",
+  "MOCK_11": "Lire",
+  "MOCK_12": "Pause",
+  "MOCK_13": "Sauter vers les autres",
+  "MOCK_14": "Dernière activité",
+  "MOCK_15": "En attente de 1 participant (KoalaPC)...",
+  "MOCK_16": "Passer & lire",
+  "MOCK_17": "Votre pseudo",
+  "MOCK_18": "Masquer les onglets inutiles",
+  "MOCK_19": "Auto-sync épisode suivant",
+  "MOCK_20": "Copie automatique du lien d'invitation",
+  "MOCK_21": "Notifications navigateur",
+  "MOCK_22": "Dépannage",
+  "MOCK_23": "Régénérer l'ID pair",
+  "MOCK_24": "Utilisez ceci en cas d'erreur \"Identité dupliquée\".",
+  "MOCK_25": "État de la connexion",
+  "MOCK_26": "Connecté",
+  "MOCK_27": "Copier les logs",
+  "MOCK_28": "Infos de débogage vidéo",
+  "MOCK_29": "Historique complet d'actions",
+  "MOCK_30": "Logs (50 derniers)",
+  "MOCK_31": "EFFACER",
+  "MOCK_32": "CLEAR"
 }

website/locales/pt-BR.json

@@ -5,27 +5,22 @@
   "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "pt_BR",
-  
   "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. Sem 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.<br>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",
@@ -37,10 +32,8 @@
   "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",
@@ -53,7 +46,6 @@
   "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",
@@ -81,7 +73,6 @@
   "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.",
@@ -90,7 +81,6 @@
   "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",
@@ -99,21 +89,17 @@
   "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",
-  
   "FAQ_TITLE": "Perguntas frequentes",
   "FAQ_SUBTITLE": "Tudo o que você precisa saber para assistir vídeos juntos em perfeita sincronia.",
   "FAQ_Q1": "Posso assistir Netflix, Emby ou Jellyfin sincronizado com amigos?",
@@ -128,7 +114,6 @@
   "FAQ_A5": "Sim, cada participante precisa do KoalaSync — mas sem cadastro ou criação de conta. Basta clicar no link de convite, instalar a extensão se necessário e você entra na sala automaticamente.",
   "FAQ_Q6": "Meus dados estão seguros? E se eu não confiar no servidor oficial?",
   "FAQ_A6": "Totalmente seguro. O servidor relay do KoalaSync opera apenas em RAM — todos os dados da sessão são excluídos ao sair da sala. Sem banco de dados, sem registros, sem análises, sem contas. Se preferir controle total: hospede seu próprio servidor relay privado via Docker em minutos. O código fonte é totalmente aberto e auditável no GitHub.",
-  
   "HOWTO_TITLE": "Como sincronizar vídeos com amigos usando o KoalaSync",
   "HOWTO_DESC": "Assista vídeos em perfeita sincronia com amigos no YouTube, Netflix, Twitch e mais. Sem cadastro, sem rastreamento.",
   "HOWTO_STEP_1_NAME": "Instalar a extensão",
@@ -137,9 +122,40 @@
   "HOWTO_STEP_2_TEXT": "Abra a extensão e clique em Criar nova sala. O link de convite é copiado automaticamente para sua área de transferência.",
   "HOWTO_STEP_3_NAME": "Compartilhar e sincronizar",
   "HOWTO_STEP_3_TEXT": "Envie o link de convite para seus amigos. Selecione uma aba de vídeo e aproveite a reprodução sincronizada em tempo real.",
-  
   "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"
+  "FOOTER_PRIVACY": "Privacy Policy",
+  "MOCK_01": "Sala ativa",
+  "MOCK_02": "Servidor oficial",
+  "MOCK_03": "Link de convite",
+  "MOCK_04": "Participantes",
+  "MOCK_05": "VOCÊ",
+  "MOCK_06": "Reproduzindo",
+  "MOCK_07": "Parceiro",
+  "MOCK_08": "Sair da sala",
+  "MOCK_09": "Selecionar vídeo",
+  "MOCK_10": "Controle remoto",
+  "MOCK_11": "Reproduzir",
+  "MOCK_12": "Pausar",
+  "MOCK_13": "Pular para outros",
+  "MOCK_14": "Última atividade",
+  "MOCK_15": "Aguardando 1 parceiro (KoalaPC)...",
+  "MOCK_16": "Pular e reproduzir",
+  "MOCK_17": "Seu nome",
+  "MOCK_18": "Ocultar abas confusas",
+  "MOCK_19": "Auto-sync próximo episódio",
+  "MOCK_20": "Auto-copiar convite",
+  "MOCK_21": "Notificações",
+  "MOCK_22": "Solução de problemas",
+  "MOCK_23": "Regenerar Peer ID",
+  "MOCK_24": "Use se aparecer erro \"Identidade duplicada\".",
+  "MOCK_25": "Status da conexão",
+  "MOCK_26": "Conectado",
+  "MOCK_27": "Copiar logs",
+  "MOCK_28": "Info de depuração de vídeo",
+  "MOCK_29": "Histórico completo",
+  "MOCK_30": "Logs (últimos 50)",
+  "MOCK_31": "LIMPAR",
+  "MOCK_32": "CLEAR"
 }

website/locales/ru.json

@@ -5,27 +5,22 @@
   "LANG_TOGGLE_URL": "../",
   "LANG_TOGGLE_TEXT": "EN",
   "OG_LOCALE": "ru_RU",
-  
   "META_TITLE": "KoalaSync | Синхронизация Netflix, YouTube и любого видео с друзьями",
   "META_DESCRIPTION": "Смотрите Netflix, YouTube, Twitch и любые HTML5-видео в синхронизации с друзьями. Бесплатное расширение браузера с открытым кодом. Регистрация не требуется.",
   "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": "Смотрите вместе.<br>Синхронно на 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": "Два милых коалы сидят вместе и делят ведро попкорна",
@@ -37,10 +32,8 @@
   "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": "Бесконечные марафоны",
@@ -53,7 +46,6 @@
   "FEATURE_5_DESC": "Наши официальные серверы бесплатны и быстры, но вы можете получить полный контроль. Запустите свой собственный приватный ретранслятор в Docker за секунды.",
   "FEATURE_6_TITLE": "Быстрые приглашения в 1 клик",
   "FEATURE_6_DESC": "Не нужно обмениваться IP-адресами или паролями. Отправьте сгенерированную ссылку друзьям, чтобы они автоматически вошли в комнату в один клик.",
-  
   "COMP_TITLE": "KoalaSync против Teleparty",
   "COMP_SUBTITLE": "Узнайте, почему открытый исходный код, отсутствие рекламы и конфиденциальность делают нас лучшим выбором для совместного просмотра.",
   "COMP_COL_FEATURE": "Функция",
@@ -81,7 +73,6 @@
   "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.",
@@ -90,7 +81,6 @@
   "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": "Комната",
@@ -99,21 +89,17 @@
   "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",
-  
   "FAQ_TITLE": "Часто задаваемые вопросы",
   "FAQ_SUBTITLE": "Всё, что нужно знать о синхронном просмотре видео с друзьями.",
   "FAQ_Q1": "Могу ли я смотреть Netflix, Emby или Jellyfin синхронно с друзьями?",
@@ -128,7 +114,6 @@
   "FAQ_A5": "Да, каждому участнику нужен KoalaSync — но без регистрации и создания учётной записи. Просто перейдите по ссылке-приглашению, установите расширение (если ещё нет) и вы автоматически в комнате.",
   "FAQ_Q6": "Мои данные в безопасности? Что, если я не доверяю официальному серверу?",
   "FAQ_A6": "Полностью безопасно. Relay-сервер KoalaSync работает только в ОЗУ — все данные сессии удаляются при выходе из комнаты. Никаких баз данных, логов, аналитики и учётных записей. Если хотите полный контроль: разверните свой приватный relay-сервер через Docker за пару минут. Исходный код полностью открыт и доступен для аудита на GitHub.",
-  
   "HOWTO_TITLE": "Как синхронизировать видео с друзьями с помощью KoalaSync",
   "HOWTO_DESC": "Смотрите видео в идеальной синхронизации с друзьями на YouTube, Netflix, Twitch и других платформах. Без регистрации, без отслеживания.",
   "HOWTO_STEP_1_NAME": "Установите расширение",
@@ -137,9 +122,40 @@
   "HOWTO_STEP_2_TEXT": "Откройте расширение и нажмите Создать новую комнату. Ссылка-приглашение автоматически копируется в буфер обмена.",
   "HOWTO_STEP_3_NAME": "Поделитесь и синхронизируйте",
   "HOWTO_STEP_3_TEXT": "Отправьте ссылку-приглашение друзьям. Выберите вкладку с видео и наслаждайтесь синхронным воспроизведением в реальном времени.",
-  
   "FOOTER_MIT": "Открытый исходный код под лицензией MIT.",
   "FOOTER_RAM": "Никакие данные не сохраняются на наших серверах. Только RAM-трансляция.",
   "FOOTER_LEGAL": "Legal Notice",
-  "FOOTER_PRIVACY": "Privacy Policy"
+  "FOOTER_PRIVACY": "Privacy Policy",
+  "MOCK_01": "Активная комната",
+  "MOCK_02": "Официальный сервер",
+  "MOCK_03": "Ссылка-приглашение",
+  "MOCK_04": "Участники",
+  "MOCK_05": "ВЫ",
+  "MOCK_06": "Воспроизведение",
+  "MOCK_07": "Собеседник",
+  "MOCK_08": "Покинуть комнату",
+  "MOCK_09": "Выбрать видео",
+  "MOCK_10": "Пульт управления",
+  "MOCK_11": "Воспроизвести",
+  "MOCK_12": "Пауза",
+  "MOCK_13": "Перейти к другим",
+  "MOCK_14": "Последняя активность",
+  "MOCK_15": "Ожидание 1 участника (KoalaPC)...",
+  "MOCK_16": "Пропустить и играть",
+  "MOCK_17": "Ваше имя",
+  "MOCK_18": "Скрыть лишние вкладки",
+  "MOCK_19": "Автосинхронизация серий",
+  "MOCK_20": "Автокопирование ссылки",
+  "MOCK_21": "Уведомления браузера",
+  "MOCK_22": "Устранение неполадок",
+  "MOCK_23": "Обновить Peer ID",
+  "MOCK_24": "Используйте при ошибке \"Дублирование идентификатора\".",
+  "MOCK_25": "Статус соединения",
+  "MOCK_26": "Подключено",
+  "MOCK_27": "Копировать логи",
+  "MOCK_28": "Отладочная информация",
+  "MOCK_29": "Полная история действий",
+  "MOCK_30": "Логи (последние 50)",
+  "MOCK_31": "ОЧИСТИТЬ",
+  "MOCK_32": "CLEAR"
 }

website/site.webmanifest

@@ -18,6 +18,12 @@
       "sizes": "128x128",
       "type": "image/webp",
       "purpose": "any maskable"
+    },
+    {
+      "src": "/assets/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ]
 }

website/style.css

@@ -144,9 +144,16 @@ nav {
     letter-spacing: -0.5px;
 }
 
+.logo-area picture {
+    display: contents;
+}
+
 .logo-area img {
-    height: 40px;
+    height: 64px;
-    width: 40px;
+    width: 64px;
+    object-fit: contain;
+    border-radius: 8px;
+    margin: -4px 0;
 }
 
 .nav-ext-status {
@@ -262,7 +269,7 @@ nav {
     font-size: 0.95rem;
 }
 .btn-primary {
-    background: var(--accent);
+    background: #5b5de8;
     color: white;
     box-shadow: 0 10px 15px -3px var(--accent-glow);
 }
@@ -354,11 +361,15 @@ nav {
     font-weight: 800;
 }
 
+.mock-header-title picture {
+    display: contents;
+}
+
 .mock-header-title img {
-    width: 24px;
+    width: 28px;
-    height: 24px;
+    height: 28px;
     object-fit: contain;
-    border-radius: 4px;
+    border-radius: 6px;
 }
 
 .mock-version-link {

website/template.html

@@ -9,7 +9,9 @@
     <link rel="preload" href="{{ASSET_PATH}}style.min.css" as="style">
     <link rel="preload" as="image" href="{{ASSET_PATH}}assets/LookDownKoala.webp" imagesrcset="{{ASSET_PATH}}assets/LookDownKoala-1x.webp 90w, {{ASSET_PATH}}assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
     <link rel="stylesheet" href="{{ASSET_PATH}}style.min.css">
-    <link rel="icon" type="image/webp" href="{{ASSET_PATH}}assets/NewLogoIcon_64.webp">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ASSET_PATH}}assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ASSET_PATH}}assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ASSET_PATH}}assets/icon-192x192.png">
     <link rel="canonical" href="https://sync.koalastuff.net/{{CANONICAL_PATH}}">
     <link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
     <link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/">
@@ -33,6 +35,7 @@
     <meta property="og:locale:alternate" content="es_ES">
     <meta property="og:locale:alternate" content="pt_BR">
     <meta property="og:locale:alternate" content="ru_RU">
+    <meta property="og:site_name" content="KoalaSync">
 
     <!-- Twitter / X -->
     <meta name="twitter:card" content="summary_large_image">
@@ -175,7 +178,7 @@
     <nav>
         <div class="container nav-content">
             <div class="logo-area">
-                <img src="{{ASSET_PATH}}assets/NewLogoIcon_80.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_40.webp 40w, {{ASSET_PATH}}assets/NewLogoIcon_80.webp 80w, {{ASSET_PATH}}assets/NewLogoIcon.webp 200w" sizes="40px" alt="KoalaSync Logo" width="40" height="40">
+                <img src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
                 <span>KoalaSync</span>
                 <div id="nav-extension-status" class="nav-ext-status" style="display: none;">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="12" height="12"><polyline points="20 6 9 17 4 12"></polyline></svg>
@@ -265,47 +268,47 @@
                         <div id="mock-room" class="mock-screen active">
                             <div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
                                 <div style="display: flex; flex-direction: column;">
-                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;"><span lang="en">Active Room</span><span lang="de">Aktiver Raum</span></span>
+                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;">{{MOCK_01}}</span>
                                     <span class="mock-room-name" style="font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.5px; margin-top: 2px;">brave-eagle-80</span>
                                 </div>
-                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);"><span lang="en">Official Server</span><span lang="de">Offizieller Server</span></span>
+                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);">{{MOCK_02}}</span>
                             </div>
                             <div class="mock-card">
-                                    <div class="mock-label" title="Share this link with friends so they can join"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
+                                    <div class="mock-label" title="Share this link with friends so they can join">{{MOCK_03}}</div>
                                 <div class="mock-invite-box">
-                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;">
+                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
                                     <button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                 </div>
                             </div>
                             <div class="mock-card" style="margin-bottom: 12px;">
-                                    <div class="mock-label" title="Other users currently connected to this room"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
+                                    <div class="mock-label" title="Other users currently connected to this room">{{MOCK_04}}</div>
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">{{MOCK_05}}</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">{{MOCK_07}}</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
                                     </div>
                                 </div>
                             </div>
-                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;"><span lang="en">Leave Room</span><span lang="de">Raum verlassen</span></button>
+                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">{{MOCK_08}}</button>
                         </div>
 
                         <!-- SYNC TAB -->
                         <div id="mock-sync" class="mock-screen">
                             <div class="mock-form-group" style="margin-bottom: 12px;">
                                 <label class="mock-section-label" title="Choose the browser tab containing the video to sync">
-                                    <span lang="en">Select Video</span><span lang="de">Video auswählen</span>
+                                    {{MOCK_09}}
                                 </label>
                                 <select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
                                     <option><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</option>
@@ -314,32 +317,32 @@
                             
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
-                                    <span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
+                                    {{MOCK_10}}
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
                                     <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
-                                    <span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span>
+                                    {{MOCK_03}}
                                 </button>
                             </div>
                             <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg> Play</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg> Start</span></button>
+                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone">{{MOCK_11}}</button>
-                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Pause</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Pause</span></button>
+                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone">{{MOCK_12}}</button>
                             </div>
                             
                             <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
                                 <button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
-                                    <span lang="en"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> SYNC</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> SYNC</span>
+                                    {{MOCK_13}}
                                 </button>
                                 <div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
                                     <span>
-                                        <span lang="en">Jump to Others</span><span lang="de">Zu anderen springen</span>
+                                        {{MOCK_14}}
                                     </span>
                                     <span style="font-size: 0.5rem; opacity: 0.6;">▼</span>
                                 </div>
                             </div>
 
                             <label class="mock-section-label" title="Shows the most recent play, pause, or seek command">
-                                <span lang="en">Last Activity Status</span><span lang="de">Letzte Aktivität</span>
+                                {{MOCK_15}}
                             </label>
                             <div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
                                 <div style="display: flex; justify-content: space-between; align-items: baseline;">
@@ -364,33 +367,33 @@
                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E2
                                 </div>
                                 <div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
-                                    <span lang="en">Waiting for 1 peer (KoalaPC)...</span><span lang="de">Warten auf 1 Partner (KoalaPC)...</span>
+                                    {{MOCK_16}}
                                 </div>
                                 <button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
-                                    <span lang="en">Skip & Play anyway</span><span lang="de">Überspringen & abspielen</span>
+                                    {{MOCK_17}}
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Other users currently connected to this room">
-                                <span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span>
+                                {{MOCK_04}}
                             </label>
                             <div class="mock-card" style="margin-bottom: 12px;">
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">{{MOCK_05}}</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">{{MOCK_07}}</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
                                     </div>
                                 </div>
                             </div>
@@ -400,14 +403,14 @@
                         <div id="mock-settings" class="mock-screen">
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
-                                    <span lang="en">Your Username</span><span lang="de">Dein Benutzername</span>
+                                    {{MOCK_18}}
                                 </label>
                                 <input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
                             </div>
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
-                                    <span lang="en">Hide Clutter Tabs</span><span lang="de">Noise-Filterung</span>
+                                    {{MOCK_19}}
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -417,7 +420,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
-                                    <span lang="en">Auto-Sync Next Episode</span><span lang="de">Nächste Folge auto-syncen</span>
+                                    {{MOCK_20}}
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -427,7 +430,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
-                                    <span lang="en">Auto-Copy Invite Link</span><span lang="de">Link auto-kopieren</span>
+                                    {{MOCK_21}}
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -437,7 +440,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
-                                    <span lang="en">Browser Notifications</span><span lang="de">Browser-Meldungen</span>
+                                    {{MOCK_22}}
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox">
@@ -447,14 +450,13 @@
 
                             <div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
                                 <label class="mock-section-label" title="Tools for fixing connection issues">
-                                    <span lang="en">Troubleshooting</span><span lang="de">Fehlerbehebung</span>
+                                    {{MOCK_23}}
                                 </label>
                                 <button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
-                                    <span lang="en">Regenerate Peer ID</span><span lang="de">Peer ID regenerieren</span>
+                                    {{MOCK_24}}
                                 </button>
                                 <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
-                                    <span lang="en">Use this if you see "Duplicate Identity" errors.</span>
+                                    {{MOCK_25}}
-                                    <span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
                                 </p>
                             </div>
                         </div>
@@ -462,20 +464,20 @@
                         <!-- DEV TAB -->
                         <div id="mock-dev" class="mock-screen">
                             <label class="mock-section-label" title="Current WebSocket connection state">
-                                <span lang="en">Connection Status</span><span lang="de">Verbindungsstatus</span>
+                                {{MOCK_26}}
                             </label>
                             <div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
                                 <span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
                                 <span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
-                                    <span lang="en">Connected</span><span lang="de">Verbunden</span>
+                                    {{MOCK_27}}
                                 </span>
                                 <button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
-                                    <span lang="en">Copy Logs</span><span lang="de">Logs kopieren</span>
+                                    {{MOCK_28}}
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Technical details about the currently selected video element">
-                                <span lang="en">Video Debug Info</span><span lang="de">Video-Debug-Info</span>
+                                {{MOCK_29}}
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
                                 <div>readyState: HAVE_ENOUGH_DATA</div>
@@ -485,7 +487,7 @@
                             </div>
 
                             <label class="mock-section-label" title="Chronological log of all sync commands in the room">
-                                <span lang="en">Full Action History</span><span lang="de">Aktivitätsverlauf</span>
+                                {{MOCK_30}}
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
                                 <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
@@ -500,10 +502,10 @@
 
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
-                                    <span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
+                                    {{MOCK_31}}
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:default; padding: 0; font-weight: 700;" title="Clear log output">
-                                    <span lang="en">CLEAR</span><span lang="de">LÖSCHEN</span>
+                                    {{MOCK_32}}
                                 </button>
                             </div>
                             <div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">

website/www/datenschutz.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Datenschutz / Privacy Policy | KoalaSync</title>
-    <link rel="preload" href="style.adcf0bc0.min.css" as="style">
+    <link rel="preload" href="style.23314305.min.css" as="style">
-    <link rel="stylesheet" href="style.adcf0bc0.min.css">
+    <link rel="stylesheet" href="style.23314305.min.css">
     <link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
     <meta name="robots" content="noindex">
 

website/www/de/index.html

@@ -6,10 +6,12 @@
     <title>KoalaSync | Netflix, YouTube & jedes Video mit Freunden synchronisieren</title>
     <meta name="description" content="Schaue Netflix, YouTube, Twitch und jedes HTML5-Video synchron mit Freunden. Kostenlose, quelloffene Browser-Erweiterung. Keine Anmeldung erforderlich.">
     
-    <link rel="preload" href="../style.adcf0bc0.min.css" as="style">
+    <link rel="preload" href="../style.23314305.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.adcf0bc0.min.css">
+    <link rel="stylesheet" href="../style.23314305.min.css">
-    <link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
     <link rel="canonical" href="https://sync.koalastuff.net/de/">
     <link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
     <link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/">
@@ -33,6 +35,7 @@
     <meta property="og:locale:alternate" content="es_ES">
     <meta property="og:locale:alternate" content="pt_BR">
     <meta property="og:locale:alternate" content="ru_RU">
+    <meta property="og:site_name" content="KoalaSync">
 
     <!-- Twitter / X -->
     <meta name="twitter:card" content="summary_large_image">
@@ -175,7 +178,7 @@
     <nav>
         <div class="container nav-content">
             <div class="logo-area">
-                <picture><source srcset="../assets/NewLogoIcon_40.avif 40w, ../assets/NewLogoIcon_80.avif 80w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_80.webp" srcset="../assets/NewLogoIcon_40.webp 40w, ../assets/NewLogoIcon_80.webp 80w, ../assets/NewLogoIcon.webp 200w" sizes="40px" alt="KoalaSync Logo" width="40" height="40"></picture>
+                <picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
                 <span>KoalaSync</span>
                 <div id="nav-extension-status" class="nav-ext-status" style="display: none;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
@@ -265,47 +268,47 @@
                         <div id="mock-room" class="mock-screen active">
                             <div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
                                 <div style="display: flex; flex-direction: column;">
-                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;"><span lang="en">Active Room</span><span lang="de">Aktiver Raum</span></span>
+                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;">Aktiver Raum</span>
                                     <span class="mock-room-name" style="font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.5px; margin-top: 2px;">brave-eagle-80</span>
                                 </div>
-                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);"><span lang="en">Official Server</span><span lang="de">Offizieller Server</span></span>
+                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);">Offizieller Server</span>
                             </div>
                             <div class="mock-card">
-                                    <div class="mock-label" title="Share this link with friends so they can join"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
+                                    <div class="mock-label" title="Share this link with friends so they can join">Einladungs-Link</div>
                                 <div class="mock-invite-box">
-                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;">
+                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
                                     <button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                 </div>
                             </div>
                             <div class="mock-card" style="margin-bottom: 12px;">
-                                    <div class="mock-label" title="Other users currently connected to this room"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
+                                    <div class="mock-label" title="Other users currently connected to this room">Teilnehmer im Raum</div>
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">ICH</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Wiedergabe</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Partner</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Wiedergabe</div>
                                     </div>
                                 </div>
                             </div>
-                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;"><span lang="en">Leave Room</span><span lang="de">Raum verlassen</span></button>
+                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">Raum verlassen</button>
                         </div>
 
                         <!-- SYNC TAB -->
                         <div id="mock-sync" class="mock-screen">
                             <div class="mock-form-group" style="margin-bottom: 12px;">
                                 <label class="mock-section-label" title="Choose the browser tab containing the video to sync">
-                                    <span lang="en">Select Video</span><span lang="de">Video auswählen</span>
+                                    Video auswählen
                                 </label>
                                 <select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
                                     <option><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</option>
@@ -314,32 +317,32 @@
                             
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
-                                    <span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
+                                    Fernsteuerung
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
                                     <span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
-                                    <span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span>
+                                    Einladungs-Link
                                 </button>
                             </div>
                             <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Play</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Start</span></button>
+                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Start</button>
-                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span></button>
+                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</button>
                             </div>
                             
                             <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
                                 <button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
-                                    <span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC
                                 </button>
                                 <div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
                                     <span>
-                                        <span lang="en">Jump to Others</span><span lang="de">Zu anderen springen</span>
+                                        Zu anderen springen
                                     </span>
                                     <span style="font-size: 0.5rem; opacity: 0.6;">▼</span>
                                 </div>
                             </div>
 
                             <label class="mock-section-label" title="Shows the most recent play, pause, or seek command">
-                                <span lang="en">Last Activity Status</span><span lang="de">Letzte Aktivität</span>
+                                Letzte Aktivität
                             </label>
                             <div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
                                 <div style="display: flex; justify-content: space-between; align-items: baseline;">
@@ -364,33 +367,33 @@
                                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E2
                                 </div>
                                 <div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
-                                    <span lang="en">Waiting for 1 peer (KoalaPC)...</span><span lang="de">Warten auf 1 Partner (KoalaPC)...</span>
+                                    Warten auf 1 Partner (KoalaPC)...
                                 </div>
                                 <button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
-                                    <span lang="en">Skip & Play anyway</span><span lang="de">Überspringen & abspielen</span>
+                                    Überspringen & abspielen
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Other users currently connected to this room">
-                                <span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span>
+                                Teilnehmer im Raum
                             </label>
                             <div class="mock-card" style="margin-bottom: 12px;">
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">ICH</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Wiedergabe</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Partner</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Wiedergabe</div>
                                     </div>
                                 </div>
                             </div>
@@ -400,14 +403,14 @@
                         <div id="mock-settings" class="mock-screen">
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
-                                    <span lang="en">Your Username</span><span lang="de">Dein Benutzername</span>
+                                    Dein Benutzername
                                 </label>
                                 <input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
                             </div>
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
-                                    <span lang="en">Hide Clutter Tabs</span><span lang="de">Noise-Filterung</span>
+                                    Noise-Filterung
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -417,7 +420,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
-                                    <span lang="en">Auto-Sync Next Episode</span><span lang="de">Nächste Folge auto-syncen</span>
+                                    Nächste Folge auto-syncen
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -427,7 +430,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
-                                    <span lang="en">Auto-Copy Invite Link</span><span lang="de">Link auto-kopieren</span>
+                                    Link auto-kopieren
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -437,7 +440,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
-                                    <span lang="en">Browser Notifications</span><span lang="de">Browser-Meldungen</span>
+                                    Browser-Meldungen
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox">
@@ -447,14 +450,13 @@
 
                             <div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
                                 <label class="mock-section-label" title="Tools for fixing connection issues">
-                                    <span lang="en">Troubleshooting</span><span lang="de">Fehlerbehebung</span>
+                                    Fehlerbehebung
                                 </label>
                                 <button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
-                                    <span lang="en">Regenerate Peer ID</span><span lang="de">Peer ID regenerieren</span>
+                                    Peer ID regenerieren
                                 </button>
                                 <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
-                                    <span lang="en">Use this if you see "Duplicate Identity" errors.</span>
+                                    Nutze dies bei "Duplicate Identity" Fehlern.
-                                    <span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
                                 </p>
                             </div>
                         </div>
@@ -462,20 +464,20 @@
                         <!-- DEV TAB -->
                         <div id="mock-dev" class="mock-screen">
                             <label class="mock-section-label" title="Current WebSocket connection state">
-                                <span lang="en">Connection Status</span><span lang="de">Verbindungsstatus</span>
+                                Verbindungsstatus
                             </label>
                             <div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
                                 <span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
                                 <span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
-                                    <span lang="en">Connected</span><span lang="de">Verbunden</span>
+                                    Verbunden
                                 </span>
                                 <button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
-                                    <span lang="en">Copy Logs</span><span lang="de">Logs kopieren</span>
+                                    Logs kopieren
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Technical details about the currently selected video element">
-                                <span lang="en">Video Debug Info</span><span lang="de">Video-Debug-Info</span>
+                                Video-Debug-Info
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
                                 <div>readyState: HAVE_ENOUGH_DATA</div>
@@ -485,7 +487,7 @@
                             </div>
 
                             <label class="mock-section-label" title="Chronological log of all sync commands in the room">
-                                <span lang="en">Full Action History</span><span lang="de">Aktivitätsverlauf</span>
+                                Aktivitätsverlauf
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
                                 <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
@@ -500,10 +502,10 @@
 
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
-                                    <span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
+                                    Protokoll (Letzte 50)
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:default; padding: 0; font-weight: 700;" title="Clear log output">
-                                    <span lang="en">CLEAR</span><span lang="de">LÖSCHEN</span>
+                                    LÖSCHEN
                                 </button>
                             </div>
                             <div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">

website/www/es/index.html

@@ -6,10 +6,12 @@
     <title>KoalaSync | Sincroniza Netflix, YouTube y cualquier video con amigos</title>
     <meta name="description" content="Mira Netflix, YouTube, Twitch y cualquier video HTML5 en perfecta sincronización con amigos. Extensión de navegador gratuita y de código abierto. Sin registro.">
     
-    <link rel="preload" href="../style.adcf0bc0.min.css" as="style">
+    <link rel="preload" href="../style.23314305.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.adcf0bc0.min.css">
+    <link rel="stylesheet" href="../style.23314305.min.css">
-    <link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
     <link rel="canonical" href="https://sync.koalastuff.net/es/">
     <link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
     <link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/">
@@ -33,6 +35,7 @@
     <meta property="og:locale:alternate" content="es_ES">
     <meta property="og:locale:alternate" content="pt_BR">
     <meta property="og:locale:alternate" content="ru_RU">
+    <meta property="og:site_name" content="KoalaSync">
 
     <!-- Twitter / X -->
     <meta name="twitter:card" content="summary_large_image">
@@ -175,7 +178,7 @@
     <nav>
         <div class="container nav-content">
             <div class="logo-area">
-                <picture><source srcset="../assets/NewLogoIcon_40.avif 40w, ../assets/NewLogoIcon_80.avif 80w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_80.webp" srcset="../assets/NewLogoIcon_40.webp 40w, ../assets/NewLogoIcon_80.webp 80w, ../assets/NewLogoIcon.webp 200w" sizes="40px" alt="KoalaSync Logo" width="40" height="40"></picture>
+                <picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
                 <span>KoalaSync</span>
                 <div id="nav-extension-status" class="nav-ext-status" style="display: none;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
@@ -265,47 +268,47 @@
                         <div id="mock-room" class="mock-screen active">
                             <div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
                                 <div style="display: flex; flex-direction: column;">
-                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;"><span lang="en">Active Room</span><span lang="de">Aktiver Raum</span></span>
+                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;">Sala activa</span>
                                     <span class="mock-room-name" style="font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.5px; margin-top: 2px;">brave-eagle-80</span>
                                 </div>
-                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);"><span lang="en">Official Server</span><span lang="de">Offizieller Server</span></span>
+                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);">Servidor oficial</span>
                             </div>
                             <div class="mock-card">
-                                    <div class="mock-label" title="Share this link with friends so they can join"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
+                                    <div class="mock-label" title="Share this link with friends so they can join">Enlace de invitación</div>
                                 <div class="mock-invite-box">
-                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;">
+                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
                                     <button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                 </div>
                             </div>
                             <div class="mock-card" style="margin-bottom: 12px;">
-                                    <div class="mock-label" title="Other users currently connected to this room"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
+                                    <div class="mock-label" title="Other users currently connected to this room">Participantes</div>
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">TÚ</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Reproduciendo</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Compañero</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Reproduciendo</div>
                                     </div>
                                 </div>
                             </div>
-                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;"><span lang="en">Leave Room</span><span lang="de">Raum verlassen</span></button>
+                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">Salir</button>
                         </div>
 
                         <!-- SYNC TAB -->
                         <div id="mock-sync" class="mock-screen">
                             <div class="mock-form-group" style="margin-bottom: 12px;">
                                 <label class="mock-section-label" title="Choose the browser tab containing the video to sync">
-                                    <span lang="en">Select Video</span><span lang="de">Video auswählen</span>
+                                    Seleccionar video
                                 </label>
                                 <select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
                                     <option><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</option>
@@ -314,32 +317,32 @@
                             
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
-                                    <span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
+                                    Control remoto
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
                                     <span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
-                                    <span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span>
+                                    Enlace de invitación
                                 </button>
                             </div>
                             <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Play</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Start</span></button>
+                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone">Reproducir</button>
-                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span></button>
+                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone">Pausa</button>
                             </div>
                             
                             <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
                                 <button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
-                                    <span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span>
+                                    Saltar a otros
                                 </button>
                                 <div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
                                     <span>
-                                        <span lang="en">Jump to Others</span><span lang="de">Zu anderen springen</span>
+                                        Última actividad
                                     </span>
                                     <span style="font-size: 0.5rem; opacity: 0.6;">▼</span>
                                 </div>
                             </div>
 
                             <label class="mock-section-label" title="Shows the most recent play, pause, or seek command">
-                                <span lang="en">Last Activity Status</span><span lang="de">Letzte Aktivität</span>
+                                Esperando a 1 compañero (KoalaPC)...
                             </label>
                             <div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
                                 <div style="display: flex; justify-content: space-between; align-items: baseline;">
@@ -364,33 +367,33 @@
                                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E2
                                 </div>
                                 <div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
-                                    <span lang="en">Waiting for 1 peer (KoalaPC)...</span><span lang="de">Warten auf 1 Partner (KoalaPC)...</span>
+                                    Saltar y reproducir
                                 </div>
                                 <button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
-                                    <span lang="en">Skip & Play anyway</span><span lang="de">Überspringen & abspielen</span>
+                                    Tu nombre
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Other users currently connected to this room">
-                                <span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span>
+                                Participantes
                             </label>
                             <div class="mock-card" style="margin-bottom: 12px;">
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">TÚ</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Reproduciendo</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Compañero</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Reproduciendo</div>
                                     </div>
                                 </div>
                             </div>
@@ -400,14 +403,14 @@
                         <div id="mock-settings" class="mock-screen">
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
-                                    <span lang="en">Your Username</span><span lang="de">Dein Benutzername</span>
+                                    Ocultar pestañas
                                 </label>
                                 <input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
                             </div>
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
-                                    <span lang="en">Hide Clutter Tabs</span><span lang="de">Noise-Filterung</span>
+                                    Auto-sync siguiente episodio
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -417,7 +420,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
-                                    <span lang="en">Auto-Sync Next Episode</span><span lang="de">Nächste Folge auto-syncen</span>
+                                    Auto-copiar enlace
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -427,7 +430,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
-                                    <span lang="en">Auto-Copy Invite Link</span><span lang="de">Link auto-kopieren</span>
+                                    Notificaciones
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -437,7 +440,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
-                                    <span lang="en">Browser Notifications</span><span lang="de">Browser-Meldungen</span>
+                                    Solución de problemas
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox">
@@ -447,14 +450,13 @@
 
                             <div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
                                 <label class="mock-section-label" title="Tools for fixing connection issues">
-                                    <span lang="en">Troubleshooting</span><span lang="de">Fehlerbehebung</span>
+                                    Regenerar ID
                                 </label>
                                 <button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
-                                    <span lang="en">Regenerate Peer ID</span><span lang="de">Peer ID regenerieren</span>
+                                    Usa esto si ves error de "Identidad duplicada".
                                 </button>
                                 <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
-                                    <span lang="en">Use this if you see "Duplicate Identity" errors.</span>
+                                    Estado de conexión
-                                    <span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
                                 </p>
                             </div>
                         </div>
@@ -462,20 +464,20 @@
                         <!-- DEV TAB -->
                         <div id="mock-dev" class="mock-screen">
                             <label class="mock-section-label" title="Current WebSocket connection state">
-                                <span lang="en">Connection Status</span><span lang="de">Verbindungsstatus</span>
+                                Conectado
                             </label>
                             <div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
                                 <span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
                                 <span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
-                                    <span lang="en">Connected</span><span lang="de">Verbunden</span>
+                                    Copiar logs
                                 </span>
                                 <button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
-                                    <span lang="en">Copy Logs</span><span lang="de">Logs kopieren</span>
+                                    Info de depuración de video
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Technical details about the currently selected video element">
-                                <span lang="en">Video Debug Info</span><span lang="de">Video-Debug-Info</span>
+                                Historial completo
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
                                 <div>readyState: HAVE_ENOUGH_DATA</div>
@@ -485,7 +487,7 @@
                             </div>
 
                             <label class="mock-section-label" title="Chronological log of all sync commands in the room">
-                                <span lang="en">Full Action History</span><span lang="de">Aktivitätsverlauf</span>
+                                Registros (últimos 50)
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
                                 <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
@@ -500,10 +502,10 @@
 
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
-                                    <span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
+                                    BORRAR
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:default; padding: 0; font-weight: 700;" title="Clear log output">
-                                    <span lang="en">CLEAR</span><span lang="de">LÖSCHEN</span>
+                                    CLEAR
                                 </button>
                             </div>
                             <div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">

website/www/fr/index.html

@@ -6,10 +6,12 @@
     <title>KoalaSync | Synchronisez Netflix, YouTube et n'importe quelle vidéo avec vos amis</title>
     <meta name="description" content="Regardez Netflix, YouTube, Twitch et des vidéos HTML5 en synchro avec vos amis. Extension de navigateur gratuite et open-source. Aucune inscription requise.">
     
-    <link rel="preload" href="../style.adcf0bc0.min.css" as="style">
+    <link rel="preload" href="../style.23314305.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.adcf0bc0.min.css">
+    <link rel="stylesheet" href="../style.23314305.min.css">
-    <link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
     <link rel="canonical" href="https://sync.koalastuff.net/fr/">
     <link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
     <link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/">
@@ -33,6 +35,7 @@
     <meta property="og:locale:alternate" content="es_ES">
     <meta property="og:locale:alternate" content="pt_BR">
     <meta property="og:locale:alternate" content="ru_RU">
+    <meta property="og:site_name" content="KoalaSync">
 
     <!-- Twitter / X -->
     <meta name="twitter:card" content="summary_large_image">
@@ -175,7 +178,7 @@
     <nav>
         <div class="container nav-content">
             <div class="logo-area">
-                <picture><source srcset="../assets/NewLogoIcon_40.avif 40w, ../assets/NewLogoIcon_80.avif 80w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_80.webp" srcset="../assets/NewLogoIcon_40.webp 40w, ../assets/NewLogoIcon_80.webp 80w, ../assets/NewLogoIcon.webp 200w" sizes="40px" alt="KoalaSync Logo" width="40" height="40"></picture>
+                <picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
                 <span>KoalaSync</span>
                 <div id="nav-extension-status" class="nav-ext-status" style="display: none;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
@@ -265,47 +268,47 @@
                         <div id="mock-room" class="mock-screen active">
                             <div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
                                 <div style="display: flex; flex-direction: column;">
-                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;"><span lang="en">Active Room</span><span lang="de">Aktiver Raum</span></span>
+                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;">Salle active</span>
                                     <span class="mock-room-name" style="font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.5px; margin-top: 2px;">brave-eagle-80</span>
                                 </div>
-                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);"><span lang="en">Official Server</span><span lang="de">Offizieller Server</span></span>
+                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);">Serveur officiel</span>
                             </div>
                             <div class="mock-card">
-                                    <div class="mock-label" title="Share this link with friends so they can join"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
+                                    <div class="mock-label" title="Share this link with friends so they can join">Lien d'invitation</div>
                                 <div class="mock-invite-box">
-                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;">
+                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
                                     <button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                 </div>
                             </div>
                             <div class="mock-card" style="margin-bottom: 12px;">
-                                    <div class="mock-label" title="Other users currently connected to this room"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
+                                    <div class="mock-label" title="Other users currently connected to this room">Participants</div>
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">VOUS</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Lecture</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Partenaire</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Lecture</div>
                                     </div>
                                 </div>
                             </div>
-                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;"><span lang="en">Leave Room</span><span lang="de">Raum verlassen</span></button>
+                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">Quitter</button>
                         </div>
 
                         <!-- SYNC TAB -->
                         <div id="mock-sync" class="mock-screen">
                             <div class="mock-form-group" style="margin-bottom: 12px;">
                                 <label class="mock-section-label" title="Choose the browser tab containing the video to sync">
-                                    <span lang="en">Select Video</span><span lang="de">Video auswählen</span>
+                                    Choisir la vidéo
                                 </label>
                                 <select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
                                     <option><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</option>
@@ -314,32 +317,32 @@
                             
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
-                                    <span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
+                                    Télécommande
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
                                     <span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
-                                    <span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span>
+                                    Lien d'invitation
                                 </button>
                             </div>
                             <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Play</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Start</span></button>
+                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone">Lire</button>
-                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span></button>
+                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone">Pause</button>
                             </div>
                             
                             <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
                                 <button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
-                                    <span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span>
+                                    Sauter vers les autres
                                 </button>
                                 <div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
                                     <span>
-                                        <span lang="en">Jump to Others</span><span lang="de">Zu anderen springen</span>
+                                        Dernière activité
                                     </span>
                                     <span style="font-size: 0.5rem; opacity: 0.6;">▼</span>
                                 </div>
                             </div>
 
                             <label class="mock-section-label" title="Shows the most recent play, pause, or seek command">
-                                <span lang="en">Last Activity Status</span><span lang="de">Letzte Aktivität</span>
+                                En attente de 1 participant (KoalaPC)...
                             </label>
                             <div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
                                 <div style="display: flex; justify-content: space-between; align-items: baseline;">
@@ -364,33 +367,33 @@
                                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E2
                                 </div>
                                 <div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
-                                    <span lang="en">Waiting for 1 peer (KoalaPC)...</span><span lang="de">Warten auf 1 Partner (KoalaPC)...</span>
+                                    Passer & lire
                                 </div>
                                 <button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
-                                    <span lang="en">Skip & Play anyway</span><span lang="de">Überspringen & abspielen</span>
+                                    Votre pseudo
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Other users currently connected to this room">
-                                <span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span>
+                                Participants
                             </label>
                             <div class="mock-card" style="margin-bottom: 12px;">
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">VOUS</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Lecture</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Partenaire</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Lecture</div>
                                     </div>
                                 </div>
                             </div>
@@ -400,14 +403,14 @@
                         <div id="mock-settings" class="mock-screen">
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
-                                    <span lang="en">Your Username</span><span lang="de">Dein Benutzername</span>
+                                    Masquer les onglets inutiles
                                 </label>
                                 <input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
                             </div>
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
-                                    <span lang="en">Hide Clutter Tabs</span><span lang="de">Noise-Filterung</span>
+                                    Auto-sync épisode suivant
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -417,7 +420,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
-                                    <span lang="en">Auto-Sync Next Episode</span><span lang="de">Nächste Folge auto-syncen</span>
+                                    Copie automatique du lien d'invitation
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -427,7 +430,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
-                                    <span lang="en">Auto-Copy Invite Link</span><span lang="de">Link auto-kopieren</span>
+                                    Notifications navigateur
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -437,7 +440,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
-                                    <span lang="en">Browser Notifications</span><span lang="de">Browser-Meldungen</span>
+                                    Dépannage
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox">
@@ -447,14 +450,13 @@
 
                             <div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
                                 <label class="mock-section-label" title="Tools for fixing connection issues">
-                                    <span lang="en">Troubleshooting</span><span lang="de">Fehlerbehebung</span>
+                                    Régénérer l'ID pair
                                 </label>
                                 <button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
-                                    <span lang="en">Regenerate Peer ID</span><span lang="de">Peer ID regenerieren</span>
+                                    Utilisez ceci en cas d'erreur "Identité dupliquée".
                                 </button>
                                 <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
-                                    <span lang="en">Use this if you see "Duplicate Identity" errors.</span>
+                                    État de la connexion
-                                    <span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
                                 </p>
                             </div>
                         </div>
@@ -462,20 +464,20 @@
                         <!-- DEV TAB -->
                         <div id="mock-dev" class="mock-screen">
                             <label class="mock-section-label" title="Current WebSocket connection state">
-                                <span lang="en">Connection Status</span><span lang="de">Verbindungsstatus</span>
+                                Connecté
                             </label>
                             <div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
                                 <span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
                                 <span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
-                                    <span lang="en">Connected</span><span lang="de">Verbunden</span>
+                                    Copier les logs
                                 </span>
                                 <button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
-                                    <span lang="en">Copy Logs</span><span lang="de">Logs kopieren</span>
+                                    Infos de débogage vidéo
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Technical details about the currently selected video element">
-                                <span lang="en">Video Debug Info</span><span lang="de">Video-Debug-Info</span>
+                                Historique complet d'actions
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
                                 <div>readyState: HAVE_ENOUGH_DATA</div>
@@ -485,7 +487,7 @@
                             </div>
 
                             <label class="mock-section-label" title="Chronological log of all sync commands in the room">
-                                <span lang="en">Full Action History</span><span lang="de">Aktivitätsverlauf</span>
+                                Logs (50 derniers)
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
                                 <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
@@ -500,10 +502,10 @@
 
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
-                                    <span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
+                                    EFFACER
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:default; padding: 0; font-weight: 700;" title="Clear log output">
-                                    <span lang="en">CLEAR</span><span lang="de">LÖSCHEN</span>
+                                    CLEAR
                                 </button>
                             </div>
                             <div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">

website/www/impressum.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Impressum / Legal Notice | KoalaSync</title>
-    <link rel="preload" href="style.adcf0bc0.min.css" as="style">
+    <link rel="preload" href="style.23314305.min.css" as="style">
-    <link rel="stylesheet" href="style.adcf0bc0.min.css">
+    <link rel="stylesheet" href="style.23314305.min.css">
     <link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
     <meta name="robots" content="noindex">
 

website/www/index.html

@@ -6,10 +6,12 @@
     <title>KoalaSync | Sync Netflix, YouTube & Any Video with Friends</title>
     <meta name="description" content="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.">
     
-    <link rel="preload" href="style.adcf0bc0.min.css" as="style">
+    <link rel="preload" href="style.23314305.min.css" as="style">
     <link rel="preload" as="image" href="assets/LookDownKoala.webp" imagesrcset="assets/LookDownKoala-1x.webp 90w, assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="style.adcf0bc0.min.css">
+    <link rel="stylesheet" href="style.23314305.min.css">
-    <link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/icon-192x192.png">
     <link rel="canonical" href="https://sync.koalastuff.net/">
     <link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
     <link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/">
@@ -33,6 +35,7 @@
     <meta property="og:locale:alternate" content="es_ES">
     <meta property="og:locale:alternate" content="pt_BR">
     <meta property="og:locale:alternate" content="ru_RU">
+    <meta property="og:site_name" content="KoalaSync">
 
     <!-- Twitter / X -->
     <meta name="twitter:card" content="summary_large_image">
@@ -175,7 +178,7 @@
     <nav>
         <div class="container nav-content">
             <div class="logo-area">
-                <picture><source srcset="assets/NewLogoIcon_40.avif 40w, assets/NewLogoIcon_80.avif 80w, assets/NewLogoIcon.avif 200w" type="image/avif"><img src="assets/NewLogoIcon_80.webp" srcset="assets/NewLogoIcon_40.webp 40w, assets/NewLogoIcon_80.webp 80w, assets/NewLogoIcon.webp 200w" sizes="40px" alt="KoalaSync Logo" width="40" height="40"></picture>
+                <picture><source srcset="assets/NewLogoIcon_64.avif 64w, assets/NewLogoIcon_128.avif 128w, assets/NewLogoIcon.avif 200w" type="image/avif"><img src="assets/NewLogoIcon_128.webp" srcset="assets/NewLogoIcon_64.webp 64w, assets/NewLogoIcon_128.webp 128w, assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
                 <span>KoalaSync</span>
                 <div id="nav-extension-status" class="nav-ext-status" style="display: none;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
@@ -265,47 +268,47 @@
                         <div id="mock-room" class="mock-screen active">
                             <div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
                                 <div style="display: flex; flex-direction: column;">
-                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;"><span lang="en">Active Room</span><span lang="de">Aktiver Raum</span></span>
+                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;">Active Room</span>
                                     <span class="mock-room-name" style="font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.5px; margin-top: 2px;">brave-eagle-80</span>
                                 </div>
-                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);"><span lang="en">Official Server</span><span lang="de">Offizieller Server</span></span>
+                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);">Official Server</span>
                             </div>
                             <div class="mock-card">
-                                    <div class="mock-label" title="Share this link with friends so they can join"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
+                                    <div class="mock-label" title="Share this link with friends so they can join">Invite Link</div>
                                 <div class="mock-invite-box">
-                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;">
+                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
                                     <button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                 </div>
                             </div>
                             <div class="mock-card" style="margin-bottom: 12px;">
-                                    <div class="mock-label" title="Other users currently connected to this room"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
+                                    <div class="mock-label" title="Other users currently connected to this room">Peers in Room</div>
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">YOU</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Peer</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
                                     </div>
                                 </div>
                             </div>
-                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;"><span lang="en">Leave Room</span><span lang="de">Raum verlassen</span></button>
+                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">Leave Room</button>
                         </div>
 
                         <!-- SYNC TAB -->
                         <div id="mock-sync" class="mock-screen">
                             <div class="mock-form-group" style="margin-bottom: 12px;">
                                 <label class="mock-section-label" title="Choose the browser tab containing the video to sync">
-                                    <span lang="en">Select Video</span><span lang="de">Video auswählen</span>
+                                    Select Video
                                 </label>
                                 <select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
                                     <option><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</option>
@@ -314,32 +317,32 @@
                             
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
-                                    <span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
+                                    Remote Control
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
                                     <span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
-                                    <span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span>
+                                    Invite Link
                                 </button>
                             </div>
                             <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Play</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Start</span></button>
+                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Play</button>
-                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span></button>
+                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</button>
                             </div>
                             
                             <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
                                 <button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
-                                    <span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC
                                 </button>
                                 <div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
                                     <span>
-                                        <span lang="en">Jump to Others</span><span lang="de">Zu anderen springen</span>
+                                        Jump to Others
                                     </span>
                                     <span style="font-size: 0.5rem; opacity: 0.6;">▼</span>
                                 </div>
                             </div>
 
                             <label class="mock-section-label" title="Shows the most recent play, pause, or seek command">
-                                <span lang="en">Last Activity Status</span><span lang="de">Letzte Aktivität</span>
+                                Last Activity Status
                             </label>
                             <div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
                                 <div style="display: flex; justify-content: space-between; align-items: baseline;">
@@ -364,33 +367,33 @@
                                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E2
                                 </div>
                                 <div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
-                                    <span lang="en">Waiting for 1 peer (KoalaPC)...</span><span lang="de">Warten auf 1 Partner (KoalaPC)...</span>
+                                    Waiting for 1 peer (KoalaPC)...
                                 </div>
                                 <button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
-                                    <span lang="en">Skip & Play anyway</span><span lang="de">Überspringen & abspielen</span>
+                                    Skip & Play anyway
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Other users currently connected to this room">
-                                <span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span>
+                                Peers in Room
                             </label>
                             <div class="mock-card" style="margin-bottom: 12px;">
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">YOU</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Peer</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
                                     </div>
                                 </div>
                             </div>
@@ -400,14 +403,14 @@
                         <div id="mock-settings" class="mock-screen">
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
-                                    <span lang="en">Your Username</span><span lang="de">Dein Benutzername</span>
+                                    Your Username
                                 </label>
                                 <input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
                             </div>
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
-                                    <span lang="en">Hide Clutter Tabs</span><span lang="de">Noise-Filterung</span>
+                                    Hide Clutter Tabs
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -417,7 +420,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
-                                    <span lang="en">Auto-Sync Next Episode</span><span lang="de">Nächste Folge auto-syncen</span>
+                                    Auto-Sync Next Episode
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -427,7 +430,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
-                                    <span lang="en">Auto-Copy Invite Link</span><span lang="de">Link auto-kopieren</span>
+                                    Auto-Copy Invite Link
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -437,7 +440,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
-                                    <span lang="en">Browser Notifications</span><span lang="de">Browser-Meldungen</span>
+                                    Browser Notifications
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox">
@@ -447,14 +450,13 @@
 
                             <div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
                                 <label class="mock-section-label" title="Tools for fixing connection issues">
-                                    <span lang="en">Troubleshooting</span><span lang="de">Fehlerbehebung</span>
+                                    Troubleshooting
                                 </label>
                                 <button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
-                                    <span lang="en">Regenerate Peer ID</span><span lang="de">Peer ID regenerieren</span>
+                                    Regenerate Peer ID
                                 </button>
                                 <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
-                                    <span lang="en">Use this if you see "Duplicate Identity" errors.</span>
+                                    Use this if you see "Duplicate Identity" errors.
-                                    <span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
                                 </p>
                             </div>
                         </div>
@@ -462,20 +464,20 @@
                         <!-- DEV TAB -->
                         <div id="mock-dev" class="mock-screen">
                             <label class="mock-section-label" title="Current WebSocket connection state">
-                                <span lang="en">Connection Status</span><span lang="de">Verbindungsstatus</span>
+                                Connection Status
                             </label>
                             <div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
                                 <span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
                                 <span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
-                                    <span lang="en">Connected</span><span lang="de">Verbunden</span>
+                                    Connected
                                 </span>
                                 <button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
-                                    <span lang="en">Copy Logs</span><span lang="de">Logs kopieren</span>
+                                    Copy Logs
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Technical details about the currently selected video element">
-                                <span lang="en">Video Debug Info</span><span lang="de">Video-Debug-Info</span>
+                                Video Debug Info
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
                                 <div>readyState: HAVE_ENOUGH_DATA</div>
@@ -485,7 +487,7 @@
                             </div>
 
                             <label class="mock-section-label" title="Chronological log of all sync commands in the room">
-                                <span lang="en">Full Action History</span><span lang="de">Aktivitätsverlauf</span>
+                                Full Action History
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
                                 <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
@@ -500,10 +502,10 @@
 
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
-                                    <span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
+                                    Logs (Last 50)
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:default; padding: 0; font-weight: 700;" title="Clear log output">
-                                    <span lang="en">CLEAR</span><span lang="de">LÖSCHEN</span>
+                                    CLEAR
                                 </button>
                             </div>
                             <div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">

website/www/join.html

@@ -4,9 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Join Room | KoalaSync</title>
-    <link rel="preload" href="style.adcf0bc0.min.css" as="style">
+    <link rel="preload" href="style.23314305.min.css" as="style">
-    <link rel="stylesheet" href="style.adcf0bc0.min.css">
+    <link rel="stylesheet" href="style.23314305.min.css">
-    <link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/icon-192x192.png">
     <meta name="robots" content="noindex">
 
     <!-- Open Graph / Facebook -->
@@ -39,7 +41,7 @@
     <nav>
         <div class="container nav-content">
             <a href="./" class="logo-area" style="text-decoration: none;">
-                <picture><source srcset="assets/NewLogoIcon.avif" type="image/avif"><img src="assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="40" height="40"></picture>
+                <picture><source srcset="assets/NewLogoIcon.avif" type="image/avif"><img src="assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="64" height="64"></picture>
                 <span>KoalaSync</span>
             </a>
             <button class="hamburger" aria-label="Menu" aria-expanded="false">☰</button>

website/www/pt-BR/index.html

@@ -6,10 +6,12 @@
     <title>KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com amigos</title>
     <meta name="description" content="Assista Netflix, YouTube, Twitch e qualquer vídeo HTML5 em perfeita sincronia com amigos. Extensão de navegador gratuita e de código aberto. Sem registro.">
     
-    <link rel="preload" href="../style.adcf0bc0.min.css" as="style">
+    <link rel="preload" href="../style.23314305.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.adcf0bc0.min.css">
+    <link rel="stylesheet" href="../style.23314305.min.css">
-    <link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
     <link rel="canonical" href="https://sync.koalastuff.net/pt-BR/">
     <link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
     <link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/">
@@ -33,6 +35,7 @@
     <meta property="og:locale:alternate" content="es_ES">
     <meta property="og:locale:alternate" content="pt_BR">
     <meta property="og:locale:alternate" content="ru_RU">
+    <meta property="og:site_name" content="KoalaSync">
 
     <!-- Twitter / X -->
     <meta name="twitter:card" content="summary_large_image">
@@ -175,7 +178,7 @@
     <nav>
         <div class="container nav-content">
             <div class="logo-area">
-                <picture><source srcset="../assets/NewLogoIcon_40.avif 40w, ../assets/NewLogoIcon_80.avif 80w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_80.webp" srcset="../assets/NewLogoIcon_40.webp 40w, ../assets/NewLogoIcon_80.webp 80w, ../assets/NewLogoIcon.webp 200w" sizes="40px" alt="KoalaSync Logo" width="40" height="40"></picture>
+                <picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
                 <span>KoalaSync</span>
                 <div id="nav-extension-status" class="nav-ext-status" style="display: none;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
@@ -265,47 +268,47 @@
                         <div id="mock-room" class="mock-screen active">
                             <div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
                                 <div style="display: flex; flex-direction: column;">
-                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;"><span lang="en">Active Room</span><span lang="de">Aktiver Raum</span></span>
+                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;">Sala ativa</span>
                                     <span class="mock-room-name" style="font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.5px; margin-top: 2px;">brave-eagle-80</span>
                                 </div>
-                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);"><span lang="en">Official Server</span><span lang="de">Offizieller Server</span></span>
+                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);">Servidor oficial</span>
                             </div>
                             <div class="mock-card">
-                                    <div class="mock-label" title="Share this link with friends so they can join"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
+                                    <div class="mock-label" title="Share this link with friends so they can join">Link de convite</div>
                                 <div class="mock-invite-box">
-                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;">
+                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
                                     <button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                 </div>
                             </div>
                             <div class="mock-card" style="margin-bottom: 12px;">
-                                    <div class="mock-label" title="Other users currently connected to this room"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
+                                    <div class="mock-label" title="Other users currently connected to this room">Participantes</div>
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">VOCÊ</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Reproduzindo</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Parceiro</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Reproduzindo</div>
                                     </div>
                                 </div>
                             </div>
-                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;"><span lang="en">Leave Room</span><span lang="de">Raum verlassen</span></button>
+                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">Sair da sala</button>
                         </div>
 
                         <!-- SYNC TAB -->
                         <div id="mock-sync" class="mock-screen">
                             <div class="mock-form-group" style="margin-bottom: 12px;">
                                 <label class="mock-section-label" title="Choose the browser tab containing the video to sync">
-                                    <span lang="en">Select Video</span><span lang="de">Video auswählen</span>
+                                    Selecionar vídeo
                                 </label>
                                 <select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
                                     <option><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</option>
@@ -314,32 +317,32 @@
                             
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
-                                    <span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
+                                    Controle remoto
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
                                     <span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
-                                    <span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span>
+                                    Link de convite
                                 </button>
                             </div>
                             <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Play</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Start</span></button>
+                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone">Reproduzir</button>
-                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span></button>
+                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone">Pausar</button>
                             </div>
                             
                             <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
                                 <button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
-                                    <span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span>
+                                    Pular para outros
                                 </button>
                                 <div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
                                     <span>
-                                        <span lang="en">Jump to Others</span><span lang="de">Zu anderen springen</span>
+                                        Última atividade
                                     </span>
                                     <span style="font-size: 0.5rem; opacity: 0.6;">▼</span>
                                 </div>
                             </div>
 
                             <label class="mock-section-label" title="Shows the most recent play, pause, or seek command">
-                                <span lang="en">Last Activity Status</span><span lang="de">Letzte Aktivität</span>
+                                Aguardando 1 parceiro (KoalaPC)...
                             </label>
                             <div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
                                 <div style="display: flex; justify-content: space-between; align-items: baseline;">
@@ -364,33 +367,33 @@
                                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E2
                                 </div>
                                 <div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
-                                    <span lang="en">Waiting for 1 peer (KoalaPC)...</span><span lang="de">Warten auf 1 Partner (KoalaPC)...</span>
+                                    Pular e reproduzir
                                 </div>
                                 <button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
-                                    <span lang="en">Skip & Play anyway</span><span lang="de">Überspringen & abspielen</span>
+                                    Seu nome
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Other users currently connected to this room">
-                                <span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span>
+                                Participantes
                             </label>
                             <div class="mock-card" style="margin-bottom: 12px;">
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">VOCÊ</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Reproduzindo</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Parceiro</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Reproduzindo</div>
                                     </div>
                                 </div>
                             </div>
@@ -400,14 +403,14 @@
                         <div id="mock-settings" class="mock-screen">
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
-                                    <span lang="en">Your Username</span><span lang="de">Dein Benutzername</span>
+                                    Ocultar abas confusas
                                 </label>
                                 <input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
                             </div>
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
-                                    <span lang="en">Hide Clutter Tabs</span><span lang="de">Noise-Filterung</span>
+                                    Auto-sync próximo episódio
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -417,7 +420,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
-                                    <span lang="en">Auto-Sync Next Episode</span><span lang="de">Nächste Folge auto-syncen</span>
+                                    Auto-copiar convite
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -427,7 +430,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
-                                    <span lang="en">Auto-Copy Invite Link</span><span lang="de">Link auto-kopieren</span>
+                                    Notificações
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -437,7 +440,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
-                                    <span lang="en">Browser Notifications</span><span lang="de">Browser-Meldungen</span>
+                                    Solução de problemas
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox">
@@ -447,14 +450,13 @@
 
                             <div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
                                 <label class="mock-section-label" title="Tools for fixing connection issues">
-                                    <span lang="en">Troubleshooting</span><span lang="de">Fehlerbehebung</span>
+                                    Regenerar Peer ID
                                 </label>
                                 <button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
-                                    <span lang="en">Regenerate Peer ID</span><span lang="de">Peer ID regenerieren</span>
+                                    Use se aparecer erro "Identidade duplicada".
                                 </button>
                                 <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
-                                    <span lang="en">Use this if you see "Duplicate Identity" errors.</span>
+                                    Status da conexão
-                                    <span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
                                 </p>
                             </div>
                         </div>
@@ -462,20 +464,20 @@
                         <!-- DEV TAB -->
                         <div id="mock-dev" class="mock-screen">
                             <label class="mock-section-label" title="Current WebSocket connection state">
-                                <span lang="en">Connection Status</span><span lang="de">Verbindungsstatus</span>
+                                Conectado
                             </label>
                             <div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
                                 <span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
                                 <span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
-                                    <span lang="en">Connected</span><span lang="de">Verbunden</span>
+                                    Copiar logs
                                 </span>
                                 <button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
-                                    <span lang="en">Copy Logs</span><span lang="de">Logs kopieren</span>
+                                    Info de depuração de vídeo
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Technical details about the currently selected video element">
-                                <span lang="en">Video Debug Info</span><span lang="de">Video-Debug-Info</span>
+                                Histórico completo
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
                                 <div>readyState: HAVE_ENOUGH_DATA</div>
@@ -485,7 +487,7 @@
                             </div>
 
                             <label class="mock-section-label" title="Chronological log of all sync commands in the room">
-                                <span lang="en">Full Action History</span><span lang="de">Aktivitätsverlauf</span>
+                                Logs (últimos 50)
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
                                 <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
@@ -500,10 +502,10 @@
 
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
-                                    <span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
+                                    LIMPAR
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:default; padding: 0; font-weight: 700;" title="Clear log output">
-                                    <span lang="en">CLEAR</span><span lang="de">LÖSCHEN</span>
+                                    CLEAR
                                 </button>
                             </div>
                             <div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">

website/www/ru/index.html

@@ -6,10 +6,12 @@
     <title>KoalaSync | Синхронизация Netflix, YouTube и любого видео с друзьями</title>
     <meta name="description" content="Смотрите Netflix, YouTube, Twitch и любые HTML5-видео в синхронизации с друзьями. Бесплатное расширение браузера с открытым кодом. Регистрация не требуется.">
     
-    <link rel="preload" href="../style.adcf0bc0.min.css" as="style">
+    <link rel="preload" href="../style.23314305.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.adcf0bc0.min.css">
+    <link rel="stylesheet" href="../style.23314305.min.css">
-    <link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
+    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
     <link rel="canonical" href="https://sync.koalastuff.net/ru/">
     <link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
     <link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/">
@@ -33,6 +35,7 @@
     <meta property="og:locale:alternate" content="es_ES">
     <meta property="og:locale:alternate" content="pt_BR">
     <meta property="og:locale:alternate" content="ru_RU">
+    <meta property="og:site_name" content="KoalaSync">
 
     <!-- Twitter / X -->
     <meta name="twitter:card" content="summary_large_image">
@@ -175,7 +178,7 @@
     <nav>
         <div class="container nav-content">
             <div class="logo-area">
-                <picture><source srcset="../assets/NewLogoIcon_40.avif 40w, ../assets/NewLogoIcon_80.avif 80w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_80.webp" srcset="../assets/NewLogoIcon_40.webp 40w, ../assets/NewLogoIcon_80.webp 80w, ../assets/NewLogoIcon.webp 200w" sizes="40px" alt="KoalaSync Logo" width="40" height="40"></picture>
+                <picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
                 <span>KoalaSync</span>
                 <div id="nav-extension-status" class="nav-ext-status" style="display: none;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
@@ -265,47 +268,47 @@
                         <div id="mock-room" class="mock-screen active">
                             <div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
                                 <div style="display: flex; flex-direction: column;">
-                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;"><span lang="en">Active Room</span><span lang="de">Aktiver Raum</span></span>
+                                    <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;">Активная комната</span>
                                     <span class="mock-room-name" style="font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.5px; margin-top: 2px;">brave-eagle-80</span>
                                 </div>
-                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);"><span lang="en">Official Server</span><span lang="de">Offizieller Server</span></span>
+                                    <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);">Официальный сервер</span>
                             </div>
                             <div class="mock-card">
-                                    <div class="mock-label" title="Share this link with friends so they can join"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
+                                    <div class="mock-label" title="Share this link with friends so they can join">Ссылка-приглашение</div>
                                 <div class="mock-invite-box">
-                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;">
+                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
                                     <button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                 </div>
                             </div>
                             <div class="mock-card" style="margin-bottom: 12px;">
-                                    <div class="mock-label" title="Other users currently connected to this room"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
+                                    <div class="mock-label" title="Other users currently connected to this room">Участники</div>
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">ВЫ</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Воспроизведение</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Собеседник</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Воспроизведение</div>
                                     </div>
                                 </div>
                             </div>
-                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;"><span lang="en">Leave Room</span><span lang="de">Raum verlassen</span></button>
+                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">Покинуть комнату</button>
                         </div>
 
                         <!-- SYNC TAB -->
                         <div id="mock-sync" class="mock-screen">
                             <div class="mock-form-group" style="margin-bottom: 12px;">
                                 <label class="mock-section-label" title="Choose the browser tab containing the video to sync">
-                                    <span lang="en">Select Video</span><span lang="de">Video auswählen</span>
+                                    Выбрать видео
                                 </label>
                                 <select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
                                     <option><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</option>
@@ -314,32 +317,32 @@
                             
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
-                                    <span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
+                                    Пульт управления
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
                                     <span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
-                                    <span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span>
+                                    Ссылка-приглашение
                                 </button>
                             </div>
                             <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Play</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Start</span></button>
+                                    <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone">Воспроизвести</button>
-                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</span></button>
+                                    <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone">Пауза</button>
                             </div>
                             
                             <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
                                 <button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
-                                    <span lang="en"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC</span>
+                                    Перейти к другим
                                 </button>
                                 <div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
                                     <span>
-                                        <span lang="en">Jump to Others</span><span lang="de">Zu anderen springen</span>
+                                        Последняя активность
                                     </span>
                                     <span style="font-size: 0.5rem; opacity: 0.6;">▼</span>
                                 </div>
                             </div>
 
                             <label class="mock-section-label" title="Shows the most recent play, pause, or seek command">
-                                <span lang="en">Last Activity Status</span><span lang="de">Letzte Aktivität</span>
+                                Ожидание 1 участника (KoalaPC)...
                             </label>
                             <div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
                                 <div style="display: flex; justify-content: space-between; align-items: baseline;">
@@ -364,33 +367,33 @@
                                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E2
                                 </div>
                                 <div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
-                                    <span lang="en">Waiting for 1 peer (KoalaPC)...</span><span lang="de">Warten auf 1 Partner (KoalaPC)...</span>
+                                    Пропустить и играть
                                 </div>
                                 <button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
-                                    <span lang="en">Skip & Play anyway</span><span lang="de">Überspringen & abspielen</span>
+                                    Ваше имя
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Other users currently connected to this room">
-                                <span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span>
+                                Участники
                             </label>
                             <div class="mock-card" style="margin-bottom: 12px;">
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">CoolUsername</span>
-                                                <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                                <span class="mock-peer-meta">ВЫ</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Воспроизведение</div>
                                     </div>
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
                                             <span class="mock-peer-name">KoalaPC</span>
-                                                <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                                <span class="mock-peer-meta">Собеседник</span>
                                         </div>
                                         <div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
-                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                            <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Воспроизведение</div>
                                     </div>
                                 </div>
                             </div>
@@ -400,14 +403,14 @@
                         <div id="mock-settings" class="mock-screen">
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
-                                    <span lang="en">Your Username</span><span lang="de">Dein Benutzername</span>
+                                    Скрыть лишние вкладки
                                 </label>
                                 <input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
                             </div>
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
-                                    <span lang="en">Hide Clutter Tabs</span><span lang="de">Noise-Filterung</span>
+                                    Автосинхронизация серий
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -417,7 +420,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
-                                    <span lang="en">Auto-Sync Next Episode</span><span lang="de">Nächste Folge auto-syncen</span>
+                                    Автокопирование ссылки
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -427,7 +430,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
-                                    <span lang="en">Auto-Copy Invite Link</span><span lang="de">Link auto-kopieren</span>
+                                    Уведомления браузера
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox" checked>
@@ -437,7 +440,7 @@
 
                             <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
-                                    <span lang="en">Browser Notifications</span><span lang="de">Browser-Meldungen</span>
+                                    Устранение неполадок
                                 </label>
                                 <label class="mock-toggle-switch">
                                     <input type="checkbox">
@@ -447,14 +450,13 @@
 
                             <div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
                                 <label class="mock-section-label" title="Tools for fixing connection issues">
-                                    <span lang="en">Troubleshooting</span><span lang="de">Fehlerbehebung</span>
+                                    Обновить Peer ID
                                 </label>
                                 <button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
-                                    <span lang="en">Regenerate Peer ID</span><span lang="de">Peer ID regenerieren</span>
+                                    Используйте при ошибке "Дублирование идентификатора".
                                 </button>
                                 <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
-                                    <span lang="en">Use this if you see "Duplicate Identity" errors.</span>
+                                    Статус соединения
-                                    <span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
                                 </p>
                             </div>
                         </div>
@@ -462,20 +464,20 @@
                         <!-- DEV TAB -->
                         <div id="mock-dev" class="mock-screen">
                             <label class="mock-section-label" title="Current WebSocket connection state">
-                                <span lang="en">Connection Status</span><span lang="de">Verbindungsstatus</span>
+                                Подключено
                             </label>
                             <div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
                                 <span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
                                 <span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
-                                    <span lang="en">Connected</span><span lang="de">Verbunden</span>
+                                    Копировать логи
                                 </span>
                                 <button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
-                                    <span lang="en">Copy Logs</span><span lang="de">Logs kopieren</span>
+                                    Отладочная информация
                                 </button>
                             </div>
 
                             <label class="mock-section-label" title="Technical details about the currently selected video element">
-                                <span lang="en">Video Debug Info</span><span lang="de">Video-Debug-Info</span>
+                                Полная история действий
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
                                 <div>readyState: HAVE_ENOUGH_DATA</div>
@@ -485,7 +487,7 @@
                             </div>
 
                             <label class="mock-section-label" title="Chronological log of all sync commands in the room">
-                                <span lang="en">Full Action History</span><span lang="de">Aktivitätsverlauf</span>
+                                Логи (последние 50)
                             </label>
                             <div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
                                 <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
@@ -500,10 +502,10 @@
 
                             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                 <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
-                                    <span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
+                                    ОЧИСТИТЬ
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:default; padding: 0; font-weight: 700;" title="Clear log output">
-                                    <span lang="en">CLEAR</span><span lang="de">LÖSCHEN</span>
+                                    CLEAR
                                 </button>
                             </div>
                             <div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">

website/www/site.webmanifest

@@ -18,6 +18,12 @@
       "sizes": "128x128",
       "type": "image/webp",
       "purpose": "any maskable"
+    },
+    {
+      "src": "/assets/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ]
 }