mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-08 10:23:19 +00:00
Timo
484 lines
31 KiB
HTML
484 lines
31 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">
|
|
<span class="mock-room-name">brave-eagle-80</span>
|
|
<span class="mock-server-badge">Official Server</span>
|
|
</div>
|
|
<div class="mock-card">
|
|
<div class="mock-label">Invite Link</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')">Copy</button>
|
|
</div>
|
|
</div>
|
|
<div class="mock-card" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
|
|
<div class="mock-label">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">YOU</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 • 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">Peer</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 • Playing</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="mock-btn" style="background:#ef4444; width:100%; margin-top:auto;">Leave Room</button>
|
|
</div>
|
|
|
|
<!-- SYNC TAB -->
|
|
<div id="mock-sync" class="mock-screen">
|
|
<div class="mock-target-box">
|
|
⭐ MATCH: Germany's Next Flopmodel - S21E12
|
|
</div>
|
|
<div class="mock-card">
|
|
<div class="mock-label">Remote Control</div>
|
|
<div class="mock-ctrl-buttons">
|
|
<button class="mock-btn mock-btn-play">▶ Play</button>
|
|
<button class="mock-btn mock-btn-pause">⏸ Pause</button>
|
|
<button class="mock-btn mock-btn-force">⚡ Force Sync Everyone</button>
|
|
</div>
|
|
</div>
|
|
<div class="mock-card">
|
|
<div class="mock-label">Last Activity Status</div>
|
|
<div class="mock-status-display">
|
|
<span style="font-weight: 700;">PAUSE</span>
|
|
<span class="mock-status-pill">● In Sync</span>
|
|
</div>
|
|
<div class="mock-log-item">
|
|
Pause triggered by CoolUsername
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SETTINGS TAB -->
|
|
<div id="mock-settings" class="mock-screen">
|
|
<div class="mock-card">
|
|
<div class="mock-label">Your Username</div>
|
|
<input type="text" class="mock-input" value="CoolUsername" readonly>
|
|
</div>
|
|
<div class="mock-card" style="flex: 1;">
|
|
<div class="mock-label">Preferences</div>
|
|
<div class="mock-settings-row">
|
|
<input type="checkbox" id="chk-noise" checked disabled>
|
|
<div>
|
|
<label for="chk-noise">Filter Noise Tabs</label>
|
|
<p>Hide common non-video websites from the target selector.</p>
|
|
</div>
|
|
</div>
|
|
<div class="mock-settings-row">
|
|
<input type="checkbox" id="chk-binge" checked disabled>
|
|
<div>
|
|
<label for="chk-binge">Auto-Sync Next Episode</label>
|
|
<p>Automatically sync transitions between series episodes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="mock-btn" style="background:#4b5563; width:100%;">Regenerate Peer ID</button>
|
|
</div>
|
|
|
|
<!-- DEV TAB -->
|
|
<div id="mock-dev" class="mock-screen">
|
|
<div class="mock-card">
|
|
<div class="mock-label">Diagnostics</div>
|
|
<div class="mock-diagnostic-grid">
|
|
<div class="mock-diag-box">
|
|
<div class="mock-label" style="margin-bottom:0.1rem; font-size:0.55rem;">Ready State</div>
|
|
<span class="diag-val">HAVE_ENOUGH_DATA</span>
|
|
</div>
|
|
<div class="mock-diag-box">
|
|
<div class="mock-label" style="margin-bottom:0.1rem; font-size:0.55rem;">Seek Delta</div>
|
|
<span class="diag-val">0.05s</span>
|
|
</div>
|
|
<div class="mock-diag-box">
|
|
<div class="mock-label" style="margin-bottom:0.1rem; font-size:0.55rem;">Buffered</div>
|
|
<span class="diag-val">300.2s</span>
|
|
</div>
|
|
<div class="mock-diag-box">
|
|
<div class="mock-label" style="margin-bottom:0.1rem; font-size:0.55rem;">Engine State</div>
|
|
<span class="diag-val" style="color:#22c55e;">SYNCED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mock-card" style="flex: 1; overflow: hidden;">
|
|
<div class="mock-label">Event Stream</div>
|
|
<div style="font-family:monospace; font-size:0.65rem; color:#10b981; line-height:1.4;">
|
|
<div>[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>
|
|
</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">version:</span> <span class="t-str">"3.8"</span>
|
|
|
|
<span class="t-key">services:</span>
|
|
<span class="t-key">koalasync:</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-relay</span>
|
|
<span class="t-key">ports:</span>
|
|
<span class="t-key">-</span> <span class="t-str">"3000:3000"</span>
|
|
<span class="t-key">environment:</span>
|
|
<span class="t-key">-</span> <span class="t-str">NODE_ENV=production</span>
|
|
<span class="t-key">-</span> <span class="t-str">PORT=3000</span>
|
|
<span class="t-key">restart:</span> <span class="t-str">always</span>
|
|
<span class="t-key">logging:</span>
|
|
<span class="t-key">driver:</span> <span class="t-str">"json-file"</span>
|
|
<span class="t-key">options:</span>
|
|
<span class="t-key">max-size:</span> <span class="t-str">"10m"</span></code></pre>
|
|
</div>
|
|
|
|
<div id="pane-caddy" class="terminal-pane">
|
|
<pre><code><span class="t-comment"># Reverse proxy for your secure WebSocket relay server</span>
|
|
<span class="t-key">sync.yourdomain.com</span> {
|
|
<span class="t-key">reverse_proxy</span> <span class="t-val">localhost:3000</span>
|
|
|
|
<span class="t-key">header</span> {
|
|
<span class="t-comment"># Security policies</span>
|
|
<span class="t-key">Permissions-Policy</span> <span class="t-str">"interest-cohort=()"</span>
|
|
<span class="t-key">Strict-Transport-Security</span> <span class="t-str">"max-age=31536000; includeSubDomains; preload"</span>
|
|
<span class="t-key">X-Content-Type-Options</span> <span class="t-str">"nosniff"</span>
|
|
<span class="t-key">X-Frame-Options</span> <span class="t-str">"DENY"</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>
|