fixed some thing, fixed turnstile and the ride link i think

This commit is contained in:
pacnpal
2024-10-29 16:47:10 -04:00
parent c0e5a1a21c
commit 7b8ca127a5
9 changed files with 135 additions and 123 deletions

View File

@@ -23,10 +23,10 @@
tabindex="0"
onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }">
{% if provider.id == 'google' %}
<i class="fab fa-google w-5 h-5 mr-3"></i>
<img src="{% static 'images/google-icon.svg' %}" alt="Google" class="w-5 h-5 mr-3">
<span>Continue with Google</span>
{% elif provider.id == 'discord' %}
<i class="fab fa-discord w-5 h-5 mr-3"></i>
<img src="{% static 'images/discord-icon.svg' %}" alt="Discord" class="w-5 h-5 mr-3">
<span>Continue with Discord</span>
{% endif %}
</a>

View File

@@ -24,10 +24,10 @@
onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
>
{% if provider.id == 'google' %}
<i class="fab fa-google w-5 h-5 mr-3"></i>
<img src="{% static 'images/google-icon.svg' %}" alt="Google" class="w-5 h-5 mr-3">
<span>Continue with Google</span>
{% elif provider.id == 'discord' %}
<i class="fab fa-discord w-5 h-5 mr-3"></i>
<img src="{% static 'images/discord-icon.svg' %}" alt="Discord" class="w-5 h-5 mr-3">
<span>Continue with Discord</span>
{% endif %}
</a>

View File

@@ -1,2 +1,4 @@
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="{{ site_key }}" data-theme="light"></div>
<div class="turnstile">
<div class="cf-turnstile" data-sitekey="{{ site_key }}" data-theme="light"></div>
</div>

View File

@@ -34,71 +34,6 @@
{% block extra_head %}{% endblock %}
<!-- Theme Management -->
<script>
// Theme management
const themeManager = {
init() {
// Set up toggle button when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
const toggleBtn = document.getElementById('theme-toggle');
if (toggleBtn) {
toggleBtn.addEventListener('click', () => {
this.toggleTheme();
});
}
// Watch for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.theme) {
this.setTheme(e.matches ? 'dark' : 'light');
}
});
// Set initial theme icon state
this.updateThemeIcon();
});
},
setTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.setItem('theme', theme);
this.updateThemeIcon();
},
toggleTheme() {
const isDark = document.documentElement.classList.contains('dark');
this.setTheme(isDark ? 'light' : 'dark');
},
updateThemeIcon() {
const isDark = document.documentElement.classList.contains('dark');
const sunIcon = document.querySelector('#theme-toggle .fa-sun');
const moonIcon = document.querySelector('#theme-toggle .fa-moon');
if (sunIcon && moonIcon) {
// Show sun icon in dark mode (to indicate you can switch to light)
// Show moon icon in light mode (to indicate you can switch to dark)
if (isDark) {
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
} else {
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
}
}
}
};
// Initialize theme management
themeManager.init();
</script>
<style>
/* Smooth theme transitions */
:root {
@@ -161,8 +96,7 @@
<div class="flex items-center space-x-6">
<!-- Theme Toggle -->
<button id="theme-toggle" class="inline-flex items-center justify-center p-2 text-gray-500 transition-all border border-gray-200 rounded-lg bg-white/80 dark:bg-gray-700/80 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 dark:border-gray-600">
<i class="hidden text-lg fas fa-sun"></i>
<i class="hidden text-lg fas fa-moon"></i>
<i class="text-lg fas fa-moon"></i>
</button>
<!-- User Menu -->

View File

@@ -11,7 +11,7 @@
<div>
<h1 class="text-3xl font-bold mb-2">{{ ride.name }}</h1>
<p class="text-gray-600 dark:text-gray-400 mb-2">
at <a href="{{ ride.park.get_absolute_url }}" class="text-blue-500 hover:text-blue-600">
at <a href="{% url 'parks:park_detail' ride.park.slug %}" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
{{ ride.park.name }}
</a>
{% if ride.area %}
@@ -19,18 +19,17 @@
{% endif %}
</p>
<div class="flex flex-wrap gap-2 mt-3">
<span class="px-3 py-1 rounded-full text-sm
{% if ride.status == 'OPERATING' %}bg-green-100 text-green-800
{% elif ride.status == 'CLOSED' %}bg-red-100 text-red-800
{% else %}bg-gray-100 text-gray-800{% endif %}">
<span class="status-badge {% if ride.status == 'OPERATING' %}status-operating
{% elif ride.status == 'CLOSED' %}status-closed
{% else %}status-construction{% endif %}">
{{ ride.get_status_display }}
</span>
<span class="px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm">
<span class="status-badge bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-50">
{{ ride.get_category_display }}
</span>
{% if ride.average_rating %}
<span class="px-3 py-1 rounded-full bg-yellow-100 text-yellow-800 text-sm flex items-center">
<span class="text-yellow-500 mr-1"></span>
<span class="status-badge bg-yellow-100 text-yellow-800 dark:bg-yellow-600 dark:text-yellow-50 flex items-center">
<span class="text-yellow-500 dark:text-yellow-200 mr-1"></span>
{{ ride.average_rating|floatformat:1 }}/10
</span>
{% endif %}