Polish extension and landing page UI

2026-08-06 01:17:42 +00:00 · 2026-07-11 11:21:47 +02:00
parent fbef3d180c
commit 7fea11de0a
6 changed files with 394 additions and 51 deletions
@@ -12,6 +12,7 @@ let currentLanguage = null;
 */
 export async function loadLocale(langCode) {
    const resolvedLang = SUPPORTED_LANGUAGES.includes(langCode) ? langCode : DEFAULT_LANGUAGE;
+    document.documentElement.lang = resolvedLang;
    
    if (currentLanguage === resolvedLang && Object.keys(activeDictionary).length > 0) {
        return;
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
    <meta charset="utf-8">
    <title>KoalaSync</title>
@@ -61,9 +61,10 @@
        }

        body {
-            width: 320px;
+            width: 360px;
            margin: 0;
-            padding: 16px;
+            padding: 18px;
+            box-sizing: border-box;
            background: var(--bg);
            color: var(--text);
            font-family: 'Twemoji Country Flags', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -83,7 +84,8 @@
        .header-row {
            display: flex;
            align-items: center;
-            margin-bottom: 16px;
+            margin-bottom: 14px;
+            padding: 2px 2px 0;
        }

        h1 {
@@ -98,8 +100,8 @@
        }

        h1 img {
-            width: 48px;
-            height: 48px;
+            width: 42px;
+            height: 42px;
            object-fit: contain;
            border-radius: 4px;
        }
@@ -132,7 +134,8 @@
            background: var(--card);
            padding: 4px;
            border-radius: var(--radius);
-            margin-bottom: 20px;
+            margin-bottom: 16px;
+            border: 1px solid var(--border-soft);
        }

        .tab-btn {
@@ -146,11 +149,13 @@
            border-radius: 8px;
            min-height: 36px;
            transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+            white-space: nowrap;
        }

        .tab-btn.active {
            background: var(--accent);
            color: var(--text-on-green);
+            box-shadow: 0 5px 14px oklch(0.38 0.10 150 / 0.22);
        }

        .tab-content {
@@ -191,6 +196,8 @@
            border-radius: 8px;
            outline: none;
            font-family: inherit;
+            min-height: 40px;
+            transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
        }

        @supports (appearance: base-select) {
@@ -207,9 +214,10 @@
            }
        }

