ross/toptrumps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Ross
2025-12-06 20:00:29 +00:00
parent 4a2afdc0c7
commit d262f7cd3b
1 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/_card_preview_design4.html
+43 -3
View File
@@ -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;">