mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 09:11:08 -05:00
272 lines
9.6 KiB
HTML
272 lines
9.6 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{% block title %}ThrillWiki{% endblock %}</title>
|
|
|
|
<!-- Google Fonts -->
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- Prevent flash of wrong theme -->
|
|
<script>
|
|
// Get theme from localStorage or system preference
|
|
let theme = localStorage.getItem("theme");
|
|
if (!theme) {
|
|
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
localStorage.setItem("theme", theme);
|
|
}
|
|
// Apply theme immediately before page loads
|
|
if (theme === "dark") {
|
|
document.documentElement.classList.add("dark");
|
|
}
|
|
</script>
|
|
|
|
<!-- HTMX -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet" />
|
|
|
|
<!-- Font Awesome -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
/>
|
|
|
|
{% block extra_head %}{% endblock %}
|
|
|
|
<style>
|
|
/* Smooth theme transitions */
|
|
:root {
|
|
--theme-transition-duration: 200ms;
|
|
}
|
|
|
|
body {
|
|
transition: background-color var(--theme-transition-duration) ease-in-out,
|
|
color var(--theme-transition-duration) ease-in-out;
|
|
}
|
|
|
|
/* Ensure theme toggle button has consistent size */
|
|
#theme-toggle {
|
|
width: 40px;
|
|
height: 40px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body
|
|
class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
|
|
>
|
|
<!-- Header -->
|
|
<header
|
|
class="border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
|
>
|
|
<nav class="container px-6 py-4 mx-auto">
|
|
<div class="flex items-center justify-between">
|
|
<!-- Logo -->
|
|
<div class="flex items-center">
|
|
<a
|
|
href="{% url 'home' %}"
|
|
class="px-3 text-2xl font-bold text-transparent transition-transform bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
|
|
>
|
|
ThrillWiki
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<div class="items-center hidden space-x-8 md:flex">
|
|
<a href="{% url 'parks:park_list' %}" class="nav-link group">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<span>Parks</span>
|
|
</a>
|
|
<a href="{% url 'rides:ride_list' %}" class="nav-link group">
|
|
<i class="fas fa-rocket"></i>
|
|
<span>Rides</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Search Bar -->
|
|
<div class="flex-1 hidden max-w-md mx-8 md:flex">
|
|
<form action="{% url 'search' %}" method="get" class="w-full">
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search parks and rides..."
|
|
class="w-full px-4 py-2 text-gray-900 transition-all border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Right Side Menu -->
|
|
<div class="flex items-center space-x-6">
|
|
<!-- Theme Toggle -->
|
|
<label for="theme-toggle" class="cursor-pointer">
|
|
<input type="checkbox" id="theme-toggle" class="hidden" />
|
|
<div
|
|
class="inline-flex items-center justify-center p-2 text-gray-500 transition-all bg-white border border-gray-200 rounded-lg theme-toggle-btn hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
role="button"
|
|
aria-label="Toggle dark mode"
|
|
>
|
|
<i class="text-lg fas"></i>
|
|
</div>
|
|
</label>
|
|
|
|
<!-- User Menu -->
|
|
{% if user.is_authenticated %}
|
|
<div class="relative">
|
|
<button
|
|
id="userMenuBtn"
|
|
class="flex items-center space-x-2 transition-transform hover:scale-105"
|
|
>
|
|
{% if user.profile.avatar %}
|
|
<img
|
|
src="{{ user.profile.avatar.url }}"
|
|
alt="{{ user.username }}"
|
|
class="w-8 h-8 rounded-full ring-2 ring-primary/20"
|
|
/>
|
|
{% else %}
|
|
<div
|
|
class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-gradient-to-br from-primary to-secondary"
|
|
>
|
|
{{ user.username.0|upper }}
|
|
</div>
|
|
{% endif %}
|
|
</button>
|
|
|
|
<!-- Dropdown Menu -->
|
|
<div id="userDropdown" class="dropdown-menu">
|
|
<div class="py-1">
|
|
<a
|
|
href="{% url 'user_profile' user.username %}"
|
|
class="menu-item"
|
|
>
|
|
<i class="w-5 fas fa-user"></i>
|
|
<span>Profile</span>
|
|
</a>
|
|
<a href="{% url 'settings' %}" class="menu-item">
|
|
<i class="w-5 fas fa-cog"></i>
|
|
<span>Settings</span>
|
|
</a>
|
|
{% if user.is_staff or user.is_superuser %}
|
|
<a href="{% url 'admin:index' %}" class="menu-item">
|
|
<i class="w-5 fas fa-shield-alt"></i>
|
|
<span>Admin</span>
|
|
</a>
|
|
{% endif %}
|
|
<form method="post" action="{% url 'account_logout' %}">
|
|
{% csrf_token %}
|
|
<button type="submit" class="w-full menu-item">
|
|
<i class="w-5 fas fa-sign-out-alt"></i>
|
|
<span>Logout</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex space-x-3">
|
|
<a href="{% url 'account_login' %}" class="btn-secondary">
|
|
<i class="mr-2 fas fa-sign-in-alt"></i>
|
|
Login
|
|
</a>
|
|
<a href="{% url 'account_signup' %}" class="btn-primary">
|
|
<i class="mr-2 fas fa-user-plus"></i>
|
|
Register
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<button
|
|
id="mobileMenuBtn"
|
|
class="p-2 text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
|
|
>
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div
|
|
id="mobileMenu"
|
|
class="hidden py-2 mt-4 md:hidden bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg rounded-xl"
|
|
>
|
|
<a href="{% url 'parks:park_list' %}" class="mobile-nav-link">
|
|
<i class="w-5 fas fa-map-marker-alt"></i>
|
|
<span>Parks</span>
|
|
</a>
|
|
<a href="{% url 'rides:ride_list' %}" class="mobile-nav-link">
|
|
<i class="w-5 fas fa-rocket"></i>
|
|
<span>Rides</span>
|
|
</a>
|
|
<form action="{% url 'search' %}" method="get" class="px-4 py-2">
|
|
<input
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search parks and rides..."
|
|
class="w-full px-4 py-2 text-gray-900 border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white"
|
|
/>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Flash Messages -->
|
|
{% if messages %}
|
|
<div class="container px-6 mx-auto mt-4">
|
|
{% for message in messages %}
|
|
<div
|
|
class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
|
|
>
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Main Content -->
|
|
<main class="container flex-grow px-6 py-8 mx-auto">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer
|
|
class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
|
|
>
|
|
<div class="container px-6 py-6 mx-auto">
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-gray-600 dark:text-gray-400">
|
|
<p>© {% now "Y" %} ThrillWiki. All rights reserved.</p>
|
|
</div>
|
|
<div class="space-x-4">
|
|
<a
|
|
href="{% url 'terms' %}"
|
|
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
|
>Terms</a
|
|
>
|
|
<a
|
|
href="{% url 'privacy' %}"
|
|
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
|
|
>Privacy</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Custom JavaScript -->
|
|
<script src="{% static 'js/main.js' %}"></script>
|
|
{% block extra_scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|