diff --git a/package-lock.json b/package-lock.json index 10cce7b..dd0655a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,14 @@ { "name": "koalasync", - "version": "2.5.1", + "version": "2.5.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "koalasync", - "version": "2.5.1", + "version": "2.5.3", "devDependencies": { + "@playwright/test": "^1.61.1", "@vitest/coverage-v8": "^4.1.9", "archiver": "^7.0.1", "esbuild": "^0.28.1", @@ -1342,6 +1343,22 @@ "node": ">=14" } }, + "node_modules/@playwright/test": { + "version": "1.61.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz", + "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.61.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@rolldown/binding-android-arm64": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.4.tgz", @@ -1669,7 +1686,6 @@ "integrity": "sha512-G9/lgqibheLVBDRuya45EbsEXTYcWoSG+TLg7i2axuzx0Eq62eXn+aWXyaVdV5vKvFSWd6ywcX8hA7la9Pvu8g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@bcoe/v8-coverage": "^1.0.2", "@vitest/utils": "4.1.9", @@ -1827,7 +1843,6 @@ "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1983,7 +1998,6 @@ "integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "peerDependencies": { "bare-abort-controller": "*" }, @@ -2476,7 +2490,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -2531,7 +2544,6 @@ "integrity": "sha512-loXy6bWOoP3EP6JA7jo6p5jMpBJmHmsNZM5SFRHLdh1MGOPurMnNBj4ZlAbaqUAaQWbCr7jHV4P7gzAyryZWkQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", @@ -3790,7 +3802,6 @@ "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -3798,6 +3809,53 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/playwright": { + "version": "1.61.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz", + "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.61.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.61.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz", + "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/postcss": { "version": "8.5.16", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz", @@ -4390,7 +4448,6 @@ "integrity": "sha512-6YYPbRXTxx6bRXmOn7XdnQAy5DQNHhDgtjhDHI13oe4pY93kkcdGJWxpGwOm++/Wh0QpQhDrpIoVMrmrsI5AGQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", @@ -4469,7 +4526,6 @@ "integrity": "sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/expect": "4.1.9", "@vitest/mocker": "4.1.9", diff --git a/package.json b/package.json index 2ba94e8..810f56d 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "verify": "node scripts/verify-release.mjs" }, "devDependencies": { + "@playwright/test": "^1.61.1", "@vitest/coverage-v8": "^4.1.9", "archiver": "^7.0.1", "esbuild": "^0.28.1", diff --git a/website/app.js b/website/app.js index 0ff0252..6883cae 100644 --- a/website/app.js +++ b/website/app.js @@ -478,10 +478,11 @@ document.addEventListener('DOMContentLoaded', () => { } // --- Hero Live Demo (two synced video tabs + extension popup) --- - // Desktop only: on mobile the scene falls back to the classic static popup. + // The same scene is used inline on desktop and mounted into a modal on + // mobile, so the demo behavior stays in one place. const initHeroDemo = () => { const scene = document.getElementById('hero-demo'); - if (!scene || !window.matchMedia('(min-width: 769px)').matches) return; + if (!scene) return; const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; @@ -715,7 +716,10 @@ document.addEventListener('DOMContentLoaded', () => { } }); - chip.addEventListener('click', pulse); + chip.addEventListener('click', () => { + pulse('a'); + pulse('b'); + }); // --- Story state (room creation -> invite -> connected) --- const setRoomJoined = (joined) => { @@ -913,6 +917,9 @@ document.addEventListener('DOMContentLoaded', () => { finishDemo(); }; + scene.__koalaStartDemo = reduceMotion ? finishDemo : runDemo; + scene.__koalaFinishDemo = finishDemo; + if ('IntersectionObserver' in window && !reduceMotion) { const demoObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { @@ -930,6 +937,68 @@ document.addEventListener('DOMContentLoaded', () => { initHeroDemo(); + const initMobileDemoModal = () => { + const openBtn = document.getElementById('mobile-demo-open'); + const modal = document.getElementById('mobile-demo-modal'); + const stage = document.getElementById('mobile-demo-stage'); + const closeBtn = document.getElementById('mobile-demo-close'); + const wrapper = document.querySelector('.hero-grid > .hero-mockup-wrapper'); + if (!openBtn || !modal || !stage || !closeBtn || !wrapper) return; + + const originalParent = wrapper.parentNode; + const originalNext = wrapper.nextSibling; + let previousFocus = null; + + const openModal = () => { + previousFocus = document.activeElement && typeof document.activeElement.focus === 'function' + ? document.activeElement + : null; + modal.hidden = false; + document.body.classList.add('mobile-demo-open'); + openBtn.setAttribute('aria-expanded', 'true'); + stage.appendChild(wrapper); + requestAnimationFrame(() => { + closeBtn.focus({ preventScroll: true }); + const scene = wrapper.querySelector('#hero-demo'); + if (scene && typeof scene.__koalaStartDemo === 'function') { + scene.__koalaStartDemo(); + } + }); + }; + + const closeModal = () => { + if (modal.hidden) return; + modal.hidden = true; + document.body.classList.remove('mobile-demo-open'); + openBtn.setAttribute('aria-expanded', 'false'); + if (originalNext && originalNext.parentNode === originalParent) { + originalParent.insertBefore(wrapper, originalNext); + } else { + originalParent.appendChild(wrapper); + } + if (previousFocus && typeof previousFocus.focus === 'function') { + previousFocus.focus({ preventScroll: true }); + } + }; + + openBtn.setAttribute('aria-expanded', 'false'); + openBtn.addEventListener('click', openModal); + closeBtn.addEventListener('click', closeModal); + modal.querySelectorAll('[data-mobile-demo-close]').forEach(el => { + el.addEventListener('click', closeModal); + }); + document.addEventListener('keydown', (e) => { + if (modal.hidden) return; + if (e.key === 'Escape') closeModal(); + if (e.key === 'Tab') { + e.preventDefault(); + closeBtn.focus({ preventScroll: true }); + } + }); + }; + + initMobileDemoModal(); + // Terminal Tab Switcher const termTabBtns = document.querySelectorAll('.terminal-tab-btn'); const termPanes = document.querySelectorAll('.terminal-pane'); diff --git a/website/assets/disneyplus.svg b/website/assets/disneyplus.svg new file mode 100644 index 0000000..7b37a8d --- /dev/null +++ b/website/assets/disneyplus.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/locales/de.json b/website/locales/de.json index 34f285a..2cddd5a 100644 --- a/website/locales/de.json +++ b/website/locales/de.json @@ -6,12 +6,12 @@ "LANG_TOGGLE_TEXT": "EN", "OG_LOCALE": "de_DE", "META_TITLE": "KoalaSync | Watch Party für Netflix, YouTube & jedes Video", - "META_DESCRIPTION": "Watch Party auf Netflix, YouTube, Twitch & jedem HTML5-Video. Kostenlose Open-Source-Erweiterung für Chrome & Firefox. Kein Konto, kein Tracking, keine Werbung.", - "SCHEMA_APP_DESC": "Watch Party auf Netflix, YouTube, Twitch & jedem HTML5-Video. Kostenlose Open-Source-Erweiterung für Chrome & Firefox. Kein Konto, kein Tracking, keine Werbung.", - "OG_TITLE": "KoalaSync | Netflix, Emby, Jellyfin & fast jedes Video mit Freunden synchronisieren", - "OG_DESCRIPTION": "Schaue Netflix, Emby, Jellyfin, YouTube, Twitch und fast jedes HTML5-Video perfekt synchronisiert. Quelloffene, datenschutzfreundliche Browser-Erweiterung für Chrome und Firefox.", - "TWITTER_TITLE": "KoalaSync | Netflix, Emby, Jellyfin & fast jedes Video mit Freunden synchronisieren – Browser-Erweiterung", - "TWITTER_DESCRIPTION": "Schaue Netflix, Emby, Jellyfin, YouTube, Twitch und fast jedes HTML5-Video perfekt synchronisiert mit Freunden. Datenschutzfreundliche Browser-Erweiterung für Chrome und Firefox.", + "META_DESCRIPTION": "Watch Party auf Netflix, YouTube, Twitch & HTML5-Videos. Open-Source-Erweiterung für Chrome & Firefox. Kein Konto, kein Tracking, keine Werbung.", + "SCHEMA_APP_DESC": "Watch Party auf Netflix, YouTube, Twitch & HTML5-Videos. Open-Source-Erweiterung für Chrome & Firefox. Kein Konto, kein Tracking, keine Werbung.", + "OG_TITLE": "KoalaSync | Watch Party für Netflix, Emby, Jellyfin & fast jedes Video", + "OG_DESCRIPTION": "Starte eine Watch Party auf Netflix, Emby, Jellyfin, YouTube, Twitch und fast jedem HTML5-Video. Open Source, datenschutzfreundlich und ohne Konto.", + "TWITTER_TITLE": "KoalaSync | Watch Party für Netflix, Emby, Jellyfin & fast jedes Video – Browser-Erweiterung", + "TWITTER_DESCRIPTION": "Starte eine Watch Party auf Netflix, Emby, Jellyfin, YouTube, Twitch und fast jedem HTML5-Video. Open Source, datenschutzfreundlich und ohne Konto.", "NAV_FEATURES": "Funktionen", "NAV_HOW_IT_WORKS": "So funktioniert's", "HERO_TITLE": "Mach jedes Video zur Watch Party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "Raum beigetreten", "DEMO_TAB_SELECTED": "Tab ausgewählt", "DEMO_SELECT_PLACEHOLDER": "Video-Tab wählen…", + "MOBILE_DEMO_CTA": "So funktioniert's ansehen", + "MOBILE_DEMO_TITLE": "KoalaSync Live-Demo", + "MOBILE_DEMO_CLOSE": "Demo schließen", "ADD_TO_CHROME": "Zu Chrome hinzufügen", "ADD_TO_FIREFOX": "Zu Firefox hinzufügen", "COMPAT_HEADING": "Funktioniert auf deinen Lieblingsplattformen", diff --git a/website/locales/en.json b/website/locales/en.json index 8cb4066..9d94e9a 100644 --- a/website/locales/en.json +++ b/website/locales/en.json @@ -6,12 +6,12 @@ "LANG_TOGGLE_TEXT": "DE", "OG_LOCALE": "en_US", "META_TITLE": "KoalaSync | Watch Party for Netflix, YouTube & Any Video", - "META_DESCRIPTION": "Host a watch party on Netflix, YouTube, Twitch & any HTML5 video. Free, open-source extension for Chrome & Firefox. No account, no tracking, no ads.", - "SCHEMA_APP_DESC": "Host a watch party on Netflix, YouTube, Twitch & any HTML5 video. Free, open-source extension for Chrome & Firefox. No account, no tracking, no ads.", - "OG_TITLE": "KoalaSync | Sync Netflix, Emby, Jellyfin & Almost Any Video with Friends", - "OG_DESCRIPTION": "Watch Netflix, Emby, Jellyfin, YouTube, Twitch and almost any HTML5 video in perfect sync. Privacy-first, open-source browser extension for Chrome & Firefox.", - "TWITTER_TITLE": "KoalaSync | Sync Netflix, Emby, Jellyfin & Almost Any Video with Friends – Browser Extension", - "TWITTER_DESCRIPTION": "Watch Netflix, Emby, Jellyfin, YouTube, Twitch and almost any HTML5 video in perfect sync with friends. Privacy-first, open-source browser extension for Chrome and Firefox.", + "META_DESCRIPTION": "Host a watch party on Netflix, YouTube, Twitch & HTML5 video. Free open-source extension for Chrome & Firefox. No account, tracking, or ads.", + "SCHEMA_APP_DESC": "Host a watch party on Netflix, YouTube, Twitch & HTML5 video. Free open-source extension for Chrome & Firefox. No account, tracking, or ads.", + "OG_TITLE": "KoalaSync | Watch Party for Netflix, Emby, Jellyfin & Almost Any Video", + "OG_DESCRIPTION": "Host a watch party on Netflix, Emby, Jellyfin, YouTube, Twitch and almost any HTML5 video. Open source, privacy-first, and account-free.", + "TWITTER_TITLE": "KoalaSync | Watch Party for Netflix, Emby, Jellyfin & Almost Any Video – Browser Extension", + "TWITTER_DESCRIPTION": "Host a watch party on Netflix, Emby, Jellyfin, YouTube, Twitch and almost any HTML5 video. Open source, privacy-first, and account-free.", "NAV_FEATURES": "Features", "NAV_HOW_IT_WORKS": "How it works", "HERO_TITLE": "Turn any video into a watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "Room joined", "DEMO_TAB_SELECTED": "Tab selected", "DEMO_SELECT_PLACEHOLDER": "Choose a video tab…", + "MOBILE_DEMO_CTA": "Watch how it works", + "MOBILE_DEMO_TITLE": "KoalaSync Live Demo", + "MOBILE_DEMO_CLOSE": "Close demo", "ADD_TO_CHROME": "Add to Chrome", "ADD_TO_FIREFOX": "Add to Firefox", "COMPAT_HEADING": "Works on your favorite platforms", diff --git a/website/locales/es.json b/website/locales/es.json index be27168..71a2181 100644 --- a/website/locales/es.json +++ b/website/locales/es.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Watch party para Netflix, YouTube y más", "META_DESCRIPTION": "Watch party en Netflix, YouTube, Twitch y cualquier vídeo HTML5. Extensión gratuita y open source para Chrome y Firefox. Sin cuenta, sin rastreo, sin anuncios.", "SCHEMA_APP_DESC": "Watch party en Netflix, YouTube, Twitch y cualquier vídeo HTML5. Extensión gratuita y open source para Chrome y Firefox. Sin cuenta, sin rastreo, sin anuncios.", - "OG_TITLE": "KoalaSync | Sincroniza Netflix, Emby, Jellyfin y casi cualquier video con amigos", - "OG_DESCRIPTION": "Mira Netflix, Emby, Jellyfin, YouTube, Twitch y casi cualquier video HTML5 en perfecta sincronización. Extensión de navegador de código abierto y respetuosa con la privacidad para Chrome y Firefox.", - "TWITTER_TITLE": "KoalaSync | Sincroniza Netflix, Emby, Jellyfin y casi cualquier video con amigos – Extensión de navegador", - "TWITTER_DESCRIPTION": "Mira Netflix, Emby, Jellyfin, YouTube, Twitch y casi cualquier video HTML5 en perfecta sincronización con amigos. Extensión de navegador de código abierto y respetuosa con la privacidad para Chrome y Firefox.", + "OG_TITLE": "KoalaSync | Watch party para Netflix, Emby, Jellyfin y casi cualquier vídeo", + "OG_DESCRIPTION": "Organiza una watch party en Netflix, Emby, Jellyfin, YouTube, Twitch y casi cualquier vídeo HTML5. Open source, privada y sin cuenta.", + "TWITTER_TITLE": "KoalaSync | Watch party para Netflix, Emby, Jellyfin y casi cualquier vídeo – Extensión", + "TWITTER_DESCRIPTION": "Organiza una watch party en Netflix, Emby, Jellyfin, YouTube, Twitch y casi cualquier vídeo HTML5. Open source, privada y sin cuenta.", "NAV_FEATURES": "Características", "NAV_HOW_IT_WORKS": "Cómo funciona", "HERO_TITLE": "Convierte cualquier vídeo en una watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "Conectado a la sala", "DEMO_TAB_SELECTED": "Pestaña seleccionada", "DEMO_SELECT_PLACEHOLDER": "Elige una pestaña de video…", + "MOBILE_DEMO_CTA": "Ver cómo funciona", + "MOBILE_DEMO_TITLE": "Demo en vivo de KoalaSync", + "MOBILE_DEMO_CLOSE": "Cerrar demo", "ADD_TO_CHROME": "Añadir a Chrome", "ADD_TO_FIREFOX": "Añadir a Firefox", "COMPAT_HEADING": "Funciona en tus plataformas favoritas", diff --git a/website/locales/fr.json b/website/locales/fr.json index ef737c9..a5d3fa9 100644 --- a/website/locales/fr.json +++ b/website/locales/fr.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Watch party pour Netflix, YouTube et plus", "META_DESCRIPTION": "Organisez une watch party sur Netflix, YouTube, Twitch et toute vidéo HTML5. Extension libre et gratuite pour Chrome et Firefox. Sans compte, sans pistage, sans pub.", "SCHEMA_APP_DESC": "Organisez une watch party sur Netflix, YouTube, Twitch et toute vidéo HTML5. Extension libre et gratuite pour Chrome et Firefox. Sans compte, sans pistage, sans pub.", - "OG_TITLE": "KoalaSync | Synchronisez Netflix, Emby, Jellyfin et presque toutes les vidéos avec vos amis", - "OG_DESCRIPTION": "Regardez Netflix, Emby, Jellyfin, YouTube, Twitch et presque n'importe quelle vidéo HTML5 en parfaite synchronisation. Extension de navigateur open-source et respectueuse de la vie privée pour Chrome et Firefox.", - "TWITTER_TITLE": "KoalaSync | Synchronisez Netflix, Emby, Jellyfin et presque toutes les vidéos avec vos amis – Extension de navigateur", - "TWITTER_DESCRIPTION": "Regardez Netflix, Emby, Jellyfin, YouTube, Twitch et presque n'importe quelle vidéo HTML5 en parfaite synchronisation avec vos amis. Extension de navigateur open-source et respectueuse de la vie privée pour Chrome et Firefox.", + "OG_TITLE": "KoalaSync | Watch party pour Netflix, Emby, Jellyfin et presque toute vidéo", + "OG_DESCRIPTION": "Organisez une watch party sur Netflix, Emby, Jellyfin, YouTube, Twitch et presque toute vidéo HTML5. Open source, privé et sans compte.", + "TWITTER_TITLE": "KoalaSync | Watch party pour Netflix, Emby, Jellyfin et presque toute vidéo – Extension", + "TWITTER_DESCRIPTION": "Organisez une watch party sur Netflix, Emby, Jellyfin, YouTube, Twitch et presque toute vidéo HTML5. Open source, privé et sans compte.", "NAV_FEATURES": "Fonctionnalités", "NAV_HOW_IT_WORKS": "Comment ça marche", "HERO_TITLE": "Transformez n'importe quelle vidéo en watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "Salon rejoint", "DEMO_TAB_SELECTED": "Onglet sélectionné", "DEMO_SELECT_PLACEHOLDER": "Choisir un onglet vidéo…", + "MOBILE_DEMO_CTA": "Voir comment ça marche", + "MOBILE_DEMO_TITLE": "Démo live KoalaSync", + "MOBILE_DEMO_CLOSE": "Fermer la démo", "ADD_TO_CHROME": "Ajouter à Chrome", "ADD_TO_FIREFOX": "Ajouter à Firefox", "COMPAT_HEADING": "Fonctionne sur vos plateformes préférées", diff --git a/website/locales/it.json b/website/locales/it.json index 929f8dc..b9aff81 100644 --- a/website/locales/it.json +++ b/website/locales/it.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Watch party per Netflix, YouTube e ogni video", "META_DESCRIPTION": "Watch party su Netflix, YouTube, Twitch e qualsiasi video HTML5. Estensione gratuita e open source per Chrome e Firefox. Senza account, tracking né pubblicità.", "SCHEMA_APP_DESC": "Watch party su Netflix, YouTube, Twitch e qualsiasi video HTML5. Estensione gratuita e open source per Chrome e Firefox. Senza account, tracking né pubblicità.", - "OG_TITLE": "KoalaSync | Sincronizza Netflix, Emby, Jellyfin e video web con i tuoi amici", - "OG_DESCRIPTION": "Guarda video in perfetta sincronia con i tuoi amici. Estensione open source per Chrome e Firefox incentrata sulla privacy.", - "TWITTER_TITLE": "KoalaSync | Sincronizza video in streaming con i tuoi amici", - "TWITTER_DESCRIPTION": "Guarda video insieme ai tuoi amici in perfetta sincronia. Open source e rispettoso della privacy.", + "OG_TITLE": "KoalaSync | Watch party per Netflix, Emby, Jellyfin e quasi ogni video", + "OG_DESCRIPTION": "Avvia una watch party su Netflix, Emby, Jellyfin, YouTube, Twitch e quasi ogni video HTML5. Open source, privata e senza account.", + "TWITTER_TITLE": "KoalaSync | Watch party per Netflix, Emby, Jellyfin e quasi ogni video – Estensione", + "TWITTER_DESCRIPTION": "Avvia una watch party su Netflix, Emby, Jellyfin, YouTube, Twitch e quasi ogni video HTML5. Open source, privata e senza account.", "NAV_FEATURES": "Funzionalità", "NAV_HOW_IT_WORKS": "Come Funziona", "HERO_TITLE": "Trasforma qualsiasi video in una watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "Entrato nella stanza", "DEMO_TAB_SELECTED": "Scheda selezionata", "DEMO_SELECT_PLACEHOLDER": "Scegli una scheda video…", + "MOBILE_DEMO_CTA": "Guarda come funziona", + "MOBILE_DEMO_TITLE": "Demo live di KoalaSync", + "MOBILE_DEMO_CLOSE": "Chiudi demo", "ADD_TO_CHROME": "Aggiungi a Chrome", "ADD_TO_FIREFOX": "Aggiungi a Firefox", "COMPAT_HEADING": "Compatibile con le tue piattaforme preferite", diff --git a/website/locales/ja.json b/website/locales/ja.json index 9d6c40e..e6b17f1 100644 --- a/website/locales/ja.json +++ b/website/locales/ja.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Netflix・YouTube対応ウォッチパーティー拡張機能", "META_DESCRIPTION": "Netflix、YouTube、TwitchなどあらゆるHTML5動画でウォッチパーティー。Chrome・Firefox向けの無料オープンソース拡張機能。アカウント不要、トラッキングなし、広告なし。", "SCHEMA_APP_DESC": "Netflix、YouTube、TwitchなどあらゆるHTML5動画でウォッチパーティー。Chrome・Firefox向けの無料オープンソース拡張機能。アカウント不要、トラッキングなし、広告なし。", - "OG_TITLE": "KoalaSync | Netflix、Emby、Jellyfin、ほぼすべての動画を友達と同期", - "OG_DESCRIPTION": "Netflix、Emby、Jellyfin、YouTube、Twitch、ほぼすべてのHTML5動画を完全に同期して視聴。ChromeおよびFirefox用のプライバシー優先のオープンソースブラウザ拡張機能。", - "TWITTER_TITLE": "KoalaSync | Netflix、Emby、Jellyfin、ほぼすべての動画を友達と同期 – ブラウザ拡張機能", - "TWITTER_DESCRIPTION": "Netflix、Emby、Jellyfin、YouTube、Twitch、ほぼすべてのHTML5動画を友達と完全に同期して視聴。ChromeおよびFirefox用のプライバシー優先のオープンソースブラウザ拡張機能。", + "OG_TITLE": "KoalaSync | Netflix、Emby、Jellyfin、ほぼすべての動画でウォッチパーティー", + "OG_DESCRIPTION": "Netflix、Emby、Jellyfin、YouTube、Twitch、ほぼすべてのHTML5動画でウォッチパーティーを開催。オープンソース、プライバシー重視、アカウント不要。", + "TWITTER_TITLE": "KoalaSync | Netflix、Emby、Jellyfin、ほぼすべての動画でウォッチパーティー – 拡張機能", + "TWITTER_DESCRIPTION": "Netflix、Emby、Jellyfin、YouTube、Twitch、ほぼすべてのHTML5動画でウォッチパーティーを開催。オープンソース、プライバシー重視、アカウント不要。", "NAV_FEATURES": "機能", "NAV_HOW_IT_WORKS": "仕組み", "HERO_TITLE": "どんな動画もウォッチパーティーに。", @@ -24,6 +24,9 @@ "DEMO_JOINED": "ルームに参加", "DEMO_TAB_SELECTED": "タブを選択済み", "DEMO_SELECT_PLACEHOLDER": "動画タブを選ぶ…", + "MOBILE_DEMO_CTA": "仕組みを見る", + "MOBILE_DEMO_TITLE": "KoalaSync ライブデモ", + "MOBILE_DEMO_CLOSE": "デモを閉じる", "ADD_TO_CHROME": "Chromeに追加", "ADD_TO_FIREFOX": "Firefoxに追加", "COMPAT_HEADING": "お気に入りのプラットフォームで動作", diff --git a/website/locales/ko.json b/website/locales/ko.json index 6dbe223..2deec72 100644 --- a/website/locales/ko.json +++ b/website/locales/ko.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | 넷플릭스·유튜브 워치 파티 확장 프로그램", "META_DESCRIPTION": "넷플릭스, 유튜브, 트위치 등 모든 HTML5 영상에서 워치 파티. 크롬·파이어폭스용 무료 오픈소스 확장 프로그램. 계정 없음, 추적 없음, 광고 없음.", "SCHEMA_APP_DESC": "넷플릭스, 유튜브, 트위치 등 모든 HTML5 영상에서 워치 파티. 크롬·파이어폭스용 무료 오픈소스 확장 프로그램. 계정 없음, 추적 없음, 광고 없음.", - "OG_TITLE": "KoalaSync | Netflix, Emby, Jellyfin 및 거의 모든 비디오를 친구와 동기화 시청", - "OG_DESCRIPTION": "Netflix, Emby, Jellyfin, YouTube, Twitch 및 거의 모든 HTML5 비디오를 완벽하게 동기화하여 시청하세요. Chrome 및 Firefox용 개인정보 보호 중심 오픈 소스 브라우저 확장 프로그램.", - "TWITTER_TITLE": "KoalaSync | Netflix, Emby, Jellyfin 및 거의 모든 비디오를 친구와 동기화 시청 – 브라우저 확장 프로그램", - "TWITTER_DESCRIPTION": "Netflix, Emby, Jellyfin, YouTube, Twitch 및 거의 모든 HTML5 비디오를 친구들과 완벽하게 동기화하여 시청하세요. Chrome 및 Firefox용 개인정보 보호 중심 오픈 소스 브라우저 확장 프로그램.", + "OG_TITLE": "KoalaSync | Netflix, Emby, Jellyfin 및 거의 모든 영상 워치 파티", + "OG_DESCRIPTION": "Netflix, Emby, Jellyfin, YouTube, Twitch 및 거의 모든 HTML5 영상에서 워치 파티를 열어보세요. 오픈소스, 개인정보 보호 중심, 계정 불필요.", + "TWITTER_TITLE": "KoalaSync | Netflix, Emby, Jellyfin 및 거의 모든 영상 워치 파티 – 브라우저 확장 프로그램", + "TWITTER_DESCRIPTION": "Netflix, Emby, Jellyfin, YouTube, Twitch 및 거의 모든 HTML5 영상에서 워치 파티를 열어보세요. 오픈소스, 개인정보 보호 중심, 계정 불필요.", "NAV_FEATURES": "특징", "NAV_HOW_IT_WORKS": "작동 방식", "HERO_TITLE": "어떤 영상이든 워치 파티로.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "방 참여됨", "DEMO_TAB_SELECTED": "탭 선택됨", "DEMO_SELECT_PLACEHOLDER": "동영상 탭 선택…", + "MOBILE_DEMO_CTA": "작동 방식 보기", + "MOBILE_DEMO_TITLE": "KoalaSync 라이브 데모", + "MOBILE_DEMO_CLOSE": "데모 닫기", "ADD_TO_CHROME": "Chrome에 추가", "ADD_TO_FIREFOX": "Firefox에 추가", "COMPAT_HEADING": "가장 좋아하는 플랫폼에서 작동합니다", diff --git a/website/locales/nl.json b/website/locales/nl.json index 4610cc0..f8f7f33 100644 --- a/website/locales/nl.json +++ b/website/locales/nl.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Watch party voor Netflix, YouTube & elke video", "META_DESCRIPTION": "Watch party op Netflix, YouTube, Twitch en elke HTML5-video. Gratis open-source extensie voor Chrome en Firefox. Geen account, geen tracking, geen reclame.", "SCHEMA_APP_DESC": "Watch party op Netflix, YouTube, Twitch en elke HTML5-video. Gratis open-source extensie voor Chrome en Firefox. Geen account, geen tracking, geen reclame.", - "OG_TITLE": "KoalaSync | Synchroniseer Netflix, Emby, Jellyfin & bijna elke video met vrienden", - "OG_DESCRIPTION": "Bekijk Netflix, Emby, Jellyfin, YouTube, Twitch en bijna elke HTML5-video in perfecte synchronisatie. Privacy-first, open-source browserextensie voor Chrome & Firefox.", - "TWITTER_TITLE": "KoalaSync | Synchroniseer Netflix, Emby, Jellyfin & bijna elke video met vrienden – Browserextensie", - "TWITTER_DESCRIPTION": "Bekijk Netflix, Emby, Jellyfin, YouTube, Twitch en bijna elke HTML5-video in perfecte synchronisatie met vrienden. Privacy-first, open-source browserextensie voor Chrome en Firefox.", + "OG_TITLE": "KoalaSync | Watch party voor Netflix, Emby, Jellyfin en bijna elke video", + "OG_DESCRIPTION": "Start een watch party op Netflix, Emby, Jellyfin, YouTube, Twitch en bijna elke HTML5-video. Open source, privacyvriendelijk en zonder account.", + "TWITTER_TITLE": "KoalaSync | Watch party voor Netflix, Emby, Jellyfin en bijna elke video – Browserextensie", + "TWITTER_DESCRIPTION": "Start een watch party op Netflix, Emby, Jellyfin, YouTube, Twitch en bijna elke HTML5-video. Open source, privacyvriendelijk en zonder account.", "NAV_FEATURES": "Functies", "NAV_HOW_IT_WORKS": "Hoe het werkt", "HERO_TITLE": "Maak van elke video een watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "In de kamer", "DEMO_TAB_SELECTED": "Tabblad geselecteerd", "DEMO_SELECT_PLACEHOLDER": "Kies een videotabblad…", + "MOBILE_DEMO_CTA": "Bekijk hoe het werkt", + "MOBILE_DEMO_TITLE": "KoalaSync live demo", + "MOBILE_DEMO_CLOSE": "Demo sluiten", "ADD_TO_CHROME": "Toevoegen aan Chrome", "ADD_TO_FIREFOX": "Toevoegen aan Firefox", "COMPAT_HEADING": "Werkt op uw favoriete platforms", diff --git a/website/locales/pl.json b/website/locales/pl.json index e6f6f6a..981af32 100644 --- a/website/locales/pl.json +++ b/website/locales/pl.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Watch party dla Netflix, YouTube i innych", "META_DESCRIPTION": "Watch party na Netflix, YouTube, Twitch i dowolnym wideo HTML5. Darmowe, otwarte rozszerzenie do Chrome i Firefox. Bez konta, bez śledzenia, bez reklam.", "SCHEMA_APP_DESC": "Watch party na Netflix, YouTube, Twitch i dowolnym wideo HTML5. Darmowe, otwarte rozszerzenie do Chrome i Firefox. Bez konta, bez śledzenia, bez reklam.", - "OG_TITLE": "KoalaSync | Synchronizuj Netflix, Emby, Jellyfin i prawie każde wideo ze znajomymi", - "OG_DESCRIPTION": "Oglądaj Netflix, Emby, Jellyfin, YouTube, Twitch i prawie każde wideo HTML5 w idealnej synchronizacji. Zorientowane na prywatność rozszerzenie o otwartym kodzie dla Chrome i Firefox.", - "TWITTER_TITLE": "KoalaSync | Synchronizuj Netflix, Emby, Jellyfin i prawie każde wideo ze znajomymi – Rozszerzenie przeglądarki", - "TWITTER_DESCRIPTION": "Oglądaj Netflix, Emby, Jellyfin, YouTube, Twitch i prawie każde wideo HTML5 w idealnej synchronizacji ze znajomymi. Zorientowane na prywatność rozszerzenie o otwartym kodzie dla Chrome i Firefox.", + "OG_TITLE": "KoalaSync | Watch party dla Netflix, Emby, Jellyfin i prawie każdego wideo", + "OG_DESCRIPTION": "Zorganizuj watch party na Netflix, Emby, Jellyfin, YouTube, Twitch i prawie każdym wideo HTML5. Open source, prywatnie i bez konta.", + "TWITTER_TITLE": "KoalaSync | Watch party dla Netflix, Emby, Jellyfin i prawie każdego wideo – Rozszerzenie", + "TWITTER_DESCRIPTION": "Zorganizuj watch party na Netflix, Emby, Jellyfin, YouTube, Twitch i prawie każdym wideo HTML5. Open source, prywatnie i bez konta.", "NAV_FEATURES": "Funkcje", "NAV_HOW_IT_WORKS": "Jak to działa", "HERO_TITLE": "Zamień dowolne wideo w watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "Dołączono do pokoju", "DEMO_TAB_SELECTED": "Karta wybrana", "DEMO_SELECT_PLACEHOLDER": "Wybierz kartę wideo…", + "MOBILE_DEMO_CTA": "Zobacz, jak działa", + "MOBILE_DEMO_TITLE": "Demo live KoalaSync", + "MOBILE_DEMO_CLOSE": "Zamknij demo", "ADD_TO_CHROME": "Dodaj do Chrome", "ADD_TO_FIREFOX": "Dodaj do Firefox", "COMPAT_HEADING": "Działa na Twoich ulubionych platformach", diff --git a/website/locales/pt-BR.json b/website/locales/pt-BR.json index 755d60d..529d8df 100644 --- a/website/locales/pt-BR.json +++ b/website/locales/pt-BR.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Watch party para Netflix, YouTube e mais", "META_DESCRIPTION": "Watch party na Netflix, YouTube, Twitch e qualquer vídeo HTML5. Extensão gratuita e open source para Chrome e Firefox. Sem conta, sem rastreamento, sem anúncios.", "SCHEMA_APP_DESC": "Watch party na Netflix, YouTube, Twitch e qualquer vídeo HTML5. Extensão gratuita e open source para Chrome e Firefox. Sem conta, sem rastreamento, sem anúncios.", - "OG_TITLE": "KoalaSync | Sincronize Netflix, Emby, Jellyfin e vídeos com amigos", - "OG_DESCRIPTION": "Assista a vídeos em perfeita sincronia com seus amigos. Extensão open source e focada em privacidade.", - "TWITTER_TITLE": "KoalaSync | Sincronize vídeos online com seus amigos", - "TWITTER_DESCRIPTION": "Assista a vídeos junto com seus amigos em sincronia perfeita. Open source e seguro.", + "OG_TITLE": "KoalaSync | Watch party para Netflix, Emby, Jellyfin e quase qualquer vídeo", + "OG_DESCRIPTION": "Crie uma watch party na Netflix, Emby, Jellyfin, YouTube, Twitch e quase qualquer vídeo HTML5. Open source, privado e sem conta.", + "TWITTER_TITLE": "KoalaSync | Watch party para Netflix, Emby, Jellyfin e quase qualquer vídeo – Extensão", + "TWITTER_DESCRIPTION": "Crie uma watch party na Netflix, Emby, Jellyfin, YouTube, Twitch e quase qualquer vídeo HTML5. Open source, privado e sem conta.", "NAV_FEATURES": "Recursos", "NAV_HOW_IT_WORKS": "Como Funciona", "HERO_TITLE": "Transforme qualquer vídeo em uma watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "Entrou na sala", "DEMO_TAB_SELECTED": "Aba selecionada", "DEMO_SELECT_PLACEHOLDER": "Escolha uma aba de vídeo…", + "MOBILE_DEMO_CTA": "Ver como funciona", + "MOBILE_DEMO_TITLE": "Demo ao vivo do KoalaSync", + "MOBILE_DEMO_CLOSE": "Fechar demo", "ADD_TO_CHROME": "Adicionar ao Chrome", "ADD_TO_FIREFOX": "Adicionar ao Firefox", "COMPAT_HEADING": "Funciona nas suas plataformas favoritas", diff --git a/website/locales/pt.json b/website/locales/pt.json index 51f3c4b..081577e 100644 --- a/website/locales/pt.json +++ b/website/locales/pt.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Watch party para Netflix, YouTube e mais", "META_DESCRIPTION": "Watch party na Netflix, YouTube, Twitch e qualquer vídeo HTML5. Extensão gratuita e open source para Chrome e Firefox. Sem conta, sem rastreio, sem anúncios.", "SCHEMA_APP_DESC": "Watch party na Netflix, YouTube, Twitch e qualquer vídeo HTML5. Extensão gratuita e open source para Chrome e Firefox. Sem conta, sem rastreio, sem anúncios.", - "OG_TITLE": "KoalaSync | Sincronize Netflix, Emby, Jellyfin e vídeos com os amigos", - "OG_DESCRIPTION": "Veja vídeos em sincronia perfeita com os amigos. Extensão de código aberto e focada na privacidade.", - "TWITTER_TITLE": "KoalaSync | Sincronize vídeos em streaming com os amigos", - "TWITTER_DESCRIPTION": "Veja vídeos com os amigos em sincronia perfeita. Extensão de código aberto focada na privacidade.", + "OG_TITLE": "KoalaSync | Watch party para Netflix, Emby, Jellyfin e quase qualquer vídeo", + "OG_DESCRIPTION": "Cria uma watch party na Netflix, Emby, Jellyfin, YouTube, Twitch e quase qualquer vídeo HTML5. Open source, privado e sem conta.", + "TWITTER_TITLE": "KoalaSync | Watch party para Netflix, Emby, Jellyfin e quase qualquer vídeo – Extensão", + "TWITTER_DESCRIPTION": "Cria uma watch party na Netflix, Emby, Jellyfin, YouTube, Twitch e quase qualquer vídeo HTML5. Open source, privado e sem conta.", "NAV_FEATURES": "Funcionalidades", "NAV_HOW_IT_WORKS": "Como Funciona", "HERO_TITLE": "Transforma qualquer vídeo numa watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "Entrou na sala", "DEMO_TAB_SELECTED": "Separador selecionado", "DEMO_SELECT_PLACEHOLDER": "Escolha um separador de vídeo…", + "MOBILE_DEMO_CTA": "Ver como funciona", + "MOBILE_DEMO_TITLE": "Demo ao vivo do KoalaSync", + "MOBILE_DEMO_CLOSE": "Fechar demo", "ADD_TO_CHROME": "Adicionar ao Chrome", "ADD_TO_FIREFOX": "Adicionar ao Firefox", "COMPAT_HEADING": "Funciona nas suas plataformas favoritas", diff --git a/website/locales/ru.json b/website/locales/ru.json index 5f68266..0e1a0c7 100644 --- a/website/locales/ru.json +++ b/website/locales/ru.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Watch party для Netflix, YouTube и любых видео", "META_DESCRIPTION": "Watch party в Netflix, YouTube, Twitch и любом HTML5-видео. Бесплатное расширение с открытым кодом для Chrome и Firefox. Без аккаунта, слежки и рекламы.", "SCHEMA_APP_DESC": "Watch party в Netflix, YouTube, Twitch и любом HTML5-видео. Бесплатное расширение с открытым кодом для Chrome и Firefox. Без аккаунта, слежки и рекламы.", - "OG_TITLE": "KoalaSync | Синхронизация Netflix, Emby, Jellyfin и почти любого видео с друзьями", - "OG_DESCRIPTION": "Смотрите Netflix, Emby, Jellyfin, YouTube, Twitch и почти любое HTML5-видео в идеальной синхронизации. Открытое и ориентированное на конфиденциальность расширение для Chrome и Firefox.", - "TWITTER_TITLE": "KoalaSync | Синхронизация Netflix, Emby, Jellyfin и почти любого видео с друзьями – Расширение", - "TWITTER_DESCRIPTION": "Смотрите Netflix, Emby, Jellyfin, YouTube, Twitch и почти любое HTML5-видео в идеальной синхронизации с друзьями. Открытое и конфиденциальное расширение для Chrome и Firefox.", + "OG_TITLE": "KoalaSync | Watch party для Netflix, Emby, Jellyfin и почти любого видео", + "OG_DESCRIPTION": "Запускайте watch party в Netflix, Emby, Jellyfin, YouTube, Twitch и почти любом HTML5-видео. Open source, приватно и без аккаунта.", + "TWITTER_TITLE": "KoalaSync | Watch party для Netflix, Emby, Jellyfin и почти любого видео – Расширение", + "TWITTER_DESCRIPTION": "Запускайте watch party в Netflix, Emby, Jellyfin, YouTube, Twitch и почти любом HTML5-видео. Open source, приватно и без аккаунта.", "NAV_FEATURES": "Функции", "NAV_HOW_IT_WORKS": "Как это работает", "HERO_TITLE": "Преврати любое видео в watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "В комнате", "DEMO_TAB_SELECTED": "Вкладка выбрана", "DEMO_SELECT_PLACEHOLDER": "Выберите вкладку с видео…", + "MOBILE_DEMO_CTA": "Посмотреть, как работает", + "MOBILE_DEMO_TITLE": "Живое демо KoalaSync", + "MOBILE_DEMO_CLOSE": "Закрыть демо", "ADD_TO_CHROME": "Установить в Chrome", "ADD_TO_FIREFOX": "Установить в Firefox", "COMPAT_HEADING": "Работает на ваших любимых платформах", diff --git a/website/locales/tr.json b/website/locales/tr.json index b9f99ee..1509fb8 100644 --- a/website/locales/tr.json +++ b/website/locales/tr.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Netflix, YouTube ve Her Video için Watch Party", "META_DESCRIPTION": "Netflix, YouTube, Twitch ve her HTML5 videoda watch party. Chrome ve Firefox için ücretsiz, açık kaynak uzantı. Hesap yok, takip yok, reklam yok.", "SCHEMA_APP_DESC": "Netflix, YouTube, Twitch ve her HTML5 videoda watch party. Chrome ve Firefox için ücretsiz, açık kaynak uzantı. Hesap yok, takip yok, reklam yok.", - "OG_TITLE": "KoalaSync | Netflix, Emby, Jellyfin ve Neredeyse Her Videoyu Arkadaşlarınızla Eşitleyin", - "OG_DESCRIPTION": "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.", - "TWITTER_TITLE": "KoalaSync | Netflix, Emby, Jellyfin ve Neredeyse Her Videoyu Arkadaşlarla Eşitle – Tarayıcı Eklentisi", - "TWITTER_DESCRIPTION": "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.", + "OG_TITLE": "KoalaSync | Netflix, Emby, Jellyfin ve neredeyse her video için watch party", + "OG_DESCRIPTION": "Netflix, Emby, Jellyfin, YouTube, Twitch ve neredeyse tüm HTML5 videolarında watch party başlatın. Açık kaynak, gizlilik odaklı ve hesapsız.", + "TWITTER_TITLE": "KoalaSync | Netflix, Emby, Jellyfin ve neredeyse her video için watch party – Eklenti", + "TWITTER_DESCRIPTION": "Netflix, Emby, Jellyfin, YouTube, Twitch ve neredeyse tüm HTML5 videolarında watch party başlatın. Açık kaynak, gizlilik odaklı ve hesapsız.", "NAV_FEATURES": "Özellikler", "NAV_HOW_IT_WORKS": "Nasıl Çalışır", "HERO_TITLE": "Herhangi bir videoyu watch party'ye dönüştür.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "Odaya katıldı", "DEMO_TAB_SELECTED": "Sekme seçildi", "DEMO_SELECT_PLACEHOLDER": "Bir video sekmesi seçin…", + "MOBILE_DEMO_CTA": "Nasıl çalıştığını izle", + "MOBILE_DEMO_TITLE": "KoalaSync canlı demo", + "MOBILE_DEMO_CLOSE": "Demoyu kapat", "ADD_TO_CHROME": "Chrome'a Ekle", "ADD_TO_FIREFOX": "Firefox'a Ekle", "COMPAT_HEADING": "En sevdiğiniz platformlarda çalışır", diff --git a/website/locales/uk.json b/website/locales/uk.json index 3343c73..dd0b450 100644 --- a/website/locales/uk.json +++ b/website/locales/uk.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Watch party для Netflix, YouTube та інших", "META_DESCRIPTION": "Watch party у Netflix, YouTube, Twitch і будь-якому HTML5-відео. Безкоштовне розширення з відкритим кодом для Chrome і Firefox. Без акаунта, стеження та реклами.", "SCHEMA_APP_DESC": "Watch party у Netflix, YouTube, Twitch і будь-якому HTML5-відео. Безкоштовне розширення з відкритим кодом для Chrome і Firefox. Без акаунта, стеження та реклами.", - "OG_TITLE": "KoalaSync | Синхронізація Netflix, Emby, Jellyfin і майже будь-якого відео з друзями", - "OG_DESCRIPTION": "Дивіться Netflix, Emby, Jellyfin, YouTube, Twitch і майже будь-яке відео HTML5 в ідеальній синхронізації. Розширення веб-переглядача з відкритим вихідним кодом для Chrome і Firefox, перш за все конфіденційність.", - "TWITTER_TITLE": "KoalaSync | Синхронізація Netflix, Emby, Jellyfin і майже будь-якого відео з друзями – розширення браузера", - "TWITTER_DESCRIPTION": "Дивіться Netflix, Emby, Jellyfin, YouTube, Twitch і майже будь-яке відео HTML5 в ідеальній синхронізації з друзями. Розширення веб-переглядача з відкритим вихідним кодом для Chrome і Firefox, перш за все конфіденційність.", + "OG_TITLE": "KoalaSync | Watch party для Netflix, Emby, Jellyfin і майже будь-якого відео", + "OG_DESCRIPTION": "Запускайте watch party у Netflix, Emby, Jellyfin, YouTube, Twitch і майже будь-якому HTML5-відео. Open source, приватно й без акаунта.", + "TWITTER_TITLE": "KoalaSync | Watch party для Netflix, Emby, Jellyfin і майже будь-якого відео – Розширення", + "TWITTER_DESCRIPTION": "Запускайте watch party у Netflix, Emby, Jellyfin, YouTube, Twitch і майже будь-якому HTML5-відео. Open source, приватно й без акаунта.", "NAV_FEATURES": "особливості", "NAV_HOW_IT_WORKS": "Як це працює", "HERO_TITLE": "Перетвори будь-яке відео на watch party.", @@ -24,6 +24,9 @@ "DEMO_JOINED": "У кімнаті", "DEMO_TAB_SELECTED": "Вкладку вибрано", "DEMO_SELECT_PLACEHOLDER": "Оберіть вкладку з відео…", + "MOBILE_DEMO_CTA": "Подивитися, як працює", + "MOBILE_DEMO_TITLE": "Жива демонстрація KoalaSync", + "MOBILE_DEMO_CLOSE": "Закрити демонстрацію", "ADD_TO_CHROME": "Додати до Chrome", "ADD_TO_FIREFOX": "Додати до Firefox", "COMPAT_HEADING": "Працює на ваших улюблених платформах", diff --git a/website/locales/zh.json b/website/locales/zh.json index 6047471..e4453d0 100644 --- a/website/locales/zh.json +++ b/website/locales/zh.json @@ -8,10 +8,10 @@ "META_TITLE": "KoalaSync | Netflix、YouTube 一起看派对浏览器扩展", "META_DESCRIPTION": "在 Netflix、YouTube、Twitch 及任意 HTML5 视频上发起一起看派对。适用于 Chrome 和 Firefox 的免费开源扩展。无需账号、无跟踪、无广告。", "SCHEMA_APP_DESC": "在 Netflix、YouTube、Twitch 及任意 HTML5 视频上发起一起看派对。适用于 Chrome 和 Firefox 的免费开源扩展。无需账号、无跟踪、无广告。", - "OG_TITLE": "KoalaSync |与朋友同步 Netflix、Emby、Jellyfin 和几乎任何视频", - "OG_DESCRIPTION": "完美同步观看 Netflix、Emby、Jellyfin、YouTube、Twitch 和几乎任何 HTML5 视频。适用于 Chrome 和 Firefox 的隐私第一开源浏览器扩展。", - "TWITTER_TITLE": "KoalaSync |与朋友同步 Netflix、Emby、Jellyfin 和几乎所有视频 – 浏览器扩展", - "TWITTER_DESCRIPTION": "与朋友完美同步观看 Netflix、Emby、Jellyfin、YouTube、Twitch 和几乎任何 HTML5 视频。适用于 Chrome 和 Firefox 的隐私第一开源浏览器扩展。", + "OG_TITLE": "KoalaSync | 在 Netflix、Emby、Jellyfin 和几乎任意视频上一起看", + "OG_DESCRIPTION": "在 Netflix、Emby、Jellyfin、YouTube、Twitch 和几乎任意 HTML5 视频上发起一起看派对。开源、重视隐私、无需账号。", + "TWITTER_TITLE": "KoalaSync | 在 Netflix、Emby、Jellyfin 和几乎任意视频上一起看 – 浏览器扩展", + "TWITTER_DESCRIPTION": "在 Netflix、Emby、Jellyfin、YouTube、Twitch 和几乎任意 HTML5 视频上发起一起看派对。开源、重视隐私、无需账号。", "NAV_FEATURES": "特征", "NAV_HOW_IT_WORKS": "它是如何运作的", "HERO_TITLE": "把任意视频变成一起看派对。", @@ -24,6 +24,9 @@ "DEMO_JOINED": "已加入房间", "DEMO_TAB_SELECTED": "已选择标签页", "DEMO_SELECT_PLACEHOLDER": "选择视频标签页…", + "MOBILE_DEMO_CTA": "查看工作方式", + "MOBILE_DEMO_TITLE": "KoalaSync 在线演示", + "MOBILE_DEMO_CLOSE": "关闭演示", "ADD_TO_CHROME": "添加到Chrome", "ADD_TO_FIREFOX": "添加到Firefox", "COMPAT_HEADING": "适用于您最喜欢的平台", diff --git a/website/style.css b/website/style.css index 4613736..24e176c 100644 --- a/website/style.css +++ b/website/style.css @@ -126,7 +126,6 @@ section { /* Content-visibility for offscreen sections to improve INP */ .use-cases-section, -#features, #self-hosting, .comparison-section { content-visibility: auto; @@ -238,17 +237,17 @@ html.theme-light nav.nav-scrolled { height: 36px; padding: 0; background: transparent; - border: 1px solid var(--glass-border); + border: 1px solid transparent; border-radius: 10px; color: var(--text-muted); cursor: pointer; flex-shrink: 0; - transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s; + transition: color 0.3s, background 0.3s, transform 0.3s; } .theme-toggle:hover { color: var(--accent); - border-color: rgba(99, 102, 241, 0.4); + background: rgba(99, 102, 241, 0.1); transform: rotate(15deg); } @@ -388,6 +387,9 @@ html.theme-light .compat-logo { headline gets the full width (the three CTAs always fit one row) and the demo stacks underneath, matching the demo's own 1024px breakpoint. */ grid-template-columns: minmax(0, 1fr); + align-content: center; + /* Keep the whole hero vertically centered. Do not use grid alignment to fix + the demo top edge; that moves the headline and breaks the hero balance. */ align-items: center; gap: 3rem; text-align: left; @@ -656,6 +658,17 @@ html.theme-light .koala-speech-bubble::after { transform: translateY(-2px); } +.btn-demo-mobile { + display: none; + border: 1px solid rgba(99, 102, 241, 0.34); + cursor: pointer; + font: inherit; +} + +.btn-demo-mobile svg { + flex-shrink: 0; +} + /* Install buttons: compact by default (just the browser name) so all three CTAs fit one line; the detected browser expands to the full call to action. The GitHub button stays compact always. */ @@ -1214,22 +1227,21 @@ input:checked + .mock-slider:before { margin-top: 4rem; } -/* Combined use-cases + feature tiles grid */ -.features-grid-combined { - margin-top: 2rem; - scroll-margin-top: 100px; -} - -.features-grid-combined .feature-card { +.feature-card.feature-card-compact { padding: 1.8rem; + border-radius: 16px; } -.features-grid-combined .feature-card h3 { +.feature-card.feature-card-compact::before { + border-radius: 16px; +} + +.feature-card.feature-card-compact h3 { font-size: 1.1rem; margin-bottom: 0.75rem; } -.features-grid-combined .feature-card p { +.feature-card.feature-card-compact p { font-size: 0.9rem; } @@ -2612,7 +2624,7 @@ html:not(.lang-de) [lang="de"] { .feature-card:nth-child(8) { --card-accent: rgba(16, 185, 129, 0.06); } .feature-card { - background: linear-gradient(135deg, var(--card-accent, transparent), var(--card)); + background: linear-gradient(135deg, var(--card-accent, transparent), rgba(30, 41, 59, 0.45)); } /* --- Compatibility Section --- */ @@ -2675,6 +2687,37 @@ html:not(.lang-de) [lang="de"] { display: block; } +.compat-logo img.compat-logo-wide { + width: 52px; + height: 28px; + object-fit: contain; +} + +.compat-logo-disneyplus { + opacity: 0.82; +} + +.compat-logo-disneyplus:hover { + opacity: 1; +} + +.compat-logo-disneyplus span { + color: var(--text); +} + +.compat-logo img.compat-logo-disneyplus-mark { + width: 76px; + height: 36px; + object-fit: contain; + filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.18)); + opacity: 0.94; +} + +html.theme-light .compat-logo img.compat-logo-disneyplus-mark { + filter: none; + opacity: 1; +} + .compat-more { opacity: 0.4; cursor: help; @@ -2785,6 +2828,24 @@ html:not(.lang-de) [lang="de"] { margin-top: 1rem; } +.use-cases-feature-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +@media (max-width: 900px) { + .use-cases-feature-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1.25rem; + } +} + +@media (max-width: 600px) { + .use-cases-feature-grid { + grid-template-columns: minmax(0, 1fr); + gap: 1rem; + } +} + .use-case-card { background: rgba(30, 41, 59, 0.4); border: 1px solid var(--glass-border); @@ -3566,7 +3627,11 @@ header[id] { /* Fixed height that already fits the open popup, so toggling it never changes layout (the vertically centered hero never jumps). The caption is absolutely positioned right under the cards instead of after the tall scene, and the - empty lower area is the invisible room the popup drops into. */ + empty lower area is the invisible room the popup drops into. + + Do not move .hero-mockup-wrapper down to align the headline and demo tops: + the extension popup is bottom-anchored inside this scene, so moving the whole + wrapper destroys the vertical balance and leaves no breathing room below. */ .hero-demo-scene { position: relative; width: 100%; @@ -3655,7 +3720,7 @@ header[id] { /* Card A = the foreground window at the top right ("your" browser, hosts the extension icon in its toolbar) */ .demo-tab-a { - top: 22px; + top: 49px; right: -3%; transform: rotate(1.2deg); transform-origin: top right; @@ -3671,7 +3736,7 @@ header[id] { /* Card B = the friend's window, lower left, tucked behind */ .demo-tab-b { top: 142px; - top: calc(20cqw + 40px); + top: calc(20cqw + 67px); left: -3%; transform: rotate(-1.6deg); transform-origin: top left; @@ -3686,6 +3751,7 @@ header[id] { /* When the popup slides in from the right edge, the tabs step aside */ .hero-demo-scene.popup-open .demo-tab-a { + top: 22px; transform: rotate(1deg) translate(-44%, 20%) scale(0.88); } @@ -3696,6 +3762,7 @@ header[id] { } .hero-demo-scene.popup-open .demo-tab-b { + top: calc(20cqw + 40px); transform: rotate(-1.6deg) translate(0, 14%) scale(0.94); } @@ -4042,6 +4109,14 @@ header[id] { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, visibility 0.45s; } +@media (min-width: 1025px) { + .hero-demo-scene .extension-mockup { + /* Keep the opened extension panel vertically balanced in the hero. + Move the popup itself, never the whole hero/demo wrapper. */ + bottom: 3.375rem; + } +} + .hero-demo-scene:not(.popup-open) .extension-mockup { transform: translate(2%, -3%) scale(0.5); opacity: 0; @@ -4688,9 +4763,157 @@ header[id] { background: #ef4444; } -/* Mobile & Tablet Stacked: completely hide the extension demo mockup when it wraps below the text */ -@media (max-width: 768px) { - .hero-mockup-wrapper { +/* Phone and portrait-tablet widths: keep the full hero demo out of the page + flow. The demo modal mounts the same node in its own fixed layer. */ +@media (max-width: 900px) { + .hero-grid > .hero-mockup-wrapper { display: none !important; } } + +@media (max-width: 900px) { + .btn-demo-mobile { + display: inline-flex; + } +} + +body.mobile-demo-open { + overflow: hidden; +} + +.mobile-demo-modal[hidden] { + display: none; +} + +.mobile-demo-modal { + position: fixed; + inset: 0; + z-index: 2400; + display: grid; + place-items: end center; + padding: 0.75rem; +} + +.mobile-demo-backdrop { + position: absolute; + inset: 0; + background: rgba(2, 6, 23, 0.78); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +.mobile-demo-panel { + position: relative; + z-index: 1; + width: min(100%, 760px); + max-height: min(calc(100dvh - 0.75rem), 760px); + display: flex; + flex-direction: column; + overflow: hidden; + background: rgba(15, 23, 42, 0.96); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 18px 18px 12px 12px; + box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55); +} + +.mobile-demo-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 0.85rem 0.95rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + flex-shrink: 0; +} + +.mobile-demo-header h2 { + margin: 0; + font-size: 0.95rem; + line-height: 1.2; + color: var(--text); +} + +.mobile-demo-close { + display: inline-flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + padding: 0; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 10px; + background: rgba(30, 41, 59, 0.72); + color: var(--text); + cursor: pointer; + flex-shrink: 0; +} + +.mobile-demo-stage { + position: relative; + flex: 1; + min-height: 0; + overflow: auto; + padding: 1rem 0.75rem 1.25rem; + overscroll-behavior: contain; +} + +.mobile-demo-stage .hero-mockup-wrapper { + display: flex !important; + width: min(100%, 560px); + margin: 0 auto; + transform: none; + will-change: auto; +} + +.mobile-demo-stage .hero-demo-scene, +.mobile-demo-stage .hero-demo-scene.popup-open { + position: relative; + width: 100%; + height: max(calc(59cqw + 100px), 548px); + max-width: none; + margin: 0 auto; +} + +.mobile-demo-stage .demo-tab-card { + display: block !important; +} + +.mobile-demo-stage .demo-sync-chip { + display: inline-flex !important; +} + +.mobile-demo-stage .demo-cursor { + display: block !important; +} + +.mobile-demo-stage .demo-hint { + display: block !important; +} + +.mobile-demo-stage .hero-demo-scene .extension-mockup, +.mobile-demo-stage .hero-demo-scene:not(.popup-open) .extension-mockup { + position: absolute; + bottom: 0; + right: 0; + z-index: 5; + width: min(320px, 66cqw); + transform-origin: top right; + transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, visibility 0.45s; +} + +.mobile-demo-stage .hero-demo-scene:not(.popup-open) .extension-mockup { + transform: translate(2%, -3%) scale(0.5); + opacity: 0; + visibility: hidden; + pointer-events: none; +} + +@media (max-width: 380px) { + .mobile-demo-modal { + padding: 0.4rem; + } + + .mobile-demo-stage { + padding-inline: 0.45rem; + } +} diff --git a/website/template.html b/website/template.html index 8a57b2f..54a127e 100644 --- a/website/template.html +++ b/website/template.html @@ -314,6 +314,10 @@ GitHub +

{{HERO_TRUST}}

@@ -724,6 +728,19 @@ + +
A cute koala juggling multiple browser tabs showing streaming platforms @@ -747,6 +764,10 @@ Prime Video Prime Video
+