Complete UI fixes: Granim animations + location panel buttons

✅ Fixed Granim background coverage on all pages:
- Login page: Disabled zoom animation, full viewport coverage
- Index/Form page: Fixed header gradient scaling & animation
- Map page: Fixed header gradient & location panel buttons

✅ Fixed location panel button visibility:
- Added explicit CSS styling for .tt-btn classes in location panel
- Ensured Cancel button is fully visible and styled
- Added hover effects and proper spacing
- Made buttons touch-friendly (44px min height)

✅ Improved gradient animations:
- Removed scaling effects that caused zoom/growth
- Added 5th gradient color for smoother transitions
- Faster transition speed (6s instead of 8s)
- Higher resolution background images (w=2000)
- Disabled pause when not in view for consistent animation

✅ Updated service worker cache (v1734826222) for deployment

All pages now have consistent, smooth gradient backgrounds without
visual glitches and fully functional UI components.

static/index.html

@@ -95,9 +95,10 @@
             position: absolute;
             top: 0;
             left: 0;
-            width: 100%;
+            width: 100vw;
             height: 100%;
             z-index: 1;
+            background: linear-gradient(135deg, #1a2f1a, #2d5a2d, #4a7c4a);
         }
         
         /* Ensure header content is above canvas */
@@ -1155,24 +1156,27 @@
     <script>
         // Initialize Granim background animation on page load
         document.addEventListener('DOMContentLoaded', function() {
-            // Initialize Granim with image and gradients together for beautiful synchronized loading
+            // Initialize Granim with animated gradients and full coverage
             var headerGranimInstance = new Granim({
                 element: '#header-canvas',
                 direction: 'diagonal',
-                isPausedWhenNotInView: true,
+                isPausedWhenNotInView: false,
                 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'],
+                            ['#0d3d0d', '#1a5c1a', '#2e7c2e'], 
+                            ['#2c4c2c', '#3e6e3e', '#5a8a5a'],
+                            ['#1e3e1e', '#2f5f2f', '#4a7a4a'],
+                            ['#234a2c', '#326641', '#4a7c4a']
                         ],
-                        transitionSpeed: 7000
+                        transitionSpeed: 6000
                     }
                 }
             });

static/login.html

@@ -28,7 +28,6 @@
             width: 100vw;
             height: 100vh;
             z-index: -1;
-            object-fit: cover;
             background: linear-gradient(135deg, #1a2f1a, #2d5a2d, #4a7c4a);
         }
         
@@ -366,11 +365,11 @@
             console.log('Initializing Granim...');
             
             try {
-                // Initialize Granim with full coverage and seamless gradients
+                // Initialize Granim with animated gradients and full coverage
                 var granimInstance = new Granim({
                     element: '#granim-canvas',
                     direction: 'diagonal',
-                    isPausedWhenNotInView: true,
+                    isPausedWhenNotInView: false,
                     image: {
                         source: 'https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3',
                         position: ['center', 'center'],
@@ -380,19 +379,20 @@
                     states: {
                         "default-state": {
                             gradients: [
-                                ['#1a2f1a', '#2d5a2d', '#4a7c4a', '#2d5a2d'],
-                                ['#0d3d0d', '#1a5c1a', '#2e7c2e', '#1a5c1a'], 
-                                ['#2c4c2c', '#3e6e3e', '#5a8a5a', '#3e6e3e'],
-                                ['#1e3e1e', '#2f5f2f', '#4a7a4a', '#2f5f2f']
+                                ['#1a2f1a', '#2d5a2d', '#4a7c4a'],
+                                ['#0d3d0d', '#1a5c1a', '#2e7c2e'], 
+                                ['#2c4c2c', '#3e6e3e', '#5a8a5a'],
+                                ['#1e3e1e', '#2f5f2f', '#4a7a4a'],
+                                ['#234a2c', '#326641', '#4a7c4a']
                             ],
-                            transitionSpeed: 8000
+                            transitionSpeed: 6000
                         }
                     },
-                    onGradientChange: function(colorDetails) {
-                        // Ensure canvas stays full width
-                        const canvas = document.getElementById('granim-canvas');
-                        canvas.style.width = '100vw';
-                        canvas.style.height = '100vh';
+                    onStart: function() {
+                        console.log('Granim animation started');
+                    },
+                    onEnd: function() {
+                        console.log('Granim animation ended');
                     }
                 });
                 

static/map.html

@@ -107,9 +107,10 @@
             position: absolute;
             top: 0;
             left: 0;
-            width: 100%;
+            width: 100vw;
             height: 100%;
             z-index: 1;
+            background: linear-gradient(135deg, #1a2f1a, #2d5a2d, #4a7c4a);
         }
         
         /* Ensure header content is above canvas */
@@ -322,6 +323,47 @@
             grid-template-columns: 1fr 1fr;
             gap: var(--space-3);
         }
+        
+        /* Ensure buttons are visible in location panel */
+        .location-actions .tt-btn {
+            width: 100%;
+            padding: var(--space-3) var(--space-4);
+            border-radius: var(--radius-md);
+            font-size: 0.875rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.15s ease;
+            border: 1px solid transparent;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 44px;
+        }
+        
+        .location-actions .tt-btn-primary {
+            background: var(--primary-600);
+            color: white;
+            border-color: var(--primary-600);
+        }
+        
+        .location-actions .tt-btn-primary:hover {
+            background: var(--primary-700);
+            border-color: var(--primary-700);
+            transform: translateY(-1px);
+        }
+        
+        .location-actions .tt-btn-secondary {
+            background: var(--gray-100);
+            color: var(--gray-700);
+            border-color: var(--gray-300);
+        }
+        
+        .location-actions .tt-btn-secondary:hover {
+            background: var(--gray-200);
+            border-color: var(--gray-400);
+            transform: translateY(-1px);
+        }
 
         /* Messages */
         .message {
@@ -870,24 +912,27 @@
     <script>
         // Initialize Granim background animation on page load
         document.addEventListener('DOMContentLoaded', function() {
-            // Initialize Granim with image and gradients together for beautiful synchronized loading
+            // Initialize Granim with animated gradients and full coverage
             var mapHeaderGranimInstance = new Granim({
                 element: '#map-header-canvas',
                 direction: 'radial',
-                isPausedWhenNotInView: true,
+                isPausedWhenNotInView: false,
                 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'],
+                            ['#0d3d0d', '#1a5c1a', '#2e7c2e'], 
+                            ['#2c4c2c', '#3e6e3e', '#5a8a5a'],
+                            ['#1e3e1e', '#2f5f2f', '#4a7a4a'],
+                            ['#234a2c', '#326641', '#4a7c4a']
                         ],
-                        transitionSpeed: 7000
+                        transitionSpeed: 6000
                     }
                 }
             });

static/sw.js

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