Add placeholder images, enhance alert styles, and implement theme toggle component with dark mode support

resources/css/alerts.css

@@ -0,0 +1,44 @@
+/* Alert Styles */
+.alert {
+    @apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4;
+    animation: slideIn 0.5s ease-out forwards;
+}
+
+.alert-success {
+    @apply text-white bg-green-500;
+}
+
+.alert-error {
+    @apply text-white bg-red-500;
+}
+
+.alert-info {
+    @apply text-white bg-blue-500;
+}
+
+.alert-warning {
+    @apply text-white bg-yellow-500;
+}
+
+/* Animation keyframes */
+@keyframes slideIn {
+    0% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}

resources/css/app.css

@@ -1,3 +1,70 @@
+@import 'alerts.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Custom base styles */
+@layer base {
+    html {
+        scroll-behavior: smooth;
+    }
+
+    body {
+        font-family: 'Poppins', sans-serif;
+    }
+}
+
+/* Custom components */
+@layer components {
+    .nav-link {
+        @apply flex items-center gap-2 px-3 py-2 text-gray-500 transition-colors rounded-lg hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-700;
+    }
+
+    .site-logo {
+        @apply text-2xl;
+    }
+
+    .menu-item {
+        @apply flex items-center gap-3 px-4 py-2 text-gray-600 transition-colors dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
+    }
+
+    .form-input {
+        @apply w-full px-4 py-2 text-gray-700 transition-colors bg-white border rounded-lg dark:bg-gray-800 dark:text-gray-300 border-gray-200/50 dark:border-gray-700/50 focus:border-primary dark:focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20;
+    }
+
+    .btn {
+        @apply px-4 py-2 font-semibold text-white transition-colors rounded-lg shadow-lg bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 focus:outline-none focus:ring-2 focus:ring-primary/20;
+    }
+
+    .btn-secondary {
+        @apply text-gray-700 bg-white border dark:bg-gray-800 dark:text-white border-gray-200/50 dark:border-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700;
+    }
+
+    .alert {
+        @apply relative px-4 py-3 mb-4 text-white rounded-lg;
+    }
+
+    .alert-success {
+        @apply bg-green-500;
+    }
+
+    .alert-error {
+        @apply bg-red-500;
+    }
+
+    .alert-warning {
+        @apply bg-yellow-500;
+    }
+
+    .alert-info {
+        @apply bg-blue-500;
+    }
+}
+
+/* Custom utilities */
+@layer utilities {
+    .text-gradient {
+        @apply text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary;
+    }
+}

resources/css/src/input.css

