Complete TreeTrack Field Research Application with all 12 fields, file uploads, camera, audio recording, GPS, and mobile-responsive UI

app.py

@@ -13,12 +13,14 @@ from pathlib import Path
 from typing import Any, Optional
 
 import uvicorn
-from fastapi import FastAPI, HTTPException, Request, status
+from fastapi import FastAPI, HTTPException, Request, status, File, UploadFile, Form
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.middleware.trustedhost import TrustedHostMiddleware
-from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field, field_validator, model_validator
+import uuid
+import aiofiles
 
 from config import get_settings
 
@@ -636,6 +638,136 @@ async def delete_tree(tree_id: int):
         raise
 
 
+# File Upload Endpoints
+@app.post("/api/upload/image", tags=["Files"])
+async def upload_image(
+    file: UploadFile = File(...),
+    category: str = Form(...)
+):
+    """Upload an image file for tree documentation"""
+    # Validate file type
+    if not file.content_type or not file.content_type.startswith('image/'):
+        raise HTTPException(
+            status_code=400,
+            detail="File must be an image"
+        )
+    
+    # Validate category
+    valid_categories = ["Leaf", "Bark", "Fruit", "Seed", "Flower", "Full tree"]
+    if category not in valid_categories:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Category must be one of: {valid_categories}"
+        )
+    
+    try:
+        # Generate unique filename
+        file_id = str(uuid.uuid4())
+        file_extension = Path(file.filename).suffix.lower()
+        filename = f"{file_id}{file_extension}"
+        file_path = Path("uploads/images") / filename
+        
+        # Save file
+        async with aiofiles.open(file_path, 'wb') as f:
+            content = await file.read()
+            await f.write(content)
+        
+        logger.info(f"Image uploaded: {filename}, category: {category}")
+        
+        return {
+            "filename": filename,
+            "file_path": str(file_path),
+            "category": category,
+            "size": len(content),
+            "content_type": file.content_type
+        }
+        
+    except Exception as e:
+        logger.error(f"Error uploading image: {e}")
+        raise HTTPException(status_code=500, detail="Failed to upload image")
+
+
+@app.post("/api/upload/audio", tags=["Files"])
+async def upload_audio(file: UploadFile = File(...)):
+    """Upload an audio file for storytelling"""
+    # Validate file type
+    if not file.content_type or not file.content_type.startswith('audio/'):
+        raise HTTPException(
+            status_code=400,
+            detail="File must be an audio file"
+        )
+    
+    try:
+        # Generate unique filename
+        file_id = str(uuid.uuid4())
+        file_extension = Path(file.filename).suffix.lower()
+        filename = f"{file_id}{file_extension}"
+        file_path = Path("uploads/audio") / filename
+        
+        # Save file
+        async with aiofiles.open(file_path, 'wb') as f:
+            content = await file.read()
+            await f.write(content)
+        
+        logger.info(f"Audio uploaded: {filename}")
+        
+        return {
+            "filename": filename,
+            "file_path": str(file_path),
+            "size": len(content),
+            "content_type": file.content_type
+        }
+        
+    except Exception as e:
+        logger.error(f"Error uploading audio: {e}")
+        raise HTTPException(status_code=500, detail="Failed to upload audio")
+
+
+@app.get("/api/files/{file_type}/{filename}", tags=["Files"])
+async def get_file(file_type: str, filename: str):
+    """Serve uploaded files"""
+    if file_type not in ["images", "audio"]:
+        raise HTTPException(status_code=400, detail="Invalid file type")
+    
+    file_path = Path(f"uploads/{file_type}/{filename}")
+    
+    if not file_path.exists():
+        raise HTTPException(status_code=404, detail="File not found")
+    
+    return FileResponse(file_path)
+
+
+# Utility endpoints for form data
+@app.get("/api/utilities", tags=["Data"])
+async def get_utilities():
+    """Get list of valid utility options"""
+    return {
+        "utilities": [
+            "Religious", "Timber", "Biodiversity", "Hydrological benefit", 
+            "Faunal interaction", "Food", "Medicine", "Shelter", "Cultural"
+        ]
+    }
+
+
+@app.get("/api/phenology-stages", tags=["Data"])
+async def get_phenology_stages():
+    """Get list of valid phenology stages"""
+    return {
+        "stages": [
+            "New leaves", "Old leaves", "Open flowers", "Fruiting", 
+            "Ripe fruit", "Recent fruit drop", "Other"
+        ]
+    }
+
+
+@app.get("/api/photo-categories", tags=["Data"])
+async def get_photo_categories():
+    """Get list of valid photo categories"""
+    return {
+        "categories": ["Leaf", "Bark", "Fruit", "Seed", "Flower", "Full tree"]
+    }
+
+
 @app.get("/api/stats", response_model=StatsResponse, tags=["Statistics"])
 async def get_stats():
     """Get comprehensive tree statistics"""

requirements.txt

@@ -5,3 +5,4 @@ python-multipart>=0.0.12
 pydantic>=2.10.0
 pydantic-settings>=2.6.0
 pandas>=2.3.1
+aiofiles>=24.1.0

static/app.js

