mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
website: Hero layout and mock walkthrough visual optimizations
This commit is contained in:
KoalaDev
@@ -716,6 +716,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
setRoomJoined(true);
|
||||
setConnected(true);
|
||||
cursor.classList.remove('visible');
|
||||
scene.classList.add('demo-complete');
|
||||
showHint();
|
||||
};
|
||||
|
||||
|
||||
+102
-52
@@ -232,6 +232,22 @@ nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
.hero-grid {
|
||||
grid-template-columns: 1.35fr 1fr;
|
||||
gap: 3.5rem;
|
||||
}
|
||||
.cta-group {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.cta-group .btn {
|
||||
padding: 0.8rem 1.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
font-size: 4.5rem;
|
||||
font-weight: 800;
|
||||
@@ -579,6 +595,43 @@ nav {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.demo-room-empty {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 34px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.demo-room-empty img {
|
||||
border-radius: 10px;
|
||||
opacity: 0.85;
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
.demo-room-empty-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.demo-create-room-btn {
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.demo-create-room-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
.demo-create-room-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.mock-peer-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -3529,18 +3582,6 @@ header[id] {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Tiny abstract "movie": a walker strolls across, a ball bounces ahead.
|
||||
Pausing freezes every element mid-frame — on both tabs at once. */
|
||||
.demo-film {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Cinematic "movie" scene: a moonlit landscape with parallax mountains,
|
||||
twinkling stars, a glowing moon, and a drifting firefly. Every layer
|
||||
freezes when playback pauses — on both tabs at once. */
|
||||
.demo-film {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -3578,54 +3619,63 @@ header[id] {
|
||||
to { transform: translate(-6px, 3px); filter: drop-shadow(0 0 10px rgba(241,245,249,0.95)); }
|
||||
}
|
||||
|
||||
/* Mountain layers: subtle parallax sway (oscillates so it never runs off-edge) */
|
||||
.film-mtn-back {
|
||||
transform-box: fill-box;
|
||||
animation: filmMtnBack 24s ease-in-out infinite alternate;
|
||||
/* Parallax Forest Scroll Layers */
|
||||
@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); }
|
||||
}
|
||||
|
||||
@keyframes filmMtnBack {
|
||||
from { transform: translateX(-3px); }
|
||||
to { transform: translateX(3px); }
|
||||
.film-mtn-scroll {
|
||||
animation: scrollBack 12s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.film-mid-scroll {
|
||||
animation: scrollMid 6s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.film-fore-scroll {
|
||||
animation: scrollFore 3s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.film-bounce-ball {
|
||||
transform-origin: bottom center;
|
||||
animation: ballBounce 0.8s ease-in-out infinite;
|
||||
animation-play-state: paused;
|
||||
filter: drop-shadow(0 0 4px #fde047);
|
||||
}
|
||||
|
||||
.film-mtn-front {
|
||||
transform-box: fill-box;
|
||||
animation: filmMtnFront 16s ease-in-out infinite alternate;
|
||||
/* Playback state bindings for all animation layers */
|
||||
.demo-tab-card.playing .film-mtn-scroll,
|
||||
.demo-tab-card.playing .film-mid-scroll,
|
||||
.demo-tab-card.playing .film-fore-scroll,
|
||||
.demo-tab-card.playing .film-bounce-ball {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes filmMtnFront {
|
||||
from { transform: translateX(-5px); }
|
||||
to { transform: translateX(5px); }
|
||||
/* Play button pulsing indicator at the end of the walkthrough */
|
||||
.hero-demo-scene.demo-complete #demo-tab-a:not(.playing) .demo-icon-wrap {
|
||||
animation: playButtonPulse 1.6s ease-in-out infinite;
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 15px rgba(99, 102, 241, 0.8);
|
||||
}
|
||||
@keyframes playButtonPulse {
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
|
||||
50% { transform: scale(1.12); box-shadow: 0 0 20px rgba(99, 102, 241, 0.9); }
|
||||
}
|
||||
|
||||
/* Firefly: warm dot floating across the foreground */
|
||||
.film-firefly {
|
||||
animation: filmFireflyX 11s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes filmFireflyX {
|
||||
from { transform: translate(15px, 0); }
|
||||
to { transform: translate(145px, 0); }
|
||||
}
|
||||
|
||||
.film-firefly-light {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
animation: filmFireflyBob 2.6s ease-in-out infinite alternate;
|
||||
filter: drop-shadow(0 0 5px rgba(253, 224, 71, 0.95));
|
||||
}
|
||||
|
||||
@keyframes filmFireflyBob {
|
||||
from { transform: translateY(-4px) scale(0.9); opacity: 0.7; }
|
||||
to { transform: translateY(4px) scale(1.15); opacity: 1; }
|
||||
}
|
||||
|
||||
.demo-film * { animation-play-state: paused; }
|
||||
.demo-tab-card.playing .demo-film * { animation-play-state: running; }
|
||||
|
||||
/* Seek-reset: scrubbing restarts every film layer from frame zero so the
|
||||
jump reads as a real cut, not a silent time update. */
|
||||
/* Seek-reset: scrubbing restarts animations from frame zero */
|
||||
.demo-film.demo-reset * {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
+42
-12
@@ -333,11 +333,26 @@
|
||||
<circle class="film-star" cx="150" cy="12" r="0.5"/>
|
||||
</g>
|
||||
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
|
||||
<path class="film-mtn-back" d="M-12,66 L16,46 L40,60 L66,42 L94,58 L122,44 L150,60 L172,50 L172,92 L-12,92 Z" fill="rgba(30,27,75,0.7)"/>
|
||||
<path class="film-mtn-front" d="M-12,80 L14,66 L36,78 L60,62 L86,76 L112,64 L140,78 L172,68 L172,92 L-12,92 Z" fill="rgba(49,46,129,0.6)"/>
|
||||
<g class="film-firefly">
|
||||
<circle class="film-firefly-light" cx="0" cy="72" r="1.4" fill="#fde047"/>
|
||||
<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)"/>
|
||||
<polygon points="180,76 186,60 192,76" fill="rgba(49,46,129,0.55)"/>
|
||||
<polygon points="215,78 223,52 231,78" fill="rgba(49,46,129,0.55)"/>
|
||||
<polygon points="255,76 261,62 267,76" fill="rgba(49,46,129,0.55)"/>
|
||||
<polygon points="295,77 304,55 313,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"/>
|
||||
<polygon points="200,84 212,48 224,84" fill="#090d16"/>
|
||||
<polygon points="275,84 288,42 301,84" fill="#090d16"/>
|
||||
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#090d16"/>
|
||||
</g>
|
||||
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
|
||||
</svg>
|
||||
<div class="demo-play-overlay" aria-hidden="true">
|
||||
<span class="demo-icon-wrap">
|
||||
@@ -372,11 +387,26 @@
|
||||
<circle class="film-star" cx="150" cy="12" r="0.5"/>
|
||||
</g>
|
||||
<circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f1f5f9" opacity="0.92"/>
|
||||
<path class="film-mtn-back" d="M-12,66 L16,46 L40,60 L66,42 L94,58 L122,44 L150,60 L172,50 L172,92 L-12,92 Z" fill="rgba(30,27,75,0.7)"/>
|
||||
<path class="film-mtn-front" d="M-12,80 L14,66 L36,78 L60,62 L86,76 L112,64 L140,78 L172,68 L172,92 L-12,92 Z" fill="rgba(49,46,129,0.6)"/>
|
||||
<g class="film-firefly">
|
||||
<circle class="film-firefly-light" cx="0" cy="72" r="1.4" fill="#fde047"/>
|
||||
<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)"/>
|
||||
<polygon points="180,76 186,60 192,76" fill="rgba(49,46,129,0.55)"/>
|
||||
<polygon points="215,78 223,52 231,78" fill="rgba(49,46,129,0.55)"/>
|
||||
<polygon points="255,76 261,62 267,76" fill="rgba(49,46,129,0.55)"/>
|
||||
<polygon points="295,77 304,55 313,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"/>
|
||||
<polygon points="200,84 212,48 224,84" fill="#090d16"/>
|
||||
<polygon points="275,84 288,42 301,84" fill="#090d16"/>
|
||||
<path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#090d16"/>
|
||||
</g>
|
||||
<circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#fde047"/>
|
||||
</svg>
|
||||
<div class="demo-play-overlay" aria-hidden="true">
|
||||
<span class="demo-icon-wrap">
|
||||
@@ -410,10 +440,10 @@
|
||||
<!-- ROOM TAB -->
|
||||
<div id="mock-room" class="mock-screen active">
|
||||
<!-- Pre-room state, shown only during the scripted walkthrough -->
|
||||
<div id="demo-room-empty" style="display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 34px 10px; text-align: center;">
|
||||
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="" width="42" height="42" style="border-radius: 10px; opacity: 0.85;" loading="eager" decoding="async">
|
||||
<div style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">{{DEMO_NO_ROOM}}</div>
|
||||
<button id="demo-create-room" class="mock-btn" type="button" style="background: var(--accent); border: none; color: white; font-weight: 700; padding: 10px 18px; border-radius: 10px; cursor: pointer;">{{DEMO_CREATE_ROOM}}</button>
|
||||
<div id="demo-room-empty" class="demo-room-empty">
|
||||
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="" width="42" height="42" loading="eager" decoding="async">
|
||||
<div class="demo-room-empty-text">{{DEMO_NO_ROOM}}</div>
|
||||
<button id="demo-create-room" class="demo-create-room-btn" type="button">{{DEMO_CREATE_ROOM}}</button>
|
||||
</div>
|
||||
<div id="demo-room-joined">
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user