Add park and ride card components with advanced search functionality

- Implemented park card component with image, status badge, favorite button, and quick stats overlay.
- Developed ride card component featuring thrill level badge, status badge, favorite button, and detailed stats.
- Created advanced search page with filters for parks and rides, including location, type, status, and thrill level.
- Added dynamic quick search functionality with results display.
- Enhanced user experience with JavaScript for filter toggling, range slider updates, and view switching.
- Included custom CSS for improved styling of checkboxes and search results layout.

static/js/backup/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));
+        });
+    }
+});