From 3644a7b8acc1cf55a236cf972e8c6f9bf843d835 Mon Sep 17 00:00:00 2001
From: Koala <6156589+Shik3i@users.noreply.github.com>
Date: Sat, 30 May 2026 13:14:47 +0200
Subject: [PATCH] website: refactor interactive extension mockup and align
 styling with popup UI

- Update mockup tabs layout, colors, inputs, cards, and spacing to perfectly mirror popup.html 1-to-1.
- Enable full interactivity for toggle switches in Settings mockup screen.
- Link the top mockup version badge directly to the GitHub repository with smooth CSS hover transitions and cursor pointer.
- Port all hover tooltips (title attributes) from popup.html to the mockup index.html.
- Add mandatory caveman communication protocol to AI_INIT.md onboarding instructions.
---
 AI_INIT.md         |   3 +
 website/index.html | 217 ++++++++++++++++++++++++++++++++++-----------
 website/style.css  | 137 +++++++++++++++++++++-------
 3 files changed, 272 insertions(+), 85 deletions(-)

diff --git a/AI_INIT.md b/AI_INIT.md
index 4b335d9..f4aa2f5 100644
--- a/AI_INIT.md
+++ b/AI_INIT.md
@@ -5,6 +5,9 @@ Welcome to the KoalaSync project. This file is the primary entry point for any d
 > [!IMPORTANT]
 > **Privacy & Data Sovereignty**: KoalaSync follows a strict **Zero-External-Requests Policy**: The extension and website must not make requests to any third-party domains (Google Fonts, CDNs, etc.). All assets (fonts, icons, scripts) must be self-hosted or use system defaults.
 > - **Font Stack**: Use a modern system font stack (e.g., -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif) to maintain a premium look without external dependencies. Prohibit the use of `@import` or `<link>` for external font services.
+> 
+> [!IMPORTANT]
+> **Caveman Communication Protocol**: To conserve context window and tokens, AI agents MUST communicate with the user in **caveman language** (broken, short German/English hybrid caveman style, e.g., "Ich Antigravity. Ich machen Git pull. Code fertig.") at all times. This rule is highly strict and must NOT be broken under any circumstances unless the user explicitly requests to drop it.
 
 ---
 
diff --git a/website/index.html b/website/index.html
index 43aff80..a895f05 100644
--- a/website/index.html
+++ b/website/index.html
@@ -100,20 +100,23 @@
             <!-- Interactive CSS Extension Mockup -->
             <div class="hero-mockup-wrapper" data-reveal>
                 <div class="extension-mockup">
-                    <div class="mock-header">
-                        <img src="assets/logo.png" alt="KoalaSync" width="20" height="20">
-                        <span>KOALASYNC</span>
+                    <div class="mock-header-row">
+                        <h1><img src="assets/logo.png" alt="KoalaSync Logo">KoalaSync</h1>
+                        <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
+                            <svg viewBox="0 0 16 16" fill="currentColor" style="width: 12px; height: 12px; display: block;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+                            <span>v1.9.3</span>
+                        </a>
                     </div>
                     <div class="mock-tabs">
-                        <button class="mock-tab active" data-target="mock-room">Room</button>
-                        <button class="mock-tab" data-target="mock-sync">Sync</button>
-                        <button class="mock-tab" data-target="mock-settings">Settings</button>
-                        <button class="mock-tab" data-target="mock-dev">Dev</button>
+                        <button class="mock-tab active" data-target="mock-room" title="Room settings and connection">Room</button>
+                        <button class="mock-tab" data-target="mock-sync" title="Video sync controls and remote actions">Sync</button>
+                        <button class="mock-tab" data-target="mock-settings" title="Extension preferences">Settings</button>
+                        <button class="mock-tab" data-target="mock-dev" title="Advanced Diagnostics & Logs">Status</button>
                     </div>
                     <div class="mock-body">
                         <!-- ROOM TAB -->
                         <div id="mock-room" class="mock-screen active">
-                            <div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;">
+                            <div class="mock-joined-room" style="display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--accent); padding: 8px 10px; background: var(--card); border-radius: 8px; margin-bottom: 12px;" title="The room you are currently connected to">
                                 <div style="display: flex; flex-direction: column;">
                                     <span style="font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; line-height: 1;"><span lang="en">Active Room</span><span lang="de">Aktiver Raum</span></span>
                                     <span class="mock-room-name" style="font-weight: 700; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.5px; margin-top: 2px;">brave-eagle-80</span>
