mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 08:51:09 -05:00
Add version control context processor and integrate map functionality with dedicated JavaScript
This commit is contained in:
pacnpal
169
templates/base.html
Normal file
169
templates/base.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}ThrillWiki{% endblock %}</title>
|
||||
|
||||
<!-- CSRF Token -->
|
||||
{% csrf_token %}
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
|
||||
|
||||
<!-- HTMX -->
|
||||
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||||
|
||||
<!-- Alpine.js -->
|
||||
<script defer src="https://unpkg.com/alpinejs@3.13.5/dist/cdn.min.js"></script>
|
||||
|
||||
<!-- Leaflet for maps -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
|
||||
<!-- Version Control Assets -->
|
||||
<link href="{% static 'css/version-control.css' %}" rel="stylesheet">
|
||||
<script src="{% static 'js/version-control.js' %}" defer></script>
|
||||
|
||||
<!-- Custom Styles -->
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
<!-- Header -->
|
||||
<header class="bg-white shadow-sm">
|
||||
<nav class="container mx-auto px-4 py-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<a href="{% url 'home' %}" class="text-2xl font-bold text-blue-600">
|
||||
ThrillWiki
|
||||
</a>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="hidden md:flex space-x-6">
|
||||
<a href="{% url 'parks:park_list' %}" class="text-gray-600 hover:text-gray-900">Parks</a>
|
||||
<a href="{% url 'rides:ride_list' %}" class="text-gray-600 hover:text-gray-900">Rides</a>
|
||||
<a href="{% url 'companies:company_list' %}" class="text-gray-600 hover:text-gray-900">Companies</a>
|
||||
</div>
|
||||
|
||||
<!-- User Menu -->
|
||||
<div class="flex items-center space-x-4">
|
||||
{% if user.is_authenticated %}
|
||||
<div x-data="{ open: false }" class="relative">
|
||||
<button @click="open = !open" class="flex items-center space-x-2">
|
||||
<img src="{{ user.get_avatar_url }}"
|
||||
alt="{{ user.username }}"
|
||||
class="h-8 w-8 rounded-full">
|
||||
<span class="text-gray-700">{{ user.username }}</span>
|
||||
</button>
|
||||
|
||||
<div x-show="open"
|
||||
@click.away="open = false"
|
||||
class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
|
||||
<a href="{% url 'profile' user.username %}"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
Profile
|
||||
</a>
|
||||
<a href="{% url 'settings' %}"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
Settings
|
||||
</a>
|
||||
<form method="post" action="{% url 'account_logout' %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
Sign Out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a href="{% url 'account_login' %}"
|
||||
class="text-gray-600 hover:text-gray-900">
|
||||
Sign In
|
||||
</a>
|
||||
<a href="{% url 'account_signup' %}"
|
||||
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
|
||||
Sign Up
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="py-8">
|
||||
{% if messages %}
|
||||
<div class="container mx-auto px-4 mb-8">
|
||||
{% for message in messages %}
|
||||
<div class="p-4 {% if message.tags == 'success' %}bg-green-100 text-green-700{% elif message.tags == 'error' %}bg-red-100 text-red-700{% else %}bg-blue-100 text-blue-700{% endif %} rounded-lg">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white border-t mt-auto">
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">About</h3>
|
||||
<p class="text-gray-600">
|
||||
ThrillWiki is your source for theme park and attraction information.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">Explore</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="{% url 'parks:park_list' %}" class="text-gray-600 hover:text-gray-900">Parks</a></li>
|
||||
<li><a href="{% url 'rides:ride_list' %}" class="text-gray-600 hover:text-gray-900">Rides</a></li>
|
||||
<li><a href="{% url 'companies:company_list' %}" class="text-gray-600 hover:text-gray-900">Companies</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">Legal</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="{% url 'terms' %}" class="text-gray-600 hover:text-gray-900">Terms of Service</a></li>
|
||||
<li><a href="{% url 'privacy' %}" class="text-gray-600 hover:text-gray-900">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">Connect</h3>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Twitter</span>
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 border-t pt-8 text-center text-gray-400">
|
||||
<p>© {% now "Y" %} ThrillWiki. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Extra Scripts -->
|
||||
{% block extra_js %}{% endblock %}
|
||||
|
||||
<!-- Version Control Status -->
|
||||
{% if version_control.current_branch %}
|
||||
<div class="fixed bottom-4 right-4 bg-white rounded-lg shadow-lg p-3 text-sm">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-gray-600">Branch:</span>
|
||||
<span class="font-medium">{{ version_control.branch_name }}</span>
|
||||
{% if version_control.recent_changes %}
|
||||
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">
|
||||
{{ version_control.recent_changes|length }} changes
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user