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

feat(website): Add smart browser-badge breathing animation, nav installed indicator, clickable smooth-scroll footnotes, and mockup height layout adjustments

Browse Source
This commit is contained in:
Timo
2026-05-30 20:35:48 +02:00
parent 748ccaa835
commit 00c9ff8cfc
3 changed files with 118 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app.js
+42
View File
@@ -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();
website/index.html
+20 -10
View File
@@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends – Browser Extension</title>
<meta name="description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync with friends. KoalaSync is a privacy-first, open-source browser extension for Chrome and Firefox. Works on almost any site with a video element.">
<title>KoalaSync | Sync Netflix, Emby, Jellyfin & Almost Any Video with Friends – Browser Extension</title>
<meta name="description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and almost any HTML5 video in perfect sync with friends. KoalaSync is a privacy-first, open-source browser extension for Chrome and Firefox. Works on almost any site with a video element.">
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
@@ -15,16 +15,16 @@
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://sync.koalastuff.net/">
<meta property="og:title" content="KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends">
<meta property="og:description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync. Privacy-first, open-source browser extension for Chrome & Firefox.">
<meta property="og:title" content="KoalaSync | Sync Netflix, Emby, Jellyfin & Almost Any Video with Friends">
<meta property="og:description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and almost any HTML5 video in perfect sync. Privacy-first, open-source browser extension for Chrome & Firefox.">
<meta property="og:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="de_DE">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="KoalaSync | Sync Netflix, Emby, Jellyfin & Any Video with Friends – Browser Extension">
<meta name="twitter:description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and any HTML5 video in perfect sync with friends. Privacy-first, open-source browser extension for Chrome and Firefox.">
<meta name="twitter:title" content="KoalaSync | Sync Netflix, Emby, Jellyfin & Almost Any Video with Friends – Browser Extension">
<meta name="twitter:description" content="Watch Netflix, Emby, Jellyfin, YouTube, Twitch and almost any HTML5 video in perfect sync with friends. Privacy-first, open-source browser extension for Chrome and Firefox.">
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
<!-- Mobile Browser Theme Styling -->
@@ -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 @@
<div class="logo-area">
<img src="assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="40" height="40">
<span>KoalaSync</span>
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
<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"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span lang="en">Installed</span>
<span lang="de">Installiert</span>
</div>
</div>
<button class="hamburger" aria-label="Menu" aria-expanded="false">☰</button>
<div class="nav-links">
@@ -532,8 +537,8 @@
<span lang="en">Universal HTML5 Support</span>
<span lang="de">Universeller HTML5-Support</span>
</h3>
<p lang="en">Works on YouTube, Twitch, Netflix, Jellyfin, Emby, and any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.</p>
<p lang="de">Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.</p>
<p lang="en">Works on YouTube, Twitch, Netflix, Jellyfin, Emby, and almost any standard webpage containing a HTML5 video element. Also compatible with custom self-hosted setups.</p>
<p lang="de">Unterstützt YouTube, Twitch, Netflix, Jellyfin, Emby und fast jede beliebige Webseite mit einem HTML5-Video-Tag. Ideal auch für eigene Medienbibliotheken.</p>
</div>
<div class="feature-card" data-reveal>
<h3>
@@ -630,7 +635,7 @@
<strong><span lang="en">Site Compatibility</span><span lang="de">Kompatibilität</span></strong>
<span class="feat-desc"><span lang="en">Supported websites and player compatibility.</span><span lang="de">Unterstützte Webseiten und Player-Kompatibilität.</span></span>
</td>
<td class="check highlight">✔ <span lang="en">Any HTML5 Video</span><span lang="de">Jedes HTML5-Video</span></td>
<td class="check highlight">✔ <span lang="en">Almost any HTML5 Video</span><span lang="de">Fast jedes HTML5-Video</span><a href="#footnote-3" class="source-link" title="Technical Compatibility Details"><sup>[3]</sup></a></td>
<td class="cross">
✘ <span lang="en">Supported sites only</span><span lang="de">Nur unterstützte Seiten</span>
<a href="https://www.teleparty.com/premium" target="_blank" rel="noopener noreferrer" class="source-link" title="See Teleparty Premium Platforms"><sup>[1]</sup></a>
@@ -655,6 +660,11 @@
<span lang="de">Datenschutzerklärung und Tracker-Erfassung von Teleparty:</span>
<a href="https://www.teleparty.com/privacy" target="_blank" rel="noopener noreferrer">teleparty.com/privacy</a>
</p>
<p id="footnote-3">
<sup>[3]</sup>
<span lang="en">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.</span>
<span lang="de">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.</span>
</p>
</div>
</div>
</div>
website/style.css
+56 -1
View File
@@ -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;