mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:11:07 -05:00
first commit
This commit is contained in:
pacnpal
179
templates/base/base.html
Normal file
179
templates/base/base.html
Normal file
@@ -0,0 +1,179 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" x-data="{ darkMode: localStorage.getItem('darkMode') === 'true' }" :class="{ 'dark': darkMode }">
|
||||
<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>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#2563eb',
|
||||
secondary: '#4b5563'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- AlpineJS -->
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
|
||||
|
||||
<!-- 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 %}
|
||||
</head>
|
||||
<body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex flex-col" x-data="{ mobileMenuOpen: false, userMenuOpen: false }">
|
||||
<!-- 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">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center">
|
||||
<a href="{% url 'home' %}" class="text-xl font-bold text-blue-600 dark:text-blue-400">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>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="hidden md:flex flex-1 max-w-md mx-4">
|
||||
<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">
|
||||
<button type="submit" class="absolute right-3 top-2.5">
|
||||
<i class="fas fa-search text-gray-400"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- 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>
|
||||
|
||||
<!-- User Menu -->
|
||||
{% if user.is_authenticated %}
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button @click="open = !open" class="flex items-center space-x-2">
|
||||
{% if user.profile.avatar %}
|
||||
<img src="{{ user.profile.avatar.url }}" alt="{{ user.username }}"
|
||||
class="h-8 w-8 rounded-full">
|
||||
{% else %}
|
||||
<div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
|
||||
{{ 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 class="py-1">
|
||||
<a href="{% url 'user_profile' user.username %}"
|
||||
class="menu-item">Profile</a>
|
||||
<a href="{% url 'settings' %}"
|
||||
class="menu-item">Settings</a>
|
||||
{% if user.is_staff or user.is_superuser %}
|
||||
<a href="{% url 'admin:index' %}"
|
||||
class="menu-item">Admin</a>
|
||||
{% endif %}
|
||||
<form method="post" action="{% url 'account_logout' %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="menu-item w-full text-left">
|
||||
Logout
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="flex space-x-2">
|
||||
<a href="{% url 'account_login' %}" class="btn-secondary">
|
||||
<i class="fas fa-sign-in-alt mr-2"></i>
|
||||
Login
|
||||
</a>
|
||||
<a href="{% url 'account_signup' %}" class="btn-primary">
|
||||
<i class="fas fa-user-plus mr-2"></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">
|
||||
<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>
|
||||
<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">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Flash Messages -->
|
||||
{% if messages %}
|
||||
<div class="container mx-auto px-4 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="flex-grow container mx-auto px-4 py-8">
|
||||
{% 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">
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Custom JavaScript -->
|
||||
<script src="{% static 'js/main.js' %}"></script>
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user