@@ -121,14 +124,14 @@
                                 <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);"><span lang="en">Official Server</span><span lang="de">Offizieller Server</span></span>
                             </div>
                             <div class="mock-card">
-                                <div class="mock-label"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
+                                <div class="mock-label" title="Share this link with friends so they can join"><span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span></div>
                                 <div class="mock-invite-box">
-                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join.html#join:brave-eagle-80:pass" readonly>
-                                    <button class="mock-btn" style="padding: 0.35rem 0.5rem;"><span lang="en">Copy</span><span lang="de">Kopieren</span></button>
+                                    <input type="text" class="mock-input" value="https://sync.koalastuff.net/join.html#join:brave-eagle-80:pass" readonly style="flex: 1;">
+                                    <button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link">📋</button>
                                 </div>
                             </div>
                             <div class="mock-card" style="margin-bottom: 12px;">
-                                <div class="mock-label"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
+                                <div class="mock-label" title="Other users currently connected to this room"><span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span></div>
                                 <div class="mock-peer-list">
                                     <div class="mock-peer-item">
                                         <div class="mock-peer-header">
@@ -154,7 +157,7 @@
                         <!-- SYNC TAB -->
                         <div id="mock-sync" class="mock-screen">
                             <div class="mock-form-group" style="margin-bottom: 12px;">
-                                <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
+                                <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;" title="Choose the browser tab containing the video to sync">
                                     <span lang="en">Select Video</span><span lang="de">Video auswählen</span>
                                 </label>
                                 <select class="mock-input" 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;">
@@ -162,103 +165,211 @@
                                 </select>
                             </div>
                             
-                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
-                                <span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
-                            </label>
-                            <div style="display: flex; gap: 8px; margin-bottom: 12px;">
-                                <button class="mock-btn mock-btn-play" style="flex: 1; background: #22c55e; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;"><span lang="en">▶ Play</span><span lang="de">▶ Start</span></button>
-                                <button class="mock-btn mock-btn-pause" style="flex: 1; background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer;"><span lang="en">⏸ Pause</span><span lang="de">⏸ Pause</span></button>
+                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;">
+                                    <span lang="en">Remote Control</span><span lang="de">Fernsteuerung</span>
+                                </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">
+                                    <span>📋</span>
+                                    <span lang="en">Invite Link</span><span lang="de">Einladungs-Link</span>
+                                </button>
+                            </div>
+                            <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+                                <button class="mock-btn mock-btn-play" 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"><span lang="en">▶ Play</span><span lang="de">▶ Start</span></button>
+                                <button class="mock-btn mock-btn-pause" 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"><span lang="en">⏸ Pause</span><span lang="de">⏸ Pause</span></button>
+                            </div>
+                            
+                            <div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
+                                <button class="mock-btn" 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">
+                                    <span lang="en">⚡ SYNC</span><span lang="de">⚡ SYNC</span>
+                                </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">
+                                    <span>
+                                        <span lang="en">Jump to Others</span><span lang="de">Zu anderen springen</span>
+                                    </span>
+                                    <span style="font-size: 0.5rem; opacity: 0.6;">▼</span>
+                                </div>
                             </div>
-                            <button class="mock-btn mock-btn-force" style="background: linear-gradient(135deg, #6366f1, #a855f7); width: 100%; padding: 10px; color: white; border: none; font-weight: 700; border-radius: 8px; margin-bottom: 15px; cursor: pointer;">
-                                <span lang="en">⚡ Sync All Viewers</span><span lang="de">⚡ Alle synchronisieren</span>
-                            </button>
 
-                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
+                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;" title="Shows the most recent play, pause, or seek command">
                                 <span lang="en">Last Activity Status</span><span lang="de">Letzte Aktivität</span>
                             </label>
-                            <div class="mock-card" style="margin-bottom: 15px; min-height: 70px; background: var(--card); border: 1px solid #334155; padding: 10px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; gap: 4px;">
-                                <div style="display: flex; justify-content: space-between; align-items: center;">
-                                    <span style="font-weight: 700; color: #ef4444; font-size: 0.8rem;">PAUSE</span>
-                                    <span style="font-size: 0.65rem; color: #22c55e; font-weight: 700;">● In Sync</span>
+                            <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-size: 9px; color: var(--text-muted);">CoolUsername @ 12:44:32</span>
                                 </div>
