From cb430859e46e770c1ca2fab5bd339de5a4d74d78 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sat, 6 Dec 2025 21:47:44 +0000
Subject: [PATCH] .

---
 cards/templates/cards/print.html | 116 ++++++++++++++++++++++++++++++-
 1 file changed, 115 insertions(+), 1 deletion(-)

diff --git a/cards/templates/cards/print.html b/cards/templates/cards/print.html
index e11d726..49f03a0 100644
--- a/cards/templates/cards/print.html
+++ b/cards/templates/cards/print.html
@@ -10,7 +10,7 @@
 
     <form id="print-form" method="post" action="{% url 'cards:print_preview' %}" target="_blank">
       {% csrf_token %}
-      <div style="display:flex; gap:12px; align-items:center; margin-bottom:10px;">
+      <div style="display:flex; gap:12px; align-items:flex-start; margin-bottom:10px;">
         <div>
           <label class="label">Design</label>
           <div class="select">
@@ -40,6 +40,7 @@
         <div style="margin-left:auto">
           <button class="button is-primary" type="submit">Open printable view</button>
         </div>
+        <!-- Sample preview placeholder (moved out of the form to avoid layout issues) -->
       </div>
 
       <div style="display:flex; flex-direction:column; gap:8px;">
@@ -61,5 +62,118 @@
         {% endfor %}
       </div>
     </form>
+    {% if cards %}
+      {% with sample_card=cards.0 %}
+        <div id="sample-panel" style="position:fixed; right:16px; bottom:16px; width:720px; height:640px; z-index:1400; display:block;">
+          <div id="sample-panel-inner" style="border:1px solid rgba(0,0,0,0.06); padding:10px; border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.12); width:100%; height:100%; box-sizing:border-box;">
+            <div style="display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;">
+              <div style="font-weight:700">Sample</div>
+              <button id="sample-hide-btn" type="button" style="border:0; background:transparent; cursor:pointer; font-weight:700">✕</button>
+            </div>
+            <div id="sample-preview" style="width:100%; height:calc(100% - 56px); overflow:auto; position:relative; display:flex; align-items:flex-start; justify-content:center; padding:8px; box-sizing:border-box;">
+              {% comment %} Render all design fragments hidden and toggle via JS. Each fragment should contain a `.toptrump-card`. {% endcomment %}
+              <div class="design-preview design-1" style="display:none">
+                {% include 'cards/_card_inner_design1.html' with card=sample_card background=background %}
+              </div>
+              <div class="design-preview design-2" style="display:none">
+                {% include 'cards/_card_inner_design2.html' with card=sample_card background=background %}
+              </div>
+              <div class="design-preview design-3" style="display:none">
+                {% include 'cards/_card_inner_design3.html' with card=sample_card background=background %}
+              </div>
+              <div class="design-preview design-4" style="display:none">
+                {% include 'cards/_card_inner_design4.html' with card=sample_card background=background %}
+              </div>
+              <div class="design-preview design-5" style="display:none">
+                {% include 'cards/_card_inner_design5.html' with card=sample_card background=background %}
+              </div>
+            </div>
+            <div style="margin-top:8px; font-size:12px; color:#666">Design preview — not printed</div>
+          </div>
+          <button id="sample-show-tab" type="button" style="display:none; position:fixed; right:16px; bottom:16px; transform:none; background:#111; color:#fff; border-radius:4px 4px 0 0; padding:6px 8px; border:0; cursor:pointer; z-index:1500">Show sample</button>
+        </div>
+      {% endwith %}
+    {% endif %}
   </div>
+  <script>
+    (function(){
+      function qs(sel, ctx){ return (ctx||document).querySelector(sel); }
+      function qsa(sel, ctx){ return Array.from((ctx||document).querySelectorAll(sel)); }
+      function updatePreview(){
+        var sel = qs('select[name="design"]');
+        var scaleInput = qs('input[name="scale"]');
+        if(!sel) return;
+        var design = String(sel.value || '1');
+        var scale = parseFloat(scaleInput && scaleInput.value) || 1;
+
+        // Hide all fragments and reset transforms
+        qsa('#sample-preview .design-preview').forEach(function(el){
+          el.style.display = 'none';
+          var c = el.querySelector('.toptrump-card');
+          if(c){ c.style.transform = ''; c.style.position = ''; c.style.margin = ''; }
+        });
+
+        // Find the fragment whose classList contains the design class (robust against nested classes)
+        var active = null;
+        qsa('#sample-preview .design-preview').forEach(function(el){
+          if(el.classList && el.classList.contains('design-' + design)){
+            active = el;
+          }
+        });
+        if(!active){
+          // fallback: try selecting by class selector
+          active = qs('#sample-preview .design-' + design);
+        }
+        if(active){
+          // Use empty string to let element use its natural display (block/div)
+          active.style.display = '';
+          var card = active.querySelector('.toptrump-card');
+          if(card){
+            card.style.margin = '0 auto';
+            card.style.display = 'block';
+            card.style.transformOrigin = 'top center';
+            card.style.transform = 'scale(' + scale + ')';
+            card.style.position = 'relative';
+          }
+        }
+      }
+      document.addEventListener('DOMContentLoaded', function(){
+        updatePreview();
+        var sel = qs('select[name="design"]');
+        var scaleInput = qs('input[name="scale"]');
+        if(sel) sel.addEventListener('change', updatePreview);
+        if(scaleInput) scaleInput.addEventListener('input', updatePreview);
+        // Hide/show controls for the floating panel
+        var hideBtn = qs('#sample-hide-btn');
+        var panel = qs('#sample-panel');
+        var showTab = qs('#sample-show-tab');
+        if(hideBtn && panel && showTab){
+          hideBtn.addEventListener('click', function(){
+            panel.style.display = 'none';
+            showTab.style.display = 'block';
+            try{ localStorage.setItem('samplePanelHidden','1'); }catch(e){}
+            console.log('Sample panel hidden');
+          });
+          showTab.addEventListener('click', function(){
+            panel.style.display = 'block';
+            showTab.style.display = 'none';
+            try{ localStorage.removeItem('samplePanelHidden'); }catch(e){}
+            // ensure preview updated when re-shown
+            updatePreview();
+            console.log('Sample panel shown');
+          });
+          // Restore state (default: visible)
+          try{
+            if(localStorage.getItem('samplePanelHidden')){
+              panel.style.display = 'none';
+              showTab.style.display = 'block';
+            } else {
+              panel.style.display = 'block';
+              showTab.style.display = 'none';
+            }
+          }catch(e){}
+        }
+      });
+    })();
+  </script>
 {% endblock %}