Add autocomplete functionality for parks: implement URLs, views, and templates for real-time suggestions

static/js/alerts.js

@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const alerts = document.querySelectorAll('.alert');
+
+    alerts.forEach(alert => {
+        // Auto-hide alerts after 5 seconds
+        setTimeout(() => {
+            alert.classList.add('fade-out');
+            setTimeout(() => {
+                alert.remove();
+            }, 300); // Match CSS transition duration
+        }, 5000);
+
+        // Add click-to-dismiss functionality
+        alert.addEventListener('click', () => {
+            alert.classList.add('fade-out');
+            setTimeout(() => {
+                alert.remove();
+            }, 300);
+        });
+    });
+});

static/js/location-autocomplete.js

@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const countryInput = document.querySelector('[name="country"]');
+    const regionInput = document.querySelector('[name="region"]');
+    const cityInput = document.querySelector('[name="city"]');
+
+    if (!countryInput || !regionInput || !cityInput) return;
+
+    // Update regions when country changes
+    countryInput.addEventListener('change', () => {
+        const country = countryInput.value;
+        if (country) {
+            updateRegions(country);
+            // Clear city when country changes
+            cityInput.innerHTML = '<option value="">Select a city</option>';
+        }
+    });
+
+    // Update cities when region changes
+    regionInput.addEventListener('change', () => {
+        const country = countryInput.value;
+        const region = regionInput.value;
+        if (country && region) {
+            updateCities(country, region);
+        }
+    });
+
+    function updateRegions(country) {
+        fetch(`/location/regions/?country=${encodeURIComponent(country)}`)
+            .then(response => response.json())
+            .then(data => {
+                regionInput.innerHTML = '<option value="">Select a region</option>';
+                data.regions.forEach(region => {
+                    const option = new Option(region, region);
+                    regionInput.add(option);
+                });
+            });
+    }
+
+    function updateCities(country, region) {
+        fetch(`/location/cities/?country=${encodeURIComponent(country)}&region=${encodeURIComponent(region)}`)
+            .then(response => response.json())
+            .then(data => {
+                cityInput.innerHTML = '<option value="">Select a city</option>';
+                data.cities.forEach(city => {
+                    const option = new Option(city, city);
+                    cityInput.add(option);
+                });
+            });
+    }
+});

static/js/main.js

@@ -0,0 +1,40 @@
+// Theme Toggle
+document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('theme-toggle');
+    const themeIcon = themeToggle.nextElementSibling.querySelector('i');
+
+    // Set initial icon
+    updateThemeIcon();
+
+    themeToggle.addEventListener('change', () => {
+        if (document.documentElement.classList.contains('dark')) {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        } else {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        }
+        updateThemeIcon();
+    });
+
+    function updateThemeIcon() {
+        const isDark = document.documentElement.classList.contains('dark');
+        themeIcon.classList.remove('fa-sun', 'fa-moon');
+        themeIcon.classList.add(isDark ? 'fa-sun' : 'fa-moon');
+    }
+
+    // Mobile Menu Toggle
+    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+    const mobileMenu = document.getElementById('mobileMenu');
+    const menuIcon = mobileMenuBtn.querySelector('i');
+
+    mobileMenu.style.display = 'none';
+    let isMenuOpen = false;
+
+    mobileMenuBtn.addEventListener('click', () => {
+        isMenuOpen = !isMenuOpen;
+        mobileMenu.style.display = isMenuOpen ? 'block' : 'none';
+        menuIcon.classList.remove('fa-bars', 'fa-times');
+        menuIcon.classList.add(isMenuOpen ? 'fa-times' : 'fa-bars');
+    });
+});