-                                <div style="font-size: 0.7rem; color: var(--text-muted); margin-top: 2px;">
-                                    <span lang="en">Pause triggered by CoolUsername</span><span lang="de">Pause ausgelöst durch CoolUsername</span>
+                                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; margin-top: 4px;">
+                                    <div style="display: flex; flex-direction: column; align-items: center;">
+                                        <div style="width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: white; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; margin-bottom: 1px;">✓</div>
+                                        <span style="font-size: 7px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36px;">🐨 KoalaPC</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Episode Auto-Sync Lobby Status Mockup -->
+                            <div class="mock-card" style="margin-bottom: 15px; border-left: 4px solid #fbbf24; background: var(--card); padding: 8px 10px; border-radius: 8px;">
+                                <div style="display:flex; align-items:center; gap: 6px; margin-bottom: 4px;">
+                                    <span style="font-size: 0.8rem;">⏳</span>
+                                    <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;">
+                                    🎬 Stranger Things - S4E2
+                                </div>
+                                <div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
+                                    <span lang="en">Waiting for 1 peer (KoalaPC)...</span><span lang="de">Warten auf 1 Partner (KoalaPC)...</span>
+                                </div>
+                                <button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
+                                    <span lang="en">Skip & Play anyway</span><span lang="de">Überspringen & abspielen</span>
+                                </button>
+                            </div>
+
+                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;" title="Other users currently connected to this room">
+                                <span lang="en">Peers in Room</span><span lang="de">Teilnehmer im Raum</span>
+                            </label>
+                            <div class="mock-card" style="margin-bottom: 12px;">
+                                <div class="mock-peer-list">
+                                    <div class="mock-peer-item">
+                                        <div class="mock-peer-header">
+                                            <span class="mock-peer-name">CoolUsername</span>
+                                            <span class="mock-peer-meta"><span lang="en">YOU</span><span lang="de">ICH</span></span>
+                                        </div>
+                                        <div class="mock-peer-tab">🎬 Stranger Things - S4E1</div>
+                                        <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                    </div>
+                                    <div class="mock-peer-item">
+                                        <div class="mock-peer-header">
+                                            <span class="mock-peer-name">KoalaPC</span>
+                                            <span class="mock-peer-meta"><span lang="en">Peer</span><span lang="de">Partner</span></span>
+                                        </div>
+                                        <div class="mock-peer-tab">🎬 Stranger Things - S4E1</div>
+                                        <div class="mock-peer-status"><span style="color:#22c55e;">●</span> 0:55 • <span lang="en">Playing</span><span lang="de">Wiedergabe</span></div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
 
                         <!-- SETTINGS TAB -->
                         <div id="mock-settings" class="mock-screen">
-                            <div class="mock-form-group" style="margin-bottom: 12px;">
-                                <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
+                            <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;">
+                                <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Username helps others identify you.">
                                     <span lang="en">Your Username</span><span lang="de">Dein Benutzername</span>
                                 </label>
-                                <input type="text" class="mock-input" value="CoolUsername" readonly style="width:100%; box-sizing:border-box; background: var(--card); border: 1px solid #334155; color: white; padding: 8px; border-radius: 8px;">
+                                <input type="text" class="mock-input" value="CoolUsername" 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: 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #334155;">
-                                <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: pointer;" for="chk-noise">
-                                    <span lang="en">Show Video Tabs Only</span><span lang="de">Nur Video-Tabs anzeigen</span>
+                            <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;">
+                                <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">
+                                    <span lang="en">Hide Clutter Tabs</span><span lang="de">Noise-Filterung</span>
+                                </label>
+                                <label class="mock-toggle-switch">
+                                    <input type="checkbox" checked>
+                                    <span class="mock-slider"></span>
                                 </label>
-                                <input type="checkbox" id="chk-noise" checked disabled style="width: auto; cursor: not-allowed;">
                             </div>
 
-                            <div style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
-                                <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; cursor: pointer;" for="chk-binge">
+                            <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;">
+                                <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.">
                                     <span lang="en">Auto-Sync Next Episode</span><span lang="de">Nächste Folge auto-syncen</span>
                                 </label>
-                                <input type="checkbox" id="chk-binge" checked disabled style="width: auto; cursor: not-allowed;">
+                                <label class="mock-toggle-switch">
+                                    <input type="checkbox" checked>
+                                    <span class="mock-slider"></span>
+                                </label>
                             </div>
 
