From 00c9ff8cfc019518a5fe6d449bd7a5dc0e380fd1 Mon Sep 17 00:00:00 2001 From: Timo <6156589+Shik3i@users.noreply.github.com> Date: Sat, 30 May 2026 20:35:48 +0200 Subject: [PATCH] feat(website): Add smart browser-badge breathing animation, nav installed indicator, clickable smooth-scroll footnotes, and mockup height layout adjustments --- website/app.js | 42 ++++++++++++++++++++++++++++++++++ website/index.html | 30 ++++++++++++++++-------- website/style.css | 57 +++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 118 insertions(+), 11 deletions(-) diff --git a/website/app.js b/website/app.js index 7ff5c90..7cbe4f2 100644 --- a/website/app.js +++ b/website/app.js @@ -527,6 +527,48 @@ document.addEventListener('DOMContentLoaded', () => { btn.style.boxShadow = 'none'; }); } + + // Handle Step 1 Landing Page Download Badges & Nav Badge + setTimeout(() => { + const isInstalled = document.documentElement.dataset.koalasyncInstalled === 'true'; + + // Nav Badge Logic + const navBadge = document.getElementById('nav-extension-status'); + if (isInstalled && navBadge) { + navBadge.style.display = 'inline-flex'; + } + + const illusChrome = document.querySelectorAll('.illus-store-btn.chrome'); + const illusFirefox = document.querySelectorAll('.illus-store-btn.firefox'); + + if (isFirefox && illusFirefox.length > 0) { + illusFirefox.forEach(btn => { + btn.style.order = '-1'; + if (!isInstalled) { + btn.classList.add('install-breathe'); + btn.style.cursor = 'pointer'; + btn.onclick = () => window.open('https://addons.mozilla.org/de/firefox/addon/koalasync/', '_blank'); + } + }); + illusChrome.forEach(btn => { + btn.style.opacity = '0.5'; + btn.style.transform = 'scale(0.95)'; + }); + } else if (isChrome && illusChrome.length > 0) { + illusChrome.forEach(btn => { + btn.style.order = '-1'; + if (!isInstalled) { + btn.classList.add('install-breathe'); + btn.style.cursor = 'pointer'; + btn.onclick = () => window.open('https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc', '_blank'); + } + }); + illusFirefox.forEach(btn => { + btn.style.opacity = '0.5'; + btn.style.transform = 'scale(0.95)'; + }); + } + }, 600); }; detectBrowserAndElevateBadge(); diff --git a/website/index.html b/website/index.html index 451e430..be8d82d 100644 --- a/website/index.html +++ b/website/index.html @@ -3,8 +3,8 @@ - KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends – Browser Extension - + KoalaSync | Sync Netflix, Emby, Jellyfin & Almost Any Video with Friends – Browser Extension + @@ -15,16 +15,16 @@ - - + + - - + + @@ -48,7 +48,7 @@ "price": "0", "priceCurrency": "EUR" }, - "description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and any HTML5 video in perfect sync with friends. Open source, privacy-first, free.", + "description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.", "softwareVersion": "1.9.3", "license": "https://opensource.org/licenses/MIT" } @@ -67,6 +67,11 @@
KoalaSync Logo KoalaSync +
@@ -532,8 +537,8 @@ Universal HTML5 Support Universeller HTML5-Support -

Works on YouTube, Twitch, Netflix, Jellyfin, Emby, and any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.

-

Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.

+

Works on YouTube, Twitch, Netflix, Jellyfin, Emby, and almost any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.

+

Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und fast jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.

@@ -630,7 +635,7 @@ Site CompatibilityKompatibilität Supported websites and player compatibility.Unterstützte Webseiten und Player-Kompatibilität. - ✔ Any HTML5 VideoJedes HTML5-Video + ✔ Almost any HTML5 VideoFast jedes HTML5-Video[3] ✘ Supported sites onlyNur unterstützte Seiten [1] @@ -655,6 +660,11 @@ Datenschutzerklärung und Tracker-Erfassung von Teleparty: teleparty.com/privacy

+

+ [3] + Works on websites that allow script injections into standard HTML5 video tags. Websites with highly strict Content Security Policies (CSP), DRM copy protection, or heavily obfuscated player wrappers (like complex shadow DOMs) might restrict automated control or injection. + Funktioniert auf allen Seiten, die Skript-Injektionen in Standard-HTML5-Videoplayer erlauben. Seiten mit extrem strengen Content Security Policies (CSP), DRM-Kopierschutz oder stark verschachtelten Player-Wrappern (z. B. komplexe Shadow-DOMs) können die automatische Steuerung blockieren. +

diff --git a/website/style.css b/website/style.css index 8ea0d04..f067d3e 100644 --- a/website/style.css +++ b/website/style.css @@ -134,6 +134,29 @@ nav { width: 40px; } +.nav-ext-status { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px 8px; + background: rgba(16, 185, 129, 0.15); + border: 1px solid rgba(16, 185, 129, 0.3); + color: #10b981; + border-radius: 12px; + font-size: 0.55rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + box-shadow: 0 0 10px rgba(16, 185, 129, 0.1); + animation: fade-in 0.4s ease-out; + margin-left: 0.2rem; +} + +@keyframes fade-in { + from { opacity: 0; transform: translateY(-5px); } + to { opacity: 1; transform: translateY(0); } +} + .nav-links { display: flex; gap: 2rem; @@ -282,7 +305,7 @@ nav { .extension-mockup { width: 320px; - height: 490px; + height: 520px; background: #0f172a; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); @@ -966,6 +989,38 @@ input:checked + .mock-slider:before { box-shadow: 0 0 10px rgba(249, 115, 22, 0.05); } +.install-breathe { + animation: install-breathe 2.5s ease-in-out infinite; + z-index: 2; + position: relative; +} + +@keyframes install-breathe { + 0%, 100% { + transform: scale(1); + box-shadow: 0 0 15px rgba(99, 102, 241, 0.2); + } + 50% { + transform: scale(1.05); + box-shadow: 0 0 25px rgba(99, 102, 241, 0.5); + } +} + +.install-breathe.firefox { + animation-name: install-breathe-ff; +} + +@keyframes install-breathe-ff { + 0%, 100% { + transform: scale(1); + box-shadow: 0 0 15px rgba(249, 115, 22, 0.2); + } + 50% { + transform: scale(1.05); + box-shadow: 0 0 25px rgba(249, 115, 22, 0.5); + } +} + /* Glassmorphic Dropping Success Card */ .illus-extension-popup { position: absolute;