From c8df8b6d08821c90942d29bb62f6bc6eceeb6917 Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Fri, 3 Jul 2026 11:22:10 +0200
Subject: [PATCH] website: Redesign Step 2 browser mockup as video player +
 select dropdown, and redesign Step 3 mockups to display matching forest movie

---
 website/style.css     | 138 ++++++++++++++++++++++++++++++++++++++++++
 website/template.html |  99 ++++++++++++++++++++----------
 2 files changed, 204 insertions(+), 33 deletions(-)

diff --git a/website/style.css b/website/style.css
index 7a7aa0f..7cf8fa1 100644
--- a/website/style.css
+++ b/website/style.css
@@ -3898,3 +3898,141 @@ header[id] {
     background-color: var(--accent);
     box-shadow: 0 0 6px var(--accent-glow);
 }
+
+/* --- Step 2 & Step 3 Visual Redesign Styles --- */
+
+/* Step 2 Browser video player mock */
+.illus-video-player-mock {
+    width: 85%;
+    height: 65%;
+    background: linear-gradient(135deg, #1e1b4b, #090514);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: 15px;
+}
+
+.video-mock-play-button {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 0.8rem;
+    cursor: default;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.video-mock-timeline {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    right: 8px;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 2px;
+}
+
+.video-mock-timeline-fill {
+    width: 35%;
+    height: 100%;
+    background: var(--accent);
+    border-radius: 2px;
+}
+
+/* Step 2 extension popup dropdown alignment */
+.illus-extension-popup.drop-down {
+    top: 2.2rem;
+    right: 0.6rem;
+    width: 145px;
+    animation: popup-dropdown-float 4s ease-in-out infinite;
+}
+
+@keyframes popup-dropdown-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-3px); }
+}
+
+.status-badge-select {
+    background: rgba(99, 102, 241, 0.12);
+    color: #c7d2fe;
+    font-size: 0.58rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    display: inline-flex;
+    align-items: center;
+    text-transform: uppercase;
+    letter-spacing: 0.2px;
+}
+
+.popup-select-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 8px;
+    width: 100%;
+}
+
+.popup-select-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 6px;
+    background: rgba(99, 102, 241, 0.15);
+    border: 1px solid rgba(99, 102, 241, 0.35);
+    border-radius: 6px;
+    font-size: 0.6rem;
+    font-weight: 700;
+    color: white;
+    cursor: default;
+    box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
+    animation: tab-select-pulse 1.8s infinite alternate;
+}
+
+@keyframes tab-select-pulse {
+    0% { box-shadow: 0 0 4px rgba(99, 102, 241, 0.2); transform: scale(1); }
+    100% { box-shadow: 0 0 12px rgba(99, 102, 241, 0.5); transform: scale(1.02); }
+}
+
+/* Step 3 forest movie continuous animation bindings */
+.step-illustration-3 .film-mtn-scroll {
+    animation: scrollBack 12s linear infinite !important;
+}
+.step-illustration-3 .film-mid-scroll {
+    animation: scrollMid 6s linear infinite !important;
+}
+.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;
+}
+
+@keyframes scrollBack {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-160px); }
+}
+@keyframes scrollMid {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-160px); }
+}
+@keyframes scrollFore {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-160px); }
+}
+@keyframes ballBounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-16px); }
+}
diff --git a/website/template.html b/website/template.html
index 5d57f39..ad6fec7 100644
--- a/website/template.html
+++ b/website/template.html
@@ -1102,7 +1102,7 @@
                                     <span class="illus-browser-dot"></span>
                                 </div>
                                 <div class="illus-browser-address-bar">
-                                    <span class="url-protocol">https://</span>sync.koalastuff.net
+                                    <span class="url-protocol">https://</span>youtube.com/watch?v=5xkoala
                                 </div>
                                 <div class="illus-browser-toolbar">
                                     <div class="illus-extension-btn active">
@@ -1111,42 +1111,29 @@
                                 </div>
                             </div>
                             <div class="illus-browser-content">
