mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 12:11:09 -05:00
b9063ff4f8
- Implemented park detail page with dynamic content loading for rides and weather. - Created park list page with filters and search functionality. - Developed ride detail page showcasing ride stats, reviews, and similar rides. - Added ride list page with filtering options and dynamic loading. - Introduced search results page with tabs for parks, rides, and users. - Added HTMX tests for global search functionality.
176 lines
9.0 KiB
HTML
176 lines
9.0 KiB
HTML
{% extends "base/htmx-base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}ThrillWiki - Your Ultimate Theme Park & Ride Database{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.hero-pattern {
|
|
background-color: var(--color-background);
|
|
background-image: radial-gradient(var(--color-primary-100) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
}
|
|
.dark .hero-pattern {
|
|
background-image: radial-gradient(var(--color-primary-900) 1px, transparent 1px);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block main %}
|
|
<div class="flex flex-col min-h-screen">
|
|
<!-- Hero Section -->
|
|
<section class="relative py-20 overflow-hidden hero-pattern lg:py-32">
|
|
<div class="container relative z-10 mx-auto text-center">
|
|
<h1 class="mb-6 text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
|
|
Discover Your Next <br class="hidden sm:inline">
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-600">Adrenaline Rush</span>
|
|
</h1>
|
|
<p class="max-w-2xl mx-auto mb-10 text-lg text-muted-foreground sm:text-xl">
|
|
The most comprehensive database of theme parks and roller coasters.
|
|
Track your credits, rate rides, and join the community.
|
|
</p>
|
|
|
|
<!-- Search Bar -->
|
|
<div class="max-w-2xl mx-auto mb-12" x-data="{ query: '', results: [] }">
|
|
<div class="relative group">
|
|
<div class="absolute inset-0 transition duration-200 rounded-lg opacity-25 bg-gradient-to-r from-primary-500 to-secondary-500 blur group-hover:opacity-50"></div>
|
|
<div class="relative rounded-lg shadow-xl bg-background">
|
|
<div class="flex items-center px-4 py-3">
|
|
<svg class="w-6 h-6 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<input type="text"
|
|
x-model="query"
|
|
@focus="$store.search.open()"
|
|
placeholder="Search parks, rides, or locations..."
|
|
class="w-full px-4 py-2 text-lg bg-transparent border-none focus:ring-0 placeholder:text-muted-foreground text-foreground">
|
|
<div class="hidden sm:flex text-xs text-muted-foreground border border-border rounded px-1.5 py-0.5">
|
|
<span class="text-xs">⌘</span>K
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center gap-4 mt-4 text-sm text-muted-foreground">
|
|
<span>Popular:</span>
|
|
<button class="transition-colors hover:text-primary">Cedar Point</button>
|
|
<button class="transition-colors hover:text-primary">Six Flags</button>
|
|
<button class="transition-colors hover:text-primary">Disney World</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-center gap-4 sm:flex-row">
|
|
{% include "components/ui/button.html" with label="Explore Parks" href="/parks/" size="lg" %}
|
|
{% include "components/ui/button.html" with label="Browse Rides" href="/rides/" variant="outline" size="lg" %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="py-12 border-y border-border bg-muted/50">
|
|
<div class="container mx-auto">
|
|
<div class="grid grid-cols-2 gap-8 text-center md:grid-cols-4">
|
|
<div class="space-y-2">
|
|
<dt class="text-3xl font-bold text-foreground">2,500+</dt>
|
|
<dd class="text-sm font-medium tracking-wide uppercase text-muted-foreground">Parks</dd>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<dt class="text-3xl font-bold text-foreground">12,000+</dt>
|
|
<dd class="text-sm font-medium tracking-wide uppercase text-muted-foreground">Rides</dd>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<dt class="text-3xl font-bold text-foreground">50k+</dt>
|
|
<dd class="text-sm font-medium tracking-wide uppercase text-muted-foreground">Reviews</dd>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<dt class="text-3xl font-bold text-foreground">150k+</dt>
|
|
<dd class="text-sm font-medium tracking-wide uppercase text-muted-foreground">Photos</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Parks -->
|
|
<section class="py-20">
|
|
<div class="container mx-auto">
|
|
<div class="flex items-center justify-between mb-10">
|
|
<div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-foreground">Featured Parks</h2>
|
|
<p class="mt-2 text-muted-foreground">Top rated destinations from around the world.</p>
|
|
</div>
|
|
<a href="{% url 'parks:park_list' %}" class="items-center hidden font-medium sm:flex text-primary hover:text-primary/80">
|
|
View all parks <span class="ml-1">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
|
|
hx-get="{% url 'api:parks-featured' %}"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML">
|
|
<!-- Loading Skeleton -->
|
|
{% for i in "123"|make_list %}
|
|
<div class="rounded-lg border bg-card text-card-foreground shadow-sm h-[400px]">
|
|
<div class="p-6 space-y-4">
|
|
<div class="w-full h-48 rounded bg-muted animate-pulse"></div>
|
|
<div class="space-y-2">
|
|
<div class="w-2/3 h-4 rounded bg-muted animate-pulse"></div>
|
|
<div class="w-1/2 h-4 rounded bg-muted animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="mt-8 text-center sm:hidden">
|
|
{% include "components/ui/button.html" with label="View all parks" href="/parks/" variant="outline" class="w-full" %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Latest Reviews -->
|
|
<section class="py-20 bg-muted/30">
|
|
<div class="container mx-auto">
|
|
<div class="flex items-center justify-between mb-10">
|
|
<div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-foreground">Community Pulse</h2>
|
|
<p class="mt-2 text-muted-foreground">Recent activity and reviews from our community.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
|
|
hx-get="{% url 'api:reviews-recent' %}"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML">
|
|
<!-- Loading Skeleton -->
|
|
{% for i in "123"|make_list %}
|
|
<div class="p-6 border rounded-lg shadow-sm bg-card text-card-foreground">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-muted animate-pulse"></div>
|
|
<div class="flex-1 space-y-2">
|
|
<div class="w-1/3 h-4 rounded bg-muted animate-pulse"></div>
|
|
<div class="w-1/4 h-3 rounded bg-muted animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<div class="w-full h-4 rounded bg-muted animate-pulse"></div>
|
|
<div class="w-5/6 h-4 rounded bg-muted animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="relative py-24 overflow-hidden bg-primary text-primary-foreground">
|
|
<div class="absolute inset-0 bg-[url('/static/images/pattern.svg')] opacity-10"></div>
|
|
<div class="container relative z-10 mx-auto text-center">
|
|
<h2 class="mb-6 text-3xl font-bold sm:text-4xl">Ready to track your rides?</h2>
|
|
<p class="max-w-2xl mx-auto mb-10 text-lg text-primary-foreground/80">
|
|
Create a free account to log your coasters, rate parks, upload photos, and join the discussion.
|
|
</p>
|
|
{% include "components/ui/button.html" with label="Get Started for Free" href="/accounts/signup/" variant="secondary" size="lg" %}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{% endblock main %}
|