mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-21 09:31: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
58
templates/components/navigation/footer.html
Normal file
58
templates/components/navigation/footer.html
Normal file
@@ -0,0 +1,58 @@
|
||||
{% load static %}
|
||||
<footer class="mt-auto border-t bg-background border-border">
|
||||
<div class="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
|
||||
<!-- Brand -->
|
||||
<div class="col-span-1 md:col-span-2">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<!-- Replace with logo -->
|
||||
<span class="text-xl font-bold tracking-tight text-foreground">ThrillWiki</span>
|
||||
</div>
|
||||
<p class="max-w-sm mb-6 text-sm text-muted-foreground">
|
||||
Your comprehensive guide to theme parks and roller coasters.
|
||||
Discover, track, and rate your favorite thrills.
|
||||
</p>
|
||||
<div class="flex space-x-4">
|
||||
<!-- Social Links -->
|
||||
<a href="#" class="transition-colors text-muted-foreground hover:text-foreground">
|
||||
<span class="sr-only">Twitter</span>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="transition-colors text-muted-foreground hover:text-foreground">
|
||||
<span class="sr-only">GitHub</span>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="col-span-1">
|
||||
<h3 class="mb-4 text-sm font-semibold tracking-wider uppercase text-foreground">Discover</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="{% url 'parks:park_list' %}" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Parks</a></li>
|
||||
<li><a href="{% url 'rides:ride_list' %}" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Rides</a></li>
|
||||
<li><a href="#" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Manufacturers</a></li>
|
||||
<li><a href="#" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Top Rated</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Legal -->
|
||||
<div class="col-span-1">
|
||||
<h3 class="mb-4 text-sm font-semibold tracking-wider uppercase text-foreground">Legal</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="{% url 'pages:privacy' %}" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Privacy Policy</a></li>
|
||||
<li><a href="{% url 'pages:terms' %}" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Terms of Service</a></li>
|
||||
<li><a href="#" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Cookie Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 mt-8 text-center border-t border-border">
|
||||
<p class="text-sm text-muted-foreground">© {% now "Y" %} ThrillWiki. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
182
templates/components/navigation/navbar.html
Normal file
182
templates/components/navigation/navbar.html
Normal file
@@ -0,0 +1,182 @@
|
||||
{% load static %}
|
||||
<nav class="bg-background border-b border-border sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-background/60" x-data="{ mobileMenuOpen: false }">
|
||||
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<!-- Left Side: Logo & Desktop Menu -->
|
||||
<div class="flex">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center flex-shrink-0">
|
||||
<a href="{% url 'home' %}" class="flex items-center gap-2">
|
||||
<!-- Replace with actual logo SVG/Image -->
|
||||
<span class="text-xl font-bold tracking-tight text-foreground">ThrillWiki</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<!-- Current: "border-primary text-foreground", Default: "border-transparent text-muted-foreground hover:border-border hover:text-foreground" -->
|
||||
<a href="{% url 'parks:park_list' %}"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200
|
||||
{% if '/parks/' in request.path %}border-primary text-foreground{% else %}border-transparent text-muted-foreground hover:border-border hover:text-foreground{% endif %}">
|
||||
Parks
|
||||
</a>
|
||||
<a href="{% url 'rides:ride_list' %}"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200
|
||||
{% if '/rides/' in request.path %}border-primary text-foreground{% else %}border-transparent text-muted-foreground hover:border-border hover:text-foreground{% endif %}">
|
||||
Rides
|
||||
</a>
|
||||
<!-- Add more links as needed -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: Search, Theme, User Menu, Mobile Toggle -->
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Search Trigger -->
|
||||
<button type="button"
|
||||
class="p-2 transition-colors duration-200 text-muted-foreground hover:text-foreground"
|
||||
@click="$store.search.toggle()"
|
||||
aria-label="Search">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Theme Toggle -->
|
||||
<button type="button"
|
||||
class="p-2 transition-colors duration-200 text-muted-foreground hover:text-foreground"
|
||||
@click="$store.theme.toggle()"
|
||||
aria-label="Toggle theme">
|
||||
<!-- Sun Icon -->
|
||||
<svg x-show="!$store.theme.isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
<!-- Moon Icon -->
|
||||
<svg x-show="$store.theme.isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="display: none;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- User Menu (Authenticated) -->
|
||||
{% if user.is_authenticated %}
|
||||
<div class="relative ml-3" x-data="{ open: false }">
|
||||
<div>
|
||||
<button type="button"
|
||||
class="flex text-sm rounded-full bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
@click="open = !open"
|
||||
@click.away="open = false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
{% if user.profile.avatar %}
|
||||
<img class="object-cover w-8 h-8 rounded-full" src="{{ user.profile.avatar.url }}" alt="{{ user.username }}">
|
||||
{% else %}
|
||||
<div class="flex items-center justify-center w-8 h-8 text-xs font-medium rounded-full bg-primary/10 text-primary">
|
||||
{{ user.username|make_list|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right rounded-md shadow-lg bg-popover ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
style="display: none;">
|
||||
<a href="{% url 'accounts:profile' %}" class="block px-4 py-2 text-sm text-foreground hover:bg-muted" role="menuitem">Your Profile</a>
|
||||
<a href="{% url 'accounts:settings' %}" class="block px-4 py-2 text-sm text-foreground hover:bg-muted" role="menuitem">Settings</a>
|
||||
<div class="my-1 border-t border-border"></div>
|
||||
<form method="post" action="{% url 'account_logout' %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="block w-full px-4 py-2 text-sm text-left text-destructive hover:bg-destructive/10" role="menuitem">Sign out</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Auth Buttons (Guest) -->
|
||||
<div class="items-center hidden gap-3 sm:flex">
|
||||
<a href="{% url 'account_login' %}" class="text-sm font-medium transition-colors text-muted-foreground hover:text-foreground">Log in</a>
|
||||
<a href="{% url 'account_signup' %}" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9">Sign up</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex items-center sm:hidden">
|
||||
<button type="button"
|
||||
class="inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
|
||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!-- Icon when menu is closed -->
|
||||
<svg x-show="!mobileMenuOpen" class="block w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
<!-- Icon when menu is open -->
|
||||
<svg x-show="mobileMenuOpen" class="block w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" style="display: none;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<div class="sm:hidden" id="mobile-menu" x-show="mobileMenuOpen" style="display: none;">
|
||||
<div class="pt-2 pb-3 space-y-1">
|
||||
<!-- Current: "bg-primary/10 border-primary text-primary", Default: "border-transparent text-muted-foreground hover:bg-muted hover:border-border hover:text-foreground" -->
|
||||
<a href="{% url 'parks:park_list' %}"
|
||||
class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium {% if '/parks/' in request.path %}bg-primary/10 border-primary text-primary{% else %}border-transparent text-muted-foreground hover:bg-muted hover:border-border hover:text-foreground{% endif %}">
|
||||
Parks
|
||||
</a>
|
||||
<a href="{% url 'rides:ride_list' %}"
|
||||
class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium {% if '/rides/' in request.path %}bg-primary/10 border-primary text-primary{% else %}border-transparent text-muted-foreground hover:bg-muted hover:border-border hover:text-foreground{% endif %}">
|
||||
Rides
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if not user.is_authenticated %}
|
||||
<div class="pt-4 pb-3 border-t border-border">
|
||||
<div class="space-y-1">
|
||||
<a href="{% url 'account_login' %}" class="block py-2 pl-3 pr-4 text-base font-medium border-l-4 border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground">Log in</a>
|
||||
<a href="{% url 'account_signup' %}" class="block py-2 pl-3 pr-4 text-base font-medium border-l-4 border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground">Sign up</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="pt-4 pb-3 border-t border-border">
|
||||
<div class="flex items-center px-4">
|
||||
<div class="flex-shrink-0">
|
||||
{% if user.profile.avatar %}
|
||||
<img class="object-cover w-10 h-10 rounded-full" src="{{ user.profile.avatar.url }}" alt="{{ user.username }}">
|
||||
{% else %}
|
||||
<div class="flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full bg-primary/10 text-primary">
|
||||
{{ user.username|make_list|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-foreground">{{ user.username }}</div>
|
||||
<div class="text-sm font-medium text-muted-foreground">{{ user.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 space-y-1">
|
||||
<a href="{% url 'accounts:profile' %}" class="block px-4 py-2 text-base font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Your Profile</a>
|
||||
<a href="{% url 'accounts:settings' %}" class="block px-4 py-2 text-base font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Settings</a>
|
||||
<form method="post" action="{% url 'account_logout' %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="block w-full px-4 py-2 text-base font-medium text-left text-destructive hover:bg-muted hover:text-destructive">Sign out</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user