mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-21 15:11:08 -05:00
b9063ff4f8
- Implemented park detail page with dynamic content loading for rides and weather. - Created park list page with filters and search functionality. - Developed ride detail page showcasing ride stats, reviews, and similar rides. - Added ride list page with filtering options and dynamic loading. - Introduced search results page with tabs for parks, rides, and users. - Added HTMX tests for global search functionality.
131 lines
5.8 KiB
HTML
131 lines
5.8 KiB
HTML
{% load static %}
|
|
<!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 %}{% 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 %}{% static 'images/twitter-default.jpg' %}{% endblock %}">
|
|
|
|
<title>{% block title %}ThrillWiki{% endblock %}</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS -->
|
|
<link href="{% static 'css/design-tokens.css' %}" rel="stylesheet">
|
|
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
|
|
{% block extra_css %}{% endblock %}
|
|
|
|
<!-- HTMX -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
|
|
<!-- Alpine.js -->
|
|
<script defer src="https://unpkg.com/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
|
|
<script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
<!-- App Scripts -->
|
|
<script src="{% static 'js/stores/index.js' %}"></script>
|
|
</head>
|
|
<body class="h-full font-sans antialiased bg-background text-foreground"
|
|
x-data
|
|
:class="{ 'dark': $store.theme.isDark }">
|
|
|
|
<!-- Skip to content link for accessibility -->
|
|
<a href="#main-content" class="z-50 px-4 py-2 rounded-md sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary text-primary-foreground">
|
|
Skip to main content
|
|
</a>
|
|
|
|
<!-- HTMX Configuration -->
|
|
<div hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="display: none;"></div>
|
|
|
|
<div class="flex flex-col min-h-full">
|
|
<!-- Navigation -->
|
|
{% block navigation %}
|
|
{% include "components/navigation/navbar.html" %}
|
|
{% endblock navigation %}
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" class="flex-1" role="main">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
{% block footer %}
|
|
{% include "components/navigation/footer.html" %}
|
|
{% endblock footer %}
|
|
</div>
|
|
|
|
<!-- Global Components -->
|
|
{% include "components/ui/toast-container.html" %}
|
|
|
|
<!-- 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('htmx-request');
|
|
});
|
|
|
|
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
|
evt.target.classList.remove('htmx-request');
|
|
});
|
|
|
|
// Handle HTMX errors
|
|
document.body.addEventListener('htmx:responseError', function(evt) {
|
|
const xhr = evt.detail.xhr;
|
|
if (xhr.status >= 500) {
|
|
Alpine.store('toast').error('Server error. Please try again later.');
|
|
} else if (xhr.status === 403) {
|
|
Alpine.store('toast').error('You do not have permission to perform this action.');
|
|
} else if (xhr.status === 404) {
|
|
Alpine.store('toast').error('Resource not found.');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Auth Context -->
|
|
<script>
|
|
window.__AUTH_USER__ = {% if user.is_authenticated %}{
|
|
id: {{ user.id }},
|
|
username: "{{ user.username }}",
|
|
email: "{{ user.email }}",
|
|
avatar: "{{ user.profile.avatar.url|default:'' }}"
|
|
}{% else %}null{% endif %};
|
|
|
|
window.__AUTH_PERMISSIONS__ = [
|
|
{% for perm in user.get_all_permissions %}
|
|
"{{ perm }}",
|
|
{% endfor %}
|
|
];
|
|
</script>
|
|
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html>
|