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

yay

Browse Source
This commit is contained in:
pacnpal
2024-10-29 01:09:14 -04:00
parent d19e5a5c07
commit 2d31847974
195 changed files with 5000 additions and 1213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
templates/base/base.html
View File

@@ -1,141 +1,225 @@
{% load static %}
<!DOCTYPE html>
<html lang="en" x-data="{ darkMode: localStorage.getItem('darkMode') === 'true' }" :class="{ 'dark': darkMode }">
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}ThrillWiki{% endblock %}</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 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>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#4b5563'
}
}
}
// Immediately remove 'no-js' class and add initial theme class
document.documentElement.classList.remove('no-js');
if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}
</script>
<!-- AlpineJS -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<!-- 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 %}
<!-- Theme Management -->
<script>
// Theme management
const themeManager = {
init() {
// Set up toggle button when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
const toggleBtn = document.getElementById('theme-toggle');
if (toggleBtn) {
toggleBtn.addEventListener('click', () => {
this.toggleTheme();
});
}
// Watch for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.theme) {
this.setTheme(e.matches ? 'dark' : 'light');
}
});
});
},
setTheme(theme) {
// Force a repaint by temporarily adding a class
document.documentElement.classList.add('theme-transitioning');
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.theme = theme;
// Remove the transition class after a short delay
setTimeout(() => {
document.documentElement.classList.remove('theme-transitioning');
}, 100);
},
toggleTheme() {
const isDark = document.documentElement.classList.contains('dark');
this.setTheme(isDark ? 'light' : 'dark');
}
};
// Initialize theme management
themeManager.init();
</script>
<style>
/* Prevent flash of wrong theme */
.no-js {
visibility: hidden;
}
/* Smooth theme transitions */
:root {
--theme-transition-duration: 200ms;
}
.theme-transitioning * {
transition: none !important;
}
body {
transition: background-color var(--theme-transition-duration) ease-in-out,
color var(--theme-transition-duration) ease-in-out;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex flex-col" x-data="{ mobileMenuOpen: false, userMenuOpen: false }">
<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="bg-white dark:bg-gray-800 shadow-sm">
<nav class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<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="text-xl font-bold text-blue-600 dark:text-blue-400">ThrillWiki</a>
<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="hidden md:flex items-center space-x-4">
<a href="{% url 'parks:park_list' %}" class="nav-link">Parks</a>
<a href="{% url 'rides:ride_list' %}" class="nav-link">Rides</a>
<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="hidden md:flex flex-1 max-w-md mx-4">
<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 rounded-lg border border-gray-300 dark:border-gray-600
bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
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">
<button type="submit" class="absolute right-3 top-2.5">
<i class="fas fa-search text-gray-400"></i>
<i class="text-gray-400 transition-colors fas fa-search hover:text-primary"></i>
</button>
</div>
</form>
</div>
<!-- Right Side Menu -->
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-6">
<!-- Theme Toggle -->
<button @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
<i class="fas" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
<button id="theme-toggle" class="p-2.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-primary/10 dark:hover:bg-primary/20 transition-all shadow-sm border border-gray-200/50 dark:border-gray-600/50">
<i class="hidden text-lg fas fa-sun dark:inline"></i>
<i class="text-lg fas fa-moon dark:hidden"></i>
</button>
<!-- User Menu -->
{% if user.is_authenticated %}
<div class="relative" x-data="{ open: false }">
<button @click="open = !open" class="flex items-center space-x-2">
<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="h-8 w-8 rounded-full">
class="w-8 h-8 rounded-full ring-2 ring-primary/20">
{% else %}
<div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
<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 x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
<div id="userDropdown" class="dropdown-menu">
<div class="py-1">
<a href="{% url 'user_profile' user.username %}"
class="menu-item">Profile</a>
<a href="{% url 'settings' %}"
class="menu-item">Settings</a>
<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">Admin</a>
<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="menu-item w-full text-left">
Logout
<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-2">
<div class="flex space-x-3">
<a href="{% url 'account_login' %}" class="btn-secondary">
<i class="fas fa-sign-in-alt mr-2"></i>
<i class="mr-2 fas fa-sign-in-alt"></i>
Login
</a>
<a href="{% url 'account_signup' %}" class="btn-primary">
<i class="fas fa-user-plus mr-2"></i>
<i class="mr-2 fas fa-user-plus"></i>
Register
</a>
</div>
{% endif %}
<!-- Mobile Menu Button -->
<button @click="mobileMenuOpen = !mobileMenuOpen"
class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
<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 x-show="mobileMenuOpen" @click.away="mobileMenuOpen = false"
class="md:hidden mt-4 py-2 bg-white dark:bg-gray-800">
<a href="{% url 'parks:park_list' %}" class="mobile-nav-link">Parks</a>
<a href="{% url 'rides:ride_list' %}" class="mobile-nav-link">Rides</a>
<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 rounded-lg border border-gray-300 dark:border-gray-600
bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
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>
@@ -143,7 +227,7 @@
<!-- Flash Messages -->
{% if messages %}
<div class="container mx-auto px-4 mt-4">
<div class="container px-6 mx-auto mt-4">
{% for message in messages %}
<div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
{{ message }}
@@ -153,20 +237,20 @@
{% endif %}
<!-- Main Content -->
<main class="flex-grow container mx-auto px-4 py-8">
<main class="container flex-grow px-6 py-8 mx-auto">
{% block content %}{% endblock %}
</main>
<!-- Footer -->
<footer class="bg-white dark:bg-gray-800 mt-auto">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<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>&copy; {% now "Y" %} ThrillWiki. All rights reserved.</p>
</div>
<div class="space-x-4">
<a href="{% url 'terms' %}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Terms</a>
<a href="{% url 'privacy' %}" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">Privacy</a>
<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>
@@ -174,6 +258,42 @@
<!-- Custom JavaScript -->
<script src="{% static 'js/main.js' %}"></script>
<script>
// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
if (mobileMenuBtn && mobileMenu) {
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
}
// User dropdown toggle
const userMenuBtn = document.getElementById('userMenuBtn');
const userDropdown = document.getElementById('userDropdown');
if (userMenuBtn && userDropdown) {
userMenuBtn.addEventListener('click', (e) => {
e.stopPropagation();
userDropdown.classList.toggle('active');
});
// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
userDropdown.classList.remove('active');
}
});
// Close dropdown when pressing escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
userDropdown.classList.remove('active');
}
});
}
</script>
{% block extra_scripts %}{% endblock %}
</body>
</html>