Add JavaScript functionality for dynamic UI updates and filtering

- Implemented font color configuration based on numeric values in various sections.
- Added resizing functionality for input fields to accommodate text length.
- Initialized filters on document ready for improved user interaction.
- Created visualization for profile data using fetched dot format.
- Enhanced SQL detail page with click event handling for row navigation.
- Ensured consistent highlighting for code blocks across multiple pages.

staticfiles/parks/js/search.js

@@ -0,0 +1,69 @@
+// Handle view mode persistence across HTMX requests
+document.addEventListener('htmx:configRequest', function(evt) {
+    // Preserve view mode
+    const parkResults = document.getElementById('park-results');
+    if (parkResults) {
+        const viewMode = parkResults.getAttribute('data-view-mode');
+        if (viewMode) {
+            evt.detail.parameters['view_mode'] = viewMode;
+        }
+    }
+
+    // Preserve search terms
+    const searchInput = document.getElementById('search');
+    if (searchInput && searchInput.value) {
+        evt.detail.parameters['search'] = searchInput.value;
+    }
+});
+
+// Handle loading states
+document.addEventListener('htmx:beforeRequest', function(evt) {
+    const target = evt.detail.target;
+    if (target) {
+        target.classList.add('htmx-requesting');
+    }
+});
+
+document.addEventListener('htmx:afterRequest', function(evt) {
+    const target = evt.detail.target;
+    if (target) {
+        target.classList.remove('htmx-requesting');
+    }
+});
+
+// Handle history navigation
+document.addEventListener('htmx:historyRestore', function(evt) {
+    const parkResults = document.getElementById('park-results');
+    if (parkResults && evt.detail.path) {
+        const url = new URL(evt.detail.path, window.location.origin);
+        const viewMode = url.searchParams.get('view_mode');
+        if (viewMode) {
+            parkResults.setAttribute('data-view-mode', viewMode);
+        }
+    }
+});
+
+// Initialize lazy loading for images
+function initializeLazyLoading(container) {
+    if (!('IntersectionObserver' in window)) return;
+
+    const imageObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const img = entry.target;
+                img.src = img.dataset.src;
+                img.removeAttribute('data-src');
+                imageObserver.unobserve(img);
+            }
+        });
+    });
+
+    container.querySelectorAll('img[data-src]').forEach(img => {
+        imageObserver.observe(img);
+    });
+}
+
+// Initialize lazy loading after HTMX content swaps
+document.addEventListener('htmx:afterSwap', function(evt) {
+    initializeLazyLoading(evt.detail.target);
+});