right

templates/account/login.html

@@ -8,112 +8,144 @@
 
 {% block content %}
 <div class="flex items-center justify-center min-h-[calc(100vh-16rem)]">
-    <div class="w-full max-w-md">
-        <div class="auth-card">
-            <h1 class="auth-title">{% trans "Welcome Back" %}</h1>
+  <div class="w-full max-w-lg">
+    <div class="auth-card">
+      <h1 class="auth-title">{% trans "Welcome Back" %}</h1>
 
-            {% get_providers as socialaccount_providers %}
-            
-            {% if socialaccount_providers %}
-                <div class="space-y-3">
-                    {% for provider in socialaccount_providers %}
-                        <a href="{% provider_login_url provider.id process='login' %}"
-                           class="btn-social {% if provider.id == 'discord' %}btn-discord{% elif provider.id == 'google' %}btn-google{% endif %}"
-                           role="button"
-                           tabindex="0"
-                           onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }">
-                            {% if provider.id == 'google' %}
-                                <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' %}
-                                <img src="{% static 'images/discord-icon.svg' %}" alt="Discord" class="w-5 h-5 mr-3">
-                                <span>Continue with Discord</span>
-                            {% endif %}
-                        </a>
-                    {% endfor %}
-                </div>
-                
-                <div class="auth-divider">
-                    <span>Or continue with email</span>
-                </div>
-            {% endif %}
+      {% get_providers as socialaccount_providers %}
+      {% if socialaccount_providers %}
+      <div class="space-y-3">
+        {% for provider in socialaccount_providers %}
+        <a
+          href="{% provider_login_url provider.id process='login' %}"
+          class="btn-social {% if provider.id == 'discord' %}btn-discord{% elif provider.id == 'google' %}btn-google{% endif %}"
+          role="button"
+          tabindex="0"
+          onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
+        >
+          {% if provider.id == 'google' %}
+          <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' %}
+          <img
+            src="{% static 'images/discord-icon.svg' %}"
+            alt="Discord"
+            class="w-5 h-5 mr-3"
+          />
+          <span>Continue with Discord</span>
+          {% endif %}
+        </a>
+        {% endfor %}
+      </div>
 
-            <form class="space-y-6" method="POST" action="{% url 'account_login' %}">
-                {% csrf_token %}
-                
-                {% if form.non_field_errors %}
-                    <div class="alert alert-error">
-                        <div class="text-sm">{{ form.non_field_errors }}</div>
-                    </div>
-                {% endif %}
+      <div class="auth-divider">
+        <span>Or continue with email</span>
+      </div>
+      {% endif %}
 
-                <div>
-                    <label for="id_login" class="form-label">
-                        {% trans "Username or Email" %}
-                    </label>
-                    <input type="text" name="login" id="id_login" required
-                           autocomplete="username email"
-                           class="form-input">
-                    {% if form.login.errors %}
-                        <p class="form-error">{{ form.login.errors }}</p>
-                    {% endif %}
-                </div>
-
-                <div>
-                    <label for="id_password" class="form-label">
-                        {% trans "Password" %}
-                    </label>
-                    <input type="password" name="password" id="id_password" required
-                           autocomplete="current-password"
-                           class="form-input">
-                    {% if form.password.errors %}
-                        <p class="form-error">{{ form.password.errors }}</p>
-                    {% endif %}
-                </div>
-
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center">
-                        <input type="checkbox" name="remember" id="id_remember"
-                               class="w-4 h-4 border-gray-300 rounded text-primary focus:ring-primary/50 dark:border-gray-700">
-                        <label for="id_remember" class="block ml-2 text-sm text-gray-700 dark:text-gray-300">
-                            {% trans "Remember me" %}
-                        </label>
-                    </div>
-
-                    <div class="text-sm">
-                        <a href="{% url 'account_reset_password' %}" 
-                           class="font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
-                           onkeydown="if(event.key === 'Enter') { this.click(); }">
-                            {% trans "Forgot Password?" %}
-                        </a>
-                    </div>
-                </div>
-
-                {% turnstile_widget %}
-
-                {% if redirect_field_value %}
-                    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}">
-                {% endif %}
-
-                <div>
-                    <button type="submit" class="w-full btn-primary">
-                        <i class="mr-2 fas fa-sign-in-alt"></i>
-                        {% trans "Sign In" %}
-                    </button>
-                </div>
-            </form>
-
-            <div class="mt-6 text-sm text-center">
-                <p class="text-gray-600 dark:text-gray-400">
-                    {% trans "Don't have an account?" %}
-                    <a href="{% url 'account_signup' %}" 
-                       class="ml-1 font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
-                       onkeydown="if(event.key === 'Enter') { this.click(); }">
-                        {% trans "Sign up" %}
-                    </a>
-                </p>
-            </div>
+      <form class="space-y-6" method="POST" action="{% url 'account_login' %}">
+        {% csrf_token %}
+        {% if form.non_field_errors %}
+        <div class="alert alert-error">
+          <div class="text-sm">{{ form.non_field_errors }}</div>
         </div>
