Fix Granim background coverage on login page + cache bust

- Use 100vw/100vh to ensure full viewport coverage
- Add fallback background to canvas to prevent color blocks
- Improve Granim gradients with 4-stop colors for smoother transitions
- Higher resolution background image (w=2000)
- Updated service worker cache version to 1734825999
- Added onGradientChange callback to ensure canvas sizing

static/login.html

@@ -25,9 +25,11 @@
             position: fixed;
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
+            width: 100vw;
+            height: 100vh;
             z-index: -1;
+            object-fit: cover;
+            background: linear-gradient(135deg, #1a2f1a, #2d5a2d, #4a7c4a);
         }
         
         /* Forest SVG Pattern for Image Blending */
@@ -364,25 +366,33 @@
             console.log('Initializing Granim...');
             
             try {
-                // Initialize Granim with image and gradients together for beautiful synchronized loading
+                // Initialize Granim with full coverage and seamless gradients
                 var granimInstance = new Granim({
                     element: '#granim-canvas',
                     direction: 'diagonal',
                     isPausedWhenNotInView: true,
                     image: {
-                        source: 'https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3',
-                        blendingMode: 'saturation'
+                        source: 'https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3',
+                        position: ['center', 'center'],
+                        stretchMode: ['stretch', 'stretch'],
+                        blendingMode: 'multiply'
                     },
                     states: {
                         "default-state": {
                             gradients: [
-                                ['#29323c', '#485563'],
-                                ['#FF6B6B', '#556270'], 
-                                ['#80d3fe', '#7ea0c4'],
-                                ['#f0ab51', '#eceba3']
+                                ['#1a2f1a', '#2d5a2d', '#4a7c4a', '#2d5a2d'],
+                                ['#0d3d0d', '#1a5c1a', '#2e7c2e', '#1a5c1a'], 
+                                ['#2c4c2c', '#3e6e3e', '#5a8a5a', '#3e6e3e'],
+                                ['#1e3e1e', '#2f5f2f', '#4a7a4a', '#2f5f2f']
                             ],
-                            transitionSpeed: 7000
+                            transitionSpeed: 8000
                         }
+                    },
+                    onGradientChange: function(colorDetails) {
+                        // Ensure canvas stays full width
+                        const canvas = document.getElementById('granim-canvas');
+                        canvas.style.width = '100vw';
+                        canvas.style.height = '100vh';
                     }
                 });
                 
@@ -398,18 +408,20 @@
                 if (canvas) {
                     canvas.style.background = `
                         linear-gradient(45deg, 
-                            rgba(41, 50, 60, 0.8) 0%, 
-                            rgba(72, 85, 99, 0.8) 25%,
-                            rgba(255, 107, 107, 0.6) 50%,
-                            rgba(85, 98, 112, 0.8) 75%,
-                            rgba(128, 211, 254, 0.6) 100%
+                            #1a2f1a 0%, 
+                            #2d5a2d 25%,
+                            #4a7c4a 50%,
+                            #2d5a2d 75%,
+                            #1a2f1a 100%
                         ),
-                        url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3')
+                        url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3')
                     `;
                     canvas.style.backgroundSize = 'cover';
                     canvas.style.backgroundPosition = 'center';
                     canvas.style.backgroundBlendMode = 'multiply';
-                    console.log('Applied fallback CSS background');
+                    canvas.style.width = '100vw';
+                    canvas.style.height = '100vh';
+                    console.log('Applied fallback CSS background with full coverage');
                 }
             }
             

static/sw.js

@@ -1,5 +1,5 @@
 // TreeTrack Service Worker - PWA and Offline Support
-const VERSION = 1734825737; // Cache busting - updated for login animation fix
+const VERSION = 1734825999; // Cache busting - updated for login background coverage fix
 const CACHE_NAME = `treetrack-v${VERSION}`;
 const STATIC_CACHE = `static-v${VERSION}`;
 const API_CACHE = `api-v${VERSION}`;