mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-23 09:19:03 +00:00
website: Redesign Step 2 browser mockup as video player + select dropdown, and redesign Step 3 mockups to display matching forest movie
This commit is contained in:
KoalaDev
+66
-33
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user