mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 08:11:08 -05:00
7d745cd517
Integrates django-cotton into the project by adding it to INSTALLED_APPS and pyproject.toml, and refactors base.html to use cotton components for the auth modal and toast container, creating new component files for these elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/jGCMVeA
148 lines
4.6 KiB
HTML
148 lines
4.6 KiB
HTML
{% load static %}
|
|
{% load cotton %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="csrf-token" content="{{ csrf_token }}" />
|
|
<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>
|
|
let theme = localStorage.getItem("theme");
|
|
if (!theme) {
|
|
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
localStorage.setItem("theme", theme);
|
|
}
|
|
if (theme === "dark") {
|
|
document.documentElement.classList.add("dark");
|
|
}
|
|
</script>
|
|
|
|
<!-- HTMX -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
|
|
|
|
<!-- Alpine.js Components (must load before Alpine.js) -->
|
|
<script src="{% static 'js/alpine-components.js' %}?v={{ version|default:'1.0' }}"></script>
|
|
|
|
<!-- Alpine.js (must load after components) -->
|
|
<script defer src="{% static 'js/alpine.min.js' %}?v={{ version|default:'1.0' }}"></script>
|
|
|
|
<!-- Location Autocomplete -->
|
|
<script defer src="{% static 'js/location-autocomplete.js' %}?v={{ version|default:'1.0' }}"></script>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'css/components.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'css/alerts.css' %}" rel="stylesheet" />
|
|
|
|
<!-- Font Awesome -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
/>
|
|
|
|
<style>
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
right: 0;
|
|
margin-top: 0.5rem;
|
|
width: 12rem;
|
|
border-radius: 0.375rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
z-index: 50;
|
|
overflow: hidden;
|
|
}
|
|
.htmx-indicator {
|
|
display: none;
|
|
}
|
|
.htmx-request .htmx-indicator {
|
|
display: block;
|
|
}
|
|
.htmx-request.htmx-indicator {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
{% block extra_head %}{% endblock %}
|
|
</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"
|
|
>
|
|
<!-- Enhanced Header -->
|
|
{% include 'components/layout/enhanced_header.html' %}
|
|
|
|
<!-- Flash Messages -->
|
|
{% if messages %}
|
|
<div class="fixed top-0 right-0 z-50 p-4 space-y-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>
|
|
|
|
<!-- Global Auth Modal (Cotton Component) -->
|
|
<c-auth.modal />
|
|
|
|
<!-- Global Toast Container (Cotton Component) -->
|
|
<c-ui.toast />
|
|
|
|
<!-- Custom JavaScript with cache control -->
|
|
<script src="{% static 'js/main.js' %}?v={{ version|default:'1.0' }}"></script>
|
|
<script src="{% static 'js/alerts.js' %}?v={{ version|default:'1.0' }}"></script>
|
|
|
|
<!-- Cache control meta tag -->
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
<meta http-equiv="Expires" content="0">
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html>
|