Spaces:

RoyAalekh
/

TreeTrack

Runtime error

App Files Files

RoyAalekh commited on Oct 26, 2025

Commit

44730c0

1 Parent(s): cf43a83

Revert to realistic-tree marker style - minimal looked too much like candy

Browse files

Files changed (6) hide show

marker_preview.html +186 -0
static/index.html +2 -2
static/map.html +2 -2
static/map.js +1 -1
static/sw.js +1 -1
version.json +1 -1

marker_preview.html ADDED Viewed

	@@ -0,0 +1,186 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TreeTrack Minimal Tree Markers Preview</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            margin: 0;
+            padding: 40px;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            padding: 40px;
+        }
+        h1 {
+            text-align: center;
+            color: #2d3748;
+            margin-bottom: 30px;
+        }
+        .markers-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 30px;
+            margin: 40px 0;
+        }
+        .marker-demo {
+            text-align: center;
+            padding: 20px;
+            background: #f8fafc;
+            border-radius: 8px;
+            border: 2px solid #e2e8f0;
+            transition: all 0.2s ease;
+        }
+        .marker-demo:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        .marker-container {
+            margin: 20px 0;
+            display: flex;
+            justify-content: center;
+        }
+        .minimal-tree-marker {
+            transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            cursor: pointer;
+        }
+        .minimal-tree-marker:hover {
+            transform: scale(1.15) translateY(-2px);
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) brightness(1.1);
+        }
+        .marker-label {
+            font-weight: 600;
+            color: #4a5568;
+            margin-bottom: 5px;
+        }
+        .marker-id {
+            font-size: 12px;
+            color: #718096;
+        }
+        .description {
+            background: #edf2f7;
+            padding: 20px;
+            border-radius: 8px;
+            margin-top: 30px;
+            color: #4a5568;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>TreeTrack Minimal Tree Markers</h1>
+        <div class="markers-grid">
+            <!-- Forest Green -->
+            <div class="marker-demo">
+                <div class="marker-label">Forest Green</div>
+                <div class="marker-container">
+                    <div class="minimal-tree-marker">
+                        <svg width="28" height="32" viewBox="0 0 28 32" fill="none">
+                            <rect x="12" y="24" width="4" height="8" fill="#7c6643" rx="0.5"/>
+                            <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#059669" stroke="white" stroke-width="1.5"/>
+                            <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#047857" opacity="0.6"/>
+                            <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/>
+                        </svg>
+                    </div>
+                </div>
+                <div class="marker-id">Group 1 (IDs: 1, 6, 11...)</div>
+            </div>
+            <!-- Ocean Blue -->
+            <div class="marker-demo">
+                <div class="marker-label">Ocean Blue</div>
+                <div class="marker-container">
+                    <div class="minimal-tree-marker">
+                        <svg width="28" height="32" viewBox="0 0 28 32" fill="none">
+                            <rect x="12" y="24" width="4" height="8" fill="#78716c" rx="0.5"/>
+                            <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#0ea5e9" stroke="white" stroke-width="1.5"/>
+                            <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#0284c7" opacity="0.6"/>
+                            <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/>
+                        </svg>
+                    </div>
+                </div>
+                <div class="marker-id">Group 2 (IDs: 2, 7, 12...)</div>
+            </div>
+            <!-- Sunset Orange -->
+            <div class="marker-demo">
+                <div class="marker-label">Sunset Orange</div>
+                <div class="marker-container">
+                    <div class="minimal-tree-marker">
+                        <svg width="28" height="32" viewBox="0 0 28 32" fill="none">
+                            <rect x="12" y="24" width="4" height="8" fill="#92400e" rx="0.5"/>
+                            <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#f97316" stroke="white" stroke-width="1.5"/>
+                            <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#ea580c" opacity="0.6"/>
+                            <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/>
+                        </svg>
+                    </div>
+                </div>
+                <div class="marker-id">Group 3 (IDs: 3, 8, 13...)</div>
+            </div>
+            <!-- Royal Purple -->
+            <div class="marker-demo">
+                <div class="marker-label">Royal Purple</div>
+                <div class="marker-container">
+                    <div class="minimal-tree-marker">
+                        <svg width="28" height="32" viewBox="0 0 28 32" fill="none">
+                            <rect x="12" y="24" width="4" height="8" fill="#6b21a8" rx="0.5"/>
+                            <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#a855f7" stroke="white" stroke-width="1.5"/>
+                            <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#9333ea" opacity="0.6"/>
+                            <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/>
+                        </svg>
+                    </div>
+                </div>
+                <div class="marker-id">Group 4 (IDs: 4, 9, 14...)</div>
+            </div>
+            <!-- Crimson Red -->
+            <div class="marker-demo">
+                <div class="marker-label">Crimson Red</div>
+                <div class="marker-container">
+                    <div class="minimal-tree-marker">
+                        <svg width="28" height="32" viewBox="0 0 28 32" fill="none">
+                            <rect x="12" y="24" width="4" height="8" fill="#991b1b" rx="0.5"/>
+                            <path d="M14 2 C18.5 2, 22 6, 22 11 C22 16, 18.5 20, 14 20 C9.5 20, 6 16, 6 11 C6 6, 9.5 2, 14 2 Z" fill="#ef4444" stroke="white" stroke-width="1.5"/>
+                            <path d="M14 4 C17 4, 19.5 7, 19.5 10.5 C19.5 14, 17 17, 14 17 C11 17, 8.5 14, 8.5 10.5 C8.5 7, 11 4, 14 4 Z" fill="#dc2626" opacity="0.6"/>
+                            <circle cx="12" cy="9" r="2" fill="white" opacity="0.3"/>
+                        </svg>
+                    </div>
+                </div>
+                <div class="marker-id">Group 5 (IDs: 5, 10, 15...)</div>
+            </div>
+        </div>
+        <div class="description">
+            <strong>Minimal Tree Marker Features:</strong><br>
+            • Clean, single-shape canopy with white outline for sharpness<br>
+            • Subtle depth layer for dimensionality without clutter<br>
+            • 28×32 pixel size - perfect visibility without overwhelming<br>
+            • Smooth hover animation with scale and brightness effects<br>
+            • Tree colors rotate based on ID numbers in 5 groups<br>
+            • Hover over the markers above to see the animation effect!
+        </div>
+    </div>
+</body>
+</html>

static/index.html CHANGED Viewed

@@ -947,7 +947,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-            const timestamp = '1761509901'; // Cache-busting bump
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
@@ -1193,7 +1193,7 @@
         </div>
     </div>
-    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1761509901"></script>
     <script>
         // Idle-time prefetch of map assets to speed up first navigation

         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
+            const timestamp = '1761510113'; // Cache-busting bump
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
         </div>
     </div>
+    <script type="module" src="/static/js/tree-track-app.js?v=5.1.1&t=1761510113"></script>
     <script>
         // Idle-time prefetch of map assets to speed up first navigation

static/map.html CHANGED Viewed

@@ -960,7 +960,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
-const timestamp = '1761509901'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
@@ -1113,7 +1113,7 @@ const timestamp = '1761509901'; // Current timestamp for cache busting
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <!-- Leaflet MarkerCluster JS for performance and grouping -->
     <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
-<script src="/static/map.js?v=5.1.1&t=1761509901"></script>
     <script>
         console.log('🗺️ Map script loaded successfully');
     </script>

         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.1';
+const timestamp = '1761510113'; // Current timestamp for cache busting
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <!-- Leaflet MarkerCluster JS for performance and grouping -->
     <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
+<script src="/static/map.js?v=5.1.1&t=1761510113"></script>
     <script>
         console.log('🗺️ Map script loaded successfully');
     </script>

static/map.js CHANGED Viewed

@@ -893,7 +893,7 @@ class TreeTrackMap {
         const colors = treeInfo.colors;
         // Choose marker style - you can change this to test different options
-        const markerStyle = 'minimal-tree'; // Options: 'realistic-tree', 'simple-circle', 'pin-style', 'geometric', 'minimalist', 'minimal-tree'
         let treeIcon;

         const colors = treeInfo.colors;
         // Choose marker style - you can change this to test different options
+        const markerStyle = 'realistic-tree'; // Options: 'realistic-tree', 'simple-circle', 'pin-style', 'geometric', 'minimalist', 'minimal-tree'
         let treeIcon;

static/sw.js CHANGED Viewed

@@ -1,5 +1,5 @@
 // TreeTrack Service Worker - PWA and Offline Support
-const VERSION = 1761509901; // Cache busting bump - force clients to fetch new static assets and header image change
 const CACHE_NAME = `treetrack-v${VERSION}`;
 const STATIC_CACHE = `static-v${VERSION}`;
 const API_CACHE = `api-v${VERSION}`;

 // TreeTrack Service Worker - PWA and Offline Support
+const VERSION = 1761510113; // Cache busting bump - force clients to fetch new static assets and header image change
 const CACHE_NAME = `treetrack-v${VERSION}`;
 const STATIC_CACHE = `static-v${VERSION}`;
 const API_CACHE = `api-v${VERSION}`;

version.json CHANGED Viewed

@@ -1,4 +1,4 @@
 {
   "version": "5.1.1",
-  "timestamp": 1761509901
 }

 {
   "version": "5.1.1",
+  "timestamp": 1761510113
 }