Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX

backend/templates/components/stats_card.html

@@ -0,0 +1,87 @@
+{% comment %}
+Statistics Card Component
+=========================
+
+A reusable card component for displaying statistics and metrics.
+
+Purpose:
+    Renders a consistent statistics card with label, value, optional icon,
+    and optional link. Used for displaying metrics on detail pages.
+
+Usage Examples:
+    Basic stat:
+        {% include 'components/stats_card.html' with label='Total Rides' value=park.ride_count %}
+
+    Stat with icon:
+        {% include 'components/stats_card.html' with label='Rating' value='4.5/5' icon='fas fa-star' %}
+
+    Clickable stat:
+        {% include 'components/stats_card.html' with label='Total Rides' value=42 link=rides_url %}
+
+    Priority stat (highlighted):
+        {% include 'components/stats_card.html' with label='Operator' value=park.operator.name priority=True %}
+
+    Stat with subtitle:
+        {% include 'components/stats_card.html' with label='Height' value='250 ft' subtitle='76 meters' %}
+
+Parameters:
+    Required:
+    - label: Stat label/title
+    - value: Stat value to display
+
+    Optional:
+    - icon: Font Awesome icon class (e.g., 'fas fa-star')
+    - link: URL to link to (makes card clickable)
+    - subtitle: Secondary text below value
+    - priority: Boolean to highlight as priority card (default: False)
+    - size: Size variant 'sm', 'md', 'lg' (default: 'md')
+    - value_class: Additional CSS classes for value
+
+Dependencies:
+    - Tailwind CSS for styling
+    - Font Awesome icons (optional)
+
+Accessibility:
+    - Uses semantic dt/dd structure for label/value
+    - Clickable cards use proper link semantics
+    - Priority cards use visual emphasis, not just color
+{% endcomment %}
+
+{% with priority=priority|default:False size=size|default:'md' %}
+
+{% if link %}
+<a href="{{ link }}"
+   class="block bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats transition-transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-blue-500 {% if priority %}card-stats-priority{% endif %}">
+{% else %}
+<div class="bg-white rounded-lg shadow-lg dark:bg-gray-800 p-compact card-stats {% if priority %}card-stats-priority{% endif %}">
+{% endif %}
+
+    <div class="text-center">
+        {# Label #}
+        <dt class="{% if size == 'sm' %}text-xs{% elif size == 'lg' %}text-base{% else %}text-sm{% endif %} font-semibold text-gray-900 dark:text-white">
+            {% if icon %}
+            <i class="{{ icon }} mr-1 text-gray-500 dark:text-gray-400" aria-hidden="true"></i>
+            {% endif %}
+            {{ label }}
+        </dt>
+
+        {# Value #}
+        <dd class="mt-1 {% if size == 'sm' %}text-lg{% elif size == 'lg' %}text-3xl{% else %}text-2xl{% endif %} font-bold text-sky-900 dark:text-sky-400 {{ value_class }}{% if link %} hover:text-sky-800 dark:hover:text-sky-300{% endif %}">
+            {{ value|default:"N/A" }}
+        </dd>
+
+        {# Subtitle (optional) #}
+        {% if subtitle %}
+        <dd class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+            {{ subtitle }}
+        </dd>
+        {% endif %}
+    </div>
+
+{% if link %}
+</a>
+{% else %}
+</div>
+{% endif %}
+
+{% endwith %}