mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
Timo
1223 lines
97 KiB
HTML
1223 lines
97 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr" class="lang-tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>KoalaSync | Netflix, YouTube ve Herhangi Bir Videoyu Arkadaşlarınızla Eşitleyin</title>
|
||
<meta name="description" content="Netflix, YouTube, Twitch ve herhangi bir HTML5 videoyu arkadaşlarınızla mükemmel uyum içinde izleyin. Chrome ve Firefox için ücretsiz, açık kaynaklı tarayıcı eklentisi. Kayıt gerekmez.">
|
||
|
||
<link rel="preload" href="../style.512d0dfc.min.css" as="style">
|
||
<link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
|
||
<link rel="stylesheet" href="../style.512d0dfc.min.css">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
|
||
<link rel="canonical" href="https://sync.koalastuff.net/tr/">
|
||
<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="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/tr/">
|
||
<meta property="og:title" content="KoalaSync | Netflix, Emby, Jellyfin ve Neredeyse Her Videoyu Arkadaşlarınızla Eşitleyin">
|
||
<meta property="og:description" content="Netflix, Emby, Jellyfin, YouTube, Twitch ve neredeyse tüm HTML5 videolarını mükemmel bir senkronizasyonla izleyin. Chrome ve Firefox için gizlilik öncelikli, açık kaynaklı tarayıcı eklentisi.">
|
||
<meta property="og:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
|
||
<meta property="og:locale" content="tr_TR">
|
||
<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="pt_PT">
|
||
<meta property="og:site_name" content="KoalaSync">
|
||
|
||
<!-- Twitter / X -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="KoalaSync | Netflix, Emby, Jellyfin ve Neredeyse Her Videoyu Arkadaşlarla Eşitle – Tarayıcı Eklentisi">
|
||
<meta name="twitter:description" content="Netflix, Emby, Jellyfin, YouTube, Twitch ve neredeyse tüm HTML5 videolarını arkadaşlarınızla mükemmel bir senkronizasyonla izleyin. Chrome ve Firefox için gizlilik öncelikli, açık kaynaklı tarayıcı eklentisi.">
|
||
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
|
||
|
||
<!-- Mobile Browser Theme Styling -->
|
||
<meta name="theme-color" content="#0f172a">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<link rel="manifest" href="../site.webmanifest">
|
||
|
||
<script src="../lang-init.1b13bbf2.min.js"></script>
|
||
|
||
<!-- Structured Data (Schema.org) for Rich Snippets -->
|
||
<script type="application/ld+json" id="schema-org">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "KoalaSync",
|
||
"url": "https://sync.koalastuff.net/",
|
||
"logo": "https://sync.koalastuff.net/assets/NewLogoIcon_128.webp",
|
||
"sameAs": [
|
||
"https://github.com/Shik3i/KoalaSync",
|
||
"https://mastodon.social/@koalastuff"
|
||
]
|
||
}
|
||
</script>
|
||
<script type="application/ld+json" id="schema-website">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "WebSite",
|
||
"name": "KoalaSync",
|
||
"url": "https://sync.koalastuff.net/",
|
||
"inLanguage": ["en", "de", "fr", "es", "pt-BR", "ru"]
|
||
}
|
||
</script>
|
||
<script type="application/ld+json" id="schema-software">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "KoalaSync",
|
||
"operatingSystem": "Windows, macOS, Linux, ChromeOS",
|
||
"applicationCategory": "BrowserApplication",
|
||
"browserRequirements": "Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "EUR"
|
||
},
|
||
"description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
|
||
"softwareVersion": "1.9.3",
|
||
"license": "https://opensource.org/licenses/MIT",
|
||
"sameAs": "https://github.com/Shik3i/KoalaSync",
|
||
"image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
|
||
"screenshot": "https://sync.koalastuff.net/assets/PlatformJuggler_New.webp"
|
||
}
|
||
</script>
|
||
<script type="application/ld+json" id="schema-howto">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "HowTo",
|
||
"name": "KoalaSync kullanarak arkadaşlarınızla videoları senkronize etme",
|
||
"description": "YouTube, Netflix, Twitch ve daha fazlasında arkadaşlarınızla mükemmel uyum içinde herhangi bir videoyu izleyin. Kayıt yok, takip yok.",
|
||
"step": [
|
||
{
|
||
"@type": "HowToStep",
|
||
"position": 1,
|
||
"name": "Tarayıcı eklentisini kurun",
|
||
"text": "Chrome Web Mağazası veya Firefox Eklentileri aracılığıyla KoalaSync'i tarayıcınıza ekleyin. Video öğesi olan her web sitesinde çalışır.",
|
||
"url": "https://sync.koalastuff.net/#how-it-works"
|
||
},
|
||
{
|
||
"@type": "HowToStep",
|
||
"position": 2,
|
||
"name": "Bir oda oluşturun",
|
||
"text": "Eklenti açılır penceresini açın ve Yeni Oda Oluştur'a tıklayın. Davet bağlantısı otomatik olarak panonuza kopyalanır.",
|
||
"url": "https://sync.koalastuff.net/#how-it-works"
|
||
},
|
||
{
|
||
"@type": "HowToStep",
|
||
"position": 3,
|
||
"name": "Paylaşın ve eşitleyin",
|
||
"text": "Davet bağlantısını arkadaşlarınıza gönderin. Bir video sekmesi seçin ve gerçek zamanlı olarak senkronize oynatmanın keyfini çıkarın.",
|
||
"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": "Arkadaşlarımla Netflix, Emby veya Jellyfin'i eş zamanlı olarak izleyebilir miyim?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Evet! KoalaSync; Netflix, YouTube, Twitch ve HTML5 video oynatıcısı olan tüm web sitelerinde (Emby, Jellyfin ve kendi barındırdığınız medya sunucuları dahil) çalışır. Eklentiyi kurun, bir oda oluşturun, davet bağlantısını paylaşın; herkes mükemmel bir uyum içinde izlesin." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "KoalaSync, Teleparty'ye ücretsiz bir alternatif mi?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "MIT Lisansı kapsamında %100 ücretsiz ve açık kaynaklıdır. Premium katmanlar yok, kilitli özellikler yok, reklam yok — her şey dahil. Teleparty'nin aksine, KoalaSync'in aktarım sunucusu yalnızca RAM üzerindedir; sıfır veri toplama ve kullanıcı hesabı gereksinimi vardır." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "KoalaSync; Emby, Jellyfin ve kendi barındırdığınız medya sunucularıyla çalışır mı?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Evet. KoalaSync, herhangi bir standart HTML5 video öğesini algılar; bu da Emby, Jellyfin, Plex ve her türlü özel barındırılan akış kurulumuyla mükemmel çalıştığı anlamına gelir. Tam veri egemenliği için Docker aracılığıyla KoalaSync aktarım sunucusunu kendiniz de barındırabilirsiniz." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Hangi tarayıcılar ve platformlar KoalaSync'i destekliyor?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave ve tüm Chromium tabanlı tarayıcılar. Doğrudan Chrome Web Mağazası veya Firefox Eklentileri üzerinden kurun — manuel yapılandırmaya gerek yoktur." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Tüm arkadaşlarımın eklentiyi kurması gerekiyor mu?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Evet, her katılımcının KoalaSync'i kurması gerekir — ancak kayıt veya hesap oluşturma yoktur. Sadece davet bağlantısına tıklayın, henüz yapmadıysanız eklentiyi kurun, saniyeler içinde odaya otomatik olarak katılacaksınız." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Verilerim güvende mi? Ya resmi sunucuya güvenmiyorsam?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Tamamen güvende. KoalaSync'in aktarım sunucusu yalnızca RAM üzerindedir — odadan ayrıldığınız andan itibaren tüm oturum verileri kalıcı olarak silinir. Veritabanı yok, günlük kaydı yok, analitik yok, hesap yok. Ve tam kontrolü tercih ediyorsanız: Docker aracılığıyla kendi özel aktarım sunucunuzu dakikalar içinde barındırabilirsiniz. Tüm kod tabanı açık kaynaklıdır ve GitHub'da denetlenebilir." }
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<a class="skip-link" href="#main-content">Skip to main content</a>
|
||
|
||
<div class="bg-blobs">
|
||
<div class="blob blob-1"></div>
|
||
<div class="blob blob-2"></div>
|
||
<div class="blob blob-3"></div>
|
||
</div>
|
||
|
||
<nav>
|
||
<div class="container nav-content">
|
||
<div class="logo-area">
|
||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 256w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||
<span>KoalaSync</span>
|
||
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
|
||
<span>Installed</span>
|
||
</div>
|
||
</div>
|
||
<div class="nav-links" id="primary-nav" role="navigation" aria-label="Primary">
|
||
<a href="#features"><span>Özellikler</span></a>
|
||
<a href="#how-it-works"><span>Nasıl Çalışır</span></a>
|
||
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="display: inline-flex; align-items: center; gap: 6px;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M12 0C5.374 0 0 5.373 0 12c0 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.23A11.5 11.5 0 0 1 12 5.803c1.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.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12"/></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/pt/" hreflang="pt">Português (Portugal)</a>
|
||
</nav>
|
||
</div>
|
||
<div class="nav-right">
|
||
<div class="lang-select-container">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 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-10"/></svg>
|
||
<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" selected>🇹🇷 Türkçe</option>
|
||
<option value="nl" >🇳🇱 Nederlands</option>
|
||
<option value="ja" >🇯🇵 日本語</option>
|
||
<option value="ko" >🇰🇷 한국어</option>
|
||
<option value="pt" >🇵🇹 Português (Portugal)</option>
|
||
</select>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="chevron-icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
|
||
</div>
|
||
<button class="hamburger" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="primary-nav">
|
||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<header class="hero" id="main-content">
|
||
<div class="container hero-grid">
|
||
<div class="hero-text">
|
||
<a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
|
||
<span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
|
||
<span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
|
||
</a>
|
||
<h1 data-reveal>Birlikte İzleyin.<br>Mükemmel Eşitleyin.</h1>
|
||
<p class="hero-subtitle" data-reveal>Gecikmesiz uzaktan film geceniz. Kayıt yok, veri toplama yok. Sadece bir bağlantı paylaşın ve birlikte izleyin.</p>
|
||
<div class="hero-mascot-container" data-reveal>
|
||
<picture><source srcset="../assets/LookDownKoala-1x.avif 90w, ../assets/LookDownKoala.avif 205w" type="image/avif"><img src="../assets/LookDownKoala-1x.webp" srcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" sizes="90px" alt="İndirme düğmelerine bakan sevimli bir koala" class="hero-lookdown-mascot" width="90" height="132" loading="eager" fetchpriority="high" decoding="async"></picture>
|
||
</div>
|
||
<div class="cta-group" data-reveal>
|
||
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
|
||
<img src="../assets/chrome.svg" alt="Chrome" width="20" height="20">
|
||
<span>Chrome'a Ekle</span>
|
||
</a>
|
||
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
|
||
<img src="../assets/firefox.svg" alt="Firefox" width="20" height="20">
|
||
<span>Firefox'a Ekle</span>
|
||
</a>
|
||
<a href="https://github.com/Shik3i/KoalaSync/releases" target="_blank" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M12 0C5.374 0 0 5.373 0 12c0 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.23A11.5 11.5 0 0 1 12 5.803c1.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.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12"/></svg>
|
||
GitHub Releases
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Interactive CSS Extension Mockup -->
|
||
<div class="hero-mockup-wrapper" data-reveal>
|
||
<div class="extension-mockup">
|
||
<div class="mock-header-row">
|
||
<div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
|
||
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
|
||
<svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><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-.27s1.36.09 2 .27c1.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.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
|
||
<span class="mockup-version">2.1.0</span>
|
||
</a>
|
||
</div>
|
||
<div class="mock-tabs">
|
||
<button class="mock-tab active" data-target="mock-room" title="Room settings and connection">Room</button>
|
||
<button class="mock-tab" data-target="mock-sync" title="Video sync controls and remote actions">Sync</button>
|
||
<button class="mock-tab" data-target="mock-settings" title="Extension preferences">Settings</button>
|
||
<button class="mock-tab" data-target="mock-dev" title="Advanced Diagnostics & Logs">Status</button>
|
||
</div>
|
||
<div class="mock-body">
|
||
<!-- ROOM TAB -->
|
||
<div id="mock-room" class="mock-screen active">
|
||
<div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
|
||
<div style="display: flex; flex-direction: column;">
|
||
<span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;">Aktif Oda</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);">Resmi Sunucu</span>
|
||
</div>
|
||
<div class="mock-card">
|
||
<div class="mock-label" title="Share this link with friends so they can join">Davet Linki</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" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" 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">Odadaki Kişiler</div>
|
||
<div class="mock-peer-list">
|
||
<div class="mock-peer-item">
|
||
<div class="mock-peer-header">
|
||
<span class="mock-peer-name">CoolUsername</span>
|
||
<span class="mock-peer-meta">YOU</span>
|
||
</div>
|
||
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
|
||
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
|
||
</div>
|
||
<div class="mock-peer-item">
|
||
<div class="mock-peer-header">
|
||
<span class="mock-peer-name">KoalaPC</span>
|
||
<span class="mock-peer-meta">Peer</span>
|
||
</div>
|
||
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
|
||
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">Odadan Ayrıl</button>
|
||
</div>
|
||
|
||
<!-- SYNC TAB -->
|
||
<div id="mock-sync" class="mock-screen">
|
||
<div class="mock-form-group" style="margin-bottom: 12px;">
|
||
<label class="mock-section-label" title="Choose the browser tab containing the video to sync">
|
||
Video Seç
|
||
</label>
|
||
<select class="mock-input" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
|
||
<option><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
|
||
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
|
||
Uzaktan Kumanda
|
||
</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" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" 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>
|
||
Davet Linki
|
||
</button>
|
||
</div>
|
||
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
|
||
<button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="m5 3 14 9-14 9z"/></svg> Play</button>
|
||
<button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg> Pause</button>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
|
||
<button class="mock-btn" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg> SYNC
|
||
</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>
|
||
Diğerlerine Atla
|
||
</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">
|
||
Son Etkinlik Durumu
|
||
</label>
|
||
<div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: baseline;">
|
||
<span style="font-weight: 700; color: #ef4444; font-size: 11px;">PAUSE</span>
|
||
<span style="font-size: 9px; color: var(--text-muted);">CoolUsername @ 12:44:32</span>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; margin-top: 4px;">
|
||
<div style="display: flex; flex-direction: column; align-items: center;">
|
||
<div style="width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: white; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; margin-bottom: 1px;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></div>
|
||
<span style="font-size: 7px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36px;">🐨 KoalaPC</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Episode Auto-Sync Lobby Status Mockup -->
|
||
<div class="mock-card" style="margin-bottom: 15px; border-left: 4px solid #fbbf24; background: var(--card); padding: 8px 10px; border-radius: 8px;">
|
||
<div style="display:flex; align-items:center; gap: 6px; margin-bottom: 4px;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" style="display:block;flex-shrink:0" viewBox="0 0 24 24"><path d="M5 22h14M5 2h14m-2 20v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"/></svg>
|
||
<span style="font-weight: 700; color: #fbbf24; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;">Episode Lobby</span>
|
||
</div>
|
||
<div style="font-size: 0.7rem; color: white; margin-bottom: 4px; font-weight: 600;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E2
|
||
</div>
|
||
<div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
|
||
1 bağlantı bekleniyor (KoalaPC)...
|
||
</div>
|
||
<button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
|
||
Atla ve Yine de Oynat
|
||
</button>
|
||
</div>
|
||
|
||
<label class="mock-section-label" title="Other users currently connected to this room">
|
||
Odadaki Kişiler
|
||
</label>
|
||
<div class="mock-card" style="margin-bottom: 12px;">
|
||
<div class="mock-peer-list">
|
||
<div class="mock-peer-item">
|
||
<div class="mock-peer-header">
|
||
<span class="mock-peer-name">CoolUsername</span>
|
||
<span class="mock-peer-meta">YOU</span>
|
||
</div>
|
||
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
|
||
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</div>
|
||
</div>
|
||
<div class="mock-peer-item">
|
||
<div class="mock-peer-header">
|
||
<span class="mock-peer-name">KoalaPC</span>
|
||
<span class="mock-peer-meta">Peer</span>
|
||
</div>
|
||
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg> Stranger Things - S4E1</div>
|
||
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • Playing</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.">
|
||
Kullanıcı Adınız
|
||
</label>
|
||
<input type="text" class="mock-input" value="CoolUsername" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
|
||
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
|
||
Gereksiz Sekmeleri Gizle
|
||
</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.">
|
||
Sonraki Bölümü Otomatik Eşitle
|
||
</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.">
|
||
Davet Linkini Otomatik Kopyala
|
||
</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.">
|
||
Tarayıcı Bildirimleri
|
||
</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">
|
||
Sorun Giderme
|
||
</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">
|
||
Bağlantı Kimliğini Yeniden Oluştur
|
||
</button>
|
||
<p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
|
||
"Duplicate Identity" (Mükerrer Kimlik) hataları görüyorsanız bunu kullanın.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DEV TAB -->
|
||
<div id="mock-dev" class="mock-screen">
|
||
<label class="mock-section-label" title="Current WebSocket connection state">
|
||
Bağlantı Durumu
|
||
</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;">
|
||
Connected
|
||
</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">
|
||
Günlükleri Kopyala
|
||
</button>
|
||
</div>
|
||
|
||
<label class="mock-section-label" title="Technical details about the currently selected video element">
|
||
Video Hata Ayıklama Bilgisi
|
||
</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">
|
||
Tam İşlem Geçmişi
|
||
</label>
|
||
<div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
|
||
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
|
||
<span>CoolUsername: PAUSE</span>
|
||
<span style="opacity: 0.5;">0:55</span>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; padding-top: 2px;">
|
||
<span>KoalaPC: PLAY</span>
|
||
<span style="opacity: 0.5;">0:00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
|
||
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
|
||
Günlükler (Son 50)
|
||
</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">
|
||
TEMİZLE
|
||
</button>
|
||
</div>
|
||
<div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">
|
||
<div style="color:#22c55e;">[18:37:32] EVENT: PLAY -> ACK</div>
|
||
<div>[18:37:32] FORCE_SYNC -> 0.05s diff</div>
|
||
<div>[18:37:38] EVENT: PAUSE -> BROADCAST</div>
|
||
<div style="color:var(--text-muted);">[18:37:42] content_heartbeat: active</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
|
||
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
|
||
<div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="compat-section">
|
||
<div class="container">
|
||
<picture><source srcset="../assets/PlatformJuggler_New-1x.avif 368w, ../assets/PlatformJuggler_New.avif 643w" type="image/avif"><img src="../assets/PlatformJuggler_New-1x.webp" srcset="../assets/PlatformJuggler_New-1x.webp 368w, ../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></picture>
|
||
<p class="compat-heading" data-reveal>
|
||
<span>En sevdiğiniz platformlarda çalışır</span>
|
||
</p>
|
||
<div class="compat-row" data-reveal>
|
||
<div class="compat-logo">
|
||
<img src="../assets/netflix.svg" alt="Netflix" width="24" height="24">
|
||
<span>Netflix</span>
|
||
</div>
|
||
<div class="compat-logo">
|
||
<img src="../assets/youtube.svg" alt="YouTube" width="24" height="24">
|
||
<span>YouTube</span>
|
||
</div>
|
||
<div class="compat-logo">
|
||
<img src="../assets/twitch.svg" alt="Twitch" width="24" height="24">
|
||
<span>Twitch</span>
|
||
</div>
|
||
<div class="compat-logo">
|
||
<img src="../assets/primevideo.svg" alt="Prime Video" width="24" height="24">
|
||
<span>Prime Video</span>
|
||
</div>
|
||
<div class="compat-logo">
|
||
<img src="../assets/jellyfin.svg" alt="Jellyfin" width="24" height="24">
|
||
<span>Jellyfin</span>
|
||
</div>
|
||
<div class="compat-logo">
|
||
<img src="../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>ve çok daha fazlası</span>
|
||
<div class="compat-tooltip">
|
||
<span>Video öğesi olan neredeyse her sitede çalışır</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>Her Durum İçin Mükemmel</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>Yakın ya da uzak, KoalaSync insanları en sevdikleri videolar etrafında bir araya getirir.</span>
|
||
</p>
|
||
<div class="use-cases-grid">
|
||
<div class="use-case-card" data-reveal>
|
||
<picture><source srcset="../assets/PopcornFriends-1x.avif 272w, ../assets/PopcornFriends.avif 543w" type="image/avif"><img src="../assets/PopcornFriends-1x.webp" srcset="../assets/PopcornFriends-1x.webp 272w, ../assets/PopcornFriends.webp 543w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Birlikte oturan ve bir kova patlamış mısır paylaşan iki sevimli koala" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low"></picture>
|
||
<h3>
|
||
<span>Arkadaşlarla Film Gecesi</span>
|
||
</h3>
|
||
<p>Filmlerinizi gerçek zamanlı olarak senkronize edin ve Discord, Zoom veya en sevdiğiniz sesli arama uygulaması üzerinden konuşun. Aynı odada oturuyormuş gibi hissettirir.</p>
|
||
</div>
|
||
<div class="use-case-card" data-reveal>
|
||
<picture><source srcset="../assets/RemoteProf-1x.avif 272w, ../assets/RemoteProf.avif 507w" type="image/avif"><img src="../assets/RemoteProf-1x.webp" srcset="../assets/RemoteProf-1x.webp 272w, ../assets/RemoteProf.webp 507w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Ekrandan iki uzaktaki öğrenci koalaya sunum yapan bir koala profesörü" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low"></picture>
|
||
<h3>
|
||
<span>Uzaktan Eğitim</span>
|
||
</h3>
|
||
<p>Sınıf arkadaşlarınız veya meslektaşlarınızla birlikte çevrimiçi öğreticileri, dersleri veya geliştirici eğitim akışlarını analiz edin. Karmaşık adımları mükemmel bir uyum içinde duraklatın ve tartışın.</p>
|
||
</div>
|
||
<div class="use-case-card" data-reveal>
|
||
<picture><source srcset="../assets/KoalaCupple_New-1x.avif 272w, ../assets/KoalaCupple_New.avif 579w" type="image/avif"><img src="../assets/KoalaCupple_New-1x.webp" srcset="../assets/KoalaCupple_New-1x.webp 272w, ../assets/KoalaCupple_New.webp 579w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Uzaktan birlikte izleyen sevimli bir koala çifti; biri bilgisayar başında oturuyor, diğeri yatakta dizüstü bilgisayarla, aralarında uçan kalpler var" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low"></picture>
|
||
<h3>
|
||
<span>Uzak Mesafe İlişkileri</span>
|
||
</h3>
|
||
<p>Mesafeleri köprüleyin ve buluşma gecelerinin tadını çıkarın. Her olay örgüsünü deneyimleyin, aynı şakalara gülün ve duygusal anları tam olarak aynı milisaniyede paylaşın.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="features">
|
||
<div class="container">
|
||
<picture><source srcset="../assets/KoalaQuestions-1x.avif 250w, ../assets/KoalaQuestions.avif 355w" type="image/avif"><img src="../assets/KoalaQuestions-1x.webp" srcset="../assets/KoalaQuestions-1x.webp 250w, ../assets/KoalaQuestions.webp 355w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="A cute koala with a question mark above its head wondering why to choose KoalaSync" class="features-questions-mascot" width="250" height="211" loading="lazy" fetchpriority="low" data-reveal></picture>
|
||
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
|
||
<span>Neden KoalaSync?</span>
|
||
</h2>
|
||
<p style="text-align: center; color: var(--text-muted); margin-bottom: 4rem;">
|
||
<span>Güvenilir eşitleme, önce gizlilik ilkesi ve kolay kurulum için tasarlandı.</span>
|
||
</p>
|
||
|
||
<div class="features-grid">
|
||
<!-- Card 1: Full Control / Instant Sync (Bento Large) -->
|
||
<div class="feature-card bento-large" data-reveal>
|
||
<h3>
|
||
<span class="feature-icon-svg">
|
||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg>
|
||
</span>
|
||
<span>Tam Kontrol / Anında Eşitleme</span>
|
||
</h3>
|
||
<p>Biri duraklatır, herkes duraklatır. Biri arar, herkes takip eder. İki aşamalı eşitleme protokolümüz, oynatmayı tüm katılımcılar arasında gerçek zamanlı olarak koordine eder.</p>
|
||
</div>
|
||
|
||
<!-- Card 2: Endless Binge-Watching (Bento Standard) -->
|
||
<div class="feature-card" data-reveal>
|
||
<h3>
|
||
<span class="feature-icon-svg">
|
||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5m10 0h5M17 7h5"/></svg>
|
||
</span>
|
||
<span>Kesintisiz İzleme Keyfi</span>
|
||
</h3>
|
||
<p>Senkronize otomatik oynatma. KoalaSync, bölüm geçişlerini otomatik olarak algılar ve tüm bağlantılar bir sonraki videoyu başarıyla yükleyene kadar oynatmayı bekletir.</p>
|
||
</div>
|
||
|
||
<!-- Card 3: Zero Accounts / Pure Privacy (Bento Standard) -->
|
||
<div class="feature-card" data-reveal>
|
||
<h3>
|
||
<span class="feature-icon-svg">
|
||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg>
|
||
</span>
|
||
<span>Sıfır Hesap / Saf Gizlilik</span>
|
||
</h3>
|
||
<p>Kayıt yok, takip yok, kalıcı iz yok. Sunucu tamamen geçici RAM üzerinde çalışır ve ayrıldığınızda odanızı temizler.</p>
|
||
<div class="bento-visual-architecture" style="margin-top: 15px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.7rem; font-family: monospace; display: flex; align-items: center; justify-content: space-between; color: var(--accent);">
|
||
<span>STATE: VOLATILE</span>
|
||
<span style="background: rgba(99, 102, 241, 0.15); padding: 2px 6px; border-radius: 4px; font-weight: 700; font-size: 0.6rem;">RAM-ONLY</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 4: Universal HTML5 Support (Bento Large) -->
|
||
<div class="feature-card bento-large" data-reveal>
|
||
<h3>
|
||
<span class="feature-icon-svg">
|
||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 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-10"/></svg>
|
||
</span>
|
||
<span>Evrensel HTML5 Desteği</span>
|
||
</h3>
|
||
<p>YouTube, Twitch, Netflix, Jellyfin, Emby ve HTML5 video öğesi içeren neredeyse tüm standart web sayfalarında çalışır. Ayrıca özel barındırılan kurulumlarla da uyumludur.</p>
|
||
</div>
|
||
|
||
<!-- Card 5: Instant Invites / 1-Click Join (Bento Large) -->
|
||
<div class="feature-card bento-large" data-reveal>
|
||
<h3>
|
||
<span class="feature-icon-svg">
|
||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><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>Anında Davetler / Tek Tıkla Katılım</span>
|
||
</h3>
|
||
<p>Takas edilecek IP adresi veya şifre yok. Arkadaşlarınızın tek bir tıklamayla odanıza otomatik olarak katılması için oluşturulan bir davet bağlantısını paylaşın.</p>
|
||
</div>
|
||
|
||
<!-- Card 6: Self-Hostable & Docker-Ready (Bento Standard) -->
|
||
<div class="feature-card" data-reveal>
|
||
<h3>
|
||
<span class="feature-icon-svg">
|
||
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="bento-icon" viewBox="0 0 24 24"><path d="m4 17 6-6-6-6m8 14h8"/></svg>
|
||
</span>
|
||
<span>Kendi Kendine Barındırılabilir ve Docker Uyumlu</span>
|
||
</h3>
|
||
<p>Resmi sunucularımız ücretsiz ve hızlıdır, ancak isterseniz tüm kontrolü elinize alabilirsiniz. Docker aracılığıyla saniyeler içinde kendi özel aktarım sunucunuzu başlatın.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section id="comparison" class="comparison-section">
|
||
<div class="container">
|
||
<picture><source srcset="../assets/ProContraKoala-1x.avif 260w, ../assets/ProContraKoala.avif 423w" type="image/avif"><img src="../assets/ProContraKoala-1x.webp" srcset="../assets/ProContraKoala-1x.webp 260w, ../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></picture>
|
||
<h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
|
||
<span>KoalaSync vs. Teleparty</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>Açık kaynaklı, reklamsız ve önce gizlilik diyen yöntemin neden birlikte izlemenin en iyi yolu olduğunu görün.</span>
|
||
</p>
|
||
|
||
<div class="comparison-table-wrapper" data-reveal>
|
||
<table class="comparison-table">
|
||
<thead>
|
||
<tr>
|
||
<th><span>Özellik</span></th>
|
||
<th class="highlight">KoalaSync</th>
|
||
<th>Teleparty</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="feat-name">
|
||
<strong><span>Maliyet / Ödeme Duvarları</span></strong>
|
||
<span class="feat-desc"><span>Premium abonelikler, gizli ücretler veya kilitli özellikler.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>%100 Ücretsiz</span></td>
|
||
<td class="cross">
|
||
✘ <span>Ücretli Katmanlar / Premium Kilitler</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>Lisans / Kod Denetlenebilir</span></strong>
|
||
<span class="feat-desc"><span>Kaynak kodunun açık ve serbestçe denetlenebilir olup olmadığı.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>Açık Kaynak (MIT)</span></td>
|
||
<td class="cross">
|
||
✘ <span>Tescilli / Kapalı</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>Kendi Kendine Barındırma</span></strong>
|
||
<span class="feat-desc"><span>Kendi özel aktarım sunucunuzu devreye alma yeteneği.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>Evet (Docker uyumlu)</span></td>
|
||
<td class="cross">
|
||
✘ <span>Hayır</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>Gizlilik ve Takip</span></strong>
|
||
<span class="feat-desc"><span>Kayıt gereksinimleri, takip çerezleri ve analitikler.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>Sıfır Kalıcılık (Sadece RAM)</span></td>
|
||
<td class="cross">
|
||
✘ <span>Google Analytics ve Çerezler</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>Site Uyumluluğu</span></strong>
|
||
<span class="feat-desc"><span>Desteklenen web siteleri ve oynatıcı uyumluluğu.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>Neredeyse tüm HTML5 videoları</span><a href="#footnote-3" class="source-link" title="Technical Compatibility Details"><sup>[3]</sup></a></td>
|
||
<td class="cross">
|
||
✘ <span>Sadece desteklenen siteler</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>Yerelleştirme / Çeviri</span></strong>
|
||
<span class="feat-desc"><span>Mevcut arayüz dilleri ve çeviri desteği.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>13 Dil (ve artıyor)</span></td>
|
||
<td class="cross">
|
||
✘ <span>Sadece İngilizce</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>Karşılaştırma durumu: Mayıs 2026.</span>
|
||
</p>
|
||
<p>
|
||
<sup>[1]</sup>
|
||
<span>Resmi Teleparty Premium fiyatlandırması ve desteklenen ağ ayrıntıları:</span>
|
||
<a href="https://www.teleparty.com/premium" target="_blank" rel="noopener noreferrer">teleparty.com/premium</a>
|
||
</p>
|
||
<p>
|
||
<sup>[2]</sup>
|
||
<span>Teleparty gizlilik politikaları ve takip verisi toplama:</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>Standart HTML5 video etiketlerine komut dosyası eklenmesine izin veren web sitelerinde çalışır. Çok katı İçerik Güvenliği Politikalarına (CSP) sahip, DRM kopya korumalı veya yoğun şekilde gizlenmiş oynatıcı sarmalayıcıları (karmaşık gölge DOM'lar gibi) olan web siteleri otomatik kontrolü veya enjeksiyonu kısıtlayabilir.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="how-it-works" style="background: rgba(255,255,255,0.02)">
|
||
<div class="container">
|
||
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 4rem;">
|
||
<span>Başlarken</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>Eklentiyi Kur</span></h3>
|
||
<p>KoalaSync'i Chrome Web Mağazası, Firefox Eklentileri aracılığıyla tarayıcınıza ekleyin veya en son geliştirici ZIP dosyasını GitHub'dan indirin.</p>
|
||
</div>
|
||
<!-- Custom Step 1 Illustration -->
|
||
<div class="step-illustration-1" data-reveal>
|
||
<div class="illus-browser-container">
|
||
<div class="illus-browser-header">
|
||
<div class="illus-browser-dots">
|
||
<span class="illus-browser-dot"></span>
|
||
<span class="illus-browser-dot"></span>
|
||
<span class="illus-browser-dot"></span>
|
||
</div>
|
||
<div class="illus-browser-address-bar">
|
||
<span class="url-protocol">https://</span>sync.koalastuff.net
|
||
</div>
|
||
<div class="illus-browser-toolbar">
|
||
<div class="illus-extension-btn active">
|
||
<picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Extension" width="14" height="14"></picture>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="illus-browser-content">
|
||
<div class="illus-store-card">
|
||
<div class="illus-store-card-header">
|
||
<picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" class="illus-large-logo" width="30" height="30"></picture>
|
||
<div class="illus-store-info">
|
||
<div class="illus-store-title">KoalaSync</div>
|
||
<div class="illus-store-desc">
|
||
<span>Gizlilik öncelikli video senkronize edici</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="illus-store-buttons">
|
||
<div class="illus-store-btn chrome">
|
||
<img src="../assets/chrome.svg" alt="Chrome Logo" width="12" height="12">
|
||
<span>Chrome için İndir</span>
|
||
</div>
|
||
<div class="illus-store-btn firefox">
|
||
<img src="../assets/firefox.svg" alt="Firefox Logo" width="12" height="12">
|
||
<span>Firefox için İndir</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Extension Success Popup -->
|
||
<div class="illus-extension-popup">
|
||
<div class="popup-title">
|
||
<picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="12" height="12"></picture>
|
||
<span>KoalaSync</span>
|
||
</div>
|
||
<div class="popup-status">
|
||
<div class="status-badge-success">
|
||
<span class="status-check"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span>
|
||
<span>Eklenti Etkin</span>
|
||
</div>
|
||
</div>
|
||
<div class="popup-quick-start">
|
||
<span>Birlikte izlemeye hazır!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-text" data-reveal>
|
||
<div class="step-num" aria-hidden="true">02</div>
|
||
<h3><span>Oda Oluştur</span></h3>
|
||
<p>Eklenti açılır penceresini açın ve '+ Yeni Oda Oluştur' düğmesine tıklayın. KoalaSync otomatik olarak güvenli bir Oda Kimliği ve Şifresi oluşturur, odaya katılır ve davet bağlantısını panonuza kopyalar.</p>
|
||
</div>
|
||
<!-- Custom Step 2 Illustration -->
|
||
<div class="step-illustration-2" data-reveal>
|
||
<div class="illus-popup-card">
|
||
<div class="illus-popup-header">
|
||
<div class="illus-popup-brand">
|
||
<picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
|
||
<span>KoalaSync</span>
|
||
</div>
|
||
<div class="illus-popup-version mockup-version">2.1.0</div>
|
||
</div>
|
||
<div class="illus-popup-tabs">
|
||
<div class="illus-popup-tab active">
|
||
<span>Oda</span>
|
||
</div>
|
||
<div class="illus-popup-tab">
|
||
<span>Senkronizasyon</span>
|
||
</div>
|
||
<div class="illus-popup-tab">
|
||
<span>Ayarlar</span>
|
||
</div>
|
||
</div>
|
||
<div class="illus-popup-body">
|
||
<div class="illus-popup-btn action-create-room">
|
||
<span>+ Yeni Oda Oluştur</span>
|
||
<div class="illus-btn-shine"></div>
|
||
</div>
|
||
|
||
<div class="illus-collapsed-details">
|
||
<span class="details-arrow">▶</span>
|
||
<span>Manuel Bağlantı / Gelişmiş</span>
|
||
</div>
|
||
|
||
<div class="illus-floating-success">
|
||
<span class="success-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" 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>Davet bağlantısı kopyalandı!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-text" data-reveal>
|
||
<div class="step-num" aria-hidden="true">03</div>
|
||
<h3><span>Paylaş ve Eşitle</span></h3>
|
||
<p>Davet bağlantısını arkadaşlarınıza gönderin. Katıldıklarında video sekmenizi seçin ve senkronize oynatmanın keyfini çıkarın.</p>
|
||
</div>
|
||
<!-- Custom Step 3 Illustration -->
|
||
<div class="step-illustration-3" data-reveal>
|
||
<div class="illus-sync-theater">
|
||
<!-- Player A (KoalaPC) -->
|
||
<div class="illus-player-card player-a">
|
||
<div class="player-header">
|
||
<span class="player-user">🐨 KoalaPC</span>
|
||
<span class="player-badge active">PLAYING</span>
|
||
</div>
|
||
<div class="player-video-canvas">
|
||
<div class="player-play-pulse">▶</div>
|
||
<div class="player-video-overlay"></div>
|
||
</div>
|
||
<div class="player-controls">
|
||
<span class="control-btn">⏸</span>
|
||
<div class="player-timeline">
|
||
<div class="timeline-fill"></div>
|
||
<div class="timeline-knob"></div>
|
||
</div>
|
||
<span class="control-time">42:15</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Glowing Sync Bridge -->
|
||
<div class="illus-sync-bridge">
|
||
<div class="sync-line">
|
||
<div class="sync-beam"></div>
|
||
</div>
|
||
<div class="sync-status-badge">
|
||
<span>EŞİTLENDİ</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Player B (LaptopKoala) -->
|
||
<div class="illus-player-card player-b">
|
||
<div class="player-header">
|
||
<span class="player-user">💻 LaptopKoala</span>
|
||
<span class="player-badge active">PLAYING</span>
|
||
</div>
|
||
<div class="player-video-canvas">
|
||
<div class="player-play-pulse">▶</div>
|
||
<div class="player-video-overlay"></div>
|
||
</div>
|
||
<div class="player-controls">
|
||
<span class="control-btn">⏸</span>
|
||
<div class="player-timeline">
|
||
<div class="timeline-fill"></div>
|
||
<div class="timeline-knob"></div>
|
||
</div>
|
||
<span class="control-time">42:15</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Self Hosters Paradise Section -->
|
||
<section id="self-hosting" style="background: rgba(15, 23, 42, 0.4); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);">
|
||
<div class="container">
|
||
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
|
||
<span>Kendi Kendine Barındıranlar İçin</span>
|
||
</h2>
|
||
<p style="text-align: center; color: var(--text-muted); margin-bottom: 2rem; max-width: 650px; margin-left: auto; margin-right: auto;">
|
||
<span>Sunucumuza güvenmiyor musunuz? Veri egemenliğinizi koruyun. Kendi özel aktarım sunucunuzu dakikalar içinde devreye alın.</span>
|
||
</p>
|
||
|
||
<!-- Mascot Self-Hosting / Deploy Illustration -->
|
||
<div style="display: flex; justify-content: center; margin-bottom: 2.5rem;" data-reveal>
|
||
<picture><source srcset="../assets/KoalaDeploy-1x.avif 300w, ../assets/KoalaDeploy.avif 600w" type="image/avif"><img src="../assets/KoalaDeploy-1x.webp" srcset="../assets/KoalaDeploy-1x.webp 300w, ../assets/KoalaDeploy.webp 600w" sizes="(max-width: 768px) calc(100vw - 2rem), 300px" alt="Kendi kendine barındırma için bir Docker konteyneri kuran dizüstü bilgisayarlı sevimli bir koala" class="selfhost-mascot" width="300" height="201" loading="lazy" fetchpriority="low"></picture>
|
||
</div>
|
||
|
||
<div class="terminal-container" data-reveal>
|
||
<div class="terminal-header">
|
||
<div class="terminal-dots">
|
||
<span class="terminal-dot red"></span>
|
||
<span class="terminal-dot yellow"></span>
|
||
<span class="terminal-dot green"></span>
|
||
</div>
|
||
<div class="terminal-tabs">
|
||
<button class="terminal-tab-btn active" data-tab="pane-docker">docker-compose.yml</button>
|
||
<button class="terminal-tab-btn" data-tab="pane-caddy-simple">Caddyfile (Simple)</button>
|
||
<button class="terminal-tab-btn" data-tab="pane-caddy-advanced">Caddyfile (Advanced)</button>
|
||
</div>
|
||
</div>
|
||
<div class="terminal-body">
|
||
<button class="terminal-copy-btn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" 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>Kodu Kopyala</span>
|
||
</button>
|
||
|
||
<div id="pane-docker" class="terminal-pane active">
|
||
<pre><code><span class="t-key">services:</span>
|
||
<span class="t-key">koala-sync:</span>
|
||
<span class="t-key">image:</span> <span class="t-str">ghcr.io/shik3i/koalasync:latest</span>
|
||
<span class="t-key">container_name:</span> <span class="t-str">KoalaSync</span>
|
||
<span class="t-key">restart:</span> <span class="t-str">always</span>
|
||
<span class="t-comment"># Access internally by proxying to container port 3000</span>
|
||
<span class="t-key">environment:</span>
|
||
<span class="t-key">-</span> <span class="t-str">TZ=Europe/Berlin</span>
|
||
<span class="t-key">-</span> <span class="t-str">PORT=3000</span>
|
||
<span class="t-key">-</span> <span class="t-str">MIN_VERSION=1.0.0</span>
|
||
<span class="t-key">-</span> <span class="t-str">MAX_ROOMS=100</span>
|
||
<span class="t-key">-</span> <span class="t-str">MAX_PEERS_PER_ROOM=50</span>
|
||
<span class="t-key">pids_limit:</span> <span class="t-val">2048</span></code></pre>
|
||
<div style="margin-top: 1rem; font-size: 0.75rem; text-align: right; padding-right: 0.5rem;">
|
||
<a href="https://github.com/Shik3i/KoalaSync/pkgs/container/koalasync" target="_blank" style="color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; transition: opacity 0.2s; opacity: 0.85;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M16.5 9.4 7.55 4.24M21 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 16"/><path d="M3.29 7 12 12l8.71-5M12 22V12"/></svg> <span>GitHub Paketlerindeki tüm görüntü etiketlerini görüntüleyin</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>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="faq" style="border-top: 1px solid var(--glass-border);">
|
||
<div class="container">
|
||
<h2 data-reveal style="font-size: 2.2rem; text-align: center; margin-bottom: 1rem;">
|
||
<span>Sıkça Sorulan Sorular</span>
|
||
</h2>
|
||
<p data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
||
<span>Videoları mükemmel bir uyum içinde birlikte izleme hakkında bilmeniz gereken her şey.</span>
|
||
</p>
|
||
<div class="faq-grid">
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>Arkadaşlarımla Netflix, Emby veya Jellyfin'i eş zamanlı olarak izleyebilir miyim?</span></summary>
|
||
<p><span>Evet! KoalaSync; Netflix, YouTube, Twitch ve HTML5 video oynatıcısı olan tüm web sitelerinde (Emby, Jellyfin ve kendi barındırdığınız medya sunucuları dahil) çalışır. Eklentiyi kurun, bir oda oluşturun, davet bağlantısını paylaşın; herkes mükemmel bir uyum içinde izlesin.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>KoalaSync, Teleparty'ye ücretsiz bir alternatif mi?</span></summary>
|
||
<p><span>MIT Lisansı kapsamında %100 ücretsiz ve açık kaynaklıdır. Premium katmanlar yok, kilitli özellikler yok, reklam yok — her şey dahil. Teleparty'nin aksine, KoalaSync'in aktarım sunucusu yalnızca RAM üzerindedir; sıfır veri toplama ve kullanıcı hesabı gereksinimi vardır.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>KoalaSync; Emby, Jellyfin ve kendi barındırdığınız medya sunucularıyla çalışır mı?</span></summary>
|
||
<p><span>Evet. KoalaSync, herhangi bir standart HTML5 video öğesini algılar; bu da Emby, Jellyfin, Plex ve her türlü özel barındırılan akış kurulumuyla mükemmel çalıştığı anlamına gelir. Tam veri egemenliği için Docker aracılığıyla KoalaSync aktarım sunucusunu kendiniz de barındırabilirsiniz.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>Hangi tarayıcılar ve platformlar KoalaSync'i destekliyor?</span></summary>
|
||
<p><span>Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave ve tüm Chromium tabanlı tarayıcılar. Doğrudan Chrome Web Mağazası veya Firefox Eklentileri üzerinden kurun — manuel yapılandırmaya gerek yoktur.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>Tüm arkadaşlarımın eklentiyi kurması gerekiyor mu?</span></summary>
|
||
<p><span>Evet, her katılımcının KoalaSync'i kurması gerekir — ancak kayıt veya hesap oluşturma yoktur. Sadece davet bağlantısına tıklayın, henüz yapmadıysanız eklentiyi kurun, saniyeler içinde odaya otomatik olarak katılacaksınız.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>Verilerim güvende mi? Ya resmi sunucuya güvenmiyorsam?</span></summary>
|
||
<p><span>Tamamen güvende. KoalaSync'in aktarım sunucusu yalnızca RAM üzerindedir — odadan ayrıldığınız andan itibaren tüm oturum verileri kalıcı olarak silinir. Veritabanı yok, günlük kaydı yok, analitik yok, hesap yok. Ve tam kontrolü tercih ediyorsanız: Docker aracılığıyla kendi özel aktarım sunucunuzu dakikalar içinde barındırabilirsiniz. Tüm kod tabanı açık kaynaklıdır ve GitHub'da denetlenebilir.</span></p>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section style="text-align: center; border-top: 1px solid var(--glass-border); padding: 6rem 0 2rem 0;">
|
||
<div class="container">
|
||
<h2 data-reveal style="font-size: 2.2rem; margin-bottom: 1rem;">
|
||
<span>İkna olmadınız mı? Kendiniz görün.</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>KoalaSync %100 açık kaynaklıdır, reklamsızdır ve takip içermez. GitHub'daki kod tabanımızı denetleyin veya tarayıcı eklentisini doğrudan kurun.</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="../assets/chrome.svg" alt="Chrome" width="20" height="20">
|
||
<span>Chrome'a Ekle</span>
|
||
</a>
|
||
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
|
||
<img src="../assets/firefox.svg" alt="Firefox" width="20" height="20">
|
||
<span>Firefox'a Ekle</span>
|
||
</a>
|
||
</div>
|
||
|
||
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" data-reveal style="display: inline-block; text-decoration: none;">
|
||
<picture><source srcset="../assets/KoalaGithub-1x.avif 250w, ../assets/KoalaGithub.avif 454w" type="image/avif"><img src="../assets/KoalaGithub-1x.webp" srcset="../assets/KoalaGithub-1x.webp 250w, ../assets/KoalaGithub.webp 454w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="GitHub maskotu Octocat'in yanında GitHub depo sayfasını tutan sevimli bir koala" class="cta-github-mascot" width="250" height="165" loading="lazy" fetchpriority="low"></picture>
|
||
</a>
|
||
|
||
<div class="cta-group" data-reveal style="justify-content: center; margin-top: 1rem;">
|
||
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M12 0C5.374 0 0 5.373 0 12c0 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.23A11.5 11.5 0 0 1 12 5.803c1.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.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12"/></svg>
|
||
GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2026 KoalaSync. MIT Lisansı kapsamında açık kaynaklı.</p>
|
||
<p style="font-size: 0.8rem; margin-top: 0.5rem;">Sunucularımızda hiçbir veri saklanmaz. Saf RAM tabanlı aktarım.</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="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Yasal Uyarı</span></a>
|
||
<a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Gizlilik Politikası</span></a>
|
||
<a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><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.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 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-.422q.059-.011.11-.024c2.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.545m-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.102q0-1.965 1.011-3.12c.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.164q1.012 1.155 1.012 3.12z"/></svg>
|
||
Mastodon
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="../app.877f29ac.min.js"></script>
|
||
</body>
|
||
</html>
|