+        {% endif %}
+
+        <div>
+          <label for="id_login" class="form-label">
+            {% trans "Username or Email" %}
+          </label>
+          <input
+            type="text"
+            name="login"
+            id="id_login"
+            required
+            autocomplete="username email"
+            class="form-input"
+          />
+          {% if form.login.errors %}
+          <p class="form-error">{{ form.login.errors }}</p>
+          {% endif %}
+        </div>
+
+        <div>
+          <label for="id_password" class="form-label">
+            {% trans "Password" %}
+          </label>
+          <input
+            type="password"
+            name="password"
+            id="id_password"
+            required
+            autocomplete="current-password"
+            class="form-input"
+          />
+          {% if form.password.errors %}
+          <p class="form-error">{{ form.password.errors }}</p>
+          {% endif %}
+        </div>
+
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <input
+              type="checkbox"
+              name="remember"
+              id="id_remember"
+              class="w-4 h-4 border-gray-300 rounded text-primary focus:ring-primary/50 dark:border-gray-700"
+            />
+            <label
+              for="id_remember"
+              class="block ml-2 text-sm text-gray-700 dark:text-gray-300"
+            >
+              {% trans "Remember me" %}
+            </label>
+          </div>
+
+          <div class="text-sm">
+            <a
+              href="{% url 'account_reset_password' %}"
+              class="font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
+              onkeydown="if(event.key === 'Enter') { this.click(); }"
+            >
+              {% trans "Forgot Password?" %}
+            </a>
+          </div>
+        </div>
+
+        {% turnstile_widget %}
+        {% if redirect_field_value %}
+        <input
+          type="hidden"
+          name="{{ redirect_field_name }}"
+          value="{{ redirect_field_value }}"
+        />
+        {% endif %}
+
+        <div>
+          <button type="submit" class="w-full btn-primary">
+            <i class="mr-2 fas fa-sign-in-alt"></i>
+            {% trans "Sign In" %}
+          </button>
+        </div>
+      </form>
+
+      <div class="mt-6 text-sm text-center">
+        <p class="text-gray-600 dark:text-gray-400">
+          {% trans "Don't have an account?" %}
+          <a
+            href="{% url 'account_signup' %}"
+            class="ml-1 font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
+            onkeydown="if(event.key === 'Enter') { this.click(); }"
+          >
+            {% trans "Sign up" %}
+          </a>
+        </p>
+      </div>
     </div>
+  </div>
 </div>
 {% endblock %}

templates/account/signup.html

@@ -8,7 +8,7 @@
 
 {% block content %}
 <div class="flex items-center justify-center min-h-[calc(100vh-16rem)]">
-  <div class="w-full max-w-md">
+  <div class="w-full max-w-lg">
     <div class="auth-card">
       <h1 class="auth-title">{% trans "Create Account" %}</h1>
 
@@ -24,10 +24,18 @@
           onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
         >
           {% if provider.id == 'google' %}
-          <img src="{% static 'images/google-icon.svg' %}" alt="Google" class="w-5 h-5 mr-3">
+          <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' %}
-          <img src="{% static 'images/discord-icon.svg' %}" alt="Discord" class="w-5 h-5 mr-3">
+          <img
+            src="{% static 'images/discord-icon.svg' %}"
+            alt="Discord"
+            class="w-5 h-5 mr-3"
+          />
           <span>Continue with Discord</span>
           {% endif %}
         </a>
@@ -135,8 +143,7 @@
           {% endif %}
         </div>
 
-            {% turnstile_widget %}
-
+        {% turnstile_widget %}
         {% if redirect_field_value %}
         <input
           type="hidden"