-        input:focus {
+        input:focus,
+        select:focus {
            border-color: var(--accent);
-            box-shadow: 0 0 0 2px rgba(86, 174, 108, 0.2);
+            box-shadow: 0 0 0 3px oklch(0.68 0.13 150 / 0.18);
        }

        button.primary {
@@ -277,13 +285,14 @@
        .info-card {
            background: var(--card);
            padding: 12px;
-            border-radius: 8px;
+            border-radius: 10px;
            margin-bottom: 12px;
            border: 1px solid var(--border-strong);
+            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
        }

        .peer-item {
-            padding: 8px 0;
+            padding: 10px 0;
            border-bottom: 1px solid var(--border-strong);
        }

@@ -471,6 +480,51 @@
            font-size: 10px;
            opacity: 0.78;
        }
+
+        /* Unified interaction layer: the popup is a compact control surface,
+           so every actionable target gets the same tactile and keyboard cues. */
+        button,
+        select,
+        summary,
+        a {
+            -webkit-tap-highlight-color: transparent;
+        }
+        button:not(:disabled):active,
+        .tab-btn:not(:disabled):active {
+            transform: translateY(1px) scale(0.985);
+        }
+        details.form-group > summary {
+            min-height: 30px;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+        #section-join > .info-card,
+        #section-active > .info-card,
+        #tab-sync .info-card {
+            position: relative;
+            overflow: hidden;
+        }
+        #section-active > .info-card:first-child::before,
+        #connStatus::before {
+            content: "";
+            position: absolute;
+            inset: 0 auto 0 0;
+            width: 3px;
+            background: var(--accent);
+        }
+        #playBtn,
+        #pauseBtn,
+        #forceSyncBtn {
+            min-height: 42px;
+        }
+        #leaveBtn {
+            background: transparent;
+            border: 1px solid color-mix(in oklch, var(--error), transparent 35%);
+        }
+        #leaveBtn:hover {
+            background: color-mix(in oklch, var(--error), transparent 88%);
+        }
        .popup-footer a {
            color: var(--text-muted);
            text-decoration: none;
@@ -516,6 +570,9 @@
        html.theme-light .popup-footer {
            border-top-color: var(--border-soft);
        }
+        html.theme-light .tab-btn.active {
+            color: #fff;
+        }
        .feature-hint {
            display: inline-block;
            width: 8px;
@@ -543,6 +600,7 @@
 </head>
 <body>
    <div id="toast-container"></div>
+    <main>
    <div class="header-row">
                    <h1 data-i18n="APP_TITLE"><img src="icons/icon128.png" alt="KoalaSync Logo">KoalaSync</h1>
                    <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="popup-version">
@@ -676,7 +734,7 @@

        <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
            <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, var(--accent-green), var(--accent-terracotta)); color: var(--text-on-green); flex: 1;" title="Force all users to sync up" data-i18n="BTN_SYNC" data-i18n-title="BTN_SYNC_TOOLTIP">⚡ SYNC</button>
-            <select id="forceSyncMode" style="flex: 1; background: var(--card); border: 1px solid var(--border-strong); color: white; padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target" data-i18n-title="OPTION_JUMP_MODE_TOOLTIP">
+            <select id="forceSyncMode" style="flex: 1; background: var(--card); border: 1px solid var(--border-strong); color: var(--text); padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target" data-i18n-title="OPTION_JUMP_MODE_TOOLTIP">
                <option value="jump-to-others" data-i18n="OPTION_JUMP_TO_OTHERS">Jump to Others</option>
                <option value="jump-to-me" data-i18n="OPTION_JUMP_TO_ME">Jump to Me</option>
            </select>
@@ -738,7 +796,7 @@
            </div>
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;">
                <label for="mediaTitlePrivacyMode" style="margin-bottom: 0; cursor: help;" title="Choose how media titles are sent to the room." data-i18n="LABEL_MEDIA_TITLE_PRIVACY" data-i18n-title="LABEL_MEDIA_TITLE_PRIVACY_TOOLTIP">Media title</label>
-                <select id="mediaTitlePrivacyMode" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: white; padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; outline: none; font-family: inherit;">
+                <select id="mediaTitlePrivacyMode" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; outline: none; font-family: inherit;">
                    <option value="full" data-i18n="OPTION_TITLE_PRIVACY_FULL">Send full title</option>
                    <option value="episode" data-i18n="OPTION_TITLE_PRIVACY_EPISODE">Send episode ID</option>
                    <option value="hidden" data-i18n="OPTION_TITLE_PRIVACY_HIDDEN">Do not send</option>
@@ -787,7 +845,7 @@

        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
            <label for="langSelector" style="margin-bottom: 0;" data-i18n="LABEL_LANGUAGE" data-i18n-title="LABEL_LANGUAGE_TOOLTIP" title="Choose your preferred extension language">App Language</label>
-            <select id="langSelector" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: white; padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; outline: none; font-family: inherit;">
+            <select id="langSelector" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; outline: none; font-family: inherit;">
                <option value="en">🇬🇧 English</option>
                <option value="de">🇩🇪 Deutsch</option>
                <option value="fr">🇫🇷 Français</option>
@@ -881,6 +939,8 @@
        </div>
    </div>

+    </main>
+
    <script src="popup.js" type="module"></script>

    <!-- Onboarding Overlay -->
@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const template = fs.readFileSync(path.join(repoRoot, 'website', 'template.html'), 'utf8');
+const mockupStart = template.indexOf('<div class="extension-mockup">');
+const mockupEnd = template.indexOf('<div class="demo-invite-fly"', mockupStart);
+
+if (mockupStart === -1 || mockupEnd === -1) {
+  throw new Error('Could not locate the extension mockup in website/template.html');
+}
+
+const mockup = template.slice(mockupStart, mockupEnd);
+const themeSensitiveControls = [
+  ['video selector', /<select[^>]+id="demo-video-select"[^>]+>/],
+  ['sync target', /<div[^>]+class="mock-input"[^>]+title="Choose sync target"[^>]*>/],
+  ['WebSocket status', /<span style="[^"]*flex:1;[^"]*">\s*\{\{MOCK_27\}\}/]
+];
+
+for (const [label, pattern] of themeSensitiveControls) {
+  const match = mockup.match(pattern);
+  if (!match) throw new Error(`Could not locate ${label} in the extension mockup`);
+  if (!/color:\s*var\(--text\)/.test(match[0])) {
+    throw new Error(`${label} must use var(--text) so it remains readable in both themes`);
+  }
+}
+
+console.log('Extension mockup theme-sensitive text uses theme-aware colors');
@@ -28,6 +28,7 @@ const checks = [
  ['background syntax', 'node', ['-c', 'extension/background.js']],
  ['locale coverage', 'node', ['scripts/test-locales.cjs']],
  ['website locale coverage', 'node', ['scripts/test-website-locales.mjs']],
+  ['website theme coverage', 'node', ['scripts/test-website-theme.mjs']],
  ['lint', 'npm', ['run', 'lint']],
  ['root production audit', 'npm', ['audit', '--omit=dev']],
  ['server production audit', 'npm', ['audit', '--omit=dev'], { cwd: path.join(repoRoot, 'server') }],
@@ -743,6 +743,215 @@ html.theme-light .bg-nature::after {
    }
 }

+/* --- UI/UX cohesion pass -------------------------------------------------
+   Shared rhythm and interaction rules for the landing page. Component-specific
+   responsive refinements are repeated at the end of the cascade. */
+html {
+    scroll-padding-top: 96px;
+}
+
+body {
+    text-rendering: optimizeLegibility;
+}
+
+.footer-disclaimer {
+    color: oklch(0.72 0.015 90);
+}
+
+html.theme-light .footer-disclaimer {
+    color: var(--text-muted);
+}
+
+.logo-area {
+    text-decoration: none;
+    border-radius: 12px;
+}
+
+.logo-area:focus-visible,
+.nav-links a:focus-visible,
+.theme-toggle:focus-visible,
+.lang-dropdown:focus-visible,
+.hamburger:focus-visible,
+.btn:focus-visible,
+.faq-item summary:focus-visible {
+    outline: 3px solid var(--accent);
+    outline-offset: 4px;
+}
+
+.nav-links a {
+    position: relative;
+    padding: 0.55rem 0;
+}
+
+.nav-links a::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0.25rem;
+    left: 0;
+    height: 2px;
+    border-radius: 999px;
+    background: var(--accent);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.25s ease;
+}
+
+.nav-links a:hover::after,
+.nav-links a:focus-visible::after {
+    transform: scaleX(1);
+    transform-origin: left;
+}
+
+.hero-text {
+    max-width: 42rem;
+}
+
+.hero-text h1 {
+    text-wrap: balance;
+}
+
+.hero-subtitle,
+.section-subtitle,
+.use-cases-subtitle {
+    text-wrap: pretty;
+}
+
+.cta-group {
+    align-items: stretch;
+}
+
+.cta-group .btn {
+    min-height: 48px;
+    box-sizing: border-box;
+}
+
+.cta-trust {
+    max-width: 44rem;
+    line-height: 1.55;
+}
+
+section[id] {
+    scroll-margin-top: 96px;
+}
+
+.section-title,
+#how-it-works h2,
+#self-hosting h2,
+#faq h2 {
+    text-wrap: balance;
+    letter-spacing: -0.035em;
+}
+
+.use-case-card,
+.feature-card,
+.faq-item,
+.comparison-table-wrapper {
+    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
+}
+
+html.theme-light :is(.use-case-card, .feature-card, .faq-item, .comparison-table-wrapper) {
+    box-shadow: 0 18px 46px oklch(0.22 0.035 140 / 0.09);
+}
+
+.use-case-card,
+.feature-card {
+    height: 100%;
+}
+
+.use-case-card p,
+.feature-card p,
+.faq-item p {
+    line-height: 1.7;
+}
+
+.faq-item summary {
+    min-height: 52px;
+    display: flex;
+    align-items: center;
+}
+
+.comparison-table tbody tr {
+    transition: background-color 0.2s ease;
+}
+
+@media (max-width: 768px) {
+    html {
+        scroll-padding-top: 76px;
+    }
+
+    .container {
+        padding-inline: 1.15rem;
+    }
+
+    section {
+        padding-block: 4.25rem;
+    }
+
+    .hero-text {
+        max-width: none;
+    }
+
+    .hero-text h1,
+    .section-title,
+    #how-it-works h2,
+    #self-hosting h2,
+    #faq h2 {
+        font-size: clamp(2rem, 9vw, 2.65rem) !important;
+    }
+
+    .cta-group {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        width: 100%;
+    }
+
+    .cta-group .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .cta-group .btn-primary,
+    .cta-group .btn-firefox {
+        grid-column: span 1;
+    }
+
+    .hero-github-cta,
+    .btn-demo-mobile {
+        grid-column: span 1;
+    }
+
+    .use-case-card,
+    .feature-card,
+    .faq-item,
+    .comparison-table-wrapper {
+        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
+    }
+}
+
+@media (max-width: 430px) {
+    .cta-group {
+        grid-template-columns: 1fr;
+    }
+
+    .cta-group .btn-primary,
+    .cta-group .btn-firefox,
+    .hero-github-cta,
+    .btn-demo-mobile {
+        grid-column: 1;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .nav-links a::after,
+    .use-case-card,
+    .feature-card,
+    .faq-item,
+    .btn {
+        transition-duration: 0.01ms !important;
+    }
+}
+
 /* (l) Click confetti: a small handful of eucalyptus leaves bursts from
   wherever the visitor presses (spawned by app.js). Built like the falling
   leaves above — the outer span owns the flight path (fast burst that
@@ -5414,8 +5623,9 @@ html.theme-light .hero-demo-scene .demo-video::after {
 .hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
 .hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }

-/* By day the flock reads as silhouettes, not chalk marks */
+/* By day the birds read as silhouettes, not chalk marks */
 html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); }
