Add random mineral button to daily-stone page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dailystone/templates/dailystone/stone.html

@@ -45,6 +45,7 @@
             padding: 2rem 0 1rem;
             border-bottom: 1px solid var(--border);
             margin-bottom: 2rem;
+            position: relative;
         }
 
         .page-header .label {
@@ -55,6 +56,33 @@
             margin-bottom: 0.25rem;
         }
 
+        .random-btn {
+            position: absolute;
+            top: 1.5rem;
+            right: 0;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.35rem;
+            padding: 0.4rem 0.75rem;
+            font-family: 'Georgia', serif;
+            font-size: 0.8rem;
+            color: var(--stone-text);
+            background: var(--stone-muted);
+            border: 1px solid var(--border);
+            border-radius: 3px;
+            text-decoration: none;
+            transition: background 0.2s;
+        }
+
+        .random-btn:hover {
+            background: color-mix(in srgb, var(--stone-color) 20%, #f5f5f0);
+        }
+
+        .random-btn svg {
+            width: 14px;
+            height: 14px;
+        }
+
         .page-header .date {
             font-size: 0.85rem;
             color: var(--text-secondary);
@@ -274,7 +302,15 @@
         {% if mineral %}
 
         <header class="page-header">
-            <div class="label">Daily Stone</div>
+            <a href="{% url 'dailystone:random_stone' %}" class="random-btn" title="Random mineral">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line>
+                    <polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line>
+                    <line x1="4" y1="4" x2="9" y2="9"></line>
+                </svg>
+                Random
+            </a>
+            <div class="label">{% if is_random %}Random Stone{% else %}Daily Stone{% endif %}</div>
             <h1 class="mineral-name">{{ mineral.name }}</h1>
             {% if mineral.formula %}<div class="formula">{{ mineral.formula }}</div>{% endif %}
             <div class="date">{{ today|date:"F j, Y" }}</div>

dailystone/urls.py

@@ -6,4 +6,5 @@ app_name = 'dailystone'
 
 urlpatterns = [
     path('', views.daily_stone, name='daily_stone'),
+    path('random/', views.random_stone, name='random_stone'),
 ]

dailystone/views.py

@@ -1,6 +1,7 @@
 from datetime import date
 
-from django.shortcuts import render, get_object_or_404
+from django.shortcuts import render, redirect
+from django.urls import reverse
 
 from .models import Mineral
 
@@ -26,3 +27,14 @@ def daily_stone(request):
         'mineral': mineral,
         'today': today,
     })
+
+
+def random_stone(request):
+    mineral = Mineral.objects.order_by('?').first()
+    if not mineral:
+        return redirect('dailystone:daily_stone')
+    return render(request, 'dailystone/stone.html', {
+        'mineral': mineral,
+        'today': date.today(),
+        'is_random': True,
+    })