templates/accounts/turnstile_widget.html

@@ -1,4 +1,22 @@
-<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+<script
+  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+  async
+  defer
+></script>
 <div class="turnstile">
-    <div class="cf-turnstile" data-sitekey="{{ site_key }}" data-theme="light"></div>
+  <div
+    id="turnstile-widget"
+    class="cf-turnstile"
+    data-sitekey="{{ site_key }}"
+  ></div>
 </div>
+
+<script>
+  // Apply theme to the Turnstile widget based on the retrieved theme
+  document.addEventListener("DOMContentLoaded", function () {
+    const turnstileWidget = document.getElementById("turnstile-widget");
+    if (turnstileWidget) {
+      turnstileWidget.setAttribute("data-theme", theme);
+    }
+  });
+</script>

templates/base/base.html

@@ -1,11 +1,13 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="en">
+  <!-- [Previous head content remains unchanged...] -->
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{% block title %}ThrillWiki{% endblock %}</title>
 
+    <!-- [Previous head content remains unchanged...] -->
     <!-- Google Fonts -->
     <link
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
@@ -14,7 +16,6 @@
 
     <!-- Prevent flash of wrong theme -->
     <script>
-      // Get theme from localStorage or system preference
       let theme = localStorage.getItem("theme");
       if (!theme) {
         theme = window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -22,7 +23,6 @@
           : "light";
         localStorage.setItem("theme", theme);
       }
-      // Apply theme immediately before page loads
       if (theme === "dark") {
         document.documentElement.classList.add("dark");
       }
@@ -41,86 +41,63 @@
     />
 
     {% block extra_head %}{% endblock %}
-
-    <style>
-      /* Smooth theme transitions */
-      :root {
-        --theme-transition-duration: 200ms;
-      }
-
-      body {
-        transition: background-color var(--theme-transition-duration) ease-in-out,
-          color var(--theme-transition-duration) ease-in-out;
-      }
-
-      /* Ensure theme toggle button has consistent size */
-      #theme-toggle {
-        width: 40px;
-        height: 40px;
-        align-items: center;
-        justify-content: center;
-      }
-    </style>
   </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"
-  >
+  <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">
     <!-- Header -->
-    <header
-      class="border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
-    >
-      <nav class="container px-6 py-4 mx-auto">
+    <header class="border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50">
+      <nav class="container mx-auto nav-container">
         <div class="flex items-center justify-between">
           <!-- Logo -->
           <div class="flex items-center">
             <a
               href="{% url 'home' %}"
-              class="px-3 text-2xl font-bold text-transparent transition-transform bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
+              class="font-bold text-transparent transition-transform site-logo bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
             >
               ThrillWiki
             </a>
           </div>
 
-          <!-- Desktop Navigation -->
-          <div class="items-center hidden space-x-8 md:flex">
-            <a href="{% url 'parks:park_list' %}" class="nav-link group">
+          <!-- Navigation Links (Always Visible) -->
+          <div class="flex items-center space-x-2 sm:space-x-4">
+            <a href="{% url 'parks:park_list' %}" class="nav-link">
               <i class="fas fa-map-marker-alt"></i>
               <span>Parks</span>
             </a>
-            <a href="{% url 'rides:ride_list' %}" class="nav-link group">
+            <a href="{% url 'rides:ride_list' %}" class="nav-link">
               <i class="fas fa-rocket"></i>
               <span>Rides</span>
             </a>
           </div>
 
           <!-- Search Bar -->
-          <div class="flex-1 hidden max-w-md mx-8 md:flex">
+          <div class="flex-1 hidden max-w-md mx-8 lg:flex">
             <form action="{% url 'search' %}" method="get" class="w-full">
               <div class="relative">
                 <input
                   type="text"
                   name="q"
                   placeholder="Search parks and rides..."
-                  class="w-full px-4 py-2 text-gray-900 transition-all border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  class="form-input"
                 />
               </div>
             </form>
           </div>
 
           <!-- Right Side Menu -->
-          <div class="flex items-center space-x-6">
+          <div class="flex items-center space-x-2 sm:space-x-6">
             <!-- Theme Toggle -->
             <label for="theme-toggle" class="cursor-pointer">
               <input type="checkbox" id="theme-toggle" class="hidden" />
               <div
