mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 03:51: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.
380 lines
16 KiB
HTML
380 lines
16 KiB
HTML
{% extends 'base/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}ThrillWiki - Your Ultimate Theme Park Adventure Guide{% endblock %}
|
|
|
|
{% block meta_description %}Discover the world's most thrilling theme parks and attractions. Explore detailed guides, stunning photos, and insider tips for your next adventure at Disney, Universal, Cedar Point, and beyond.{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section - Absolutely Stunning -->
|
|
<section class="hero relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
<!-- Animated Background Elements -->
|
|
<div class="absolute inset-0 opacity-10 dark:opacity-5">
|
|
<div class="absolute top-20 left-10 w-32 h-32 bg-thrill-primary rounded-full blur-3xl animate-pulse"></div>
|
|
<div class="absolute top-40 right-20 w-48 h-48 bg-thrill-secondary rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
|
|
<div class="absolute bottom-32 left-1/4 w-40 h-40 bg-purple-500 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
|
|
<div class="absolute bottom-20 right-1/3 w-36 h-36 bg-pink-500 rounded-full blur-3xl animate-pulse" style="animation-delay: 0.5s;"></div>
|
|
</div>
|
|
|
|
<!-- Main Hero Content -->
|
|
<div class="hero-content container mx-auto px-6 relative z-10">
|
|
<!-- Hero Badge -->
|
|
<div class="flex justify-center mb-8">
|
|
<div class="badge badge-info badge-lg pulse-glow">
|
|
<i class="fas fa-rocket mr-2"></i>
|
|
World's #1 Theme Park Guide
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Title with Stunning Typography -->
|
|
<h1 class="hero-title slide-in-up">
|
|
Discover Your Next
|
|
<span class="block">Thrilling Adventure</span>
|
|
</h1>
|
|
|
|
<!-- Hero Subtitle -->
|
|
<p class="hero-subtitle slide-in-up" style="animation-delay: 0.2s;">
|
|
Explore the world's most incredible theme parks, from heart-pounding roller coasters to magical experiences.
|
|
Your ultimate adventure starts here with insider guides, stunning visuals, and expert recommendations.
|
|
</p>
|
|
|
|
<!-- Hero CTA Buttons -->
|
|
<div class="hero-cta slide-in-up" style="animation-delay: 0.4s;">
|
|
<button class="btn-primary btn-lg hover-lift"
|
|
hx-get="/parks/"
|
|
hx-target="#main-content"
|
|
hx-swap="innerHTML transition:true">
|
|
<i class="fas fa-map-marked-alt mr-3"></i>
|
|
Explore Parks
|
|
</button>
|
|
<button class="btn-secondary btn-lg hover-lift">
|
|
<i class="fas fa-play mr-3"></i>
|
|
Watch Adventure
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Hero Stats -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16 slide-in-up" style="animation-delay: 0.6s;">
|
|
<div class="text-center">
|
|
<div class="text-3xl md:text-4xl font-bold text-thrill-primary mb-2">500+</div>
|
|
<div class="text-neutral-600 dark:text-neutral-400">Theme Parks</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl md:text-4xl font-bold text-thrill-secondary mb-2">2,000+</div>
|
|
<div class="text-neutral-600 dark:text-neutral-400">Thrilling Rides</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl md:text-4xl font-bold text-thrill-success mb-2">50K+</div>
|
|
<div class="text-neutral-600 dark:text-neutral-400">Happy Visitors</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl md:text-4xl font-bold text-purple-500 mb-2">100+</div>
|
|
<div class="text-neutral-600 dark:text-neutral-400">Countries</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll Indicator -->
|
|
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
|
|
<div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
|
|
<div class="w-1 h-3 bg-white/50 rounded-full mt-2 animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Parks Section -->
|
|
<section class="py-24 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
|
|
<div class="container mx-auto px-6">
|
|
<!-- Section Header -->
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
|
<span class="bg-gradient-to-r from-thrill-primary to-thrill-secondary bg-clip-text text-transparent">
|
|
Featured Destinations
|
|
</span>
|
|
</h2>
|
|
<p class="text-xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
|
|
Discover the world's most incredible theme parks, each offering unique thrills and unforgettable memories
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Featured Parks Grid -->
|
|
<div class="grid-auto-fit-lg"
|
|
hx-get="/api/parks/featured/"
|
|
hx-trigger="revealed"
|
|
hx-swap="innerHTML">
|
|
<!-- Loading Skeletons -->
|
|
<div class="card hover-lift">
|
|
<div class="loading-skeleton aspect-video rounded-t-2xl"></div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="loading-skeleton h-6 w-3/4 rounded"></div>
|
|
<div class="loading-skeleton h-4 w-full rounded"></div>
|
|
<div class="loading-skeleton h-4 w-2/3 rounded"></div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="loading-skeleton h-6 w-20 rounded-full"></div>
|
|
<div class="loading-skeleton h-8 w-24 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hover-lift">
|
|
<div class="loading-skeleton aspect-video rounded-t-2xl"></div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="loading-skeleton h-6 w-3/4 rounded"></div>
|
|
<div class="loading-skeleton h-4 w-full rounded"></div>
|
|
<div class="loading-skeleton h-4 w-2/3 rounded"></div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="loading-skeleton h-6 w-20 rounded-full"></div>
|
|
<div class="loading-skeleton h-8 w-24 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hover-lift">
|
|
<div class="loading-skeleton aspect-video rounded-t-2xl"></div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="loading-skeleton h-6 w-3/4 rounded"></div>
|
|
<div class="loading-skeleton h-4 w-full rounded"></div>
|
|
<div class="loading-skeleton h-4 w-2/3 rounded"></div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="loading-skeleton h-6 w-20 rounded-full"></div>
|
|
<div class="loading-skeleton h-8 w-24 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Trending Rides Section -->
|
|
<section class="py-24">
|
|
<div class="container mx-auto px-6">
|
|
<!-- Section Header -->
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
|
<span class="bg-gradient-to-r from-thrill-secondary to-red-500 bg-clip-text text-transparent">
|
|
Trending Thrills
|
|
</span>
|
|
</h2>
|
|
<p class="text-xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
|
|
The hottest rides everyone's talking about - from record-breaking coasters to innovative attractions
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Trending Rides Carousel -->
|
|
<div class="relative">
|
|
<div class="grid-auto-fit-md"
|
|
hx-get="/api/rides/trending/"
|
|
hx-trigger="revealed"
|
|
hx-swap="innerHTML">
|
|
<!-- Loading Skeletons for Rides -->
|
|
<div class="card-ride hover-lift">
|
|
<div class="loading-skeleton aspect-square rounded-t-2xl"></div>
|
|
<div class="p-4 space-y-3">
|
|
<div class="loading-skeleton h-5 w-3/4 rounded"></div>
|
|
<div class="loading-skeleton h-4 w-full rounded"></div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="loading-skeleton h-5 w-16 rounded-full"></div>
|
|
<div class="loading-skeleton h-6 w-20 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-ride hover-lift">
|
|
<div class="loading-skeleton aspect-square rounded-t-2xl"></div>
|
|
<div class="p-4 space-y-3">
|
|
<div class="loading-skeleton h-5 w-3/4 rounded"></div>
|
|
<div class="loading-skeleton h-4 w-full rounded"></div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="loading-skeleton h-5 w-16 rounded-full"></div>
|
|
<div class="loading-skeleton h-6 w-20 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-ride hover-lift">
|
|
<div class="loading-skeleton aspect-square rounded-t-2xl"></div>
|
|
<div class="p-4 space-y-3">
|
|
<div class="loading-skeleton h-5 w-3/4 rounded"></div>
|
|
<div class="loading-skeleton h-4 w-full rounded"></div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="loading-skeleton h-5 w-16 rounded-full"></div>
|
|
<div class="loading-skeleton h-6 w-20 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-ride hover-lift">
|
|
<div class="loading-skeleton aspect-square rounded-t-2xl"></div>
|
|
<div class="p-4 space-y-3">
|
|
<div class="loading-skeleton h-5 w-3/4 rounded"></div>
|
|
<div class="loading-skeleton h-4 w-full rounded"></div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="loading-skeleton h-5 w-16 rounded-full"></div>
|
|
<div class="loading-skeleton h-6 w-20 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="py-24 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
|
|
<div class="container mx-auto px-6">
|
|
<!-- Section Header -->
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
|
<span class="bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
|
|
Why Choose ThrillWiki?
|
|
</span>
|
|
</h2>
|
|
<p class="text-xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
|
|
We're more than just a guide - we're your adventure companion
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Features Grid -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Feature 1 -->
|
|
<div class="card-feature hover-lift text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-thrill-primary to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-map-marked-alt text-2xl text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4">Comprehensive Guides</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-400">
|
|
Detailed information on every park, ride, and attraction with insider tips and expert recommendations.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="card-feature hover-lift text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-thrill-secondary to-red-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-camera text-2xl text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4">Stunning Visuals</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-400">
|
|
High-quality photos and videos that bring the magic to life before you even arrive.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="card-feature hover-lift text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-thrill-success to-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-users text-2xl text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4">Community Driven</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-400">
|
|
Real reviews and experiences from fellow thrill-seekers and theme park enthusiasts.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="card-feature hover-lift text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-rose-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-mobile-alt text-2xl text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4">Mobile Optimized</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-400">
|
|
Perfect experience on any device, from planning at home to navigating in the park.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature 5 -->
|
|
<div class="card-feature hover-lift text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-indigo-500 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-clock text-2xl text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4">Real-Time Updates</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-400">
|
|
Live wait times, operating hours, and park status to help you make the most of your visit.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div class="card-feature hover-lift text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<i class="fas fa-star text-2xl text-white"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4">Expert Reviews</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-400">
|
|
Professional insights and ratings from theme park experts and industry professionals.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Call to Action Section -->
|
|
<section class="py-24 relative overflow-hidden">
|
|
<!-- Background Gradient -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-thrill-primary via-purple-600 to-pink-600"></div>
|
|
<div class="absolute inset-0 bg-black/20"></div>
|
|
|
|
<!-- Content -->
|
|
<div class="container mx-auto px-6 relative z-10 text-center text-white">
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-6">
|
|
Ready for Your Next Adventure?
|
|
</h2>
|
|
<p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto opacity-90">
|
|
Join thousands of thrill-seekers who trust ThrillWiki to plan their perfect theme park adventures
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
|
|
<button class="btn-secondary btn-lg bg-white text-thrill-primary hover:bg-white/90 hover-lift">
|
|
<i class="fas fa-user-plus mr-3"></i>
|
|
Join the Community
|
|
</button>
|
|
<button class="btn-ghost btn-lg text-white border-white/30 hover:bg-white/10 hover-lift">
|
|
<i class="fas fa-compass mr-3"></i>
|
|
Start Exploring
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Enhanced JavaScript for Interactions -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Enable HTMX view transitions globally
|
|
htmx.config.globalViewTransitions = true;
|
|
|
|
// Add staggered animations to elements
|
|
const animatedElements = document.querySelectorAll('.slide-in-up');
|
|
animatedElements.forEach((el, index) => {
|
|
el.style.animationDelay = `${index * 0.1}s`;
|
|
});
|
|
|
|
// Parallax effect for hero background elements
|
|
window.addEventListener('scroll', () => {
|
|
const scrolled = window.pageYOffset;
|
|
const parallaxElements = document.querySelectorAll('.hero .absolute');
|
|
|
|
parallaxElements.forEach((el, index) => {
|
|
const speed = 0.5 + (index * 0.1);
|
|
el.style.transform = `translateY(${scrolled * speed}px)`;
|
|
});
|
|
});
|
|
|
|
// Intersection Observer for reveal animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('fade-in');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all cards for reveal animations
|
|
document.querySelectorAll('.card, .card-feature, .card-park, .card-ride').forEach(card => {
|
|
observer.observe(card);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|