+html.theme-light :is(.hero-demo-scene, .step-illustration-3) .film-hero-bird { stroke: oklch(0.32 0.06 145 / 0.75); }

 /* Stars: staggered twinkle so the sky feels alive */
 .film-star {
@@ -5480,27 +5690,22 @@ html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.
 .film-fore-scroll {
    transform: translateX(var(--scroll-fore, 0px));
 }
-/* Floating lantern: the group rides the JS-driven drift vars so halo and
-   light travel together; the glow stays cheap via a single drop-shadow. */
-.film-lantern-g {
+/* A single gliding bird carries the scene: the outer group rides the
+   JS-driven drift vars, the inner group flaps its wings via scaleY. */
+.film-hero-bird-drift {
    transform: translate(var(--lantern-x, 0px), var(--bounce-y, 0px));
 }

-.film-bounce-ball {
-    transform-origin: bottom center;
-    filter: drop-shadow(0 0 4px oklch(0.72 0.13 50));
-}
-
-.film-lantern-halo {
+.film-hero-bird {
    transform-box: fill-box;
    transform-origin: center;
-    animation: filmHaloPulse 2.6s ease-in-out infinite alternate;
+    animation: filmWingFlap 0.85s ease-in-out infinite alternate;
    animation-play-state: paused;
 }

-@keyframes filmHaloPulse {
-    from { transform: scale(0.85); opacity: 0.12; }
-    to { transform: scale(1.18); opacity: 0.22; }
+@keyframes filmWingFlap {
+    from { transform: scaleY(1); }
+    to { transform: scaleY(0.5); }
 }

 /* Twinkle & Glow play state bindings */
@@ -5510,7 +5715,7 @@ html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.
    animation: filmTwinkle 2.8s ease-in-out infinite;
    animation-play-state: paused;
 }
-.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-lantern-halo) {
+.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-hero-bird) {
    animation-play-state: running;
 }

@@ -5914,9 +6119,9 @@ html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.
 .step-illustration-3 .film-fore-scroll {
    animation: scrollFore 3s linear infinite !important;
 }
-.step-illustration-3 .film-bounce-ball {
-    animation: ballBounce 0.8s ease-in-out infinite !important;
-    transform-origin: bottom center;
+.step-illustration-3 .film-hero-bird {
+    animation: filmWingFlap 0.85s ease-in-out infinite !important;
+    animation-direction: alternate !important;
 }

@keyframes scrollBack {
@@ -5931,10 +6136,6 @@ html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.
    0% { transform: translateX(0); }
    100% { transform: translateX(-160px); }
 }
-@keyframes ballBounce {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-16px); }
-}

 /* --- High Fidelity Micro-Animations & Identity additions --- */

@@ -6333,3 +6534,43 @@ html.theme-light .mobile-demo-close:hover {
        contain-intrinsic-block-size: auto 700px;
    }
 }
