pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 09:11:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

right

Browse Source
This commit is contained in:
pacnpal
2024-10-29 20:36:49 -04:00
parent a6c33cf50f
commit 4e970400ef
9 changed files with 822 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
templates/base/base.html
View File

@@ -1,11 +1,13 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<!-- [Previous head content remains unchanged...] -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %}ThrillWiki{% endblock %}</title>
<!-- [Previous head content remains unchanged...] -->
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
@@ -14,7 +16,6 @@
<!-- 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
@@ -22,7 +23,6 @@
: "light";
localStorage.setItem("theme", theme);
}
// Apply theme immediately before page loads
if (theme === "dark") {
document.documentElement.classList.add("dark");
}
@@ -41,86 +41,63 @@
/>
{% 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"
>
<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">
<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 mx-auto nav-container">
<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"
class="font-bold text-transparent transition-transform site-logo 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">
<!-- Navigation Links (Always Visible) -->
<div class="flex items-center space-x-2 sm:space-x-4">
<a href="{% url 'parks:park_list' %}" class="nav-link">
<i class="fas fa-map-marker-alt"></i>
<span>Parks</span>
</a>
<a href="{% url 'rides:ride_list' %}" class="nav-link group">
<a href="{% url 'rides:ride_list' %}" class="nav-link">
<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">
<div class="flex-1 hidden max-w-md mx-8 lg: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"
class="form-input"
/>
</div>
</form>
</div>
<!-- Right Side Menu -->
<div class="flex items-center space-x-6">
<div class="flex items-center space-x-2 sm: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"
class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
role="button"
aria-label="Toggle dark mode"
>
<i class="text-lg fas"></i>
<i class="text-xl fas"></i>
</div>
</label>
<!-- [Rest of the content remains unchanged...] -->
<!-- User Menu -->
{% if user.is_authenticated %}
<div class="relative">
@@ -135,9 +112,7 @@
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"
>
<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 %}
@@ -146,10 +121,7 @@
<!-- Dropdown Menu -->
<div id="userDropdown" class="dropdown-menu">
<div class="py-1">
<a
href="{% url 'user_profile' user.username %}"
class="menu-item"
>
<a href="{% url 'user_profile' user.username %}" class="menu-item">
<i class="w-5 fas fa-user"></i>
<span>Profile</span>
</a>
@@ -174,7 +146,8 @@
</div>
</div>
{% else %}
<div class="flex space-x-3">
<!-- Login/Register (Desktop) -->
<div class="hidden space-x-3 lg:flex">
<a href="{% url 'account_login' %}" class="btn-secondary">
<i class="mr-2 fas fa-sign-in-alt"></i>
Login
@@ -189,45 +162,51 @@
<!-- 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"
class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
aria-label="Toggle mobile menu"
>
<i class="fas fa-bars"></i>
<i class="text-2xl 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 id="mobileMenu">
<div class="space-y-4">
<!-- Search (Mobile) -->
<form action="{% url 'search' %}" method="get" class="mb-4">
<input
type="text"
name="q"
placeholder="Search parks and rides..."
class="form-input"
/>
</form>
{% if not user.is_authenticated %}
<!-- Login/Register (Mobile) -->
<div class="flex items-center space-x-3">
<a href="{% url 'account_login' %}" class="flex-1 mobile-nav-link secondary">
<i class="fas fa-sign-in-alt"></i>
<span>Login</span>
</a>
<a href="{% url 'account_signup' %}" class="flex-1 mobile-nav-link primary">
<i class="fas fa-user-plus"></i>
<span>Register</span>
</a>
</div>
{% endif %}
</div>
</div>
</nav>
</header>
<!-- [Rest of the content remains unchanged...] -->
<!-- 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 %}"
>
<div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
{{ message }}
</div>
{% endfor %}
@@ -240,9 +219,7 @@
</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"
>
<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">
@@ -252,13 +229,11 @@
<a
href="{% url 'terms' %}"
class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
>Terms</a
>
>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
>
>Privacy</a>
</div>
</div>
</div>