mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
Timo
508 lines
37 KiB
HTML
508 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KoalaSync | Real-time Video Synchronization for Friends</title>
|
|
<meta name="description" content="Watch YouTube, Twitch, and HTML5 videos perfectly synchronized with friends. KoalaSync is a privacy-first, open-source browser extension for Chrome and Firefox.">
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="icon" type="image/png" href="assets/logo.png">
|
|
<meta property="og:title" content="KoalaSync | Sync your videos">
|
|
<meta property="og:description" content="Watch together, stay in sync. Privacy-first video synchronization.">
|
|
<meta property="og:image" content="https://sync.koalastuff.net/assets/logo.png">
|
|
<meta property="og:type" content="website">
|
|
|
|
<script>
|
|
(function() {
|
|
var savedLang = localStorage.getItem('koala_lang');
|
|
var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
|
|
var activeLang = savedLang || browserLang;
|
|
document.documentElement.classList.add('lang-' + activeLang);
|
|
document.documentElement.lang = activeLang;
|
|
var titles = { en: 'KoalaSync | Real-time Video Synchronization for Friends', de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' };
|
|
document.title = titles[activeLang] || titles.en;
|
|
})();
|
|
|
|
function toggleLanguage(e) {
|
|
if(e) e.preventDefault();
|
|
var html = document.documentElement;
|
|
var currentIsEnglish = html.classList.contains('lang-en');
|
|
var newLang = currentIsEnglish ? 'de' : 'en';
|
|
html.classList.remove('lang-en', 'lang-de');
|
|
html.classList.add('lang-' + newLang);
|
|
html.lang = newLang;
|
|
localStorage.setItem('koala_lang', newLang);
|
|
var titles = { en: 'KoalaSync | Real-time Video Synchronization for Friends', de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' };
|
|
document.title = titles[newLang] || titles.en;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg-blobs">
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
<div class="blob blob-3"></div>
|
|
</div>
|
|
|
|
<nav>
|
|
<div class="container nav-content">
|
|
<div class="logo-area">
|
|
<img src="assets/logo.png" alt="KoalaSync Logo">
|
|
<span>KoalaSync</span>
|
|
</div>
|
|
<button class="hamburger" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">☰</button>
|
|
<div class="nav-links">
|
|
<a href="#features"><span lang="en">Features</span><span lang="de">Funktionen</span></a>
|
|
<a href="#how-it-works"><span lang="en">How it works</span><span lang="de">So funktioniert's</span></a>
|
|
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="display: inline-flex; align-items: center; gap: 6px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
GitHub
|
|
</a>
|
|
<a class="lang-toggle" onclick="toggleLanguage(event)" style="display: inline-flex; align-items: center; gap: 6px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px; display: block;"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
|
|
EN/DE
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero">
|
|
<div class="container hero-grid">
|
|
<div class="hero-text">
|
|
<div class="version-badge" data-reveal><span lang="en" class="version-text-en">v1.5.3 OUT NOW</span><span lang="de" class="version-text-de">v1.5.3 JETZT VERFÜGBAR</span></div>
|
|
<h1 data-reveal>
|
|
<span lang="en">Watch Together.<br>Sync Perfectly.</span>
|
|
<span lang="de">Gemeinsam schauen.<br>Perfekt synchron.</span>
|
|
</h1>
|
|
<h2 class="hero-subtitle" data-reveal>
|
|
<span lang="en">The ultimate free watch party extension for YouTube, Twitch, and local MP4s. Built for extreme precision and data sovereignty.</span>
|
|
<span lang="de">Die ultimative, kostenlose Watch-Party-Erweiterung für YouTube, Twitch und lokale MP4s. Entwickelt für extreme Präzision und Datenhoheit.</span>
|
|
</h2>
|
|
<div class="cta-group" data-reveal>
|
|
<a href="#" class="btn btn-primary">
|
|
<img src="assets/chrome.svg" width="20">
|
|
<span lang="en">Add to Chrome</span><span lang="de">Zu Chrome hinzufügen</span>
|
|
</a>
|
|
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
|
|
🦊
|
|
<span lang="en">Add to Firefox</span><span lang="de">Zu Firefox hinzufügen</span>
|
|
</a>
|
|
<a href="https://github.com/Shik3i/KoalaSync" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
GitHub Repo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interactive CSS Extension Mockup -->
|
|
<div class="hero-mockup-wrapper" data-reveal>
|
|
<div class="extension-mockup">
|
|
<div class="mock-header">
|
|
<img src="assets/logo.png" alt="KoalaSync">
|
|
<span>KOALASYNC</span>
|
|
</div>
|
|
<div class="mock-tabs">
|
|
<button class="mock-tab active" data-target="mock-room">Room</button>
|
|
<button class="mock-tab" data-target="mock-sync">Sync</button>
|
|
<button class="mock-tab" data-target="mock-settings">Settings</button>
|
|
<button class="mock-tab" data-target="mock-dev">Dev</button>
|
|
</div>
|
|
<div class="mock-body">
|
|
<!-- ROOM TAB -->
|
|
<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;">
|
|
<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 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>
|
|
</div>
|
|
<div class="mock-card">
|
|
<div class="mock-label"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
|
|
<div class="mock-invite-box">
|
|
<input type="text" class="mock-input" value="https://sync.koalastuff.net/join.html#join:brave-eagle-80:pass" readonly>
|
|
<button class="mock-btn" style="padding: 0.35rem 0.5rem;" onclick="navigator.clipboard.writeText('https://sync.koalastuff.net/join.html#join:brave-eagle-80:pass')"><span lang="en">Copy</span><span lang="de">Kopieren</span></button>
|
|
</div>
|
|
</div>
|
|
<div class="mock-card" style="margin-bottom: 12px;">
|
|
<div class="mock-label"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></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>
|
|
</div>
|
|
<div class="mock-peer-tab">🎬 Germany's Next Flopmodel - S21E12</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>
|
|
<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>
|
|
</div>
|
|
<div class="mock-peer-tab">🎬 Germany's Next Flopmodel - S21E12</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>
|
|
</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>
|
|
</div>
|
|
|
|
<!-- SYNC TAB -->
|
|
<div id="mock-sync" class="mock-screen">
|
|
<div class="mock-form-group" style="margin-bottom: 12px;">
|
|
<label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
|
|
<span lang="en">Target Tab (Video Source)</span><span lang="de">Ziel-Tab (Video-Quelle)</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>🎬 Germany's Next Flopmodel - S21E12</option>
|
|
</select>
|
|
</div>
|
|
|
|
<label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
|
|
<span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
|
|
</label>
|
|
<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;"><span lang="en">▶ Play</span><span lang="de">▶ 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;"><span lang="en">⏸ Pause</span><span lang="de">⏸ Pause</span></button>
|
|
</div>
|
|
<button class="mock-btn mock-btn-force" style="background: linear-gradient(135deg, #6366f1, #a855f7); width: 100%; padding: 10px; color: white; border: none; font-weight: 700; border-radius: 8px; margin-bottom: 15px; cursor: pointer;">
|
|
<span lang="en">⚡ Force Sync Everyone</span><span lang="de">⚡ Synchronisation erzwingen</span>
|
|
</button>
|
|
|
|
<label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
|
|
<span lang="en">Last Activity Status</span><span lang="de">Letzte Aktivität</span>
|
|
</label>
|
|
<div class="mock-card" style="margin-bottom: 15px; min-height: 70px; background: var(--card); border: 1px solid #334155; padding: 10px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; gap: 4px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<span style="font-weight: 700; color: #ef4444; font-size: 0.8rem;">PAUSE</span>
|
|
<span style="font-size: 0.65rem; color: #22c55e; font-weight: 700;">● In Sync</span>
|
|
</div>
|
|
<div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 2px;">
|
|
<span lang="en">Pause triggered by CoolUsername</span><span lang="de">Pause ausgelöst durch CoolUsername</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SETTINGS TAB -->
|
|
<div id="mock-settings" class="mock-screen">
|
|
<div class="mock-form-group" style="margin-bottom: 12px;">
|
|
<label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
|
|
<span lang="en">Your Username</span><span lang="de">Dein Benutzername</span>
|
|
</label>
|
|
<input type="text" class="mock-input" value="CoolUsername" readonly style="width:100%; box-sizing:border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px;">
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 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: pointer;" for="chk-noise">
|
|
<span lang="en">Filter Noise Tabs</span><span lang="de">Noise-Tabs filtern</span>
|
|
</label>
|
|
<input type="checkbox" id="chk-noise" checked disabled style="width: auto; cursor: not-allowed;">
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 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: pointer;" for="chk-binge">
|
|
<span lang="en">Auto-Sync Next Episode</span><span lang="de">Nächste Folge auto-syncen</span>
|
|
</label>
|
|
<input type="checkbox" id="chk-binge" checked disabled style="width: auto; cursor: not-allowed;">
|
|
</div>
|
|
|
|
<div style="font-size: 0.65rem; color: var(--text-muted); padding: 4px; line-height: 1.3;">
|
|
<p style="margin: 2px 0;">• <span lang="en">Username helps others identify you.</span><span lang="de">Benutzername hilft anderen, dich zu erkennen.</span></p>
|
|
<p style="margin: 2px 0;">• <span lang="en">Noise filtering hides common non-video sites.</span><span lang="de">Noise-Filterung blendet allgemeine Seiten aus.</span></p>
|
|
</div>
|
|
|
|
<div style="margin-top: auto; padding-top: 8px; border-top: 1px solid #334155;">
|
|
<label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
|
|
<span lang="en">Troubleshooting</span><span lang="de">Fehlerbehebung</span>
|
|
</label>
|
|
<button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 8px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer;">
|
|
<span lang="en">Regenerate Peer ID</span><span lang="de">Peer ID regenerieren</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DEV TAB -->
|
|
<div id="mock-dev" class="mock-screen">
|
|
<label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
|
|
<span lang="en">Connection Status</span><span lang="de">Verbindungsstatus</span>
|
|
</label>
|
|
<div style="display:flex; align-items:center; gap: 10px; background: var(--card); border: 1px solid #334155; padding: 10px; border-radius: 8px; 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;">
|
|
<span lang="en">Copy Logs</span><span lang="de">Logs kopieren</span>
|
|
</button>
|
|
</div>
|
|
|
|
<label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
|
|
<span lang="en">Video Debug Info</span><span lang="de">Video-Debug-Info</span>
|
|
</label>
|
|
<div style="background: var(--card); border: 1px solid #334155; padding: 10px; border-radius: 8px; font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
|
|
<div>readyState: HAVE_ENOUGH_DATA</div>
|
|
<div>seekDelta: 0.05s</div>
|
|
<div>buffered: 300.2s</div>
|
|
<div>engineState: <span style="color:#22c55e; font-weight:700;">SYNCED</span></div>
|
|
</div>
|
|
|
|
<label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
|
|
<span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
|
|
</label>
|
|
<div style="max-height: 75px; overflow-y: auto; font-size: 0.6rem; font-family: monospace; background: #000; padding: 8px; border-radius: 8px; color: #ccc; line-height: 1.4;">
|
|
<div style="color:#22c55e;">[18:37:32] EVENT: PLAY -> ACK</div>
|
|
<div>[18:37:32] FORCE_SYNC -> 0.05s diff</div>
|
|
<div>[18:37:38] EVENT: PAUSE -> BROADCAST</div>
|
|
<div style="color:var(--text-muted);">[18:37:42] content_heartbeat: active</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="features">
|
|
<div class="container">
|
|
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
|
|
<span lang="en">Why KoalaSync?</span><span lang="de">Warum KoalaSync?</span>
|
|
</h2>
|
|
<p style="text-align: center; color: var(--text-muted); margin-bottom: 4rem;">
|
|
<span lang="en">Built for frame-perfect performance, absolute privacy, and total simplicity.</span>
|
|
<span lang="de">Entwickelt für bildgenaue Leistung, absolute Privatsphäre und totale Einfachheit.</span>
|
|
</p>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card" data-reveal>
|
|
<div class="feature-icon">⚡</div>
|
|
<h3>
|
|
<span lang="en">Full Control / Instant Sync</span>
|
|
<span lang="de">Volle Kontrolle & Echtzeit</span>
|
|
</h3>
|
|
<p lang="en">One pauses, everyone pauses. One seeks, everyone follows. Our custom two-phase sync protocol coordinates playback with sub-millisecond precision across all participants.</p>
|
|
<p lang="de">Einer pausiert, alle pausieren. Einer spult, alle folgen. Unser Zwei-Phasen-Synchronisationsprotokoll koordiniert die Wiedergabe in Echtzeit mit Sub-Millisekunden-Präzision.</p>
|
|
</div>
|
|
<div class="feature-card" data-reveal>
|
|
<div class="feature-icon">🎬</div>
|
|
<h3>
|
|
<span lang="en">Endless Binge-Watching</span>
|
|
<span lang="de">Grenzenloses Bingen</span>
|
|
</h3>
|
|
<p lang="en">Autoplay perfectly in sync. KoalaSync automatically detects episode transitions and holds playback until all peers have successfully loaded the next video.</p>
|
|
<p lang="de">Nächste Episode startet für jeden zeitgleich. KoalaSync erkennt den Episodenwechsel und pausiert, bis jeder Teilnehmer das neue Video fertig geladen hat.</p>
|
|
</div>
|
|
<div class="feature-card" data-reveal>
|
|
<div class="feature-icon">🛡️</div>
|
|
<h3>
|
|
<span lang="en">Zero Accounts / Pure Privacy</span>
|
|
<span lang="de">Keine Accounts / Datenschutz</span>
|
|
</h3>
|
|
<p lang="en">No registration, no tracking, and no database persistence. The server runs entirely in RAM, collects no telemetry or logs, and completely forgets your room when you leave.</p>
|
|
<p lang="de">Keine Registrierung, kein Tracking und keine Datenspeicherung. Der Server läuft flüchtig im RAM, sammelt keine Logs und vergisst deinen Raum sofort nach dem Verlassen.</p>
|
|
</div>
|
|
<div class="feature-card" data-reveal>
|
|
<div class="feature-icon">🌐</div>
|
|
<h3>
|
|
<span lang="en">Universal HTML5 Support</span>
|
|
<span lang="de">Universeller HTML5-Support</span>
|
|
</h3>
|
|
<p lang="en">Works on YouTube, Twitch, Netflix, Disney+, Jellyfin, Emby, and any standard webpage containing a HTML5 video element. Perfect for custom self-hosted setups.</p>
|
|
<p lang="de">Unterstützt YouTube, Twitch, Netflix, Disney+, Jellyfin, Emby und jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="how-it-works" style="background: rgba(255,255,255,0.02)">
|
|
<div class="container">
|
|
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 4rem;">
|
|
<span lang="en">Getting Started</span><span lang="de">Loslegen</span>
|
|
</h2>
|
|
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-text" data-reveal>
|
|
<div class="step-num">01</div>
|
|
<h3><span lang="en">Install Extension</span><span lang="de">Erweiterung installieren</span></h3>
|
|
<p lang="en">Add KoalaSync to your browser from the Chrome Web Store, Firefox Add-ons, or download the latest developer ZIP from GitHub.</p>
|
|
<p lang="de">Füge KoalaSync aus dem Chrome Web Store, den Firefox Add-ons oder über die Entwickler-ZIP von GitHub zu deinem Browser hinzu.</p>
|
|
</div>
|
|
<!-- Custom Step 1 Illustration -->
|
|
<div class="step-illustration-1" data-reveal>
|
|
<div class="illus-browser-bar">
|
|
<div class="illus-browser-header">
|
|
<div class="illus-dots">
|
|
<span class="illus-dot"></span>
|
|
<span class="illus-dot"></span>
|
|
<span class="illus-dot"></span>
|
|
</div>
|
|
<div class="illus-address-bar"></div>
|
|
<div class="illus-extension-icon">🐨</div>
|
|
</div>
|
|
<div class="illus-browser-body">
|
|
<div class="illus-line-placeholder" style="width: 80%;"></div>
|
|
<div class="illus-line-placeholder" style="width: 50%;"></div>
|
|
<div class="illus-line-placeholder" style="width: 90%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-text" data-reveal>
|
|
<div class="step-num">02</div>
|
|
<h3><span lang="en">Create a Room</span><span lang="de">Raum erstellen</span></h3>
|
|
<p lang="en">Open the extension, enter a Room ID and Password, and hit Join. Your secure synchronization space is ready.</p>
|
|
<p lang="de">Öffnen Sie die Erweiterung, geben Sie eine Raum-ID und ein Passwort ein und klicken Sie auf Beitreten. Ihr sicherer Synchronisationsraum ist bereit.</p>
|
|
</div>
|
|
<!-- Custom Step 2 Illustration -->
|
|
<div class="step-illustration-2" data-reveal>
|
|
<div class="illus-form-box">
|
|
<div class="illus-form-field">
|
|
<div class="illus-line-placeholder" style="width: 30%; height: 6px;"></div>
|
|
<div class="illus-form-input">
|
|
<div class="illus-typing-text">brave-eagle-80</div>
|
|
</div>
|
|
</div>
|
|
<div class="illus-form-btn">
|
|
<span lang="en">CREATE ROOM</span><span lang="de">RAUM ERSTELLEN</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-text" data-reveal>
|
|
<div class="step-num">03</div>
|
|
<h3><span lang="en">Share & Sync</span><span lang="de">Teilen & Synchronisieren</span></h3>
|
|
<p lang="en">Send the invite link to your friends. Once they join, select your video tab and enjoy perfectly synced playback.</p>
|
|
<p lang="de">Senden Sie den Einladungslink an Ihre Freunde. Sobald sie beitreten, wählen Sie Ihren Video-Tab aus und genießen Sie die perfekt synchronisierte Wiedergabe.</p>
|
|
</div>
|
|
<!-- Custom Step 3 Illustration -->
|
|
<div class="step-illustration-3" data-reveal>
|
|
<div class="illus-players-container">
|
|
<div class="illus-mini-player">
|
|
<div class="illus-video-screen">
|
|
<div class="illus-play-icon">▶</div>
|
|
</div>
|
|
<div class="illus-player-timeline">
|
|
<div class="illus-timeline-bar">
|
|
<div class="illus-timeline-progress"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="illus-sync-connection">
|
|
<div class="illus-sync-line">
|
|
<div class="illus-sync-pulse"></div>
|
|
</div>
|
|
<span class="illus-sync-label">IN SYNC</span>
|
|
</div>
|
|
<div class="illus-mini-player">
|
|
<div class="illus-video-screen">
|
|
<div class="illus-play-icon">▶</div>
|
|
</div>
|
|
<div class="illus-player-timeline">
|
|
<div class="illus-timeline-bar">
|
|
<div class="illus-timeline-progress"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Self Hosters Paradise Section -->
|
|
<section id="self-hosting" style="background: rgba(15, 23, 42, 0.4); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);">
|
|
<div class="container">
|
|
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
|
|
<span lang="en">Self-Hosters Paradise</span><span lang="de">Das Paradies für Self-Hoster</span>
|
|
</h2>
|
|
<p style="text-align: center; color: var(--text-muted); margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
<span lang="en">Maintain absolute data sovereignty. Deploy your own private high-performance relay server in under 60 seconds.</span>
|
|
<span lang="de">Behalte die absolute Datenhoheit. Richte deinen eigenen privaten Hochleistungs-Relay-Server in unter 60 Sekunden ein.</span>
|
|
</p>
|
|
|
|
<div class="terminal-container" data-reveal>
|
|
<div class="terminal-header">
|
|
<div class="terminal-dots">
|
|
<span class="terminal-dot red"></span>
|
|
<span class="terminal-dot yellow"></span>
|
|
<span class="terminal-dot green"></span>
|
|
</div>
|
|
<div class="terminal-tabs">
|
|
<button class="terminal-tab-btn active" data-tab="pane-docker">docker-compose.yml</button>
|
|
<button class="terminal-tab-btn" data-tab="pane-caddy">Caddyfile</button>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-body">
|
|
<button class="terminal-copy-btn">
|
|
📋 <span lang="en">Copy Code</span><span lang="de">Code kopieren</span>
|
|
</button>
|
|
|
|
<div id="pane-docker" class="terminal-pane active">
|
|
<pre><code><span class="t-key">services:</span>
|
|
<span class="t-key">koala-sync:</span>
|
|
<span class="t-key">image:</span> <span class="t-str">ghcr.io/shik3i/koalasync:latest</span>
|
|
<span class="t-key">container_name:</span> <span class="t-str">KoalaSync</span>
|
|
<span class="t-key">restart:</span> <span class="t-str">always</span>
|
|
<span class="t-comment"># Access internally by proxying to container port 3000</span>
|
|
<span class="t-key">environment:</span>
|
|
<span class="t-key">-</span> <span class="t-str">TZ=Europe/Berlin</span>
|
|
<span class="t-key">-</span> <span class="t-str">PORT=3000</span>
|
|
<span class="t-key">-</span> <span class="t-str">MIN_VERSION=1.0.0</span>
|
|
<span class="t-key">-</span> <span class="t-str">MAX_ROOMS=100</span>
|
|
<span class="t-key">-</span> <span class="t-str">MAX_PEERS_PER_ROOM=50</span>
|
|
<span class="t-key">pids_limit:</span> <span class="t-val">2048</span></code></pre>
|
|
</div>
|
|
|
|
<div id="pane-caddy" class="terminal-pane">
|
|
<pre><code><span class="t-key">sync.koalastuff.net</span> {
|
|
<span class="t-comment"># Specify the web root inside the container</span>
|
|
<span class="t-key">root</span> <span class="t-val">*</span> <span class="t-str">/var/www/html</span>
|
|
|
|
<span class="t-comment"># Enable static file server to deliver HTML, CSS, JS</span>
|
|
<span class="t-key">file_server</span>
|
|
}
|
|
|
|
<span class="t-key">syncserver.koalastuff.net</span> {
|
|
<span class="t-key">reverse_proxy</span> <span class="t-val">KoalaSync:3000</span>
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="text-align: center;">
|
|
<div class="container">
|
|
<h2 data-reveal><span lang="en">Ready to sync?</span><span lang="de">Bereit zum Synchronisieren?</span></h2>
|
|
<p data-reveal style="margin-bottom: 2rem; color: var(--text-muted);">
|
|
<span lang="en">Join thousands of users watching together.</span><span lang="de">Schließen Sie sich Tausenden von Nutzern an, die bereits zusammen schauen.</span>
|
|
</p>
|
|
<a href="https://github.com/Shik3i/KoalaSync" class="btn btn-primary" data-reveal>
|
|
<span lang="en">View on GitHub</span><span lang="de">Auf GitHub ansehen</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2026 KoalaSync. Open source under the MIT License.</p>
|
|
<p lang="en" style="font-size: 0.8rem; margin-top: 0.5rem;">No data is stored on our servers. Pure RAM-based relay.</p>
|
|
<p lang="de" style="font-size: 0.8rem; margin-top: 0.5rem;">Keine Daten werden auf unseren Servern gespeichert. Reines RAM-basiertes Relay.</p>
|
|
<div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; gap: 1.5rem;">
|
|
<a href="impressum.html" style="color: var(--text-muted); text-decoration: none;"><span lang="en">Legal Notice</span><span lang="de">Impressum</span></a>
|
|
<a href="datenschutz.html" style="color: var(--text-muted); text-decoration: none;"><span lang="en">Privacy Policy</span><span lang="de">Datenschutz</span></a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|