Spaces:

RoyAalekh
/

TreeTrack

Runtime error

RoyAalekh commited on Aug 8, 2025

Commit

5e78261

1 Parent(s): d06b99c

feat: enhance UI with Granim.js animated gradient backgrounds

- Add Granim.js animated gradient backgrounds to all pages
- Replace static CSS gradients/animations with dynamic canvas-based animations
- Use high-quality forest background image from Unsplash for consistent theming
- Update index.html: diagonal direction with overlay blending mode
- Update map.html: radial direction with multiply blending mode
- Update login.html: top-bottom direction with multiply blending, enhanced states
- Maintain responsive design and accessibility across all breakpoints
- Ensure header content remains properly layered above animated backgrounds
- Add smooth gradient transitions with nature-inspired color palettes

Files changed (3) hide show

static/index.html +43 -12
static/login.html +4 -57
static/map.html +43 -13

static/index.html CHANGED Viewed

@@ -8,6 +8,8 @@
     <meta http-equiv="Expires" content="0">
     <title>TreeTrack - Professional Field Research</title>
     <link rel="stylesheet" href="/static/css/design-system.css">
     <style>
         :root {
@@ -80,28 +82,26 @@
             -moz-osx-font-smoothing: grayscale;
         }
-        /* Updated header to match design system with wave animation */
         .tt-header {
             position: relative;
             overflow: hidden;
         }
-        .tt-header::before {
-            content: '';
             position: absolute;
             top: 0;
             left: 0;
-            right: 0;
-            bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><linearGradient id="wave" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="50%" style="stop-color:rgba(255,255,255,0.05)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0.1)"/></linearGradient></defs><path d="M0,10 Q25,0 50,10 T100,10 V20 H0 Z" fill="url(%23wave)"/></svg>') repeat-x;
-            background-size: 200px 20px;
-            background-position: bottom;
-            animation: wave 8s linear infinite;
         }
-        @keyframes wave {
-            0% { background-position-x: 0; }
-            100% { background-position-x: 200px; }
         }
         /* Button styles now handled by design system */
@@ -927,6 +927,9 @@
 </head>
 <body>
     <div class="tt-header">
         <div class="tt-header-content">
             <div class="tt-header-brand">
                 <div class="tt-header-logo">TreeTrack</div>
@@ -1136,5 +1139,33 @@
     </div>
     <script type="module" src="/static/js/tree-track-app.js?v=5.0.0"></script>
 </body>
 </html>

     <meta http-equiv="Expires" content="0">
     <title>TreeTrack - Professional Field Research</title>
     <link rel="stylesheet" href="/static/css/design-system.css">
+    <!-- Granim.js for gradient animations -->
+    <script src="https://cdn.jsdelivr.net/npm/granim@2.0.0/dist/granim.min.js"></script>
     <style>
         :root {
             -moz-osx-font-smoothing: grayscale;
         }
+        /* Updated header with Granim animated background */
         .tt-header {
             position: relative;
             overflow: hidden;
         }
+        /* Granim Canvas for Header */
+        #header-canvas {
             position: absolute;
             top: 0;
             left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
         }
+        /* Ensure header content is above canvas */
+        .tt-header-content {
+            position: relative;
+            z-index: 2;
         }
         /* Button styles now handled by design system */
 </head>
 <body>
     <div class="tt-header">
+        <!-- Granim Canvas for Header Background -->
+        <canvas id="header-canvas"></canvas>
         <div class="tt-header-content">
             <div class="tt-header-brand">
                 <div class="tt-header-logo">TreeTrack</div>
     </div>
     <script type="module" src="/static/js/tree-track-app.js?v=5.0.0"></script>
