gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-08-20 16:12:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: refine landing page demo experience

Browse Source
This commit is contained in:
KoalaDev
2026-07-07 01:49:25 +02:00
parent e093a8afae
commit 78efb04b6a
21 changed files with 556 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/template.html
+25 -8
View File
@@ -314,6 +314,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<span>GitHub</span>
</a>
<button class="btn btn-secondary btn-demo-mobile" id="mobile-demo-open" type="button" aria-haspopup="dialog" aria-controls="mobile-demo-modal">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
<span>{{MOBILE_DEMO_CTA}}</span>
</button>
</div>
<p class="cta-trust">{{HERO_TRUST}}</p>
</div>
@@ -724,6 +728,19 @@
</div>
</header>
<div class="mobile-demo-modal" id="mobile-demo-modal" hidden>
<div class="mobile-demo-backdrop" data-mobile-demo-close></div>
<div class="mobile-demo-panel" role="dialog" aria-modal="true" aria-labelledby="mobile-demo-title">
<div class="mobile-demo-header">
<h2 id="mobile-demo-title">{{MOBILE_DEMO_TITLE}}</h2>
<button class="mobile-demo-close" id="mobile-demo-close" type="button" aria-label="{{MOBILE_DEMO_CLOSE}}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
</div>
<div class="mobile-demo-stage" id="mobile-demo-stage"></div>
</div>
</div>
<section class="compat-section">
<div class="container">
<img src="{{ASSET_PATH}}assets/PlatformJuggler_New-1x.webp" srcset="{{ASSET_PATH}}assets/PlatformJuggler_New-1x.webp 368w, {{ASSET_PATH}}assets/PlatformJuggler_New.webp 643w" sizes="(max-width: 768px) calc(100vw - 2rem), 368px" alt="A cute koala juggling multiple browser tabs showing streaming platforms" class="compat-mascot" width="300" height="233" loading="lazy" fetchpriority="low" data-reveal>
@@ -747,6 +764,10 @@
<img src="{{ASSET_PATH}}assets/primevideo.svg" alt="Prime Video" width="24" height="24">
<span>Prime Video</span>
</div>
<div class="compat-logo compat-logo-disneyplus">
<img class="compat-logo-wide compat-logo-disneyplus-mark" src="{{ASSET_PATH}}assets/disneyplus.svg" alt="Disney+" width="76" height="36">
<span>Disney+</span>
</div>
<div class="compat-logo">
<img src="{{ASSET_PATH}}assets/jellyfin.svg" alt="Jellyfin" width="24" height="24">
<span>Jellyfin</span>
@@ -774,7 +795,7 @@
<p class="section-subtitle" data-reveal style="text-align: center; color: var(--text-muted); margin-bottom: 3.5rem; max-width: 600px; margin-left: auto; margin-right: auto;">
<span>{{WHY_SUBTITLE}}</span>
</p>
<div class="use-cases-grid">
<div class="use-cases-grid use-cases-feature-grid">
<div class="use-case-card" data-reveal>
<img src="{{ASSET_PATH}}assets/PopcornFriends-1x.webp" srcset="{{ASSET_PATH}}assets/PopcornFriends-1x.webp 272w, {{ASSET_PATH}}assets/PopcornFriends.webp 543w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="{{USE_CASE_1_ALT}}" class="use-case-image" width="272" height="150" loading="lazy" fetchpriority="low">
<h3>
@@ -796,11 +817,8 @@
</h3>
<p>{{USE_CASE_3_DESC}}</p>
</div>
</div>
<div id="features" class="features-grid features-grid-combined">
<!-- Tile 1: Instant Invites / 1-Click Join -->
<div class="feature-card" data-reveal>
<div id="features" class="feature-card feature-card-compact" data-reveal>
<h3>
<span class="feature-icon-svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
@@ -811,7 +829,7 @@
</div>
<!-- Tile 2: Volume Leveling / Audio Compressor -->
<div class="feature-card" data-reveal>
<div class="feature-card feature-card-compact" data-reveal>
<h3>
<span class="feature-icon-svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M11 5 6 9H2v6h4l5 4V5z"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
@@ -822,7 +840,7 @@
</div>
<!-- Tile 3: Universal HTML5 Support -->
<div class="feature-card" data-reveal>
<div class="feature-card feature-card-compact" data-reveal>
<h3>
<span class="feature-icon-svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
@@ -831,7 +849,6 @@
</h3>
<p>{{FEATURE_4_DESC}}</p>
</div>
</div>
</div>
</section>