diff --git a/website/app.js b/website/app.js
index e58f3d1..8c4435d 100644
--- a/website/app.js
+++ b/website/app.js
@@ -1,6 +1,30 @@
// KoalaSync Landing Page Logic
document.addEventListener('DOMContentLoaded', () => {
+ // Mockup Video Title Randomization on Load
+ const RANDOM_TITLES = [
+ { ep1: 'Stranger Things - S4E1', ep2: 'Stranger Things - S4E2' },
+ { ep1: 'Wednesday - S1E1', ep2: 'Wednesday - S1E2' },
+ { ep1: 'The Boys - S3E1', ep2: 'The Boys - S3E2' },
+ { ep1: 'The Mandalorian - S2E1', ep2: 'The Mandalorian - S2E2' },
+ { ep1: 'Arcane - S1E3', ep2: 'Arcane - S1E4' },
+ { ep1: 'Breaking Bad - S5E14', ep2: 'Breaking Bad - S5E15' },
+ { ep1: 'One Piece - S1E4', ep2: 'One Piece - S1E5' },
+ { ep1: 'House of the Dragon - S1E1', ep2: 'House of the Dragon - S1E2' }
+ ];
+
+ try {
+ const chosenTitle = RANDOM_TITLES[Math.floor(Math.random() * RANDOM_TITLES.length)];
+ document.querySelectorAll('.demo-title-text-ep1').forEach(el => {
+ el.textContent = chosenTitle.ep1;
+ });
+ document.querySelectorAll('.demo-title-text-ep2').forEach(el => {
+ el.textContent = chosenTitle.ep2;
+ });
+ } catch (err) {
+ console.warn(err);
+ }
+
const safeGetLocalStorage = (key) => {
try {
return localStorage.getItem(key);
diff --git a/website/locales/de.json b/website/locales/de.json
index 8ce3b00..0cb327c 100644
--- a/website/locales/de.json
+++ b/website/locales/de.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Bildschirmübertragung ist die einfachste Lösung, wenn es schnell gehen soll und Qualität, Privatsphäre oder individuelle Kontrolle nicht so wichtig sind. KoalaSync passt besser, wenn jeder lokal im eigenen Browser schauen soll und sich der Filmabend mehr wie wirklich gemeinsames Schauen anfühlen soll.",
"ALT_TRY_KOALASYNC": "KoalaSync ausprobieren",
"MOCK_HOST_CONTROL_LABEL": "Host-Steuerung",
- "MOCK_HOST_CONTROL_TOGGLE": "Nur ich darf die Wiedergabe steuern"
+ "MOCK_HOST_CONTROL_TOGGLE": "Nur ich darf die Wiedergabe steuern",
+ "LABEL_SELECT_VIDEO": "Video auswählen",
+ "OPTION_SELECT_TAB": "-- Wähle einen Tab --"
}
diff --git a/website/locales/en.json b/website/locales/en.json
index e68c2f6..50beaae 100644
--- a/website/locales/en.json
+++ b/website/locales/en.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Screen sharing is the simplest option when you just want something quick and do not care much about quality, privacy or individual control. KoalaSync is a better fit when everyone should watch locally in their own browser and the session should feel more like actually watching together.",
"ALT_TRY_KOALASYNC": "Try KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Host Control",
- "MOCK_HOST_CONTROL_TOGGLE": "Only I can control playback"
+ "MOCK_HOST_CONTROL_TOGGLE": "Only I can control playback",
+ "LABEL_SELECT_VIDEO": "Select Video",
+ "OPTION_SELECT_TAB": "-- Select a Tab --"
}
diff --git a/website/locales/es.json b/website/locales/es.json
index a9276ed..aae2251 100644
--- a/website/locales/es.json
+++ b/website/locales/es.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Compartir pantalla es la opción más sencilla cuando buscas algo rápido y no te preocupa demasiado la calidad, la privacidad o el control individual. KoalaSync es una mejor alternativa cuando cada persona debe ver el contenido localmente en su propio navegador y se busca una experiencia que realmente se asemeje a verlo juntos.",
"ALT_TRY_KOALASYNC": "Prueba KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Control del anfitrión",
- "MOCK_HOST_CONTROL_TOGGLE": "Solo yo puedo controlar la reproducción"
+ "MOCK_HOST_CONTROL_TOGGLE": "Solo yo puedo controlar la reproducción",
+ "LABEL_SELECT_VIDEO": "Seleccionar video",
+ "OPTION_SELECT_TAB": "-- Selecciona una pestaña --"
}
diff --git a/website/locales/fr.json b/website/locales/fr.json
index f981f3d..749be64 100644
--- a/website/locales/fr.json
+++ b/website/locales/fr.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Le partage d'écran est la solution la plus simple si vous cherchez une méthode rapide sans accorder une grande importance à la qualité, à la confidentialité ou au contrôle individuel. KoalaSync est plus adapté lorsque chaque participant doit visionner le contenu localement dans son propre navigateur, pour une expérience se rapprochant davantage d'un véritable visionnage en commun.",
"ALT_TRY_KOALASYNC": "Essayer KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Contrôle de l'hôte",
- "MOCK_HOST_CONTROL_TOGGLE": "Seul moi peut contrôler la lecture"
+ "MOCK_HOST_CONTROL_TOGGLE": "Seul moi peut contrôler la lecture",
+ "LABEL_SELECT_VIDEO": "Choisir une vidéo",
+ "OPTION_SELECT_TAB": "-- Choisir un onglet --"
}
diff --git a/website/locales/it.json b/website/locales/it.json
index b1282e6..2689e0a 100644
--- a/website/locales/it.json
+++ b/website/locales/it.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "La condivisione dello schermo è l'opzione più semplice quando si cerca una soluzione rapida e non si dà molta importanza alla qualità, alla privacy o al controllo individuale. KoalaSync è la scelta ideale quando tutti devono guardare il contenuto localmente sul proprio browser, offrendo un'esperienza che ricorda più da vicino la visione condivisa reale.",
"ALT_TRY_KOALASYNC": "Prova KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Controllo host",
- "MOCK_HOST_CONTROL_TOGGLE": "Solo io posso controllare la riproduzione"
+ "MOCK_HOST_CONTROL_TOGGLE": "Solo io posso controllare la riproduzione",
+ "LABEL_SELECT_VIDEO": "Seleziona Video",
+ "OPTION_SELECT_TAB": "-- Seleziona una Scheda --"
}
diff --git a/website/locales/ja.json b/website/locales/ja.json
index 5fc0943..07644e6 100644
--- a/website/locales/ja.json
+++ b/website/locales/ja.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "画質やプライバシー、個別の操作性をあまり気にせず、手軽に済ませたい場合は「画面共有」が最も簡単な選択肢です。一方、参加者それぞれが自身のブラウザで動画を再生し、実際に同じ空間で一緒に視聴しているような感覚を重視するなら、KoalaSyncの方が適しています。",
"ALT_TRY_KOALASYNC": "KoalaSyncを試す",
"MOCK_HOST_CONTROL_LABEL": "ホスト操作",
- "MOCK_HOST_CONTROL_TOGGLE": "自分だけが再生を操作できる"
+ "MOCK_HOST_CONTROL_TOGGLE": "自分だけが再生を操作できる",
+ "LABEL_SELECT_VIDEO": "ビデオを選択",
+ "OPTION_SELECT_TAB": "-- タブを選択してください --"
}
diff --git a/website/locales/ko.json b/website/locales/ko.json
index 3dc51f9..36b9451 100644
--- a/website/locales/ko.json
+++ b/website/locales/ko.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "화질, 개인정보 보호, 개별 제어 기능 등을 크게 신경 쓰지 않고 간편하게 진행하고 싶을 때는 화면 공유가 가장 간단한 방법입니다. 반면, 모든 참가자가 각자의 브라우저에서 직접 영상을 시청하며 실제로 함께 보는 듯한 느낌을 원한다면 KoalaSync가 더 적합합니다.",
"ALT_TRY_KOALASYNC": "KoalaSync 사용해 보기",
"MOCK_HOST_CONTROL_LABEL": "호스트 제어",
- "MOCK_HOST_CONTROL_TOGGLE": "나만 재생을 제어할 수 있음"
+ "MOCK_HOST_CONTROL_TOGGLE": "나만 재생을 제어할 수 있음",
+ "LABEL_SELECT_VIDEO": "비디오 선택",
+ "OPTION_SELECT_TAB": "-- 탭 선택 --"
}
diff --git a/website/locales/nl.json b/website/locales/nl.json
index 280dc9e..cf7664e 100644
--- a/website/locales/nl.json
+++ b/website/locales/nl.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Scherm delen is de eenvoudigste optie als je snel iets wilt doen en niet veel waarde hecht aan kwaliteit, privacy of individuele controle. KoalaSync is een betere keuze wanneer iedereen lokaal in de eigen browser moet kijken en de sessie meer moet aanvoelen als echt samen kijken.",
"ALT_TRY_KOALASYNC": "Probeer KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Hostbeheer",
- "MOCK_HOST_CONTROL_TOGGLE": "Alleen ik mag de weergave bedienen"
+ "MOCK_HOST_CONTROL_TOGGLE": "Alleen ik mag de weergave bedienen",
+ "LABEL_SELECT_VIDEO": "Selecteer video",
+ "OPTION_SELECT_TAB": "-- Selecteer een tabblad --"
}
diff --git a/website/locales/pl.json b/website/locales/pl.json
index b624479..f50984d 100644
--- a/website/locales/pl.json
+++ b/website/locales/pl.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Udostępnianie ekranu to najprostsze rozwiązanie, gdy zależy Ci na szybkości, a kwestie jakości, prywatności czy indywidualnej kontroli nad odtwarzaniem nie są priorytetem. KoalaSync sprawdza się lepiej, gdy uczestnicy oglądają materiał lokalnie we własnych przeglądarkach, a sesja ma bardziej przypominać wspólny seans.",
"ALT_TRY_KOALASYNC": "Wypróbuj KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Kontrola hosta",
- "MOCK_HOST_CONTROL_TOGGLE": "Tylko ja mogę sterować odtwarzaniem"
+ "MOCK_HOST_CONTROL_TOGGLE": "Tylko ja mogę sterować odtwarzaniem",
+ "LABEL_SELECT_VIDEO": "Wybierz wideo",
+ "OPTION_SELECT_TAB": "-- Wybierz kartę --"
}
diff --git a/website/locales/pt-BR.json b/website/locales/pt-BR.json
index bb9d84f..5f7dcff 100644
--- a/website/locales/pt-BR.json
+++ b/website/locales/pt-BR.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "O compartilhamento de tela é a opção mais simples quando você quer algo rápido e não se preocupa muito com qualidade, privacidade ou controle individual. O KoalaSync é mais adequado quando todos devem assistir localmente em seus próprios navegadores e a sessão deve proporcionar uma experiência mais próxima de realmente assistir juntos.",
"ALT_TRY_KOALASYNC": "Experimente o KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Controle do anfitrião",
- "MOCK_HOST_CONTROL_TOGGLE": "Apenas eu posso controlar a reprodução"
+ "MOCK_HOST_CONTROL_TOGGLE": "Apenas eu posso controlar a reprodução",
+ "LABEL_SELECT_VIDEO": "Selecionar vídeo",
+ "OPTION_SELECT_TAB": "-- Selecione uma aba --"
}
diff --git a/website/locales/pt.json b/website/locales/pt.json
index d61a4bb..98166bd 100644
--- a/website/locales/pt.json
+++ b/website/locales/pt.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Partilhar o ecrã é a opção mais simples quando se quer algo rápido e não se liga muito à qualidade, privacidade ou controlo individual. O KoalaSync é mais adequado quando todos devem assistir localmente nos seus próprios browsers e a sessão deve parecer mais como assistir em conjunto.",
"ALT_TRY_KOALASYNC": "Experimente o KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Controlo do anfitrião",
- "MOCK_HOST_CONTROL_TOGGLE": "Apenas eu posso controlar a reprodução"
+ "MOCK_HOST_CONTROL_TOGGLE": "Apenas eu posso controlar a reprodução",
+ "LABEL_SELECT_VIDEO": "Selecionar Vídeo",
+ "OPTION_SELECT_TAB": "-- Selecionar um Separador --"
}
diff --git a/website/locales/ru.json b/website/locales/ru.json
index 1e8adde..bec7686 100644
--- a/website/locales/ru.json
+++ b/website/locales/ru.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Демонстрация экрана — самый простой вариант, если нужно быстро всё организовать и вас не особо волнуют качество, конфиденциальность или возможность индивидуального управления. KoalaSync лучше подходит для ситуаций, когда каждый участник смотрит видео локально в своем браузере, а сам сеанс больше напоминает реальный совместный просмотр.",
"ALT_TRY_KOALASYNC": "Попробовать KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Управление ведущим",
- "MOCK_HOST_CONTROL_TOGGLE": "Только я могу управлять воспроизведением"
+ "MOCK_HOST_CONTROL_TOGGLE": "Только я могу управлять воспроизведением",
+ "LABEL_SELECT_VIDEO": "Выбрать видео",
+ "OPTION_SELECT_TAB": "-- Выберите вкладку --"
}
diff --git a/website/locales/tr.json b/website/locales/tr.json
index 9e53e85..c41a878 100644
--- a/website/locales/tr.json
+++ b/website/locales/tr.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Hızlı bir çözüm aradığınızda ve kalite, gizlilik ya da bireysel kontrol konularına çok önem vermediğinizde, ekran paylaşımı en basit seçenektir. Herkesin içeriği kendi tarayıcısında yerel olarak izlemesi gereken ve oturumun gerçekten birlikte izliyormuş hissi verdiği durumlarda ise KoalaSync daha uygun bir tercihtir.",
"ALT_TRY_KOALASYNC": "KoalaSync'i Deneyin",
"MOCK_HOST_CONTROL_LABEL": "Sunucu Kontrolü",
- "MOCK_HOST_CONTROL_TOGGLE": "Oynatmayı yalnızca ben kontrol edebilirim"
+ "MOCK_HOST_CONTROL_TOGGLE": "Oynatmayı yalnızca ben kontrol edebilirim",
+ "LABEL_SELECT_VIDEO": "Video Seç",
+ "OPTION_SELECT_TAB": "-- Bir Sekme Seçin --"
}
diff --git a/website/locales/uk.json b/website/locales/uk.json
index 9ac0164..f94bc3b 100644
--- a/website/locales/uk.json
+++ b/website/locales/uk.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "Спільний доступ до екрана – це найпростіший варіант, коли ви просто хочете чогось швидкого і не дуже переймаєтеся якістю, конфіденційністю чи індивідуальним контролем. KoalaSync краще підходить, коли кожен має дивитися локально у своєму власному браузері, і сеанс має більше нагадувати спільний перегляд.",
"ALT_TRY_KOALASYNC": "Спробуйте KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "Керування ведучим",
- "MOCK_HOST_CONTROL_TOGGLE": "Тільки я можу керувати відтворенням"
+ "MOCK_HOST_CONTROL_TOGGLE": "Тільки я можу керувати відтворенням",
+ "LABEL_SELECT_VIDEO": "Виберіть Відео",
+ "OPTION_SELECT_TAB": "-- Виберіть вкладку --"
}
diff --git a/website/locales/zh.json b/website/locales/zh.json
index 550d3e6..54bb1e4 100644
--- a/website/locales/zh.json
+++ b/website/locales/zh.json
@@ -214,5 +214,7 @@
"ALT_SCREEN_SUMMARY_BODY": "如果您追求快速便捷，且不太在意画质、隐私或个性化控制，那么屏幕共享是最简单的选择。而当您希望每位参与者都在各自的浏览器中观看，并营造出一种真正“共同观看”的氛围时，KoalaSync 则是更理想的方案。",
"ALT_TRY_KOALASYNC": "试用 KoalaSync",
"MOCK_HOST_CONTROL_LABEL": "主持人控制",
- "MOCK_HOST_CONTROL_TOGGLE": "只有我可以控制播放"
+ "MOCK_HOST_CONTROL_TOGGLE": "只有我可以控制播放",
+ "LABEL_SELECT_VIDEO": "选择视频",
+ "OPTION_SELECT_TAB": "-- 选择一个选项卡 --"
}
diff --git a/website/style.css b/website/style.css
index 7cf8fa1..0305a49 100644
--- a/website/style.css
+++ b/website/style.css
@@ -3975,34 +3975,59 @@ header[id] {
letter-spacing: 0.2px;
}
-.popup-select-buttons {
- display: flex;
- flex-direction: column;
- gap: 4px;
- margin-top: 8px;
+.popup-form-group {
+ margin-top: 6px;
+ width: 100%;
+ text-align: left;
+}
+
+.popup-form-label {
+ display: block;
+ font-size: 0.6rem;
+ color: var(--text-muted);
+ margin-bottom: 4px;
+ font-weight: 700;
+}
+
+.popup-select-wrapper {
+ position: relative;
width: 100%;
}
-.popup-select-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 6px;
- padding: 6px;
- background: rgba(99, 102, 241, 0.15);
- border: 1px solid rgba(99, 102, 241, 0.35);
- border-radius: 6px;
- font-size: 0.6rem;
- font-weight: 700;
+.popup-select-mock {
+ width: 100%;
+ background: var(--card);
+ border: 1px solid rgba(255, 255, 255, 0.12);
color: white;
+ padding: 6px;
+ border-radius: 6px;
+ font-family: inherit;
+ font-size: 0.62rem;
+ outline: none;
+ appearance: none;
+ -webkit-appearance: none;
+ font-weight: 600;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
cursor: default;
- box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
- animation: tab-select-pulse 1.8s infinite alternate;
+ display: block;
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
-@keyframes tab-select-pulse {
- 0% { box-shadow: 0 0 4px rgba(99, 102, 241, 0.2); transform: scale(1); }
- 100% { box-shadow: 0 0 12px rgba(99, 102, 241, 0.5); transform: scale(1.02); }
+.popup-cursor-pointer {
+ position: absolute;
+ bottom: -15px;
+ right: 15px;
+ font-size: 1.1rem;
+ pointer-events: none;
+ z-index: 10;
+ animation: pointer-click 1.6s infinite ease-in-out;
+}
+
+@keyframes pointer-click {
+ 0%, 100% { transform: translate(0, 0) scale(1); }
+ 50% { transform: translate(-3px, -3px) scale(0.9); }
}
/* Step 3 forest movie continuous animation bindings */
diff --git a/website/template.html b/website/template.html
index ad6fec7..6ceebd9 100644
--- a/website/template.html
+++ b/website/template.html
@@ -313,7 +313,7 @@
- Stranger Things - S4E1
+ Stranger Things - S4E1🐱 ChillCat
KoalaSync