-                                <div class="illus-store-card">
-                                    <div class="illus-store-card-header">
-                                        <img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" class="illus-large-logo" width="30" height="30">
-                                        <div class="illus-store-info">
-                                            <div class="illus-store-title">KoalaSync</div>
-                                            <div class="illus-store-desc">
-                                                <span>{{STEP_1_ILLUS_DESC}}</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="illus-store-buttons">
-                                        <div class="illus-store-btn chrome">
-                                            <img src="{{ASSET_PATH}}assets/chrome.svg" alt="Chrome Logo" width="12" height="12">
-                                            <span>{{STEP_1_ILLUS_DL_CHROME}}</span>
-                                        </div>
-                                        <div class="illus-store-btn firefox">
-                                            <img src="{{ASSET_PATH}}assets/firefox.svg" alt="Firefox Logo" width="12" height="12">
-                                            <span>{{STEP_1_ILLUS_DL_FIREFOX}}</span>
-                                        </div>
+                                <div class="illus-video-player-mock">
+                                    <div class="video-mock-play-button">▶</div>
+                                    <div class="video-mock-timeline">
+                                        <div class="video-mock-timeline-fill"></div>
                                     </div>
                                 </div>
                                 
-                                <!-- Floating Extension Success Popup -->
-                                <div class="illus-extension-popup">
+                                <!-- Floating Extension Success Popup (aligned as dropdown below icon) -->
+                                <div class="illus-extension-popup drop-down">
                                     <div class="popup-title">
                                         <img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="12" height="12">
                                         <span>KoalaSync</span>
                                     </div>
                                     <div class="popup-status">
-                                        <div class="status-badge-success">
-                                            <span class="status-check"><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" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></span>
-                                            <span>{{STEP_1_ILLUS_ACTIVE}}</span>
+                                        <div class="status-badge-select">
+                                            <span>{{STEP_1_ILLUS_DESC}}</span>
                                         </div>
                                     </div>
-                                    <div class="popup-quick-start">
-                                        <span>{{STEP_1_ILLUS_READY}}</span>
+                                    <div class="popup-select-buttons">
+                                        <div class="popup-select-btn">
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="10" height="10" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg>
+                                            <span>{{STEP_1_ILLUS_DL_CHROME}}</span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -1162,15 +1149,38 @@
                     <!-- Custom Step 3 Illustration -->
                     <div class="step-illustration-3" data-reveal>
                         <div class="illus-sync-theater">
-                            <!-- Player A (🐶 HappyDog) -->
+                            <!-- Player A (🐱 ChillCat) -->
                             <div class="illus-player-card player-a">
                                 <div class="player-header">
-                                    <span class="player-user">🐶 HappyDog</span>
+                                    <span class="player-user">🐱 ChillCat</span>
                                     <span class="player-badge active">PLAYING</span>
                                 </div>
                                 <div class="player-video-canvas">
-                                    <div class="player-play-pulse">▶</div>
                                     <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">
+                                            <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)"/>
+                                        <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)"/>
+                                        </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"/>
+                                        </g>
+                                        <circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
+                                    </svg>
                                 </div>
                                 <div class="player-controls">
                                     <span class="control-btn">⏸</span>
@@ -1192,15 +1202,38 @@
                                 </div>
                             </div>
                             
-                            <!-- Player B (LaptopKoala) -->
+                            <!-- Player B (🐶 HappyDog) -->
                             <div class="illus-player-card player-b">
                                 <div class="player-header">
-                                    <span class="player-user">💻 LaptopKoala</span>
+                                    <span class="player-user">🐶 HappyDog</span>
                                     <span class="player-badge active">PLAYING</span>
                                 </div>
                                 <div class="player-video-canvas">
-                                    <div class="player-play-pulse">▶</div>
                                     <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">
+                                            <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)"/>
+                                        <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)"/>
+                                        </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"/>
+                                        </g>
+                                        <circle class="film-bounce-ball" cx="80" cy="80" r="4.5" fill="#fde047"/>
+                                    </svg>
                                 </div>
                                 <div class="player-controls">
                                     <span class="control-btn">⏸</span>