31 lines
1.4 KiB
HTML
31 lines
1.4 KiB
HTML
{% extends 'base/layout.html' %}
|
|
|
|
{% block content %}
|
|
<div style="max-width: 1200px; margin: 0 auto;">
|
|
<h1 style="margin-bottom: 2rem;">Booster Packs</h1>
|
|
<div class="card-grid">
|
|
{% for pack in packs %}
|
|
<div class="tcg-card">
|
|
<div style="aspect-ratio: 2.5/3.5; background: #334155; position: relative; display: flex; align-items: center; justify-content: center;">
|
|
{% if pack.image_url %}
|
|
<img src="{{ pack.image_url }}" alt="{{ pack.name }}" style="width: 100%; height: 100%; object-fit: cover;">
|
|
{% else %}
|
|
<div style="text-align: center; padding: 1rem;">
|
|
<div style="font-size: 3rem;">📦</div>
|
|
<div>{{ pack.game.name }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="tcg-card-body">
|
|
<h4 style="margin: 0 0 0.5rem; font-size: 1rem;">{{ pack.name }}</h4>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
|
|
<span style="font-weight: 700;">${{ pack.price }}</span>
|
|
<a href="{% url 'store:add_pack_to_cart' pack.id %}" class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.875rem;">Add to Cart</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|