gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-26 12:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: Synchronize and randomize mockup video titles, and fix Step 2 illustration to use realistic select video dropdown

Browse Source
This commit is contained in:
KoalaDev
2026-07-03 11:25:12 +02:00
parent c8df8b6d08
commit 60c80ad7fb
18 changed files with 131 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app.js
+24
View File
@@ -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);
website/locales/de.json
+3 -1
View File
@@ -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 --"
}
website/locales/en.json
+3 -1
View File
@@ -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 --"
}
website/locales/es.json
+3 -1
View File
@@ -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 --"
}
website/locales/fr.json
+3 -1
View File
@@ -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 --"
}
website/locales/it.json
+3 -1
View File
@@ -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 --"
}
website/locales/ja.json
+3 -1
View File
@@ -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": "-- タブを選択してください --"
}
website/locales/ko.json
+3 -1
View File
@@ -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": "-- 탭 선택 --"
}
website/locales/nl.json
+3 -1
View File
@@ -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 --"
}
website/locales/pl.json
+3 -1
View File
@@ -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ę --"
}
website/locales/pt-BR.json
+3 -1
View File
@@ -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 --"
}
website/locales/pt.json
+3 -1
View File
@@ -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 --"
}
website/locales/ru.json
+3 -1
View File
@@ -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": "-- Выберите вкладку --"
}
website/locales/tr.json
+3 -1
View File
@@ -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 --"
}
website/locales/uk.json
+3 -1
View File
@@ -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": "-- Виберіть вкладку --"
}
website/locales/zh.json
+3 -1
View File
@@ -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": "-- 选择一个选项卡 --"
}
website/style.css
+46 -21
View File
@@ -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 */
website/template.html
+16 -18
View File
@@ -313,7 +313,7 @@
<div class="demo-tab-card demo-tab-a" id="demo-tab-a" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐱 ChillCat — KoalaSync mirrors it to the other tab" title="Press play/pause here — KoalaSync mirrors it to the other tab">
<div class="demo-tab-titlebar">
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> Stranger Things - S4E1</span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></span>
<span class="demo-tab-user demo-user-a">🐱 ChillCat</span>
<button class="demo-ext-launcher" id="demo-launcher" type="button" aria-expanded="true" title="Open or close the KoalaSync popup">
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="" width="16" height="16" loading="eager" decoding="async">
@@ -370,7 +370,7 @@
<div class="demo-tab-card demo-tab-b" id="demo-tab-b" role="button" tabindex="0" aria-pressed="false" aria-label="Press play or pause as 🐶 HappyDog — KoalaSync mirrors it to the other tab" title="Press play/pause here — KoalaSync mirrors it to the other tab">
<div class="demo-tab-titlebar">
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> Stranger Things - S4E1</span>
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></span>
<span class="demo-tab-user demo-user-b">🐶 HappyDog</span>
</div>
<div class="demo-video">
@@ -468,7 +468,7 @@
<span class="mock-peer-name">🐱 ChillCat</span>
<span class="mock-peer-meta">{{MOCK_05}}</span>
</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
<div class="mock-peer-item demo-peer-b">
@@ -476,7 +476,7 @@
<span class="mock-peer-name">🐶 HappyDog</span>
<span class="mock-peer-meta">{{MOCK_07}}</span>
</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
</div>
@@ -493,7 +493,7 @@
</label>
<select class="mock-input" id="demo-video-select" 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 value="" class="demo-select-placeholder" selected hidden>{{DEMO_SELECT_PLACEHOLDER}}</option>
<option><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</option>
<option><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></option>
</select>
</div>
@@ -546,7 +546,7 @@
<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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E2
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep2">Stranger Things - S4E2</span>
</div>
<div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
{{MOCK_16}}
@@ -566,7 +566,7 @@
<span class="mock-peer-name">🐱 ChillCat</span>
<span class="mock-peer-meta">{{MOCK_05}}</span>
</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
<div class="mock-peer-item demo-peer-b">
@@ -574,7 +574,7 @@
<span class="mock-peer-name">🐶 HappyDog</span>
<span class="mock-peer-meta">{{MOCK_07}}</span>
</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> Stranger Things - S4E1</div>
<div class="mock-peer-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></div>
<div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
</div>
@@ -1118,21 +1118,19 @@
</div>
</div>
<!-- Floating Extension Success Popup (aligned as dropdown below icon) -->
<!-- Floating Extension Dropdown Popup (aligned below toolbar icon) -->
<div class="illus-extension-popup drop-down">
<div class="popup-title">
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="12" height="12">
<span>KoalaSync</span>
</div>
<div class="popup-status">
<div class="status-badge-select">
<span>{{STEP_1_ILLUS_DESC}}</span>
</div>
</div>
<div class="popup-select-buttons">
<div class="popup-select-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="10" height="10" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>
<span>{{STEP_1_ILLUS_DL_CHROME}}</span>
<div class="popup-form-group">
<label class="popup-form-label">{{LABEL_SELECT_VIDEO}}</label>
<div class="popup-select-wrapper">
<select class="popup-select-mock" disabled>
<option class="demo-title-text-ep1">Stranger Things - S4E1</option>
</select>
<div class="popup-cursor-pointer">👆</div>
</div>
</div>
</div>