+
+/* Final responsive hierarchy overrides. Keep these last: the landing page has
+   several component-level media blocks above that intentionally own geometry. */
+@media (max-width: 768px) {
+    .container {
+        padding-inline: 1.15rem;
+    }
+
+    section {
+        padding-block: 4.25rem;
+    }
+
+    .hero-text h1,
+    .section-title,
+    #how-it-works h2,
+    #self-hosting h2,
+    #faq h2 {
+        font-size: clamp(2rem, 9vw, 2.65rem) !important;
+        text-wrap: balance;
+    }
+
+    .cta-group {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .cta-group .btn {
+        width: 100%;
+        min-height: 48px;
+        justify-content: center;
+    }
+}
+
+@media (max-width: 430px) {
+    .cta-group {
+        grid-template-columns: 1fr;
+    }
+}
@@ -294,14 +294,14 @@

    <nav>
        <div class="container nav-content">
-            <div class="logo-area">
+            <a class="logo-area" href="{{ASSET_PATH}}" aria-label="KoalaSync home">
                <img class="nav-logo-img" src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
                <span>KoalaSync</span>
                <div id="nav-extension-status" class="nav-ext-status" style="display: none;">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="12" height="12"><polyline points="20 6 9 17 4 12"></polyline></svg>
                    <span>Installed</span>
                </div>