-                            <div style="font-size: 0.65rem; color: var(--text-muted); padding: 4px; line-height: 1.3;">
-                                <p style="margin: 2px 0;">• <span lang="en">Username helps others identify you.</span><span lang="de">Benutzername hilft anderen, dich zu erkennen.</span></p>
-                                <p style="margin: 2px 0;">• <span lang="en">Noise filtering hides common non-video sites.</span><span lang="de">Noise-Filterung blendet allgemeine Seiten aus.</span></p>
+                            <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;">
+                                <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.">
+                                    <span lang="en">Auto-Copy Invite Link</span><span lang="de">Link auto-kopieren</span>
+                                </label>
+                                <label class="mock-toggle-switch">
+                                    <input type="checkbox" checked>
+                                    <span class="mock-slider"></span>
+                                </label>
                             </div>
 
-                            <div style="margin-top: auto; padding-top: 8px; border-top: 1px solid #334155;">
-                                <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
+                            <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;">
+                                <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.">
+                                    <span lang="en">Browser Notifications</span><span lang="de">Browser-Meldungen</span>
+                                </label>
+                                <label class="mock-toggle-switch">
+                                    <input type="checkbox">
+                                    <span class="mock-slider"></span>
+                                </label>
+                            </div>
+
+                            <div style="margin-top: 15px; padding-top: 8px; border-top: 1px solid #334155;">
+                                <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;" title="Tools for fixing connection issues">
                                     <span lang="en">Troubleshooting</span><span lang="de">Fehlerbehebung</span>
                                 </label>
-                                <button class="mock-btn" style="background:#334155; width:100%; border: none; padding: 8px; border-radius: 8px; color: white; font-weight: 600; cursor: pointer;">
+                                <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">
                                     <span lang="en">Regenerate Peer ID</span><span lang="de">Peer ID regenerieren</span>
                                 </button>
+                                <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center; margin-bottom: 0;">
+                                    <span lang="en">Use this if you see "Duplicate Identity" errors.</span>
+                                    <span lang="de">Nutze dies bei "Duplicate Identity" Fehlern.</span>
+                                </p>
                             </div>
                         </div>
 
                         <!-- DEV TAB -->
                         <div id="mock-dev" class="mock-screen">
-                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
+                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;" title="Current WebSocket connection state">
                                 <span lang="en">Connection Status</span><span lang="de">Verbindungsstatus</span>
                             </label>
-                            <div style="display:flex; align-items:center; gap: 10px; background: var(--card); border: 1px solid #334155; padding: 10px; border-radius: 8px; margin-bottom: 12px;">
+                            <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 style="flex:1; font-size: 0.75rem; font-weight: 600; color: white;">
                                     <span lang="en">Connected</span><span lang="de">Verbunden</span>
                                 </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;">
+                                <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">
                                     <span lang="en">Copy Logs</span><span lang="de">Logs kopieren</span>
                                 </button>
                             </div>
 
-                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
+                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;" title="Technical details about the currently selected video element">
                                 <span lang="en">Video Debug Info</span><span lang="de">Video-Debug-Info</span>
                             </label>
-                            <div style="background: var(--card); border: 1px solid #334155; padding: 10px; border-radius: 8px; font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
+                            <div class="mock-card" style="font-size: 0.65rem; font-family: monospace; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px;">
                                 <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>
 
-                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;">
-                                <span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
+                            <label style="display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 700;" title="Chronological log of all sync commands in the room">
+                                <span lang="en">Full Action History</span><span lang="de">Aktivitätsverlauf</span>
                             </label>
