mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:31:09 -05:00
Add base HTML template with responsive design and dark mode support
- Created a new base HTML template for the ThrillWiki project. - Implemented responsive navigation with mobile support. - Added dark mode functionality using Alpine.js and CSS variables. - Included Open Graph and Twitter meta tags for better SEO. - Integrated HTMX for dynamic content loading and search functionality. - Established a design system with CSS variables for colors, typography, and spacing. - Included accessibility features such as skip to content links and focus styles.
This commit is contained in:
pacnpal
806
templates/base/base.html
Normal file
806
templates/base/base.html
Normal file
@@ -0,0 +1,806 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{% block meta_description %}ThrillWiki - Your comprehensive guide to theme parks and roller coasters{% endblock %}">
|
||||
<meta name="keywords" content="{% block meta_keywords %}theme parks, roller coasters, rides, amusement parks{% endblock %}">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="{% block og_type %}website{% endblock %}">
|
||||
<meta property="og:url" content="{% block og_url %}{{ request.build_absolute_uri }}{% endblock %}">
|
||||
<meta property="og:title" content="{% block og_title %}{% block title %}ThrillWiki{% endblock %}{% endblock %}">
|
||||
<meta property="og:description" content="{% block og_description %}{% block meta_description %}ThrillWiki - Your comprehensive guide to theme parks and roller coasters{% endblock %}{% endblock %}">
|
||||
<meta property="og:image" content="{% block og_image %}{% load static %}{% static 'images/og-default.jpg' %}{% endblock %}">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:url" content="{% block twitter_url %}{{ request.build_absolute_uri }}{% endblock %}">
|
||||
<meta property="twitter:title" content="{% block twitter_title %}{% block title %}ThrillWiki{% endblock %}{% endblock %}">
|
||||
<meta property="twitter:description" content="{% block twitter_description %}{% block meta_description %}ThrillWiki - Your comprehensive guide to theme parks and roller coasters{% endblock %}{% endblock %}">
|
||||
<meta property="twitter:image" content="{% block twitter_image %}{% load static %}{% static 'images/twitter-default.jpg' %}{% endblock %}">
|
||||
|
||||
<title>{% block title %}ThrillWiki{% endblock %}</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="{% load static %}{% static 'favicon.ico' %}">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{% load static %}{% static 'apple-touch-icon.png' %}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% load static %}{% static 'favicon-32x32.png' %}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% load static %}{% static 'favicon-16x16.png' %}">
|
||||
|
||||
<!-- Preconnect to external domains -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<!-- CSS -->
|
||||
{% load static %}
|
||||
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
|
||||
{% block extra_css %}{% endblock %}
|
||||
|
||||
<!-- Design System CSS Variables -->
|
||||
<style>
|
||||
:root {
|
||||
/* Primary Colors */
|
||||
--color-primary-50: #eff6ff;
|
||||
--color-primary-100: #dbeafe;
|
||||
--color-primary-200: #bfdbfe;
|
||||
--color-primary-300: #93c5fd;
|
||||
--color-primary-400: #60a5fa;
|
||||
--color-primary-500: #3b82f6;
|
||||
--color-primary-600: #2563eb;
|
||||
--color-primary-700: #1d4ed8;
|
||||
--color-primary-800: #1e40af;
|
||||
--color-primary-900: #1e3a8a;
|
||||
--color-primary-950: #172554;
|
||||
|
||||
/* Secondary Colors */
|
||||
--color-secondary-50: #f8fafc;
|
||||
--color-secondary-100: #f1f5f9;
|
||||
--color-secondary-200: #e2e8f0;
|
||||
--color-secondary-300: #cbd5e1;
|
||||
--color-secondary-400: #94a3b8;
|
||||
--color-secondary-500: #64748b;
|
||||
--color-secondary-600: #475569;
|
||||
--color-secondary-700: #334155;
|
||||
--color-secondary-800: #1e293b;
|
||||
--color-secondary-900: #0f172a;
|
||||
--color-secondary-950: #020617;
|
||||
|
||||
/* Accent Colors */
|
||||
--color-accent-50: #fef2f2;
|
||||
--color-accent-100: #fee2e2;
|
||||
--color-accent-200: #fecaca;
|
||||
--color-accent-300: #fca5a5;
|
||||
--color-accent-400: #f87171;
|
||||
--color-accent-500: #ef4444;
|
||||
--color-accent-600: #dc2626;
|
||||
--color-accent-700: #b91c1c;
|
||||
--color-accent-800: #991b1b;
|
||||
--color-accent-900: #7f1d1d;
|
||||
--color-accent-950: #450a0a;
|
||||
|
||||
/* Success Colors */
|
||||
--color-success-50: #f0fdf4;
|
||||
--color-success-100: #dcfce7;
|
||||
--color-success-200: #bbf7d0;
|
||||
--color-success-300: #86efac;
|
||||
--color-success-400: #4ade80;
|
||||
--color-success-500: #22c55e;
|
||||
--color-success-600: #16a34a;
|
||||
--color-success-700: #15803d;
|
||||
--color-success-800: #166534;
|
||||
--color-success-900: #14532d;
|
||||
--color-success-950: #052e16;
|
||||
|
||||
/* Warning Colors */
|
||||
--color-warning-50: #fffbeb;
|
||||
--color-warning-100: #fef3c7;
|
||||
--color-warning-200: #fde68a;
|
||||
--color-warning-300: #fcd34d;
|
||||
--color-warning-400: #fbbf24;
|
||||
--color-warning-500: #f59e0b;
|
||||
--color-warning-600: #d97706;
|
||||
--color-warning-700: #b45309;
|
||||
--color-warning-800: #92400e;
|
||||
--color-warning-900: #78350f;
|
||||
--color-warning-950: #451a03;
|
||||
|
||||
/* Error Colors */
|
||||
--color-error-50: #fef2f2;
|
||||
--color-error-100: #fee2e2;
|
||||
--color-error-200: #fecaca;
|
||||
--color-error-300: #fca5a5;
|
||||
--color-error-400: #f87171;
|
||||
--color-error-500: #ef4444;
|
||||
--color-error-600: #dc2626;
|
||||
--color-error-700: #b91c1c;
|
||||
--color-error-800: #991b1b;
|
||||
--color-error-900: #7f1d1d;
|
||||
--color-error-950: #450a0a;
|
||||
|
||||
/* Typography */
|
||||
--font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-family-serif: 'Playfair Display', Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
|
||||
/* Font Sizes */
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-size-4xl: 2.25rem;
|
||||
--font-size-5xl: 3rem;
|
||||
--font-size-6xl: 3.75rem;
|
||||
--font-size-7xl: 4.5rem;
|
||||
--font-size-8xl: 6rem;
|
||||
--font-size-9xl: 8rem;
|
||||
|
||||
/* Line Heights */
|
||||
--line-height-none: 1;
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-snug: 1.375;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.625;
|
||||
--line-height-loose: 2;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-px: 1px;
|
||||
--spacing-0: 0;
|
||||
--spacing-1: 0.25rem;
|
||||
--spacing-2: 0.5rem;
|
||||
--spacing-3: 0.75rem;
|
||||
--spacing-4: 1rem;
|
||||
--spacing-5: 1.25rem;
|
||||
--spacing-6: 1.5rem;
|
||||
--spacing-8: 2rem;
|
||||
--spacing-10: 2.5rem;
|
||||
--spacing-12: 3rem;
|
||||
--spacing-16: 4rem;
|
||||
--spacing-20: 5rem;
|
||||
--spacing-24: 6rem;
|
||||
--spacing-32: 8rem;
|
||||
--spacing-40: 10rem;
|
||||
--spacing-48: 12rem;
|
||||
--spacing-56: 14rem;
|
||||
--spacing-64: 16rem;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
||||
|
||||
/* Border Radius */
|
||||
--radius-none: 0;
|
||||
--radius-sm: 0.125rem;
|
||||
--radius-base: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-2xl: 1rem;
|
||||
--radius-3xl: 1.5rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Transitions */
|
||||
--transition-none: none;
|
||||
--transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Z-Index */
|
||||
--z-0: 0;
|
||||
--z-10: 10;
|
||||
--z-20: 20;
|
||||
--z-30: 30;
|
||||
--z-40: 40;
|
||||
--z-50: 50;
|
||||
--z-auto: auto;
|
||||
}
|
||||
|
||||
/* Dark mode variables */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--color-secondary-900);
|
||||
--color-foreground: var(--color-secondary-50);
|
||||
--color-muted: var(--color-secondary-800);
|
||||
--color-muted-foreground: var(--color-secondary-400);
|
||||
--color-border: var(--color-secondary-700);
|
||||
--color-input: var(--color-secondary-800);
|
||||
--color-card: var(--color-secondary-800);
|
||||
--color-card-foreground: var(--color-secondary-50);
|
||||
--color-popover: var(--color-secondary-800);
|
||||
--color-popover-foreground: var(--color-secondary-50);
|
||||
}
|
||||
}
|
||||
|
||||
/* Light mode variables */
|
||||
:root {
|
||||
--color-background: var(--color-secondary-50);
|
||||
--color-foreground: var(--color-secondary-900);
|
||||
--color-muted: var(--color-secondary-100);
|
||||
--color-muted-foreground: var(--color-secondary-500);
|
||||
--color-border: var(--color-secondary-200);
|
||||
--color-input: var(--color-secondary-50);
|
||||
--color-card: var(--color-secondary-50);
|
||||
--color-card-foreground: var(--color-secondary-900);
|
||||
--color-popover: var(--color-secondary-50);
|
||||
--color-popover-foreground: var(--color-secondary-900);
|
||||
}
|
||||
|
||||
/* Dark mode override when .dark class is present */
|
||||
.dark {
|
||||
--color-background: var(--color-secondary-900);
|
||||
--color-foreground: var(--color-secondary-50);
|
||||
--color-muted: var(--color-secondary-800);
|
||||
--color-muted-foreground: var(--color-secondary-400);
|
||||
--color-border: var(--color-secondary-700);
|
||||
--color-input: var(--color-secondary-800);
|
||||
--color-card: var(--color-secondary-800);
|
||||
--color-card-foreground: var(--color-secondary-50);
|
||||
--color-popover: var(--color-secondary-800);
|
||||
--color-popover-foreground: var(--color-secondary-50);
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
font-family: var(--font-family-sans);
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Focus styles for accessibility */
|
||||
*:focus {
|
||||
outline: 2px solid var(--color-primary-500);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Skip to content link for accessibility */
|
||||
.skip-to-content {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 6px;
|
||||
background: var(--color-primary-600);
|
||||
color: white;
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-base);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.skip-to-content:focus {
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.loading {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* HTMX indicators */
|
||||
.htmx-indicator {
|
||||
opacity: 0;
|
||||
transition: var(--transition-opacity);
|
||||
}
|
||||
|
||||
.htmx-request .htmx-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.htmx-request.htmx-indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Animation utilities */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-up {
|
||||
animation: slideInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-down {
|
||||
animation: slideInDown 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-full bg-background text-foreground antialiased"
|
||||
x-data="{
|
||||
darkMode: localStorage.getItem('darkMode') === 'true' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches),
|
||||
sidebarOpen: false,
|
||||
searchOpen: false
|
||||
}"
|
||||
x-init="
|
||||
$watch('darkMode', value => {
|
||||
localStorage.setItem('darkMode', value);
|
||||
if (value) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
});
|
||||
if (darkMode) {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
"
|
||||
:class="{ 'dark': darkMode }">
|
||||
|
||||
<!-- Skip to content link for accessibility -->
|
||||
<a href="#main-content" class="skip-to-content">Skip to main content</a>
|
||||
|
||||
<!-- HTMX Configuration -->
|
||||
<div hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="display: none;"></div>
|
||||
|
||||
<!-- Page Layout -->
|
||||
<div class="min-h-full">
|
||||
<!-- Navigation -->
|
||||
{% block navigation %}
|
||||
<nav class="bg-card border-b border-border shadow-sm" role="navigation" aria-label="Main navigation">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<!-- Logo and primary navigation -->
|
||||
<div class="flex">
|
||||
<!-- Logo -->
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<a href="{% url 'home' %}" class="flex items-center space-x-2 text-primary-600 hover:text-primary-700 transition-colors">
|
||||
<svg class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
<span class="font-bold text-xl">ThrillWiki</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Primary navigation -->
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<a href="{% url 'parks:park_list' %}"
|
||||
class="border-transparent text-muted-foreground hover:border-primary-300 hover:text-foreground inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
|
||||
Parks
|
||||
</a>
|
||||
<a href="{% url 'rides:ride_list' %}"
|
||||
class="border-transparent text-muted-foreground hover:border-primary-300 hover:text-foreground inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
|
||||
Rides
|
||||
</a>
|
||||
<a href="{% url 'manufacturers:manufacturer_list' %}"
|
||||
class="border-transparent text-muted-foreground hover:border-primary-300 hover:text-foreground inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
|
||||
Manufacturers
|
||||
</a>
|
||||
<a href="{% url 'operators:operator_list' %}"
|
||||
class="border-transparent text-muted-foreground hover:border-primary-300 hover:text-foreground inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
|
||||
Operators
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search, theme toggle, and user menu -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Search button -->
|
||||
<button @click="searchOpen = true"
|
||||
class="p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
|
||||
aria-label="Open search">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Theme toggle -->
|
||||
<button @click="darkMode = !darkMode"
|
||||
class="p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
|
||||
:aria-label="darkMode ? 'Switch to light mode' : 'Switch to dark mode'">
|
||||
<svg x-show="!darkMode" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
|
||||
</svg>
|
||||
<svg x-show="darkMode" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
|
||||
</svg>
|
||||
</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 p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
|
||||
aria-expanded="false" aria-haspopup="true">
|
||||
<div class="h-6 w-6 bg-primary-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div x-show="open"
|
||||
@click.away="open = false"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
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 mt-2 w-48 bg-popover border border-border rounded-md shadow-lg z-50">
|
||||
<div class="py-1">
|
||||
<a href="{% url 'accounts:profile' %}"
|
||||
class="block px-4 py-2 text-sm text-popover-foreground hover:bg-muted transition-colors">
|
||||
Profile
|
||||
</a>
|
||||
<a href="{% url 'accounts:settings' %}"
|
||||
class="block px-4 py-2 text-sm text-popover-foreground hover:bg-muted transition-colors">
|
||||
Settings
|
||||
</a>
|
||||
{% if user.is_staff %}
|
||||
<a href="{% url 'moderation:dashboard' %}"
|
||||
class="block px-4 py-2 text-sm text-popover-foreground hover:bg-muted transition-colors">
|
||||
Moderation
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="border-t border-border my-1"></div>
|
||||
<form method="post" action="{% url 'account_logout' %}" class="block">
|
||||
{% csrf_token %}
|
||||
<button type="submit"
|
||||
class="w-full text-left px-4 py-2 text-sm text-popover-foreground hover:bg-muted transition-colors">
|
||||
Sign out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="{% url 'account_login' %}"
|
||||
class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
|
||||
Sign in
|
||||
</a>
|
||||
<a href="{% url 'account_signup' %}"
|
||||
class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<button @click="sidebarOpen = true"
|
||||
class="sm:hidden p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
|
||||
aria-label="Open mobile menu">
|
||||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endblock navigation %}
|
||||
|
||||
<!-- Mobile sidebar -->
|
||||
<div x-show="sidebarOpen"
|
||||
class="fixed inset-0 z-50 sm:hidden"
|
||||
x-transition:enter="transition-opacity ease-linear duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition-opacity ease-linear duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0">
|
||||
<!-- Backdrop -->
|
||||
<div class="fixed inset-0 bg-black bg-opacity-25" @click="sidebarOpen = false"></div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="fixed inset-y-0 right-0 max-w-xs w-full bg-card shadow-xl"
|
||||
x-transition:enter="transition ease-in-out duration-300 transform"
|
||||
x-transition:enter-start="translate-x-full"
|
||||
x-transition:enter-end="translate-x-0"
|
||||
x-transition:leave="transition ease-in-out duration-300 transform"
|
||||
x-transition:leave-start="translate-x-0"
|
||||
x-transition:leave-end="translate-x-full">
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex items-center justify-between p-4 border-b border-border">
|
||||
<h2 class="text-lg font-semibold">Menu</h2>
|
||||
<button @click="sidebarOpen = false"
|
||||
class="p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
|
||||
aria-label="Close mobile menu">
|
||||
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 px-4 py-6 space-y-2">
|
||||
<a href="{% url 'parks:park_list' %}"
|
||||
class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors">
|
||||
Parks
|
||||
</a>
|
||||
<a href="{% url 'rides:ride_list' %}"
|
||||
class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors">
|
||||
Rides
|
||||
</a>
|
||||
<a href="{% url 'manufacturers:manufacturer_list' %}"
|
||||
class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors">
|
||||
Manufacturers
|
||||
</a>
|
||||
<a href="{% url 'operators:operator_list' %}"
|
||||
class="block px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors">
|
||||
Operators
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Modal -->
|
||||
<div x-show="searchOpen"
|
||||
class="fixed inset-0 z-50"
|
||||
x-transition:enter="transition-opacity ease-linear duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition-opacity ease-linear duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0">
|
||||
<!-- Backdrop -->
|
||||
<div class="fixed inset-0 bg-black bg-opacity-25" @click="searchOpen = false"></div>
|
||||
|
||||
<!-- Search Modal -->
|
||||
<div class="fixed inset-x-0 top-0 max-w-2xl mx-auto mt-16 bg-card border border-border rounded-lg shadow-xl"
|
||||
x-transition:enter="transition ease-out duration-300 transform"
|
||||
x-transition:enter-start="opacity-0 scale-95 translate-y-4"
|
||||
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-200 transform"
|
||||
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 scale-95 translate-y-4">
|
||||
<div class="p-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="h-5 w-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
<input type="text"
|
||||
placeholder="Search parks, rides, manufacturers..."
|
||||
class="flex-1 bg-transparent border-none outline-none text-foreground placeholder-muted-foreground"
|
||||
hx-get="{% url 'search:global_search' %}"
|
||||
hx-trigger="keyup changed delay:300ms"
|
||||
hx-target="#search-results"
|
||||
hx-indicator="#search-loading"
|
||||
x-ref="searchInput">
|
||||
<button @click="searchOpen = false"
|
||||
class="p-1 text-muted-foreground hover:text-foreground transition-colors"
|
||||
aria-label="Close search">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Results -->
|
||||
<div class="mt-4 max-h-96 overflow-y-auto">
|
||||
<div id="search-loading" class="htmx-indicator flex items-center justify-center py-8">
|
||||
<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-500"></div>
|
||||
</div>
|
||||
<div id="search-results" class="space-y-2">
|
||||
<!-- Search results will be loaded here via HTMX -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main id="main-content" class="flex-1" role="main">
|
||||
<!-- Page Header -->
|
||||
{% block page_header %}{% endblock %}
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
{% block breadcrumbs %}{% endblock %}
|
||||
|
||||
<!-- Messages/Alerts -->
|
||||
{% if messages %}
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
{% for message in messages %}
|
||||
<div class="mb-4 p-4 rounded-md animate-slide-in-down
|
||||
{% if message.tags == 'error' %}bg-error-50 border border-error-200 text-error-800 dark:bg-error-900/20 dark:border-error-800 dark:text-error-200
|
||||
{% elif message.tags == 'warning' %}bg-warning-50 border border-warning-200 text-warning-800 dark:bg-warning-900/20 dark:border-warning-800 dark:text-warning-200
|
||||
{% elif message.tags == 'success' %}bg-success-50 border border-success-200 text-success-800 dark:bg-success-900/20 dark:border-success-800 dark:text-success-200
|
||||
{% else %}bg-primary-50 border border-primary-200 text-primary-800 dark:bg-primary-900/20 dark:border-primary-800 dark:text-primary-200
|
||||
{% endif %}"
|
||||
x-data="{ show: true }"
|
||||
x-show="show"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
{% if message.tags == 'error' %}
|
||||
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
{% elif message.tags == 'warning' %}
|
||||
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
{% elif message.tags == 'success' %}
|
||||
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
{% else %}
|
||||
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
<span>{{ message }}</span>
|
||||
</div>
|
||||
<button @click="show = false"
|
||||
class="ml-4 text-current hover:opacity-75 transition-opacity"
|
||||
aria-label="Dismiss message">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Page Content -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
{% block footer %}
|
||||
<footer class="bg-card border-t border-border mt-auto" role="contentinfo">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<!-- Brand -->
|
||||
<div class="col-span-1 md:col-span-2">
|
||||
<div class="flex items-center space-x-2 text-primary-600 mb-4">
|
||||
<svg class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
<span class="font-bold text-xl">ThrillWiki</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground mb-4 max-w-md">
|
||||
Your comprehensive guide to theme parks and roller coasters around the world.
|
||||
Discover, explore, and share your passion for thrills.
|
||||
</p>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="text-muted-foreground hover:text-foreground transition-colors" aria-label="Twitter">
|
||||
<svg class="h-5 w-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="text-muted-foreground hover:text-foreground transition-colors" aria-label="GitHub">
|
||||
<svg class="h-5 w-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>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-foreground uppercase tracking-wider mb-4">Explore</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="{% url 'parks:park_list' %}" class="text-muted-foreground hover:text-foreground transition-colors">Parks</a></li>
|
||||
<li><a href="{% url 'rides:ride_list' %}" class="text-muted-foreground hover:text-foreground transition-colors">Rides</a></li>
|
||||
<li><a href="{% url 'manufacturers:manufacturer_list' %}" class="text-muted-foreground hover:text-foreground transition-colors">Manufacturers</a></li>
|
||||
<li><a href="{% url 'operators:operator_list' %}" class="text-muted-foreground hover:text-foreground transition-colors">Operators</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Legal -->
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-foreground uppercase tracking-wider mb-4">Legal</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="{% url 'pages:privacy' %}" class="text-muted-foreground hover:text-foreground transition-colors">Privacy Policy</a></li>
|
||||
<li><a href="{% url 'pages:terms' %}" class="text-muted-foreground hover:text-foreground transition-colors">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-8 border-t border-border">
|
||||
<p class="text-center text-muted-foreground text-sm">
|
||||
© {{ current_year|default:"2024" }} ThrillWiki. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{% endblock footer %}
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
{% load static %}
|
||||
<script src="{% static 'js/alpine.min.js' %}" defer></script>
|
||||
<script src="{% static 'js/cdn.min.js' %}"></script>
|
||||
|
||||
<!-- HTMX Configuration -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Configure HTMX
|
||||
htmx.config.globalViewTransitions = true;
|
||||
htmx.config.useTemplateFragments = true;
|
||||
|
||||
// Add loading states
|
||||
document.body.addEventListener('htmx:beforeRequest', function(evt) {
|
||||
evt.target.classList.add('loading');
|
||||
});
|
||||
|
||||
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
||||
evt.target.classList.remove('loading');
|
||||
});
|
||||
|
||||
// Handle search modal focus
|
||||
document.body.addEventListener('alpine:init', function() {
|
||||
Alpine.data('searchModal', () => ({
|
||||
open: false,
|
||||
toggle() {
|
||||
this.open = !this.open;
|
||||
if (this.open) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchInput.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(e) {
|
||||
// Cmd/Ctrl + K to open search
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
Alpine.store('search').toggle();
|
||||
}
|
||||
|
||||
// Escape to close modals
|
||||
if (e.key === 'Escape') {
|
||||
// Close search modal
|
||||
if (Alpine.store('search') && Alpine.store('search').open) {
|
||||
Alpine.store('search').open = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user