mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
KoalaDev
9cddac47ef
The drift clamp saturated after ~2600px, so nothing moved on long pages. The vertical drift now maps scroll progress (0..1 over the full document) onto the stalks' overscan, so the parallax runs end to end. Turn the background into a descent through the forest: god-ray light shafts and the canopy fade out while a dusk tint, thicker mist, the terracotta horizon glow and the fireflies fade in as you scroll down. Fireflies additionally wander organically (independent translate property composing with their scale pulse), and on hover-capable devices the bamboo layers tilt subtly toward the cursor. All layers animate transform/opacity only, rAF-throttled, reduced-motion safe. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
294 lines
16 KiB
HTML
294 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{LANG_CODE}}" class="lang-{{LANG_CODE}}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ALT_W2G_TITLE}}</title>
|
|
<link rel="preload" href="{{ASSET_PATH}}style.min.css" as="style">
|
|
<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/{{LANG_PREFIX}}alternatives/watch2gether">
|
|
|
|
<link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="de" href="https://sync.koalastuff.net/de/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="fr" href="https://sync.koalastuff.net/fr/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="es" href="https://sync.koalastuff.net/es/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="pt-br" href="https://sync.koalastuff.net/pt-BR/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="ru" href="https://sync.koalastuff.net/ru/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="it" href="https://sync.koalastuff.net/it/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="pl" href="https://sync.koalastuff.net/pl/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="tr" href="https://sync.koalastuff.net/tr/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="nl" href="https://sync.koalastuff.net/nl/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="ja" href="https://sync.koalastuff.net/ja/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="ko" href="https://sync.koalastuff.net/ko/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="zh" href="https://sync.koalastuff.net/zh/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="uk" href="https://sync.koalastuff.net/uk/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="pt" href="https://sync.koalastuff.net/pt/alternatives/watch2gether">
|
|
<link rel="alternate" hreflang="x-default" href="https://sync.koalastuff.net/alternatives/watch2gether">
|
|
|
|
<meta name="description" content="{{ALT_W2G_META_DESC}}">
|
|
<meta name="robots" content="index, follow">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="https://sync.koalastuff.net/{{LANG_PREFIX}}alternatives/watch2gether">
|
|
<meta property="og:title" content="{{ALT_W2G_TITLE}}">
|
|
<meta property="og:description" content="{{ALT_W2G_META_DESC}}">
|
|
<meta property="og:image" content="https://sync.koalastuff.net/assets/ProContraKoala.webp">
|
|
<meta property="og:locale" content="{{OG_LOCALE}}">
|
|
|
|
<!-- Twitter / X -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="{{ALT_W2G_TITLE}}">
|
|
<meta name="twitter:description" content="{{ALT_W2G_META_DESC}}">
|
|
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/ProContraKoala.webp">
|
|
|
|
<!-- Structured Data (Schema.org) for Breadcrumbs -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "Home",
|
|
"item": "https://sync.koalastuff.net/{{LANG_PREFIX}}"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "Alternatives",
|
|
"item": "https://sync.koalastuff.net/{{LANG_PREFIX}}alternatives"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 3,
|
|
"name": "KoalaSync vs Watch2Gether",
|
|
"item": "https://sync.koalastuff.net/{{LANG_PREFIX}}alternatives/watch2gether"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<!-- Structured Data (Schema.org) for WebPage -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebPage",
|
|
"name": "{{ALT_W2G_TITLE}}",
|
|
"url": "https://sync.koalastuff.net/{{LANG_PREFIX}}alternatives/watch2gether",
|
|
"description": "{{ALT_W2G_META_DESC}}",
|
|
"inLanguage": "{{LANG_CODE}}",
|
|
"isPartOf": {
|
|
"@type": "WebSite",
|
|
"name": "KoalaSync",
|
|
"url": "https://sync.koalastuff.net/{{LANG_PREFIX}}"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Organization Schema -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@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>
|
|
|
|
<!-- Mobile Browser Theme Styling -->
|
|
<meta name="theme-color" content="#10190e">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
|
|
<script src="{{ASSET_PATH}}lang-init.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="bg-nature" aria-hidden="true">
|
|
<div class="bg-dusk-tint"></div>
|
|
<div class="bg-depth-day">
|
|
<div class="bg-godrays">
|
|
<span class="godray godray-1"></span>
|
|
<span class="godray godray-2"></span>
|
|
<span class="godray godray-3"></span>
|
|
</div>
|
|
<div class="bg-canopy"></div>
|
|
<span class="canopy-arc canopy-arc-1"></span>
|
|
<span class="canopy-arc canopy-arc-2"></span>
|
|
<span class="canopy-arc canopy-arc-3"></span>
|
|
<span class="canopy-arc canopy-arc-4"></span>
|
|
</div>
|
|
<div id="bamboo-far">
|
|
<span class="bamboo-stalk far-1"></span>
|
|
<span class="bamboo-stalk far-2"></span>
|
|
<span class="bamboo-stalk far-3"></span>
|
|
</div>
|
|
<div id="bamboo-near">
|
|
<div class="bamboo-stalk near-1">
|
|
<i class="bamboo-node node-1"></i>
|
|
<i class="bamboo-node node-2"></i>
|
|
<i class="bamboo-node node-3"></i>
|
|
<i class="bamboo-leaf leaf-1"></i>
|
|
<i class="bamboo-leaf leaf-2"></i>
|
|
</div>
|
|
<div class="bamboo-stalk near-2">
|
|
<i class="bamboo-node node-1"></i>
|
|
<i class="bamboo-node node-2"></i>
|
|
<i class="bamboo-node node-3"></i>
|
|
<i class="bamboo-leaf leaf-1"></i>
|
|
</div>
|
|
</div>
|
|
<span class="fall-leaf fall-leaf-1"><i></i></span>
|
|
<span class="fall-leaf fall-leaf-2"><i></i></span>
|
|
<span class="fall-leaf fall-leaf-3"><i></i></span>
|
|
<span class="fall-leaf fall-leaf-4"><i></i></span>
|
|
<span class="fall-leaf fall-leaf-5"><i></i></span>
|
|
<span class="fall-leaf fall-leaf-6"><i></i></span>
|
|
<span class="fall-leaf fall-leaf-7"><i></i></span>
|
|
<span class="fall-leaf fall-leaf-8"><i></i></span>
|
|
<span class="bg-grass bg-grass-1"></span>
|
|
<span class="bg-grass bg-grass-2"></span>
|
|
<span class="bg-grass bg-grass-3"></span>
|
|
<span class="bg-grass bg-grass-4"></span>
|
|
<div class="bg-depth-dusk">
|
|
<div class="bg-mist bg-mist-1"></div>
|
|
<div class="bg-mist bg-mist-2"></div>
|
|
<div class="bg-horizon"></div>
|
|
<span class="firefly firefly-1"></span>
|
|
<span class="firefly firefly-2"></span>
|
|
<span class="firefly firefly-3"></span>
|
|
<span class="firefly firefly-4"></span>
|
|
<span class="firefly firefly-5"></span>
|
|
<span class="firefly firefly-6"></span>
|
|
</div>
|
|
<div class="bg-light-sweep"></div>
|
|
<div class="bg-grain"></div>
|
|
</div>
|
|
|
|
<nav>
|
|
<div class="container nav-content">
|
|
<a href="{{ASSET_PATH}}" class="logo-area" style="text-decoration: none;">
|
|
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="40" height="40">
|
|
<span>KoalaSync</span>
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="{{ASSET_PATH}}" style="display: inline-flex; align-items: center; gap: 6px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width: 16px; height: 16px; display: block;"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
|
|
<span>Home</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>
|
|
</div>
|
|
<div class="nav-right">
|
|
<div class="lang-select-container">
|
|
<select class="lang-dropdown" aria-label="Select Language">
|
|
<option value="en">🇬🇧 English</option>
|
|
<option value="de">🇩🇪 Deutsch</option>
|
|
<option value="fr">🇫🇷 Français</option>
|
|
<option value="es">🇪🇸 Español</option>
|
|
<option value="pt-BR">🇧🇷 Português (Brasil)</option>
|
|
<option value="ru">🇷🇺 Русский</option>
|
|
<option value="it">🇮🇹 Italiano</option>
|
|
<option value="pl">🇵🇱 Polski</option>
|
|
<option value="tr">🇹🇷 Türkçe</option>
|
|
<option value="nl">🇳🇱 Nederlands</option>
|
|
<option value="ja">🇯🇵 日本語</option>
|
|
<option value="ko">🇰🇷 한국어</option>
|
|
<option value="zh">🇨🇳 中文</option>
|
|
<option value="uk">🇺🇦 Українська</option>
|
|
<option value="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="Menu" aria-expanded="false">☰</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="legal-content">
|
|
<div class="legal-card" data-reveal style="padding: 2rem;">
|
|
<div style="display: flex; justify-content: center;">
|
|
<img src="{{ASSET_PATH}}assets/ProContraKoala.webp" alt="Koala weighing pros and cons" class="legal-mascot" width="180" height="180">
|
|
</div>
|
|
|
|
<h1>{{ALT_W2G_TITLE}}</h1>
|
|
|
|
<!-- Intro -->
|
|
<section>
|
|
<p><em>{{ALT_W2G_INTRO}}</em></p>
|
|
</section>
|
|
|
|
<!-- When Watch2Gether may still make sense -->
|
|
<section>
|
|
<h2>{{ALT_W2G_WHEN_W2G_TITLE}}</h2>
|
|
<p>{{ALT_W2G_WHEN_W2G_BODY}}</p>
|
|
</section>
|
|
|
|
<!-- When KoalaSync may fit better -->
|
|
<section>
|
|
<h2>{{ALT_W2G_WHEN_KOALA_TITLE}}</h2>
|
|
<p>{{ALT_W2G_WHEN_KOALA_BODY}}</p>
|
|
</section>
|
|
|
|
<!-- The main difference -->
|
|
<section>
|
|
<h2>{{ALT_W2G_MAIN_DIFF_TITLE}}</h2>
|
|
<p>{{ALT_W2G_MAIN_DIFF_BODY}}</p>
|
|
</section>
|
|
|
|
<!-- Honest limitations -->
|
|
<section>
|
|
<h2>{{ALT_W2G_LIMITS_TITLE}}</h2>
|
|
<p>{{ALT_W2G_LIMITS_BODY}}</p>
|
|
</section>
|
|
|
|
<!-- Summary -->
|
|
<section>
|
|
<h2>{{ALT_W2G_SUMMARY_TITLE}}</h2>
|
|
<p>{{ALT_W2G_SUMMARY_BODY}}</p>
|
|
</section>
|
|
|
|
<!-- CTA block -->
|
|
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--glass-border);">
|
|
<a href="{{ASSET_PATH}}" class="btn btn-primary" style="margin-bottom: 1.5rem;">{{ALT_TRY_KOALASYNC}}</a>
|
|
<p style="font-size: 0.9rem; text-align: center; display: flex; flex-direction: column; gap: 0.5rem;">
|
|
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives/scener" style="color: var(--accent); text-decoration: none;">{{ALT_SCENER_TITLE}}</a>
|
|
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives/kosmi" style="color: var(--accent); text-decoration: none;">{{ALT_KOSMI_TITLE}}</a>
|
|
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives/twoseven" style="color: var(--accent); text-decoration: none;">{{ALT_TWOSEVEN_TITLE}}</a>
|
|
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives/teleparty" style="color: var(--accent); text-decoration: none;">{{ALT_TELEPARTY_TITLE}}</a>
|
|
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives/screen-sharing" style="color: var(--accent); text-decoration: none;">{{ALT_SCREEN_TITLE}}</a>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<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}}{{FOOTER_LEGAL_LINK}}">{{FOOTER_LEGAL}}</a>
|
|
<a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}">{{FOOTER_PRIVACY}}</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://mastodon.social/@koalastuff" rel="me noopener" target="_blank" style="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>
|