-                            <div style="max-height: 75px; overflow-y: auto; font-size: 0.6rem; font-family: monospace; background: #000; padding: 8px; border-radius: 8px; color: #ccc; line-height: 1.4;">
+                            <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;">
+                                    <span>CoolUsername: PAUSE</span>
+                                    <span style="opacity: 0.5;">0:55</span>
+                                </div>
+                                <div style="display: flex; justify-content: space-between; padding-top: 2px;">
+                                    <span>KoalaPC: PLAY</span>
+                                    <span style="opacity: 0.5;">0:00</span>
+                                </div>
+                            </div>
+
+                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                                <label style="margin: 0; font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700;" title="Technical connection logs for debugging">
+                                    <span lang="en">Logs (Last 50)</span><span lang="de">Protokoll (Letzte 50)</span>
+                                </label>
+                                <button class="mock-btn" style="background:transparent; border:none; color:var(--accent); font-size:10px; cursor:default; padding: 0; font-weight: 700;" title="Clear log output">
+                                    <span lang="en">CLEAR</span><span lang="de">LÖSCHEN</span>
+                                </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>[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>
                             </div>
+
+                            <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
+                                <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;">v1.9.3</div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/website/style.css b/website/style.css
index 083162a..74464a7 100644
--- a/website/style.css
+++ b/website/style.css
@@ -274,48 +274,77 @@ nav {
     overflow: hidden;
     position: relative;
     user-select: none;
+    padding: 16px;
+    padding-bottom: 0;
+    box-sizing: border-box;
 }
 
-.mock-header {
-    background: #1e293b;
-    padding: 0.85rem 1rem;
+.mock-header-row {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    margin-bottom: 16px;
+    flex-shrink: 0;
 }
 
-.mock-header img {
-    width: 20px;
-    height: 20px;
-}
-
-.mock-header span {
+.mock-header-row h1 {
+    font-size: 18px;
+    margin: 0;
+    color: var(--accent);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
     font-weight: 800;
-    font-size: 0.95rem;
-    letter-spacing: 0.5px;
-    color: var(--text);
+}
+
+.mock-header-row h1 img {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+    border-radius: 4px;
+}
+
+.mock-version-link {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    color: var(--text-muted);
+    text-decoration: none;
+    opacity: 0.5;
+    transition: opacity 0.2s, color 0.2s;
+    cursor: pointer;
+}
+
+.mock-version-link:hover {
+    opacity: 1;
+    color: var(--accent);
 }
 
 .mock-tabs {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    display: flex;
+    gap: 4px;
     background: #1e293b;
-    padding: 0.25rem;
-    gap: 0.25rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    padding: 4px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    flex-shrink: 0;
 }
 
 .mock-tab {
+    flex: 1;
     background: none;
     border: none;
     color: var(--text-muted);
     font-size: 0.75rem;
     font-weight: 600;
-    padding: 0.4rem 0;
+    padding: 8px 4px;
     cursor: pointer;
-    border-radius: 6px;
+    border-radius: 8px;
     transition: all 0.2s;
+    text-align: center;
 }
 
 .mock-tab:hover {
@@ -330,10 +359,10 @@ nav {
 .mock-body {
     flex: 1;
     overflow-y: auto;
-    padding: 0.95rem;
+    padding: 0;
+    padding-bottom: 16px;
     display: flex;
     flex-direction: column;
-    gap: 0.85rem;
     font-size: 0.8rem;
     scrollbar-width: none; /* Firefox */
 }
@@ -345,8 +374,7 @@ nav {
 .mock-screen {
     display: none;
     flex-direction: column;
-    gap: 0.85rem;
-    height: 100%;
+    gap: 12px;
 }
 
 .mock-screen.active {
@@ -356,9 +384,9 @@ nav {
 /* Common Mockup Components */
 .mock-card {
     background: #1e293b;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 10px;
-    padding: 0.75rem;
+    border: 1px solid #334155;
+    border-radius: 8px;
+    padding: 12px;
 }
 
 .mock-label {
@@ -371,11 +399,11 @@ nav {
 }
 
 .mock-input {
-    background: #0f172a;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 6px;
+    background: #1e293b;
+    border: 1px solid #334155;
+    border-radius: 8px;
     color: white;
-    padding: 0.45rem;
+    padding: 8px 10px;
     font-size: 0.75rem;
     width: 100%;
     outline: none;
@@ -561,6 +589,51 @@ nav {
     margin-top: 0.1rem;
 }
 
+/* Mock Toggle Switch Details */
+.mock-toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 20px;
+    flex-shrink: 0;
+}
+
+.mock-toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.mock-slider {
+    position: absolute;
+    cursor: default;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #334155;
+    transition: .3s;
+    border-radius: 20px;
+}
+
+.mock-slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    left: 3px;
+    bottom: 3px;
+    background-color: #94a3b8;
+    transition: .3s;
+    border-radius: 50%;
+}
+
+input:checked + .mock-slider {
+    background-color: var(--accent);
+}
+
+input:checked + .mock-slider:before {
+    transform: translateX(16px);
+    background-color: white;
+}
+
 /* Dev Tab Details */
 .mock-diagnostic-grid {
     display: grid;