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

Redesign website and extension with koala nature theme

Browse Source 
v3.0.0 "The Greens Update" palette: forest-green oklch color system
(accent green + terracotta secondary) replaces the indigo/slate scheme
across the landing page and the extension popup/options. The blob
background becomes an animated bamboo forest overlay (parallax stalks,
falling leaves, canopy, ground mist, fireflies, light sweep, grain)
with prefers-reduced-motion support. Layout, structure and copy are
unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-10 19:18:40 +02:00
parent 05246ac485
commit aa52d319e1
21 changed files with 1611 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/template.html
+132 -87
View File
@@ -69,7 +69,7 @@
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/og-image.png">
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#10190e">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="{{ASSET_PATH}}site.webmanifest">
@@ -214,10 +214,55 @@
<a class="skip-link" href="#main-content">Skip to main content</a>
<div class="bg-blobs">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="bg-nature" aria-hidden="true">
<div class="bg-canopy"></div>
<span class="canopy-arc canopy-arc-1"></span>
<span class="canopy-arc canopy-arc-2"></span>
<span class="canopy-arc canopy-arc-3"></span>
<span class="canopy-arc canopy-arc-4"></span>
<div id="bamboo-far">
<span class="bamboo-stalk far-1"></span>
<span class="bamboo-stalk far-2"></span>
<span class="bamboo-stalk far-3"></span>
</div>
<div id="bamboo-near">
<div class="bamboo-stalk near-1">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
<i class="bamboo-leaf leaf-2"></i>
</div>
<div class="bamboo-stalk near-2">
<i class="bamboo-node node-1"></i>
<i class="bamboo-node node-2"></i>
<i class="bamboo-node node-3"></i>
<i class="bamboo-leaf leaf-1"></i>
</div>
</div>
<span class="fall-leaf fall-leaf-1"><i></i></span>
<span class="fall-leaf fall-leaf-2"><i></i></span>
<span class="fall-leaf fall-leaf-3"><i></i></span>
<span class="fall-leaf fall-leaf-4"><i></i></span>
<span class="fall-leaf fall-leaf-5"><i></i></span>
<span class="fall-leaf fall-leaf-6"><i></i></span>
<span class="fall-leaf fall-leaf-7"><i></i></span>
<span class="fall-leaf fall-leaf-8"><i></i></span>
<span class="bg-grass bg-grass-1"></span>
<span class="bg-grass bg-grass-2"></span>
<span class="bg-grass bg-grass-3"></span>
<span class="bg-grass bg-grass-4"></span>
<div class="bg-mist bg-mist-1"></div>
<div class="bg-mist bg-mist-2"></div>
<div class="bg-horizon"></div>
<span class="firefly firefly-1"></span>
<span class="firefly firefly-2"></span>
<span class="firefly firefly-3"></span>
<span class="firefly firefly-4"></span>
<span class="firefly firefly-5"></span>
<span class="firefly firefly-6"></span>
<div class="bg-light-sweep"></div>
<div class="bg-grain"></div>
</div>
<nav>
@@ -351,7 +396,7 @@
<div class="demo-video-art" aria-hidden="true"></div>
<div class="demo-seek-sweep" aria-hidden="true"></div>
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<g class="film-stars" fill="#e2e8f0">
<g class="film-stars" fill="#dbd7cd">
<circle class="film-star" cx="18" cy="14" r="0.8"/>
<circle class="film-star" cx="42" cy="24" r="0.6"/>
<circle class="film-star" cx="64" cy="10" r="0.9"/>
@@ -360,25 +405,25 @@
<circle class="film-star" cx="134" cy="22" r="0.8"/>
<circle class="film-star" cx="150" cy="12" r="0.5"/>
</g>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(30,27,75,0.7)"/>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
<g class="film-mid-scroll">
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
<polygon points="180,76 186,60 192,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="215,78 223,52 231,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="255,76 261,62 267,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="295,77 304,55 313,77" fill="rgba(49,46,129,0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
<polygon points="20,76 26,60 32,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="180,76 186,60 192,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="215,78 223,52 231,78" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="255,76 261,62 267,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="295,77 304,55 313,77" fill="rgba(26, 47, 23, 0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(26, 47, 23, 0.55)"/>
</g>
<g class="film-fore-scroll">
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
<polygon points="200,84 212,48 224,84" fill="#090d16"/>
<polygon points="275,84 288,42 301,84" fill="#090d16"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#090d16"/>
<polygon points="40,84 52,48 64,84" fill="#040903"/>
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<polygon points="200,84 212,48 224,84" fill="#040903"/>
<polygon points="275,84 288,42 301,84" fill="#040903"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
</svg>
@@ -408,7 +453,7 @@
<div class="demo-video-art" aria-hidden="true"></div>
<div class="demo-seek-sweep" aria-hidden="true"></div>
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<g class="film-stars" fill="#e2e8f0">
<g class="film-stars" fill="#dbd7cd">
<circle class="film-star" cx="18" cy="14" r="0.8"/>
<circle class="film-star" cx="42" cy="24" r="0.6"/>
<circle class="film-star" cx="64" cy="10" r="0.9"/>
@@ -417,25 +462,25 @@
<circle class="film-star" cx="134" cy="22" r="0.8"/>
<circle class="film-star" cx="150" cy="12" r="0.5"/>
</g>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(30,27,75,0.7)"/>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
<g class="film-mid-scroll">
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
<polygon points="180,76 186,60 192,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="215,78 223,52 231,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="255,76 261,62 267,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="295,77 304,55 313,77" fill="rgba(49,46,129,0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
<polygon points="20,76 26,60 32,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="180,76 186,60 192,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="215,78 223,52 231,78" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="255,76 261,62 267,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="295,77 304,55 313,77" fill="rgba(26, 47, 23, 0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(26, 47, 23, 0.55)"/>
</g>
<g class="film-fore-scroll">
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
<polygon points="200,84 212,48 224,84" fill="#090d16"/>
<polygon points="275,84 288,42 301,84" fill="#090d16"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#090d16"/>
<polygon points="40,84 52,48 64,84" fill="#040903"/>
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<polygon points="200,84 212,48 224,84" fill="#040903"/>
<polygon points="275,84 288,42 301,84" fill="#040903"/>
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
</svg>
@@ -493,7 +538,7 @@
<div class="mock-label" title="Share this link with friends so they can join">{{MOCK_03}}</div>
<div class="mock-invite-box">
<input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
<button class="mock-btn" id="demo-invite-copy" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><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="14" height="14" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
<button class="mock-btn" id="demo-invite-copy" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #2f3625; color: #f4f2ea;" title="Copy Invite Link"><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="14" height="14" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
</div>
</div>
<div class="mock-card" style="margin-bottom: 12px;">
@@ -505,7 +550,7 @@
<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> <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 class="mock-peer-status"><span style="color:#56ae6c;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
<div class="mock-peer-item demo-peer-b">
<div class="mock-peer-header">
@@ -513,11 +558,11 @@
<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> <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 class="mock-peer-status"><span style="color:#56ae6c;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
</div>
</div>
<button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">{{MOCK_08}}</button>
<button class="mock-btn" style="background:#b94642; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #b94642;">{{MOCK_08}}</button>
</div>
</div>
@@ -527,7 +572,7 @@
<label class="mock-section-label" for="demo-video-select" title="Choose the browser tab containing the video to sync">
{{MOCK_09}}
</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;">
<select class="mock-input" id="demo-video-select" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #2f3625; 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> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></option>
</select>
@@ -537,21 +582,21 @@
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
{{MOCK_10}}
</label>
<button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
<button class="mock-btn" style="background:transparent; border: 1px solid #2f3625; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
<span><svg xmlns="http://www.w3.org/2000/svg" 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="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
{{MOCK_03}}
</button>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
<button class="mock-btn mock-btn-play" id="demo-play-btn" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone">{{MOCK_11}}</button>
<button class="mock-btn mock-btn-pause" id="demo-pause-btn" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone">{{MOCK_12}}</button>
<button class="mock-btn mock-btn-play" id="demo-play-btn" style="flex: 1; background: #56ae6c; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Play command to everyone">{{MOCK_11}}</button>
<button class="mock-btn mock-btn-pause" id="demo-pause-btn" style="flex: 1; background: #b94642; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;" title="Send a Pause command to everyone">{{MOCK_12}}</button>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
<button class="mock-btn" id="demo-force-sync" style="background: linear-gradient(135deg, #6366f1, #a855f7); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
<button class="mock-btn" id="demo-force-sync" style="background: linear-gradient(135deg, #56ae6c, #c96736); flex: 1; color: white; border: none; font-weight: 700; border-radius: 8px; padding: 8px; cursor: pointer;" title="Force all users to sync up">
{{MOCK_13}}
</button>
<div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #334155; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
<div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #2f3625; color: white; padding: 6px; border-radius: 8px; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between;" title="Choose sync target">
<span>
{{MOCK_14}}
</span>
@@ -564,7 +609,7 @@
</label>
<div class="mock-card" style="margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-weight: 700; color: #ef4444; font-size: 11px;">PAUSE</span>
<span style="font-weight: 700; color: #b94642; font-size: 11px;">PAUSE</span>
<span style="font-size: 9px; color: var(--text-muted);">🐱 ChillCat @ 12:44:32</span>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; margin-top: 4px;">
@@ -586,7 +631,7 @@
<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> <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 class="mock-peer-status"><span style="color:#56ae6c;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
<div class="mock-peer-item demo-peer-b">
<div class="mock-peer-header">
@@ -594,7 +639,7 @@
<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> <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 class="mock-peer-status"><span style="color:#56ae6c;">●</span> 0:55 • {{MOCK_06}}</div>
</div>
</div>
</div>
@@ -602,14 +647,14 @@
<!-- SETTINGS TAB -->
<div id="mock-settings" class="mock-screen">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
{{MOCK_18}}
</label>
<input type="text" class="mock-input" value="🐱 ChillCat" readonly style="width: 110px; padding: 4px; text-align: right; background: transparent; border: none; color: var(--accent); font-weight: 700;">
</div>
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean">
{{MOCK_19}}
</label>
@@ -619,7 +664,7 @@
</label>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together.">
{{MOCK_20}}
</label>
@@ -629,7 +674,7 @@
</label>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room.">
{{MOCK_21}}
</label>
@@ -639,7 +684,7 @@
</label>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
<div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #2f3625;">
<label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses.">
{{MOCK_22}}
</label>
@@ -649,11 +694,11 @@
</label>
</div>
<div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
<div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #2f3625;">
<label class="mock-section-label" title="Tools for fixing connection issues">
{{MOCK_23}}
</label>
<button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
<button class="mock-btn" style="background:#2f3625; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; font-size: 11px;" title="Regenerate your internal ID and reconnect">
{{MOCK_24}}
</button>
<p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
@@ -668,11 +713,11 @@
{{MOCK_26}}
</label>
<div class="mock-card" style="display:flex; align-items:center; gap: 10px; margin-bottom: 12px;">
<span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #22c55e; box-shadow: 0 0 8px #22c55e;"></span>
<span class="status-dot status-online" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #56ae6c; box-shadow: 0 0 8px #56ae6c;"></span>
<span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
{{MOCK_27}}
</span>
<button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #334155; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
<button class="mock-btn" style="width: auto; padding: 4px 8px; font-size: 0.65rem; border: none; background: #2f3625; color: white; border-radius: 6px; cursor: pointer;" title="Copy logs to clipboard for sharing">
{{MOCK_28}}
</button>
</div>
@@ -684,14 +729,14 @@
<div>readyState: HAVE_ENOUGH_DATA</div>
<div>seekDelta: 0.05s</div>
<div>buffered: 300.2s</div>
<div>engineState: <span style="color:#22c55e; font-weight:700;">SYNCED</span></div>
<div>engineState: <span style="color:#56ae6c; font-weight:700;">SYNCED</span></div>
</div>
<label class="mock-section-label" title="Chronological log of all sync commands in the room">
{{MOCK_30}}
</label>
<div class="mock-card" style="font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; max-height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;">
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 4px;">
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid #2f3625; padding-bottom: 4px;">
<span>🐱 ChillCat: PAUSE</span>
<span style="opacity: 0.5;">0:55</span>
</div>
@@ -710,7 +755,7 @@
</button>
</div>
<div style="max-height: 120px; overflow-y: auto; font-size: 0.65rem; font-family: monospace; background: #000; padding: 8px 10px; border-radius: 8px; color: #ccc; line-height: 1.4;">
<div style="color:#22c55e;">[18:37:32] EVENT: PLAY -&gt; ACK</div>
<div style="color:#56ae6c;">[18:37:32] EVENT: PLAY -&gt; ACK</div>
<div>[18:37:32] FORCE_SYNC -&gt; 0.05s diff</div>
<div>[18:37:38] EVENT: PAUSE -&gt; BROADCAST</div>
<div style="color:var(--text-muted);">[18:37:42] content_heartbeat: active</div>
@@ -729,7 +774,7 @@
sync.koalastuff.net/join…
</div>
<div class="demo-cursor" id="demo-cursor" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2l13 11.5-6 .7 3.4 6.3-2.6 1.4-3.4-6.4L5 19.5z" fill="#f8fafc" stroke="#0f172a" stroke-width="1.4" stroke-linejoin="round"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2l13 11.5-6 .7 3.4 6.3-2.6 1.4-3.4-6.4L5 19.5z" fill="#f4f2ea" stroke="#10190e" stroke-width="1.4" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
@@ -1103,26 +1148,26 @@
<div class="player-video-canvas">
<div class="player-video-overlay"></div>
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<g class="film-stars" fill="#e2e8f0">
<g class="film-stars" fill="#dbd7cd">
<circle class="film-star" cx="18" cy="14" r="0.8"/>
<circle class="film-star" cx="42" cy="24" r="0.6"/>
<circle class="film-star" cx="64" cy="10" r="0.9"/>
<circle class="film-star" cx="90" cy="28" r="0.6"/>
<circle class="film-star" cx="134" cy="22" r="0.8"/>
</g>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(30,27,75,0.7)"/>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
<g class="film-mid-scroll">
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
<polygon points="20,76 26,60 32,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(26, 47, 23, 0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(26, 47, 23, 0.55)"/>
</g>
<g class="film-fore-scroll">
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#090d16"/>
<polygon points="40,84 52,48 64,84" fill="#040903"/>
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
</svg>
@@ -1156,26 +1201,26 @@
<div class="player-video-canvas">
<div class="player-video-overlay"></div>
<svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<g class="film-stars" fill="#e2e8f0">
<g class="film-stars" fill="#dbd7cd">
<circle class="film-star" cx="18" cy="14" r="0.8"/>
<circle class="film-star" cx="42" cy="24" r="0.6"/>
<circle class="film-star" cx="64" cy="10" r="0.9"/>
<circle class="film-star" cx="90" cy="28" r="0.6"/>
<circle class="film-star" cx="134" cy="22" r="0.8"/>
</g>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(30,27,75,0.7)"/>
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
<path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
<g class="film-mid-scroll">
<polygon points="20,76 26,60 32,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(49,46,129,0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(49,46,129,0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(49,46,129,0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(49,46,129,0.55)"/>
<polygon points="20,76 26,60 32,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="55,78 63,52 71,78" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="95,76 101,62 107,76" fill="rgba(26, 47, 23, 0.55)"/>
<polygon points="135,77 144,55 153,77" fill="rgba(26, 47, 23, 0.55)"/>
<path d="M0,76 Q40,73 80,76 T160,76 Q200,73 240,76 T320,76 L320,92 L0,92 Z" fill="rgba(26, 47, 23, 0.55)"/>
</g>
<g class="film-fore-scroll">
<polygon points="40,84 52,48 64,84" fill="#090d16"/>
<polygon points="115,84 128,42 141,84" fill="#090d16"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#090d16"/>
<polygon points="40,84 52,48 64,84" fill="#040903"/>
<polygon points="115,84 128,42 141,84" fill="#040903"/>
<path d="M0,84 Q40,82 80,84 T160,84 L160,92 L0,92 Z" fill="#040903"/>
</g>
<circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
</svg>