🎨 Complete UI overhaul with modern professional interface

✨ Features:
- Modern, responsive form and map pages with professional design
- Fixed JavaScript errors in login page (fillCredentials function)
- Updated app.js to work with new HTML structure
- Added environment configuration with secure password handling

🐛 Fixes:
- Resolved TypeError in login page JavaScript
- Fixed message display CSS classes
- Added null checks for missing UI elements
- Proper event handling in login interface

🔧 Technical:
- Dual authentication system (cookies + headers)
- Mobile-responsive design with smooth transitions
- Professional map interface replacing childish UI
- Environment-based authentication security

Ready for production deployment on HuggingFace Spaces!

static/app.js

@@ -71,45 +71,38 @@ class TreeTrackApp {
     }
     
     setupUserInterface() {
-        // Add user info to header
+        // Update existing user info elements
         this.displayUserInfo();
         
         // Add logout functionality
         this.addLogoutButton();
-        
-        // Add custom styles for new elements
-        this.addCustomStyles();
     }
     
     displayUserInfo() {
         if (!this.currentUser) return;
         
-        const headerContent = document.querySelector('.header-content');
-        if (headerContent) {
-            // Create user info display
-            const userInfo = document.createElement('div');
-            userInfo.className = 'user-info';
-            userInfo.innerHTML = `
-                <div class="user-greeting">Welcome, ${this.currentUser.full_name}</div>
-                <div class="user-role">${this.currentUser.role}</div>
-            `;
-            
-            // Insert before the map link
-            const mapLink = headerContent.querySelector('.map-link');
-            if (mapLink) {
-                headerContent.insertBefore(userInfo, mapLink);
-            }
+        // Update existing user info elements in the new HTML structure
+        const userNameEl = document.getElementById('userName');
+        const userRoleEl = document.getElementById('userRole');
+        const userAvatarEl = document.getElementById('userAvatar');
+        
+        if (userNameEl) {
+            userNameEl.textContent = this.currentUser.full_name;
+        }
+        
+        if (userRoleEl) {
+            userRoleEl.textContent = this.currentUser.role;
+        }
+        
+        if (userAvatarEl) {
+            userAvatarEl.textContent = this.currentUser.full_name.charAt(0).toUpperCase();
         }
     }
     
     addLogoutButton() {
-        const headerContent = document.querySelector('.header-content');
-        if (headerContent) {
-            const logoutBtn = document.createElement('button');
-            logoutBtn.className = 'btn btn-outline btn-small logout-btn';
-            logoutBtn.innerHTML = '🚪 Logout';
+        const logoutBtn = document.getElementById('logoutBtn');
+        if (logoutBtn) {
             logoutBtn.addEventListener('click', () => this.logout());
-            headerContent.appendChild(logoutBtn);
         }
     }
     
@@ -326,8 +319,11 @@ class TreeTrackApp {
         // GPS location
         document.getElementById('getLocation').addEventListener('click', () => this.getCurrentLocation());
         
-        // Audio recording
-        document.getElementById('recordBtn').addEventListener('click', () => this.toggleRecording());
+        // Audio recording - check if element exists
+        const recordBtn = document.getElementById('recordBtn');
+        if (recordBtn) {
+            recordBtn.addEventListener('click', () => this.toggleRecording());
+        }
         
         // Audio file upload
         document.getElementById('audioUpload').addEventListener('click', () => this.selectAudioFile());
@@ -528,12 +524,16 @@ class TreeTrackApp {
             this.mediaRecorder.start();
             this.isRecording = true;
             
-            // Update UI
+            // Update UI - check if elements exist
             const recordBtn = document.getElementById('recordBtn');
             const status = document.getElementById('recordingStatus');
-            recordBtn.classList.add('recording');
-            recordBtn.innerHTML = '⏹';
-            status.textContent = 'Recording... Click to stop';
+            if (recordBtn) {
+                recordBtn.classList.add('recording');
+                recordBtn.innerHTML = '⏹';
+            }
+            if (status) {
+                status.textContent = 'Recording... Click to stop';
+            }
             
         } catch (error) {
             console.error('Error starting recording:', error);
@@ -547,12 +547,16 @@ class TreeTrackApp {
             this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
             this.isRecording = false;
             
-            // Update UI
+            // Update UI - check if elements exist
             const recordBtn = document.getElementById('recordBtn');
             const status = document.getElementById('recordingStatus');
-            recordBtn.classList.remove('recording');
-            recordBtn.innerHTML = '●';
-            status.textContent = 'Recording saved!';
+            if (recordBtn) {
+                recordBtn.classList.remove('recording');
+                recordBtn.innerHTML = '●';
+            }
+            if (status) {
+                status.textContent = 'Recording saved!';
+            }
         }
     }
 
@@ -650,13 +654,22 @@ class TreeTrackApp {
             el.innerHTML = '';
         });
         
-        // Reset audio controls
+        // Reset audio controls - check if elements exist
         const audioElement = document.getElementById('audioPlayback');
-        audioElement.classList.add('hidden');
-        audioElement.src = '';
+        if (audioElement) {
+            audioElement.classList.add('hidden');
+            audioElement.src = '';
+        }
+        
+        const recordingStatus = document.getElementById('recordingStatus');
+        if (recordingStatus) {
+            recordingStatus.textContent = 'Click to start recording';
+        }
         
-        document.getElementById('recordingStatus').textContent = 'Click to start recording';
-        document.getElementById('audioUploadResult').innerHTML = '';
+        const audioUploadResult = document.getElementById('audioUploadResult');
+        if (audioUploadResult) {
+            audioUploadResult.innerHTML = '';
+        }
     }
 
     async loadTrees() {
@@ -876,7 +889,7 @@ class TreeTrackApp {
 
     showMessage(message, type) {
         const messageDiv = document.getElementById('message');
-        messageDiv.className = type === 'error' ? 'error-message' : 'success-message';
+        messageDiv.className = `message ${type === 'error' ? 'error' : 'success'}`;
         messageDiv.textContent = message;
         
         // Auto-hide after 5 seconds

static/index.html

@@ -6,9 +6,62 @@
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
-    <title>TreeTrack - Field Research Tool</title>
+    <title>TreeTrack - Professional Field Research</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+        
+        :root {
+            /* Colors */
+            --primary-50: #eff6ff;
+            --primary-100: #dbeafe;
+            --primary-500: #3b82f6;
+            --primary-600: #2563eb;
+            --primary-700: #1d4ed8;
+            --primary-900: #1e3a8a;
+            
+            --gray-50: #f8fafc;
+            --gray-100: #f1f5f9;
+            --gray-200: #e2e8f0;
+            --gray-300: #cbd5e1;
+            --gray-400: #94a3b8;
+            --gray-500: #64748b;
+            --gray-600: #475569;
+            --gray-700: #334155;
+            --gray-800: #1e293b;
+            --gray-900: #0f172a;
+            
+            --green-50: #f0fdf4;
+            --green-500: #22c55e;
+            --green-600: #16a34a;
+            
+            --red-50: #fef2f2;
+            --red-500: #ef4444;
+            --red-600: #dc2626;
+            
+            /* Spacing */
+            --space-1: 0.25rem;
+            --space-2: 0.5rem;
+            --space-3: 0.75rem;
+            --space-4: 1rem;
+            --space-5: 1.25rem;
+            --space-6: 1.5rem;
+            --space-8: 2rem;
+            --space-12: 3rem;
+            --space-16: 4rem;
+            
+            /* Radius */
+            --radius-sm: 0.375rem;
+            --radius-md: 0.5rem;
+            --radius-lg: 0.75rem;
+            --radius-xl: 1rem;
+            --radius-2xl: 1.5rem;
+            
+            /* Shadows */
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        }
         
         * {
             margin: 0;
@@ -18,34 +71,46 @@
 
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-feature-settings: 'cv11' 1, 'ss01' 1;
             line-height: 1.6;
-            color: #1e293b;
-            background: #f8fafc;
+            color: var(--gray-800);
+            background: var(--gray-50);
             min-height: 100vh;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }
 
+        /* Header */
         .header {
-            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+            background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
             color: white;
-            padding: 1.5rem 0;
-            margin-bottom: 2rem;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
 
         .header-content {
-            max-width: 1200px;
+            max-width: 1400px;
             margin: 0 auto;
-            padding: 0 1rem;
+            padding: var(--space-4) var(--space-6);
             display: flex;
             justify-content: space-between;
             align-items: center;
             flex-wrap: wrap;
-            gap: 1rem;
+            gap: var(--space-4);
+        }
+
+        .header-brand {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-1);
         }
 
         .header h1 {
-            font-size: 1.875rem;
-            font-weight: 600;
+            font-size: 1.75rem;
+            font-weight: 700;
             margin: 0;
             letter-spacing: -0.025em;
         }
@@ -53,456 +118,544 @@
         .header-subtitle {
             font-size: 0.875rem;
             opacity: 0.9;
-            margin-top: 0.25rem;
             font-weight: 400;
         }
 
-        .map-link {
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: var(--space-3);
+        }
+
+        .user-info {
+            display: flex;
+            align-items: center;
+            gap: var(--space-3);
+            padding: var(--space-2) var(--space-4);
             background: rgba(255, 255, 255, 0.1);
-            color: white;
-            padding: 0.5rem 1rem;
-            border-radius: 6px;
-            text-decoration: none;
+            border-radius: var(--radius-xl);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(8px);
+        }
+
+        .user-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--primary-500);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            font-size: 0.875rem;
+        }
+
+        .user-details {
+            display: flex;
+            flex-direction: column;
+            gap: 0;
+        }
+
+        .user-name {
+            font-size: 0.875rem;
+            font-weight: 600;
+        }
+
+        .user-role {
+            font-size: 0.75rem;
+            opacity: 0.8;
+            text-transform: capitalize;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2);
+            padding: var(--space-2) var(--space-4);
+            font-size: 0.875rem;
             font-weight: 500;
-            transition: background-color 0.2s;
+            line-height: 1.25;
+            border-radius: var(--radius-md);
+            border: none;
+            cursor: pointer;
+            transition: all 0.15s ease;
+            text-decoration: none;
+            outline: none;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn-primary {
+            background: var(--primary-500);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: var(--primary-600);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
             border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
-        .map-link:hover {
+        .btn-secondary:hover {
             background: rgba(255, 255, 255, 0.2);
+            transform: translateY(-1px);
+        }
+
+        .btn-outline {
+            background: transparent;
+            color: var(--gray-700);
+            border: 1px solid var(--gray-300);
         }
 
-        .container {
-            max-width: 1200px;
+        .btn-outline:hover {
+            background: var(--gray-50);
+            border-color: var(--gray-400);
+        }
+
+        .btn-lg {
+            padding: var(--space-3) var(--space-6);
+            font-size: 1rem;
+        }
+
+        .btn-sm {
+            padding: var(--space-1) var(--space-3);
+            font-size: 0.8125rem;
+        }
+
+        /* Main Content */
+        .main-container {
+            max-width: 1400px;
             margin: 0 auto;
-            padding: 0 1rem 2rem;
+            padding: var(--space-8) var(--space-6);
+        }
+
+        .content-grid {
             display: grid;
             grid-template-columns: 1fr;
-            gap: 2rem;
+            gap: var(--space-8);
         }
 
-        @media (min-width: 1024px) {
-            .container {
+        @media (min-width: 1200px) {
+            .content-grid {
                 grid-template-columns: 2fr 1fr;
             }
         }
 
-        .form-container {
+        /* Cards */
+        .card {
             background: white;
-            border-radius: 12px;
-            padding: 2rem;
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-            border: 1px solid #e2e8f0;
+            border-radius: var(--radius-xl);
+            border: 1px solid var(--gray-200);
+            box-shadow: var(--shadow-sm);
+            transition: all 0.2s ease;
+            overflow: hidden;
         }
 
-        .sidebar-container {
-            background: white;
-            border-radius: 12px;
-            padding: 1.5rem;
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-            border: 1px solid #e2e8f0;
-            height: fit-content;
+        .card:hover {
+            box-shadow: var(--shadow-md);
+            border-color: var(--gray-300);
+        }
+
+        .card-header {
+            padding: var(--space-6);
+            border-bottom: 1px solid var(--gray-100);
+            background: var(--gray-50);
+        }
+
+        .card-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--gray-900);
+            margin: 0;
+        }
+
+        .card-subtitle {
+            font-size: 0.875rem;
+            color: var(--gray-600);
+            margin-top: var(--space-1);
         }
 
+        .card-content {
+            padding: var(--space-6);
+        }
+
+        /* Form Sections */
         .form-section {
-            margin-bottom: 2rem;
-            padding: 1.5rem;
-            border: 1px solid #e2e8f0;
-            border-radius: 8px;
-            background: #fafbfc;
+            margin-bottom: var(--space-8);
+        }
+
+        .form-section:last-child {
+            margin-bottom: 0;
+        }
+
+        .section-header {
+            margin-bottom: var(--space-6);
         }
 
         .section-title {
             font-size: 1.125rem;
             font-weight: 600;
-            color: #374151;
-            margin-bottom: 1rem;
-            padding-bottom: 0.5rem;
-            border-bottom: 1px solid #e2e8f0;
+            color: var(--gray-900);
+            margin: 0 0 var(--space-2) 0;
+        }
+
+        .section-description {
+            font-size: 0.875rem;
+            color: var(--gray-600);
+            margin: 0;
         }
 
+        /* Form Elements */
         .form-group {
-            margin-bottom: 1.5rem;
+            margin-bottom: var(--space-5);
         }
 
         .form-row {
             display: grid;
             grid-template-columns: 1fr;
-            gap: 1rem;
+            gap: var(--space-4);
         }
 
-        @media (min-width: 640px) {
+        @media (min-width: 768px) {
             .form-row {
                 grid-template-columns: 1fr 1fr;
             }
         }
 
-        label {
+        .form-label {
             display: block;
-            margin-bottom: 0.5rem;
-            font-weight: 500;
-            color: #374151;
             font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--gray-700);
+            margin-bottom: var(--space-2);
+        }
+
+        .form-label.required::after {
+            content: '*';
+            color: var(--red-500);
+            margin-left: var(--space-1);
         }
 
-        input, textarea, select {
+        .form-input {
             width: 100%;
-            padding: 0.75rem;
-            border: 1px solid #d1d5db;
-            border-radius: 6px;
+            padding: var(--space-3) var(--space-4);
             font-size: 0.875rem;
-            transition: all 0.2s;
+            line-height: 1.25;
+            color: var(--gray-900);
             background: white;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius-md);
+            transition: all 0.15s ease;
+            outline: none;
         }
 
-        input:focus, textarea:focus, select:focus {
-            outline: none;
-            border-color: #3b82f6;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        .form-input:focus {
+            border-color: var(--primary-500);
+            box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
         }
 
-        textarea {
+        .form-input:disabled {
+            background: var(--gray-50);
+            color: var(--gray-500);
+            cursor: not-allowed;
+        }
+
+        .form-textarea {
             resize: vertical;
             min-height: 100px;
         }
 
+        .form-select {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+            background-position: right 0.5rem center;
+            background-repeat: no-repeat;
+            background-size: 1.5em 1.5em;
+            padding-right: 2.5rem;
+            appearance: none;
+        }
+
+        /* Multi-select */
         .multi-select {
-            border: 1px solid #d1d5db;
-            border-radius: 6px;
-            padding: 0.75rem;
-            max-height: 120px;
-            overflow-y: auto;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius-md);
             background: white;
+            max-height: 140px;
+            overflow-y: auto;
         }
 
-        .multi-select label {
+        .multi-select-option {
             display: flex;
             align-items: center;
-            margin-bottom: 0.5rem;
-            font-weight: normal;
+            padding: var(--space-3) var(--space-4);
+            border-bottom: 1px solid var(--gray-100);
+            transition: background-color 0.15s ease;
             cursor: pointer;
-            padding: 0.25rem;
-            border-radius: 4px;
-            transition: background-color 0.2s;
         }
 
-        .multi-select label:hover {
-            background-color: #f3f4f6;
+        .multi-select-option:last-child {
+            border-bottom: none;
         }
 
-        .multi-select input[type="checkbox"] {
-            width: auto;
-            margin-right: 0.5rem;
+        .multi-select-option:hover {
+            background: var(--gray-50);
         }
 
-        .file-upload {
-            border: 2px dashed #d1d5db;
-            border-radius: 6px;
-            padding: 1.5rem;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.2s;
-            background: #f9fafb;
-            margin-top: 0.5rem;
+        .multi-select-checkbox {
+            margin-right: var(--space-3);
+            width: 1rem;
+            height: 1rem;
+            accent-color: var(--primary-500);
         }
 
-        .file-upload:hover {
-            border-color: #3b82f6;
-            background: #f0f9ff;
+        .multi-select-label {
+            flex: 1;
+            font-size: 0.875rem;
+            color: var(--gray-700);
+            margin: 0;
         }
 
-        .photo-category {
-            display: grid;
-            grid-template-columns: 1fr auto;
-            gap: 0.75rem;
-            align-items: center;
-            margin-bottom: 1rem;
-            padding: 1rem;
-            border: 1px solid #e2e8f0;
-            border-radius: 6px;
-            background: white;
+        /* File Upload */
+        .file-upload-area {
+            border: 2px dashed var(--gray-300);
+            border-radius: var(--radius-lg);
+            padding: var(--space-8);
+            text-align: center;
+            background: var(--gray-50);
+            transition: all 0.2s ease;
+            cursor: pointer;
         }
 
-        .btn {
-            padding: 0.75rem 1.5rem;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.875rem;
-            font-weight: 500;
-            transition: all 0.2s;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
+        .file-upload-area:hover {
+            border-color: var(--primary-500);
+            background: var(--primary-50);
         }
 
-        .btn-primary {
-            background: #3b82f6;
-            color: white;
+        .file-upload-area.dragover {
+            border-color: var(--primary-500);
+            background: var(--primary-50);
         }
 
-        .btn-primary:hover {
-            background: #2563eb;
+        .file-upload-icon {
+            font-size: 2rem;
+            margin-bottom: var(--space-2);
         }
 
-        .btn-secondary {
-            background: #6b7280;
-            color: white;
+        .file-upload-text {
+            font-size: 0.875rem;
+            color: var(--gray-600);
         }
 
-        .btn-secondary:hover {
-            background: #4b5563;
+        .file-upload-hint {
+            font-size: 0.75rem;
+            color: var(--gray-500);
+            margin-top: var(--space-1);
         }
 
-        .btn-outline {
-            background: transparent;
-            color: #3b82f6;
-            border: 1px solid #3b82f6;
+        /* Location Controls */
+        .location-group {
+            display: flex;
+            align-items: end;
+            gap: var(--space-3);
         }
 
-        .btn-outline:hover {
-            background: #3b82f6;
-            color: white;
+        .location-input {
+            flex: 1;
         }
 
-        .btn-small {
-            padding: 0.5rem 1rem;
-            font-size: 0.75rem;
+        .location-button {
+            flex-shrink: 0;
         }
 
-        .current-location {
+        /* Form Actions */
+        .form-actions {
             display: flex;
-            align-items: center;
-            gap: 0.5rem;
+            justify-content: flex-end;
+            gap: var(--space-3);
+            padding-top: var(--space-6);
+            border-top: 1px solid var(--gray-200);
+            margin-top: var(--space-8);
         }
 
-        .success-message, .error-message {
-            padding: 0.75rem 1rem;
-            border-radius: 6px;
-            margin: 1rem 0;
-            font-weight: 500;
+        @media (max-width: 640px) {
+            .form-actions {
+                flex-direction: column;
+            }
+            
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
+        }
+
+        /* Messages */
+        .message {
+            padding: var(--space-4);
+            border-radius: var(--radius-md);
+            margin-bottom: var(--space-6);
             font-size: 0.875rem;
+            font-weight: 500;
+            border: 1px solid transparent;
         }
 
-        .success-message {
-            background: #dcfce7;
-            color: #166534;
-            border: 1px solid #bbf7d0;
+        .message.success {
+            background: var(--green-50);
+            color: var(--green-600);
+            border-color: var(--green-500);
         }
 
-        .error-message {
-            background: #fee2e2;
-            color: #991b1b;
-            border: 1px solid #fecaca;
+        .message.error {
+            background: var(--red-50);
+            color: var(--red-600);
+            border-color: var(--red-500);
         }
 
+        /* Sidebar */
         .sidebar-title {
             font-size: 1.125rem;
             font-weight: 600;
-            color: #374151;
-            margin-bottom: 1rem;
-            padding-bottom: 0.5rem;
-            border-bottom: 1px solid #e2e8f0;
+            color: var(--gray-900);
+            margin-bottom: var(--space-4);
         }
 
         .tree-list {
-            max-height: 60vh;
+            max-height: 70vh;
             overflow-y: auto;
         }
 
         .tree-item {
-            padding: 1rem;
-            border: 1px solid #e2e8f0;
-            border-radius: 6px;
-            margin-bottom: 0.75rem;
+            padding: var(--space-4);
+            border: 1px solid var(--gray-200);
+            border-radius: var(--radius-md);
+            margin-bottom: var(--space-3);
             background: white;
-            transition: all 0.2s;
+            transition: all 0.15s ease;
         }
 
         .tree-item:hover {
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            border-color: #3b82f6;
+            border-color: var(--primary-500);
+            box-shadow: var(--shadow-sm);
+            transform: translateY(-1px);
+        }
+
+        .tree-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--space-2);
         }
 
         .tree-id {
             font-weight: 600;
-            color: #1e40af;
+            color: var(--primary-600);
             font-size: 0.875rem;
         }
 
-        .tree-info {
-            color: #6b7280;
-            font-size: 0.75rem;
-            margin-top: 0.25rem;
-            line-height: 1.4;
-        }
-
-        .loading {
-            text-align: center;
-            padding: 2rem;
-            color: #6b7280;
-        }
-
-        .audio-controls {
+        .tree-actions {
             display: flex;
-            gap: 0.75rem;
-            align-items: center;
-            margin-top: 0.75rem;
+            gap: var(--space-1);
         }
 
-        .record-btn {
-            background: #ef4444;
-            color: white;
+        .btn-icon {
+            background: transparent;
             border: none;
-            border-radius: 50%;
-            width: 3rem;
-            height: 3rem;
-            font-size: 1.125rem;
             cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .record-btn:hover {
-            background: #dc2626;
-        }
-
-        .record-btn.recording {
-            background: #10b981;
-            animation: pulse 1.5s infinite;
-        }
-
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-
-        .hidden {
-            display: none;
-        }
-
-        .form-actions {
+            padding: var(--space-1);
+            border-radius: var(--radius-sm);
+            color: var(--gray-500);
+            transition: all 0.15s ease;
             display: flex;
-            gap: 1rem;
-            justify-content: flex-end;
-            margin-top: 2rem;
-            padding-top: 1.5rem;
-            border-top: 1px solid #e2e8f0;
+            align-items: center;
+            justify-content: center;
         }
 
-        @media (max-width: 640px) {
-            .form-actions {
-                flex-direction: column;
-            }
-            
-            .btn {
-                width: 100%;
-            }
+        .btn-icon:hover {
+            background: var(--gray-100);
+            color: var(--gray-700);
         }
 
-        .uploaded-file {
-            margin-top: 0.5rem;
-            padding: 0.5rem 0.75rem;
-            background: #f0fdf4;
-            border: 1px solid #bbf7d0;
-            border-radius: 4px;
+        .tree-info {
+            color: var(--gray-600);
             font-size: 0.75rem;
-            color: #166534;
+            line-height: 1.4;
         }
 
-        .form-description {
-            color: #6b7280;
+        /* Loading States */
+        .loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--space-8);
+            color: var(--gray-500);
             font-size: 0.875rem;
-            margin-bottom: 2rem;
-            line-height: 1.5;
-        }
-
-        /* Auto-suggestion styles */
-        .autocomplete-container {
-            position: relative;
-            display: inline-block;
-            width: 100%;
         }
 
-        .autocomplete-dropdown {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background: white;
-            border: 1px solid #d1d5db;
-            border-top: none;
-            border-radius: 0 0 6px 6px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            max-height: 200px;
-            overflow-y: auto;
-            z-index: 1000;
-            display: none;
-        }
-
-        .autocomplete-item {
-            padding: 0.75rem;
-            cursor: pointer;
-            border-bottom: 1px solid #f3f4f6;
-            transition: background-color 0.2s;
-        }
-
-        .autocomplete-item:last-child {
-            border-bottom: none;
-        }
-
-        .autocomplete-item:hover,
-        .autocomplete-item.highlighted {
-            background-color: #f3f4f6;
-        }
-
-        .autocomplete-primary {
-            font-weight: 500;
-            color: #1e293b;
-            font-size: 0.875rem;
+        .spinner {
+            border: 2px solid var(--gray-200);
+            border-top: 2px solid var(--primary-500);
+            border-radius: 50%;
+            width: 1rem;
+            height: 1rem;
+            animation: spin 1s linear infinite;
+            margin-right: var(--space-2);
         }
 
-        .autocomplete-secondary {
-            font-size: 0.75rem;
-            color: #6b7280;
-            margin-top: 0.25rem;
-            line-height: 1.3;
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
 
-        .autocomplete-badge {
-            display: inline-block;
-            background: #e0f2fe;
-            color: #0369a1;
-            font-size: 0.625rem;
-            font-weight: 500;
-            padding: 0.125rem 0.375rem;
-            border-radius: 4px;
-            margin-top: 0.25rem;
-            margin-right: 0.25rem;
+        /* Hidden */
+        .hidden {
+            display: none;
         }
 
-        .autocomplete-loading {
-            padding: 0.75rem;
-            text-align: center;
-            color: #6b7280;
-            font-size: 0.75rem;
-            font-style: italic;
+        /* Mobile Optimizations */
+        @media (max-width: 768px) {
+            .header-content {
+                padding: var(--space-3) var(--space-4);
+            }
+            
+            .header h1 {
+                font-size: 1.5rem;
+            }
+            
+            .main-container {
+                padding: var(--space-6) var(--space-4);
+            }
+            
+            .card-header,
+            .card-content {
+                padding: var(--space-4);
+            }
+            
+            .user-info {
+                padding: var(--space-2) var(--space-3);
+            }
+            
+            .user-details {
+                display: none;
+            }
         }
-
-        .autocomplete-no-results {
-            padding: 0.75rem;
-            text-align: center;
-            color: #9ca3af;
-            font-size: 0.75rem;
-            font-style: italic;
+        
+        /* Focus visible for accessibility */
+        .btn:focus-visible,
+        .form-input:focus-visible,
+        .btn-icon:focus-visible {
+            outline: 2px solid var(--primary-500);
+            outline-offset: 2px;
         }
     </style>
     <script>
         // Force refresh if we detect cached version
         (function() {
-            const currentVersion = '3.1754653728';
+            const currentVersion = '4.0.0';
             const lastVersion = sessionStorage.getItem('treetrack_version');
             if (!lastVersion || lastVersion !== currentVersion) {
                 sessionStorage.setItem('treetrack_version', currentVersion);
@@ -517,155 +670,213 @@
 <body>
     <div class="header">
         <div class="header-content">
-            <div>
-                <h1>TreeTrack</h1>
-                <div class="header-subtitle">Professional Field Research & Documentation</div>
+            <div class="header-brand">
+                <h1>🌳 TreeTrack</h1>
+                <div class="header-subtitle">Professional Field Research Platform</div>
+            </div>
+            <div class="header-actions">
+                <div class="user-info" id="userInfo">
+                    <div class="user-avatar" id="userAvatar">U</div>
+                    <div class="user-details">
+                        <div class="user-name" id="userName">Loading...</div>
+                        <div class="user-role" id="userRole">User</div>
+                    </div>
+                </div>
+                <a href="/static/map.html" class="btn btn-secondary">📍 View Map</a>
+                <button id="logoutBtn" class="btn btn-secondary">Logout</button>
             </div>
-            <a href="/static/map.html" class="map-link">View Map</a>
         </div>
     </div>
 
-    <div class="container">
-        <div class="form-container">
-            <div class="form-description">
-                Complete the form below to document tree specimens in the field. All fields marked with * are required.
-            </div>
-            
-            <form id="treeForm">
-                <!-- Section 1: Location -->
-                <div class="form-section">
-                    <h3 class="section-title">Geographic Location</h3>
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label for="latitude">Latitude *</label>
-                            <div class="current-location">
-                                <input type="number" id="latitude" step="0.0000001" min="-90" max="90" required>
-                                <button type="button" id="getLocation" class="btn btn-outline btn-small">Get GPS</button>
+    <div class="main-container">
+        <div class="content-grid">
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">Tree Documentation Form</h2>
+                    <p class="card-subtitle">Complete the form below to document tree specimens in the field. All required fields are marked with an asterisk.</p>
+                </div>
+                <div class="card-content">
+                    <form id="treeForm">
+                        <!-- Location Section -->
+                        <div class="form-section">
+                            <div class="section-header">
+                                <h3 class="section-title">📍 Geographic Location</h3>
+                                <p class="section-description">Precise coordinates are essential for mapping and field research</p>
+                            </div>
+                            
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label class="form-label required" for="latitude">Latitude</label>
+                                    <div class="location-group">
+                                        <div class="location-input">
+                                            <input type="number" id="latitude" class="form-input" step="0.0000001" min="-90" max="90" required placeholder="e.g. 26.1445">
+                                        </div>
+                                        <div class="location-button">
+                                            <button type="button" id="getLocation" class="btn btn-outline btn-sm">📍 GPS</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label required" for="longitude">Longitude</label>
+                                    <input type="number" id="longitude" class="form-input" step="0.0000001" min="-180" max="180" required placeholder="e.g. 91.7362">
+                                </div>
+                            </div>
+                            
+                            <div class="form-group">
+                                <a href="/static/map.html" class="btn btn-outline" style="width: 100%; justify-content: center;">🗺️ Select from Interactive Map</a>
                             </div>
                         </div>
-                        <div class="form-group">
-                            <label for="longitude">Longitude *</label>
-                            <input type="number" id="longitude" step="0.0000001" min="-180" max="180" required>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <a href="/static/map.html" class="btn btn-outline" style="width: 100%; text-align: center;">Select from Interactive Map</a>
-                    </div>
-                </div>
 
-                <!-- Section 2: Identification -->
-                <div class="form-section">
-                    <h3 class="section-title">Tree Identification</h3>
-                    <div class="form-group">
-                        <label for="localName">Local Name (Assamese)</label>
-                        <input type="text" id="localName" placeholder="Enter local Assamese name">
-                    </div>
-                    <div class="form-group">
-                        <label for="scientificName">Scientific Name</label>
-                        <input type="text" id="scientificName" placeholder="e.g., Ficus benghalensis">
-                    </div>
-                    <div class="form-group">
-                        <label for="commonName">Common Name</label>
-                        <input type="text" id="commonName" placeholder="e.g., Banyan Tree">
-                    </div>
-                    <div class="form-group">
-                        <label for="treeCode">Tree Reference Code</label>
-                        <input type="text" id="treeCode" placeholder="e.g., C.A, A-G1" maxlength="20">
-                    </div>
-                </div>
+                        <!-- Identification Section -->
+                        <div class="form-section">
+                            <div class="section-header">
+                                <h3 class="section-title">🌿 Tree Identification</h3>
+                                <p class="section-description">Botanical and local identification details</p>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label class="form-label" for="localName">Local Name (Assamese)</label>
+                                <input type="text" id="localName" class="form-input" placeholder="Enter local Assamese name">
+                            </div>
+                            
+                            <div class="form-group">
+                                <label class="form-label" for="scientificName">Scientific Name</label>
+                                <input type="text" id="scientificName" class="form-input" placeholder="e.g., Ficus benghalensis">
+                            </div>
+                            
+                            <div class="form-group">
+                                <label class="form-label" for="commonName">Common Name</label>
+                                <input type="text" id="commonName" class="form-input" placeholder="e.g., Banyan Tree">
+                            </div>
+                            
+                            <div class="form-group">
+                                <label class="form-label" for="treeCode">Tree Reference Code</label>
+                                <input type="text" id="treeCode" class="form-input" placeholder="e.g., C.A, A-G1" maxlength="20">
+                            </div>
+                        </div>
 
-                <!-- Section 3: Measurements -->
-                <div class="form-section">
-                    <h3 class="section-title">Physical Measurements</h3>
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label for="height">Height (meters)</label>
-                            <input type="number" id="height" step="0.1" min="0" max="200" placeholder="15.5">
+                        <!-- Measurements Section -->
+                        <div class="form-section">
+                            <div class="section-header">
+                                <h3 class="section-title">📏 Physical Measurements</h3>
+                                <p class="section-description">Quantitative assessment of tree dimensions</p>
+                            </div>
+                            
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label class="form-label" for="height">Height (meters)</label>
+                                    <input type="number" id="height" class="form-input" step="0.1" min="0" max="200" placeholder="15.5">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label" for="width">Girth/DBH (cm)</label>
+                                    <input type="number" id="width" class="form-input" step="0.1" min="0" max="2000" placeholder="45.2">
+                                </div>
+                            </div>
                         </div>
-                        <div class="form-group">
-                            <label for="width">Girth/DBH (cm)</label>
-                            <input type="number" id="width" step="0.1" min="0" max="2000" placeholder="45.2">
+
+                        <!-- Utility Section -->
+                        <div class="form-section">
+                            <div class="section-header">
+                                <h3 class="section-title">🌱 Ecological & Cultural Utility</h3>
+                                <p class="section-description">Select all applicable ecological and cultural uses</p>
+                            </div>
+                            
+                            <div class="form-group">
+                                <div id="utilityOptions" class="multi-select">
+                                    <!-- Options loaded dynamically -->
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                </div>
 
-                <!-- Section 4: Utility -->
-                <div class="form-section">
-                    <h3 class="section-title">Ecological & Cultural Utility</h3>
-                    <div class="form-group">
-                        <label>Select applicable utilities:</label>
-                        <div id="utilityOptions" class="multi-select">
-                            <!-- Options loaded dynamically -->
+                        <!-- Phenology Section -->
+                        <div class="form-section">
+                            <div class="section-header">
+                                <h3 class="section-title">🍃 Phenology Assessment</h3>
+                                <p class="section-description">Current developmental stages observed</p>
+                            </div>
+                            
+                            <div class="form-group">
+                                <div id="phenologyOptions" class="multi-select">
+                                    <!-- Options loaded dynamically -->
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                </div>
 
-                <!-- Section 5: Phenology -->
-                <div class="form-section">
-                    <h3 class="section-title">Phenology Assessment</h3>
-                    <div class="form-group">
-                        <label>Current development stages:</label>
-                        <div id="phenologyOptions" class="multi-select">
-                            <!-- Options loaded dynamically -->
+                        <!-- Photography Section -->
+                        <div class="form-section">
+                            <div class="section-header">
+                                <h3 class="section-title">📷 Photographic Documentation</h3>
+                                <p class="section-description">Upload photographs for different tree components</p>
+                            </div>
+                            
+                            <div id="photoCategories">
+                                <!-- Photo categories loaded dynamically -->
+                            </div>
                         </div>
-                    </div>
-                </div>
 
-                <!-- Section 6: Photography -->
-                <div class="form-section">
-                    <h3 class="section-title">Photographic Documentation</h3>
-                    <div id="photoCategories">
-                        <!-- Photo categories loaded dynamically -->
-                    </div>
-                </div>
+                        <!-- Cultural Documentation Section -->
+                        <div class="form-section">
+                            <div class="section-header">
+                                <h3 class="section-title">📖 Cultural Documentation</h3>
+                                <p class="section-description">Stories, histories, and cultural significance</p>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label class="form-label" for="storytellingText">Stories, Histories & Narratives</label>
+                                <textarea id="storytellingText" class="form-input form-textarea" placeholder="Share any stories, historical context, or cultural significance..." maxlength="5000"></textarea>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label class="form-label">Audio Recording</label>
+                                <div class="file-upload-area" id="audioUpload">
+                                    <div class="file-upload-icon">🎙️</div>
+                                    <div class="file-upload-text">Click to upload audio file</div>
+                                    <div class="file-upload-hint">Or drag and drop (MP3, WAV, M4A)</div>
+                                </div>
+                                <div id="audioUploadResult"></div>
+                            </div>
+                        </div>
 
-                <!-- Section 7: Storytelling -->
-                <div class="form-section">
-                    <h3 class="section-title">Cultural Documentation</h3>
-                    <div class="form-group">
-                        <label for="storytellingText">Stories, Histories & Narratives</label>
-                        <textarea id="storytellingText" placeholder="Share any stories, historical context, or cultural significance..." maxlength="5000"></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label>Audio Recording</label>
-                        <div class="audio-controls">
-                            <button type="button" id="recordBtn" class="record-btn" title="Record Audio">●</button>
-                            <span id="recordingStatus">Click to start recording</span>
-                            <audio id="audioPlayback" controls class="hidden"></audio>
+                        <!-- Field Notes Section -->
+                        <div class="form-section">
+                            <div class="section-header">
+                                <h3 class="section-title">📝 Field Notes</h3>
+                                <p class="section-description">Additional observations and remarks</p>
+                            </div>
+                            
+                            <div class="form-group">
+                                <label class="form-label" for="notes">Additional Observations</label>
+                                <textarea id="notes" class="form-input form-textarea" placeholder="Any additional observations, notes, or remarks..." maxlength="2000"></textarea>
+                            </div>
                         </div>
-                        <div class="file-upload" id="audioUpload">
-                            Click to upload audio file or drag and drop
+
+                        <div class="form-actions">
+                            <button type="button" id="resetForm" class="btn btn-outline">Reset Form</button>
+                            <button type="submit" class="btn btn-primary btn-lg">💾 Save Tree Record</button>
                         </div>
-                        <div id="audioUploadResult"></div>
-                    </div>
-                </div>
+                    </form>
 
-                <!-- Section 8: Notes -->
-                <div class="form-section">
-                    <h3 class="section-title">Field Notes</h3>
-                    <div class="form-group">
-                        <label for="notes">Additional Observations</label>
-                        <textarea id="notes" placeholder="Any additional observations, notes, or remarks..." maxlength="2000"></textarea>
-                    </div>
+                    <div id="message"></div>
                 </div>
+            </div>
 
-                <div class="form-actions">
-                    <button type="button" id="resetForm" class="btn btn-secondary">Reset Form</button>
-                    <button type="submit" class="btn btn-primary">Save Tree Record</button>
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Recent Trees</h3>
+                    <p class="card-subtitle">Recently documented specimens</p>
+                </div>
+                <div class="card-content">
+                    <div id="treeList" class="tree-list">
+                        <div class="loading">
+                            <div class="spinner"></div>
+                            Loading trees...
+                        </div>
+                    </div>
                 </div>
-            </form>
-
-            <div id="message"></div>
-        </div>
-
-        <div class="sidebar-container">
-            <h3 class="sidebar-title">Recent Trees</h3>
-            <div id="treeList" class="tree-list">
-                <div class="loading">Loading trees...</div>
             </div>
         </div>
     </div>
 
-    <script src="/static/app.js?v=3.1754653728&t=1754653728"></script>
+    <script src="/static/app.js?v=4.0.0&t=1754657582"></script>
 </body>
 </html>

static/index_old.html

@@ -0,0 +1,671 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>TreeTrack - Field Research Tool</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            line-height: 1.6;
+            color: #1e293b;
+            background: #f8fafc;
+            min-height: 100vh;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+            color: white;
+            padding: 1.5rem 0;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .header-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .header h1 {
+            font-size: 1.875rem;
+            font-weight: 600;
+            margin: 0;
+            letter-spacing: -0.025em;
+        }
+
+        .header-subtitle {
+            font-size: 0.875rem;
+            opacity: 0.9;
+            margin-top: 0.25rem;
+            font-weight: 400;
+        }
+
+        .map-link {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: 500;
+            transition: background-color 0.2s;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .map-link:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem 2rem;
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 2rem;
+        }
+
+        @media (min-width: 1024px) {
+            .container {
+                grid-template-columns: 2fr 1fr;
+            }
+        }
+
+        .form-container {
+            background: white;
+            border-radius: 12px;
+            padding: 2rem;
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+            border: 1px solid #e2e8f0;
+        }
+
+        .sidebar-container {
+            background: white;
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+            border: 1px solid #e2e8f0;
+            height: fit-content;
+        }
+
+        .form-section {
+            margin-bottom: 2rem;
+            padding: 1.5rem;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            background: #fafbfc;
+        }
+
+        .section-title {
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid #e2e8f0;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 1rem;
+        }
+
+        @media (min-width: 640px) {
+            .form-row {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+            color: #374151;
+            font-size: 0.875rem;
+        }
+
+        input, textarea, select {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
+            font-size: 0.875rem;
+            transition: all 0.2s;
+            background: white;
+        }
+
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        textarea {
+            resize: vertical;
+            min-height: 100px;
+        }
+
+        .multi-select {
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
+            padding: 0.75rem;
+            max-height: 120px;
+            overflow-y: auto;
+            background: white;
+        }
+
+        .multi-select label {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.5rem;
+            font-weight: normal;
+            cursor: pointer;
+            padding: 0.25rem;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+
+        .multi-select label:hover {
+            background-color: #f3f4f6;
+        }
+
+        .multi-select input[type="checkbox"] {
+            width: auto;
+            margin-right: 0.5rem;
+        }
+
+        .file-upload {
+            border: 2px dashed #d1d5db;
+            border-radius: 6px;
+            padding: 1.5rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            background: #f9fafb;
+            margin-top: 0.5rem;
+        }
+
+        .file-upload:hover {
+            border-color: #3b82f6;
+            background: #f0f9ff;
+        }
+
+        .photo-category {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            gap: 0.75rem;
+            align-items: center;
+            margin-bottom: 1rem;
+            padding: 1rem;
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            background: white;
+        }
+
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.875rem;
+            font-weight: 500;
+            transition: all 0.2s;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .btn-primary {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #2563eb;
+        }
+
+        .btn-secondary {
+            background: #6b7280;
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background: #4b5563;
+        }
+
+        .btn-outline {
+            background: transparent;
+            color: #3b82f6;
+            border: 1px solid #3b82f6;
+        }
+
+        .btn-outline:hover {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .btn-small {
+            padding: 0.5rem 1rem;
+            font-size: 0.75rem;
+        }
+
+        .current-location {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .success-message, .error-message {
+            padding: 0.75rem 1rem;
+            border-radius: 6px;
+            margin: 1rem 0;
+            font-weight: 500;
+            font-size: 0.875rem;
+        }
+
+        .success-message {
+            background: #dcfce7;
+            color: #166534;
+            border: 1px solid #bbf7d0;
+        }
+
+        .error-message {
+            background: #fee2e2;
+            color: #991b1b;
+            border: 1px solid #fecaca;
+        }
+
+        .sidebar-title {
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid #e2e8f0;
+        }
+
+        .tree-list {
+            max-height: 60vh;
+            overflow-y: auto;
+        }
+
+        .tree-item {
+            padding: 1rem;
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            margin-bottom: 0.75rem;
+            background: white;
+            transition: all 0.2s;
+        }
+
+        .tree-item:hover {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            border-color: #3b82f6;
+        }
+
+        .tree-id {
+            font-weight: 600;
+            color: #1e40af;
+            font-size: 0.875rem;
+        }
+
+        .tree-info {
+            color: #6b7280;
+            font-size: 0.75rem;
+            margin-top: 0.25rem;
+            line-height: 1.4;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 2rem;
+            color: #6b7280;
+        }
+
+        .audio-controls {
+            display: flex;
+            gap: 0.75rem;
+            align-items: center;
+            margin-top: 0.75rem;
+        }
+
+        .record-btn {
+            background: #ef4444;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 3rem;
+            height: 3rem;
+            font-size: 1.125rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .record-btn:hover {
+            background: #dc2626;
+        }
+
+        .record-btn.recording {
+            background: #10b981;
+            animation: pulse 1.5s infinite;
+        }
+
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .form-actions {
+            display: flex;
+            gap: 1rem;
+            justify-content: flex-end;
+            margin-top: 2rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid #e2e8f0;
+        }
+
+        @media (max-width: 640px) {
+            .form-actions {
+                flex-direction: column;
+            }
+            
+            .btn {
+                width: 100%;
+            }
+        }
+
+        .uploaded-file {
+            margin-top: 0.5rem;
+            padding: 0.5rem 0.75rem;
+            background: #f0fdf4;
+            border: 1px solid #bbf7d0;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            color: #166534;
+        }
+
+        .form-description {
+            color: #6b7280;
+            font-size: 0.875rem;
+            margin-bottom: 2rem;
+            line-height: 1.5;
+        }
+
+        /* Auto-suggestion styles */
+        .autocomplete-container {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+        }
+
+        .autocomplete-dropdown {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: white;
+            border: 1px solid #d1d5db;
+            border-top: none;
+            border-radius: 0 0 6px 6px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            max-height: 200px;
+            overflow-y: auto;
+            z-index: 1000;
+            display: none;
+        }
+
+        .autocomplete-item {
+            padding: 0.75rem;
+            cursor: pointer;
+            border-bottom: 1px solid #f3f4f6;
+            transition: background-color 0.2s;
+        }
+
+        .autocomplete-item:last-child {
+            border-bottom: none;
+        }
+
+        .autocomplete-item:hover,
+        .autocomplete-item.highlighted {
+            background-color: #f3f4f6;
+        }
+
+        .autocomplete-primary {
+            font-weight: 500;
+            color: #1e293b;
+            font-size: 0.875rem;
+        }
+
+        .autocomplete-secondary {
+            font-size: 0.75rem;
+            color: #6b7280;
+            margin-top: 0.25rem;
+            line-height: 1.3;
+        }
+
+        .autocomplete-badge {
+            display: inline-block;
+            background: #e0f2fe;
+            color: #0369a1;
+            font-size: 0.625rem;
+            font-weight: 500;
+            padding: 0.125rem 0.375rem;
+            border-radius: 4px;
+            margin-top: 0.25rem;
+            margin-right: 0.25rem;
+        }
+
+        .autocomplete-loading {
+            padding: 0.75rem;
+            text-align: center;
+            color: #6b7280;
+            font-size: 0.75rem;
+            font-style: italic;
+        }
+
+        .autocomplete-no-results {
+            padding: 0.75rem;
+            text-align: center;
+            color: #9ca3af;
+            font-size: 0.75rem;
+            font-style: italic;
+        }
+    </style>
+    <script>
+        // Force refresh if we detect cached version
+        (function() {
+            const currentVersion = '3.1754653728';
+            const lastVersion = sessionStorage.getItem('treetrack_version');
+            if (!lastVersion || lastVersion !== currentVersion) {
+                sessionStorage.setItem('treetrack_version', currentVersion);
+                if (lastVersion && lastVersion !== currentVersion) {
+                    location.reload(true);
+                    return;
+                }
+            }
+        })();
+    </script>
+</head>
+<body>
+    <div class="header">
+        <div class="header-content">
+            <div>
+                <h1>TreeTrack</h1>
+                <div class="header-subtitle">Professional Field Research & Documentation</div>
+            </div>
+            <a href="/static/map.html" class="map-link">View Map</a>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="form-container">
+            <div class="form-description">
+                Complete the form below to document tree specimens in the field. All fields marked with * are required.
+            </div>
+            
+            <form id="treeForm">
+                <!-- Section 1: Location -->
+                <div class="form-section">
+                    <h3 class="section-title">Geographic Location</h3>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="latitude">Latitude *</label>
+                            <div class="current-location">
+                                <input type="number" id="latitude" step="0.0000001" min="-90" max="90" required>
+                                <button type="button" id="getLocation" class="btn btn-outline btn-small">Get GPS</button>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="longitude">Longitude *</label>
+                            <input type="number" id="longitude" step="0.0000001" min="-180" max="180" required>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <a href="/static/map.html" class="btn btn-outline" style="width: 100%; text-align: center;">Select from Interactive Map</a>
+                    </div>
+                </div>
+
+                <!-- Section 2: Identification -->
+                <div class="form-section">
+                    <h3 class="section-title">Tree Identification</h3>
+                    <div class="form-group">
+                        <label for="localName">Local Name (Assamese)</label>
+                        <input type="text" id="localName" placeholder="Enter local Assamese name">
+                    </div>
+                    <div class="form-group">
+                        <label for="scientificName">Scientific Name</label>
+                        <input type="text" id="scientificName" placeholder="e.g., Ficus benghalensis">
+                    </div>
+                    <div class="form-group">
+                        <label for="commonName">Common Name</label>
+                        <input type="text" id="commonName" placeholder="e.g., Banyan Tree">
+                    </div>
+                    <div class="form-group">
+                        <label for="treeCode">Tree Reference Code</label>
+                        <input type="text" id="treeCode" placeholder="e.g., C.A, A-G1" maxlength="20">
+                    </div>
+                </div>
+
+                <!-- Section 3: Measurements -->
+                <div class="form-section">
+                    <h3 class="section-title">Physical Measurements</h3>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="height">Height (meters)</label>
+                            <input type="number" id="height" step="0.1" min="0" max="200" placeholder="15.5">
+                        </div>
+                        <div class="form-group">
+                            <label for="width">Girth/DBH (cm)</label>
+                            <input type="number" id="width" step="0.1" min="0" max="2000" placeholder="45.2">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Section 4: Utility -->
+                <div class="form-section">
+                    <h3 class="section-title">Ecological & Cultural Utility</h3>
+                    <div class="form-group">
+                        <label>Select applicable utilities:</label>
+                        <div id="utilityOptions" class="multi-select">
+                            <!-- Options loaded dynamically -->
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Section 5: Phenology -->
+                <div class="form-section">
+                    <h3 class="section-title">Phenology Assessment</h3>
+                    <div class="form-group">
+                        <label>Current development stages:</label>
+                        <div id="phenologyOptions" class="multi-select">
+                            <!-- Options loaded dynamically -->
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Section 6: Photography -->
+                <div class="form-section">
+                    <h3 class="section-title">Photographic Documentation</h3>
+                    <div id="photoCategories">
+                        <!-- Photo categories loaded dynamically -->
+                    </div>
+                </div>
+
+                <!-- Section 7: Storytelling -->
+                <div class="form-section">
+                    <h3 class="section-title">Cultural Documentation</h3>
+                    <div class="form-group">
+                        <label for="storytellingText">Stories, Histories & Narratives</label>
+                        <textarea id="storytellingText" placeholder="Share any stories, historical context, or cultural significance..." maxlength="5000"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Audio Recording</label>
+                        <div class="audio-controls">
+                            <button type="button" id="recordBtn" class="record-btn" title="Record Audio">●</button>
+                            <span id="recordingStatus">Click to start recording</span>
+                            <audio id="audioPlayback" controls class="hidden"></audio>
+                        </div>
+                        <div class="file-upload" id="audioUpload">
+                            Click to upload audio file or drag and drop
+                        </div>
+                        <div id="audioUploadResult"></div>
+                    </div>
+                </div>
+
+                <!-- Section 8: Notes -->
+                <div class="form-section">
+                    <h3 class="section-title">Field Notes</h3>
+                    <div class="form-group">
+                        <label for="notes">Additional Observations</label>
+                        <textarea id="notes" placeholder="Any additional observations, notes, or remarks..." maxlength="2000"></textarea>
+                    </div>
+                </div>
+
+                <div class="form-actions">
+                    <button type="button" id="resetForm" class="btn btn-secondary">Reset Form</button>
+                    <button type="submit" class="btn btn-primary">Save Tree Record</button>
+                </div>
+            </form>
+
+            <div id="message"></div>
+        </div>
+
+        <div class="sidebar-container">
+            <h3 class="sidebar-title">Recent Trees</h3>
+            <div id="treeList" class="tree-list">
+                <div class="loading">Loading trees...</div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/app.js?v=3.1754653728&t=1754653728"></script>
+</body>
+</html>

static/login.html

@@ -272,19 +272,19 @@
         <div class="demo-accounts">
             <div class="demo-title">🔐 Available Accounts</div>
             <div class="account-list">
-                <div class="account-item" onclick="fillCredentials('aalekh')">
+                <div class="account-item" onclick="fillCredentials('aalekh', event)">
                     <div class="account-role">Aalekh (Admin)</div>
                     <div class="account-username">Full system access</div>
                 </div>
-                <div class="account-item" onclick="fillCredentials('admin')">
+                <div class="account-item" onclick="fillCredentials('admin', event)">
                     <div class="account-role">System Admin</div>
                     <div class="account-username">Administrative access</div>
                 </div>
-                <div class="account-item" onclick="fillCredentials('ishita')">
+                <div class="account-item" onclick="fillCredentials('ishita', event)">
                     <div class="account-role">Ishita</div>
                     <div class="account-username">Tree research & documentation</div>
                 </div>
-                <div class="account-item" onclick="fillCredentials('jeeb')">
+                <div class="account-item" onclick="fillCredentials('jeeb', event)">
                     <div class="account-role">Jeeb</div>
                     <div class="account-username">Tree research & documentation</div>
                 </div>
@@ -300,7 +300,7 @@
     </div>
 
     <script>
-        function fillCredentials(username) {
+        function fillCredentials(username, event = null) {
             document.getElementById('username').value = username;
             document.getElementById('password').value = '';
             document.getElementById('password').focus();
@@ -308,7 +308,20 @@
             // Add visual feedback
             const accountItems = document.querySelectorAll('.account-item');
             accountItems.forEach(item => item.style.background = 'rgba(255, 255, 255, 0.7)');
-            event.target.closest('.account-item').style.background = 'rgba(59, 130, 246, 0.1)';
+            
+            // Only try to highlight if event is provided
+            if (event && event.target) {
+                const targetItem = event.target.closest('.account-item');
+                if (targetItem) {
+                    targetItem.style.background = 'rgba(59, 130, 246, 0.1)';
+                }
+            } else {
+                // If no event, try to find the account item by username
+                const targetItem = document.querySelector(`[onclick="fillCredentials('${username}')"]`);
+                if (targetItem) {
+                    targetItem.style.background = 'rgba(59, 130, 246, 0.1)';
+                }
+            }
         }
 
         function showMessage(message, type = 'error') {

static/map.html

@@ -12,6 +12,62 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+        
+        :root {
+            /* Colors */
+            --primary-50: #eff6ff;
+            --primary-100: #dbeafe;
+            --primary-500: #3b82f6;
+            --primary-600: #2563eb;
+            --primary-700: #1d4ed8;
+            --primary-900: #1e3a8a;
+            
+            --gray-50: #f8fafc;
+            --gray-100: #f1f5f9;
+            --gray-200: #e2e8f0;
+            --gray-300: #cbd5e1;
+            --gray-400: #94a3b8;
+            --gray-500: #64748b;
+            --gray-600: #475569;
+            --gray-700: #334155;
+            --gray-800: #1e293b;
+            --gray-900: #0f172a;
+            
+            --green-50: #f0fdf4;
+            --green-500: #22c55e;
+            --green-600: #16a34a;
+            
+            --red-50: #fef2f2;
+            --red-500: #ef4444;
+            --red-600: #dc2626;
+            
+            --orange-500: #f97316;
+            --orange-600: #ea580c;
+            
+            /* Spacing */
+            --space-1: 0.25rem;
+            --space-2: 0.5rem;
+            --space-3: 0.75rem;
+            --space-4: 1rem;
+            --space-5: 1.25rem;
+            --space-6: 1.5rem;
+            --space-8: 2rem;
+            
+            /* Radius */
+            --radius-sm: 0.375rem;
+            --radius-md: 0.5rem;
+            --radius-lg: 0.75rem;
+            --radius-xl: 1rem;
+            --radius-2xl: 1.5rem;
+            
+            /* Shadows */
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        }
+        
         * {
             margin: 0;
             padding: 0;
@@ -19,11 +75,15 @@
         }
 
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: #1a1a1a;
-            color: white;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-feature-settings: 'cv11' 1, 'ss01' 1;
+            line-height: 1.6;
+            color: var(--gray-800);
+            background: var(--gray-50);
             height: 100vh;
             overflow: hidden;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }
 
         .app-container {
@@ -34,63 +94,154 @@
 
         /* Header */
         .header {
-            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
-            padding: 1rem 1.5rem;
+            background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
+            color: white;
+            z-index: 1000;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(12px);
+        }
+
+        .header-content {
+            padding: var(--space-4) var(--space-6);
             display: flex;
             justify-content: space-between;
             align-items: center;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            z-index: 1000;
-            /* Red border removed after debugging */
+            flex-wrap: wrap;
+            gap: var(--space-4);
+            max-width: none;
+        }
+
+        .header-brand {
+            display: flex;
+            align-items: center;
+            gap: var(--space-3);
         }
 
         .logo {
             font-size: 1.5rem;
-            font-weight: 600;
+            font-weight: 700;
+            letter-spacing: -0.025em;
+        }
+
+        .header-stats {
             display: flex;
             align-items: center;
-            gap: 10px;
-            letter-spacing: -0.025em;
+            gap: var(--space-6);
+        }
+
+        .stat-item {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2);
+            padding: var(--space-2) var(--space-4);
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: var(--radius-lg);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(8px);
+        }
+
+        .stat-icon {
+            font-size: 1.125rem;
+        }
+
+        .stat-text {
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        .stat-number {
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--primary-100);
         }
 
         .header-actions {
             display: flex;
-            gap: 10px;
             align-items: center;
+            gap: var(--space-3);
+        }
+
+        .user-info {
+            display: flex;
+            align-items: center;
+            gap: var(--space-3);
+            padding: var(--space-2) var(--space-4);
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: var(--radius-xl);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(8px);
+        }
+
+        .user-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--primary-500);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            font-size: 0.875rem;
+        }
+
+        .user-details {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .user-name {
+            font-size: 0.875rem;
+            font-weight: 600;
+        }
+
+        .user-role {
+            font-size: 0.75rem;
+            opacity: 0.8;
         }
 
         .btn {
-            padding: 8px 15px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2);
+            padding: var(--space-2) var(--space-4);
+            font-size: 0.875rem;
+            font-weight: 500;
+            line-height: 1.25;
+            border-radius: var(--radius-md);
             border: none;
-            border-radius: 20px;
             cursor: pointer;
-            font-size: 14px;
-            font-weight: 600;
-            transition: all 0.3s ease;
+            transition: all 0.15s ease;
             text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 5px;
+            outline: none;
+            white-space: nowrap;
         }
 
         .btn-primary {
-            background: #3b82f6;
+            background: var(--primary-500);
             color: white;
         }
 
         .btn-primary:hover {
-            background: #2563eb;
+            background: var(--primary-600);
             transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
         }
 
         .btn-secondary {
-            background: rgba(255,255,255,0.2);
+            background: rgba(255, 255, 255, 0.1);
             color: white;
-            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
         .btn-secondary:hover {
-            background: rgba(255,255,255,0.3);
+            background: rgba(255, 255, 255, 0.2);
+            transform: translateY(-1px);
+        }
+
+        .btn-sm {
+            padding: var(--space-1) var(--space-3);
+            font-size: 0.8125rem;
         }
 
         /* Map Container */
@@ -106,194 +257,202 @@
             z-index: 1;
         }
 
-        /* Floating Controls */
-        .floating-controls {
+        /* Controls Panel */
+        .controls-panel {
             position: absolute;
-            top: 20px;
-            right: 20px;
+            top: var(--space-4);
+            left: var(--space-4);
             z-index: 1000;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(12px);
+            border-radius: var(--radius-xl);
+            border: 1px solid var(--gray-200);
+            box-shadow: var(--shadow-lg);
+            overflow: hidden;
+        }
+
+        .controls-header {
+            padding: var(--space-4);
+            border-bottom: 1px solid var(--gray-100);
+        }
+
+        .controls-title {
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: var(--gray-900);
+            margin: 0;
+        }
+
+        .controls-content {
+            padding: var(--space-3);
+        }
+
+        .control-group {
             display: flex;
             flex-direction: column;
-            gap: 10px;
+            gap: var(--space-2);
+        }
+
+        .control-button {
+            background: var(--gray-50);
+            color: var(--gray-700);
+            border: 1px solid var(--gray-200);
+            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;
+            display: flex;
+            align-items: center;
+            gap: var(--space-2);
         }
 
-        .control-panel {
-            background: rgba(0,0,0,0.8);
-            backdrop-filter: blur(10px);
-            border-radius: 15px;
-            padding: 15px;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
-            border: 1px solid rgba(255,255,255,0.1);
+        .control-button:hover {
+            background: var(--gray-100);
+            border-color: var(--gray-300);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-sm);
         }
 
-        .location-info {
-            position: absolute;
-            bottom: 20px;
-            left: 20px;
-            right: 20px;
-            z-index: 1000;
+        .control-button.active {
+            background: var(--primary-50);
+            color: var(--primary-700);
+            border-color: var(--primary-500);
         }
 
-        .info-panel {
-            background: rgba(0,0,0,0.9);
-            backdrop-filter: blur(15px);
-            border-radius: 15px;
-            padding: 20px;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-            border: 1px solid rgba(255,255,255,0.1);
+        /* Location Panel */
+        .location-panel {
+            position: absolute;
+            bottom: var(--space-4);
+            left: var(--space-4);
+            right: var(--space-4);
+            z-index: 1000;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(12px);
+            border-radius: var(--radius-xl);
+            border: 1px solid var(--gray-200);
+            box-shadow: var(--shadow-lg);
             transform: translateY(100%);
             transition: transform 0.3s ease;
         }
 
-        .info-panel.active {
+        .location-panel.active {
             transform: translateY(0);
         }
 
-        .coordinates {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 15px;
+        .location-header {
+            padding: var(--space-4);
+            border-bottom: 1px solid var(--gray-100);
+        }
+
+        .location-title {
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--gray-900);
+            margin: 0;
+        }
+
+        .location-content {
+            padding: var(--space-4);
+        }
+
+        .coordinates-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: var(--space-4);
+            margin-bottom: var(--space-4);
         }
 
         .coord-item {
-            flex: 1;
             text-align: center;
         }
 
         .coord-label {
-            font-size: 12px;
-            opacity: 0.7;
-            margin-bottom: 5px;
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: var(--gray-600);
+            margin-bottom: var(--space-1);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
         }
 
         .coord-value {
-            font-size: 18px;
-            font-weight: bold;
-            color: #3b82f6;
+            font-size: 1.125rem;
+            font-weight: 700;
+            color: var(--primary-600);
+            font-variant-numeric: tabular-nums;
         }
 
-        .quick-actions {
-            display: flex;
-            gap: 10px;
-            margin-top: 15px;
+        .location-actions {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: var(--space-3);
         }
 
-        .quick-actions .btn {
-            flex: 1;
+        /* Messages */
+        .message {
+            position: absolute;
+            top: var(--space-4);
+            left: 50%;
+            transform: translateX(-50%);
+            padding: var(--space-3) var(--space-6);
+            border-radius: var(--radius-lg);
+            font-size: 0.875rem;
+            font-weight: 500;
+            z-index: 1500;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
         }
 
-        /* Tree Markers Info */
-        .tree-counter {
-            background: rgba(59, 130, 246, 0.9);
-            color: white;
-            padding: 10px 15px;
-            border-radius: 20px;
-            font-weight: bold;
-            display: flex;
-            align-items: center;
-            gap: 8px;
+        .message.show {
+            opacity: 1;
         }
 
-        /* Mobile Optimizations */
-        @media (max-width: 768px) {
-            .header {
-                padding: 10px 15px;
-            }
-
-            .logo {
-                font-size: 1.3rem;
-            }
-
-            .floating-controls {
-                top: 10px;
-                right: 10px;
-            }
-
-            .control-panel {
-                padding: 10px;
-            }
-
-            .location-info {
-                bottom: 10px;
-                left: 10px;
-                right: 10px;
-            }
-
-            .coordinates {
-                flex-direction: column;
-                gap: 10px;
-            }
-
-            .quick-actions {
-                flex-direction: column;
-            }
-
-            .btn {
-                padding: 12px 20px;
-                font-size: 16px;
-            }
+        .message.success {
+            background: var(--green-50);
+            color: var(--green-600);
+            border: 1px solid var(--green-500);
         }
 
-        /* Custom Pin Styles */
-        .tree-pin {
-            background: #3b82f6;
-            border: 3px solid white;
-            border-radius: 50%;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        .message.error {
+            background: var(--red-50);
+            color: var(--red-600);
+            border: 1px solid var(--red-500);
         }
 
-        .temp-pin {
-            background: #ff6b35;
-            border: 3px solid white;
-            border-radius: 50%;
-            box-shadow: 
-                0 2px 10px rgba(0,0,0,0.3),
-                0 0 15px rgba(255, 107, 53, 0.6),
-                0 0 25px rgba(255, 107, 53, 0.3);
-            animation: gentle-glow 3s ease-in-out infinite;
-        }
-
-        @keyframes gentle-glow {
-            0% { 
-                box-shadow: 
-                    0 2px 10px rgba(0,0,0,0.3),
-                    0 0 15px rgba(255, 107, 53, 0.6),
-                    0 0 25px rgba(255, 107, 53, 0.3);
-            }
-            50% { 
-                box-shadow: 
-                    0 2px 12px rgba(0,0,0,0.4),
-                    0 0 20px rgba(255, 107, 53, 0.8),
-                    0 0 35px rgba(255, 107, 53, 0.5);
-            }
-            100% { 
-                box-shadow: 
-                    0 2px 10px rgba(0,0,0,0.3),
-                    0 0 15px rgba(255, 107, 53, 0.6),
-                    0 0 25px rgba(255, 107, 53, 0.3);
-            }
+        .message.info {
+            background: var(--primary-50);
+            color: var(--primary-600);
+            border: 1px solid var(--primary-500);
         }
 
-        /* Loading States */
+        /* Loading */
         .loading {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            background: rgba(0,0,0,0.8);
-            padding: 20px 30px;
-            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(8px);
+            padding: var(--space-6) var(--space-8);
+            border-radius: var(--radius-xl);
             z-index: 2000;
+            display: flex;
+            align-items: center;
+            gap: var(--space-3);
+            box-shadow: var(--shadow-lg);
+            border: 1px solid var(--gray-200);
         }
 
         .spinner {
-            border: 3px solid rgba(255,255,255,0.3);
-            border-top: 3px solid #3b82f6;
+            border: 2px solid var(--gray-200);
+            border-top: 2px solid var(--primary-500);
             border-radius: 50%;
-            width: 30px;
-            height: 30px;
+            width: 1.5rem;
+            height: 1.5rem;
             animation: spin 1s linear infinite;
-            margin: 0 auto 10px;
         }
 
         @keyframes spin {
@@ -301,176 +460,230 @@
             100% { transform: rotate(360deg); }
         }
 
-        /* Success/Error Messages */
-        .message {
-            position: absolute;
-            top: 80px;
-            left: 50%;
-            transform: translateX(-50%);
-            padding: 15px 25px;
-            border-radius: 25px;
-            font-weight: 600;
-            z-index: 1500;
-            opacity: 0;
-            transition: opacity 0.3s ease;
+        .loading-text {
+            color: var(--gray-700);
+            font-size: 0.875rem;
+            font-weight: 500;
         }
 
-        .message.show {
-            opacity: 1;
+        /* Custom Leaflet Overrides */
+        .leaflet-control-container {
+            display: none;
         }
 
-        .message.success {
-            background: linear-gradient(45deg, #3b82f6, #2563eb);
-            color: white;
+        .leaflet-popup-content-wrapper {
+            background: white;
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-xl);
+            border: 1px solid var(--gray-200);
         }
 
-        .message.error {
-            background: linear-gradient(45deg, #f44336, #d32f2f);
-            color: white;
+        .leaflet-popup-tip {
+            background: white;
+            border: 1px solid var(--gray-200);
         }
 
-        /* Gesture Instructions */
-        .gesture-hint {
-            position: absolute;
-            bottom: 120px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0,0,0,0.7);
-            color: white;
-            padding: 10px 20px;
-            border-radius: 20px;
-            font-size: 14px;
-            z-index: 1000;
-            animation: fadeInOut 4s ease-in-out;
-        }
-
-        @keyframes fadeInOut {
-            0%, 100% { opacity: 0; }
-            20%, 80% { opacity: 1; }
+        .leaflet-popup-content {
+            margin: 0;
+            line-height: 1.5;
         }
 
-        /* Custom Tree Marker Styles */
-        .custom-tree-icon {
-            background: transparent !important;
-            border: none !important;
+        /* Tree Popup Content */
+        .tree-popup {
+            padding: var(--space-4);
+            min-width: 280px;
         }
 
-        .custom-tree-marker {
-            position: relative;
+        .tree-popup-header {
             display: flex;
-            flex-direction: column;
             align-items: center;
+            gap: var(--space-3);
+            margin-bottom: var(--space-3);
+            padding-bottom: var(--space-3);
+            border-bottom: 1px solid var(--gray-100);
         }
 
-        .tree-icon-container {
-            background: linear-gradient(145deg, #ffffff, #f0f0f0);
-            border-radius: 50%;
-            padding: 4px;
-            box-shadow: 
-                0 4px 8px rgba(0,0,0,0.15),
-                0 2px 4px rgba(0,0,0,0.1),
-                inset 0 1px 0 rgba(255,255,255,0.2);
-            transition: all 0.3s ease;
-            cursor: pointer;
+        .tree-icon {
+            font-size: 2rem;
+            color: var(--green-500);
         }
 
-        .tree-icon-container:hover {
-            transform: translateY(-2px) scale(1.1);
-            box-shadow: 
-                0 6px 16px rgba(0,0,0,0.2),
-                0 4px 8px rgba(0,0,0,0.15),
-                inset 0 1px 0 rgba(255,255,255,0.3);
+        .tree-popup-title {
+            flex: 1;
         }
 
-        .tree-marker-shadow {
-            width: 12px;
-            height: 6px;
-            background: rgba(0,0,0,0.3);
-            border-radius: 50%;
-            margin-top: 2px;
-            filter: blur(1px);
-            transition: all 0.3s ease;
+        .tree-name {
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--gray-900);
+            margin: 0;
         }
 
-        .custom-tree-marker:hover .tree-marker-shadow {
-            width: 16px;
-            background: rgba(0,0,0,0.4);
+        .tree-scientific {
+            font-size: 0.75rem;
+            color: var(--gray-600);
+            font-style: italic;
+            margin-top: var(--space-1);
         }
 
-        /* Tooltip Styles */
-        .leaflet-tooltip.tree-tooltip {
-            background: linear-gradient(145deg, #1e40af, #1d4ed8) !important;
-            border: 1px solid rgba(255,255,255,0.2) !important;
-            border-radius: 8px !important;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
-            color: white !important;
-            font-family: 'Segoe UI', sans-serif !important;
-            font-size: 13px !important;
-            padding: 8px 12px !important;
-            backdrop-filter: blur(10px);
+        .tree-popup-details {
+            display: grid;
+            gap: var(--space-2);
+            margin-bottom: var(--space-3);
         }
 
-        .leaflet-tooltip.tree-tooltip::before {
-            border-top-color: #1e40af !important;
+        .detail-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.8125rem;
         }
 
-        .tree-tooltip-content {
-            min-width: 80px;
-            text-align: center;
+        .detail-label {
+            color: var(--gray-600);
+            font-weight: 500;
         }
 
-        .tree-name {
+        .detail-value {
+            color: var(--gray-900);
             font-weight: 600;
-            font-size: 14px;
-            margin-bottom: 2px;
-            color: #ffffff;
         }
 
-        .tree-details {
-            font-size: 11px;
-            opacity: 0.9;
-            color: #e8f5e8;
+        .tree-popup-actions {
+            display: grid;
+            grid-template-columns: 1fr 1fr auto;
+            gap: var(--space-2);
+        }
+
+        .btn-icon {
+            background: transparent;
+            border: 1px solid var(--gray-300);
+            color: var(--gray-600);
+            padding: var(--space-2);
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            transition: all 0.15s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
-        /* Enhanced Popup Styles */
-        .leaflet-popup.tree-popup {
-            margin-bottom: 10px;
+        .btn-icon:hover {
+            background: var(--gray-50);
+            border-color: var(--gray-400);
         }
 
-        .leaflet-popup.tree-popup .leaflet-popup-content-wrapper {
-            background: linear-gradient(145deg, #ffffff, #f8f9fa);
-            border-radius: 12px;
-            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
-            border: 1px solid rgba(44, 85, 48, 0.1);
+        .btn-icon.edit:hover {
+            background: var(--primary-50);
+            border-color: var(--primary-500);
+            color: var(--primary-600);
         }
 
-        .leaflet-popup.tree-popup .leaflet-popup-tip {
-            background: #ffffff;
-            border: 1px solid rgba(59, 130, 246, 0.1);
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        .btn-icon.delete:hover {
+            background: var(--red-50);
+            border-color: var(--red-500);
+            color: var(--red-600);
+        }
+
+        /* Mobile Optimizations */
+        @media (max-width: 768px) {
+            .header-content {
+                padding: var(--space-3) var(--space-4);
+            }
+            
+            .header-stats {
+                gap: var(--space-3);
+            }
+            
+            .stat-item {
+                padding: var(--space-1) var(--space-3);
+            }
+            
+            .stat-text {
+                display: none;
+            }
+            
+            .logo {
+                font-size: 1.25rem;
+            }
+            
+            .controls-panel {
+                top: var(--space-3);
+                left: var(--space-3);
+            }
+            
+            .location-panel {
+                bottom: var(--space-3);
+                left: var(--space-3);
+                right: var(--space-3);
+            }
+            
+            .coordinates-grid {
+                grid-template-columns: 1fr;
+                gap: var(--space-3);
+            }
+            
+            .location-actions {
+                grid-template-columns: 1fr;
+            }
+            
+            .user-details {
+                display: none;
+            }
+            
+            .tree-popup {
+                min-width: 260px;
+                padding: var(--space-3);
+            }
+            
+            .tree-popup-actions {
+                grid-template-columns: 1fr;
+                gap: var(--space-2);
+            }
+        }
+
+        /* Gesture Hint */
+        .gesture-hint {
+            position: absolute;
+            bottom: var(--space-16);
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: var(--space-3) var(--space-6);
+            border-radius: var(--radius-xl);
+            font-size: 0.875rem;
+            font-weight: 500;
+            z-index: 1000;
+            animation: fadeInOut 4s ease-in-out;
+            pointer-events: none;
+        }
+
+        @keyframes fadeInOut {
+            0%, 100% { opacity: 0; }
+            25%, 75% { opacity: 1; }
+        }
+
+        /* Focus States */
+        .btn:focus-visible,
+        .control-button:focus-visible,
+        .btn-icon:focus-visible {
+            outline: 2px solid var(--primary-500);
+            outline-offset: 2px;
         }
     </style>
     <script>
         // Force refresh if we detect cached version
         (function() {
-            const currentVersion = '3.1754653904';
+            const currentVersion = '4.0.0';
             const lastVersion = sessionStorage.getItem('treetrack_version');
-            
-            // Always reload on version mismatch
-            if (lastVersion && lastVersion !== currentVersion) {
-                console.log('Version changed from', lastVersion, 'to', currentVersion, '- forcing reload');
+            if (!lastVersion || lastVersion !== currentVersion) {
                 sessionStorage.setItem('treetrack_version', currentVersion);
-                location.reload(true);
-                return;
+                if (lastVersion && lastVersion !== currentVersion) {
+                    location.reload(true);
+                    return;
+                }
             }
-            
-            // Set version if not set
-            if (!lastVersion) {
-                sessionStorage.setItem('treetrack_version', currentVersion);
-            }
-            
-            // Add debug info to page title
-            document.title = 'TreeTrack Map - ' + new Date().toLocaleTimeString();
         })();
     </script>
 </head>
@@ -478,15 +691,35 @@
     <div class="app-container">
         <!-- Header -->
         <div class="header">
-            <div class="logo">
-                🔥 TreeTrack Map V4.0 🔥
-            </div>
-            <div class="header-actions">
-                <div class="tree-counter">
-                    <span>Trees:</span>
-                    <span id="treeCount">0</span>
+            <div class="header-content">
+                <div class="header-brand">
+                    <div class="logo">🌳 TreeTrack Map</div>
+                </div>
+                
+                <div class="header-stats">
+                    <div class="stat-item">
+                        <span class="stat-icon">🌲</span>
+                        <span class="stat-text">Trees:</span>
+                        <span class="stat-number" id="treeCount">0</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-icon">📍</span>
+                        <span class="stat-text">Selected:</span>
+                        <span class="stat-number" id="selectedCount">0</span>
+                    </div>
+                </div>
+                
+                <div class="header-actions">
+                    <div class="user-info" id="userInfo">
+                        <div class="user-avatar" id="userAvatar">U</div>
+                        <div class="user-details">
+                            <div class="user-name" id="userName">Loading...</div>
+                            <div class="user-role" id="userRole">User</div>
+                        </div>
+                    </div>
+                    <a href="/" class="btn btn-secondary">✏️ Add Tree</a>
+                    <button id="logoutBtn" class="btn btn-secondary">Logout</button>
                 </div>
-                <a href="/static/index.html" class="btn btn-secondary">Add Tree</a>
             </div>
         </div>
 
@@ -494,18 +727,36 @@
         <div class="map-container">
             <div id="map"></div>
 
-            <!-- Floating Controls -->
-            <div class="floating-controls">
-                <div class="control-panel">
-                    <button id="myLocationBtn" class="btn btn-primary">My Location</button>
-                    <button id="clearPinsBtn" class="btn btn-secondary" style="margin-top: 8px;">Clear Pins</button>
+            <!-- Controls Panel -->
+            <div class="controls-panel">
+                <div class="controls-header">
+                    <h3 class="controls-title">Map Controls</h3>
+                </div>
+                <div class="controls-content">
+                    <div class="control-group">
+                        <button id="myLocationBtn" class="control-button">
+                            <span>📍</span>
+                            <span>My Location</span>
+                        </button>
+                        <button id="clearPinsBtn" class="control-button">
+                            <span>🧹</span>
+                            <span>Clear Pins</span>
+                        </button>
+                        <button id="centerMapBtn" class="control-button">
+                            <span>🎯</span>
+                            <span>Center View</span>
+                        </button>
+                    </div>
                 </div>
             </div>
 
-            <!-- Location Info Panel -->
-            <div class="location-info">
-                <div class="info-panel" id="infoPanel">
-                    <div class="coordinates">
+            <!-- Location Panel -->
+            <div class="location-panel" id="locationPanel">
+                <div class="location-header">
+                    <h3 class="location-title">📍 Location Selected</h3>
+                </div>
+                <div class="location-content">
+                    <div class="coordinates-grid">
                         <div class="coord-item">
                             <div class="coord-label">Latitude</div>
                             <div class="coord-value" id="latValue">--</div>
@@ -515,9 +766,13 @@
                             <div class="coord-value" id="lngValue">--</div>
                         </div>
                     </div>
-                    <div class="quick-actions">
-                        <button id="useLocationBtn" class="btn btn-primary">Use This Location</button>
-                        <button id="cancelBtn" class="btn btn-secondary">Cancel</button>
+                    <div class="location-actions">
+                        <button id="useLocationBtn" class="btn btn-primary">
+                            ✅ Use This Location
+                        </button>
+                        <button id="cancelBtn" class="btn btn-secondary">
+                            ❌ Cancel
+                        </button>
                     </div>
                 </div>
             </div>
@@ -525,7 +780,7 @@
             <!-- Loading -->
             <div id="loading" class="loading" style="display: none;">
                 <div class="spinner"></div>
-                <div>Loading map...</div>
+                <div class="loading-text">Loading map...</div>
             </div>
 
             <!-- Messages -->
@@ -533,13 +788,13 @@
 
             <!-- Gesture Hint -->
             <div class="gesture-hint">
-                Tap anywhere on map to drop a pin
+                💡 Tap anywhere on the map to drop a location pin
             </div>
         </div>
     </div>
 
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
-    <script src="/static/map.js?v=3.1754653904&t=1754653904"></script>
+    <script src="/static/map_enhanced.js?v=4.0.0&t=1754657582"></script>
 </body>
 </html>

static/map_old.html

@@ -0,0 +1,545 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>TreeTrack Map - Interactive Field View</title>
+    
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #1a1a1a;
+            color: white;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .app-container {
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Header */
+        .header {
+            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
+            padding: 1rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            /* Red border removed after debugging */
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            letter-spacing: -0.025em;
+        }
+
+        .header-actions {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .btn {
+            padding: 8px 15px;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .btn-primary {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #2563eb;
+            transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+            background: rgba(255,255,255,0.2);
+            color: white;
+            backdrop-filter: blur(10px);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255,255,255,0.3);
+        }
+
+        /* Map Container */
+        .map-container {
+            flex: 1;
+            position: relative;
+            overflow: hidden;
+        }
+
+        #map {
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+
+        /* Floating Controls */
+        .floating-controls {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .control-panel {
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 15px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .location-info {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            right: 20px;
+            z-index: 1000;
+        }
+
+        .info-panel {
+            background: rgba(0,0,0,0.9);
+            backdrop-filter: blur(15px);
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+            border: 1px solid rgba(255,255,255,0.1);
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+        }
+
+        .info-panel.active {
+            transform: translateY(0);
+        }
+
+        .coordinates {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 15px;
+        }
+
+        .coord-item {
+            flex: 1;
+            text-align: center;
+        }
+
+        .coord-label {
+            font-size: 12px;
+            opacity: 0.7;
+            margin-bottom: 5px;
+        }
+
+        .coord-value {
+            font-size: 18px;
+            font-weight: bold;
+            color: #3b82f6;
+        }
+
+        .quick-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+
+        .quick-actions .btn {
+            flex: 1;
+        }
+
+        /* Tree Markers Info */
+        .tree-counter {
+            background: rgba(59, 130, 246, 0.9);
+            color: white;
+            padding: 10px 15px;
+            border-radius: 20px;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        /* Mobile Optimizations */
+        @media (max-width: 768px) {
+            .header {
+                padding: 10px 15px;
+            }
+
+            .logo {
+                font-size: 1.3rem;
+            }
+
+            .floating-controls {
+                top: 10px;
+                right: 10px;
+            }
+
+            .control-panel {
+                padding: 10px;
+            }
+
+            .location-info {
+                bottom: 10px;
+                left: 10px;
+                right: 10px;
+            }
+
+            .coordinates {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .quick-actions {
+                flex-direction: column;
+            }
+
+            .btn {
+                padding: 12px 20px;
+                font-size: 16px;
+            }
+        }
+
+        /* Custom Pin Styles */
+        .tree-pin {
+            background: #3b82f6;
+            border: 3px solid white;
+            border-radius: 50%;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        }
+
+        .temp-pin {
+            background: #ff6b35;
+            border: 3px solid white;
+            border-radius: 50%;
+            box-shadow: 
+                0 2px 10px rgba(0,0,0,0.3),
+                0 0 15px rgba(255, 107, 53, 0.6),
+                0 0 25px rgba(255, 107, 53, 0.3);
+            animation: gentle-glow 3s ease-in-out infinite;
+        }
+
+        @keyframes gentle-glow {
+            0% { 
+                box-shadow: 
+                    0 2px 10px rgba(0,0,0,0.3),
+                    0 0 15px rgba(255, 107, 53, 0.6),
+                    0 0 25px rgba(255, 107, 53, 0.3);
+            }
+            50% { 
+                box-shadow: 
+                    0 2px 12px rgba(0,0,0,0.4),
+                    0 0 20px rgba(255, 107, 53, 0.8),
+                    0 0 35px rgba(255, 107, 53, 0.5);
+            }
+            100% { 
+                box-shadow: 
+                    0 2px 10px rgba(0,0,0,0.3),
+                    0 0 15px rgba(255, 107, 53, 0.6),
+                    0 0 25px rgba(255, 107, 53, 0.3);
+            }
+        }
+
+        /* Loading States */
+        .loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0,0,0,0.8);
+            padding: 20px 30px;
+            border-radius: 10px;
+            z-index: 2000;
+        }
+
+        .spinner {
+            border: 3px solid rgba(255,255,255,0.3);
+            border-top: 3px solid #3b82f6;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 10px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Success/Error Messages */
+        .message {
+            position: absolute;
+            top: 80px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 15px 25px;
+            border-radius: 25px;
+            font-weight: 600;
+            z-index: 1500;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .message.show {
+            opacity: 1;
+        }
+
+        .message.success {
+            background: linear-gradient(45deg, #3b82f6, #2563eb);
+            color: white;
+        }
+
+        .message.error {
+            background: linear-gradient(45deg, #f44336, #d32f2f);
+            color: white;
+        }
+
+        /* Gesture Instructions */
+        .gesture-hint {
+            position: absolute;
+            bottom: 120px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 20px;
+            font-size: 14px;
+            z-index: 1000;
+            animation: fadeInOut 4s ease-in-out;
+        }
+
+        @keyframes fadeInOut {
+            0%, 100% { opacity: 0; }
+            20%, 80% { opacity: 1; }
+        }
+
+        /* Custom Tree Marker Styles */
+        .custom-tree-icon {
+            background: transparent !important;
+            border: none !important;
+        }
+
+        .custom-tree-marker {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .tree-icon-container {
+            background: linear-gradient(145deg, #ffffff, #f0f0f0);
+            border-radius: 50%;
+            padding: 4px;
+            box-shadow: 
+                0 4px 8px rgba(0,0,0,0.15),
+                0 2px 4px rgba(0,0,0,0.1),
+                inset 0 1px 0 rgba(255,255,255,0.2);
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .tree-icon-container:hover {
+            transform: translateY(-2px) scale(1.1);
+            box-shadow: 
+                0 6px 16px rgba(0,0,0,0.2),
+                0 4px 8px rgba(0,0,0,0.15),
+                inset 0 1px 0 rgba(255,255,255,0.3);
+        }
+
+        .tree-marker-shadow {
+            width: 12px;
+            height: 6px;
+            background: rgba(0,0,0,0.3);
+            border-radius: 50%;
+            margin-top: 2px;
+            filter: blur(1px);
+            transition: all 0.3s ease;
+        }
+
+        .custom-tree-marker:hover .tree-marker-shadow {
+            width: 16px;
+            background: rgba(0,0,0,0.4);
+        }
+
+        /* Tooltip Styles */
+        .leaflet-tooltip.tree-tooltip {
+            background: linear-gradient(145deg, #1e40af, #1d4ed8) !important;
+            border: 1px solid rgba(255,255,255,0.2) !important;
+            border-radius: 8px !important;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+            color: white !important;
+            font-family: 'Segoe UI', sans-serif !important;
+            font-size: 13px !important;
+            padding: 8px 12px !important;
+            backdrop-filter: blur(10px);
+        }
+
+        .leaflet-tooltip.tree-tooltip::before {
+            border-top-color: #1e40af !important;
+        }
+
+        .tree-tooltip-content {
+            min-width: 80px;
+            text-align: center;
+        }
+
+        .tree-name {
+            font-weight: 600;
+            font-size: 14px;
+            margin-bottom: 2px;
+            color: #ffffff;
+        }
+
+        .tree-details {
+            font-size: 11px;
+            opacity: 0.9;
+            color: #e8f5e8;
+        }
+
+        /* Enhanced Popup Styles */
+        .leaflet-popup.tree-popup {
+            margin-bottom: 10px;
+        }
+
+        .leaflet-popup.tree-popup .leaflet-popup-content-wrapper {
+            background: linear-gradient(145deg, #ffffff, #f8f9fa);
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+            border: 1px solid rgba(44, 85, 48, 0.1);
+        }
+
+        .leaflet-popup.tree-popup .leaflet-popup-tip {
+            background: #ffffff;
+            border: 1px solid rgba(59, 130, 246, 0.1);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+    </style>
+    <script>
+        // Force refresh if we detect cached version
+        (function() {
+            const currentVersion = '3.1754653904';
+            const lastVersion = sessionStorage.getItem('treetrack_version');
+            
+            // Always reload on version mismatch
+            if (lastVersion && lastVersion !== currentVersion) {
+                console.log('Version changed from', lastVersion, 'to', currentVersion, '- forcing reload');
+                sessionStorage.setItem('treetrack_version', currentVersion);
+                location.reload(true);
+                return;
+            }
+            
+            // Set version if not set
+            if (!lastVersion) {
+                sessionStorage.setItem('treetrack_version', currentVersion);
+            }
+            
+            // Add debug info to page title
+            document.title = 'TreeTrack Map - ' + new Date().toLocaleTimeString();
+        })();
+    </script>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <div class="header">
+            <div class="logo">
+                🔥 TreeTrack Map V4.0 🔥
+            </div>
+            <div class="header-actions">
+                <div class="tree-counter">
+                    <span>Trees:</span>
+                    <span id="treeCount">0</span>
+                </div>
+                <a href="/static/index.html" class="btn btn-secondary">Add Tree</a>
+            </div>
+        </div>
+
+        <!-- Map Container -->
+        <div class="map-container">
+            <div id="map"></div>
+
+            <!-- Floating Controls -->
+            <div class="floating-controls">
+                <div class="control-panel">
+                    <button id="myLocationBtn" class="btn btn-primary">My Location</button>
+                    <button id="clearPinsBtn" class="btn btn-secondary" style="margin-top: 8px;">Clear Pins</button>
+                </div>
+            </div>
+
+            <!-- Location Info Panel -->
+            <div class="location-info">
+                <div class="info-panel" id="infoPanel">
+                    <div class="coordinates">
+                        <div class="coord-item">
+                            <div class="coord-label">Latitude</div>
+                            <div class="coord-value" id="latValue">--</div>
+                        </div>
+                        <div class="coord-item">
+                            <div class="coord-label">Longitude</div>
+                            <div class="coord-value" id="lngValue">--</div>
+                        </div>
+                    </div>
+                    <div class="quick-actions">
+                        <button id="useLocationBtn" class="btn btn-primary">Use This Location</button>
+                        <button id="cancelBtn" class="btn btn-secondary">Cancel</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Loading -->
+            <div id="loading" class="loading" style="display: none;">
+                <div class="spinner"></div>
+                <div>Loading map...</div>
+            </div>
+
+            <!-- Messages -->
+            <div id="message" class="message"></div>
+
+            <!-- Gesture Hint -->
+            <div class="gesture-hint">
+                Tap anywhere on map to drop a pin
+            </div>
+        </div>
+    </div>
+
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script src="/static/map.js?v=3.1754653904&t=1754653904"></script>
+</body>
+</html>