.
This commit is contained in:
Ross
@@ -0,0 +1,36 @@
|
||||
{# Shared inner fragment for Design 1 - core card markup only #}
|
||||
<div class="toptrump-card design-1" style="border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
|
||||
<div style="padding:8px; display:flex; gap:8px; justify-content:flex-end;"></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; height:200px;">
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:180px;">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="title-band" style="background:#2a7ae2; color:white; padding:12px; font-weight:700; font-size:1.2rem; text-align:center">{{ card.name }}</div>
|
||||
<div class="card-body" style="padding:12px; background:#fff;">
|
||||
<div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
|
||||
{% if card.diet == 'herbivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#fff;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
|
||||
{% elif card.diet == 'carnivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#fff;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
|
||||
{% else %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#fff;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:0.5rem">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top:0.8rem">
|
||||
{% include 'cards/_card_stats_rows.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,35 @@
|
||||
{# Shared inner fragment for Design 2 - core card markup only #}
|
||||
<div class="toptrump-card design-2" style="border-radius:6px; overflow:hidden; background:#111; color:#eee;">
|
||||
<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:220px; filter:brightness(0.7);">
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:200px; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.6);">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="title-band" style="background:#0b2b2b; color:#9fffbf; padding:14px; font-weight:800; font-size:1.3rem; text-align:center">{{ card.name }}</div>
|
||||
<div class="card-body" style="padding:14px; background:#111; color:#eaeaea;">
|
||||
<div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
|
||||
{% if card.diet == 'herbivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#072027;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
|
||||
{% elif card.diet == 'carnivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#072027;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
|
||||
{% else %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#072027;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:0.5rem">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top:0.8rem">
|
||||
{% include 'cards/_card_stats_rows.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
{# Shared inner fragment for Design 3 - core card markup only #}
|
||||
<div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
|
||||
<div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), 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:200px; filter:brightness(0.9);">
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px;">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div>
|
||||
<div class="card-body" style="padding:12px; background:#fff;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
|
||||
<div><strong>Era:</strong> {{ card.get_era_display }}</div>
|
||||
<div><strong>Diet:</strong>
|
||||
{% if card.diet == 'herbivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#222;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
|
||||
{% elif card.diet == 'carnivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#222;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
|
||||
{% else %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#222;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:0.5rem">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top:0.8rem; display:flex; gap:8px; justify-content:space-around;">
|
||||
<div style="text-align:center"><div style="font-weight:800">{{ card.speed_display }}</div><div class="is-size-7">Speed</div></div>
|
||||
<div style="text-align:center"><div style="font-weight:800">{{ card.weight_display }}</div><div class="is-size-7">Weight</div></div>
|
||||
<div style="text-align:center"><div style="font-weight:800">{{ card.intelligence_display }}</div><div class="is-size-7">Intel</div></div>
|
||||
<div style="text-align:center"><div style="font-weight:800">{{ card.height_display }}</div><div class="is-size-7">Height</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,90 @@
|
||||
{# Shared inner fragment for Design 4 - core two-column card markup only #}
|
||||
<div class="toptrump-card design-4" style="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; 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>
|
||||
</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: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px; overflow:hidden;">
|
||||
<div style="position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; width:84%; max-width:420px;">
|
||||
<div style="background:rgba(0,0,0,0.55); padding:6px 10px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center;">
|
||||
<div style="width:100%; max-width:360px; display:flex; align-items:center; gap:8px;">
|
||||
<div style="flex:1; height:8px; border-radius:6px; background:linear-gradient(90deg,#eceff1,#f8fafc); position:relative; overflow:visible;">
|
||||
<div style="position:absolute; left:0; right:0; top:0; bottom:0; display:flex;">
|
||||
<div style="flex:1;"><div style="width:100%; height:8px; border-top-left-radius:6px; border-bottom-left-radius:6px; background: {% if card.era == 'triassic' %}#f6d365{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
|
||||
<div style="flex:1;"><div style="width:100%; height:8px; background: {% if card.era == 'jurassic' %}#8ec5ff{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
|
||||
<div style="flex:1;"><div style="width:100%; height:8px; border-top-right-radius:6px; border-bottom-right-radius:6px; background: {% if card.era == 'cretaceous' %}#ffd6a5{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
|
||||
</div>
|
||||
<div style="position:absolute; top:-6px; left:0; right:0; display:flex; justify-content:space-between; pointer-events:none;">
|
||||
<div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'triassic' %}#c47a00{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
|
||||
<div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'jurassic' %}#0066cc{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
|
||||
<div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'cretaceous' %}#ff7b54{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left:10px; font-weight:700; font-size:0.85rem; color:#fff;">{{ card.get_era_display }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:3; background:rgba(255,255,255,0.9); color:#111; padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.85rem; box-shadow:0 6px 18px rgba(0,0,0,0.06);">
|
||||
{% if card.diet == 'herbivore' %}
|
||||
🥦 Herbivore
|
||||
{% elif card.diet == 'carnivore' %}
|
||||
🥩 Carnivore
|
||||
{% else %}
|
||||
🍽️ Omnivore
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; z-index:1; transform: scale({{ card.image_scale }}); transform-origin:center; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08); display:block; margin:0 auto; max-height:140px;">
|
||||
{% 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;">
|
||||
<div style="font-weight:800; font-size:1.4rem">{{ card.name }}</div>
|
||||
</div>
|
||||
<div style="margin-top:8px">{{ card.description|linebreaksbr }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:8px">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div style="margin-top:12px; display:flex; flex-direction:column; gap:10px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;"><div>Speed</div><div style="font-weight:800">{{ card.speed_display }}</div></div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;"><div>Weight</div><div style="font-weight:800">{{ card.weight_display }}</div></div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;"><div>Intel</div><div style="font-weight:800">{{ card.intelligence_display }}</div></div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;"><div>Height</div><div style="font-weight:800">{{ card.height_display }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
{# Shared inner fragment for Design 5 - core card markup only #}
|
||||
<div class="toptrump-card design-5" style="border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08);">
|
||||
<div style="padding:14px; display:flex; align-items:center; gap:12px;">
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:800; font-size:1.3rem">{{ card.name }}</div>
|
||||
<div class="is-size-7">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
|
||||
</div>
|
||||
{% if card.image %}
|
||||
<div style="width:120px; height:80px; display:flex; align-items:center; justify-content:center; background:#f0f0f0; border-radius:6px; overflow:hidden;">
|
||||
<img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:76px; transform:scale({{ card.image_scale }});">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="padding:10px 14px; border-top:1px solid #eee;">
|
||||
<div style="display:flex; gap:8px; justify-content:space-between;">
|
||||
<div style="flex:1; text-align:center;">
|
||||
<div style="font-weight:700">{{ card.speed_display }}</div>
|
||||
<div class="is-size-7">Speed</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center;">
|
||||
<div style="font-weight:700">{{ card.weight_display }}</div>
|
||||
<div class="is-size-7">Weight</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center;">
|
||||
<div style="font-weight:700">{{ card.intelligence_display }}</div>
|
||||
<div class="is-size-7">Intel</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center;">
|
||||
<div style="font-weight:700">{{ card.height_display }}</div>
|
||||
<div class="is-size-7">Height</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:10px;">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,41 +4,7 @@
|
||||
<div class="modal-content">
|
||||
<div style="max-width:920px; margin:0 auto;">
|
||||
<div style="display:flex; justify-content:center;">
|
||||
<div class="toptrump-card design-1" style="border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
|
||||
<div style="padding:8px; display:flex; gap:8px; justify-content:flex-end;"></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; height:200px;">
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:180px;">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="title-band" style="background:#2a7ae2; color:white; padding:12px; font-weight:700; font-size:1.2rem; text-align:center">{{ card.name }}</div>
|
||||
<div class="card-body" style="padding:12px; background:#fff;">
|
||||
<div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
|
||||
{% if card.diet == 'herbivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#fff;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
|
||||
{% elif card.diet == 'carnivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#fff;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
|
||||
{% else %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#fff;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:0.5rem">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top:0.8rem">
|
||||
{% include 'cards/_card_stats_rows.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards/_card_inner_design1.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,40 +4,7 @@
|
||||
<div class="modal-content">
|
||||
<div style="max-width:920px; margin:0 auto;">
|
||||
<div style="display:flex; justify-content:center;">
|
||||
<div class="toptrump-card design-2" style="border-radius:6px; overflow:hidden; background:#111; color:#eee;">
|
||||
<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:220px; filter:brightness(0.7);">
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:200px; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.6);">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="title-band" style="background:#0b2b2b; color:#9fffbf; padding:14px; font-weight:800; font-size:1.3rem; text-align:center">{{ card.name }}</div>
|
||||
<div class="card-body" style="padding:14px; background:#111; color:#eaeaea;">
|
||||
<div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
|
||||
{% if card.diet == 'herbivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#072027;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
|
||||
{% elif card.diet == 'carnivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#072027;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
|
||||
{% else %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#072027;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:0.5rem">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top:0.8rem">
|
||||
{% include 'cards/_card_stats_rows.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards/_card_inner_design2.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,46 +4,7 @@
|
||||
<div class="modal-content">
|
||||
<div style="max-width:920px; margin:0 auto;">
|
||||
<div style="display:flex; justify-content:center;">
|
||||
<div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
|
||||
<div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), 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:200px; filter:brightness(0.9);">
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px;">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div>
|
||||
<div class="card-body" style="padding:12px; background:#fff;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
|
||||
<div><strong>Era:</strong> {{ card.get_era_display }}</div>
|
||||
<div><strong>Diet:</strong>
|
||||
{% if card.diet == 'herbivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#222;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
|
||||
{% elif card.diet == 'carnivore' %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#222;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
|
||||
{% else %}
|
||||
<span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#222;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:0.5rem">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top:0.8rem; display:flex; gap:8px; justify-content:space-around;">
|
||||
<div style="text-align:center"><div style="font-weight:800">{{ card.speed_display }}</div><div class="is-size-7">Speed</div></div>
|
||||
<div style="text-align:center"><div style="font-weight:800">{{ card.weight_display }}</div><div class="is-size-7">Weight</div></div>
|
||||
<div style="text-align:center"><div style="font-weight:800">{{ card.intelligence_display }}</div><div class="is-size-7">Intel</div></div>
|
||||
<div style="text-align:center"><div style="font-weight:800">{{ card.height_display }}</div><div class="is-size-7">Height</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards/_card_inner_design3.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,101 +4,7 @@
|
||||
<div class="modal-content">
|
||||
<div style="max-width:920px; margin:0 auto;">
|
||||
<div style="display:flex; justify-content:center;">
|
||||
<div class="toptrump-card design-4" style="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; 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>
|
||||
{# Era timeline moved into hero overlay; original left-column timeline removed #}
|
||||
{# diet badge moved into hero overlay; kept here previously but removed to avoid duplication #}
|
||||
</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: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px;">
|
||||
{# Top overlay: compact era timeline + label (moved from left column) #}
|
||||
<div style="position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; width:84%; max-width:420px;">
|
||||
<div style="background:rgba(0,0,0,0.55); padding:6px 10px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center;">
|
||||
<div style="width:100%; max-width:360px; display:flex; align-items:center; gap:8px;">
|
||||
<div style="flex:1; height:8px; border-radius:6px; background:linear-gradient(90deg,#eceff1,#f8fafc); position:relative; overflow:visible;">
|
||||
<div style="position:absolute; left:0; right:0; top:0; bottom:0; display:flex;">
|
||||
<div style="flex:1;"><div style="width:100%; height:8px; border-top-left-radius:6px; border-bottom-left-radius:6px; background: {% if card.era == 'triassic' %}#f6d365{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
|
||||
<div style="flex:1;"><div style="width:100%; height:8px; background: {% if card.era == 'jurassic' %}#8ec5ff{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
|
||||
<div style="flex:1;"><div style="width:100%; height:8px; border-top-right-radius:6px; border-bottom-right-radius:6px; background: {% if card.era == 'cretaceous' %}#ffd6a5{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
|
||||
</div>
|
||||
<div style="position:absolute; top:-6px; left:0; right:0; display:flex; justify-content:space-between; pointer-events:none;">
|
||||
<div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'triassic' %}#c47a00{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
|
||||
<div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'jurassic' %}#0066cc{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
|
||||
<div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'cretaceous' %}#ff7b54{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left:10px; font-weight:700; font-size:0.85rem; color:#fff;">{{ card.get_era_display }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Bottom overlay: diet badge #}
|
||||
<div style="position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:3; background:rgba(255,255,255,0.9); color:#111; padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.85rem; box-shadow:0 6px 18px rgba(0,0,0,0.06);">
|
||||
{% if card.diet == 'herbivore' %}
|
||||
🥦 Herbivore
|
||||
{% elif card.diet == 'carnivore' %}
|
||||
🥩 Carnivore
|
||||
{% else %}
|
||||
🍽️ Omnivore
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; z-index:1; transform: scale({{ card.image_scale }}); transform-origin:center; 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;">
|
||||
<div style="font-weight:800; font-size:1.4rem">{{ card.name }}</div>
|
||||
</div>
|
||||
{# Era and diet visuals relocated into the hero-image overlays above to avoid duplication #}
|
||||
|
||||
<div style="margin-top:8px">{{ card.description|linebreaksbr }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:8px">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div style="margin-top:12px; display:flex; flex-direction:column; gap:10px;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;"><div>Speed</div><div style="font-weight:800">{{ card.speed_display }}</div></div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;"><div>Weight</div><div style="font-weight:800">{{ card.weight_display }}</div></div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;"><div>Intel</div><div style="font-weight:800">{{ card.intelligence_display }}</div></div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;"><div>Height</div><div style="font-weight:800">{{ card.height_display }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards/_card_inner_design4.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,49 +4,7 @@
|
||||
<div class="modal-content">
|
||||
<div style="max-width:920px; margin:0 auto;">
|
||||
<div style="display:flex; justify-content:center;">
|
||||
<div class="toptrump-card design-5" style="border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08);">
|
||||
<div style="padding:14px; display:flex; align-items:center; gap:12px;">
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:800; font-size:1.3rem">{{ card.name }}</div>
|
||||
<div class="is-size-7">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
|
||||
</div>
|
||||
{% if card.image %}
|
||||
<div style="width:120px; height:80px; display:flex; align-items:center; justify-content:center; background:#f0f0f0; border-radius:6px; overflow:hidden;">
|
||||
<img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:76px; transform:scale({{ card.image_scale }});">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="padding:10px 14px; border-top:1px solid #eee;">
|
||||
<div style="display:flex; gap:8px; justify-content:space-between;">
|
||||
<div style="flex:1; text-align:center;">
|
||||
<div style="font-weight:700">{{ card.speed_display }}</div>
|
||||
<div class="is-size-7">Speed</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center;">
|
||||
<div style="font-weight:700">{{ card.weight_display }}</div>
|
||||
<div class="is-size-7">Weight</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center;">
|
||||
<div style="font-weight:700">{{ card.intelligence_display }}</div>
|
||||
<div class="is-size-7">Intel</div>
|
||||
</div>
|
||||
<div style="flex:1; text-align:center;">
|
||||
<div style="font-weight:700">{{ card.height_display }}</div>
|
||||
<div class="is-size-7">Height</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:10px;">
|
||||
<strong>Fun facts</strong>
|
||||
<ul class="fact-list">
|
||||
{% for fact in card.facts_list %}
|
||||
<li>{{ fact }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards/_card_inner_design5.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -47,21 +47,32 @@
|
||||
<div class="cards-grid">
|
||||
{% for card in page_cards %}
|
||||
<div class="print-card">
|
||||
<div class="toptrump-card design-{{ design }}">
|
||||
{% comment %} Reuse minimal inline markup for print: image, title, era/diet {% endcomment %}
|
||||
<div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% endif %}; background-size:cover; background-position:center">
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
|
||||
{% endif %}
|
||||
{% if design == 1 %}
|
||||
{% include 'cards/_card_inner_design1.html' %}
|
||||
{% elif design == 2 %}
|
||||
{% include 'cards/_card_inner_design2.html' %}
|
||||
{% elif design == 3 %}
|
||||
{% include 'cards/_card_inner_design3.html' %}
|
||||
{% elif design == 4 %}
|
||||
{% include 'cards/_card_inner_design4.html' %}
|
||||
{% elif design == 5 %}
|
||||
{% include 'cards/_card_inner_design5.html' %}
|
||||
{% else %}
|
||||
<div class="toptrump-card design-{{ design }}">
|
||||
<div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% endif %}; background-size:cover; background-position:center">
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="padding:6px">
|
||||
<div style="font-weight:800; font-size:14pt">{{ card.name }}</div>
|
||||
<div style="margin-top:6px; font-size:11pt">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div class="caption">{{ card.facts_list|join:', ' }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:6px">
|
||||
<div style="font-weight:800; font-size:14pt">{{ card.name }}</div>
|
||||
<div style="margin-top:6px; font-size:11pt">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div class="caption">{{ card.facts_list|join:', ' }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user