+    <script>
+        // Initialize Granim background animation on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize Granim.js with forest background for header
+            var headerGranimInstance = new Granim({
+                element: '#header-canvas',
+                direction: 'diagonal',
+                isPausedWhenNotInView: true,
+                image: {
+                    source: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3',
+                    blendingMode: 'overlay',
+                    stretchMode: 'stretch'
+                },
+                states: {
+                    "default-state": {
+                        gradients: [
+                            ['#29323c', '#485563'],
+                            ['#FF6B6B', '#556270'],
+                            ['#80d3fe', '#7ea0c4'],
+                            ['#f0ab51', '#eceba3']
+                        ],
+                        transitionSpeed: 7000
+                    }
+                }
+            });
+        });
+    </script>
 </body>
 </html>

static/login.html CHANGED Viewed

@@ -359,67 +359,14 @@
         // Auto-fill demo username on page load for development
         document.addEventListener('DOMContentLoaded', () => {
-            // Initialize Granim.js with forest background and image blending
             var granimInstance = new Granim({
                 element: '#granim-canvas',
-                direction: 'diagonal',
                 isPausedWhenNotInView: true,
                 image: {
-                    source: 'data:image/svg+xml;base64,' + btoa(`
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
-                            <!-- Forest Silhouette Background -->
-                            <defs>
-                                <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-                                    <stop offset="0%" style="stop-color:#87ceeb;stop-opacity:0.1" />
-                                    <stop offset="100%" style="stop-color:#deb887;stop-opacity:0.05" />
-                                </linearGradient>
-                            </defs>
-                            <!-- Sky gradient -->
-                            <rect width="800" height="400" fill="url(#skyGrad)" />
-                            <!-- Mountain silhouettes -->
-                            <path d="M0,300 Q200,250 400,300 Q600,250 800,300 L800,400 L0,400 Z" fill="#2d5a2d" opacity="0.15"/>
-                            <path d="M0,350 Q150,300 300,350 Q500,300 650,350 Q750,320 800,350 L800,400 L0,400 Z" fill="#1a4d1a" opacity="0.2"/>
-                            <!-- Tree line silhouettes -->
-                            <g opacity="0.25" fill="#0f3d0f">
-                                <!-- Large background trees -->
-                                <ellipse cx="100" cy="380" rx="25" ry="40"/>
-                                <ellipse cx="180" cy="375" rx="30" ry="45"/>
-                                <ellipse cx="250" cy="385" rx="20" ry="35"/>
-                                <ellipse cx="320" cy="380" rx="35" ry="50"/>
-                                <ellipse cx="420" cy="375" rx="25" ry="40"/>
-                                <ellipse cx="500" cy="385" rx="30" ry="45"/>
-                                <ellipse cx="580" cy="380" rx="20" ry="35"/>
-                                <ellipse cx="650" cy="375" rx="25" ry="40"/>
-                                <ellipse cx="720" cy="385" rx="30" ry="45"/>
-                            </g>
-                            <!-- Foreground tree details -->
-                            <g opacity="0.3" fill="#0a330a">
-                                <!-- Individual tree shapes -->
-                                <circle cx="150" cy="370" r="18"/>
-                                <circle cx="280" cy="365" r="22"/>
-                                <circle cx="380" cy="375" r="16"/>
-                                <circle cx="520" cy="370" r="20"/>
-                                <circle cx="620" cy="365" r="18"/>
-                                <!-- Tree trunks -->
-                                <rect x="148" y="375" width="4" height="25" fill="#4d2d1a"/>
-                                <rect x="278" y="370" width="4" height="30" fill="#4d2d1a"/>
-                                <rect x="378" y="380" width="4" height="20" fill="#4d2d1a"/>
-                                <rect x="518" y="375" width="4" height="25" fill="#4d2d1a"/>
-                                <rect x="618" y="370" width="4" height="30" fill="#4d2d1a"/>
-                            </g>
-                            <!-- Misty ground fog -->
-                            <ellipse cx="200" cy="420" rx="150" ry="20" fill="white" opacity="0.08"/>
-                            <ellipse cx="500" cy="425" rx="200" ry="15" fill="white" opacity="0.06"/>
-                            <ellipse cx="650" cy="418" rx="120" ry="18" fill="white" opacity="0.07"/>
-                        </svg>
-                    `),
-                    blendingMode: 'overlay',
                     stretchMode: 'stretch'
                 },
                 states: {

         // Auto-fill demo username on page load for development
         document.addEventListener('DOMContentLoaded', () => {
+            // Initialize Granim.js with actual forest background image
             var granimInstance = new Granim({
                 element: '#granim-canvas',
+                direction: 'top-bottom',
                 isPausedWhenNotInView: true,
                 image: {
+                    source: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3',
+                    blendingMode: 'multiply',
                     stretchMode: 'stretch'
                 },
                 states: {

static/map.html CHANGED Viewed

@@ -11,6 +11,8 @@
     <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <link rel="stylesheet" href="/static/css/design-system.css">
     <style>
@@ -92,29 +94,26 @@
             flex-direction: column;
         }
-        /* Map-specific header styling */
         .map-header {
-            background: var(--gradient-primary);
             position: relative;
             overflow: hidden;
         }
-        .map-header::before {
-            content: '';
             position: absolute;
             top: 0;
             left: 0;
-            right: 0;
-            bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><linearGradient id="wave" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="50%" style="stop-color:rgba(255,255,255,0.05)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0.1)"/></linearGradient></defs><path d="M0,10 Q25,0 50,10 T100,10 V20 H0 Z" fill="url(%23wave)"/></svg>') repeat-x;
-            background-size: 200px 20px;
-            background-position: bottom;
-            animation: wave 8s linear infinite;
         }
-        @keyframes wave {
-            0% { background-position-x: 0; }
-            100% { background-position-x: 200px; }
         }
         .header-stats {
@@ -746,6 +745,9 @@
     <div class="app-container">
         <!-- Header -->
         <div class="tt-header map-header">
             <div class="tt-header-content">
                 <div class="tt-header-brand">
                     <div class="tt-header-logo">TreeTrack Map</div>
@@ -852,5 +854,33 @@
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script src="/static/map.js?v=4.0.0&t=1754657582"></script>
 </body>
 </html>

     <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <link rel="stylesheet" href="/static/css/design-system.css">
+    <!-- Granim.js for gradient animations -->
+    <script src="https://cdn.jsdelivr.net/npm/granim@2.0.0/dist/granim.min.js"></script>
     <style>
             flex-direction: column;
         }
+        /* Map-specific header styling with Granim */
         .map-header {
             position: relative;
             overflow: hidden;
         }
+        /* Granim Canvas for Map Header */
+        #map-header-canvas {
             position: absolute;
             top: 0;
             left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
         }
+        /* Ensure header content is above canvas */
+        .tt-header-content {
+            position: relative;
+            z-index: 2;
         }
         .header-stats {
     <div class="app-container">
         <!-- Header -->
         <div class="tt-header map-header">
+            <!-- Granim Canvas for Map Header Background -->
+            <canvas id="map-header-canvas"></canvas>
             <div class="tt-header-content">
                 <div class="tt-header-brand">
                     <div class="tt-header-logo">TreeTrack Map</div>
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script src="/static/map.js?v=4.0.0&t=1754657582"></script>
+    <script>
+        // Initialize Granim background animation on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize Granim.js with forest background for map header
+            var mapHeaderGranimInstance = new Granim({
+                element: '#map-header-canvas',
+                direction: 'radial',
+                isPausedWhenNotInView: true,
+                image: {
+                    source: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3',
+                    blendingMode: 'multiply',
+                    stretchMode: 'stretch'
+                },
+                states: {
+                    "default-state": {
+                        gradients: [
+                            ['#29323c', '#485563'],
+                            ['#FF6B6B', '#556270'],
+                            ['#80d3fe', '#7ea0c4'],
+                            ['#f0ab51', '#eceba3']
+                        ],
+                        transitionSpeed: 7000
+                    }
+                }
+            });
+        });
+    </script>
 </body>
 </html>