feat: Implement UI components for Django templates

- Added Button component with various styles and sizes.
- Introduced Card component for displaying content with titles and descriptions.
- Created Input component for form fields with support for various attributes.
- Developed Toast Notification Container for displaying alerts and messages.
- Designed pages for listing designers and operators with pagination and responsive layout.
- Documented frontend migration from React to HTMX + Alpine.js, detailing component usage and integration.

backend/templates/rides/park_category_list.html

@@ -18,7 +18,7 @@
             <a href="{% url 'parks:park_detail' park.slug %}" class="text-blue-600 hover:text-blue-800">← Back to {{ park.name }}</a>
         {% else %}
             <h1 class="mb-2 text-3xl font-bold">{{ category }}</h1>
-            <a href="{% url 'rides:ride_list' %}" class="text-blue-600 hover:text-blue-800">← Back to All Rides</a>
+            <a href="{% url 'rides:global_ride_list' %}" class="text-blue-600 hover:text-blue-800">← Back to All Rides</a>
         {% endif %}
     </div>
 

backend/templates/rides/partials/filter_sidebar.html

@@ -20,7 +20,7 @@
         <!-- Clear All Filters -->
         {% if has_filters %}
         <button type="button" 
-                hx-get="{% url 'rides:ride_list' %}"
+                hx-get="{% url 'rides:global_ride_list' %}"
                 hx-target="#filter-results"
                 hx-swap="outerHTML"
                 hx-push-url="true"
@@ -56,7 +56,7 @@
 
   <!-- Filter Form -->
   <form id="filter-form" 
-        hx-get="{% url 'rides:ride_list' %}"
+        hx-get="{% url 'rides:global_ride_list' %}"
         hx-target="#filter-results"
         hx-swap="outerHTML"
         hx-trigger="change, input delay:500ms"
@@ -462,4 +462,4 @@ function updateFilterCounts() {
     badge.style.display = activeCount > 0 ? 'inline-flex' : 'none';
   }
 }
-</script>
+</script>

backend/templates/rides/partials/ride_list_results.html

@@ -7,7 +7,7 @@
         <i class="fas fa-filter mr-2"></i>
         Active Filters ({{ active_filters|length }})
       </h3>
-      <button hx-get="{% url 'rides:ride_list' %}{% if park %}?park={{ park.id }}{% endif %}" 
+      <button hx-get="{% url 'rides:global_ride_list' %}{% if park %}?park={{ park.id }}{% endif %}"
               hx-target="#filter-results" 
               hx-push-url="true"
               class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors">
@@ -59,7 +59,7 @@
     <label for="sort-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Sort by:</label>
     <select id="sort-select" 
             name="sort" 
-            hx-get="{% url 'rides:ride_list' %}" 
+            hx-get="{% url 'rides:global_ride_list' %}"
             hx-target="#filter-results" 
             hx-include="[name='q'], [name='category'], [name='manufacturer'], [name='designer'], [name='min_height'], [name='max_height'], [name='min_speed'], [name='max_speed'], [name='min_capacity'], [name='max_capacity'], [name='min_duration'], [name='max_duration'], [name='opened_after'], [name='opened_before'], [name='closed_after'], [name='closed_before'], [name='operating_status'], [name='has_inversions'], [name='has_launches'], [name='track_type'], [name='min_inversions'], [name='max_inversions'], [name='min_launches'], [name='max_launches'], [name='min_top_speed'], [name='max_top_speed'], [name='min_max_height'], [name='max_max_height']{% if park %}, [name='park']{% endif %}"
             hx-push-url="true"
@@ -306,7 +306,7 @@
     {% endif %}
   </p>
   {% if has_filters %}
-  <button hx-get="{% url 'rides:ride_list' %}{% if park %}?park={{ park.id }}{% endif %}" 
+  <button hx-get="{% url 'rides:global_ride_list' %}{% if park %}?park={{ park.id }}{% endif %}"
           hx-target="#filter-results" 
           hx-push-url="true"
           class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors">
@@ -323,4 +323,4 @@
     <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
     <span class="text-sm font-medium text-gray-900 dark:text-white">Loading results...</span>
   </div>
-</div>
+</div>

backend/templates/rides/ride_detail.html

@@ -96,7 +96,7 @@
                 <dt class="text-sm font-semibold text-gray-900 dark:text-white">Manufacturer</dt>
                 <dd class="mt-1">
                     {% if ride.manufacturer %}
-                        <a href="{% url 'manufacturers:manufacturer_detail' ride.manufacturer.slug %}"
+                        <a href="#"
                            class="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                             {{ ride.manufacturer.name }}
                         </a>
@@ -360,7 +360,7 @@
                         <dt class="text-gray-500 dark:text-gray-400">Manufacturer</dt>
                         <dd class="font-medium text-gray-900 dark:text-white">
                             {% if ride.manufacturer %}
-                                <a href="{% url 'manufacturers:manufacturer_detail' ride.manufacturer.slug %}"
+                                <a href="#"
                                    class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                                     {{ ride.manufacturer.name }}
                                 </a>

backend/templates/rides/ride_list.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base/base.html" %}
 {% load static %}
 
 {% block title %}
@@ -255,4 +255,4 @@ if (localStorage.getItem('darkMode') === 'true' ||
   document.documentElement.classList.add('dark');
 }
 </script>
-{% endblock %}
+{% endblock %}