@@ -0,0 +1,282 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    /* Button Styles */
+    .btn-primary {
+        @apply inline-flex items-center px-6 py-2.5 border border-transparent rounded-full shadow-md text-sm font-medium text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all;
+    }
+    
+    .btn-secondary {
+        @apply inline-flex items-center px-6 py-2.5 border border-gray-200 dark:border-gray-700 rounded-full shadow-md text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all;
+    }
+    /* [Previous styles remain unchanged until mobile menu section...] */
+
+    /* Mobile Menu */
+    #mobileMenu {
+        @apply overflow-hidden transition-all duration-300 ease-in-out opacity-0 max-h-0;
+    }
+
+    #mobileMenu.show {
+        @apply max-h-[300px] opacity-100;
+    }
+
+    #mobileMenu .space-y-4 {
+        @apply pb-6;
+    }
+
+    .mobile-nav-link {
+        @apply flex items-center justify-center px-6 py-3 text-gray-700 transition-all border border-transparent rounded-lg dark:text-gray-200 hover:bg-primary/10 dark:hover:bg-primary/20 hover:text-primary dark:hover:text-primary hover:border-primary/20 dark:hover:border-primary/30;
+    }
+
+    .mobile-nav-link i {
+        @apply text-xl transition-colors;
+    }
+
+    @media (max-width: 540px) {
+        .mobile-nav-link i {
+            @apply text-lg;
+        }
+    }
+
+    .mobile-nav-link.primary {
+        @apply text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90;
+    }
+
+    .mobile-nav-link.primary i {
+        @apply mr-3 text-white;
+    }
+
+    .mobile-nav-link.secondary {
+        @apply text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600;
+    }
+
+    .mobile-nav-link.secondary i {
+        @apply mr-3 text-gray-500 dark:text-gray-400;
+    }
+
+    /* Theme Toggle */
+    #theme-toggle+.theme-toggle-btn i::before {
+        content: "\f186";
+        font-family: "Font Awesome 5 Free";
+        font-weight: 900;
+    }
+
+    #theme-toggle:checked+.theme-toggle-btn i::before {
+        content: "\f185";
+        color: theme('colors.yellow.400');
+    }
+
+    /* Navigation Components */
+    .nav-link {
+        @apply flex items-center text-gray-700 transition-all dark:text-gray-200;
+    }
+
+    /* Extra small screens (540px and below) */
+    @media (max-width: 540px) {
+        .nav-link {
+            @apply px-2 py-2 text-sm;
+        }
+        .nav-link i {
+            @apply mr-1 text-base;
+        }
+        .nav-link span {
+            @apply text-sm;
+        }
+        .site-logo {
+            @apply px-1 text-lg;
+        }
+        .nav-container {
+            @apply px-2;
+        }
+    }
+
+    /* Small screens (541px to 767px) */
+    @media (min-width: 541px) and (max-width: 767px) {
+        .nav-link {
+            @apply px-3 py-2;
+        }
+        .nav-link i {
+            @apply mr-2;
+        }
+        .site-logo {
+            @apply px-2 text-xl;
+        }
+        .nav-container {
+            @apply px-4;
+        }
+    }
+
+    /* Medium screens and up */
+    @media (min-width: 768px) {
+        .nav-link {
+            @apply px-6 py-2.5 rounded-lg font-medium border border-transparent hover:border-primary/20 dark:hover:border-primary/30;
+        }
+        .nav-link i {
+            @apply mr-3 text-lg;
+        }
+        .site-logo {
+            @apply px-3 text-2xl;
+        }
+        .nav-container {
+            @apply px-6;
+        }
+    }
+
+    .nav-link:hover {
+        @apply text-primary dark:text-primary bg-primary/10 dark:bg-primary/20;
+    }
+
+    .nav-link i {
+        @apply text-gray-500 transition-colors dark:text-gray-400;
+    }
+
+    .nav-link:hover i {
+        @apply text-primary;
+    }
+
+    @media (min-width: 1024px) {
+        #mobileMenu {
+            @apply hidden !important;
+        }
+    }
+
+    /* Menu Items */
+    .menu-item {
+        @apply flex items-center w-full px-4 py-3 text-sm text-gray-700 transition-all dark:text-gray-200 hover:bg-primary/10 dark:hover:bg-primary/20 hover:text-primary dark:hover:text-primary first:rounded-t-lg last:rounded-b-lg;
+    }
+
+    .menu-item i {
+        @apply mr-3 text-base text-gray-500 dark:text-gray-400;
+    }
+
+    /* Form Components */
+    .form-input {
+        @apply w-full px-4 py-3 text-gray-900 transition-all border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary;
+    }
+
+    .form-label {
+        @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5;
+    }
+
+    .form-hint {
+        @apply mt-2 space-y-1 text-sm text-gray-500 dark:text-gray-400;
+    }
+
+    .form-error {
+        @apply mt-2 text-sm text-red-600 dark:text-red-400;
+    }
+
+    /* Status Badges */
+    .status-badge {
+        @apply inline-flex items-center px-3 py-1 text-sm font-medium rounded-full;
+    }
+
+    .status-operating {
+        @apply text-green-800 bg-green-100 dark:bg-green-700 dark:text-green-50;
+    }
+
+    .status-closed {
+        @apply text-red-800 bg-red-100 dark:bg-red-700 dark:text-red-50;
+    }
+
+    .status-construction {
+        @apply text-yellow-800 bg-yellow-100 dark:bg-yellow-600 dark:text-yellow-50;
+    }
+
+    /* Auth Components */
+    .auth-card {
+        @apply w-full max-w-md p-8 mx-auto border shadow-xl bg-white/90 dark:bg-gray-800/90 rounded-2xl backdrop-blur-sm border-gray-200/50 dark:border-gray-700/50;
+    }
+
+    .auth-title {
+        @apply mb-8 text-2xl font-bold text-center text-transparent bg-gradient-to-r from-primary to-secondary bg-clip-text;
+    }
+
+    .auth-divider {
+        @apply relative my-6 text-center;
+    }
+
+    .auth-divider::before,
+    .auth-divider::after {
+        @apply absolute top-1/2 w-1/3 border-t border-gray-200 dark:border-gray-700 content-[''];
+    }
+
+    .auth-divider::before {
+        @apply left-0;
+    }
+
+    .auth-divider::after {
+        @apply right-0;
+    }
+
+    .auth-divider span {
+        @apply px-4 text-sm text-gray-500 dark:text-gray-400 bg-white/90 dark:bg-gray-800/90;
+    }
+
+    /* Social Login Buttons */
+    .btn-social {
+        @apply w-full flex items-center justify-center px-6 py-3 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-[1.02] transition-all mb-3;
+    }
+
+    .btn-discord {
+        @apply text-gray-700 bg-white border-gray-200 hover:bg-gray-50 shadow-gray-200/50 dark:shadow-gray-900/50;
+    }
+
+    .btn-google {
+        @apply text-gray-700 bg-white border-gray-200 hover:bg-gray-50 shadow-gray-200/50 dark:shadow-gray-900/50;
+    }
+
+    /* Alert Components */
+    .alert {
+        @apply p-4 mb-4 shadow-lg rounded-xl backdrop-blur-sm;
+    }
+
+    .alert-success {
+        @apply text-green-800 border border-green-200 bg-green-100/90 dark:bg-green-800/30 dark:text-green-100 dark:border-green-700;
+    }
+
+    .alert-error {
+        @apply text-red-800 border border-red-200 bg-red-100/90 dark:bg-red-800/30 dark:text-red-100 dark:border-red-700;
+    }
+
+    .alert-warning {
+        @apply text-yellow-800 border border-yellow-200 bg-yellow-100/90 dark:bg-yellow-800/30 dark:text-yellow-100 dark:border-yellow-700;
+    }
+
+    .alert-info {
+        @apply text-blue-800 border border-blue-200 bg-blue-100/90 dark:bg-blue-800/30 dark:text-blue-100 dark:border-blue-700;
+    }
+
+    /* Layout Components */
+    .card {
+        @apply p-6 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50;
+    }
+
+    .card-hover {
+        @apply transition-transform transform hover:-translate-y-1;
+    }
+
+    .grid-cards {
+        @apply grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3;
+    }
+
+    /* Typography */
+    .heading-1 {
+        @apply mb-6 text-3xl font-bold text-gray-900 dark:text-white;
+    }
+
+    .heading-2 {
+        @apply mb-4 text-2xl font-bold text-gray-900 dark:text-white;
+    }
+
+    .text-body {
+        @apply text-gray-600 dark:text-gray-300;
+    }
+
+    /* Turnstile Widget */
+    .turnstile {
+        @apply flex items-center justify-center my-4;
+    }
+}