@@ -1,1159 +1,431 @@
-// Enhanced Tree Mapping Application JavaScript
-// Implements performance optimizations, error handling, and best practices
-
-class TreeMapApp {
+// TreeTrack Enhanced JavaScript - Comprehensive Field Research Tool
+class TreeTrackApp {
     constructor() {
-        this.map = null;
-        this.trees = [];
-        this.selectedTree = null;
-        this.markers = [];
-        this.tempMarker = null;
-        this.markerCluster = null;
-        this.debounceTimer = null;
-        this.cache = new Map();
-        this.retryAttempts = 3;
-        this.requestTimeout = 10000;
-        
-        // Performance monitoring
-        this.performanceMetrics = {
-            apiCalls: 0,
-            cacheHits: 0,
-            errors: 0
-        };
+        this.uploadedPhotos = {};
+        this.audioFile = null;
+        this.mediaRecorder = null;
+        this.audioChunks = [];
+        this.isRecording = false;
         
         this.init();
     }
-    
-    async init() {
-        try {
-            this.showLoadingState(true);
-            await this.initMap();
-            this.initEventListeners();
-            await Promise.all([
-                this.loadTrees(),
-                this.loadStats()
-            ]);
-            this.updateTreeList();
-            this.updateTreemap();
-            this.showLoadingState(false);
-            console.log('Application initialized successfully');
-        } catch (error) {
-            console.error('Failed to initialize application:', error);
-            this.showError('Failed to initialize application. Please refresh the page.');
-            this.showLoadingState(false);
-        }
-    }
-    
-    initMap() {
-        return new Promise((resolve, reject) => {
-            try {
-                // Initialize Leaflet map with better default settings
-                this.map = L.map('map', {
-                    zoomControl: true,
-                    attributionControl: true,
-                    maxZoom: 18,
-                    minZoom: 2
-                }).setView([51.5074, -0.1278], 13);
-                
-                // Add OpenStreetMap tiles with error handling
-                const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: '© OpenStreetMap contributors',
-                    maxZoom: 18,
-                    errorTileUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgZmlsbD0iI2VlZSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzk5OSI+VGlsZSBub3QgZm91bmQ8L3RleHQ+PC9zdmc+'
-                });
-                
-                tileLayer.on('tileerror', (e) => {
-                    console.warn('Tile loading error:', e);
-                });
-                
-                tileLayer.addTo(this.map);
-                
-                // Add click handler for adding trees with debouncing
-                this.map.on('click', this.debounce((e) => {
-                    this.handleMapClick(e);
-                }, 300));
-                
-                // Add map event listeners for performance
-                this.map.on('moveend', this.debounce(() => {
-                    this.onMapMoveEnd();
-                }, 500));
-                
-                resolve();
-            } catch (error) {
-                reject(error);
-            }
-        });
+
+    init() {
+        this.loadFormOptions();
+        this.setupEventListeners();
+        this.loadTrees();
     }
-    
-    handleMapClick(e) {
+
+    async loadFormOptions() {
         try {
-            // Remove previous temporary marker if it exists
-            if (this.tempMarker) {
-                this.map.removeLayer(this.tempMarker);
-            }
-            
-            // Validate coordinates
-            const lat = parseFloat(e.latlng.lat.toFixed(6));
-            const lng = parseFloat(e.latlng.lng.toFixed(6));
-            
-            if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
-                this.showError('Invalid coordinates selected');
-                return;
-            }
-            
-            // Set coordinates in form
-            document.getElementById('latitude').value = lat;
-            document.getElementById('longitude').value = lng;
-            
-            // Add temporary pin marker with animation
-            const tempIcon = L.divIcon({
-                className: 'temp-marker',
-                html: `<div style="
-                    background-color: #ff6b6b;
-                    width: 24px;
-                    height: 24px;
-                    border-radius: 50%;
-                    border: 3px solid white;
-                    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    color: white;
-                    font-size: 14px;
-                    font-weight: bold;
-                    animation: pulse 1.5s infinite;
-                ">📍</div>`,
-                iconSize: [30, 30],
-                iconAnchor: [15, 15]
-            });
-            
-            this.tempMarker = L.marker([lat, lng], { icon: tempIcon })
-                .addTo(this.map)
-                .bindPopup('Click "Add Tree" to save tree at this location')
-                .openPopup();
-                
+            // Load utility options
+            const utilityResponse = await fetch('/api/utilities');
+            const utilityData = await utilityResponse.json();
+            this.renderMultiSelect('utilityOptions', utilityData.utilities);
+
+            // Load phenology stages
+            const phenologyResponse = await fetch('/api/phenology-stages');
+            const phenologyData = await phenologyResponse.json();
+            this.renderMultiSelect('phenologyOptions', phenologyData.stages);
+
+            // Load photo categories
+            const categoriesResponse = await fetch('/api/photo-categories');
+            const categoriesData = await categoriesResponse.json();
+            this.renderPhotoCategories(categoriesData.categories);
+
         } catch (error) {
-            console.error('Error handling map click:', error);
-            this.showError('Error processing map click');
+            console.error('Error loading form options:', error);
         }
     }
-    
-    onMapMoveEnd() {
-        // Optimize marker visibility based on zoom level
-        const zoom = this.map.getZoom();
-        const bounds = this.map.getBounds();
+
+    renderMultiSelect(containerId, options) {
+        const container = document.getElementById(containerId);
+        container.innerHTML = '';
         
-        // Hide/show markers based on zoom level for performance
-        this.markers.forEach(marker => {
-            const markerLatLng = marker.getLatLng();
-            if (bounds.contains(markerLatLng)) {
-                if (!this.map.hasLayer(marker)) {
-                    this.map.addLayer(marker);
-                }
-            } else if (zoom < 10) {
-                if (this.map.hasLayer(marker)) {
-                    this.map.removeLayer(marker);
-                }
-            }
+        options.forEach(option => {
+            const label = document.createElement('label');
+            label.innerHTML = `
+                <input type="checkbox" value="${option}"> ${option}
+            `;
+            container.appendChild(label);
         });
     }
-    
-    initEventListeners() {
-        // Tree form submission with validation
-        const treeForm = document.getElementById('treeForm');
-        if (treeForm) {
-            treeForm.addEventListener('submit', (e) => {
-                e.preventDefault();
-                this.addTree();
-            });
-        }
-        
-        // Clear form button
-        const clearBtn = document.getElementById('clearForm');
-        if (clearBtn) {
-            clearBtn.addEventListener('click', () => {
-                this.clearForm();
-            });
-        }
+
+    renderPhotoCategories(categories) {
+        const container = document.getElementById('photoCategories');
+        container.innerHTML = '';
+        
+        categories.forEach(category => {
+            const categoryDiv = document.createElement('div');
+            categoryDiv.className = 'photo-category';
+            categoryDiv.innerHTML = `
+                <div>
+                    <label>${category}</label>
+                    <div class="file-upload photo-upload" data-category="${category}">
+                        📷 Click to upload ${category} photo or use camera
+                    </div>
+                    <div class="uploaded-file" id="photo-${category}" style="display: none;"></div>
+                </div>
+                <button type="button" class="btn btn-small" onclick="app.capturePhoto('${category}')">📸 Camera</button>
+            `;
+            container.appendChild(categoryDiv);
+        });
         
-        // Modal close
-        const closeBtn = document.querySelector('.close');
-        if (closeBtn) {
-            closeBtn.addEventListener('click', () => {
-                this.closeModal();
-            });
-        }
+        this.setupPhotoUploads();
+    }
+
+    setupEventListeners() {
+        // Form submission
+        document.getElementById('treeForm').addEventListener('submit', (e) => this.handleSubmit(e));
         
-        // Edit tree button
-        const editBtn = document.getElementById('editTree');
-        if (editBtn) {
-            editBtn.addEventListener('click', () => {
-                this.editTree();
-            });
-        }
+        // Reset form
+        document.getElementById('resetForm').addEventListener('click', () => this.resetForm());
         
-        // Delete tree button
-        const deleteBtn = document.getElementById('deleteTree');
-        if (deleteBtn) {
-            deleteBtn.addEventListener('click', () => {
-                this.deleteTree();
-            });
-        }
+        // GPS location
+        document.getElementById('getLocation').addEventListener('click', () => this.getCurrentLocation());
         
-        // Close modal when clicking outside
-        window.addEventListener('click', (e) => {
-            const modal = document.getElementById('treeModal');
-            if (e.target === modal) {
-                this.closeModal();
-            }
-        });
+        // Audio recording
+        document.getElementById('recordBtn').addEventListener('click', () => this.toggleRecording());
         
-        // Add keyboard shortcuts
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                this.closeModal();
-            }
-        });
+        // Audio file upload
+        document.getElementById('audioUpload').addEventListener('click', () => this.selectAudioFile());
         
-        // Add form validation listeners
-        this.addFormValidationListeners();
+        // Drag and drop for audio
+        this.setupDragAndDrop();
     }
-    
-    addFormValidationListeners() {
-        const inputs = document.querySelectorAll('#treeForm input, #treeForm select, #treeForm textarea');
-        inputs.forEach(input => {
-            input.addEventListener('blur', () => {
-                this.validateField(input);
+
+    setupPhotoUploads() {
+        document.querySelectorAll('.photo-upload').forEach(upload => {
+            upload.addEventListener('click', (e) => {
+                const category = e.target.getAttribute('data-category');
+                this.selectPhotoFile(category);
             });
-            
-            input.addEventListener('input', this.debounce(() => {
-                this.validateField(input);
-            }, 500));
         });
     }
-    
-    validateField(field) {
-        const value = field.value.trim();
-        let isValid = true;
-        let errorMessage = '';
-        
-        // Clear previous error
-        this.clearFieldError(field);
+
+    setupDragAndDrop() {
+        const audioUpload = document.getElementById('audioUpload');
         
-        switch (field.id) {
-            case 'latitude':
-                const lat = parseFloat(value);
-                if (value && (isNaN(lat) || lat < -90 || lat > 90)) {
-                    isValid = false;
-                    errorMessage = 'Latitude must be between -90 and 90';
-                }
-                break;
-                
-            case 'longitude':
-                const lng = parseFloat(value);
-                if (value && (isNaN(lng) || lng < -180 || lng > 180)) {
-                    isValid = false;
-                    errorMessage = 'Longitude must be between -180 and 180';
-                }
-                break;
-                
-            case 'species':
-                if (field.required && !value) {
-                    isValid = false;
-                    errorMessage = 'Species is required';
-                } else if (value && !/^[A-Za-z\s\-\.]+$/.test(value)) {
-                    isValid = false;
-                    errorMessage = 'Species name contains invalid characters';
-                }
-                break;
-                
-            case 'height':
-                const height = parseFloat(value);
-                if (value && (isNaN(height) || height <= 0 || height > 200)) {
-                    isValid = false;
-                    errorMessage = 'Height must be between 0 and 200 meters';
-                }
-                break;
-                
-            case 'diameter':
-                const diameter = parseFloat(value);
-                if (value && (isNaN(diameter) || diameter <= 0 || diameter > 1000)) {
-                    isValid = false;
-                    errorMessage = 'Diameter must be between 0 and 1000 cm';
-                }
-                break;
-                
-            case 'age_estimate':
-                const age = parseInt(value);
-                if (value && (isNaN(age) || age <= 0 || age > 5000)) {
-                    isValid = false;
-                    errorMessage = 'Age must be between 0 and 5000 years';
-                }
-                break;
-            case 'last_inspection':
-                if (value && !this.isValidDate(value)) {
-                    isValid = false;
-                    errorMessage = 'Please enter a valid date (YYYY-MM-DD)';
-                } else if (value && new Date(value) > new Date()) {
-                    isValid = false;
-                    errorMessage = 'Date cannot be in the future';
-                }
-                break;
-        }
+        audioUpload.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            audioUpload.classList.add('dragover');
+        });
         
-        if (!isValid) {
-            this.showFieldError(field, errorMessage);
-        }
+        audioUpload.addEventListener('dragleave', () => {
+            audioUpload.classList.remove('dragover');
+        });
         
-        return isValid;
-    }
-    
-    showFieldError(field, message) {
-        field.classList.add('error');
-        let errorDiv = field.parentNode.querySelector('.error-message');
-        if (!errorDiv) {
-            errorDiv = document.createElement('div');
-            errorDiv.className = 'error-message';
-            errorDiv.style.color = '#dc3545';
-            errorDiv.style.fontSize = '0.875rem';
-            errorDiv.style.marginTop = '0.25rem';
-            field.parentNode.appendChild(errorDiv);
-        }
-        errorDiv.textContent = message;
-    }
-    
-    clearFieldError(field) {
-        field.classList.remove('error');
-        const errorDiv = field.parentNode.querySelector('.error-message');
-        if (errorDiv) {
-            errorDiv.remove();
-        }
+        audioUpload.addEventListener('drop', (e) => {
+            e.preventDefault();
+            audioUpload.classList.remove('dragover');
+            
+            const files = e.dataTransfer.files;
+            if (files.length > 0 && files[0].type.startsWith('audio/')) {
+                this.uploadAudioFile(files[0]);
+            }
+        });
     }
-    
-    isValidDate(dateString) {
-        const regex = /^\d{4}-\d{2}-\d{2}$/;
-        if (!regex.test(dateString)) return false;
-        
-        const date = new Date(dateString);
-        const timestamp = date.getTime();
+
+    async selectPhotoFile(category) {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.capture = 'environment'; // Use rear camera if available
         
-        if (typeof timestamp !== 'number' || Number.isNaN(timestamp)) {
-            return false;
-        }
+        input.onchange = (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                this.uploadPhotoFile(file, category);
+            }
+        };
         
-        return dateString === date.toISOString().split('T')[0];
+        input.click();
     }
-    
-    async loadTrees() {
-        const cacheKey = 'trees_list';
+
+    async capturePhoto(category) {
+        // For mobile devices, this will trigger the camera
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.capture = 'environment';
         
-        // Check cache first
-        if (this.cache.has(cacheKey)) {
-            const cached = this.cache.get(cacheKey);
-            if (Date.now() - cached.timestamp < 30000) { // 30 second cache
-                this.trees = cached.data;
-                this.performanceMetrics.cacheHits++;
-                this.updateMapMarkers();
-                return;
+        input.onchange = (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                this.uploadPhotoFile(file, category);
             }
-        }
+        };
         
-        try {
-            const response = await this.fetchWithRetry('/api/trees');
-            this.trees = await response.json();
-            
-            // Cache the result
-            this.cache.set(cacheKey, {
-                data: this.trees,
-                timestamp: Date.now()
-            });
-            
-            this.updateMapMarkers();
-            this.performanceMetrics.apiCalls++;
-            
-        } catch (error) {
-            console.error('Error loading trees:', error);
-            this.showError('Failed to load trees. Please try again.');
-            this.performanceMetrics.errors++;
-        }
+        input.click();
     }
-    
-    async loadStats() {
-        const cacheKey = 'stats';
-        
-        // Check cache first
-        if (this.cache.has(cacheKey)) {
-            const cached = this.cache.get(cacheKey);
-            if (Date.now() - cached.timestamp < 60000) { // 1 minute cache
-                this.updateStatsDisplay(cached.data);
-                this.performanceMetrics.cacheHits++;
-                return;
-            }
-        }
+
+    async uploadPhotoFile(file, category) {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('category', category);
         
         try {
-            const response = await this.fetchWithRetry('/api/stats');
-            const stats = await response.json();
-            
-            // Cache the result
-            this.cache.set(cacheKey, {
-                data: stats,
-                timestamp: Date.now()
+            const response = await fetch('/api/upload/image', {
+                method: 'POST',
+                body: formData
             });
             
-            this.updateStatsDisplay(stats);
-            this.performanceMetrics.apiCalls++;
-            
+            if (response.ok) {
+                const result = await response.json();
+                this.uploadedPhotos[category] = result.filename;
+                
+                // Update UI
+                const resultDiv = document.getElementById(`photo-${category}`);
+                resultDiv.style.display = 'block';
+                resultDiv.innerHTML = `✅ ${file.name} uploaded successfully`;
+            } else {
+                throw new Error('Upload failed');
+            }
         } catch (error) {
-            console.error('Error loading stats:', error);
-            this.showError('Failed to load statistics.');
-            this.performanceMetrics.errors++;
+            console.error('Error uploading photo:', error);
+            this.showMessage('Error uploading photo: ' + error.message, 'error');
         }
     }
-    
-    updateStatsDisplay(stats) {
-        const elements = {
-            totalTrees: document.getElementById('totalTrees'),
-            avgHeight: document.getElementById('avgHeight'),
-            avgDiameter: document.getElementById('avgDiameter')
-        };
-        
-        if (elements.totalTrees) elements.totalTrees.textContent = stats.total_trees || 0;
-        if (elements.avgHeight) elements.avgHeight.textContent = stats.average_height || 0;
-        if (elements.avgDiameter) elements.avgDiameter.textContent = stats.average_diameter || 0;
-    }
-    
-    async fetchWithRetry(url, options = {}, retries = this.retryAttempts) {
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), this.requestTimeout);
-
-    try {
-        const response = await fetch(url, {
-            ...options,
-            signal: controller.signal
-        });
 
-        clearTimeout(timeoutId);
-
-        // **CRITICAL: Don't throw error immediately for 422 - let caller handle it**
-        if (!response.ok && response.status !== 422) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-
-        return response;
-
-    } catch (error) {
-        clearTimeout(timeoutId);
-
-        // **Don't retry on 422 validation errors**
-        if (error.message && error.message.includes('422')) {
-            throw error;
-        }
-
-        if (retries > 0 && !controller.signal.aborted) {
-            console.warn(`Request failed, retrying... (${retries} attempts left)`);
-            await this.delay(1000 * (this.retryAttempts - retries + 1));
-            return this.fetchWithRetry(url, options, retries - 1);
-        }
-
-        throw error;
-    }
-}
-    
-    updateMapMarkers() {
-        // Clear existing markers efficiently
-        this.markers.forEach(marker => {
-            if (this.map.hasLayer(marker)) {
-                this.map.removeLayer(marker);
-            }
-        });
-        this.markers = [];
+    async selectAudioFile() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'audio/*';
         
-        // Create markers in batches for better performance
-        const batchSize = 50;
-        let currentBatch = 0;
-        
-        const processBatch = () => {
-            const start = currentBatch * batchSize;
-            const end = Math.min(start + batchSize, this.trees.length);
-            
-            for (let i = start; i < end; i++) {
-                const tree = this.trees[i];
-                try {
-                    const marker = this.createTreeMarker(tree);
-                    this.markers.push(marker);
-                } catch (error) {
-                    console.error(`Error creating marker for tree ${tree.id}:`, error);
-                }
-            }
-            
-            currentBatch++;
-            
-            if (end < this.trees.length) {
-                // Process next batch asynchronously
-                setTimeout(processBatch, 10);
-            } else {
-                // All markers created, fit bounds if needed
-                this.fitMapBounds();
+        input.onchange = (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                this.uploadAudioFile(file);
             }
         };
         
-        if (this.trees.length > 0) {
-            processBatch();
-        }
+        input.click();
     }
-    
-    fitMapBounds() {
-        if (this.markers.length > 0) {
-            try {
-                const group = new L.featureGroup(this.markers);
-                const bounds = group.getBounds();
+
+    async uploadAudioFile(file) {
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        try {
+            const response = await fetch('/api/upload/audio', {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (response.ok) {
+                const result = await response.json();
+                this.audioFile = result.filename;
                 
-                if (bounds.isValid()) {
-                    this.map.fitBounds(bounds.pad(0.1), {
-                        maxZoom: 15,
-                        animate: true,
-                        duration: 1
-                    });
-                }
-            } catch (error) {
-                console.error('Error fitting map bounds:', error);
+                // Update UI
+                const resultDiv = document.getElementById('audioUploadResult');
+                resultDiv.innerHTML = `<div class="uploaded-file">✅ ${file.name} uploaded successfully</div>`;
+            } else {
+                throw new Error('Upload failed');
             }
+        } catch (error) {
+            console.error('Error uploading audio:', error);
+            this.showMessage('Error uploading audio: ' + error.message, 'error');
         }
     }
-    
-    createTreeMarker(tree) {
-        // Validate tree data
-        if (!tree.latitude || !tree.longitude || 
-            tree.latitude < -90 || tree.latitude > 90 ||
-            tree.longitude < -180 || tree.longitude > 180) {
-            throw new Error('Invalid tree coordinates');
-        }
-        
-        // Color based on health status
-        const healthColors = {
-            'Excellent': '#28a745',
-            'Good': '#28a745',
-            'Fair': '#ffc107',
-            'Poor': '#dc3545',
-            'Dead': '#6c757d'
-        };
-        
-        const color = healthColors[tree.health_status] || '#28a745';
-        
-        // Create optimized custom icon
-        const icon = L.divIcon({
-            className: 'tree-marker',
-            html: `<div style="
-                background-color: ${color};
-                width: 20px;
-                height: 20px;
-                border-radius: 50%;
-                border: 2px solid white;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: white;
-                font-size: 12px;
-                font-weight: bold;
-            ">🌳</div>`,
-            iconSize: [24, 24],
-            iconAnchor: [12, 12]
-        });
-        
-        const marker = L.marker([tree.latitude, tree.longitude], { icon })
-            .addTo(this.map)
-            .on('click', () => this.showTreeDetails(tree));
-        
-        // Create popup content efficiently
-        const popupContent = this.createPopupContent(tree);
-        marker.bindPopup(popupContent, {
-            maxWidth: 250,
-            closeButton: true
-        });
-        
-        return marker;
-    }
-    
-    createPopupContent(tree) {
-        const safeText = (text) => text ? this.escapeHtml(text) : '';
-        
-        return `
-            <div style="min-width: 200px;">
-                <h4>${safeText(tree.species)}</h4>
-                ${tree.common_name ? `<p><strong>Common:</strong> ${safeText(tree.common_name)}</p>` : ''}
-                <p><strong>Health:</strong> <span class="health-${tree.health_status.toLowerCase()}">${safeText(tree.health_status)}</span></p>
-                ${tree.height ? `<p><strong>Height:</strong> ${tree.height}m</p>` : ''}
-                ${tree.diameter ? `<p><strong>Diameter:</strong> ${tree.diameter}cm</p>` : ''}
-                <p><em>Click for more details</em></p>
-            </div>
-        `;
-    }
-    
-    escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    
-    updateTreeList() {
-        const treeList = document.getElementById('treeList');
-        if (!treeList) return;
-        
-        // Clear existing content
-        treeList.innerHTML = '';
-        
-        // Show recent trees (limit for performance)
-        const recentTrees = this.trees.slice(0, 10);
-        
-        if (recentTrees.length === 0) {
-            treeList.innerHTML = '<p style="text-align: center; color: #666; padding: 1rem;">No trees found</p>';
-            return;
+
+    async toggleRecording() {
+        if (!this.isRecording) {
+            await this.startRecording();
+        } else {
+            this.stopRecording();
         }
-        
-        const fragment = document.createDocumentFragment();
-        
-        recentTrees.forEach(tree => {
-            const treeItem = document.createElement('div');
-            treeItem.className = 'tree-item';
-            treeItem.innerHTML = `
-                <div class="tree-species">${this.escapeHtml(tree.species)}</div>
-                <div class="tree-details">
-                    ${tree.common_name ? this.escapeHtml(tree.common_name) : 'No common name'} • 
-                    <span class="health-${tree.health_status.toLowerCase()}">${this.escapeHtml(tree.health_status)}</span>
-                </div>
-            `;
-            
-            treeItem.addEventListener('click', () => {
-                this.selectTree(tree);
-                this.showTreeDetails(tree);
-            });
-            
-            fragment.appendChild(treeItem);
-        });
-        
-        treeList.appendChild(fragment);
     }
-    
-    updateTreemap() {
-        const treemapElement = document.getElementById('treemap');
-        if (!treemapElement) return;
-        
-        if (this.trees.length === 0) {
-            treemapElement.innerHTML = '<p style="text-align: center; color: #666; padding: 2rem;">No trees to display</p>';
-            return;
-        }
-        
+
+    async startRecording() {
         try {
-            // Prepare data for treemap
-            const speciesCount = {};
-            this.trees.forEach(tree => {
-                const species = tree.species || 'Unknown';
-                speciesCount[species] = (speciesCount[species] || 0) + 1;
-            });
-            
-            const data = [{
-                type: "treemap",
-                labels: Object.keys(speciesCount),
-                values: Object.values(speciesCount),
-                parents: Array(Object.keys(speciesCount).length).fill(""),
-                textinfo: "label+value",
-                hovertemplate: '<b>%{label}</b><br>Count: %{value}<extra></extra>',
-                marker: {
-                    colorscale: 'Greens',
-                    showscale: false
-                }
-            }];
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            this.mediaRecorder = new MediaRecorder(stream);
+            this.audioChunks = [];
             
-            const layout = {
-                margin: { t: 0, l: 0, r: 0, b: 0 },
-                font: { size: 12 }
+            this.mediaRecorder.ondataavailable = (event) => {
+                this.audioChunks.push(event.data);
             };
             
-            const config = {
-                displayModeBar: false,
-                responsive: true
+            this.mediaRecorder.onstop = async () => {
+                const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
+                const audioFile = new File([audioBlob], 'recording.wav', { type: 'audio/wav' });
+                await this.uploadAudioFile(audioFile);
+                
+                // Show playback
+                const audioElement = document.getElementById('audioPlayback');
+                audioElement.src = URL.createObjectURL(audioBlob);
+                audioElement.classList.remove('hidden');
             };
             
-            Plotly.newPlot('treemap', data, layout, config);
+            this.mediaRecorder.start();
+            this.isRecording = true;
+            
+            // Update UI
+            const recordBtn = document.getElementById('recordBtn');
+            const status = document.getElementById('recordingStatus');
+            recordBtn.classList.add('recording');
+            recordBtn.innerHTML = '⏹️';
+            status.textContent = 'Recording... Click to stop';
             
         } catch (error) {
-            console.error('Error creating treemap:', error);
-            treemapElement.innerHTML = '<p style="text-align: center; color: #dc3545; padding: 2rem;">Error loading treemap</p>';
+            console.error('Error starting recording:', error);
+            this.showMessage('Error accessing microphone: ' + error.message, 'error');
         }
     }
-    
-    selectTree(tree) {
-        // Remove previous selection
-        document.querySelectorAll('.tree-item').forEach(item => {
-            item.classList.remove('selected');
-        });
-        
-        // Add selection to clicked item
-        if (event && event.currentTarget) {
-            event.currentTarget.classList.add('selected');
-        }
-        
-        this.selectedTree = tree;
-        
-        // Center map on selected tree with smooth animation
-        this.map.setView([tree.latitude, tree.longitude], 16, {
-            animate: true,
-            duration: 1
-        });
-    }
-    
-    showTreeDetails(tree) {
-        const modal = document.getElementById('treeModal');
-        const details = document.getElementById('treeDetails');
-        
-        if (!modal || !details) return;
-        
-        const safeText = (text) => text ? this.escapeHtml(text) : '';
-        
-        details.innerHTML = `
-            <div style="line-height: 1.6;">
-                <p><strong>Species:</strong> ${safeText(tree.species)}</p>
-                ${tree.common_name ? `<p><strong>Common Name:</strong> ${safeText(tree.common_name)}</p>` : ''}
-                <p><strong>Location:</strong> ${tree.latitude.toFixed(6)}, ${tree.longitude.toFixed(6)}</p>
-                ${tree.height ? `<p><strong>Height:</strong> ${tree.height} meters</p>` : ''}
-                ${tree.diameter ? `<p><strong>Diameter:</strong> ${tree.diameter} cm</p>` : ''}
-                <p><strong>Health Status:</strong> <span class="health-${tree.health_status.toLowerCase()}">${safeText(tree.health_status)}</span></p>
-                ${tree.age_estimate ? `<p><strong>Age Estimate:</strong> ${tree.age_estimate} years</p>` : ''}
-                ${tree.last_inspection ? `<p><strong>Last Inspection:</strong> ${tree.last_inspection}</p>` : ''}
-                ${tree.notes ? `<p><strong>Notes:</strong> ${safeText(tree.notes)}</p>` : ''}
-                <p><strong>Added:</strong> ${new Date(tree.timestamp).toLocaleDateString()}</p>
-            </div>
-        `;
-        
-        this.selectedTree = tree;
-        modal.style.display = 'block';
-        
-        // Focus management for accessibility
-        const closeBtn = modal.querySelector('.close');
-        if (closeBtn) closeBtn.focus();
-    }
-    
-    closeModal() {
-        const modal = document.getElementById('treeModal');
-        if (modal) {
-            modal.style.display = 'none';
+
+    stopRecording() {
+        if (this.mediaRecorder && this.isRecording) {
+            this.mediaRecorder.stop();
+            this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
+            this.isRecording = false;
+            
+            // Update UI
+            const recordBtn = document.getElementById('recordBtn');
+            const status = document.getElementById('recordingStatus');
+            recordBtn.classList.remove('recording');
+            recordBtn.innerHTML = '🎤';
+            status.textContent = 'Recording saved!';
         }
-        this.selectedTree = null;
     }
-    
-    editTree() {
-        if (!this.selectedTree) return;
-        
-        try {
-            // Populate form with selected tree data
-            const tree = this.selectedTree;
-            const fields = {
-                'latitude': tree.latitude,
-                'longitude': tree.longitude,
-                'species': tree.species,
-                'common_name': tree.common_name || '',
-                'height': tree.height || '',
-                'diameter': tree.diameter || '',
-                'health_status': tree.health_status,
-                'age_estimate': tree.age_estimate || '',
-                'last_inspection': tree.last_inspection || '',
-                'notes': tree.notes || ''
-            };
+
+    getCurrentLocation() {
+        if (navigator.geolocation) {
+            document.getElementById('getLocation').textContent = '🔄 Getting...';
             
-            Object.entries(fields).forEach(([fieldId, value]) => {
-                const element = document.getElementById(fieldId);
-                if (element) {
-                    element.value = value;
-                    this.clearFieldError(element);
+            navigator.geolocation.getCurrentPosition(
+                (position) => {
+                    document.getElementById('latitude').value = position.coords.latitude.toFixed(7);
+                    document.getElementById('longitude').value = position.coords.longitude.toFixed(7);
+                    document.getElementById('getLocation').textContent = '📍 GPS';
+                    this.showMessage('Location retrieved successfully!', 'success');
+                },
+                (error) => {
+                    document.getElementById('getLocation').textContent = '📍 GPS';
+                    this.showMessage('Error getting location: ' + error.message, 'error');
                 }
+            );
+        } else {
+            this.showMessage('Geolocation is not supported by this browser.', 'error');
+        }
+    }
+
+    getSelectedValues(containerId) {
+        const container = document.getElementById(containerId);
+        const checkboxes = container.querySelectorAll('input[type="checkbox"]:checked');
+        return Array.from(checkboxes).map(cb => cb.value);
+    }
+
+    async handleSubmit(e) {
+        e.preventDefault();
+        
+        const treeData = {
+            latitude: parseFloat(document.getElementById('latitude').value),
+            longitude: parseFloat(document.getElementById('longitude').value),
+            local_name: document.getElementById('localName').value || null,
+            scientific_name: document.getElementById('scientificName').value || null,
+            common_name: document.getElementById('commonName').value || null,
+            tree_code: document.getElementById('treeCode').value || null,
+            height: document.getElementById('height').value ? parseFloat(document.getElementById('height').value) : null,
+            width: document.getElementById('width').value ? parseFloat(document.getElementById('width').value) : null,
+            utility: this.getSelectedValues('utilityOptions'),
+            phenology_stages: this.getSelectedValues('phenologyOptions'),
+            storytelling_text: document.getElementById('storytellingText').value || null,
+            storytelling_audio: this.audioFile,
+            photographs: Object.keys(this.uploadedPhotos).length > 0 ? this.uploadedPhotos : null,
+            notes: document.getElementById('notes').value || null
+        };
+        
+        try {
+            const response = await fetch('/api/trees', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(treeData)
             });
             
-            // Change form button to update mode
-            const submitBtn = document.querySelector('#treeForm button[type="submit"]');
-            if (submitBtn) {
-                submitBtn.textContent = 'Update Tree';
-                submitBtn.dataset.mode = 'edit';
-                submitBtn.dataset.treeId = tree.id;
+            if (response.ok) {
+                const result = await response.json();
+                this.showMessage(`Tree record saved successfully! ID: ${result.id}`, 'success');
+                this.resetForm();
+                this.loadTrees(); // Refresh the tree list
+            } else {
+                const error = await response.json();
+                this.showMessage('Error saving tree: ' + (error.detail || 'Unknown error'), 'error');
             }
-            
-            this.closeModal();
-            
         } catch (error) {
-            console.error('Error editing tree:', error);
-            this.showError('Error loading tree data for editing');
+            console.error('Error submitting form:', error);
+            this.showMessage('Network error: ' + error.message, 'error');
         }
     }
-    
-    async deleteTree() {
-        if (!this.selectedTree) return;
+
+    resetForm() {
+        document.getElementById('treeForm').reset();
+        this.uploadedPhotos = {};
+        this.audioFile = null;
         
-        const confirmed = await this.showConfirmDialog(
-            'Delete Tree',
-            'Are you sure you want to delete this tree? This action cannot be undone.'
-        );
+        // Clear uploaded file indicators
+        document.querySelectorAll('.uploaded-file').forEach(el => {
+            el.style.display = 'none';
+            el.innerHTML = '';
+        });
         
-        if (!confirmed) return;
+        // Reset audio controls
+        const audioElement = document.getElementById('audioPlayback');
+        audioElement.classList.add('hidden');
+        audioElement.src = '';
         
+        document.getElementById('recordingStatus').textContent = 'Click to start recording';
+        document.getElementById('audioUploadResult').innerHTML = '';
+        
+        this.showMessage('Form reset successfully!', 'success');
+    }
+
+    async loadTrees() {
         try {
-            this.showLoadingState(true);
+            const response = await fetch('/api/trees?limit=20');
+            const trees = await response.json();
             
-            const response = await this.fetchWithRetry(`/api/trees/${this.selectedTree.id}`, {
-                method: 'DELETE'
-            });
+            const treeList = document.getElementById('treeList');
             
-            if (response.ok) {
-                // Clear cache
-                this.cache.clear();
-                
-                await Promise.all([
-                    this.loadTrees(),
-                    this.loadStats()
-                ]);
-                
-                this.updateTreeList();
-                this.updateTreemap();
-                this.closeModal();
-                this.showSuccess('Tree deleted successfully');
-            } else {
-                throw new Error('Failed to delete tree');
+            if (trees.length === 0) {
+                treeList.innerHTML = '<div class="loading">No trees recorded yet</div>';
+                return;
             }
             
+            treeList.innerHTML = trees.map(tree => `
+                <div class="tree-item">
+                    <div class="tree-id">Tree #${tree.id}</div>
+                    <div class="tree-info">
+                        ${tree.scientific_name || tree.common_name || tree.local_name || 'Unnamed'}
+                        <br>📍 ${tree.latitude.toFixed(4)}, ${tree.longitude.toFixed(4)}
+                        ${tree.tree_code ? '<br>🏷️ ' + tree.tree_code : ''}
+                        <br>📅 ${new Date(tree.timestamp).toLocaleDateString()}
+                    </div>
+                </div>
+            `).join('');
+            
         } catch (error) {
-            console.error('Error deleting tree:', error);
-            this.showError('Failed to delete tree. Please try again.');
-        } finally {
-            this.showLoadingState(false);
-        }
-    }
-    
-    async addTree() {
-    // Validate form first
-    const form = document.getElementById('treeForm');
-    if (!form) {
-        console.error('Tree form not found');
-        return;
-    }
-
-    const inputs = form.querySelectorAll('input, select, textarea');
-    let isValid = true;
-
-    inputs.forEach(input => {
-        if (!this.validateField(input)) {
-            isValid = false;
-        }
-    });
-
-    if (!isValid) {
-        this.showError('Please fix the validation errors before submitting');
-        return;
-    }
-
-    let formData;
-    try {
-        formData = this.getFormData();
-        const jsonPayload = JSON.stringify(formData, null, 2);
-        console.log('JSON payload:', jsonPayload);
-        console.log('JSON payload length:', jsonPayload.length);
-        console.log('==========================');
-
-    } catch (error) {
-        console.error('=== FORM DATA ERROR ===');
-        console.error('Error in getFormData:', error);
-        console.error('Error stack:', error.stack);
-        console.error('======================');
-        this.showError(error.message);
-        return;
-    }
-
-    const submitBtn = document.querySelector('#treeForm button[type="submit"]');
-    const isEdit = submitBtn && submitBtn.dataset.mode === 'edit';
-
-    try {
-        this.showLoadingState(true);
-
-        const url = isEdit ? `/api/trees/${submitBtn.dataset.treeId}` : '/api/trees';
-        const method = isEdit ? 'PUT' : 'POST';
-
-        console.log('=== REQUEST DEBUG ===');
-        console.log('URL:', url);
-        console.log('Method:', method);
-        console.log('Headers:', { 'Content-Type': 'application/json' });
-        console.log('Body:', JSON.stringify(formData));
-        console.log('====================');
-
-        const response = await this.fetchWithRetry(url, {
-            method: method,
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(formData)
-        });
-
-        console.log('=== RESPONSE DEBUG ===');
-        console.log('Response status:', response.status);
-        console.log('Response ok:', response.ok);
-        console.log('Response headers:', [...response.headers.entries()]);
-        console.log('======================');
-
-        if (response.ok) {
-            console.log('=== SUCCESS ===');
-            console.log('Tree created successfully');
-            console.log('===============');
-
-            // Clear cache to force refresh
-            this.cache.clear();
-
-            await Promise.all([
-                this.loadTrees(),
-                this.loadStats()
-            ]);
-
-            this.updateTreeList();
-            this.updateTreemap();
-            this.clearForm();
-
-            // Remove temporary marker if it exists
-            if (this.tempMarker) {
-                this.map.removeLayer(this.tempMarker);
-                this.tempMarker = null;
-            }
-
-            // Reset form button
-            if (submitBtn) {
-                submitBtn.textContent = 'Add Tree';
-                submitBtn.dataset.mode = '';
-                delete submitBtn.dataset.treeId;
-            }
-
-            this.showSuccess(`Tree ${isEdit ? 'updated' : 'added'} successfully`);
-
-        } else {
-            let errorData;
-            try {
-                errorData = await response.json();
-            } catch (jsonError) {
-                console.error('Failed to parse error response as JSON:', jsonError);
-                errorData = {};
-            }
-
-            // **CRITICAL ERROR DEBUG**
-            console.error('=== SERVER ERROR RESPONSE ===');
-            console.error('Status:', response.status);
-            console.error('Status text:', response.statusText);
-            console.error('Response headers:', [...response.headers.entries()]);
-            console.error('Error data:', errorData);
-            console.error('Error detail:', errorData.detail);
-            console.error('=============================');
-
-            // Try to get response text if JSON parsing failed
-            if (!errorData.detail) {
-                try {
-                    const responseText = await response.text();
-                    console.error('Raw response text:', responseText);
-                } catch (textError) {
-                    console.error('Failed to get response text:', textError);
-                }
-            }
-
-            throw new Error(errorData.detail || `Failed to ${isEdit ? 'update' : 'add'} tree (${response.status})`);
+            console.error('Error loading trees:', error);
+            document.getElementById('treeList').innerHTML = '<div class="loading">Error loading trees</div>';
         }
-
-    } catch (error) {
-        console.error('=== NETWORK/REQUEST ERROR ===');
-        console.error('Error type:', error.constructor.name);
-        console.error('Error message:', error.message);
-        console.error('Error stack:', error.stack);
-        console.error('=============================');
-
-        this.showError(error.message || `Failed to ${isEdit ? 'update' : 'add'} tree`);
-    } finally {
-        this.showLoadingState(false);
-    }
-}
-    
-    getFormData() {
-    const getValue = (id) => {
-        const element = document.getElementById(id);
-        return element ? element.value.trim() : '';
-    };
-
-    const getNumericValue = (id) => {
-        const value = getValue(id);
-        return value ? parseFloat(value) : null;
-    };
-
-    const getIntegerValue = (id) => {
-        const value = getValue(id);
-        return value ? parseInt(value) : null;
-    };
-
-    // Start with only required fields
-    const formData = {
-        latitude: getNumericValue('latitude'),
-        longitude: getNumericValue('longitude'),
-        species: getValue('species'),
-        health_status: getValue('health_status')
-    };
-
-    // **CRITICAL: Only add optional fields if they have actual values**
-    const commonName = getValue('common_name');
-    if (commonName) {
-        formData.common_name = commonName;
-    }
-
-    const height = getNumericValue('height');
-    if (height !== null && !isNaN(height)) {
-        formData.height = height;
-    }
-
-    const diameter = getNumericValue('diameter');
-    if (diameter !== null && !isNaN(diameter)) {
-        formData.diameter = diameter;
     }
 
-    const ageEstimate = getIntegerValue('age_estimate');
-    if (ageEstimate !== null && !isNaN(ageEstimate)) {
-        formData.age_estimate = ageEstimate;
-    }
-
-    const lastInspection = getValue('last_inspection');
-    if (lastInspection) {
-        formData.last_inspection = lastInspection;
-    }
-
-    const notes = getValue('notes');
-    if (notes) {
-        formData.notes = notes;
-    }
-
-    // **CRITICAL FIX: Remove any phantom fields that shouldn't exist**
-    // This handles browser autofill adding removed fields
-    if (formData.hasOwnProperty('planted_date')) {
-        delete formData.planted_date;
-        console.warn('Removed phantom planted_date field from payload');
-    }
-
-    return formData;
-}
-    
-    clearForm() {
-        const form = document.getElementById('treeForm');
-        if (!form) return;
-        
-        form.reset();
+    showMessage(message, type) {
+        const messageDiv = document.getElementById('message');
+        messageDiv.className = type === 'error' ? 'error-message' : 'success-message';
+        messageDiv.textContent = message;
         
-        // Clear all field errors
-        const inputs = form.querySelectorAll('input, select, textarea');
-        inputs.forEach(input => {
-            this.clearFieldError(input);
-        });
-        
-        // Reset form button
-        const submitBtn = form.querySelector('button[type="submit"]');
-        if (submitBtn) {
-            submitBtn.textContent = 'Add Tree';
-            submitBtn.dataset.mode = '';
-            delete submitBtn.dataset.treeId;
-        }
-        
-        // Set default values
-        const healthStatus = document.getElementById('health_status');
-        if (healthStatus) {
-            healthStatus.value = 'Good';
-        }
-    }
-    
-    // Utility functions
-    debounce(func, wait) {
-        return function executedFunction(...args) {
-            const later = () => {
-                clearTimeout(this.debounceTimer);
-                func(...args);
-            };
-            clearTimeout(this.debounceTimer);
-            this.debounceTimer = setTimeout(later, wait);
-        };
-    }
-    
-    delay(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
-    }
-    
-    showLoadingState(show) {
-        // You can implement a loading spinner here
-        const body = document.body;
-        if (show) {
-            body.style.cursor = 'wait';
-        } else {
-            body.style.cursor = 'default';
-        }
-    }
-    
-    showError(message) {
-        console.error(message);
-        // You can implement a toast notification system here
-        alert(`Error: ${message}`);
-    }
-    
-    showSuccess(message) {
-        console.log(message);
-        // You can implement a toast notification system here
-        // For now, we'll use a simple alert
-        // alert(message);
-    }
-    
-    showConfirmDialog(title, message) {
-        return new Promise((resolve) => {
-            const result = confirm(`${title}\n\n${message}`);
-            resolve(result);
-        });
-    }
-    
-    // Performance monitoring
-    getPerformanceMetrics() {
-        return {
-            ...this.performanceMetrics,
-            cacheSize: this.cache.size,
-            markersCount: this.markers.length,
-            treesCount: this.trees.length
-        };
-    }
-    
-    logPerformanceMetrics() {
-        console.log('Performance Metrics:', this.getPerformanceMetrics());
+        // Auto-hide after 5 seconds
+        setTimeout(() => {
+            messageDiv.textContent = '';
+            messageDiv.className = '';
+        }, 5000);
     }
 }
 
-// Initialize the application when the page loads
+// Initialize the app when the page loads
+let app;
 document.addEventListener('DOMContentLoaded', () => {
-    try {
-        window.treeMapApp = new TreeMapApp();
-        
-        // Log performance metrics every 30 seconds in development
-        if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
-            setInterval(() => {
-                window.treeMapApp.logPerformanceMetrics();
-            }, 30000);
-        }
-        
-    } catch (error) {
-        console.error('Failed to initialize TreeMapApp:', error);
-        alert('Failed to initialize the application. Please refresh the page.');
-    }
-});
-
-// Handle page visibility changes for performance
-document.addEventListener('visibilitychange', () => {
-    if (window.treeMapApp) {
-        if (document.hidden) {
-            // Page is hidden, pause expensive operations
-            console.log('Page hidden, pausing operations');
-        } else {
-            // Page is visible, resume operations
-            console.log('Page visible, resuming operations');
-            // Optionally refresh data if it's been a while
-        }
-    }
+    app = new TreeTrackApp();
 });

static/index.html

@@ -3,360 +3,539 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title> Tree Mapping Application</title>
-    
-    <!-- Leaflet CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-    
-    <!-- Plotly.js -->
-    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-    
-    <!-- Custom CSS -->
+    <title>🌳 TreeTrack - Field Research Tool</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
-        
+
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f5f5f5;
+            line-height: 1.6;
             color: #333;
+            background: linear-gradient(135deg, #2c5530 0%, #1a3a1c 100%);
+            min-height: 100vh;
+            padding: 10px;
         }
-        
+
         .header {
-            background: linear-gradient(135deg, #2d5a27, #4a7c59);
-            color: white;
-            padding: 1rem;
             text-align: center;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            color: white;
+            margin-bottom: 20px;
+            padding: 20px;
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
         }
-        
+
+        .header p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+        }
+
         .container {
+            max-width: 1200px;
+            margin: 0 auto;
             display: grid;
-            grid-template-columns: 300px 1fr 300px;
-            gap: 1rem;
-            padding: 1rem;
-            height: calc(100vh - 80px);
+            grid-template-columns: 1fr;
+            gap: 20px;
+        }
+
+        @media (min-width: 768px) {
+            .container {
+                grid-template-columns: 1fr 400px;
+            }
         }
-        
-        .sidebar {
+
+        .form-container {
             background: white;
-            border-radius: 8px;
-            padding: 1rem;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            max-height: 80vh;
             overflow-y: auto;
         }
-        
-        .main-content {
+
+        .map-container {
             background: white;
-            border-radius: 8px;
-            padding: 1rem;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            display: flex;
-            flex-direction: column;
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            height: fit-content;
         }
-        
-        #map {
-            flex: 1;
-            border-radius: 8px;
-            min-height: 400px;
+
+        .form-section {
+            margin-bottom: 30px;
+            border: 1px solid #e0e0e0;
+            border-radius: 10px;
+            padding: 20px;
+        }
+
+        .section-title {
+            font-size: 1.3rem;
+            color: #2c5530;
+            margin-bottom: 15px;
+            padding-bottom: 8px;
+            border-bottom: 2px solid #e8f5e8;
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
-        
+
         .form-group {
-            margin-bottom: 1rem;
+            margin-bottom: 20px;
         }
-        
-        .form-group label {
+
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 15px;
+        }
+
+        @media (min-width: 600px) {
+            .form-row {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+
+        label {
             display: block;
-            margin-bottom: 0.5rem;
+            margin-bottom: 5px;
             font-weight: 600;
-            color: #2d5a27;
+            color: #2c5530;
+            font-size: 0.95rem;
         }
-        
-        .form-group input,
-        .form-group select,
-        .form-group textarea {
+
+        input, textarea, select {
             width: 100%;
-            padding: 0.5rem;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            font-size: 14px;
+            padding: 12px 15px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            background: white;
         }
-        
-        .form-group textarea {
+
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: #2c5530;
+            box-shadow: 0 0 0 3px rgba(44, 85, 48, 0.1);
+        }
+
+        textarea {
             resize: vertical;
-            min-height: 60px;
+            min-height: 100px;
+        }
+
+        .multi-select {
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 10px;
+            max-height: 120px;
+            overflow-y: auto;
+        }
+
+        .multi-select label {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+            font-weight: normal;
+            cursor: pointer;
+            padding: 5px;
+            border-radius: 5px;
+            transition: background-color 0.2s;
         }
-        
+
+        .multi-select label:hover {
+            background-color: #f5f5f5;
+        }
+
+        .multi-select input[type="checkbox"] {
+            width: auto;
+            margin-right: 10px;
+        }
+
+        .file-upload {
+            border: 2px dashed #ccc;
+            border-radius: 8px;
+            padding: 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: #fafafa;
+            margin-top: 10px;
+        }
+
+        .file-upload:hover {
+            border-color: #2c5530;
+            background: #f0f7f0;
+        }
+
+        .file-upload.dragover {
+            border-color: #2c5530;
+            background: #e8f5e8;
+        }
+
+        .photo-category {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            gap: 10px;
+            align-items: center;
+            margin-bottom: 15px;
+            padding: 10px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+        }
+
         .btn {
-            background: #4a7c59;
-            color: white;
+            padding: 12px 25px;
             border: none;
-            padding: 0.75rem 1rem;
-            border-radius: 4px;
+            border-radius: 8px;
             cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(45deg, #2c5530, #4a7c59);
+            color: white;
+            box-shadow: 0 4px 15px rgba(44, 85, 48, 0.3);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(44, 85, 48, 0.4);
+        }
+
+        .btn-secondary {
+            background: #6c757d;
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background: #545b62;
+        }
+
+        .btn-small {
+            padding: 8px 15px;
             font-size: 14px;
-            transition: background-color 0.3s;
         }
-        
-        .btn:hover {
-            background: #2d5a27;
+
+        .gps-btn {
+            background: #17a2b8;
+            color: white;
+            margin-left: 10px;
         }
-        
-        .btn-danger {
-            background: #dc3545;
+
+        .gps-btn:hover {
+            background: #138496;
         }
-        
-        .btn-danger:hover {
-            background: #c82333;
-        }
-        
-        .stats-card {
-            background: #f8f9fa;
-            padding: 1rem;
-            border-radius: 4px;
-            margin-bottom: 1rem;
-            border-left: 4px solid #4a7c59;
-        }
-        
-        .stats-number {
-            font-size: 2rem;
-            font-weight: bold;
-            color: #2d5a27;
+
+        .current-location {
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
-        
-        .stats-label {
-            font-size: 0.9rem;
-            color: #666;
+
+        .success-message, .error-message {
+            padding: 15px;
+            border-radius: 8px;
+            margin: 15px 0;
+            font-weight: 600;
+        }
+
+        .success-message {
+            background: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
         }
-        
+
+        .error-message {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+
         .tree-list {
-            max-height: 300px;
+            max-height: 400px;
             overflow-y: auto;
+            margin-top: 20px;
         }
-        
+
         .tree-item {
-            padding: 0.5rem;
-            border-bottom: 1px solid #eee;
-            cursor: pointer;
-            transition: background-color 0.3s;
+            padding: 15px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            background: white;
+            transition: all 0.3s ease;
         }
-        
+
         .tree-item:hover {
-            background-color: #f8f9fa;
-        }
-        
-        .tree-item.selected {
-            background-color: #e8f5e8;
-            border-left: 3px solid #4a7c59;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            transform: translateY(-2px);
         }
-        
-        .tree-species {
-            font-weight: 600;
-            color: #2d5a27;
+
+        .tree-id {
+            font-weight: bold;
+            color: #2c5530;
+            font-size: 1.1rem;
         }
-        
-        .tree-details {
+
+        .tree-info {
+            color: #666;
             font-size: 0.9rem;
+            margin-top: 5px;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 20px;
             color: #666;
         }
-        
-        .health-good { color: #28a745; }
-        .health-fair { color: #ffc107; }
-        .health-poor { color: #dc3545; }
-        .health-dead { color: #6c757d; }
-        
-        #treemap {
-            height: 300px;
-            margin-top: 1rem;
-        }
-        
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.5);
-        }
-        
-        .modal-content {
-            background-color: white;
-            margin: 5% auto;
-            padding: 2rem;
-            border-radius: 8px;
-            width: 90%;
-            max-width: 500px;
-            max-height: 80vh;
-            overflow-y: auto;
+
+        .audio-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            margin-top: 10px;
         }
-        
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
+
+        .record-btn {
+            background: #dc3545;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            font-size: 18px;
             cursor: pointer;
         }
-        
-        .close:hover {
-            color: #000;
+
+        .record-btn.recording {
+            background: #28a745;
+            animation: pulse 1s infinite;
         }
-        
+
         @keyframes pulse {
-            0% {
-                transform: scale(1);
-                opacity: 1;
-            }
-            50% {
-                transform: scale(1.1);
-                opacity: 0.8;
-            }
-            100% {
-                transform: scale(1);
-                opacity: 1;
-            }
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
         }
-        
-        @media (max-width: 1024px) {
-            .container {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto auto auto;
-            }
-            
-            .sidebar {
-                order: 2;
+
+        .hidden {
+            display: none;
+        }
+
+        .form-actions {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        @media (max-width: 600px) {
+            .form-actions {
+                flex-direction: column;
             }
             
-            .main-content {
-                order: 1;
+            .btn {
+                width: 100%;
             }
         }
+
+        /* Auto-complete styling */
+        .autocomplete-container {
+            position: relative;
+        }
+
+        .autocomplete-list {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: white;
+            border: 1px solid #ccc;
+            border-radius: 0 0 8px 8px;
+            max-height: 200px;
+            overflow-y: auto;
+            z-index: 1000;
+            display: none;
+        }
+
+        .autocomplete-item {
+            padding: 10px 15px;
+            cursor: pointer;
+            border-bottom: 1px solid #eee;
+        }
+
+        .autocomplete-item:hover {
+            background: #f5f5f5;
+        }
+
+        .autocomplete-item.selected {
+            background: #e8f5e8;
+        }
+
+        .uploaded-file {
+            margin-top: 10px;
+            padding: 10px;
+            background: #e8f5e8;
+            border-radius: 5px;
+            font-size: 14px;
+        }
     </style>
 </head>
 <body>
     <div class="header">
-        <h1>🌳 Tree Mapping Application</h1>
-        <p>Track, map, and manage urban forest data</p>
+        <h1>🌳 TreeTrack</h1>
+        <p>Comprehensive Field Research & Documentation Tool</p>
     </div>
-    
+
     <div class="container">
-        <!-- Left Sidebar - Tree Entry Form -->
-        <div class="sidebar">
-            <h3>Add New Tree</h3>
+        <div class="form-container">
             <form id="treeForm">
-                <div class="form-group">
-                    <label for="latitude">Latitude</label>
-                    <input type="number" id="latitude" step="0.000001" required>
-                </div>
-                
-                <div class="form-group">
-                    <label for="longitude">Longitude</label>
-                    <input type="number" id="longitude" step="0.000001" required>
+                <!-- Section 1: Location -->
+                <div class="form-section">
+                    <h3 class="section-title">📍 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-small gps-btn">📍 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>
-                
-                <div class="form-group">
-                    <label for="species">Species (Scientific Name)</label>
-                    <input type="text" id="species" required placeholder="e.g., Quercus robur">
+
+                <!-- 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 Code</label>
+                        <input type="text" id="treeCode" placeholder="e.g., C.A, A-G1" maxlength="20">
+                    </div>
                 </div>
-                
-                <div class="form-group">
-                    <label for="common_name">Common Name</label>
-                    <input type="text" id="common_name" placeholder="e.g., English Oak">
+
+                <!-- 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">Width/Girth (cm)</label>
+                            <input type="number" id="width" step="0.1" min="0" max="2000" placeholder="45.2">
+                        </div>
+                    </div>
                 </div>
-                
-                <div class="form-group">
-                    <label for="height">Height (meters)</label>
-                    <input type="number" id="height" step="0.1" min="0">
+
+                <!-- 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>
-                
-                <div class="form-group">
-                    <label for="diameter">Diameter (cm)</label>
-                    <input type="number" id="diameter" step="0.1" min="0">
+
+                <!-- Section 5: Phenology -->
+                <div class="form-section">
+                    <h3 class="section-title">🌱 Phenology Tracker</h3>
+                    <div class="form-group">
+                        <label>Current development stages:</label>
+                        <div id="phenologyOptions" class="multi-select">
+                            <!-- Options loaded dynamically -->
+                        </div>
+                    </div>
                 </div>
-                
-                <div class="form-group">
-                    <label for="health_status">Health Status</label>
-                    <select id="health_status">
-                        <option value="Excellent">Excellent</option>
-                        <option value="Good" selected>Good</option>
-                        <option value="Fair">Fair</option>
-                        <option value="Poor">Poor</option>
-                        <option value="Dead">Dead</option>
-                    </select>
+
+                <!-- Section 6: Photography -->
+                <div class="form-section">
+                    <h3 class="section-title">📸 Photography</h3>
+                    <div id="photoCategories">
+                        <!-- Photo categories loaded dynamically -->
+                    </div>
                 </div>
-                
-                <div class="form-group">
-                    <label for="age_estimate">Age Estimate (years)</label>
-                    <input type="number" id="age_estimate" min="0">
+
+                <!-- Section 7: Storytelling -->
+                <div class="form-section">
+                    <h3 class="section-title">📜 Storytelling</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>
-                
-                
-                <div class="form-group">
-                    <label for="last_inspection">Last Inspection</label>
-                    <input type="date" id="last_inspection">
+
+                <!-- Section 8: Notes -->
+                <div class="form-section">
+                    <h3 class="section-title">📝 Additional Notes</h3>
+                    <div class="form-group">
+                        <label for="notes">Field Observations</label>
+                        <textarea id="notes" placeholder="Any additional observations, notes, or remarks..." maxlength="2000"></textarea>
+                    </div>
                 </div>
-                
-                <div class="form-group">
-                    <label for="notes">Notes</label>
-                    <textarea id="notes" placeholder="Additional observations..."></textarea>
+
+                <div class="form-actions">
+                    <button type="submit" class="btn btn-primary">🌳 Save Tree Record</button>
+                    <button type="button" id="resetForm" class="btn btn-secondary">🔄 Reset Form</button>
                 </div>
-                
-                <button type="submit" class="btn">Add Tree</button>
-                <button type="button" id="clearForm" class="btn" style="background: #6c757d; margin-left: 0.5rem;">Clear</button>
             </form>
+
+            <div id="message"></div>
         </div>
-        
-        <!-- Main Content - Map -->
-        <div class="main-content">
-            <h3>Tree Locations Map</h3>
-            <div id="map"></div>
-        </div>
-        
-        <!-- Right Sidebar - Statistics and Tree List -->
-        <div class="sidebar">
-            <h3>Statistics</h3>
-            <div id="stats">
-                <div class="stats-card">
-                    <div class="stats-number" id="totalTrees">0</div>
-                    <div class="stats-label">Total Trees</div>
-                </div>
-                <div class="stats-card">
-                    <div class="stats-number" id="avgHeight">0</div>
-                    <div class="stats-label">Avg Height (m)</div>
-                </div>
-                <div class="stats-card">
-                    <div class="stats-number" id="avgDiameter">0</div>
-                    <div class="stats-label">Avg Diameter (cm)</div>
-                </div>
+
+        <div class="map-container">
+            <h3>📊 Recent Trees</h3>
+            <div id="treeList" class="tree-list">
+                <div class="loading">Loading trees...</div>
             </div>
-            
-            <div id="treemap"></div>
-            
-            <h3>Recent Trees</h3>
-            <div id="treeList" class="tree-list"></div>
-        </div>
-    </div>
-    
-    <!-- Tree Details Modal -->
-    <div id="treeModal" class="modal">
-        <div class="modal-content">
-            <span class="close">&times;</span>
-            <h3>Tree Details</h3>
-            <div id="treeDetails"></div>
-            <button id="editTree" class="btn">Edit</button>
-            <button id="deleteTree" class="btn btn-danger" style="margin-left: 0.5rem;">Delete</button>
         </div>
     </div>
-    
-    <!-- Leaflet JS -->
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    
-    <!-- Custom JavaScript -->
-    <script src="/static/app.js"></script>
+
+    <script src="app.js"></script>
 </body>
 </html>