mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-22 08:56:36 +00:00
feat: browser-aware CTAs, tidier hero demo, comparison guides link
- Hero CTAs: the install buttons are compact (just the browser name) so all three fit one line; JS detects the visitor's browser and expands that one to the full "Add to X" call to action. Unknown browsers stay compact. - Hero demo: caption now sits directly under the two windows (absolutely positioned to the card cascade) instead of far below the tall scene. The scene keeps a fixed height that already fits the open popup, so the vertically centered hero never jumps when the popup toggles. - The background window now also shows a (non-interactive) extension icon, making it clear both browsers have KoalaSync installed. - Escape now also closes the demo popup. - Added a link from the comparison table to the fuller alternatives/guides hub, localized in all 15 languages. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
+21
-10
@@ -300,17 +300,19 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="cta-group">
|
||||
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
|
||||
<img src="{{ASSET_PATH}}assets/chrome.svg" alt="Chrome" width="20" height="20">
|
||||
<span>{{ADD_TO_CHROME}}</span>
|
||||
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary btn-install" data-browser="chrome">
|
||||
<img src="{{ASSET_PATH}}assets/chrome.svg" alt="" width="20" height="20">
|
||||
<span class="btn-label-short">Chrome</span>
|
||||
<span class="btn-label-full">{{ADD_TO_CHROME}}</span>
|
||||
</a>
|
||||
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox">
|
||||
<img src="{{ASSET_PATH}}assets/firefox.svg" alt="Firefox" width="20" height="20">
|
||||
<span>{{ADD_TO_FIREFOX}}</span>
|
||||
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-firefox btn-install" data-browser="firefox">
|
||||
<img src="{{ASSET_PATH}}assets/firefox.svg" alt="" width="20" height="20">
|
||||
<span class="btn-label-short">Firefox</span>
|
||||
<span class="btn-label-full">{{ADD_TO_FIREFOX}}</span>
|
||||
</a>
|
||||
<a href="https://github.com/Shik3i/KoalaSync/releases" target="_blank" rel="noopener" class="btn btn-secondary" style="display: inline-flex; align-items: center; gap: 8px;">
|
||||
<a href="https://github.com/Shik3i/KoalaSync/releases" target="_blank" rel="noopener" class="btn btn-secondary btn-compact" style="display: inline-flex; align-items: center; gap: 8px;">
|
||||
<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>
|
||||
GitHub Releases
|
||||
<span>GitHub Releases</span>
|
||||
</a>
|
||||
</div>
|
||||
<p class="cta-trust">{{HERO_TRUST}}</p>
|
||||
@@ -387,6 +389,9 @@
|
||||
<span class="demo-tab-dots" aria-hidden="true"><i></i><i></i><i></i></span>
|
||||
<span class="demo-tab-title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></span>
|
||||
<span class="demo-tab-user demo-user-b">🐶 HappyDog</span>
|
||||
<span class="demo-ext-launcher demo-ext-static" aria-hidden="true" title="KoalaSync is installed here too">
|
||||
<img src="{{ASSET_PATH}}assets/NewLogoIcon.webp" alt="" width="16" height="16" loading="eager" decoding="async">
|
||||
</span>
|
||||
</div>
|
||||
<div class="demo-video">
|
||||
<div class="demo-video-art" aria-hidden="true"></div>
|
||||
@@ -730,8 +735,8 @@
|
||||
<div class="demo-cursor" id="demo-cursor" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2l13 11.5-6 .7 3.4 6.3-2.6 1.4-3.4-6.4L5 19.5z" fill="#f8fafc" stroke="#0f172a" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<p class="demo-hint" id="demo-hint">{{DEMO_HINT}}</p>
|
||||
</div>
|
||||
<p class="demo-hint" id="demo-hint">{{DEMO_HINT}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -964,11 +969,17 @@
|
||||
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer">teleparty.com/privacy</a>
|
||||
</p>
|
||||
<p id="footnote-3">
|
||||
<sup>[3]</sup>
|
||||
<sup>[3]</sup>
|
||||
<span>{{COMP_FOOTNOTE_4}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="comparison-guides-link" data-reveal>
|
||||
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives">
|
||||
<span>{{COMP_MORE_GUIDES}}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user