mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-27 04:20:25 +00:00
KoalaDev
b8484f77d6
The combined section's third feature tile was Privacy, which is already covered by the hero trust line and the comparison table. Replace it with Volume Leveling / Audio Compressor, a genuinely differentiating feature not shown anywhere else on the page. Shorten its description to match the other tiles (all 15 locales). The three tiles are now: 1-click invites, volume leveling, universal HTML5 support. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1411 lines
106 KiB
HTML
1411 lines
106 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/png" sizes="16x16" href="{{ASSET_PATH}}assets/favicon-16x16.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{{ASSET_PATH}}assets/favicon-32x32.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ASSET_PATH}}assets/icon-192x192.png">
|
|
<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="it" href="https://sync.koalastuff.net/it/">
|
|
<link rel="alternate" hreflang="pl" href="https://sync.koalastuff.net/pl/">
|
|
<link rel="alternate" hreflang="tr" href="https://sync.koalastuff.net/tr/">
|
|
<link rel="alternate" hreflang="nl" href="https://sync.koalastuff.net/nl/">
|
|
<link rel="alternate" hreflang="ja" href="https://sync.koalastuff.net/ja/">
|
|
<link rel="alternate" hreflang="ko" href="https://sync.koalastuff.net/ko/">
|
|
<link rel="alternate" hreflang="zh" href="https://sync.koalastuff.net/zh/">
|
|
<link rel="alternate" hreflang="uk" href="https://sync.koalastuff.net/uk/">
|
|
<link rel="alternate" hreflang="pt" href="https://sync.koalastuff.net/pt/">
|
|
<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/og-image.png">
|
|
<meta property="og:image:width" content="1280">
|
|
<meta property="og:image:height" content="640">
|
|
<meta property="og:image:type" content="image/png">
|
|
<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">
|
|
<meta property="og:locale:alternate" content="it_IT">
|
|
<meta property="og:locale:alternate" content="pl_PL">
|
|
<meta property="og:locale:alternate" content="tr_TR">
|
|
<meta property="og:locale:alternate" content="nl_NL">
|
|
<meta property="og:locale:alternate" content="ja_JP">
|
|
<meta property="og:locale:alternate" content="ko_KR">
|
|
<meta property="og:locale:alternate" content="zh_CN">
|
|
<meta property="og:locale:alternate" content="uk_UA">
|
|
<meta property="og:locale:alternate" content="pt_PT">
|
|
<meta property="og:site_name" content="KoalaSync">
|
|
|
|
<!-- 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/og-image.png">
|
|
|
|
<!-- 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", "it", "nl", "pl", "pt", "pt-BR", "tr", "ru", "ja", "ko", "zh", "uk"]
|
|
}
|
|
</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": "{{SCHEMA_APP_DESC}}",
|
|
"softwareVersion": "{{VERSION}}",
|
|
"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": "{{HOWTO_TITLE}}",
|
|
"description": "{{HOWTO_DESC}}",
|
|
"step": [
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 1,
|
|
"name": "{{HOWTO_STEP_1_NAME}}",
|
|
"text": "{{HOWTO_STEP_1_TEXT}}",
|
|
"url": "https://sync.koalastuff.net/#how-it-works"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 2,
|
|
"name": "{{HOWTO_STEP_2_NAME}}",
|
|
"text": "{{HOWTO_STEP_2_TEXT}}",
|
|
"url": "https://sync.koalastuff.net/#how-it-works"
|
|
},
|
|
{
|
|
"@type": "HowToStep",
|
|
"position": 3,
|
|
"name": "{{HOWTO_STEP_3_NAME}}",
|
|
"text": "{{HOWTO_STEP_3_TEXT}}",
|
|
"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": "{{FAQ_Q1}}",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "{{FAQ_A1}}" }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "{{FAQ_Q_VIDEO_ACCESS}}",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "{{FAQ_A_VIDEO_ACCESS}}" }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "{{FAQ_Q2}}",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "{{FAQ_A2}}" }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "{{FAQ_Q3}}",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "{{FAQ_A3}}" }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "{{FAQ_Q4}}",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "{{FAQ_A4}}" }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "{{FAQ_Q5}}",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "{{FAQ_A5}}" }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "{{FAQ_Q6}}",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "{{FAQ_A6}}" }
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "{{FAQ_Q7}}",
|
|
"acceptedAnswer": { "@type": "Answer", "text": "{{FAQ_A7}}" }
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
<noscript>
|
|
<!-- Without JS the scroll-reveal observer never runs, so make all
|
|
reveal-animated content visible by default. -->
|
|
<style>
|
|
[data-reveal] { opacity: 1 !important; transform: none !important; }
|
|
</style>
|
|
</noscript>
|
|
</head>
|
|
<body>
|
|
<div class="scroll-progress-bar"></div>
|
|
|
|
<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 class="nav-logo-img" src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
|
|
<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>
|
|
<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" rel="noopener" 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>
|
|
<nav class="sr-only" aria-label="Language alternatives">
|
|
<a href="https://sync.koalastuff.net/" hreflang="en">English</a>
|
|
<a href="https://sync.koalastuff.net/de/" hreflang="de">Deutsch</a>
|
|
<a href="https://sync.koalastuff.net/fr/" hreflang="fr">Français</a>
|
|
<a href="https://sync.koalastuff.net/es/" hreflang="es">Español</a>
|
|
<a href="https://sync.koalastuff.net/pt-BR/" hreflang="pt-br">Português (Brasil)</a>
|
|
<a href="https://sync.koalastuff.net/ru/" hreflang="ru">Русский</a>
|
|
<a href="https://sync.koalastuff.net/it/" hreflang="it">Italiano</a>
|
|
<a href="https://sync.koalastuff.net/pl/" hreflang="pl">Polski</a>
|
|
<a href="https://sync.koalastuff.net/tr/" hreflang="tr">Türkçe</a>
|
|
<a href="https://sync.koalastuff.net/nl/" hreflang="nl">Nederlands</a>
|
|
<a href="https://sync.koalastuff.net/ja/" hreflang="ja">日本語</a>
|
|
<a href="https://sync.koalastuff.net/ko/" hreflang="ko">한국어</a>
|
|
<a href="https://sync.koalastuff.net/zh/" hreflang="zh">中文</a>
|
|
<a href="https://sync.koalastuff.net/uk/" hreflang="uk">Українська</a>
|
|
<a href="https://sync.koalastuff.net/pt/" hreflang="pt">Português (Portugal)</a>
|
|
</nav>
|
|
</div>
|
|
<div class="nav-right">
|
|
<button class="theme-toggle" id="theme-toggle" type="button" aria-label="{{THEME_TOGGLE_LABEL}}" title="{{THEME_TOGGLE_LABEL}}">
|
|
<svg class="theme-icon-sun" 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="18" height="18" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
|
|
<svg class="theme-icon-moon" 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="18" height="18" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
|
|
</button>
|
|
<div class="lang-select-container">
|
|
<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>
|
|
<option value="it" {{SELECTED_IT}}>🇮🇹 Italiano</option>
|
|
<option value="pl" {{SELECTED_PL}}>🇵🇱 Polski</option>
|
|
<option value="tr" {{SELECTED_TR}}>🇹🇷 Türkçe</option>
|
|
<option value="nl" {{SELECTED_NL}}>🇳🇱 Nederlands</option>
|
|
<option value="ja" {{SELECTED_JA}}>🇯🇵 日本語</option>
|
|
<option value="ko" {{SELECTED_KO}}>🇰🇷 한국어</option>
|
|
<option value="zh" {{SELECTED_ZH}}>🇨🇳 中文</option>
|
|
<option value="uk" {{SELECTED_UK}}>🇺🇦 Українська</option>
|
|
<option value="pt" {{SELECTED_PT}}>🇵🇹 Português (Portugal)</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>
|
|
<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>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero" id="main-content">
|
|
<div class="container hero-grid">
|
|
<div class="hero-text">
|
|
<h1>{{HERO_TITLE}}</h1>
|
|
<p class="hero-subtitle">{{HERO_SUBTITLE}}</p>
|
|
<div class="hero-mascot-container">
|
|
<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">
|
|
<a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" rel="noopener" class="koala-speech-bubble" data-release="{{VERSION_DATE}}" title="View Changelog">
|
|
<span class="version-text-en" lang="en">
|
|
<strong class="bubble-title">v{{VERSION}} is out! 🎉</strong>
|
|
<span class="bubble-sub"><span class="bubble-ago"></span>See what's new →</span>
|
|
</span>
|
|
<span class="version-text-de" lang="de">
|
|
<strong class="bubble-title">v{{VERSION}} ist da! 🎉</strong>
|
|
<span class="bubble-sub"><span class="bubble-ago"></span>Was ist neu? →</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="cta-group">
|
|
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary btn-install" data-browser="chrome">
|
|
<img src="{{ASSET_PATH}}assets/chrome.svg" alt="" width="20" height="20">
|
|
<span class="btn-label-short">Chrome</span>
|
|
<span class="btn-label-full">{{ADD_TO_CHROME}}</span>
|
|
</a>
|
|
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox btn-install" data-browser="firefox">
|
|
<img src="{{ASSET_PATH}}assets/firefox.svg" alt="" width="20" height="20">
|
|
<span class="btn-label-short">Firefox</span>
|
|
<span class="btn-label-full">{{ADD_TO_FIREFOX}}</span>
|
|
</a>
|
|
<a href="https://github.com/Shik3i/KoalaSync/releases" target="_blank" rel="noopener" class="btn btn-secondary btn-compact" 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>
|
|
<span>GitHub</span>
|
|
</a>
|
|
</div>
|
|
<p class="cta-trust">{{HERO_TRUST}}</p>
|
|
</div>
|
|
|
|
<!-- Interactive Live Demo: two synced video tabs + the extension popup -->
|
|
<div class="hero-mockup-wrapper">
|
|
<div class="hero-demo-scene popup-open connected" id="hero-demo">
|
|
<button class="demo-sync-chip" id="demo-sync-chip" type="button" title="Live sync status of the two demo tabs">
|
|
<span class="demo-chip-dot" aria-hidden="true"></span>
|
|
<span class="demo-chip-label-sync">{{DEMO_SYNC}}</span>
|
|
<span class="demo-chip-event"></span>
|
|
</button>
|
|
|
|
<div class="demo-tab-card demo-tab-a" id="demo-tab-a" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐱 ChillCat. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
|
|
<div class="demo-tab-titlebar">
|
|
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
|
|
<span class="demo-tab-title"><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="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></span>
|
|
<span class="demo-tab-user demo-user-a">🐱 ChillCat</span>
|
|
<button class="demo-ext-launcher" id="demo-launcher" type="button" aria-expanded="true" title="Open or close the KoalaSync popup">
|
|
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="" width="16" height="16" loading="eager" decoding="async">
|
|
</button>
|
|
</div>
|
|
<div class="demo-video">
|
|
<div class="demo-video-art" aria-hidden="true"></div>
|
|
<div class="demo-seek-sweep" aria-hidden="true"></div>
|
|
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
|
<g class="film-stars" fill="#e2e8f0">
|
|
<circle class="film-star" cx="18" cy="14" r="0.8"/>
|
|
<circle class="film-star" cx="42" cy="24" r="0.6"/>
|
|
<circle class="film-star" cx="64" cy="10" r="0.9"/>
|
|
<circle class="film-star" cx="90" cy="28" r="0.6"/>
|
|
<circle class="film-star" cx="108" cy="16" r="0.5"/>
|
|
<circle class="film-star" cx="134" cy="22" r="0.8"/>
|
|
<circle class="film-star" cx="150" cy="12" r="0.5"/>
|
|
</g>
|
|
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
|
|
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(30,27,75,0.7)"/>
|
|
<g class="film-mid-scroll">
|
|
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="180,76 186,60 192,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="215,78 223,52 231,78" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="255,76 261,62 267,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="295,77 304,55 313,77" fill="rgba(49,46,129,0.55)"/>
|
|
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
|
|
</g>
|
|
<g class="film-fore-scroll">
|
|
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
|
|
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
|
|
<polygon points="200,84 212,48 224,84" fill="#090d16"/>
|
|
<polygon points="275,84 288,42 301,84" fill="#090d16"/>
|
|
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#090d16"/>
|
|
</g>
|
|
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
|
|
</svg>
|
|
<div class="demo-play-overlay" aria-hidden="true">
|
|
<span class="demo-icon-wrap">
|
|
<svg class="icon-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M8 5v14l11-7z"/></svg>
|
|
<svg class="icon-pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
|
|
</span>
|
|
</div>
|
|
<div class="demo-video-controls">
|
|
<span class="demo-time">12:34</span>
|
|
<div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-fill"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-tab-card demo-tab-b" id="demo-tab-b" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐶 HappyDog. KoalaSync mirrors it to the other tab" title="Press play/pause here. KoalaSync mirrors it to the other tab">
|
|
<div class="demo-tab-titlebar">
|
|
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
|
|
<span class="demo-tab-title"><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="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></span>
|
|
<span class="demo-tab-user demo-user-b">🐶 HappyDog</span>
|
|
<span class="demo-ext-launcher demo-ext-static" aria-hidden="true" title="KoalaSync is installed here too">
|
|
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="" width="16" height="16" loading="eager" decoding="async">
|
|
</span>
|
|
</div>
|
|
<div class="demo-video">
|
|
<div class="demo-video-art" aria-hidden="true"></div>
|
|
<div class="demo-seek-sweep" aria-hidden="true"></div>
|
|
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
|
<g class="film-stars" fill="#e2e8f0">
|
|
<circle class="film-star" cx="18" cy="14" r="0.8"/>
|
|
<circle class="film-star" cx="42" cy="24" r="0.6"/>
|
|
<circle class="film-star" cx="64" cy="10" r="0.9"/>
|
|
<circle class="film-star" cx="90" cy="28" r="0.6"/>
|
|
<circle class="film-star" cx="108" cy="16" r="0.5"/>
|
|
<circle class="film-star" cx="134" cy="22" r="0.8"/>
|
|
<circle class="film-star" cx="150" cy="12" r="0.5"/>
|
|
</g>
|
|
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
|
|
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(30,27,75,0.7)"/>
|
|
<g class="film-mid-scroll">
|
|
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="180,76 186,60 192,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="215,78 223,52 231,78" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="255,76 261,62 267,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="295,77 304,55 313,77" fill="rgba(49,46,129,0.55)"/>
|
|
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
|
|
</g>
|
|
<g class="film-fore-scroll">
|
|
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
|
|
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
|
|
<polygon points="200,84 212,48 224,84" fill="#090d16"/>
|
|
<polygon points="275,84 288,42 301,84" fill="#090d16"/>
|
|
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#090d16"/>
|
|
</g>
|
|
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
|
|
</svg>
|
|
<div class="demo-play-overlay" aria-hidden="true">
|
|
<span class="demo-icon-wrap">
|
|
<svg class="icon-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M8 5v14l11-7z"/></svg>
|
|
<svg class="icon-pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
|
|
</span>
|
|
</div>
|
|
<div class="demo-video-controls">
|
|
<span class="demo-time">12:34</span>
|
|
<div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-fill"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="demo-tab-toast" id="demo-toast-b" data-joined="{{DEMO_JOINED}}" data-selected="{{DEMO_TAB_SELECTED}}" aria-hidden="true"></div>
|
|
</div>
|
|
|
|
<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" rel="noopener" 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 class="mockup-version">{{VERSION}}</span>
|
|
</a>
|
|
<button class="mock-close-btn" id="demo-popup-close" type="button" aria-label="Close popup" title="Close popup">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" width="13" height="13" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
</button>
|
|
</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">
|
|
<!-- Pre-room state, shown only during the scripted walkthrough -->
|
|
<div id="demo-room-empty" class="demo-room-empty">
|
|
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="" width="42" height="42" loading="eager" decoding="async">
|
|
<div class="demo-room-empty-text">{{DEMO_NO_ROOM}}</div>
|
|
<button id="demo-create-room" class="demo-create-room-btn" type="button">{{DEMO_CREATE_ROOM}}</button>
|
|
</div>
|
|
<div id="demo-room-joined">
|
|
<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;">{{MOCK_01}}</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);">{{MOCK_02}}</span>
|
|
</div>
|
|
<div class="mock-card">
|
|
<div class="mock-label" title="Share this link with friends so they can join">{{MOCK_03}}</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;" aria-label="Invite link">
|
|
<button class="mock-btn" id="demo-invite-copy" 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">{{MOCK_04}}</div>
|
|
<div class="mock-peer-list">
|
|
<div class="mock-peer-item">
|
|
<div class="mock-peer-header">
|
|
<span class="mock-peer-name">🐱 ChillCat</span>
|
|
<span class="mock-peer-meta">{{MOCK_05}}</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> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
|
|
</div>
|
|
<div class="mock-peer-item demo-peer-b">
|
|
<div class="mock-peer-header">
|
|
<span class="mock-peer-name">🐶 HappyDog</span>
|
|
<span class="mock-peer-meta">{{MOCK_07}}</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> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</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;">{{MOCK_08}}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SYNC TAB -->
|
|
<div id="mock-sync" class="mock-screen">
|
|
<div class="mock-form-group" style="margin-bottom: 12px;">
|
|
<label class="mock-section-label" for="demo-video-select" title="Choose the browser tab containing the video to sync">
|
|
{{MOCK_09}}
|
|
</label>
|
|
<select class="mock-input" id="demo-video-select" 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 value="" class="demo-select-placeholder" selected hidden>{{DEMO_SELECT_PLACEHOLDER}}</option>
|
|
<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> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></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;">
|
|
{{MOCK_10}}
|
|
</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>
|
|
{{MOCK_03}}
|
|
</button>
|
|
</div>
|
|
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
|
|
<button class="mock-btn mock-btn-play" id="demo-play-btn" 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">{{MOCK_11}}</button>
|
|
<button class="mock-btn mock-btn-pause" id="demo-pause-btn" 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">{{MOCK_12}}</button>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
|
|
<button class="mock-btn" id="demo-force-sync" 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">
|
|
{{MOCK_13}}
|
|
</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>
|
|
{{MOCK_14}}
|
|
</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">
|
|
{{MOCK_15}}
|
|
</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);">🐱 ChillCat @ 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;">🐶 HappyDog</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<label class="mock-section-label" title="Other users currently connected to this room">
|
|
{{MOCK_04}}
|
|
</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">🐱 ChillCat</span>
|
|
<span class="mock-peer-meta">{{MOCK_05}}</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> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
|
|
</div>
|
|
<div class="mock-peer-item demo-peer-b">
|
|
<div class="mock-peer-header">
|
|
<span class="mock-peer-name">🐶 HappyDog</span>
|
|
<span class="mock-peer-meta">{{MOCK_07}}</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> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></div>
|
|
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</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.">
|
|
{{MOCK_18}}
|
|
</label>
|
|
<input type="text" class="mock-input" value="🐱 ChillCat" 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">
|
|
{{MOCK_19}}
|
|
</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.">
|
|
{{MOCK_20}}
|
|
</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.">
|
|
{{MOCK_21}}
|
|
</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.">
|
|
{{MOCK_22}}
|
|
</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">
|
|
{{MOCK_23}}
|
|
</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">
|
|
{{MOCK_24}}
|
|
</button>
|
|
<p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
|
|
{{MOCK_25}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DEV TAB -->
|
|
<div id="mock-dev" class="mock-screen">
|
|
<label class="mock-section-label" title="Current WebSocket connection state">
|
|
{{MOCK_26}}
|
|
</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;">
|
|
{{MOCK_27}}
|
|
</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">
|
|
{{MOCK_28}}
|
|
</button>
|
|
</div>
|
|
|
|
<label class="mock-section-label" title="Technical details about the currently selected video element">
|
|
{{MOCK_29}}
|
|
</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">
|
|
{{MOCK_30}}
|
|
</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>🐱 ChillCat: PAUSE</span>
|
|
<span style="opacity: 0.5;">0:55</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; padding-top: 2px;">
|
|
<span>🐶 HappyDog: 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">
|
|
{{MOCK_31}}
|
|
</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">
|
|
{{MOCK_32}}
|
|
</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" rel="noopener" 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;" class="mockup-version">{{VERSION}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-invite-fly" id="demo-invite-fly" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><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>
|
|
sync.koalastuff.net/join…
|
|
</div>
|
|
<div class="demo-cursor" id="demo-cursor" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2l13 11.5-6 .7 3.4 6.3-2.6 1.4-3.4-6.4L5 19.5z" fill="#f8fafc" stroke="#0f172a" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
|
</div>
|
|
<p class="demo-hint" id="demo-hint">{{DEMO_HINT}}</p>
|
|
</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>{{WHY_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>{{WHY_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 id="features" class="features-grid features-grid-combined">
|
|
<!-- Tile 1: Instant Invites / 1-Click Join -->
|
|
<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="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>
|
|
|
|
<!-- Tile 2: Volume Leveling / Audio Compressor -->
|
|
<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="M11 5 6 9H2v6h4l5 4V5z"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
|
|
</span>
|
|
<span>{{FEATURE_7_TITLE}}</span>
|
|
</h3>
|
|
<p>{{FEATURE_7_DESC}}</p>
|
|
</div>
|
|
|
|
<!-- Tile 3: Universal HTML5 Support -->
|
|
<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"><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>
|
|
|
|
</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" data-label="KoalaSync">✔ <span>{{COMP_FEAT_1_KOALA}}</span></td>
|
|
<td class="cross" data-label="Teleparty">
|
|
✘ <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" data-label="KoalaSync">✔ <span>{{COMP_FEAT_2_KOALA}}</span></td>
|
|
<td class="cross" data-label="Teleparty">
|
|
✘ <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" data-label="KoalaSync">✔ <span>{{COMP_FEAT_3_KOALA}}</span></td>
|
|
<td class="cross" data-label="Teleparty">
|
|
✘ <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" data-label="KoalaSync">✔ <span>{{COMP_FEAT_4_KOALA}}</span></td>
|
|
<td class="cross" data-label="Teleparty">
|
|
✘ <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" data-label="KoalaSync">✔ <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" data-label="Teleparty">
|
|
✘ <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>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>{{COMP_FEAT_6_NAME}}</span></strong>
|
|
<span class="feat-desc"><span>{{COMP_FEAT_6_DESC}}</span></span>
|
|
</td>
|
|
<td class="check highlight" data-label="KoalaSync">✔ <span>{{COMP_FEAT_6_KOALA}}</span></td>
|
|
<td class="cross" data-label="Teleparty">
|
|
✘ <span>{{COMP_FEAT_6_TELE}}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="feat-name">
|
|
<strong><span>{{COMP_FEAT_7_NAME}}</span></strong>
|
|
<span class="feat-desc"><span>{{COMP_FEAT_7_DESC}}</span></span>
|
|
</td>
|
|
<td class="check highlight" data-label="KoalaSync">✔ <span>{{COMP_FEAT_7_KOALA}}</span></td>
|
|
<td class="cross" data-label="Teleparty">
|
|
✘ <span>{{COMP_FEAT_7_TELE}}</span>
|
|
</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>
|
|
<p class="comparison-guides-link" data-reveal>
|
|
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives">
|
|
<span>{{COMP_MORE_GUIDES}}</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="15" height="15" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="how-it-works" style="background: var(--section-tint)">
|
|
<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-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 mockup-version">{{VERSION}}</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">02</div>
|
|
<h3><span>{{STEP_2_TITLE}}</span></h3>
|
|
<p>{{STEP_2_DESC}}</p>
|
|
</div>
|
|
<!-- Custom Step 2 Illustration -->
|
|
<div class="step-illustration-1" 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 mockup-version">{{VERSION}}</div>
|
|
</div>
|
|
<div class="illus-popup-tabs">
|
|
<div class="illus-popup-tab">
|
|
<span>{{STEP_2_ILLUS_ROOM}}</span>
|
|
</div>
|
|
<div class="illus-popup-tab active">
|
|
<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="popup-form-group">
|
|
<label class="popup-form-label" for="popup-select-mock-el">{{LABEL_SELECT_VIDEO}}</label>
|
|
<div class="popup-select-wrapper">
|
|
<select class="popup-select-mock" id="popup-select-mock-el" disabled>
|
|
<option class="demo-title-text-ep1">Stranger Things - S4E1</option>
|
|
</select>
|
|
<div class="popup-cursor-pointer">👆</div>
|
|
</div>
|
|
</div>
|
|
<div class="popup-mock-controls">
|
|
<div class="popup-mock-btn play">▶ Play</div>
|
|
<div class="popup-mock-btn pause">⏸ Pause</div>
|
|
</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 (🐱 ChillCat) -->
|
|
<div class="illus-player-card player-a">
|
|
<div class="player-header">
|
|
<span class="player-user">🐱 ChillCat</span>
|
|
<span class="player-badge active">PLAYING</span>
|
|
</div>
|
|
<div class="player-video-canvas">
|
|
<div class="player-video-overlay"></div>
|
|
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
|
<g class="film-stars" fill="#e2e8f0">
|
|
<circle class="film-star" cx="18" cy="14" r="0.8"/>
|
|
<circle class="film-star" cx="42" cy="24" r="0.6"/>
|
|
<circle class="film-star" cx="64" cy="10" r="0.9"/>
|
|
<circle class="film-star" cx="90" cy="28" r="0.6"/>
|
|
<circle class="film-star" cx="134" cy="22" r="0.8"/>
|
|
</g>
|
|
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
|
|
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(30,27,75,0.7)"/>
|
|
<g class="film-mid-scroll">
|
|
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
|
|
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
|
|
</g>
|
|
<g class="film-fore-scroll">
|
|
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
|
|
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
|
|
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#090d16"/>
|
|
</g>
|
|
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
|
|
</svg>
|
|
</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 (🐶 HappyDog) -->
|
|
<div class="illus-player-card player-b">
|
|
<div class="player-header">
|
|
<span class="player-user">🐶 HappyDog</span>
|
|
<span class="player-badge active">PLAYING</span>
|
|
</div>
|
|
<div class="player-video-canvas">
|
|
<div class="player-video-overlay"></div>
|
|
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
|
<g class="film-stars" fill="#e2e8f0">
|
|
<circle class="film-star" cx="18" cy="14" r="0.8"/>
|
|
<circle class="film-star" cx="42" cy="24" r="0.6"/>
|
|
<circle class="film-star" cx="64" cy="10" r="0.9"/>
|
|
<circle class="film-star" cx="90" cy="28" r="0.6"/>
|
|
<circle class="film-star" cx="134" cy="22" r="0.8"/>
|
|
</g>
|
|
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
|
|
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(30,27,75,0.7)"/>
|
|
<g class="film-mid-scroll">
|
|
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
|
|
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
|
|
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
|
|
</g>
|
|
<g class="film-fore-scroll">
|
|
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
|
|
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
|
|
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#090d16"/>
|
|
</g>
|
|
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
|
|
</svg>
|
|
</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: var(--section-tint-strong); 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>
|
|
|
|
<details class="section-collapse" id="selfhost-collapse">
|
|
<summary class="collapse-summary" data-reveal>
|
|
<span class="collapse-label-show"><span>{{SELF_SHOW_SETUP}}</span></span>
|
|
<span class="collapse-label-hide"><span>{{SELF_HIDE_SETUP}}</span></span>
|
|
<svg class="collapse-chevron" 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="18" height="18" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</summary>
|
|
<div class="terminal-container collapse-content">
|
|
<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" rel="noopener" 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 *.avif</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>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="faq" style="border-top: 1px solid var(--glass-border);">
|
|
<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 holding a question mark wondering about KoalaSync" class="features-questions-mascot" width="250" height="211" loading="lazy" fetchpriority="low" data-reveal>
|
|
<h2 data-reveal style="font-size: 2.2rem; text-align: center; margin-bottom: 1rem;">
|
|
<span>{{FAQ_TITLE}}</span>
|
|
</h2>
|
|
<p data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
<span>{{FAQ_SUBTITLE}}</span>
|
|
</p>
|
|
<details class="section-collapse faq-section-collapse" id="faq-collapse">
|
|
<summary class="collapse-summary" data-reveal>
|
|
<span class="collapse-label-show"><span>{{FAQ_SHOW_ALL}}</span></span>
|
|
<span class="collapse-label-hide"><span>{{FAQ_HIDE_ALL}}</span></span>
|
|
<svg class="collapse-chevron" 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="18" height="18" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</summary>
|
|
<div class="faq-grid collapse-content">
|
|
<details class="faq-item">
|
|
<summary><span>{{FAQ_Q1}}</span></summary>
|
|
<p><span>{{FAQ_A1}}</span></p>
|
|
</details>
|
|
<details class="faq-item">
|
|
<summary><span>{{FAQ_Q_VIDEO_ACCESS}}</span></summary>
|
|
<p><span>{{FAQ_A_VIDEO_ACCESS}}</span></p>
|
|
</details>
|
|
<details class="faq-item">
|
|
<summary><span>{{FAQ_Q2}}</span></summary>
|
|
<p><span>{{FAQ_A2}}</span></p>
|
|
</details>
|
|
<details class="faq-item">
|
|
<summary><span>{{FAQ_Q3}}</span></summary>
|
|
<p><span>{{FAQ_A3}}</span></p>
|
|
</details>
|
|
<details class="faq-item">
|
|
<summary><span>{{FAQ_Q4}}</span></summary>
|
|
<p><span>{{FAQ_A4}}</span></p>
|
|
</details>
|
|
<details class="faq-item">
|
|
<summary><span>{{FAQ_Q5}}</span></summary>
|
|
<p><span>{{FAQ_A5}}</span></p>
|
|
</details>
|
|
<details class="faq-item">
|
|
<summary><span>{{FAQ_Q6}}</span></summary>
|
|
<p><span>{{FAQ_A6}}</span></p>
|
|
</details>
|
|
<details class="faq-item">
|
|
<summary><span>{{FAQ_Q7}}</span></summary>
|
|
<p><span>{{FAQ_A7}}</span></p>
|
|
</details>
|
|
</div>
|
|
</details>
|
|
</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" rel="noopener" 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" rel="noopener" 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>
|
|
<p style="font-size: 0.72rem; margin-top: 1.2rem; color: var(--text-muted); opacity: 0.65; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.5;">{{FOOTER_DISCLAIMER}}</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}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
|
|
<a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>
|
|
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives"><span><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></span></a>
|
|
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #c9302c; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
|
|
<span aria-hidden="true">♥</span>
|
|
<span>{{FOOTER_SUPPORT}}</span>
|
|
</a>
|
|
<a href="https://mastodon.social/@koalastuff" rel="me noopener" 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>
|