125 lines
7.1 KiB
HTML
125 lines
7.1 KiB
HTML
{% extends 'base/layout.html' %}
|
|
|
|
{% block content %}
|
|
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 3rem;">
|
|
<!-- Image Column -->
|
|
<div>
|
|
<div
|
|
style="background: #000; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);">
|
|
{% if card.image_url %}
|
|
<img src="{{ card.image_url }}" alt="{{ card.name }}" style="width: 100%; display: block;">
|
|
{% else %}
|
|
<div
|
|
style="aspect-ratio: 2.5/3.5; display: flex; align-items: center; justify-content: center; color: #64748b; background: #334155;">
|
|
No Image</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- External Links -->
|
|
<div style="margin-top: 1.5rem; display: grid; gap: 0.5rem;">
|
|
{% if card.tcgplayer_id %}
|
|
<a href="https://www.tcgplayer.com/product/{{ card.tcgplayer_id }}" target="_blank"
|
|
style="display: block; text-align: center; padding: 0.75rem; background: #27272a; color: white; border-radius: 0.375rem; text-decoration: none; font-size: 0.875rem;">
|
|
View on TCGPlayer
|
|
</a>
|
|
{% endif %}
|
|
<a href="https://www.ebay.com/sch/i.html?_nkw={{ card.name|urlencode }}+{{ card.set.name|urlencode }}"
|
|
target="_blank"
|
|
style="display: block; text-align: center; padding: 0.75rem; background: #27272a; color: white; border-radius: 0.375rem; text-decoration: none; font-size: 0.875rem;">
|
|
Search on eBay
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Column -->
|
|
<div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4 style="margin: 0; color: var(--primary-color);">{{ card.set.game.name }} • {{ card.set.name }}</h4>
|
|
<h1 style="margin: 0.5rem 0 0; font-size: 2.5rem;">{{ card.name }}</h1>
|
|
<div style="margin-top: 1rem; display: flex; gap: 1rem; color: #94a3b8;">
|
|
<span>Rarity: <strong style="color: var(--text-color);">{{ card.rarity }}</strong></span>
|
|
<span>Collector #: <strong style="color: var(--text-color);">{{ card.collector_number }}</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1rem;">Available
|
|
Listings</h3>
|
|
|
|
<div style="margin-bottom: 1rem;">
|
|
<label style="font-size: 0.875rem; color: #94a3b8;">Filter Condition:</label>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 0.25rem;">
|
|
<button onclick="filterCondition('ALL')" class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.75rem; background: var(--card-bg); border: 1px solid var(--border-color);">All</button>
|
|
<button onclick="filterCondition('NM')" class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.75rem; background: var(--card-bg); border: 1px solid var(--border-color);">NM</button>
|
|
<button onclick="filterCondition('LP')" class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.75rem; background: var(--card-bg); border: 1px solid var(--border-color);">LP</button>
|
|
<button onclick="filterCondition('MP')" class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.75rem; background: var(--card-bg); border: 1px solid var(--border-color);">MP</button>
|
|
<button onclick="filterCondition('HP')" class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.75rem; background: var(--card-bg); border: 1px solid var(--border-color);">HP</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="listings-container" style="display: flex; flex-direction: column; gap: 1rem;">
|
|
{% for listing in listings %}
|
|
<div class="listing-item" data-condition="{{ listing.condition }}"
|
|
style="display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
|
<div style="display: flex; gap: 1rem; align-items: center;">
|
|
<span style="font-weight: 700; font-size: 1.25rem; width: 3rem; text-align: center;">{{
|
|
listing.condition }}</span>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: #94a3b8;">Condition</div>
|
|
{% if listing.is_foil %}
|
|
<span
|
|
style="background: linear-gradient(45deg, #f59e0b, #d97706); -webkit-background-clip: text; color: transparent; font-weight: 700; font-size: 0.75rem; text-transform: uppercase;">Foil</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 2rem;">
|
|
<div style="text-align: right;">
|
|
<div style="font-weight: 700; font-size: 1.5rem;">${{ listing.price }}</div>
|
|
<div style="font-size: 0.75rem; color: #94a3b8;">{{ listing.quantity }} available</div>
|
|
</div>
|
|
|
|
{% if user.is_authenticated %}
|
|
<form action="{% url 'store:add_to_cart' listing.id %}" method="post">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn">Add to Cart</button>
|
|
</form>
|
|
{% else %}
|
|
<a href="{% url 'login' %}?next={{ request.path }}" class="btn" style="background: #334155;">Login
|
|
to Buy</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div
|
|
style="text-align: center; padding: 2rem; background: var(--card-bg); border-radius: 0.5rem; border: 1px dashed var(--border-color);">
|
|
<p style="margin: 0; color: #94a3b8;">No listings currently available for this card.</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Proxy Service -->
|
|
<div style="margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<h3 style="margin: 0 0 0.5rem;">Playtest Proxy Service</h3>
|
|
<p style="margin: 0; color: #94a3b8; font-size: 0.875rem;">Download a high-res proxy for playtesting. Credit offered if you buy later.</p>
|
|
</div>
|
|
<button onclick="alert('Proxy PDF generated! (Mockup)')" class="btn" style="background: transparent; border: 1px solid var(--border-color);">Download Proxy</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function filterCondition(cond) {
|
|
const items = document.querySelectorAll('.listing-item');
|
|
items.forEach(item => {
|
|
if (cond === 'ALL' || item.dataset.condition === cond) {
|
|
item.style.display = 'flex';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |