From 2663b10ebe9d6ab4f0adb28b3df0a1701ef7ae52 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sat, 6 Dec 2025 20:40:01 +0000
Subject: [PATCH] .

---
 cards/templates/cards/_card_item.html         |  2 +-
 .../cards/_card_preview_design1.html          | 14 +++++-----
 .../cards/_card_preview_design2.html          | 14 +++++-----
 .../cards/_card_preview_design3.html          | 14 +++++-----
 .../cards/_card_preview_design4.html          | 14 +++++-----
 .../cards/_card_preview_design5.html          | 14 +++++-----
 cards/templates/cards/base.html               | 28 ++++++++++++++++++-
 cards/views.py                                | 24 ++++++++++++++--
 8 files changed, 85 insertions(+), 39 deletions(-)

diff --git a/cards/templates/cards/_card_item.html b/cards/templates/cards/_card_item.html
index 99145a9..bb1154b 100644
--- a/cards/templates/cards/_card_item.html
+++ b/cards/templates/cards/_card_item.html
@@ -61,7 +61,7 @@
       </div>
       <div class="buttons" style="margin-top:0.6rem">
         <button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Edit</button>
-        <button class="button is-small is-primary" hx-get="{% url 'cards:preview' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Preview</button>
+        <button class="button is-small is-primary" hx-get="{% url 'cards:preview' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true">Preview</button>
 
         <button class="button is-small is-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-target="#card-{{ card.pk }}" hx-swap="outerHTML">Delete</button>
       </div>
diff --git a/cards/templates/cards/_card_preview_design1.html b/cards/templates/cards/_card_preview_design1.html
index 6e2d249..883fe83 100644
--- a/cards/templates/cards/_card_preview_design1.html
+++ b/cards/templates/cards/_card_preview_design1.html
@@ -44,20 +44,20 @@
   </div>
   <div style="position:absolute; top:12px; right:12px; display:flex; gap:8px;">
     {% if prev_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Previous">← Prev</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Previous">← Prev</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">← Prev</button>
     {% endif %}
     {% if next_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Next">Next →</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Next">Next →</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">Next →</button>
     {% endif %}
-    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 1">1</a>
-    <a class="button is-medium {% if design == 2 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 2">2</a>
-    <a class="button is-medium {% if design == 3 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 3">3</a>
-    <a class="button is-medium {% if design == 4 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 4">4</a>
-    <a class="button is-medium {% if design == 5 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 5">5</a>
+    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 1">1</a>
+    <a class="button is-medium {% if design == 2 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 2">2</a>
+    <a class="button is-medium {% if design == 3 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 3">3</a>
+    <a class="button is-medium {% if design == 4 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 4">4</a>
+    <a class="button is-medium {% if design == 5 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 5">5</a>
   </div>
   <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('modal-root').innerHTML=''" style="right:8px;"></button>
 </div>
diff --git a/cards/templates/cards/_card_preview_design2.html b/cards/templates/cards/_card_preview_design2.html
index 2528e2d..2ff1365 100644
--- a/cards/templates/cards/_card_preview_design2.html
+++ b/cards/templates/cards/_card_preview_design2.html
@@ -43,20 +43,20 @@
   </div>
   <div style="position:absolute; top:12px; right:12px; display:flex; gap:8px;">
     {% if prev_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Previous">← Prev</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Previous">← Prev</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">← Prev</button>
     {% endif %}
     {% if next_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Next">Next →</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Next">Next →</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">Next →</button>
     {% endif %}
-    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 1">1</a>
-    <a class="button is-medium {% if design == 2 %}is-primary is-link{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 2">2</a>
-    <a class="button is-medium {% if design == 3 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 3">3</a>
-    <a class="button is-medium {% if design == 4 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 4">4</a>
-    <a class="button is-medium {% if design == 5 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 5">5</a>
+    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 1">1</a>
+    <a class="button is-medium {% if design == 2 %}is-primary is-link{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 2">2</a>
+    <a class="button is-medium {% if design == 3 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 3">3</a>
+    <a class="button is-medium {% if design == 4 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 4">4</a>
+    <a class="button is-medium {% if design == 5 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 5">5</a>
   </div>
   <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('modal-root').innerHTML=''" style="right:8px;"></button>
 </div>
diff --git a/cards/templates/cards/_card_preview_design3.html b/cards/templates/cards/_card_preview_design3.html
index 808427b..487ba22 100644
--- a/cards/templates/cards/_card_preview_design3.html
+++ b/cards/templates/cards/_card_preview_design3.html
@@ -49,20 +49,20 @@
   </div>
   <div style="position:absolute; top:12px; right:12px; display:flex; gap:8px;">
     {% if prev_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Previous">← Prev</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Previous">← Prev</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">← Prev</button>
     {% endif %}
     {% if next_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Next">Next →</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Next">Next →</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">Next →</button>
     {% endif %}
-    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 1">1</a>
-    <a class="button is-medium {% if design == 2 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 2">2</a>
-    <a class="button is-medium {% if design == 3 %}is-primary is-link{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 3">3</a>
-    <a class="button is-medium {% if design == 4 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 4">4</a>
-    <a class="button is-medium {% if design == 5 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 5">5</a>
+    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 1">1</a>
+    <a class="button is-medium {% if design == 2 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 2">2</a>
+    <a class="button is-medium {% if design == 3 %}is-primary is-link{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 3">3</a>
+    <a class="button is-medium {% if design == 4 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 4">4</a>
+    <a class="button is-medium {% if design == 5 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 5">5</a>
   </div>
   <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('modal-root').innerHTML=''" style="right:8px;"></button>
 </div>
diff --git a/cards/templates/cards/_card_preview_design4.html b/cards/templates/cards/_card_preview_design4.html
index e6a8992..d6ea28e 100644
--- a/cards/templates/cards/_card_preview_design4.html
+++ b/cards/templates/cards/_card_preview_design4.html
@@ -104,20 +104,20 @@
   </div>
   <div style="position:absolute; top:12px; right:12px; display:flex; gap:8px;">
     {% if prev_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Previous">← Prev</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Previous">← Prev</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">← Prev</button>
     {% endif %}
     {% if next_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Next">Next →</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Next">Next →</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">Next →</button>
     {% endif %}
-    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 1">1</a>
-    <a class="button is-medium {% if design == 2 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 2">2</a>
-    <a class="button is-medium {% if design == 3 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 3">3</a>
-    <a class="button is-medium {% if design == 4 %}is-primary is-link{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 4">4</a>
-    <a class="button is-medium {% if design == 5 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 5">5</a>
+    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 1">1</a>
+    <a class="button is-medium {% if design == 2 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 2">2</a>
+    <a class="button is-medium {% if design == 3 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 3">3</a>
+    <a class="button is-medium {% if design == 4 %}is-primary is-link{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 4">4</a>
+    <a class="button is-medium {% if design == 5 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 5">5</a>
   </div>
   <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('modal-root').innerHTML=''" style="right:8px;"></button>
 </div>
diff --git a/cards/templates/cards/_card_preview_design5.html b/cards/templates/cards/_card_preview_design5.html
index 66c8861..e6d1b3f 100644
--- a/cards/templates/cards/_card_preview_design5.html
+++ b/cards/templates/cards/_card_preview_design5.html
@@ -52,20 +52,20 @@
   </div>
   <div style="position:absolute; top:12px; right:12px; display:flex; gap:8px;">
     {% if prev_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Previous">← Prev</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' prev_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Previous">← Prev</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">← Prev</button>
     {% endif %}
     {% if next_pk %}
-      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Next">Next →</a>
+      <a class="button is-medium is-info" hx-get="{% url 'cards:preview' next_pk %}?design={{ design }}" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Next">Next →</a>
     {% else %}
       <button class="button is-medium is-static" disabled aria-hidden="true">Next →</button>
     {% endif %}
-    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 1">1</a>
-    <a class="button is-medium {% if design == 2 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 2">2</a>
-    <a class="button is-medium {% if design == 3 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 3">3</a>
-    <a class="button is-medium {% if design == 4 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 4">4</a>
-    <a class="button is-medium {% if design == 5 %}is-primary is-link{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" aria-label="Design 5">5</a>
+    <a class="button is-medium {% if design == 1 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=1" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 1">1</a>
+    <a class="button is-medium {% if design == 2 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=2" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 2">2</a>
+    <a class="button is-medium {% if design == 3 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=3" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 3">3</a>
+    <a class="button is-medium {% if design == 4 %}is-primary{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=4" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 4">4</a>
+    <a class="button is-medium {% if design == 5 %}is-primary is-link{% else %}is-light{% endif %}" hx-get="{% url 'cards:preview' card.pk %}?design=5" hx-target="#modal-root" hx-swap="innerHTML" hx-push-url="true" aria-label="Design 5">5</a>
   </div>
   <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('modal-root').innerHTML=''" style="right:8px;"></button>
 </div>
diff --git a/cards/templates/cards/base.html b/cards/templates/cards/base.html
index 87a8012..d844823 100644
--- a/cards/templates/cards/base.html
+++ b/cards/templates/cards/base.html
@@ -140,7 +140,7 @@
         </div>
         <div id="messages"></div>
         {% block content %}{% endblock %}
-        <div id="modal-root"></div>
+        <div id="modal-root">{% if modal_fragment %}{{ modal_fragment|safe }}{% endif %}</div>
       </div>
     </section>
   </body>
@@ -192,4 +192,30 @@
       });
     })();
   </script>
+  <script>
+    // Auto-open preview modal when visiting a preview URL directly
+    (function(){
+      function tryOpenPreviewFromUrl(){
+        try{
+          var path = window.location.pathname;
+          // Match paths like /cards/preview/123/ optionally with trailing slash
+          var m = path.match(/\/cards\/preview\/(\d+)\/?$/);
+          if(m){
+              var root = document.getElementById('modal-root');
+              // If server already rendered a modal fragment into #modal-root, do nothing.
+              if(root && root.innerHTML && root.innerHTML.trim().length > 0) return;
+              var url = window.location.pathname + window.location.search;
+              fetch(url, {credentials: 'same-origin'})
+                .then(function(r){ if(!r.ok) throw new Error('fetch failed'); return r.text(); })
+                .then(function(html){
+                  var root = document.getElementById('modal-root');
+                  if(root){ root.innerHTML = html; }
+                }).catch(function(){ /* ignore */ });
+            }
+        }catch(e){ /* ignore */ }
+      }
+      if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', tryOpenPreviewFromUrl);
+      else tryOpenPreviewFromUrl();
+    })();
+  </script>
 </html>
diff --git a/cards/views.py b/cards/views.py
index 04438dc..4cc6f00 100644
--- a/cards/views.py
+++ b/cards/views.py
@@ -308,8 +308,28 @@ def preview_card(request, pk):
     context = {'card': card, 'background': background, 'design': design, 'fragment_template': template_name, 'prev_pk': prev_pk, 'next_pk': next_pk}
     if is_htmx(request):
         return render(request, template_name, context)
-    # For non-HTMX full page preview, render the generic preview which can accept design too
-    return render(request, 'cards/preview.html', context)
+    # For non-HTMX full page preview, render the main list page and include the
+    # preview fragment so the page shows the normal card list with the modal
+    # already injected. This keeps the surrounding UI consistent when users
+    # open a preview URL directly.
+    qs = Dinosaur.objects.all()
+    list_context = {
+        'cards': qs,
+        'background': background,
+        'eras': Dinosaur.ERA_CHOICES,
+        'diets': Dinosaur.DIET_CHOICES,
+        'current_q': '',
+        'current_era': 'all',
+        'current_diet': 'all',
+        'current_sort': '',
+        'current_order': 'asc',
+        'card_count': qs.count(),
+    }
+    # Render the fragment HTML server-side and pass it to the list template so
+    # it can be injected into `#modal-root` immediately on load.
+    fragment_html = render_to_string(template_name, context, request=request)
+    list_context['modal_fragment'] = fragment_html
+    return render(request, 'cards/list.html', list_context)
 
 
 def cards_overview(request):