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

assets/css/src/input.css

@@ -61,15 +61,15 @@
     }
 
     .status-operating {
-        @apply text-green-800 bg-green-100 dark:bg-green-800/30 dark:text-green-100 dark:ring-1 dark:ring-green-400/30;
+        @apply text-green-800 bg-green-100 dark:bg-green-700 dark:text-green-50;
     }
 
     .status-closed {
-        @apply text-red-800 bg-red-100 dark:bg-red-800/30 dark:text-red-100 dark:ring-1 dark:ring-red-400/30;
+        @apply text-red-800 bg-red-100 dark:bg-red-700 dark:text-red-50;
     }
 
     .status-construction {
-        @apply text-yellow-800 bg-yellow-100 dark:bg-yellow-800/30 dark:text-yellow-100 dark:ring-1 dark:ring-yellow-400/30;
+        @apply text-yellow-800 bg-yellow-100 dark:bg-yellow-600 dark:text-yellow-50;
     }
 
     /* Auth Card Styles */
@@ -134,4 +134,9 @@
     .alert-info {
         @apply text-blue-800 border border-blue-200 bg-blue-100/90 dark:bg-blue-800/30 dark:text-blue-100 dark:border-blue-700;
     }
+
+    /* Turnstile Widget */
+    .turnstile {
+        @apply flex justify-center items-center my-4;
+    }
 }

static/css/tailwind.css

@@ -1772,13 +1772,10 @@ select {
 }
 
 .status-operating:is(.dark *) {
-  background-color: rgb(22 101 52 / 0.3);
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(220 252 231 / var(--tw-text-opacity));
+  color: rgb(240 253 244 / var(--tw-text-opacity));
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-color: rgb(74 222 128 / 0.3);
 }
 
 .status-closed {
@@ -1789,13 +1786,10 @@ select {
 }
 
 .status-closed:is(.dark *) {
-  background-color: rgb(153 27 27 / 0.3);
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(254 226 226 / var(--tw-text-opacity));
+  color: rgb(254 242 242 / var(--tw-text-opacity));
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-color: rgb(248 113 113 / 0.3);
 }
 
 .status-construction {
@@ -1806,13 +1800,10 @@ select {
 }
 
 .status-construction:is(.dark *) {
-  background-color: rgb(133 77 14 / 0.3);
+  --tw-bg-opacity: 1;
+  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(254 249 195 / var(--tw-text-opacity));
+  color: rgb(254 252 232 / var(--tw-text-opacity));
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-color: rgb(250 204 21 / 0.3);
 }
 
 /* Auth Card Styles */
@@ -2085,6 +2076,16 @@ select {
   color: rgb(219 234 254 / var(--tw-text-opacity));
 }
 
+/* Turnstile Widget */
+
+.turnstile {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .static {
   position: static;
 }
@@ -3132,6 +3133,11 @@ select {
   background-color: rgb(96 165 250 / 0.3);
 }
 
+.dark\:bg-blue-700:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-blue-800\/30:is(.dark *) {
   background-color: rgb(30 64 175 / 0.3);
 }
@@ -3167,10 +3173,20 @@ select {
   background-color: rgb(31 41 55 / 0.9);
 }
 
+.dark\:bg-green-700:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-green-800\/30:is(.dark *) {
   background-color: rgb(22 101 52 / 0.3);
 }
 
+.dark\:bg-red-700:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-red-800\/30:is(.dark *) {
   background-color: rgb(153 27 27 / 0.3);
 }
@@ -3179,6 +3195,11 @@ select {
   background-color: rgb(250 204 21 / 0.3);
 }
 
+.dark\:bg-yellow-600:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-yellow-800\/30:is(.dark *) {
   background-color: rgb(133 77 14 / 0.3);
 }
@@ -3213,6 +3234,11 @@ select {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+.dark\:text-blue-50:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(239 246 255 / var(--tw-text-opacity));
+}
+
 .dark\:text-gray-200:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -3258,6 +3284,11 @@ select {
   color: rgb(253 224 71 / var(--tw-text-opacity));
 }
 
+.dark\:text-yellow-50:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(254 252 232 / var(--tw-text-opacity));
+}
+
 .dark\:ring-1:is(.dark *) {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);

static/images/discord-icon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
-  <path fill="#7289DA" d="M104.4 0c-1.2 0-2.3.5-3.1 1.4-19.7 21.6-31.4 48.5-31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 19.7 21.6 31.4 48.5 31.4 77.1 0 1.2.5 2.3 1.4 3.1 8.8 9.6 18.3 18.6 28.6 26.9 1.8 1.6 3.7 2.7 5.7 3.3 1.1.3 2.2.6 3.3.8 20.8 3.8 42.5 5.7 64.9 5.7 22.4 0 44.1-1.9 64.9-5.7 1.1-.3 2.2-.6 3.3-.8 2-0.6 3.9-1.7 5.7-3.3 10.3-8.3 19.8-17.3 28.6-26.9.9-.8 1.4-1.7 1.4-3.1 0-29-9.7-55.5-31.4-77.1-.9-.8-1.8-1.4-3.1-1.4-29 0-55.5 9.7-77.1 31.4-.8.9-1.4 1.8-1.4 3.1 0 29 9.7 55.5 31.4 77.1-.9.8-1.8 1.4-3.1 1.4-29 0-55.5 9.7-77.1 31.4-.8.9-1.4 1.8-1.4 3.1 0 29 9.7 55.5 31.4 77.1-.9.8-1.8 1.4-3.1 1.4-29 0-55.5 9.7-77.1 31.4-.8.9-1.4 1.8-1.4 3.1 0 29 9.7 55.5 31.4 77.1-.9.8-1.8 1.4-3.1 1.4-29 0-55.5 9.7-77.1 31.4-.8.9-1.4 1.8-1.4 3.1 0 29 9.7 55.5 31.4 77.1-.9.8-1.8 1.4-3.1 1.4-29 0-55.5 9.7-77.1 31.4-.8.9-1.4 1.8-1.4 3.1 0 29 9.7 55.5 31.4 77.1-.9.8-1.8 1.4-3.1 1.4-29 0-55.5 9.7-77.1 31.4-.8.9-1.4 1.8-1.4 3.1 0 29 9.7 55.5 31.4 77.1-.9.8-1.8 1.4-3.1 1.4-29 0-55.5 9.7-77.1 31.4-.8.9-1.4 1.8-1.4 3.1 0 29 9.7 55.5 31.4 77.1-.9.8-1.8 1.4-3.1 1.4zM169.7 107.1c-20.8 0-38.5 8.3-52.2 20.8-1.6 1.6-2.6 3.7-3.1 5.9-.7 3.1-1 6.3-1 9.6 0 13.5 10.9 24.4 24.4 24.4 13.5 0 24.4-10.9 24.4-24.4 0-3.3-.4-6.5-1-9.6-.5-2.2-1.5-4.3-3.1-5.9-13.7-12.5-31.4-20.8-52.2-20.8zm82.3 0c-20.8 0-38.5 8.3-52.2 20.8-1.6 1.6-2.6 3.7-3.1 5.9-.7 3.1-1 6.3-1 9.6 0 13.5 10.9 24.4 24.4 24.4 13.5 0 24.4-10.9 24.4-24.4 0-3.3-.4-6.5-1-9.6-.5-2.2-1.5-4.3-3.1-5.9-13.7-12.5-31.4-20.8-52.2-20.8z"/>
+  <path fill="#5865f2" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
 </svg>

static/js/main.js

@@ -81,23 +81,64 @@ document.addEventListener('click', (e) => {
     });
 });
 
