mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
Koala
d2c380d6fc
Google does not support sameAs for app store links in SoftwareApplication rich results. sameAs is for identity pages only (Wikipedia, Wikidata, GitHub). Store pages are independently indexed by Google and need no schema linking.
1126 lines
86 KiB
HTML
1126 lines
86 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{LANG_CODE}}" class="{{HTML_CLASS}}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{META_TITLE}}</title>
|
|
<meta name="description" content="{{META_DESCRIPTION}}">
|
|
|
|
<link rel="preload" href="{{ASSET_PATH}}style.min.css" as="style">
|
|
<link rel="preload" as="image" href="{{ASSET_PATH}}assets/LookDownKoala.webp" imagesrcset="{{ASSET_PATH}}assets/LookDownKoala-1x.webp 90w, {{ASSET_PATH}}assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
|
|
<link rel="stylesheet" href="{{ASSET_PATH}}style.min.css">
|
|
<link rel="icon" type="image/webp" href="{{ASSET_PATH}}assets/NewLogoIcon_64.webp">
|
|
<link rel="canonical" href="https://sync.koalastuff.net/{{CANONICAL_PATH}}">
|
|
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/">
|
|
<link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/">
|
|
<link rel="alternate" hreflang="fr" href="https://sync.koalastuff.net/fr/">
|
|
<link rel="alternate" hreflang="es" href="https://sync.koalastuff.net/es/">
|
|
<link rel="alternate" hreflang="pt-br" href="https://sync.koalastuff.net/pt-BR/">
|
|
<link rel="alternate" hreflang="ru" href="https://sync.koalastuff.net/ru/">
|
|
<link rel="alternate" hreflang="x-default" href="https://sync.koalastuff.net/">
|
|
<meta name="robots" content="index, follow">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://sync.koalastuff.net/{{CANONICAL_PATH}}">
|
|
<meta property="og:title" content="{{OG_TITLE}}">
|
|
<meta property="og:description" content="{{OG_DESCRIPTION}}">
|
|
<meta property="og:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
|
|
<meta property="og:locale" content="{{OG_LOCALE}}">
|
|
<meta property="og:locale:alternate" content="en_US">
|
|
<meta property="og:locale:alternate" content="de_DE">
|
|
<meta property="og:locale:alternate" content="fr_FR">
|
|
<meta property="og:locale:alternate" content="es_ES">
|
|
<meta property="og:locale:alternate" content="pt_BR">
|
|
<meta property="og:locale:alternate" content="ru_RU">
|
|
|
|
<!-- Twitter / X -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="{{TWITTER_TITLE}}">
|
|
<meta name="twitter:description" content="{{TWITTER_DESCRIPTION}}">
|
|
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
|
|
|
|
<!-- Mobile Browser Theme Styling -->
|
|
<meta name="theme-color" content="#0f172a">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<link rel="manifest" href="{{ASSET_PATH}}site.webmanifest">
|
|
|
|
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
|
|
|
|
<!-- Structured Data (Schema.org) for Rich Snippets -->
|
|
<script type="application/ld+json" id="schema-org">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "KoalaSync",
|
|
"url": "https://sync.koalastuff.net/",
|
|
"logo": "https://sync.koalastuff.net/assets/NewLogoIcon_128.webp",
|
|
"sameAs": [
|
|
"https://github.com/Shik3i/KoalaSync",
|
|
"https://mastodon.social/@koalastuff"
|
|
]
|
|
}
|
|
</script>
|
|
<script type="application/ld+json" id="schema-website">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebSite",
|
|
"name": "KoalaSync",
|
|
"url": "https://sync.koalastuff.net/",
|
|
"inLanguage": ["en", "de", "fr", "es", "pt-BR", "ru"]
|
|
}
|
|
</script>
|
|
<script type="application/ld+json" id="schema-software">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "KoalaSync",
|
|
"operatingSystem": "Windows, macOS, Linux, ChromeOS",
|
|
"applicationCategory": "BrowserApplication",
|
|
"browserRequirements": "Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "EUR"
|
|
},
|
|
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
|
|
"softwareVersion": "1.9.3",
|
|
"license": "https://opensource.org/licenses/MIT",
|
|
"sameAs": "https://github.com/Shik3i/KoalaSync",
|
|
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
|
|
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
|
|
}
|
|
</script>
|
|
<script type="application/ld+json" id="schema-howto">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "HowTo",
|
|
"name": "How to synchronize videos with friends using KoalaSync",
|
|
"description": "Watch any video in perfect sync with friends across YouTube, Netflix, Twitch and more. No sign-up, no tracking.",
|
|
"step": [
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 1,
|
|
"name": "Install the browser extension",
|
|
"text": "Add KoalaSync to your browser from Chrome Web Store or Firefox Add-ons. It works on any website with a video element.",
|
|
"url": "https://sync.koalastuff.net/#how-it-works"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 2,
|
|
"name": "Create a room",
|
|
"text": "Open the extension popup and click Create New Room. The invite link is automatically copied to your clipboard.",
|
|
"url": "https://sync.koalastuff.net/#how-it-works"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 3,
|
|
"name": "Share and sync",
|
|
"text": "Send the invite link to your friends. Pick a video tab and enjoy synchronized playback in real time.",
|
|
"url": "https://sync.koalastuff.net/#how-it-works"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
<script type="application/ld+json" id="schema-faq">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "FAQPage",
|
|
"mainEntity": [
|
|
{
|
|
"@type": "Question",
|
|
"name": "Is KoalaSync really free?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "Yes. KoalaSync is 100% free, open source under the MIT License, and contains no premium tiers or locked features." }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "Does KoalaSync work on Netflix and Disney+?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "Yes. KoalaSync works on any website with a standard HTML5 <video> element, including Netflix, Disney+, YouTube, Twitch, Emby, Jellyfin and Prime Video." }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "Can I self-host KoalaSync?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "Yes. A Docker image is published on GitHub Container Registry. Caddy and Nginx reverse-proxy examples are included in the documentation." }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "Does KoalaSync collect personal data?",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "No. The relay server is RAM-only (volatile), the source code is fully open, and there are no analytics, cookies, or third-party trackers." }
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<a class="skip-link" href="#main-content">Skip to main content</a>
|
|
|
|
<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="{{ASSET_PATH}}assets/NewLogoIcon_80.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_40.webp 40w, {{ASSET_PATH}}assets/NewLogoIcon_80.webp 80w, {{ASSET_PATH}}assets/NewLogoIcon.webp 200w" sizes="40px" alt="KoalaSync Logo" width="40" height="40">
|
|
<span>KoalaSync</span>
|
|
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="12" height="12"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
<span>Installed</span>
|
|
</div>
|
|
</div>
|
|
<button class="hamburger" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="primary-nav">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|
</button>
|
|
<div class="nav-links" id="primary-nav" role="navigation" aria-label="Primary">
|
|
<a href="#features"><span>{{NAV_FEATURES}}</span></a>
|
|
<a href="#how-it-works"><span>{{NAV_HOW_IT_WORKS}}</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" aria-hidden="true" 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>
|
|
<div class="lang-select-container">
|
|
<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" aria-hidden="true" class="globe-icon"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><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"/></svg>
|
|
<select class="lang-dropdown" aria-label="Select Language">
|
|
<option value="en" {{SELECTED_EN}}>English</option>
|
|
<option value="de" {{SELECTED_DE}}>Deutsch</option>
|
|
<option value="fr" {{SELECTED_FR}}>Français</option>
|
|
<option value="es" {{SELECTED_ES}}>Español</option>
|
|
<option value="pt-BR" {{SELECTED_PT-BR}}>Português (Brasil)</option>
|
|
<option value="ru" {{SELECTED_RU}}>Русский</option>
|
|
</select>
|
|
<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" aria-hidden="true" class="chevron-icon"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero" id="main-content">
|
|
<div class="container hero-grid">
|
|
<div class="hero-text">
|
|
<div class="version-badge" data-reveal>
|
|
<span class="version-text-en" lang="en">v1.5.3 OUT NOW</span>
|
|
<span class="version-text-de" lang="de">v1.5.3 JETZT VERFÜGBAR</span>
|
|
</div>
|
|
<h1 data-reveal>{{HERO_TITLE}}</h1>
|
|
<p class="hero-subtitle" data-reveal>{{HERO_SUBTITLE}}</p>
|
|
<div class="hero-mascot-container" data-reveal>
|
|
<img src="{{ASSET_PATH}}assets/LookDownKoala-1x.webp" srcset="{{ASSET_PATH}}assets/LookDownKoala-1x.webp 90w, {{ASSET_PATH}}assets/LookDownKoala.webp 205w" sizes="90px" alt="{{HERO_MASCOT_ALT}}" class="hero-lookdown-mascot" width="90" height="132" loading="eager" fetchpriority="high" decoding="async">
|
|
</div>
|
|
<div class="cta-group" data-reveal>
|
|
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
|
|
<img src="{{ASSET_PATH}}assets/chrome.svg" alt="Chrome" width="20" height="20">
|
|
<span>{{ADD_TO_CHROME}}</span>
|
|
</a>
|
|
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
|
|
<img src="{{ASSET_PATH}}assets/firefox.svg" alt="Firefox" width="20" height="20">
|
|
<span>{{ADD_TO_FIREFOX}}</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" aria-hidden="true" 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-row">
|
|
<div class="mock-header-title"><img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo">KoalaSync</div>
|
|
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
|
|
<svg viewBox="0 0 16 16" fill="currentColor" style="width: 12px; height: 12px; display: block;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
|
<span>v1.9.3</span>
|
|
</a>
|
|
</div>
|
|
<div class="mock-tabs">
|
|
<button class="mock-tab active" data-target="mock-room" title="Room settings and connection">Room</button>
|
|
<button class="mock-tab" data-target="mock-sync" title="Video sync controls and remote actions">Sync</button>
|
|
<button class="mock-tab" data-target="mock-settings" title="Extension preferences">Settings</button>
|
|
<button class="mock-tab" data-target="mock-dev" title="Advanced Diagnostics & Logs">Status</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;" 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 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" 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-invite-box">
|
|
<input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;">
|
|
<button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
|
|
</div>
|
|
</div>
|
|
<div class="mock-card" style="margin-bottom: 12px;">
|
|
<div class="mock-label" title="Other users currently connected to this room"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
|
|
<div class="mock-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"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
|
|
</div>
|
|
<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"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
|
|
</div>
|
|
</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 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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</option>
|
|
</select>
|
|
</div>
|
|
|
|
<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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
|
|
<span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span>
|
|
</button>
|
|
</div>
|
|
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
|
|
<button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg> Play</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg> Start</span></button>
|
|
<button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><span lang="en"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Pause</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Pause</span></button>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
|
|
<button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
|
|
<span lang="en"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> SYNC</span><span lang="de"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> SYNC</span>
|
|
</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>
|
|
</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;">
|
|
<span style="font-weight: 700; color: #ef4444; font-size: 11px;">PAUSE</span>
|
|
<span style="font-size: 9px; color: var(--text-muted);">CoolUsername @ 12:44:32</span>
|
|
</div>
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; margin-top: 4px;">
|
|
<div style="display: flex; flex-direction: column; align-items: center;">
|
|
<div style="width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: white; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; margin-bottom: 1px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="10" height="10" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></div>
|
|
<span style="font-size: 7px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36px;">🐨 KoalaPC</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Episode Auto-Sync Lobby Status Mockup -->
|
|
<div class="mock-card" style="margin-bottom: 15px; border-left: 4px solid #fbbf24; background: var(--card); padding: 8px 10px; border-radius: 8px;">
|
|
<div style="display:flex; align-items:center; gap: 6px; margin-bottom: 4px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true" style="display:block; flex-shrink:0;"><path d="M5 22h14"/><path d="M5 2h14"/><path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"/><path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"/></svg>
|
|
<span style="font-weight: 700; color: #fbbf24; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;">Episode Lobby</span>
|
|
</div>
|
|
<div style="font-size: 0.7rem; color: white; margin-bottom: 4px; font-weight: 600;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E2
|
|
</div>
|
|
<div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
|
|
<span lang="en">Waiting for 1 peer (KoalaPC)...</span><span lang="de">Warten auf 1 Partner (KoalaPC)...</span>
|
|
</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>
|
|
</div>
|
|
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
|
|
</div>
|
|
<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"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SETTINGS TAB -->
|
|
<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>
|
|
<span class="mock-slider"></span>
|
|
</label>
|
|
</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="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>
|
|
<span class="mock-slider"></span>
|
|
</label>
|
|
</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="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>
|
|
<span class="mock-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<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">
|
|
<span class="mock-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<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>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
<div>seekDelta: 0.05s</div>
|
|
<div>buffered: 300.2s</div>
|
|
<div>engineState: <span style="color:#22c55e; font-weight:700;">SYNCED</span></div>
|
|
</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>
|
|
</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;">
|
|
<span>CoolUsername: PAUSE</span>
|
|
<span style="opacity: 0.5;">0:55</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; padding-top: 2px;">
|
|
<span>KoalaPC: PLAY</span>
|
|
<span style="opacity: 0.5;">0:00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</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;">
|
|
<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 style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
|
|
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
|
|
<div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;">v1.9.3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="compat-section">
|
|
<div class="container">
|
|
<img src="{{ASSET_PATH}}assets/PlatformJuggler_New-1x.webp" srcset="{{ASSET_PATH}}assets/PlatformJuggler_New-1x.webp 368w, {{ASSET_PATH}}assets/PlatformJuggler_New.webp 643w" sizes="(max-width: 768px) calc(100vw - 2rem), 368px" alt="A cute koala juggling multiple browser tabs showing streaming platforms" class="compat-mascot" width="300" height="233" loading="lazy" fetchpriority="low" data-reveal>
|
|
<p class="compat-heading" data-reveal>
|
|
<span>{{COMPAT_HEADING}}</span>
|
|
</p>
|
|
<div class="compat-row" data-reveal>
|
|
<div class="compat-logo">
|
|
<img src="{{ASSET_PATH}}assets/netflix.svg" alt="Netflix" width="24" height="24">
|
|
<span>Netflix</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="{{ASSET_PATH}}assets/youtube.svg" alt="YouTube" width="24" height="24">
|
|
<span>YouTube</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="{{ASSET_PATH}}assets/twitch.svg" alt="Twitch" width="24" height="24">
|
|
<span>Twitch</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="{{ASSET_PATH}}assets/primevideo.svg" alt="Prime Video" width="24" height="24">
|
|
<span>Prime Video</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="{{ASSET_PATH}}assets/jellyfin.svg" alt="Jellyfin" width="24" height="24">
|
|
<span>Jellyfin</span>
|
|
</div>
|
|
<div class="compat-logo">
|
|
<img src="{{ASSET_PATH}}assets/emby.svg" alt="Emby" width="24" height="24">
|
|
<span>Emby</span>
|
|
</div>
|
|
<div class="compat-logo compat-more">
|
|
<span class="compat-more-icon">+</span>
|
|
<span>{{COMPAT_MORE}}</span>
|
|
<div class="compat-tooltip">
|
|
<span>{{COMPAT_TOOLTIP}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="use-cases" class="use-cases-section">
|
|
<div class="container">
|
|
<h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
|
|
<span>{{USE_CASES_TITLE}}</span>
|
|
</h2>
|
|
<p class="section-subtitle" data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 3.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
<span>{{USE_CASES_SUBTITLE}}</span>
|
|
</p>
|
|
<div class="use-cases-grid">
|
|
<div class="use-case-card" data-reveal>
|
|
<img src="{{ASSET_PATH}}assets/PopcornFriends-1x.webp" srcset="{{ASSET_PATH}}assets/PopcornFriends-1x.webp 272w, {{ASSET_PATH}}assets/PopcornFriends.webp 543w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="{{USE_CASE_1_ALT}}" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low">
|
|
<h3>
|
|
<span>{{USE_CASE_1_TITLE}}</span>
|
|
</h3>
|
|
<p>{{USE_CASE_1_DESC}}</p>
|
|
</div>
|
|
<div class="use-case-card" data-reveal>
|
|
<img src="{{ASSET_PATH}}assets/RemoteProf-1x.webp" srcset="{{ASSET_PATH}}assets/RemoteProf-1x.webp 272w, {{ASSET_PATH}}assets/RemoteProf.webp 507w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="{{USE_CASE_2_ALT}}" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low">
|
|
<h3>
|
|
<span>{{USE_CASE_2_TITLE}}</span>
|
|
</h3>
|
|
<p>{{USE_CASE_2_DESC}}</p>
|
|
</div>
|
|
<div class="use-case-card" data-reveal>
|
|
<img src="{{ASSET_PATH}}assets/KoalaCupple_New-1x.webp" srcset="{{ASSET_PATH}}assets/KoalaCupple_New-1x.webp 272w, {{ASSET_PATH}}assets/KoalaCupple_New.webp 579w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="{{USE_CASE_3_ALT}}" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low">
|
|
<h3>
|
|
<span>{{USE_CASE_3_TITLE}}</span>
|
|
</h3>
|
|
<p>{{USE_CASE_3_DESC}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features">
|
|
<div class="container">
|
|
<img src="{{ASSET_PATH}}assets/KoalaQuestions-1x.webp" srcset="{{ASSET_PATH}}assets/KoalaQuestions-1x.webp 250w, {{ASSET_PATH}}assets/KoalaQuestions.webp 355w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="A cute koala with a question mark above its head wondering why to choose KoalaSync" class="features-questions-mascot" width="250" height="211" loading="lazy" fetchpriority="low" data-reveal>
|
|
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
|
|
<span>{{WHY_TITLE}}</span>
|
|
</h2>
|
|
<p style="text-align: center; color: var(--text-muted); margin-bottom: 4rem;">
|
|
<span>{{WHY_SUBTITLE}}</span>
|
|
</p>
|
|
|
|
<div class="features-grid">
|
|
<!-- Card 1: Full Control / Instant Sync (Bento Large) -->
|
|
<div class="feature-card bento-large" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
</span>
|
|
<span>{{FEATURE_1_TITLE}}</span>
|
|
</h3>
|
|
<p>{{FEATURE_1_DESC}}</p>
|
|
</div>
|
|
|
|
<!-- Card 2: Endless Binge-Watching (Bento Standard) -->
|
|
<div class="feature-card" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>
|
|
</span>
|
|
<span>{{FEATURE_2_TITLE}}</span>
|
|
</h3>
|
|
<p>{{FEATURE_2_DESC}}</p>
|
|
</div>
|
|
|
|
<!-- Card 3: Zero Accounts / Pure Privacy (Bento Standard) -->
|
|
<div class="feature-card" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</span>
|
|
<span>{{FEATURE_3_TITLE}}</span>
|
|
</h3>
|
|
<p>{{FEATURE_3_DESC}}</p>
|
|
<div class="bento-visual-architecture" style="margin-top: 15px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.7rem; font-family: monospace; display: flex; align-items: center; justify-content: space-between; color: var(--accent);">
|
|
<span>STATE: VOLATILE</span>
|
|
<span style="background: rgba(99, 102, 241, 0.15); padding: 2px 6px; border-radius: 4px; font-weight: 700; font-size: 0.6rem;">RAM-ONLY</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Universal HTML5 Support (Bento Large) -->
|
|
<div class="feature-card bento-large" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><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"/></svg>
|
|
</span>
|
|
<span>{{FEATURE_4_TITLE}}</span>
|
|
</h3>
|
|
<p>{{FEATURE_4_DESC}}</p>
|
|
</div>
|
|
|
|
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
|
<div class="feature-card bento-large" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
|
</span>
|
|
<span>{{FEATURE_6_TITLE}}</span>
|
|
</h3>
|
|
<p>{{FEATURE_6_DESC}}</p>
|
|
</div>
|
|
|
|
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
|
<div class="feature-card" data-reveal>
|
|
<h3>
|
|
<span class="feature-icon-svg">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
|
|
</span>
|
|
<span>{{FEATURE_5_TITLE}}</span>
|
|
</h3>
|
|
<p>{{FEATURE_5_DESC}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="comparison" class="comparison-section">
|
|
<div class="container">
|
|
<img src="{{ASSET_PATH}}assets/ProContraKoala-1x.webp" srcset="{{ASSET_PATH}}assets/ProContraKoala-1x.webp 260w, {{ASSET_PATH}}assets/ProContraKoala.webp 423w" sizes="(max-width: 768px) calc(100vw - 2rem), 260px" alt="A cute koala weighing options in both hands to compare KoalaSync vs Teleparty" class="comparison-mascot" width="260" height="184" loading="lazy" fetchpriority="low" data-reveal>
|
|
<h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
|
|
<span>{{COMP_TITLE}}</span>
|
|
</h2>
|
|
<p class="section-subtitle" data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 3.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
<span>{{COMP_SUBTITLE}}</span>
|
|
</p>
|
|
|
|
<div class="comparison-table-wrapper" data-reveal>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th><span>{{COMP_COL_FEATURE}}</span></th>
|
|
<th class="highlight">KoalaSync</th>
|
|
<th>Teleparty</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>{{COMP_FEAT_1_NAME}}</span></strong>
|
|
<span class="feat-desc"><span>{{COMP_FEAT_1_DESC}}</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>{{COMP_FEAT_1_KOALA}}</span></td>
|
|
<td class="cross">
|
|
✘ <span>{{COMP_FEAT_1_TELE}}</span>
|
|
<a href="https://www.teleparty.com/premium" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Premium Pricing"><sup>[1]</sup></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>{{COMP_FEAT_2_NAME}}</span></strong>
|
|
<span class="feat-desc"><span>{{COMP_FEAT_2_DESC}}</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>{{COMP_FEAT_2_KOALA}}</span></td>
|
|
<td class="cross">
|
|
✘ <span>{{COMP_FEAT_2_TELE}}</span>
|
|
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Privacy Policy"><sup>[2]</sup></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>{{COMP_FEAT_3_NAME}}</span></strong>
|
|
<span class="feat-desc"><span>{{COMP_FEAT_3_DESC}}</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>{{COMP_FEAT_3_KOALA}}</span></td>
|
|
<td class="cross">
|
|
✘ <span>{{COMP_FEAT_3_TELE}}</span>
|
|
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Privacy Policy"><sup>[2]</sup></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>{{COMP_FEAT_4_NAME}}</span></strong>
|
|
<span class="feat-desc"><span>{{COMP_FEAT_4_DESC}}</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>{{COMP_FEAT_4_KOALA}}</span></td>
|
|
<td class="cross">
|
|
✘ <span>{{COMP_FEAT_4_TELE}}</span>
|
|
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Privacy Policy"><sup>[2]</sup></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>{{COMP_FEAT_5_NAME}}</span></strong>
|
|
<span class="feat-desc"><span>{{COMP_FEAT_5_DESC}}</span></span>
|
|
</td>
|
|
<td class="check highlight">✔ <span>{{COMP_FEAT_5_KOALA}}</span><a href="#footnote-3" class="source-link" title="Technical Compatibility Details"><sup>[3]</sup></a></td>
|
|
<td class="cross">
|
|
✘ <span>{{COMP_FEAT_5_TELE}}</span>
|
|
<a href="https://www.teleparty.com/premium" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Premium Platforms"><sup>[1]</sup></a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="table-footnotes">
|
|
<p style="opacity: 0.55; font-size: 0.65rem; margin-bottom: 0.4rem; display: block;">
|
|
<span>{{COMP_FOOTNOTE_1}}</span>
|
|
</p>
|
|
<p>
|
|
<sup>[1]</sup>
|
|
<span>{{COMP_FOOTNOTE_2}}</span>
|
|
<a href="https://www.teleparty.com/premium" target="_blank" rel="noopener noreferrer">teleparty.com/premium</a>
|
|
</p>
|
|
<p>
|
|
<sup>[2]</sup>
|
|
<span>{{COMP_FOOTNOTE_3}}</span>
|
|
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer">teleparty.com/privacy</a>
|
|
</p>
|
|
<p id="footnote-3">
|
|
<sup>[3]</sup>
|
|
<span>{{COMP_FOOTNOTE_4}}</span>
|
|
</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>{{STEPS_TITLE}}</span>
|
|
</h2>
|
|
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-text" data-reveal>
|
|
<div class="step-num" aria-hidden="true">01</div>
|
|
<h3><span>{{STEP_1_TITLE}}</span></h3>
|
|
<p>{{STEP_1_DESC}}</p>
|
|
</div>
|
|
<!-- Custom Step 1 Illustration -->
|
|
<div class="step-illustration-1" data-reveal>
|
|
<div class="illus-browser-container">
|
|
<div class="illus-browser-header">
|
|
<div class="illus-browser-dots">
|
|
<span class="illus-browser-dot"></span>
|
|
<span class="illus-browser-dot"></span>
|
|
<span class="illus-browser-dot"></span>
|
|
</div>
|
|
<div class="illus-browser-address-bar">
|
|
<span class="url-protocol">https://</span>sync.koalastuff.net
|
|
</div>
|
|
<div class="illus-browser-toolbar">
|
|
<div class="illus-extension-btn active">
|
|
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Extension" width="14" height="14">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="illus-browser-content">
|
|
<div class="illus-store-card">
|
|
<div class="illus-store-card-header">
|
|
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" class="illus-large-logo" width="30" height="30">
|
|
<div class="illus-store-info">
|
|
<div class="illus-store-title">KoalaSync</div>
|
|
<div class="illus-store-desc">
|
|
<span>{{STEP_1_ILLUS_DESC}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="illus-store-buttons">
|
|
<div class="illus-store-btn chrome">
|
|
<img src="{{ASSET_PATH}}assets/chrome.svg" alt="Chrome Logo" width="12" height="12">
|
|
<span>{{STEP_1_ILLUS_DL_CHROME}}</span>
|
|
</div>
|
|
<div class="illus-store-btn firefox">
|
|
<img src="{{ASSET_PATH}}assets/firefox.svg" alt="Firefox Logo" width="12" height="12">
|
|
<span>{{STEP_1_ILLUS_DL_FIREFOX}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Extension Success Popup -->
|
|
<div class="illus-extension-popup">
|
|
<div class="popup-title">
|
|
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="12" height="12">
|
|
<span>KoalaSync</span>
|
|
</div>
|
|
<div class="popup-status">
|
|
<div class="status-badge-success">
|
|
<span class="status-check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></span>
|
|
<span>{{STEP_1_ILLUS_ACTIVE}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="popup-quick-start">
|
|
<span>{{STEP_1_ILLUS_READY}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-text" data-reveal>
|
|
<div class="step-num" aria-hidden="true">02</div>
|
|
<h3><span>{{STEP_2_TITLE}}</span></h3>
|
|
<p>{{STEP_2_DESC}}</p>
|
|
</div>
|
|
<!-- Custom Step 2 Illustration -->
|
|
<div class="step-illustration-2" data-reveal>
|
|
<div class="illus-popup-card">
|
|
<div class="illus-popup-header">
|
|
<div class="illus-popup-brand">
|
|
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14">
|
|
<span>KoalaSync</span>
|
|
</div>
|
|
<div class="illus-popup-version">v1.9.3</div>
|
|
</div>
|
|
<div class="illus-popup-tabs">
|
|
<div class="illus-popup-tab active">
|
|
<span>{{STEP_2_ILLUS_ROOM}}</span>
|
|
</div>
|
|
<div class="illus-popup-tab">
|
|
<span>{{STEP_2_ILLUS_SYNC}}</span>
|
|
</div>
|
|
<div class="illus-popup-tab">
|
|
<span>{{STEP_2_ILLUS_SETTINGS}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="illus-popup-body">
|
|
<div class="illus-popup-btn action-create-room">
|
|
<span>{{STEP_2_ILLUS_CREATE}}</span>
|
|
<div class="illus-btn-shine"></div>
|
|
</div>
|
|
|
|
<div class="illus-collapsed-details">
|
|
<span class="details-arrow">▶</span>
|
|
<span>{{STEP_2_ILLUS_MANUAL}}</span>
|
|
</div>
|
|
|
|
<div class="illus-floating-success">
|
|
<span class="success-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
|
|
<span>{{STEP_2_ILLUS_COPIED}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-text" data-reveal>
|
|
<div class="step-num" aria-hidden="true">03</div>
|
|
<h3><span>{{STEP_3_TITLE}}</span></h3>
|
|
<p>{{STEP_3_DESC}}</p>
|
|
</div>
|
|
<!-- Custom Step 3 Illustration -->
|
|
<div class="step-illustration-3" data-reveal>
|
|
<div class="illus-sync-theater">
|
|
<!-- Player A (KoalaPC) -->
|
|
<div class="illus-player-card player-a">
|
|
<div class="player-header">
|
|
<span class="player-user">🐨 KoalaPC</span>
|
|
<span class="player-badge active">PLAYING</span>
|
|
</div>
|
|
<div class="player-video-canvas">
|
|
<div class="player-play-pulse">▶</div>
|
|
<div class="player-video-overlay"></div>
|
|
</div>
|
|
<div class="player-controls">
|
|
<span class="control-btn">⏸</span>
|
|
<div class="player-timeline">
|
|
<div class="timeline-fill"></div>
|
|
<div class="timeline-knob"></div>
|
|
</div>
|
|
<span class="control-time">42:15</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Glowing Sync Bridge -->
|
|
<div class="illus-sync-bridge">
|
|
<div class="sync-line">
|
|
<div class="sync-beam"></div>
|
|
</div>
|
|
<div class="sync-status-badge">
|
|
<span>{{STEP_3_ILLUS_IN_SYNC}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Player B (LaptopKoala) -->
|
|
<div class="illus-player-card player-b">
|
|
<div class="player-header">
|
|
<span class="player-user">💻 LaptopKoala</span>
|
|
<span class="player-badge active">PLAYING</span>
|
|
</div>
|
|
<div class="player-video-canvas">
|
|
<div class="player-play-pulse">▶</div>
|
|
<div class="player-video-overlay"></div>
|
|
</div>
|
|
<div class="player-controls">
|
|
<span class="control-btn">⏸</span>
|
|
<div class="player-timeline">
|
|
<div class="timeline-fill"></div>
|
|
<div class="timeline-knob"></div>
|
|
</div>
|
|
<span class="control-time">42:15</span>
|
|
</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>{{SELF_TITLE}}</span>
|
|
</h2>
|
|
<p style="text-align: center; color: var(--text-muted); margin-bottom: 2rem; max-width: 650px; margin-left: auto; margin-right: auto;">
|
|
<span>{{SELF_SUBTITLE}}</span>
|
|
</p>
|
|
|
|
<!-- Mascot Self-Hosting / Deploy Illustration -->
|
|
<div style="display: flex; justify-content: center; margin-bottom: 2.5rem;" data-reveal>
|
|
<img src="{{ASSET_PATH}}assets/KoalaDeploy-1x.webp" srcset="{{ASSET_PATH}}assets/KoalaDeploy-1x.webp 300w, {{ASSET_PATH}}assets/KoalaDeploy.webp 600w" sizes="(max-width: 768px) calc(100vw - 2rem), 300px" alt="{{SELF_MASCOT_ALT}}" class="selfhost-mascot" width="300" height="201" loading="lazy" fetchpriority="low">
|
|
</div>
|
|
|
|
<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-simple">Caddyfile (Simple)</button>
|
|
<button class="terminal-tab-btn" data-tab="pane-caddy-advanced">Caddyfile (Advanced)</button>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-body">
|
|
<button class="terminal-copy-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> <span>{{SELF_COPY_CODE}}</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;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><path d="M16.5 9.4 7.55 4.24"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" y1="22" x2="12" y2="12"/></svg> <span>{{SELF_GITHUB_PACKAGES}}</span> →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pane-caddy-simple" class="terminal-pane">
|
|
<pre><code><span class="t-key">sync.koalastuff.net</span> {
|
|
<span class="t-key">root</span> <span class="t-val">*</span> <span class="t-str">/var/www/koalasync/website/www</span>
|
|
<span class="t-key">encode</span> <span class="t-val">zstd gzip</span>
|
|
|
|
<span class="t-comment"># Clean URLs support (no .html required)</span>
|
|
<span class="t-key">try_files</span> <span class="t-val">{path} {path}.html {path}/</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">localhost:3000</span>
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div id="pane-caddy-advanced" class="terminal-pane">
|
|
<pre><code><span class="t-key">(security_headers)</span> {
|
|
<span class="t-key">header</span> {
|
|
<span class="t-comment"># Enable HTTP Strict Transport Security (HSTS)</span>
|
|
Strict-Transport-Security <span class="t-str">"max-age=31536000; includeSubDomains; preload"</span>
|
|
<span class="t-comment"># Prevent clickjacking attacks (Sameorigin)</span>
|
|
X-Frame-Options <span class="t-str">"SAMEORIGIN"</span>
|
|
<span class="t-comment"># Prevent MIME-sniffing</span>
|
|
X-Content-Type-Options <span class="t-str">"nosniff"</span>
|
|
<span class="t-comment"># Enable browser XSS protection</span>
|
|
X-XSS-Protection <span class="t-str">"1; mode=block"</span>
|
|
<span class="t-comment"># Control referrer information</span>
|
|
Referrer-Policy <span class="t-str">"strict-origin-when-cross-origin"</span>
|
|
<span class="t-comment"># Hide Caddy server stamp signature</span>
|
|
<span class="t-key">-Server</span>
|
|
}
|
|
}
|
|
|
|
<span class="t-key">sync.koalastuff.net</span> {
|
|
<span class="t-key">encode</span> <span class="t-val">zstd gzip</span>
|
|
<span class="t-key">root</span> <span class="t-val">*</span> <span class="t-str">/var/www/koalasync/website/www</span>
|
|
|
|
<span class="t-comment"># Clean URLs: Resolves paths without .html in the URL</span>
|
|
<span class="t-key">try_files</span> <span class="t-val">{path} {path}.html {path}/</span>
|
|
<span class="t-key">file_server</span>
|
|
|
|
<span class="t-comment"># Static Caching for high performance</span>
|
|
<span class="t-key">@static</span> {
|
|
<span class="t-key">file</span>
|
|
<span class="t-key">path</span> <span class="t-str">*.ico *.css *.js *.png *.svg *.webp</span>
|
|
}
|
|
<span class="t-key">header</span> <span class="t-val">@static</span> Cache-Control <span class="t-str">"public, max-age=31536000, must-revalidate"</span>
|
|
|
|
<span class="t-comment"># Hardened Security & Permission Policies</span>
|
|
<span class="t-key">import</span> <span class="t-val">security_headers</span>
|
|
<span class="t-key">header</span> {
|
|
Content-Security-Policy <span class="t-str">"default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"</span>
|
|
Permissions-Policy <span class="t-str">"camera=(), microphone=(), geolocation=(), payment=(), usb=()"</span>
|
|
}
|
|
}
|
|
|
|
<span class="t-key">syncserver.koalastuff.net</span> {
|
|
<span class="t-key">import</span> <span class="t-val">security_headers</span>
|
|
<span class="t-key">encode</span> <span class="t-val">zstd gzip</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; border-top: 1px solid var(--glass-border); padding: 6rem 0 2rem 0;">
|
|
<div class="container">
|
|
<h2 data-reveal style="font-size: 2.2rem; margin-bottom: 1rem;">
|
|
<span>{{BOTTOM_TITLE}}</span>
|
|
</h2>
|
|
<p data-reveal style="margin-bottom: 3rem; color: var(--text-muted); max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.6; font-size: 1.05rem;">
|
|
<span>{{BOTTOM_SUBTITLE}}</span>
|
|
</p>
|
|
<div class="cta-group" data-reveal style="justify-content: center; gap: 1rem; margin-bottom: 1rem;">
|
|
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
|
|
<img src="{{ASSET_PATH}}assets/chrome.svg" alt="Chrome" width="20" height="20">
|
|
<span>{{ADD_TO_CHROME}}</span>
|
|
</a>
|
|
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
|
|
<img src="{{ASSET_PATH}}assets/firefox.svg" alt="Firefox" width="20" height="20">
|
|
<span>{{ADD_TO_FIREFOX}}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" data-reveal style="display: inline-block; text-decoration: none;">
|
|
<img src="{{ASSET_PATH}}assets/KoalaGithub-1x.webp" srcset="{{ASSET_PATH}}assets/KoalaGithub-1x.webp 250w, {{ASSET_PATH}}assets/KoalaGithub.webp 454w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="{{BOTTOM_MASCOT_ALT}}" class="cta-github-mascot" width="250" height="165" loading="lazy" fetchpriority="low">
|
|
</a>
|
|
|
|
<div class="cta-group" data-reveal style="justify-content: center; margin-top: 1rem;">
|
|
<a href="https://github.com/Shik3i/KoalaSync" 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" aria-hidden="true" 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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2026 KoalaSync. {{FOOTER_MIT}}</p>
|
|
<p style="font-size: 0.8rem; margin-top: 0.5rem;">{{FOOTER_RAM}}</p>
|
|
<div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
|
|
<a href="{{ASSET_PATH}}impressum" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
|
|
<a href="{{ASSET_PATH}}datenschutz" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>
|
|
<a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true" style="display: block;"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
|
|
Mastodon
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="{{ASSET_PATH}}app.min.js"></script>
|
|
</body>
|
|
</html>
|