resources/js/app.js

@@ -1 +1,6 @@
 import './bootstrap';
+import './modules/alerts';
+import './modules/location-autocomplete';
+import './modules/park-map';
+import './modules/photo-gallery';
+import './modules/search';

resources/js/modules/alerts.js

@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Get all alert elements
+    const alerts = document.querySelectorAll('.alert');
+    
+    // For each alert
+    alerts.forEach(alert => {
+        // After 5 seconds
+        setTimeout(() => {
+            // Add slideOut animation
+            alert.style.animation = 'slideOut 0.5s ease-out forwards';
+            
+            // Remove the alert after animation completes
+            setTimeout(() => {
+                alert.remove();
+            }, 500);
+        }, 5000);
+    });
+});

resources/js/modules/location-autocomplete.js

@@ -0,0 +1,81 @@
+function locationAutocomplete(field, filterParks = false) {
+    return {
+        query: '',
+        suggestions: [],
+        fetchSuggestions() {
+            let url;
+            const params = new URLSearchParams({
+                q: this.query,
+                filter_parks: filterParks
+            });
+
+            switch (field) {
+                case 'country':
+                    url = '/parks/ajax/countries/';
+                    break;
+                case 'region':
+                    url = '/parks/ajax/regions/';
+                    // Add country parameter if we're fetching regions
+                    const countryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
+                    if (countryInput && countryInput.value) {
+                        params.append('country', countryInput.value);
+                    }
+                    break;
+                case 'city':
+                    url = '/parks/ajax/cities/';
+                    // Add country and region parameters if we're fetching cities
+                    const regionInput = document.getElementById(filterParks ? 'region' : 'id_region_name');
+                    const cityCountryInput = document.getElementById(filterParks ? 'country' : 'id_country_name');
+                    if (regionInput && regionInput.value && cityCountryInput && cityCountryInput.value) {
+                        params.append('country', cityCountryInput.value);
+                        params.append('region', regionInput.value);
+                    }
+                    break;
+            }
+
+            if (url) {
+                fetch(`${url}?${params}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.suggestions = data;
+                    });
+            }
+        },
+        selectSuggestion(suggestion) {
+            this.query = suggestion.name;
+            this.suggestions = [];
+
+            // If this is a form field (not filter), update hidden fields
+            if (!filterParks) {
+                const hiddenField = document.getElementById(`id_${field}`);
+                if (hiddenField) {
+                    hiddenField.value = suggestion.id;
+                }
+
+                // Clear dependent fields when parent field changes
+                if (field === 'country') {
+                    const regionInput = document.getElementById('id_region_name');
+                    const cityInput = document.getElementById('id_city_name');
+                    const regionHidden = document.getElementById('id_region');
+                    const cityHidden = document.getElementById('id_city');
+                    
+                    if (regionInput) regionInput.value = '';
+                    if (cityInput) cityInput.value = '';
+                    if (regionHidden) regionHidden.value = '';
+                    if (cityHidden) cityHidden.value = '';
+                } else if (field === 'region') {
+                    const cityInput = document.getElementById('id_city_name');
+                    const cityHidden = document.getElementById('id_city');
+                    
+                    if (cityInput) cityInput.value = '';
+                    if (cityHidden) cityHidden.value = '';
+                }
+            }
+
+            // Trigger form submission for filters
+            if (filterParks) {
+                htmx.trigger('#park-filters', 'change');
+            }
+        }
+    };
+}

resources/js/modules/main.js

@@ -0,0 +1,141 @@
+// Theme handling
+document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('theme-toggle');
+    const html = document.documentElement;
+    
+    // Initialize toggle state based on current theme
+    if (themeToggle) {
+        themeToggle.checked = html.classList.contains('dark');
+        
+        // Handle toggle changes
+        themeToggle.addEventListener('change', function() {
+            const isDark = this.checked;
+            html.classList.toggle('dark', isDark);
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+        
+        // Listen for system theme changes
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', (e) => {
+            if (!localStorage.getItem('theme')) {
+                const isDark = e.matches;
+                html.classList.toggle('dark', isDark);
+                themeToggle.checked = isDark;
+            }
+        });
+    }
+});
+
+// Handle search form submission
+document.addEventListener('submit', (e) => {
+    if (e.target.matches('form[action*="search"]')) {
+        const searchInput = e.target.querySelector('input[name="q"]');
+        if (!searchInput.value.trim()) {
+            e.preventDefault();
+        }
+    }
+});
+
+// Mobile menu toggle with transitions
+document.addEventListener('DOMContentLoaded', () => {
+    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+    const mobileMenu = document.getElementById('mobileMenu');
+
+    if (mobileMenuBtn && mobileMenu) {
+        let isMenuOpen = false;
+
+        const toggleMenu = () => {
+            isMenuOpen = !isMenuOpen;
+            mobileMenu.classList.toggle('show', isMenuOpen);
+            mobileMenuBtn.setAttribute('aria-expanded', isMenuOpen.toString());
+            
+            // Update icon
+            const icon = mobileMenuBtn.querySelector('i');
+            icon.classList.remove(isMenuOpen ? 'fa-bars' : 'fa-times');
+            icon.classList.add(isMenuOpen ? 'fa-times' : 'fa-bars');
+        };
+
+        mobileMenuBtn.addEventListener('click', toggleMenu);
+
+        // Close menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (isMenuOpen && !mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
+                toggleMenu();
+            }
+        });
+
+        // Close menu when pressing escape
+        document.addEventListener('keydown', (e) => {
+            if (isMenuOpen && e.key === 'Escape') {
+                toggleMenu();
+            }
+        });
+
+        // Handle viewport changes
+        const mediaQuery = window.matchMedia('(min-width: 1024px)');
+        mediaQuery.addEventListener('change', (e) => {
+            if (e.matches && isMenuOpen) {
+                toggleMenu();
+            }
+        });
+    }
+});
+
+// User dropdown toggle
+const userMenuBtn = document.getElementById('userMenuBtn');
+const userDropdown = document.getElementById('userDropdown');
+
+if (userMenuBtn && userDropdown) {
+    userMenuBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        userDropdown.classList.toggle('active');
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
+            userDropdown.classList.remove('active');
+        }
+    });
+
+    // Close dropdown when pressing escape
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            userDropdown.classList.remove('active');
+        }
+    });
+}
+
+// Handle flash messages
+document.addEventListener('DOMContentLoaded', () => {
+    const alerts = document.querySelectorAll('.alert');
+    alerts.forEach(alert => {
+        setTimeout(() => {
+            alert.style.opacity = '0';
+            setTimeout(() => alert.remove(), 300);
+        }, 5000);
+    });
+});
+
+// Initialize tooltips
+document.addEventListener('DOMContentLoaded', () => {
+    const tooltips = document.querySelectorAll('[data-tooltip]');
+    tooltips.forEach(tooltip => {
+        tooltip.addEventListener('mouseenter', (e) => {
+            const text = e.target.getAttribute('data-tooltip');
+            const tooltipEl = document.createElement('div');
+            tooltipEl.className = 'absolute z-50 px-2 py-1 text-sm text-white bg-gray-900 rounded tooltip';
+            tooltipEl.textContent = text;
+            document.body.appendChild(tooltipEl);
+            
+            const rect = e.target.getBoundingClientRect();
+            tooltipEl.style.top = rect.bottom + 5 + 'px';
+            tooltipEl.style.left = rect.left + (rect.width - tooltipEl.offsetWidth) / 2 + 'px';
+        });
+        
+        tooltip.addEventListener('mouseleave', () => {
+            const tooltips = document.querySelectorAll('.tooltip');
+            tooltips.forEach(t => t.remove());
+        });
+    });
+});

resources/js/modules/park-map.js

@@ -0,0 +1,29 @@
+// Only declare parkMap if it doesn't exist
+window.parkMap = window.parkMap || null;
+
+function initParkMap(latitude, longitude, name) {
+    const mapContainer = document.getElementById('park-map');
+    
+    // Only initialize if container exists and map hasn't been initialized
+    if (mapContainer && !window.parkMap) {
+        const width = mapContainer.offsetWidth;
+        mapContainer.style.height = width + 'px';
+
+        window.parkMap = L.map('park-map').setView([latitude, longitude], 13);
+        
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(window.parkMap);
+
+        L.marker([latitude, longitude])
+         .addTo(window.parkMap)
+         .bindPopup(name);
+
+        // Update map size when window is resized
+        window.addEventListener('resize', function() {
+            const width = mapContainer.offsetWidth;
+            mapContainer.style.height = width + 'px';
+            window.parkMap.invalidateSize();
+        });
+    }
+}

resources/js/modules/photo-gallery.js

@@ -0,0 +1,91 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('photoDisplay', ({ photos, contentType, objectId, csrfToken, uploadUrl }) => ({
+        photos,
+        fullscreenPhoto: null,
+        uploading: false,
+        uploadProgress: 0,
+        error: null,
+        showSuccess: false,
+
+        showFullscreen(photo) {
+            this.fullscreenPhoto = photo;
+        },
+
+        async handleFileSelect(event) {
+            const files = Array.from(event.target.files);
+            if (!files.length) {
+                return;
+            }
+
+            this.uploading = true;
+            this.uploadProgress = 0;
+            this.error = null;
+            this.showSuccess = false;
+
+            const totalFiles = files.length;
+            let completedFiles = 0;
+
+            for (const file of files) {
+                const formData = new FormData();
+                formData.append('image', file);
+                formData.append('app_label', contentType.split('.')[0]);
+                formData.append('model', contentType.split('.')[1]);
+                formData.append('object_id', objectId);
+
+                try {
+                    const response = await fetch(uploadUrl, {
+                        method: 'POST',
+                        headers: {
+                            'X-CSRFToken': csrfToken,
+                        },
+                        body: formData
+                    });
+
+                    if (!response.ok) {
+                        const data = await response.json();
+                        throw new Error(data.error || 'Upload failed');
+                    }
+
+                    const photo = await response.json();
+                    this.photos.push(photo);
+                    completedFiles++;
+                    this.uploadProgress = (completedFiles / totalFiles) * 100;
+                } catch (err) {
+                    this.error = err.message || 'Failed to upload photo. Please try again.';
+                    console.error('Upload error:', err);
+                    break;
+                }
+            }
+
+            this.uploading = false;
+            event.target.value = ''; // Reset file input
+
+            if (!this.error) {
+                this.showSuccess = true;
+                setTimeout(() => {
+                    this.showSuccess = false;
+                }, 3000);
+            }
+        },
+
+        async sharePhoto(photo) {
+            if (navigator.share) {
+                try {
+                    await navigator.share({
+                        title: photo.caption || 'Shared photo',
+                        url: photo.url
+                    });
+                } catch (err) {
+                    if (err.name !== 'AbortError') {
+                        console.error('Error sharing:', err);
+                    }
+                }
+            } else {
+                // Fallback: copy URL to clipboard
+                navigator.clipboard.writeText(photo.url)
+                    .then(() => alert('Photo URL copied to clipboard!'))
+                    .catch(err => console.error('Error copying to clipboard:', err));
+            }
+        }
+    }));
+});

resources/js/modules/search.js

@@ -0,0 +1,42 @@
+function parkSearch() {
+    return {
+        query: '',
+        results: [],
+        loading: false,
+        selectedId: null,
+        
+        async search() {
+            if (!this.query.trim()) {
+                this.results = [];
+                return;
+            }
+
+            this.loading = true;
+            try {
+                const response = await fetch(`/parks/suggest_parks/?search=${encodeURIComponent(this.query)}`);
+                const data = await response.json();
+                this.results = data.results;
+            } catch (error) {
+                console.error('Search failed:', error);
+                this.results = [];
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        clear() {
+            this.query = '';
+            this.results = [];
+            this.selectedId = null;
+        },
+
+        selectPark(park) {
+            this.query = park.name;
+            this.selectedId = park.id;
+            this.results = [];
+            
+            // Trigger filter update
+            document.getElementById('park-filters').dispatchEvent(new Event('change'));
+        }
+    };
+}

resources/views/layouts/app.blade.php

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="csrf-token" content="{{ csrf_token() }}" />
+    <title>@yield('title', 'ThrillWiki')</title>
+
+    <!-- Google Fonts -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Prevent flash of wrong theme -->
+    <script>
+      let theme = localStorage.getItem("theme");
+      if (!theme) {
+        theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light";
+        localStorage.setItem("theme", theme);
+      }
+      if (theme === "dark") {
+        document.documentElement.classList.add("dark");
+      }
+    </script>
+
+    <!-- HTMX -->
+    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
+
+    <!-- Scripts and Styles (loaded via Vite) -->
+    @vite(['resources/js/app.js', 'resources/css/app.css'])
+
+    <!-- Font Awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+    />
+
+    <style>
+      .dropdown-menu {
+        position: absolute;
+        right: 0;
+        margin-top: 0.5rem;
+        width: 12rem;
+        border-radius: 0.375rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+          0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        z-index: 50;
+        overflow: hidden;
+      }
+      .htmx-indicator {
+        display: none;
+      }
+      .htmx-request .htmx-indicator {
+        display: block;
+      }
+      .htmx-request.htmx-indicator {
+        display: block;
+      }
+    </style>
+
+    @stack('styles')
+  </head>
+  <body
+    class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
+  >
+    <!-- Header -->
+    <header
+      class="sticky top-0 z-40 border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
+    >
+      <nav class="container mx-auto nav-container">
+        <div class="flex items-center justify-between">
+          <!-- Logo -->
+          <div class="flex items-center">
+            <a
+              href="{{ route('home') }}"
+              class="font-bold text-transparent transition-transform site-logo bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
+            >
+              ThrillWiki
+            </a>
+          </div>
+
+          <!-- Navigation Links (Always Visible) -->
+          <div class="flex items-center space-x-2 sm:space-x-4">
+            <a href="{{ route('parks.index') }}" class="nav-link">
+              <i class="fas fa-map-marker-alt"></i>
+              <span>Parks</span>
+            </a>
+            <a href="{{ route('rides.index') }}" class="nav-link">
+              <i class="fas fa-rocket"></i>
+              <span>Rides</span>
+            </a>
+          </div>
+
+          <!-- Search Bar -->
+          <div class="flex-1 hidden max-w-md mx-8 lg:flex">
+            <form action="{{ route('search') }}" method="get" class="w-full">
+              <div class="relative">
+                <input
+                  type="text"
+                  name="q"
+                  placeholder="Search parks and rides..."
+                  class="form-input"
+                />
+              </div>
+            </form>
+          </div>
+
+          <!-- Right Side Menu -->
+          <div class="flex items-center space-x-2 sm:space-x-6">
+            <!-- Theme Toggle -->
+            <livewire:theme-toggle-component />
+
+            <!-- User Menu -->
+            @auth
+                @if(auth()->user()->can('access-moderation'))
+                <a href="{{ route('moderation.dashboard') }}" class="nav-link">
+                    <i class="fas fa-shield-alt"></i>
+                    <span>Moderation</span>
+                </a>
+                @endif
+                <livewire:user-menu-component />
+            @else
+                <!-- Generic Profile Icon for Unauthenticated Users -->
+                <livewire:auth-menu-component />
+            @endauth
+
+            <!-- Mobile Menu -->
+            <livewire:mobile-menu-component />
+          </div>
+        </div>
+      </nav>
+    </header>
+
+    <!-- Flash Messages -->
+    @if (session('status'))
+        <div class="fixed top-0 right-0 z-50 p-4 space-y-4">
+            <div class="alert alert-success">
+                {{ session('status') }}
+            </div>
+        </div>
+    @endif
+
+    <!-- Main Content -->
+    <main class="container flex-grow px-6 py-8 mx-auto">
+        {{ $slot }}
+    </main>
+
+    <!-- Footer -->
+    <footer
+        class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
+    >
+        <div class="container px-6 py-6 mx-auto">
+            <div class="flex items-center justify-between">
+                <div class="text-gray-600 dark:text-gray-400">
+                    <p>&copy; {{ date('Y') }} ThrillWiki. All rights reserved.</p>
+                </div>
+                <div class="space-x-4">
+                    <a
+                        href="{{ route('terms') }}"
+                        class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
+                    >Terms</a>
+                    <a
+                        href="{{ route('privacy') }}"
+                        class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
+                    >Privacy</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    @stack('scripts')
+  </body>
+</html>

resources/views/livewire/auth-menu-component.blade.php

@@ -0,0 +1,34 @@
+<div class="relative">
+    <div
+        wire:click="toggle"
+        class="flex items-center justify-center w-8 h-8 text-gray-500 transition-transform rounded-full cursor-pointer hover:text-primary dark:text-gray-400 dark:hover:text-primary hover:scale-105"
+    >
+        <i class="text-xl fas fa-user"></i>
+    </div>
+
+    <!-- Auth Menu -->
+    <div
+        wire:model="isOpen"
+        class="bg-white dropdown-menu dark:bg-gray-800"
+        style="display: {{ $isOpen ? 'block' : 'none' }}"
+    >
+        <div
+            hx-get="{{ route('login') }}"
+            hx-target="body"
+            hx-swap="beforeend"
+            class="cursor-pointer menu-item"
+        >
+            <i class="w-5 fas fa-sign-in-alt"></i>
+            <span>Login</span>
+        </div>
+        <div
+            hx-get="{{ route('register') }}"
+            hx-target="body"
+            hx-swap="beforeend"
+            class="cursor-pointer menu-item"
+        >
+            <i class="w-5 fas fa-user-plus"></i>
+            <span>Register</span>
+        </div>
+    </div>
+</div>

resources/views/livewire/counter.blade.php

@@ -1,7 +1,8 @@
-<div>
-    <h1>{{ $count }}</h1>
- 
-    <button wire:click="increment">+</button>
- 
-    <button wire:click="decrement">-</button>
+<div class="flex flex-col items-center justify-center p-6 space-y-4">
+    <h1 class="text-4xl font-bold">{{ $count }}</h1>
+
+    <div class="flex space-x-4">
+        <button wire:click="increment" class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600">+</button>
+        <button wire:click="decrement" class="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-600">-</button>
+    </div>
 </div>

resources/views/livewire/mobile-menu-component.blade.php

@@ -0,0 +1,39 @@
+<div>
+    <button
+        wire:click="toggle"
+        class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
+        aria-label="Toggle mobile menu"
+        aria-expanded="{{ $isOpen }}"
+    >
+        <i class="text-2xl fas {{ $isOpen ? 'fa-times' : 'fa-bars' }}"></i>
+    </button>
+
+    <!-- Mobile Menu -->
+    <div
+        wire:model="isOpen"
+        class="absolute left-0 right-0 w-full p-4 mt-2 space-y-4 bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+        style="display: {{ $isOpen ? 'block' : 'none' }}"
+    >
+        <!-- Search (Mobile) -->
+        <form action="{{ route('search') }}" method="get" class="mb-4">
+            <input
+                type="text"
+                name="q"
+                placeholder="Search parks and rides..."
+                class="form-input"
+            />
+        </form>
+
+        <!-- Mobile Navigation Links -->
+        <nav class="space-y-2">
+            <a href="{{ route('parks.index') }}" class="block nav-link">
+                <i class="fas fa-map-marker-alt"></i>
+                <span>Parks</span>
+            </a>
+            <a href="{{ route('rides.index') }}" class="block nav-link">
+                <i class="fas fa-rocket"></i>
+                <span>Rides</span>
+            </a>
+        </nav>
+    </div>
+</div>

resources/views/livewire/theme-toggle-component.blade.php

@@ -0,0 +1,28 @@
+<label for="theme-toggle" class="cursor-pointer">
+    <input 
+        type="checkbox" 
+        id="theme-toggle" 
+        class="hidden" 
+        wire:model.live="isDark"
+        wire:change="toggleTheme"
+    >
+    <div
+        class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
+        role="button"
+        aria-label="Toggle dark mode"
+    >
+        <i class="text-xl fas {{ $isDark ? 'fa-sun' : 'fa-moon' }}"></i>
+    </div>
+</label>
+
+<script>
+    document.addEventListener('livewire:init', () => {
+        Livewire.on('theme-changed', ({ theme }) => {
+            if (theme === 'dark') {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        });
+    });
+</script>

resources/views/livewire/user-menu-component.blade.php

@@ -0,0 +1,47 @@
+<div class="relative">
+    <!-- Profile Picture Button -->
+    @if(auth()->user()->profile?->avatar)
+    <img
+        wire:click="toggle"
+        src="{{ auth()->user()->profile->avatar }}"
+        alt="{{ auth()->user()->username }}"
+        class="w-8 h-8 transition-transform rounded-full cursor-pointer ring-2 ring-primary/20 hover:scale-105"
+    />
+    @else
+    <div
+        wire:click="toggle"
+        class="flex items-center justify-center w-8 h-8 text-white transition-transform rounded-full cursor-pointer bg-gradient-to-br from-primary to-secondary hover:scale-105"
+    >
+        {{ ucfirst(auth()->user()->username[0]) }}
+    </div>
+    @endif
+
+    <!-- Dropdown Menu -->
+    <div
+        wire:model="isOpen"
+        class="bg-white dropdown-menu dark:bg-gray-800"
+        style="display: {{ $isOpen ? 'block' : 'none' }}"
+    >
+        <a href="{{ route('profile.show', auth()->user()->username) }}" class="menu-item">
+            <i class="w-5 fas fa-user"></i>
+            <span>Profile</span>
+        </a>
+        <a href="{{ route('settings') }}" class="menu-item">
+            <i class="w-5 fas fa-cog"></i>
+            <span>Settings</span>
+        </a>
+        @if(auth()->user()->can('access-admin'))
+        <a href="{{ route('admin.index') }}" class="menu-item">
+            <i class="w-5 fas fa-shield-alt"></i>
+            <span>Admin</span>
+        </a>
+        @endif
+        <form method="POST" action="{{ route('logout') }}">
+            @csrf
+            <button type="submit" class="w-full menu-item">
+                <i class="w-5 fas fa-sign-out-alt"></i>
+                <span>Logout</span>
+            </button>
+        </form>
+    </div>
+</div>