.

cards/templates/cards/_card_preview.html

@@ -1,7 +1,7 @@
 {# HTMX modal fragment for previewing a card #}
 {# HTMX modal fragment for previewing a card in Top Trumps style #}
 <div class="modal is-active" id="card-preview-modal">
-  <div class="modal-background" onclick="document.getElementById('modal-root').innerHTML=''" ></div>
+  <div class="modal-background" onclick="closeCardPreview()" ></div>
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
@@ -71,5 +71,5 @@
       </div>
     </div>
   </div>
-  <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('modal-root').innerHTML=''"></button>
+  <button class="modal-close is-large" aria-label="close" onclick="closeCardPreview()"></button>
 </div>

cards/templates/cards/_card_preview_design1.html

@@ -1,6 +1,6 @@
 {# Design 1: Classic Top Trumps - clean, balanced layout #}
 <div class="modal is-active" id="card-preview-modal">
-  <div class="modal-background" onclick="document.getElementById('modal-root').innerHTML=''"></div>
+  <div class="modal-background" onclick="closeCardPreview()"></div>
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
@@ -25,5 +25,5 @@
     <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>
+  <button class="modal-close is-large" aria-label="close" onclick="closeCardPreview()" style="right:8px;"></button>
 </div>

cards/templates/cards/_card_preview_design2.html

@@ -1,6 +1,6 @@
 {# Design 2: Dark, bold band and inverted text #}
 <div class="modal is-active" id="card-preview-modal">
-  <div class="modal-background" onclick="document.getElementById('modal-root').innerHTML=''"></div>
+  <div class="modal-background" onclick="closeCardPreview()"></div>
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
@@ -25,5 +25,5 @@
     <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>
+  <button class="modal-close is-large" aria-label="close" onclick="closeCardPreview()" style="right:8px;"></button>
 </div>

cards/templates/cards/_card_preview_design3.html

@@ -1,6 +1,6 @@
 {# Design 3: Bright gradient header and centered stats badges #}
 <div class="modal is-active" id="card-preview-modal">
-  <div class="modal-background" onclick="document.getElementById('modal-root').innerHTML=''"></div>
+  <div class="modal-background" onclick="closeCardPreview()"></div>
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
@@ -25,5 +25,5 @@
     <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>
+  <button class="modal-close is-large" aria-label="close" onclick="closeCardPreview()" style="right:8px;"></button>
 </div>

cards/templates/cards/_card_preview_design4.html

@@ -1,6 +1,6 @@
 {# Design 4: Sidebar stats and portrait orientation #}
 <div class="modal is-active" id="card-preview-modal">
-  <div class="modal-background" onclick="document.getElementById('modal-root').innerHTML=''"></div>
+  <div class="modal-background" onclick="closeCardPreview()"></div>
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
@@ -25,5 +25,5 @@
     <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>
+  <button class="modal-close is-large" aria-label="close" onclick="closeCardPreview()" style="right:8px;"></button>
 </div>

cards/templates/cards/_card_preview_design5.html

@@ -1,6 +1,6 @@
 {# Design 5: Minimal, high-contrast with icon-like stat rows #}
 <div class="modal is-active" id="card-preview-modal">
-  <div class="modal-background" onclick="document.getElementById('modal-root').innerHTML=''"></div>
+  <div class="modal-background" onclick="closeCardPreview()"></div>
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
@@ -25,5 +25,5 @@
     <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>
+  <button class="modal-close is-large" aria-label="close" onclick="closeCardPreview()" style="right:8px;"></button>
 </div>

cards/templates/cards/base.html

@@ -218,4 +218,61 @@
       else tryOpenPreviewFromUrl();
     })();
   </script>
+  <script>
+    // HTMX-aware preview close handler: capture previous URL when a push happens
+    (function(){
+      // record the URL before HTMX does a push so we can restore it when closing the modal
+      document.body.addEventListener('htmx:beforeRequest', function(evt){
+        try{
+          var trigger = evt.detail.elt;
+          if(trigger && trigger.getAttribute && trigger.getAttribute('hx-push-url') != null){
+            // Save the current location so we can restore when closing the preview modal
+            window.__htmx_prev_url = window.location.href;
+          }
+        }catch(e){ /* ignore */ }
+      });
+
+      // Close the preview modal and restore the previous URL if we captured one.
+      window.closeCardPreview = function(){
+        try{
+          var root = document.getElementById('modal-root');
+          if(root) root.innerHTML = '';
+          if(window.__htmx_prev_url){
+            history.pushState(null, '', window.__htmx_prev_url);
+            try{ delete window.__htmx_prev_url; }catch(e){}
+            return;
+          }
+          // Fallback: if URL looks like a preview URL, remove it with replaceState
+          try{
+            var u = new URL(window.location.href);
+            if(u.pathname.match(/\/cards\/preview\/\d+\/?/) || u.searchParams.has('design')){
+              // remove query and path by replacing with root (keep origin)
+              history.replaceState(null, '', '/');
+            }
+          }catch(e){}
+        }catch(e){ /* ignore */ }
+      };
+
+      // Close on Escape key too
+      document.addEventListener('keydown', function(e){
+        if(e.key === 'Escape'){
+          var root = document.getElementById('modal-root');
+          if(root && root.innerHTML && root.innerHTML.trim().length>0){
+            window.closeCardPreview();
+          }
+        }
+      });
+
+      // When HTMX swaps in to #modal-root, focus the first actionable control
+      document.body.addEventListener('htmx:afterSwap', function(evt){
+        try{
+          if(evt.detail.target && evt.detail.target.id === 'modal-root'){
+            var root = document.getElementById('modal-root');
+            var focusable = root.querySelector('button,a,input,select,textarea,[tabindex]:not([tabindex="-1"])');
+            if(focusable) focusable.focus();
+          }
+        }catch(e){}
+      });
+    })();
+  </script>
 </html>