Add Road Trip Planner template with interactive map and trip management features

- Implemented a new HTML template for the Road Trip Planner.
- Integrated Leaflet.js for interactive mapping and routing.
- Added functionality for searching and selecting parks to include in a trip.
- Enabled drag-and-drop reordering of selected parks.
- Included trip optimization and route calculation features.
- Created a summary display for trip statistics.
- Added functionality to save trips and manage saved trips.
- Enhanced UI with responsive design and dark mode support.

static/js/location-search.js

@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const useLocationBtn = document.getElementById('use-my-location');
+    const latInput = document.getElementById('lat-input');
+    const lngInput = document.getElementById('lng-input');
+    const locationInput = document.getElementById('location-input');
+
+    if (useLocationBtn && 'geolocation' in navigator) {
+        useLocationBtn.addEventListener('click', function() {
+            this.textContent = '📍 Getting location...';
+            this.disabled = true;
+            
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    latInput.value = position.coords.latitude;
+                    lngInput.value = position.coords.longitude;
+                    locationInput.value = `${position.coords.latitude.toFixed(6)}, ${position.coords.longitude.toFixed(6)}`;
+                    useLocationBtn.textContent = '✅ Location set';
+                    setTimeout(() => {
+                        useLocationBtn.textContent = '📍 Use My Location';
+                        useLocationBtn.disabled = false;
+                    }, 2000);
+                },
+                function(error) {
+                    useLocationBtn.textContent = '❌ Location failed';
+                    console.error('Geolocation error:', error);
+                    setTimeout(() => {
+                        useLocationBtn.textContent = '📍 Use My Location';
+                        useLocationBtn.disabled = false;
+                    }, 2000);
+                }
+            );
+        });
+    } else if (useLocationBtn) {
+        useLocationBtn.style.display = 'none';
+    }
+
+    // Autocomplete for location search
+    if (locationInput) {
+        locationInput.addEventListener('input', function() {
+            const query = this.value;
+            if (query.length < 3) {
+                return;
+            }
+
+            fetch(`/search/location/suggestions/?q=${query}`)
+                .then(response => response.json())
+                .then(data => {
+                    // This is a simplified example. A more robust solution would use a library like Awesomplete or build a custom dropdown.
+                    console.log('Suggestions:', data.suggestions);
+                })
+                .catch(error => console.error('Error fetching suggestions:', error));
+        });
+    }
+});