-                class="inline-flex items-center justify-center p-2 text-gray-500 transition-all bg-white border border-gray-200 rounded-lg theme-toggle-btn hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600"
+                class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
                 role="button"
                 aria-label="Toggle dark mode"
               >
-                <i class="text-lg fas"></i>
+                <i class="text-xl fas"></i>
               </div>
             </label>
 
+            <!-- [Rest of the content remains unchanged...] -->
             <!-- User Menu -->
             {% if user.is_authenticated %}
             <div class="relative">
@@ -135,9 +112,7 @@
                   class="w-8 h-8 rounded-full ring-2 ring-primary/20"
                 />
                 {% else %}
-                <div
-                  class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-gradient-to-br from-primary to-secondary"
-                >
+                <div class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-gradient-to-br from-primary to-secondary">
                   {{ user.username.0|upper }}
                 </div>
                 {% endif %}
@@ -146,10 +121,7 @@
               <!-- Dropdown Menu -->
               <div id="userDropdown" class="dropdown-menu">
                 <div class="py-1">
-                  <a
-                    href="{% url 'user_profile' user.username %}"
-                    class="menu-item"
-                  >
+                  <a href="{% url 'user_profile' user.username %}" class="menu-item">
                     <i class="w-5 fas fa-user"></i>
                     <span>Profile</span>
                   </a>
@@ -174,7 +146,8 @@
               </div>
             </div>
             {% else %}
-            <div class="flex space-x-3">
+            <!-- Login/Register (Desktop) -->
+            <div class="hidden space-x-3 lg:flex">
               <a href="{% url 'account_login' %}" class="btn-secondary">
                 <i class="mr-2 fas fa-sign-in-alt"></i>
                 Login
@@ -189,45 +162,51 @@
             <!-- Mobile Menu Button -->
             <button
               id="mobileMenuBtn"
-              class="p-2 text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
+              class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
+              aria-label="Toggle mobile menu"
             >
-              <i class="fas fa-bars"></i>
+              <i class="text-2xl fas fa-bars"></i>
             </button>
           </div>
         </div>
 
         <!-- Mobile Menu -->
-        <div
-          id="mobileMenu"
-          class="hidden py-2 mt-4 md:hidden bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg rounded-xl"
-        >
-          <a href="{% url 'parks:park_list' %}" class="mobile-nav-link">
-            <i class="w-5 fas fa-map-marker-alt"></i>
-            <span>Parks</span>
-          </a>
-          <a href="{% url 'rides:ride_list' %}" class="mobile-nav-link">
-            <i class="w-5 fas fa-rocket"></i>
-            <span>Rides</span>
-          </a>
-          <form action="{% url 'search' %}" method="get" class="px-4 py-2">
-            <input
-              type="text"
-              name="q"
-              placeholder="Search parks and rides..."
-              class="w-full px-4 py-2 text-gray-900 border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white"
-            />
-          </form>
+        <div id="mobileMenu">
+          <div class="space-y-4">
+            <!-- Search (Mobile) -->
+            <form action="{% url 'search' %}" method="get" class="mb-4">
+              <input
+                type="text"
+                name="q"
+                placeholder="Search parks and rides..."
+                class="form-input"
+              />
+            </form>
+
+            {% if not user.is_authenticated %}
+            <!-- Login/Register (Mobile) -->
+            <div class="flex items-center space-x-3">
+              <a href="{% url 'account_login' %}" class="flex-1 mobile-nav-link secondary">
+                <i class="fas fa-sign-in-alt"></i>
+                <span>Login</span>
+              </a>
+              <a href="{% url 'account_signup' %}" class="flex-1 mobile-nav-link primary">
+                <i class="fas fa-user-plus"></i>
+                <span>Register</span>
+              </a>
+            </div>
+            {% endif %}
+          </div>
         </div>
       </nav>
     </header>
 
+    <!-- [Rest of the content remains unchanged...] -->
     <!-- Flash Messages -->
     {% if messages %}
     <div class="container px-6 mx-auto mt-4">
       {% for message in messages %}
-      <div
-        class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
-      >
+      <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
         {{ message }}
       </div>
       {% endfor %}
@@ -240,9 +219,7 @@
     </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"
-    >
+    <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">
@@ -252,13 +229,11 @@
             <a
               href="{% url 'terms' %}"
               class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
-              >Terms</a
-            >
+            >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
-            >
+            >Privacy</a>
           </div>
         </div>
       </div>