mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-06 17:37:43 +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);
|
||||
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>
|
||||
</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