.
This commit is contained in:
Ross
@@ -4,7 +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="width:520px; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
|
||||
<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 %}
|
||||
|
||||
@@ -4,7 +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="width:520px; border-radius:6px; overflow:hidden; background:#111; color:#eee;">
|
||||
<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);">
|
||||
|
||||
@@ -4,7 +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="width:520px; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
|
||||
<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;">
|
||||
|
||||
@@ -4,7 +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="width:680px; display:flex; gap:12px; border-radius:8px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.12);">
|
||||
<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;">
|
||||
@@ -13,7 +13,35 @@
|
||||
<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; width:100%;">
|
||||
<!-- Mesozoic timeline: Triassic -> Jurassic -> Cretaceous -->
|
||||
<div style="width:100%; display:flex; flex-direction:column; gap:6px;">
|
||||
<div style="height:10px; 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; background:transparent; display:flex; align-items:center; justify-content:center;">
|
||||
<div style="width:100%; height:10px; border-top-left-radius:6px; border-bottom-left-radius:6px; background: {% if card.era == 'triassic' %}#f6d365{% else %}rgba(0,0,0,0.05){% endif %};"></div>
|
||||
</div>
|
||||
<div style="flex:1; background:transparent; display:flex; align-items:center; justify-content:center;">
|
||||
<div style="width:100%; height:10px; background: {% if card.era == 'jurassic' %}#8ec5ff{% else %}rgba(0,0,0,0.05){% endif %};"></div>
|
||||
</div>
|
||||
<div style="flex:1; background:transparent; display:flex; align-items:center; justify-content:center;">
|
||||
<div style="width:100%; height:10px; border-top-right-radius:6px; border-bottom-right-radius:6px; background: {% if card.era == 'cretaceous' %}#ffd6a5{% else %}rgba(0,0,0,0.05){% endif %};"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- era marker dot -->
|
||||
<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:12px; height:12px; border-radius:50%; background:{% if card.era == 'triassic' %}#c47a00{% else %}rgba(0,0,0,0.15){% 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:12px; height:12px; border-radius:50%; background:{% if card.era == 'jurassic' %}#0066cc{% else %}rgba(0,0,0,0.15){% 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:12px; height:12px; border-radius:50%; background:{% if card.era == 'cretaceous' %}#ff7b54{% else %}rgba(0,0,0,0.15){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; font-size:0.82rem; color:#616161;">
|
||||
<div style="flex:1; text-align:center;">Triassic</div>
|
||||
<div style="flex:1; text-align:center;">Jurassic</div>
|
||||
<div style="flex:1; text-align:center;">Cretaceous</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -4,7 +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="width:520px; border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08);">
|
||||
<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>
|
||||
|
||||
@@ -35,6 +35,19 @@
|
||||
#theme-toggle{margin-left:0.5rem}
|
||||
/* Top Trumps card styles */
|
||||
.toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)}
|
||||
/* Design-specific fixed sizing so previews remain consistent */
|
||||
.toptrump-card.design-1,
|
||||
.toptrump-card.design-2,
|
||||
.toptrump-card.design-3,
|
||||
.toptrump-card.design-5 {
|
||||
width: 520px;
|
||||
min-height: 560px;
|
||||
}
|
||||
.toptrump-card.design-4 {
|
||||
width: 680px;
|
||||
min-height: 460px;
|
||||
display: flex;
|
||||
}
|
||||
.toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
|
||||
/* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
|
||||
.toptrump-card .hero-image img.card-hero-img{
|
||||
|
||||
Reference in New Issue
Block a user