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

---
 .../cards/_card_preview_design4.html          | 46 +++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/cards/templates/cards/_card_preview_design4.html b/cards/templates/cards/_card_preview_design4.html
index d2b0329..29876a8 100644
--- a/cards/templates/cards/_card_preview_design4.html
+++ b/cards/templates/cards/_card_preview_design4.html
@@ -5,12 +5,52 @@
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
         <div class="toptrump-card design-4" style="width:680px; display:flex; gap:12px; border-radius:8px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.12);">
-          <div style="flex:0 0 320px; position:relative; background:#f5f5f5;">
-            <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:100%; display:flex; align-items:center; justify-content:center;">
+          <div style="flex:0 0 320px; position:relative; background:#f5f5f5; display:flex; flex-direction:column;">
+            <div style="padding:8px 10px; border-bottom:1px solid rgba(0,0,0,0.04); background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.9));">
+              <div style="display:flex; flex-direction:column; align-items:center;">
+                <div style="display:flex; align-items:center; gap:10px; width:100%; justify-content:center;">
+                  <div style="flex:0 0 36px; height:6px; background:linear-gradient(90deg,#e5e7eb,#c7d2fe); border-radius:4px; opacity:0.9"></div>
+                  <div style="flex:1 1 auto; min-width:0; font-weight:900; font-size:1.15rem; text-transform:uppercase; letter-spacing:0.6px; color:#17202a; text-shadow:0 1px 0 rgba(255,255,255,0.6); text-align:center; word-break:break-word; white-space:normal;">{{ card.name }}</div>
+                  <div style="flex:0 0 36px; height:6px; background:linear-gradient(90deg,#ffd6a5,#ffb4a2); border-radius:4px; opacity:0.95"></div>
+                </div>
+                <div style="margin-top:6px; font-weight:700; font-size:0.95rem; color:#444">{{ card.get_era_display }}</div>
+                <div style="margin-top:6px;">
+                  {% if card.diet == 'herbivore' %}
+                    <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#fff;font-weight:700;">🥦 Herbivore</span>
+                  {% elif card.diet == 'carnivore' %}
+                    <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#fff;font-weight:700;">🥩 Carnivore</span>
+                  {% else %}
+                    <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#fff;font-weight:700;">🍽️ Omnivore</span>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+            <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; flex:1; display:flex; align-items:center; justify-content:center; padding:8px;">
               {% if card.image %}
-                <img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:420px; transform:scale({{ card.image_scale }});">
+                <img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:360px; transform:scale({{ card.image_scale }}); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08);">
               {% endif %}
             </div>
+            <div style="padding:8px 10px; border-top:1px solid rgba(0,0,0,0.04); background:#fafafa;">
+              <div style="display:flex; flex-direction:column; gap:6px;">
+                <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Speed</div><div style="font-weight:800">{{ card.speed_display }}</div></div>
+                <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Weight</div><div style="font-weight:800">{{ card.weight_display }}</div></div>
+                <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Intelligence</div><div style="font-weight:800">{{ card.intelligence_display }}</div></div>
+                <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Height</div><div style="font-weight:800">{{ card.height_display }}</div></div>
+                {% if card.facts_list %}
+                  <div style="margin-top:6px; border-top:1px solid rgba(0,0,0,0.03); padding-top:6px; font-size:0.85rem; color:#333;">
+                    <strong style="display:block; margin-bottom:4px;">Fun facts</strong>
+                    <ul style="margin:0; padding-left:1rem; list-style:disc;">
+                      {% for fact in card.facts_list|slice:":2" %}
+                        <li>{{ fact }}</li>
+                      {% endfor %}
+                      {% if card.facts_list|length > 2 %}
+                        <li><em>and more...</em></li>
+                      {% endif %}
+                    </ul>
+                  </div>
+                {% endif %}
+              </div>
+            </div>
           </div>
           <div style="flex:1; padding:14px; background:#fff;">
             <div style="display:flex; justify-content:space-between; align-items:center; gap:8px;">