mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-31 21:21:41 +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
@@ -3898,3 +3898,141 @@ header[id] {
|
|||||||
background-color: var(--accent);
|
background-color: var(--accent);
|
||||||
box-shadow: 0 0 6px var(--accent-glow);
|
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); }
|
||||||
|
}
|
||||||
|
|||||||
+66
-33
@@ -1102,7 +1102,7 @@
|
|||||||
<span class="illus-browser-dot"></span>
|
<span class="illus-browser-dot"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="illus-browser-address-bar">
|
<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>
|
||||||
<div class="illus-browser-toolbar">
|
<div class="illus-browser-toolbar">
|
||||||
<div class="illus-extension-btn active">
|
<div class="illus-extension-btn active">
|
||||||
@@ -1111,42 +1111,29 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="illus-browser-content">
|
<div class="illus-browser-content">
|
||||||
<div class="illus-store-card">
|
<div class="illus-video-player-mock">
|
||||||
<div class="illus-store-card-header">
|
<div class="video-mock-play-button">▶</div>
|
||||||
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" class="illus-large-logo" width="30" height="30">
|
<div class="video-mock-timeline">
|
||||||
<div class="illus-store-info">
|
<div class="video-mock-timeline-fill"></div>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Floating Extension Success Popup -->
|
<!-- Floating Extension Success Popup (aligned as dropdown below icon) -->
|
||||||
<div class="illus-extension-popup">
|
<div class="illus-extension-popup drop-down">
|
||||||
<div class="popup-title">
|
<div class="popup-title">
|
||||||
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="12" height="12">
|
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="12" height="12">
|
||||||
<span>KoalaSync</span>
|
<span>KoalaSync</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="popup-status">
|
<div class="popup-status">
|
||||||
<div class="status-badge-success">
|
<div class="status-badge-select">
|
||||||
<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_DESC}}</span>
|
||||||
<span>{{STEP_1_ILLUS_ACTIVE}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="popup-quick-start">
|
<div class="popup-select-buttons">
|
||||||
<span>{{STEP_1_ILLUS_READY}}</span>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1162,15 +1149,38 @@
|
|||||||
<!-- Custom Step 3 Illustration -->
|
<!-- Custom Step 3 Illustration -->
|
||||||
<div class="step-illustration-3" data-reveal>
|
<div class="step-illustration-3" data-reveal>
|
||||||
<div class="illus-sync-theater">
|
<div class="illus-sync-theater">
|
||||||
<!-- Player A (🐶 HappyDog) -->
|
<!-- Player A (🐱 ChillCat) -->
|
||||||
<div class="illus-player-card player-a">
|
<div class="illus-player-card player-a">
|
||||||
<div class="player-header">
|
<div class="player-header">
|
||||||
<span class="player-user">🐶 HappyDog</span>
|
<span class="player-user">🐱 ChillCat</span>
|
||||||
<span class="player-badge active">PLAYING</span>
|
<span class="player-badge active">PLAYING</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="player-video-canvas">
|
<div class="player-video-canvas">
|
||||||
<div class="player-play-pulse">▶</div>
|
|
||||||
<div class="player-video-overlay"></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>
|
||||||
<div class="player-controls">
|
<div class="player-controls">
|
||||||
<span class="control-btn">⏸</span>
|
<span class="control-btn">⏸</span>
|
||||||
@@ -1192,15 +1202,38 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Player B (LaptopKoala) -->
|
<!-- Player B (🐶 HappyDog) -->
|
||||||
<div class="illus-player-card player-b">
|
<div class="illus-player-card player-b">
|
||||||
<div class="player-header">
|
<div class="player-header">
|
||||||
<span class="player-user">💻 LaptopKoala</span>
|
<span class="player-user">🐶 HappyDog</span>
|
||||||
<span class="player-badge active">PLAYING</span>
|
<span class="player-badge active">PLAYING</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="player-video-canvas">
|
<div class="player-video-canvas">
|
||||||
<div class="player-play-pulse">▶</div>
|
|
||||||
<div class="player-video-overlay"></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>
|
||||||
<div class="player-controls">
|
<div class="player-controls">
|
||||||
<span class="control-btn">⏸</span>
|
<span class="control-btn">⏸</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user