mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 04:51: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.
160 lines
8.8 KiB
HTML
160 lines
8.8 KiB
HTML
{% 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 %}
|