mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
Koala
511 lines
38 KiB
HTML
511 lines
38 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 | Sync Netflix, Emby, Jellyfin & Any Video with Friends – Browser Extension</title>
|
||
<meta name="description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync with friends. KoalaSync is a privacy-first, open-source browser extension for Chrome and Firefox. Works on almost any site with a video element.">
|
||
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="icon" type="image/png" href="assets/logo.png">
|
||
<link rel="canonical" href="https://sync.koalastuff.net/">
|
||
<meta name="robots" content="index, follow">
|
||
<meta property="og:title" content="KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends">
|
||
<meta property="og:description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync. Privacy-first, open-source browser extension for Chrome & Firefox.">
|
||
<meta property="og:image" content="https://sync.koalastuff.net/assets/logo.png">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://sync.koalastuff.net/">
|
||
|
||
<script src="lang-init.js"></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" 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" style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
|
||
<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">Your remote movie night without lags. No registration, no data collection. Just share a link and watch together.</span>
|
||
<span lang="de">Dein Kino-Abend auf Distanz. Keine Lags, keine Anmeldung. Einfach Link teilen und zusammen schauen.</span>
|
||
</h2>
|
||
<div class="cta-group" data-reveal>
|
||
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" 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/releases" target="_blank" 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 Releases
|
||
</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;"><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">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>🎬 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">⚡ Sync All Viewers</span><span lang="de">⚡ Alle synchronisieren</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">Show Video Tabs Only</span><span lang="de">Nur Video-Tabs anzeigen</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 reliable sync, privacy-first design, and easy setup.</span>
|
||
<span lang="de">Entwickelt für zuverlässigen Sync, Datenschutz und einfache Einrichtung.</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 two-phase sync protocol coordinates playback in real time across all participants.</p>
|
||
<p lang="de">Einer pausiert, alle pausieren. Einer spult, alle folgen. Unser Zwei-Phasen-Synchronisationsprotokoll koordiniert die Wiedergabe aller Teilnehmer in Echtzeit.</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 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, no bullshit. Just share a link and watch. The server runs entirely in RAM and purges your room when you leave.</p>
|
||
<p lang="de">Kein Login. Keine Daten. Einfach Link teilen und schauen. Der Server läuft flüchtig im RAM und löscht deinen Raum komplett nach dem Verlassen.</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, Jellyfin, Emby, and any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.</p>
|
||
<p lang="de">Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.</p>
|
||
</div>
|
||
<div class="feature-card" data-reveal>
|
||
<div class="feature-icon">🐳</div>
|
||
<h3>
|
||
<span lang="en">Self-Hostable & Docker-Ready</span>
|
||
<span lang="de">Self-Hostable & Docker-Ready</span>
|
||
</h3>
|
||
<p lang="en">Our official servers are free and fast, but you <strong>can</strong> take full ownership if you want to. Launch your own private relay server in seconds via Docker.</p>
|
||
<p lang="de">Unsere Server sind kostenlos und schnell, aber du <strong>kannst</strong> auch die volle Kontrolle übernehmen, wenn du willst. Starte dein eigenes privates Relay in Sekunden via Docker.</p>
|
||
</div>
|
||
<div class="feature-card" data-reveal>
|
||
<div class="feature-icon">🔗</div>
|
||
<h3>
|
||
<span lang="en">Instant Invites / 1-Click Join</span>
|
||
<span lang="de">Direkte Einladungen & 1-Klick Beitritt</span>
|
||
</h3>
|
||
<p lang="en">No IP addresses or passwords to exchange. Share a generated invite link with your friends to let them join your room automatically with a single click.</p>
|
||
<p lang="de">Keine lästigen IPs oder Passwörter austauschen. Teile einfach einen Einladungslink mit deinen Freunden, um sie mit einem Klick in den Raum zu holen.</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"><img src="assets/logo.png" alt="KoalaSync" style="width: 12px; height: 12px; display: block; object-fit: contain;"></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 synchronized 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 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">For Self-Hosters</span><span lang="de">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 full data sovereignty. Deploy your own private relay server in minutes.</span>
|
||
<span lang="de">Behalte die volle Datenhoheit. Richte deinen eigenen privaten Relay-Server in wenigen Minuten 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 style="margin-top: 1rem; font-size: 0.75rem; text-align: right; padding-right: 0.5rem;">
|
||
<a href="https://github.com/Shik3i/KoalaSync/pkgs/container/koalasync" target="_blank" style="color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: opacity 0.2s; opacity: 0.85;">
|
||
📦 <span lang="en">View all image tags on GitHub Packages</span><span lang="de">Alle Image-Tags auf GitHub Packages ansehen</span> →
|
||
</a>
|
||
</div>
|
||
</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">Start watching together with friends.</span><span lang="de">Schau gemeinsam mit Freunden.</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>
|