mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-06 01:17:42 +00:00
Timo
1222 lines
96 KiB
HTML
1222 lines
96 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt" class="lang-pt">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com os amigos</title>
|
||
<meta name="description" content="Veja Netflix, YouTube, Twitch e qualquer vídeo HTML5 em sincronia perfeita com os amigos. Extensão de navegador gratuita e de código aberto para Chrome e Firefox. Sem registo necessário.">
|
||
|
||
<link rel="preload" href="../style.b511a1d2.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.b511a1d2.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/pt/">
|
||
<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/pt/">
|
||
<meta property="og:title" content="KoalaSync | Sincronize Netflix, Emby, Jellyfin e quase qualquer vídeo com os amigos">
|
||
<meta property="og:description" content="Veja Netflix, Emby, Jellyfin, YouTube, Twitch e quase qualquer vídeo HTML5 em sincronia perfeita. Extensão de navegador de código aberto e focada na privacidade para Chrome e Firefox.">
|
||
<meta property="og:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
|
||
<meta property="og:locale" content="pt_PT">
|
||
<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 | Sincronize Netflix, Emby, Jellyfin e quase qualquer vídeo com os amigos – Extensão de Navegador">
|
||
<meta name="twitter:description" content="Veja Netflix, Emby, Jellyfin, YouTube, Twitch e quase qualquer vídeo HTML5 em sincronia perfeita com os amigos. Extensão de navegador de código aberto e focada na privacidade para Chrome e Firefox.">
|
||
<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": "Como sincronizar vídeos com amigos usando o KoalaSync",
|
||
"description": "Veja qualquer vídeo em sincronia perfeita com os amigos no YouTube, Netflix, Twitch e mais. Sem registo, sem rastreio.",
|
||
"step": [
|
||
{
|
||
"@type": "HowToStep",
|
||
"position": 1,
|
||
"name": "Instale a extensão do navegador",
|
||
"text": "Adicione o KoalaSync ao seu navegador a partir da Chrome Web Store ou Firefox Add-ons. Funciona em qualquer website com um elemento de vídeo.",
|
||
"url": "https://sync.koalastuff.net/#how-it-works"
|
||
},
|
||
{
|
||
"@type": "HowToStep",
|
||
"position": 2,
|
||
"name": "Crie uma sala",
|
||
"text": "Abra o popup da extensão e clique em Criar Nova Sala. O link de convite é copiado automaticamente para a área de transferência.",
|
||
"url": "https://sync.koalastuff.net/#how-it-works"
|
||
},
|
||
{
|
||
"@type": "HowToStep",
|
||
"position": 3,
|
||
"name": "Partilhe e sincronize",
|
||
"text": "Envie o link de convite para os seus amigos. Escolha um separador do vídeo e desfrute da reprodução sincronizada em tempo real.",
|
||
"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": "Posso ver Netflix, Emby ou Jellyfin juntos em sincronia com os amigos?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Sim! O KoalaSync funciona no Netflix, YouTube, Twitch e em qualquer website com um leitor de vídeo HTML5 — incluindo Emby, Jellyfin e servidores de media auto-hospedados. Instale a extensão, crie uma sala, partilhe o link de convite e todos assistem em perfeita sincronia." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "O KoalaSync é uma alternativa gratuita ao Teleparty?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "100% gratuito e de código aberto sob a Licença MIT. Sem planos premium, sem funcionalidades bloqueadas, sem anúncios — tudo incluído. Ao contrário do Teleparty, o servidor do KoalaSync corre apenas em RAM, sem qualquer recolha de dados ou necessidade de contas de utilizador." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "O KoalaSync funciona com Emby, Jellyfin e servidores de media auto-hospedados?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Sim. O KoalaSync deteta qualquer elemento de vídeo HTML5 padrão, o que significa que funciona perfeitamente com Emby, Jellyfin, Plex e qualquer configuração de streaming personalizada. Também pode auto-hospedar o servidor de retransmissão do KoalaSync via Docker para total soberania dos dados." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Que navegadores e plataformas suportam o KoalaSync?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave e todos os navegadores baseados em Chromium. Instale diretamente da Chrome Web Store ou Firefox Add-ons — sem necessidade de configuração manual." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Todos os meus amigos precisam de ter a extensão instalada?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Sim, cada participante precisa de ter o KoalaSync instalado — mas não há registo ou criação de conta. Basta clicar no link de convite, instalar a extensão se ainda não o fez, e entrará na sala automaticamente em segundos." }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Os meus dados estão seguros? E se eu não confiar no servidor oficial?",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Totalmente seguro. O servidor de retransmissão do KoalaSync corre apenas em RAM — todos os dados da sessão são permanentemente eliminados no momento em que sai da sala. Sem base de dados, sem registo, sem análises, sem contas. E se preferir o controlo total: pode auto-hospedar o seu próprio servidor de retransmissão privado via Docker em minutos. Toda a base de código é aberta e auditável no GitHub." }
|
||
}
|
||
]
|
||
}
|
||
</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>Funcionalidades</span></a>
|
||
<a href="#how-it-works"><span>Como Funciona</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">
|
||
<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="pt" selected>🇵🇹 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>Vejam Juntos.<br>Sincronizem Perfeitamente.</h1>
|
||
<p class="hero-subtitle" data-reveal>A sua noite de cinema à distância e sem atrasos. Sem registo, sem recolha de dados. Partilhe apenas um link e vejam juntos.</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="Um coala fofo em pé e a olhar para baixo para os botões de download" 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>Adicionar ao Chrome</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>Adicionar ao Firefox</span>
|
||
</a>
|
||
<a href="https://github.com/Shik3i/KoalaSync/releases" target="_blank" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" 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;">Sala Ativa</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);">Servidor Oficial</span>
|
||
</div>
|
||
<div class="mock-card">
|
||
<div class="mock-label" title="Share this link with friends so they can join">Link de Invito</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">Participantes na Sala</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;">Sair della Sala</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">
|
||
Selecionar Vídeo
|
||
</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;">
|
||
Controlo Remoto
|
||
</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>
|
||
Link de Invito
|
||
</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>
|
||
Ir para os Outros
|
||
</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">
|
||
Estado da Última Atividade
|
||
</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;">
|
||
A aguardar por 1 participante (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">
|
||
Ignorar e reproduzir mesmo assim
|
||
</button>
|
||
</div>
|
||
|
||
<label class="mock-section-label" title="Other users currently connected to this room">
|
||
Participantes na Sala
|
||
</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.">
|
||
O seu Nome de Utilizador
|
||
</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">
|
||
Ocultar Separadores Desnecessários
|
||
</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.">
|
||
Sincronização Automática do Próximo Episódio
|
||
</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.">
|
||
Copiar Automaticamente o Link de Convite
|
||
</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.">
|
||
Notificações do Navegador
|
||
</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">
|
||
Resolução de Problemas
|
||
</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">
|
||
Regerar ID do Peer
|
||
</button>
|
||
<p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
|
||
Use isto se vir erros de "Identidade Duplicata".
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DEV TAB -->
|
||
<div id="mock-dev" class="mock-screen">
|
||
<label class="mock-section-label" title="Current WebSocket connection state">
|
||
Estado da Ligação
|
||
</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">
|
||
Copiar Registos
|
||
</button>
|
||
</div>
|
||
|
||
<label class="mock-section-label" title="Technical details about the currently selected video element">
|
||
Info de Debug de Vídeo
|
||
</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">
|
||
Histórico Completo de Ações
|
||
</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">
|
||
Registos (Últimos 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">
|
||
LIMPAR
|
||
</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>Funciona nas suas plataformas favoritas</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>e muitos mais</span>
|
||
<div class="compat-tooltip">
|
||
<span>Funciona em quase todos os sites com um elemento de vídeo</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>Perfeito para Qualquer Ocasião</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>Perto ou longe, o KoalaSync junta as pessoas em redor dos seus vídeos favoritos.</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="Dois coalas fofos sentados juntos e a partilhar um balde de pipocas" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low"></picture>
|
||
<h3>
|
||
<span>Noite de Cinema com Amigos</span>
|
||
</h3>
|
||
<p>Sincronize os seus filmes em tempo real e fale via Discord, Zoom ou a sua app de chamada de voz favorita. Parece que estão na mesma sala.</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="Um professor coala a dar uma apresentação num ecrã para dois estudantes coalas à distância" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low"></picture>
|
||
<h3>
|
||
<span>Aprendizagem à Distância</span>
|
||
</h3>
|
||
<p>Analise tutoriais online, palestras ou streams de formação com colegas. Pausa e discuta passos complexos em perfeita harmonia.</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="Um casal fofo de coalas a ver juntos à distância; um está sentado no PC e o outro está na cama com um portátil, com corações a voar entre eles" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low"></picture>
|
||
<h3>
|
||
<span>Relacionamentos à Distância</span>
|
||
</h3>
|
||
<p>Ponte para a distância e aproveite as noites de encontros. Experimente cada reviravolta, ria das mesmas piadas e partilhe momentos emocionantes exatamente no mesmo milissegundo.</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>Porquê KoalaSync?</span>
|
||
</h2>
|
||
<p style="text-align: center; color: var(--text-muted); margin-bottom: 4rem;">
|
||
<span>Construído para uma sincronizzazione fiável, design focado na privacidade e configuração simples.</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>Controlo Total / Sincronização Instantânea</span>
|
||
</h3>
|
||
<p>Um pausa, todos pausam. Um avança, todos seguem. O nosso protocolo di sincronizzazione a duas fases coordena a reprodução em tempo reale em todos os participantes.</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>Binge-Watching Infinito</span>
|
||
</h3>
|
||
<p>Reprodução automática em sincronia. O KoalaSync deteta automaticamente as transições de episódios e aguarda até que todos os peers tenham carregado o vídeo seguinte.</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>Zero Contas / Privacidade Pura</span>
|
||
</h3>
|
||
<p>Sem registo, sem rastreio, sem pegadas de persistência. O servidor corre inteiramente em RAM e purga a sala quando você sai.</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>Suporte HTML5 Universal</span>
|
||
</h3>
|
||
<p>Funciona no YouTube, Twitch, Netflix, Jellyfin, Emby e em quase todas as páginas web padrão que contenham um elemento de vídeo HTML5. Compatível também com servidores personalizados.</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>Convites Instantâneos / Entrada com 1 Clique</span>
|
||
</h3>
|
||
<p>Nenhum endereço IP ou palavra-passe para trocar. Partilhe um link de convite gerado com os seus amigos para que possam entrar na sala automaticamente com um único clique.</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>Auto-Hospedável e Pronto para Docker</span>
|
||
</h3>
|
||
<p>Os nossos servidores oficiais são gratuitos e rápidos, mas pode assumir o controlo total se quiser. Lance o seu próprio servidor de retransmissão privado em segundos via Docker.</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>Descubra porquê o código aberto, sem anúncios e focado na privacidade é a forma superior de ver vídeos juntos.</span>
|
||
</p>
|
||
|
||
<div class="comparison-table-wrapper" data-reveal>
|
||
<table class="comparison-table">
|
||
<thead>
|
||
<tr>
|
||
<th><span>Funcionalidade</span></th>
|
||
<th class="highlight">KoalaSync</th>
|
||
<th>Teleparty</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="feat-name">
|
||
<strong><span>Custos / Paywalls</span></strong>
|
||
<span class="feat-desc"><span>Assinaturas premium, taxas ocultas ou funcionalidades bloqueadas.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>100% Gratuito</span></td>
|
||
<td class="cross">
|
||
✘ <span>Planos Pagos / Bloqueios Premium</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>Licença / Código Auditável</span></strong>
|
||
<span class="feat-desc"><span>Se o código-fonte é aberto e livremente auditável.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>Código Aberto (MIT)</span></td>
|
||
<td class="cross">
|
||
✘ <span>Proprietário</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>Self-Hosting</span></strong>
|
||
<span class="feat-desc"><span>Capacidade de implementar o seu próprio servidor de retransmissão privado.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>Sim (Pronto para Docker)</span></td>
|
||
<td class="cross">
|
||
✘ <span>Não</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>Privacidade e Rastreio</span></strong>
|
||
<span class="feat-desc"><span>Requisitos de registo, cookies de rastreio e análises.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>Zero-Persistência (Apenas RAM)</span></td>
|
||
<td class="cross">
|
||
✘ <span>Google Analytics e Cookies</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>Compatibilidade de Sites</span></strong>
|
||
<span class="feat-desc"><span>Websites suportados e compatibilidade do leitor.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>Quase qualquer vídeo HTML5</span><a href="#footnote-3" class="source-link" title="Technical Compatibility Details"><sup>[3]</sup></a></td>
|
||
<td class="cross">
|
||
✘ <span>Apenas sites suportados</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>Localização / Tradução</span></strong>
|
||
<span class="feat-desc"><span>Idiomas de interface disponíveis e suporte de tradução.</span></span>
|
||
</td>
|
||
<td class="check highlight">✔ <span>13 Idiomas (e a crescer)</span></td>
|
||
<td class="cross">
|
||
✘ <span>Apenas Inglês</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>Estado da comparação: Maio de 2026.</span>
|
||
</p>
|
||
<p>
|
||
<sup>[1]</sup>
|
||
<span>Preços oficiais do Teleparty Premium e detalhes das redes suportadas:</span>
|
||
<a href="https://www.teleparty.com/premium" target="_blank" rel="noopener noreferrer">teleparty.com/premium</a>
|
||
</p>
|
||
<p>
|
||
<sup>[2]</sup>
|
||
<span>Políticas de privacidade do Teleparty e recolha de dados de rastreio:</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>Funciona em websites que permitam injeções de scripts nas tags de vídeo HTML5 padrão. Websites com Políticas de Segurança de Conteúdo (CSP) muito rígidas, proteção de direitos de cópia DRM ou wrappers de leitores fortemente ofuscados (como shadow DOMs complexos) podem restringir o controlo ou injeção.</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>Como Começar</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>Instalar Extensão</span></h3>
|
||
<p>Adicione o KoalaSync ao seu navegador a partir da Chrome Web Store, Firefox Add-ons ou transfira o ZIP de programador mais recente do GitHub.</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>Sincronizador de vídeo focado na privacidade</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>Descarregar para Chrome</span>
|
||
</div>
|
||
<div class="illus-store-btn firefox">
|
||
<img src="../assets/firefox.svg" alt="Firefox Logo" width="12" height="12">
|
||
<span>Descarregar para Firefox</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>Extensão Ativa</span>
|
||
</div>
|
||
</div>
|
||
<div class="popup-quick-start">
|
||
<span>Pronto para verem juntos!</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>Criar uma Sala</span></h3>
|
||
<p>Abra o popup da extensão e clique em '+ Criar Nova Sala'. O KoalaSync gera automaticamente um ID de Sala e Palavra-passe seguros, entra nela e copia o link de convite para a área de transferência.</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>Sala</span>
|
||
</div>
|
||
<div class="illus-popup-tab">
|
||
<span>Sincronização</span>
|
||
</div>
|
||
<div class="illus-popup-tab">
|
||
<span>Definições</span>
|
||
</div>
|
||
</div>
|
||
<div class="illus-popup-body">
|
||
<div class="illus-popup-btn action-create-room">
|
||
<span>+ Criar Nova Sala</span>
|
||
<div class="illus-btn-shine"></div>
|
||
</div>
|
||
|
||
<div class="illus-collapsed-details">
|
||
<span class="details-arrow">▶</span>
|
||
<span>Ligação Manual / Avançado</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>Link de convite copiado!</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>Partilhar e Sincronizar</span></h3>
|
||
<p>Envie o link de convite para os seus amigos. Assim que eles entrarem, selecione o seu separador do vídeo e desfrute da reprodução sincronizada.</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>EM SINCRONIA</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>Para Auto-Hospedadores</span>
|
||
</h2>
|
||
<p style="text-align: center; color: var(--text-muted); margin-bottom: 2rem; max-width: 650px; margin-left: auto; margin-right: auto;">
|
||
<span>Não confia no nosso servidor? Mantenha a total soberania dos seus dados. Implemente o seu próprio servidor de retransmissão privado em minutos.</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="Um coala fofo sentado num portátil a implementar um contentor Docker para auto-hospedagem" 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>Copiar Código</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>Ver todas as tags de imagens no GitHub Packages</span> →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="pane-caddy-simple" class="terminal-pane">
|
||
<pre><code><span class="t-key">sync.koalastuff.net</span> {
|
||
<span class="t-key">root</span> <span class="t-val">*</span> <span class="t-str">/var/www/koalasync/website/www</span>
|
||
<span class="t-key">encode</span> <span class="t-val">zstd gzip</span>
|
||
|
||
<span class="t-comment"># Clean URLs support (no .html required)</span>
|
||
<span class="t-key">try_files</span> <span class="t-val">{path} {path}.html {path}/</span>
|
||
<span class="t-key">file_server</span>
|
||
}
|
||
|
||
<span class="t-key">syncserver.koalastuff.net</span> {
|
||
<span class="t-key">reverse_proxy</span> <span class="t-val">localhost:3000</span>
|
||
}</code></pre>
|
||
</div>
|
||
|
||
<div id="pane-caddy-advanced" class="terminal-pane">
|
||
<pre><code><span class="t-key">(security_headers)</span> {
|
||
<span class="t-key">header</span> {
|
||
<span class="t-comment"># Enable HTTP Strict Transport Security (HSTS)</span>
|
||
Strict-Transport-Security <span class="t-str">"max-age=31536000; includeSubDomains; preload"</span>
|
||
<span class="t-comment"># Prevent clickjacking attacks (Sameorigin)</span>
|
||
X-Frame-Options <span class="t-str">"SAMEORIGIN"</span>
|
||
<span class="t-comment"># Prevent MIME-sniffing</span>
|
||
X-Content-Type-Options <span class="t-str">"nosniff"</span>
|
||
<span class="t-comment"># Enable browser XSS protection</span>
|
||
X-XSS-Protection <span class="t-str">"1; mode=block"</span>
|
||
<span class="t-comment"># Control referrer information</span>
|
||
Referrer-Policy <span class="t-str">"strict-origin-when-cross-origin"</span>
|
||
<span class="t-comment"># Hide Caddy server stamp signature</span>
|
||
<span class="t-key">-Server</span>
|
||
}
|
||
}
|
||
|
||
<span class="t-key">sync.koalastuff.net</span> {
|
||
<span class="t-key">encode</span> <span class="t-val">zstd gzip</span>
|
||
<span class="t-key">root</span> <span class="t-val">*</span> <span class="t-str">/var/www/koalasync/website/www</span>
|
||
|
||
<span class="t-comment"># Clean URLs: Resolves paths without .html in the URL</span>
|
||
<span class="t-key">try_files</span> <span class="t-val">{path} {path}.html {path}/</span>
|
||
<span class="t-key">file_server</span>
|
||
|
||
<span class="t-comment"># Static Caching for high performance</span>
|
||
<span class="t-key">@static</span> {
|
||
<span class="t-key">file</span>
|
||
<span class="t-key">path</span> <span class="t-str">*.ico *.css *.js *.png *.svg *.webp *.avif</span>
|
||
}
|
||
<span class="t-key">header</span> <span class="t-val">@static</span> Cache-Control <span class="t-str">"public, max-age=31536000, must-revalidate"</span>
|
||
|
||
<span class="t-comment"># Hardened Security & Permission Policies</span>
|
||
<span class="t-key">import</span> <span class="t-val">security_headers</span>
|
||
<span class="t-key">header</span> {
|
||
Content-Security-Policy <span class="t-str">"default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';"</span>
|
||
Permissions-Policy <span class="t-str">"camera=(), microphone=(), geolocation=(), payment=(), usb=()"</span>
|
||
}
|
||
}
|
||
|
||
<span class="t-key">syncserver.koalastuff.net</span> {
|
||
<span class="t-key">import</span> <span class="t-val">security_headers</span>
|
||
<span class="t-key">encode</span> <span class="t-val">zstd gzip</span>
|
||
<span class="t-key">reverse_proxy</span> <span class="t-val">KoalaSync:3000</span>
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>Perguntas Frequentes</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>Tudo o que precisa de saber sobre ver vídeos juntos numa sincronização perfeita.</span>
|
||
</p>
|
||
<div class="faq-grid">
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>Posso ver Netflix, Emby ou Jellyfin juntos em sincronia com os amigos?</span></summary>
|
||
<p><span>Sim! O KoalaSync funciona no Netflix, YouTube, Twitch e em qualquer website com um leitor de vídeo HTML5 — incluindo Emby, Jellyfin e servidores de media auto-hospedados. Instale a extensão, crie uma sala, partilhe o link de convite e todos assistem em perfeita sincronia.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>O KoalaSync é uma alternativa gratuita ao Teleparty?</span></summary>
|
||
<p><span>100% gratuito e de código aberto sob a Licença MIT. Sem planos premium, sem funcionalidades bloqueadas, sem anúncios — tudo incluído. Ao contrário do Teleparty, o servidor do KoalaSync corre apenas em RAM, sem qualquer recolha de dados ou necessidade de contas de utilizador.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>O KoalaSync funciona com Emby, Jellyfin e servidores de media auto-hospedados?</span></summary>
|
||
<p><span>Sim. O KoalaSync deteta qualquer elemento de vídeo HTML5 padrão, o que significa que funciona perfeitamente com Emby, Jellyfin, Plex e qualquer configuração de streaming personalizada. Também pode auto-hospedar o servidor de retransmissão do KoalaSync via Docker para total soberania dos dados.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>Que navegadores e plataformas suportam o KoalaSync?</span></summary>
|
||
<p><span>Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Brave e todos os navegadores baseados em Chromium. Instale diretamente da Chrome Web Store ou Firefox Add-ons — sem necessidade de configuração manual.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>Todos os meus amigos precisam de ter a extensão instalada?</span></summary>
|
||
<p><span>Sim, cada participante precisa de ter o KoalaSync instalado — mas não há registo ou criação de conta. Basta clicar no link de convite, instalar a extensão se ainda não o fez, e entrará na sala automaticamente em segundos.</span></p>
|
||
</details>
|
||
<details class="faq-item" data-reveal>
|
||
<summary><span>Os meus dados estão seguros? E se eu não confiar no servidor oficial?</span></summary>
|
||
<p><span>Totalmente seguro. O servidor de retransmissão do KoalaSync corre apenas em RAM — todos os dados da sessão são permanentemente eliminados no momento em que sai da sala. Sem base de dados, sem registo, sem análises, sem contas. E se preferir o controlo total: pode auto-hospedar o seu próprio servidor de retransmissão privado via Docker em minutos. Toda a base de código é aberta e auditável no GitHub.</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>Não está convencido? Veja por si mesmo.</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>O KoalaSync é 100% de código aberto, sem anúncios e sem rastreio. Audite a nossa base de código no GitHub ou instale a extensão do navegador diretamente.</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>Adicionar ao Chrome</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>Adicionar ao Firefox</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="Um coala fofo a segurar numa página de repositório GitHub ao lado da mascote do GitHub Octocat" 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. Código aberto sob a Licença MIT.</p>
|
||
<p style="font-size: 0.8rem; margin-top: 0.5rem;">Nenhum dado é guardado nos nossos servidores. Transmissão baseada apenas em 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="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Aviso Legal</span></a>
|
||
<a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Política de Privacidade</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>
|