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

Redesign website and extension with koala nature theme

Browse Source 
v3.0.0 "The Greens Update" palette: forest-green oklch color system
(accent green + terracotta secondary) replaces the indigo/slate scheme
across the landing page and the extension popup/options. The blob
background becomes an animated bamboo forest overlay (parallax stalks,
falling leaves, canopy, ground mist, fireflies, light sweep, grain)
with prefers-reduced-motion support. Layout, structure and copy are
unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-10 19:18:40 +02:00
parent 05246ac485
commit aa52d319e1
21 changed files with 1611 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app.js
+13 -2
View File
@@ -86,7 +86,7 @@ document.addEventListener('DOMContentLoaded', () => {
const syncThemeMeta = () => {
if (themeMeta) {
themeMeta.setAttribute('content', document.documentElement.classList.contains('theme-light') ? '#f1f5f9' : '#0f172a');
themeMeta.setAttribute('content', document.documentElement.classList.contains('theme-light') ? '#f0efe7' : '#10190e');
}
};
syncThemeMeta();
@@ -212,6 +212,17 @@ document.addEventListener('DOMContentLoaded', () => {
nav.classList.toggle('nav-scrolled', window.scrollY > 50);
}, { passive: true });
// Bamboo forest scroll parallax (background layers only)
const bambooFar = document.getElementById('bamboo-far');
const bambooNear = document.getElementById('bamboo-near');
if (bambooFar && bambooNear && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
bambooFar.style.transform = `translateY(${scrollY * 0.04}px)`;
bambooNear.style.transform = `translateY(${-scrollY * 0.06}px)`;
}, { passive: true });
}
// Invite Detection & Bridge
const checkInvite = () => {
const isJoinPage = window.location.pathname.includes('join');
@@ -1499,7 +1510,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (heroBtns && heroBtns.length > 0) {
heroBtns.forEach(btn => {
const isFF = btn.classList.contains('btn-firefox');
const glowColor = isFF ? 'rgba(249, 115, 22, ' : 'rgba(99, 102, 241, ';
const glowColor = isFF ? 'rgba(201, 103, 54, ' : 'rgba(86, 174, 108, ';
btn.animate([
{ transform: 'scale(1)', boxShadow: `0 0 15px ${glowColor}0.2)` },
{ transform: 'scale(1.05)', boxShadow: `0 0 25px ${glowColor}0.5)` },