mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-09-02 05:57:55 +00:00
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
This commit is contained in:
Timo
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
@@ -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="stylesheet" href="style.adcf0bc0.min.css">
|
||||
<link rel="preload" href="style.23314305.min.css" as="style">
|
||||
<link rel="stylesheet" href="style.23314305.min.css">
|
||||
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
|
||||
<meta name="robots" content="noindex">
|
||||
|
||||
|
||||
+47
-45
@@ -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="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
|
||||
<link rel="stylesheet" href="../style.23314305.min.css">
|
||||
<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-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-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"><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>
|
||||
<span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
|
||||
Nutze dies bei "Duplicate Identity" Fehlern.
|
||||
</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;">
|
||||
|
||||
+47
-45
@@ -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="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
|
||||
<link rel="stylesheet" href="../style.23314305.min.css">
|
||||
<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-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-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">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>
|
||||
<span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
|
||||
Estado de conexión
|
||||
</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;">
|
||||
|
||||
+47
-45
@@ -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="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
|
||||
<link rel="stylesheet" href="../style.23314305.min.css">
|
||||
<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-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-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">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>
|
||||
<span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
|
||||
État de la connexion
|
||||
</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;">
|
||||
|
||||
@@ -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="stylesheet" href="style.adcf0bc0.min.css">
|
||||
<link rel="preload" href="style.23314305.min.css" as="style">
|
||||
<link rel="stylesheet" href="style.23314305.min.css">
|
||||
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
|
||||
<meta name="robots" content="noindex">
|
||||
|
||||
|
||||
+47
-45
@@ -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="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
|
||||
<link rel="stylesheet" href="style.23314305.min.css">
|
||||
<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-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-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"><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>
|
||||
<span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
|
||||
Use this if you see "Duplicate Identity" errors.
|
||||
</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;">
|
||||
|
||||
@@ -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="stylesheet" href="style.adcf0bc0.min.css">
|
||||
<link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
|
||||
<link rel="preload" href="style.23314305.min.css" as="style">
|
||||
<link rel="stylesheet" href="style.23314305.min.css">
|
||||
<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>
|
||||
|
||||
@@ -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="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
|
||||
<link rel="stylesheet" href="../style.23314305.min.css">
|
||||
<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-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-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">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>
|
||||
<span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
|
||||
Status da conexão
|
||||
</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;">
|
||||
|
||||
+47
-45
@@ -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="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
|
||||
<link rel="stylesheet" href="../style.23314305.min.css">
|
||||
<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-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-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">Пауза</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;">
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user