mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:11:09 -05:00
b1c369c1bb
- 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.
491 lines
20 KiB
HTML
491 lines
20 KiB
HTML
{% extends 'base/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Advanced Search - ThrillWiki{% endblock %}
|
|
|
|
{% block meta_description %}Find your perfect theme park adventure with our advanced search. Filter by location, thrill level, ride type, and more to discover exactly what you're looking for.{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Advanced Search Page -->
|
|
<div class="min-h-screen bg-gradient-to-br from-white via-blue-50/30 to-indigo-50/30 dark:from-gray-950 dark:via-indigo-950/30 dark:to-purple-950/30">
|
|
|
|
<!-- Search Header -->
|
|
<section class="py-16 bg-gradient-to-r from-thrill-primary/10 via-purple-500/10 to-pink-500/10 backdrop-blur-sm">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center max-w-4xl mx-auto">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">
|
|
<span class="bg-gradient-to-r from-thrill-primary via-purple-500 to-pink-500 bg-clip-text text-transparent">
|
|
Advanced Search
|
|
</span>
|
|
</h1>
|
|
<p class="text-xl text-neutral-600 dark:text-neutral-400 mb-8">
|
|
Find your perfect theme park adventure with precision. Use our advanced filters to discover exactly what you're looking for.
|
|
</p>
|
|
|
|
<!-- Quick Search Bar -->
|
|
<div class="relative max-w-2xl mx-auto">
|
|
<input type="text"
|
|
id="quick-search"
|
|
placeholder="Quick search: parks, rides, locations..."
|
|
class="w-full pl-16 pr-6 py-4 bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm border border-neutral-300/50 dark:border-neutral-600/50 rounded-2xl text-lg shadow-lg focus:shadow-xl focus:bg-white dark:focus:bg-neutral-800 focus:border-thrill-primary focus:ring-2 focus:ring-thrill-primary/20 transition-all duration-300"
|
|
hx-get="/search/quick/"
|
|
hx-trigger="keyup changed delay:300ms"
|
|
hx-target="#quick-results">
|
|
<div class="absolute left-6 top-1/2 transform -translate-y-1/2">
|
|
<i class="fas fa-search text-2xl text-thrill-primary"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Results -->
|
|
<div id="quick-results" class="mt-4"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Advanced Filters -->
|
|
<section class="py-12">
|
|
<div class="container mx-auto px-6">
|
|
<div class="grid lg:grid-cols-4 gap-8">
|
|
|
|
<!-- Filters Sidebar -->
|
|
<div class="lg:col-span-1">
|
|
<div class="card p-6 sticky top-24">
|
|
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
|
<i class="fas fa-filter mr-3 text-thrill-primary"></i>
|
|
Filters
|
|
</h2>
|
|
|
|
<form id="advanced-search-form"
|
|
hx-get="/search/results/"
|
|
hx-target="#search-results"
|
|
hx-trigger="change, submit"
|
|
hx-swap="innerHTML"
|
|
class="space-y-6">
|
|
|
|
<!-- Search Type Toggle -->
|
|
<div class="form-group">
|
|
<label class="form-label">Search For</label>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<label class="flex items-center p-3 border border-neutral-300 dark:border-neutral-600 rounded-lg cursor-pointer hover:bg-thrill-primary/5 transition-colors">
|
|
<input type="radio" name="search_type" value="parks" checked class="sr-only">
|
|
<div class="w-4 h-4 border-2 border-thrill-primary rounded-full mr-3 flex items-center justify-center">
|
|
<div class="w-2 h-2 bg-thrill-primary rounded-full opacity-0 transition-opacity"></div>
|
|
</div>
|
|
<i class="fas fa-map-marked-alt mr-2 text-thrill-primary"></i>
|
|
Parks
|
|
</label>
|
|
<label class="flex items-center p-3 border border-neutral-300 dark:border-neutral-600 rounded-lg cursor-pointer hover:bg-thrill-secondary/5 transition-colors">
|
|
<input type="radio" name="search_type" value="rides" class="sr-only">
|
|
<div class="w-4 h-4 border-2 border-thrill-secondary rounded-full mr-3 flex items-center justify-center">
|
|
<div class="w-2 h-2 bg-thrill-secondary rounded-full opacity-0 transition-opacity"></div>
|
|
</div>
|
|
<i class="fas fa-rocket mr-2 text-thrill-secondary"></i>
|
|
Rides
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Filters -->
|
|
<div class="form-group">
|
|
<label class="form-label">Location</label>
|
|
<div class="space-y-3">
|
|
<select name="country" class="form-select">
|
|
<option value="">Any Country</option>
|
|
<option value="US">United States</option>
|
|
<option value="CA">Canada</option>
|
|
<option value="GB">United Kingdom</option>
|
|
<option value="DE">Germany</option>
|
|
<option value="FR">France</option>
|
|
<option value="JP">Japan</option>
|
|
<option value="CN">China</option>
|
|
</select>
|
|
|
|
<select name="region" class="form-select">
|
|
<option value="">Any State/Region</option>
|
|
</select>
|
|
|
|
<input type="text" name="city" placeholder="City" class="form-input">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Park-Specific Filters -->
|
|
<div id="park-filters" class="space-y-6">
|
|
<div class="form-group">
|
|
<label class="form-label">Park Type</label>
|
|
<select name="park_type" class="form-select">
|
|
<option value="">Any Type</option>
|
|
<option value="THEME_PARK">Theme Park</option>
|
|
<option value="AMUSEMENT_PARK">Amusement Park</option>
|
|
<option value="WATER_PARK">Water Park</option>
|
|
<option value="FAMILY_ENTERTAINMENT">Family Entertainment</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Park Status</label>
|
|
<div class="space-y-2">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="status" value="OPERATING" checked class="sr-only">
|
|
<div class="checkbox-custom mr-3"></div>
|
|
<span class="badge-operating">Operating</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="status" value="CONSTRUCTION" class="sr-only">
|
|
<div class="checkbox-custom mr-3"></div>
|
|
<span class="badge-construction">Under Construction</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Minimum Rides</label>
|
|
<input type="range" name="min_rides" min="0" max="100" value="0" class="w-full">
|
|
<div class="flex justify-between text-sm text-neutral-500 mt-1">
|
|
<span>0</span>
|
|
<span id="min-rides-value">0</span>
|
|
<span>100+</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ride-Specific Filters -->
|
|
<div id="ride-filters" class="space-y-6 hidden">
|
|
<div class="form-group">
|
|
<label class="form-label">Thrill Level</label>
|
|
<div class="space-y-2">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="thrill_level" value="MILD" class="sr-only">
|
|
<div class="checkbox-custom mr-3"></div>
|
|
<span class="badge bg-green-500/10 text-green-600 border-green-500/20">
|
|
<i class="fas fa-leaf mr-1"></i>
|
|
Family Friendly
|
|
</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="thrill_level" value="MODERATE" class="sr-only">
|
|
<div class="checkbox-custom mr-3"></div>
|
|
<span class="badge bg-yellow-500/10 text-yellow-600 border-yellow-500/20">
|
|
<i class="fas fa-star mr-1"></i>
|
|
Moderate
|
|
</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="thrill_level" value="HIGH" class="sr-only">
|
|
<div class="checkbox-custom mr-3"></div>
|
|
<span class="badge bg-orange-500/10 text-orange-600 border-orange-500/20">
|
|
<i class="fas fa-bolt mr-1"></i>
|
|
High Thrill
|
|
</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input type="checkbox" name="thrill_level" value="EXTREME" class="sr-only">
|
|
<div class="checkbox-custom mr-3"></div>
|
|
<span class="badge bg-red-500/10 text-red-600 border-red-500/20">
|
|
<i class="fas fa-fire mr-1"></i>
|
|
Extreme
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Ride Category</label>
|
|
<select name="category" class="form-select">
|
|
<option value="">Any Category</option>
|
|
<option value="ROLLER_COASTER">Roller Coaster</option>
|
|
<option value="WATER_RIDE">Water Ride</option>
|
|
<option value="DARK_RIDE">Dark Ride</option>
|
|
<option value="FLAT_RIDE">Flat Ride</option>
|
|
<option value="KIDDIE_RIDE">Kids Ride</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Minimum Height (ft)</label>
|
|
<input type="range" name="min_height" min="0" max="500" value="0" class="w-full">
|
|
<div class="flex justify-between text-sm text-neutral-500 mt-1">
|
|
<span>0ft</span>
|
|
<span id="min-height-value">0ft</span>
|
|
<span>500ft+</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Minimum Speed (mph)</label>
|
|
<input type="range" name="min_speed" min="0" max="150" value="0" class="w-full">
|
|
<div class="flex justify-between text-sm text-neutral-500 mt-1">
|
|
<span>0mph</span>
|
|
<span id="min-speed-value">0mph</span>
|
|
<span>150mph+</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sort Options -->
|
|
<div class="form-group">
|
|
<label class="form-label">Sort By</label>
|
|
<select name="sort" class="form-select">
|
|
<option value="relevance">Relevance</option>
|
|
<option value="name">Name (A-Z)</option>
|
|
<option value="-name">Name (Z-A)</option>
|
|
<option value="rating">Rating (Low to High)</option>
|
|
<option value="-rating">Rating (High to Low)</option>
|
|
<option value="opened_date">Oldest First</option>
|
|
<option value="-opened_date">Newest First</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Clear Filters -->
|
|
<button type="button"
|
|
id="clear-filters"
|
|
class="btn-ghost w-full">
|
|
<i class="fas fa-times mr-2"></i>
|
|
Clear All Filters
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results -->
|
|
<div class="lg:col-span-3">
|
|
<!-- Results Header -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-2xl font-bold">Search Results</h2>
|
|
<p class="text-neutral-600 dark:text-neutral-400" id="results-count">
|
|
Use filters to find your perfect adventure
|
|
</p>
|
|
</div>
|
|
|
|
<!-- View Toggle -->
|
|
<div class="flex items-center space-x-2 bg-white dark:bg-neutral-800 rounded-lg p-1 border border-neutral-200 dark:border-neutral-700">
|
|
<button class="p-2 rounded-md bg-thrill-primary text-white" id="grid-view">
|
|
<i class="fas fa-th-large"></i>
|
|
</button>
|
|
<button class="p-2 rounded-md text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700" id="list-view">
|
|
<i class="fas fa-list"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results Container -->
|
|
<div id="search-results" class="min-h-96">
|
|
<!-- Initial State -->
|
|
<div class="text-center py-16">
|
|
<div class="w-24 h-24 bg-gradient-to-r from-thrill-primary to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-search text-3xl text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4">Ready to Explore?</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-400 max-w-md mx-auto">
|
|
Use the filters on the left to discover amazing theme parks and thrilling rides that match your preferences.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load More Button -->
|
|
<div id="load-more-container" class="text-center mt-8 hidden">
|
|
<button class="btn-secondary btn-lg"
|
|
hx-get="/search/results/"
|
|
hx-target="#search-results"
|
|
hx-swap="beforeend">
|
|
<i class="fas fa-plus mr-2"></i>
|
|
Load More Results
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Enhanced JavaScript for Advanced Search -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Search type toggle functionality
|
|
const searchTypeRadios = document.querySelectorAll('input[name="search_type"]');
|
|
const parkFilters = document.getElementById('park-filters');
|
|
const rideFilters = document.getElementById('ride-filters');
|
|
|
|
searchTypeRadios.forEach(radio => {
|
|
radio.addEventListener('change', function() {
|
|
if (this.value === 'parks') {
|
|
parkFilters.classList.remove('hidden');
|
|
rideFilters.classList.add('hidden');
|
|
} else {
|
|
parkFilters.classList.add('hidden');
|
|
rideFilters.classList.remove('hidden');
|
|
}
|
|
|
|
// Update radio button visual state
|
|
searchTypeRadios.forEach(r => {
|
|
const indicator = r.parentElement.querySelector('div div');
|
|
if (r.checked) {
|
|
indicator.classList.remove('opacity-0');
|
|
indicator.classList.add('opacity-100');
|
|
} else {
|
|
indicator.classList.remove('opacity-100');
|
|
indicator.classList.add('opacity-0');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Range slider updates
|
|
const rangeInputs = document.querySelectorAll('input[type="range"]');
|
|
rangeInputs.forEach(input => {
|
|
const updateValue = () => {
|
|
const valueSpan = document.getElementById(input.name + '-value');
|
|
if (valueSpan) {
|
|
let value = input.value;
|
|
if (input.name.includes('height')) value += 'ft';
|
|
if (input.name.includes('speed')) value += 'mph';
|
|
valueSpan.textContent = value;
|
|
}
|
|
};
|
|
|
|
input.addEventListener('input', updateValue);
|
|
updateValue(); // Initial update
|
|
});
|
|
|
|
// Checkbox styling
|
|
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
|
|
checkboxes.forEach(checkbox => {
|
|
const customCheckbox = checkbox.parentElement.querySelector('.checkbox-custom');
|
|
if (customCheckbox) {
|
|
checkbox.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
customCheckbox.classList.add('checked');
|
|
} else {
|
|
customCheckbox.classList.remove('checked');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Clear filters functionality
|
|
document.getElementById('clear-filters').addEventListener('click', function() {
|
|
const form = document.getElementById('advanced-search-form');
|
|
form.reset();
|
|
|
|
// Reset visual states
|
|
searchTypeRadios[0].checked = true;
|
|
searchTypeRadios[0].dispatchEvent(new Event('change'));
|
|
|
|
rangeInputs.forEach(input => {
|
|
input.value = input.min;
|
|
input.dispatchEvent(new Event('input'));
|
|
});
|
|
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.checked = false;
|
|
const customCheckbox = checkbox.parentElement.querySelector('.checkbox-custom');
|
|
if (customCheckbox) {
|
|
customCheckbox.classList.remove('checked');
|
|
}
|
|
});
|
|
|
|
// Clear results
|
|
document.getElementById('search-results').innerHTML = `
|
|
<div class="text-center py-16">
|
|
<div class="w-24 h-24 bg-gradient-to-r from-thrill-primary to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-search text-3xl text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4">Ready to Explore?</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-400 max-w-md mx-auto">
|
|
Use the filters on the left to discover amazing theme parks and thrilling rides that match your preferences.
|
|
</p>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
// View toggle functionality
|
|
const gridViewBtn = document.getElementById('grid-view');
|
|
const listViewBtn = document.getElementById('list-view');
|
|
|
|
gridViewBtn.addEventListener('click', function() {
|
|
this.classList.add('bg-thrill-primary', 'text-white');
|
|
this.classList.remove('text-neutral-600', 'dark:text-neutral-400');
|
|
listViewBtn.classList.remove('bg-thrill-primary', 'text-white');
|
|
listViewBtn.classList.add('text-neutral-600', 'dark:text-neutral-400');
|
|
|
|
// Update results view
|
|
const resultsContainer = document.getElementById('search-results');
|
|
resultsContainer.classList.remove('list-view');
|
|
resultsContainer.classList.add('grid-view');
|
|
});
|
|
|
|
listViewBtn.addEventListener('click', function() {
|
|
this.classList.add('bg-thrill-primary', 'text-white');
|
|
this.classList.remove('text-neutral-600', 'dark:text-neutral-400');
|
|
gridViewBtn.classList.remove('bg-thrill-primary', 'text-white');
|
|
gridViewBtn.classList.add('text-neutral-600', 'dark:text-neutral-400');
|
|
|
|
// Update results view
|
|
const resultsContainer = document.getElementById('search-results');
|
|
resultsContainer.classList.remove('grid-view');
|
|
resultsContainer.classList.add('list-view');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Custom CSS for checkboxes and enhanced styling -->
|
|
<style>
|
|
.checkbox-custom {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 2px solid #cbd5e1;
|
|
border-radius: 0.25rem;
|
|
position: relative;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.checkbox-custom.checked {
|
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.checkbox-custom.checked::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.grid-view .search-results-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.list-view .search-results-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.list-view .card-park,
|
|
.list-view .card-ride {
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-width: none;
|
|
}
|
|
|
|
.list-view .card-park-image,
|
|
.list-view .card-ride-image {
|
|
width: 200px;
|
|
height: 150px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.list-view .card-park-content,
|
|
.list-view .card-ride-content {
|
|
flex: 1;
|
|
padding: 1.5rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|