mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-22 16:51:09 -05:00
feat: Add detailed park and ride pages with HTMX integration
- 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.
This commit is contained in:
pacnpal
78
templates/pages/auth/login.html
Normal file
78
templates/pages/auth/login.html
Normal file
@@ -0,0 +1,78 @@
|
||||
{% extends "components/ui/dialog.html" %}
|
||||
|
||||
{% block dialog_content %}
|
||||
<div class="space-y-6">
|
||||
<div class="flex flex-col space-y-2 text-center">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Welcome back</h1>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Enter your credentials to sign in to your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="space-y-4"
|
||||
hx-post="{% url 'account_login' %}"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#login-form-container">
|
||||
{% csrf_token %}
|
||||
|
||||
<div id="login-form-container" class="space-y-4">
|
||||
{% if form.non_field_errors %}
|
||||
<div class="p-3 text-sm rounded-md text-destructive bg-destructive/10">
|
||||
{{ form.non_field_errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="{{ form.login.id_for_label }}" class="text-sm font-medium">
|
||||
Email or Username
|
||||
</label>
|
||||
{% include "components/ui/form/input.html" with field=form.login placeholder="name@example.com" %}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="{{ form.password.id_for_label }}" class="text-sm font-medium">
|
||||
Password
|
||||
</label>
|
||||
<a href="{% url 'account_reset_password' %}" class="text-sm font-medium text-primary hover:underline">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
{% include "components/ui/form/input.html" with field=form.password type="password" %}
|
||||
</div>
|
||||
|
||||
{% if form.remember %}
|
||||
<div class="flex items-center space-x-2">
|
||||
{% include "components/ui/form/checkbox.html" with field=form.remember label="Remember me" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include "components/ui/button.html" with type="submit" label="Sign In" class="w-full" %}
|
||||
</form>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<span class="w-full border-t"></span>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="px-2 bg-background text-muted-foreground">
|
||||
Or continue with
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{% include "components/ui/button.html" with variant="outline" icon='<svg class="w-4 h-4 mr-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>' label="Github" %}
|
||||
{% include "components/ui/button.html" with variant="outline" icon='<svg class="w-4 h-4 mr-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path></svg>' label="Google" %}
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-center text-muted-foreground">
|
||||
Don't have an account?
|
||||
<a href="{% url 'account_signup' %}" class="underline underline-offset-4 hover:text-primary">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
81
templates/pages/auth/signup.html
Normal file
81
templates/pages/auth/signup.html
Normal file
@@ -0,0 +1,81 @@
|
||||
{% extends "components/ui/dialog.html" %}
|
||||
|
||||
{% block dialog_content %}
|
||||
<div class="space-y-6">
|
||||
<div class="flex flex-col space-y-2 text-center">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Enter your email below to create your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="space-y-4"
|
||||
hx-post="{% url 'account_signup' %}"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#signup-form-container">
|
||||
{% csrf_token %}
|
||||
|
||||
<div id="signup-form-container" class="space-y-4">
|
||||
{% if form.non_field_errors %}
|
||||
<div class="p-3 text-sm rounded-md text-destructive bg-destructive/10">
|
||||
{{ form.non_field_errors.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="{{ form.email.id_for_label }}" class="text-sm font-medium">
|
||||
Email
|
||||
</label>
|
||||
{% include "components/ui/form/input.html" with field=form.email placeholder="name@example.com" %}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="{{ form.username.id_for_label }}" class="text-sm font-medium">
|
||||
Username
|
||||
</label>
|
||||
{% include "components/ui/form/input.html" with field=form.username placeholder="username" %}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="{{ form.password.id_for_label }}" class="text-sm font-medium">
|
||||
Password
|
||||
</label>
|
||||
{% include "components/ui/form/input.html" with field=form.password type="password" %}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="{{ form.password_confirm.id_for_label }}" class="text-sm font-medium">
|
||||
Confirm Password
|
||||
</label>
|
||||
{% include "components/ui/form/input.html" with field=form.password_confirm type="password" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "components/ui/button.html" with type="submit" label="Sign Up" class="w-full" %}
|
||||
</form>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<span class="w-full border-t"></span>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="px-2 bg-background text-muted-foreground">
|
||||
Or continue with
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{% include "components/ui/button.html" with variant="outline" icon='<svg class="w-4 h-4 mr-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>' label="Github" %}
|
||||
{% include "components/ui/button.html" with variant="outline" icon='<svg class="w-4 h-4 mr-2" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path></svg>' label="Google" %}
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-center text-muted-foreground">
|
||||
Already have an account?
|
||||
<a href="{% url 'account_login' %}" class="underline underline-offset-4 hover:text-primary">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
175
templates/pages/home/homepage.html
Normal file
175
templates/pages/home/homepage.html
Normal file
@@ -0,0 +1,175 @@
|
||||
{% 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 %}
|
||||
159
templates/pages/parks/detail.html
Normal file
159
templates/pages/parks/detail.html
Normal file
@@ -0,0 +1,159 @@
|
||||
{% extends "base/htmx-base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{{ park.name }} - ThrillWiki{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="container py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<nav class="flex mb-6 text-sm text-muted-foreground">
|
||||
<a href="{% url 'home' %}" class="hover:text-foreground">Home</a>
|
||||
<span class="mx-2">/</span>
|
||||
<a href="{% url 'parks:park_list' %}" class="hover:text-foreground">Parks</a>
|
||||
<span class="mx-2">/</span>
|
||||
<span class="text-foreground">{{ park.name }}</span>
|
||||
</nav>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||
<!-- Main Content -->
|
||||
<div class="space-y-8 lg:col-span-2">
|
||||
<!-- Park Header -->
|
||||
<div class="relative overflow-hidden border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="relative aspect-video">
|
||||
{% if park.image %}
|
||||
<img src="{{ park.image.url }}" alt="{{ park.name }}" class="object-cover w-full h-full">
|
||||
{% else %}
|
||||
<div class="flex items-center justify-center w-full h-full bg-muted">
|
||||
<span class="text-muted-foreground">No image available</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div class="absolute text-white bottom-6 left-6">
|
||||
<h1 class="mb-2 text-4xl font-bold">{{ park.name }}</h1>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
{{ park.location.city }}, {{ park.location.country }}
|
||||
</span>
|
||||
<span class="px-2 py-0.5 rounded-full bg-white/20 backdrop-blur-sm border border-white/20">
|
||||
{{ park.get_status_display }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex flex-col items-center p-3 rounded-lg bg-muted/50">
|
||||
<span class="text-2xl font-bold">{{ park.average_rating|default:"-" }}</span>
|
||||
<span class="text-xs text-muted-foreground">Rating</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-3 rounded-lg bg-muted/50">
|
||||
<span class="text-2xl font-bold">{{ park.rides.count }}</span>
|
||||
<span class="text-xs text-muted-foreground">Rides</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
{% include "components/ui/button.html" with label="Rate Park" variant="outline" icon='<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" /></svg>' %}
|
||||
{% include "components/ui/button.html" with label="I've Been Here" variant="default" icon='<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prose dark:prose-invert max-w-none">
|
||||
<h3 class="mb-2 text-lg font-semibold">About</h3>
|
||||
<p class="text-muted-foreground">{{ park.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rides List -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-bold tracking-tight">Rides & Attractions</h2>
|
||||
|
||||
<!-- Ride Filters -->
|
||||
<div class="flex items-center gap-2" x-data="{ sort: 'rating' }">
|
||||
<select class="w-32 px-3 py-1 text-sm transition-colors border rounded-md shadow-sm h-9 border-input bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
hx-get="{% url 'api:park-rides' park.id %}"
|
||||
hx-target="#rides-grid"
|
||||
name="sort">
|
||||
<option value="rating">Top Rated</option>
|
||||
<option value="name">Name (A-Z)</option>
|
||||
<option value="thrill">Thrill Level</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rides-grid"
|
||||
class="grid gap-4 sm:grid-cols-2"
|
||||
hx-get="{% url 'api:park-rides' park.id %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<!-- Loading State -->
|
||||
{% for i in "1234"|make_list %}
|
||||
<div class="flex items-start gap-4 p-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="w-20 h-20 rounded-md bg-muted animate-pulse shrink-0"></div>
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="w-3/4 h-5 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-1/2 h-4 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-1/3 h-4 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="space-y-6">
|
||||
<!-- Map -->
|
||||
<div class="overflow-hidden border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="font-semibold">Location</h3>
|
||||
</div>
|
||||
<div class="relative aspect-square bg-muted">
|
||||
<!-- Map Placeholder -->
|
||||
<div class="absolute inset-0 flex items-center justify-center text-muted-foreground">
|
||||
Map Component
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 text-sm text-muted-foreground">
|
||||
<p>{{ park.location.address }}</p>
|
||||
<a href="#" class="inline-block mt-2 text-primary hover:underline">Get Directions</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Operating Hours -->
|
||||
<div class="border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="font-semibold">Operating Hours</h3>
|
||||
</div>
|
||||
<div class="p-4 space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted-foreground">Today</span>
|
||||
<span class="font-medium text-green-600">Open • 10:00 AM - 8:00 PM</span>
|
||||
</div>
|
||||
<!-- More days would go here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weather -->
|
||||
<div class="border rounded-lg shadow-sm bg-card text-card-foreground"
|
||||
hx-get="{% url 'api:weather' park.id %}"
|
||||
hx-trigger="load">
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="font-semibold">Current Weather</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="h-16 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
125
templates/pages/parks/list.html
Normal file
125
templates/pages/parks/list.html
Normal file
@@ -0,0 +1,125 @@
|
||||
{% extends "base/htmx-base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Explore Parks - ThrillWiki{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="container py-8">
|
||||
<div class="flex flex-col gap-8 md:flex-row">
|
||||
<!-- Sidebar Filters -->
|
||||
<aside class="w-full md:w-64 shrink-0"
|
||||
x-data="{ showFilters: false }">
|
||||
<div class="flex items-center justify-between mb-4 md:hidden">
|
||||
<h2 class="text-lg font-semibold">Filters</h2>
|
||||
<button @click="showFilters = !showFilters"
|
||||
class="text-sm text-primary hover:underline">
|
||||
<span x-text="showFilters ? 'Hide' : 'Show'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6"
|
||||
:class="{'hidden': !showFilters, 'block': showFilters}"
|
||||
class="md:block">
|
||||
|
||||
<form id="park-filters"
|
||||
hx-get="{% url 'api:park-list' %}"
|
||||
hx-target="#park-grid"
|
||||
hx-trigger="change delay:300ms, submit">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="mb-6 space-y-2">
|
||||
<label class="text-sm font-medium">Search</label>
|
||||
<input type="text"
|
||||
name="q"
|
||||
placeholder="Search parks..."
|
||||
class="w-full px-3 py-1 text-sm transition-colors border rounded-md shadow-sm h-9 border-input bg-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
||||
</div>
|
||||
|
||||
<!-- Country Filter -->
|
||||
<div class="mb-6 space-y-2">
|
||||
<label class="text-sm font-medium">Country</label>
|
||||
<select name="country"
|
||||
class="w-full px-3 py-1 text-sm transition-colors border rounded-md shadow-sm h-9 border-input bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
||||
<option value="">All Countries</option>
|
||||
{% for country in countries %}
|
||||
<option value="{{ country.code }}">{{ country.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Status Filter -->
|
||||
<div class="mb-6 space-y-3">
|
||||
<label class="text-sm font-medium">Status</label>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="status" value="Operating" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">Operating</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="status" value="Closed" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">Closed</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="status" value="Construction" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">Under Construction</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-3xl font-bold tracking-tight">Theme Parks</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-muted-foreground" id="park-count">
|
||||
Showing all results
|
||||
</span>
|
||||
<!-- View Toggle -->
|
||||
<div class="flex items-center border rounded-md" x-data="{ view: 'grid' }">
|
||||
<button @click="view = 'grid'"
|
||||
:class="{'bg-muted': view === 'grid'}"
|
||||
class="p-2 transition-colors hover:bg-muted/50">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="view = 'list'"
|
||||
:class="{'bg-muted': view === 'list'}"
|
||||
class="p-2 transition-colors hover:bg-muted/50">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Park Grid -->
|
||||
<div id="park-grid"
|
||||
class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
|
||||
hx-get="{% url 'api:park-list' %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<!-- Loading State -->
|
||||
{% for i in "123456"|make_list %}
|
||||
<div class="rounded-lg border bg-card text-card-foreground shadow-sm h-[380px]">
|
||||
<div class="p-0">
|
||||
<div class="w-full h-48 rounded-t-lg bg-muted animate-pulse"></div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="w-3/4 h-6 rounded bg-muted animate-pulse"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-full h-4 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-2/3 h-4 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
177
templates/pages/rides/detail.html
Normal file
177
templates/pages/rides/detail.html
Normal file
@@ -0,0 +1,177 @@
|
||||
{% extends "base/htmx-base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{{ ride.name }} - {{ ride.park.name }} - ThrillWiki{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="container py-8">
|
||||
<!-- Breadcrumbs -->
|
||||
<nav class="flex mb-6 text-sm text-muted-foreground">
|
||||
<a href="{% url 'home' %}" class="hover:text-foreground">Home</a>
|
||||
<span class="mx-2">/</span>
|
||||
<a href="{% url 'parks:park_list' %}" class="hover:text-foreground">Parks</a>
|
||||
<span class="mx-2">/</span>
|
||||
<a href="{% url 'parks:park_detail' ride.park.id %}" class="hover:text-foreground">{{ ride.park.name }}</a>
|
||||
<span class="mx-2">/</span>
|
||||
<span class="text-foreground">{{ ride.name }}</span>
|
||||
</nav>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||
<!-- Main Content -->
|
||||
<div class="space-y-8 lg:col-span-2">
|
||||
<!-- Ride Header -->
|
||||
<div class="relative overflow-hidden border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="relative aspect-video">
|
||||
{% if ride.image %}
|
||||
<img src="{{ ride.image.url }}" alt="{{ ride.name }}" class="object-cover w-full h-full">
|
||||
{% else %}
|
||||
<div class="flex items-center justify-center w-full h-full bg-muted">
|
||||
<span class="text-muted-foreground">No image available</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div class="absolute text-white bottom-6 left-6">
|
||||
<h1 class="mb-2 text-4xl font-bold">{{ ride.name }}</h1>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
{{ ride.park.name }}
|
||||
</span>
|
||||
<span class="px-2 py-0.5 rounded-full bg-white/20 backdrop-blur-sm border border-white/20">
|
||||
{{ ride.get_status_display }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex flex-col items-center p-3 rounded-lg bg-muted/50">
|
||||
<span class="text-2xl font-bold">{{ ride.average_rating|default:"-" }}</span>
|
||||
<span class="text-xs text-muted-foreground">Rating</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-3 rounded-lg bg-muted/50">
|
||||
<span class="text-2xl font-bold">{{ ride.top_speed|default:"-" }}</span>
|
||||
<span class="text-xs text-muted-foreground">mph</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center p-3 rounded-lg bg-muted/50">
|
||||
<span class="text-2xl font-bold">{{ ride.height|default:"-" }}</span>
|
||||
<span class="text-xs text-muted-foreground">ft</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
{% include "components/ui/button.html" with label="Rate Ride" variant="outline" icon='<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" /></svg>' %}
|
||||
{% include "components/ui/button.html" with label="Add to Credits" variant="default" icon='<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prose dark:prose-invert max-w-none">
|
||||
<h3 class="mb-2 text-lg font-semibold">Description</h3>
|
||||
<p class="text-muted-foreground">{{ ride.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<div class="p-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<dt class="text-sm font-medium text-muted-foreground">Manufacturer</dt>
|
||||
<dd class="mt-1 text-lg font-semibold">{{ ride.manufacturer.name|default:"Unknown" }}</dd>
|
||||
</div>
|
||||
<div class="p-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<dt class="text-sm font-medium text-muted-foreground">Opened</dt>
|
||||
<dd class="mt-1 text-lg font-semibold">{{ ride.opening_date|date:"Y"|default:"Unknown" }}</dd>
|
||||
</div>
|
||||
<div class="p-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<dt class="text-sm font-medium text-muted-foreground">Length</dt>
|
||||
<dd class="mt-1 text-lg font-semibold">{{ ride.length|default:"-" }} ft</dd>
|
||||
</div>
|
||||
<div class="p-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<dt class="text-sm font-medium text-muted-foreground">Inversions</dt>
|
||||
<dd class="mt-1 text-lg font-semibold">{{ ride.inversions|default:"0" }}</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reviews Section -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-bold tracking-tight">Reviews</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-muted-foreground">{{ ride.review_count }} reviews</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="reviews-list"
|
||||
hx-get="{% url 'api:ride-reviews' ride.id %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<!-- Loading State -->
|
||||
{% for i in "123"|make_list %}
|
||||
<div class="p-6 space-y-4 border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-muted animate-pulse"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-24 h-4 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-16 h-3 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-16 h-8 rounded bg-muted animate-pulse"></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>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="space-y-6">
|
||||
<!-- Similar Rides -->
|
||||
<div class="border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="font-semibold">Similar Rides</h3>
|
||||
</div>
|
||||
<div class="divide-y"
|
||||
hx-get="{% url 'api:ride-similar' ride.id %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
{% for i in "123"|make_list %}
|
||||
<div class="flex gap-4 p-4">
|
||||
<div class="w-16 h-16 rounded bg-muted animate-pulse shrink-0"></div>
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="w-3/4 h-4 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-1/2 h-3 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- POV Video -->
|
||||
{% if ride.pov_video_url %}
|
||||
<div class="overflow-hidden border rounded-lg shadow-sm bg-card text-card-foreground">
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="font-semibold">On-Ride POV</h3>
|
||||
</div>
|
||||
<div class="relative aspect-video bg-muted">
|
||||
<!-- Video Embed -->
|
||||
<iframe src="{{ ride.pov_video_url }}"
|
||||
class="absolute inset-0 w-full h-full"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
130
templates/pages/rides/list.html
Normal file
130
templates/pages/rides/list.html
Normal file
@@ -0,0 +1,130 @@
|
||||
{% extends "base/htmx-base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Explore Rides - ThrillWiki{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="container py-8">
|
||||
<div class="flex flex-col gap-8 md:flex-row">
|
||||
<!-- Sidebar Filters -->
|
||||
<aside class="w-full md:w-64 shrink-0"
|
||||
x-data="{ showFilters: false }">
|
||||
<div class="flex items-center justify-between mb-4 md:hidden">
|
||||
<h2 class="text-lg font-semibold">Filters</h2>
|
||||
<button @click="showFilters = !showFilters"
|
||||
class="text-sm text-primary hover:underline">
|
||||
<span x-text="showFilters ? 'Hide' : 'Show'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6"
|
||||
:class="{'hidden': !showFilters, 'block': showFilters}"
|
||||
class="md:block">
|
||||
|
||||
<form id="ride-filters"
|
||||
hx-get="{% url 'api:ride-list' %}"
|
||||
hx-target="#ride-grid"
|
||||
hx-trigger="change delay:300ms, submit">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="mb-6 space-y-2">
|
||||
<label class="text-sm font-medium">Search</label>
|
||||
<input type="text"
|
||||
name="q"
|
||||
placeholder="Search rides..."
|
||||
class="w-full px-3 py-1 text-sm transition-colors border rounded-md shadow-sm h-9 border-input bg-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
||||
</div>
|
||||
|
||||
<!-- Type Filter -->
|
||||
<div class="mb-6 space-y-2">
|
||||
<label class="text-sm font-medium">Ride Type</label>
|
||||
<select name="type"
|
||||
class="w-full px-3 py-1 text-sm transition-colors border rounded-md shadow-sm h-9 border-input bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
||||
<option value="">All Types</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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Intensity Filter -->
|
||||
<div class="mb-6 space-y-3">
|
||||
<label class="text-sm font-medium">Thrill Level</label>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="intensity" value="Extreme" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">Extreme</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="intensity" value="High" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">High</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="intensity" value="Moderate" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">Moderate</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="intensity" value="Low" class="rounded border-primary text-primary focus:ring-primary">
|
||||
<span class="text-sm">Low</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-3xl font-bold tracking-tight">Rides</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-muted-foreground" id="ride-count">
|
||||
Showing all results
|
||||
</span>
|
||||
<!-- View Toggle -->
|
||||
<div class="flex items-center border rounded-md" x-data="{ view: 'grid' }">
|
||||
<button @click="view = 'grid'"
|
||||
:class="{'bg-muted': view === 'grid'}"
|
||||
class="p-2 transition-colors hover:bg-muted/50">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="view = 'list'"
|
||||
:class="{'bg-muted': view === 'list'}"
|
||||
class="p-2 transition-colors hover:bg-muted/50">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ride Grid -->
|
||||
<div id="ride-grid"
|
||||
class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
|
||||
hx-get="{% url 'api:ride-list' %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<!-- Loading State -->
|
||||
{% for i in "123456"|make_list %}
|
||||
<div class="rounded-lg border bg-card text-card-foreground shadow-sm h-[380px]">
|
||||
<div class="p-0">
|
||||
<div class="w-full h-48 rounded-t-lg bg-muted animate-pulse"></div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="w-3/4 h-6 rounded bg-muted animate-pulse"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="w-full h-4 rounded bg-muted animate-pulse"></div>
|
||||
<div class="w-2/3 h-4 rounded bg-muted animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
120
templates/pages/search/results.html
Normal file
120
templates/pages/search/results.html
Normal file
@@ -0,0 +1,120 @@
|
||||
{% extends "base/htmx-base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Search Results - ThrillWiki{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div class="container py-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Search Header -->
|
||||
<div class="mb-8 text-center">
|
||||
<h1 class="mb-4 text-3xl font-bold tracking-tight">Search Results</h1>
|
||||
<div class="max-w-xl mx-auto">
|
||||
<form action="{% url 'search:results' %}" method="get" class="relative">
|
||||
<input type="text"
|
||||
name="q"
|
||||
value="{{ query|default:'' }}"
|
||||
placeholder="Search parks, rides, manufacturers..."
|
||||
class="w-full h-12 pl-12 pr-4 text-lg transition-all border rounded-lg shadow-sm border-input bg-background focus:ring-2 focus:ring-primary focus:border-primary">
|
||||
<div class="absolute -translate-y-1/2 left-4 top-1/2 text-muted-foreground">
|
||||
<svg class="w-5 h-5" 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>
|
||||
</div>
|
||||
<button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 px-4 py-1.5 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Tabs -->
|
||||
<div class="flex items-center justify-center gap-2 pb-2 mb-8 overflow-x-auto" x-data="{ tab: 'all' }">
|
||||
<button @click="tab = 'all'"
|
||||
:class="tab === 'all' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
|
||||
class="px-4 py-2 text-sm font-medium transition-colors rounded-full whitespace-nowrap">
|
||||
All Results
|
||||
</button>
|
||||
<button @click="tab = 'parks'"
|
||||
:class="tab === 'parks' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
|
||||
class="px-4 py-2 text-sm font-medium transition-colors rounded-full whitespace-nowrap">
|
||||
Parks
|
||||
</button>
|
||||
<button @click="tab = 'rides'"
|
||||
:class="tab === 'rides' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
|
||||
class="px-4 py-2 text-sm font-medium transition-colors rounded-full whitespace-nowrap">
|
||||
Rides
|
||||
</button>
|
||||
<button @click="tab = 'users'"
|
||||
:class="tab === 'users' ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'"
|
||||
class="px-4 py-2 text-sm font-medium transition-colors rounded-full whitespace-nowrap">
|
||||
Users
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Results Grid -->
|
||||
<div class="space-y-8">
|
||||
{% if not query %}
|
||||
<div class="py-12 text-center">
|
||||
<div class="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-full bg-muted">
|
||||
<svg class="w-8 h-8 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>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-foreground">Start Searching</h3>
|
||||
<p class="mt-1 text-muted-foreground">Enter a keyword to find parks, rides, and more.</p>
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
<!-- Parks Section -->
|
||||
<section x-show="tab === 'all' || tab === 'parks'">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold">Parks</h2>
|
||||
<span class="text-sm text-muted-foreground">3 results</span>
|
||||
</div>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
{% for i in "123"|make_list %}
|
||||
<a href="#" class="flex gap-4 p-4 transition-colors border rounded-lg bg-card hover:bg-muted/50">
|
||||
<div class="w-20 h-20 rounded-md bg-muted shrink-0"></div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">Cedar Point</h3>
|
||||
<p class="text-sm text-muted-foreground">Sandusky, OH, United States</p>
|
||||
<div class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
|
||||
<span class="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 px-2 py-0.5 rounded-full">Operating</span>
|
||||
<span>•</span>
|
||||
<span>72 Rides</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Rides Section -->
|
||||
<section x-show="tab === 'all' || tab === 'rides'">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold">Rides</h2>
|
||||
<span class="text-sm text-muted-foreground">5 results</span>
|
||||
</div>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
{% for i in "12345"|make_list %}
|
||||
<a href="#" class="flex gap-4 p-4 transition-colors border rounded-lg bg-card hover:bg-muted/50">
|
||||
<div class="w-20 h-20 rounded-md bg-muted shrink-0"></div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">Millennium Force</h3>
|
||||
<p class="text-sm text-muted-foreground">Cedar Point</p>
|
||||
<div class="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
|
||||
<span class="font-medium text-yellow-600 dark:text-yellow-400">★ 4.9</span>
|
||||
<span>•</span>
|
||||
<span>Giga Coaster</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user