-// Toggle dark mode icons
+// Theme management
-function toggleIcons(isDarkMode) {
+const themeManager = {
-    const sunIcon = document.querySelector('.fa-sun');
+    init() {
-    const moonIcon = document.querySelector('.fa-moon');
+        // Set up toggle button when DOM is loaded
+        document.addEventListener('DOMContentLoaded', () => {
+            const toggleBtn = document.getElementById('theme-toggle');
+            if (toggleBtn) {
+                toggleBtn.addEventListener('click', () => {
+                    this.toggleTheme();
+                });
+            }
 
-    if (isDarkMode) {
+            // 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');
             }
-}
+        }
+    }
+};
 
-// Add event listener for theme toggle button
+// Initialize theme management
-document.getElementById('theme-toggle').addEventListener('click', () => {
+themeManager.init();
-    const isDarkMode = document.documentElement.classList.toggle('dark');
-    localStorage.setItem('darkMode', isDarkMode);
-    toggleIcons(isDarkMode);
-});

templates/account/login.html

@@ -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>

templates/account/signup.html

@@ -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>

templates/accounts/turnstile_widget.html

@@ -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>

templates/base/base.html

@@ -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="text-lg fas fa-moon"></i>
-                        <i class="hidden text-lg fas fa-moon"></i>
                     </button>
 
                     <!-- User Menu -->

templates/rides/ride_detail.html

@@ -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 
+                    <span class="status-badge {% if ride.status == 'OPERATING' %}status-operating
-                        {% if ride.status == 'OPERATING' %}bg-green-100 text-green-800
+                        {% elif ride.status == 'CLOSED' %}status-closed
-                        {% elif ride.status == 'CLOSED' %}bg-red-100 text-red-800
+                        {% else %}status-construction{% endif %}">
-                        {% else %}bg-gray-100 text-gray-800{% 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="status-badge bg-yellow-100 text-yellow-800 dark:bg-yellow-600 dark:text-yellow-50 flex items-center">
-                            <span class="text-yellow-500 mr-1">★</span>
+                            <span class="text-yellow-500 dark:text-yellow-200 mr-1">★</span>
                             {{ ride.average_rating|floatformat:1 }}/10
                         </span>
                     {% endif %}