-            </div>
+            </a>
            <div class="nav-links" id="primary-nav" role="navigation" aria-label="Primary">
                <a href="#features"><span>{{NAV_FEATURES}}</span></a>
                <a href="#how-it-works"><span>{{NAV_HOW_IT_WORKS}}</span></a>
@@ -359,7 +359,8 @@
        </div>
    </nav>

-    <header class="hero" id="main-content">
+    <main id="main-content">
+    <header class="hero">
        <div class="container hero-grid">
            <div class="hero-text">
                <h1>{{HERO_TITLE}}</h1>
@@ -481,9 +482,10 @@
                                    <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>
-                                <g class="film-lantern-g">
-                                    <circle class="film-lantern-halo" cx="80" cy="38" r="6.5" fill="#de7949" opacity="0.16"/>
-                                    <circle class="film-bounce-ball" cx="80" cy="38" r="2.4" fill="#de7949"/>
+                                <g class="film-hero-bird-drift">
+                                    <g class="film-hero-bird" stroke="#dbd7cd" stroke-width="1.1" fill="none" stroke-linecap="round">
+                                        <path d="M64,33 q4.5,-4.5 9,0 q4.5,-4.5 9,0"/>
+                                    </g>
                                </g>
                            </svg>
                            <div class="demo-play-overlay" aria-hidden="true">
@@ -578,9 +580,10 @@
                                    <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>
-                                <g class="film-lantern-g">
-                                    <circle class="film-lantern-halo" cx="80" cy="38" r="6.5" fill="#de7949" opacity="0.16"/>
-                                    <circle class="film-bounce-ball" cx="80" cy="38" r="2.4" fill="#de7949"/>
+                                <g class="film-hero-bird-drift">
+                                    <g class="film-hero-bird" stroke="#dbd7cd" stroke-width="1.1" fill="none" stroke-linecap="round">
+                                        <path d="M64,33 q4.5,-4.5 9,0 q4.5,-4.5 9,0"/>
+                                    </g>
                                </g>
                            </svg>
                            <div class="demo-play-overlay" aria-hidden="true">
@@ -679,7 +682,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 #2f3625; 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: var(--text); 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 class="demo-title-text-ep1">Stranger Things - S4E1</option>
                                </select>
@@ -703,7 +706,7 @@
                                <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 #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">
+                                <div class="mock-input" style="flex: 1; background: var(--card); border: 1px solid #2f3625; color: var(--text); 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>
@@ -821,7 +824,7 @@
                            </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: #56ae6c; box-shadow: 0 0 8px #56ae6c;"></span>
-                                <span style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
+                                <span style="flex:1; font-size: 0.75rem; font-weight: 600; color: var(--text);">
                                    {{MOCK_27}}
                                </span>
                                <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">
@@ -1276,7 +1279,9 @@
                                            <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="#de7949"/>
+                                        <g class="film-hero-bird" stroke="#dbd7cd" stroke-width="1.2" fill="none" stroke-linecap="round">
+                                            <path d="M62,30 q5,-5 10,0 q5,-5 10,0"/>
+                                        </g>
                                    </svg>
                                </div>
                                <div class="player-controls">
@@ -1329,7 +1334,9 @@
                                            <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="#de7949"/>
+                                        <g class="film-hero-bird" stroke="#dbd7cd" stroke-width="1.2" fill="none" stroke-linecap="round">
+                                            <path d="M62,30 q5,-5 10,0 q5,-5 10,0"/>
+                                        </g>
                                    </svg>
                                </div>
                                <div class="player-controls">
@@ -1561,11 +1568,13 @@
        </div>
    </section>

+    </main>
+
    <footer>
        <div class="container">
            <p>&copy; 2026 KoalaSync. {{FOOTER_MIT}}</p>
            <p style="font-size: 0.8rem; margin-top: 0.5rem;">{{FOOTER_RAM}}</p>
-            <p style="font-size: 0.72rem; margin-top: 1.2rem; color: var(--text-muted); opacity: 0.65; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.5;">{{FOOTER_DISCLAIMER}}</p>
+            <p class="footer-disclaimer" style="font-size: 0.72rem; margin-top: 1.2rem; max-width: 650px; margin-left: auto; margin-right: auto; line-height: 1.5;">{{FOOTER_DISCLAIMER}}</p>
            <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                <a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
                <a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>