41 lines
2.4 KiB
HTML
41 lines
2.4 KiB
HTML
{% extends 'base/layout.html' %}
|
|
|
|
{% block content %}
|
|
<div style="max-width: 1000px; margin: 0 auto;">
|
|
<div style="text-align: center; margin-bottom: 3rem;">
|
|
<h1 style="font-size: 2.5rem; margin-bottom: 0.5rem; background: linear-gradient(to right, #fbbf24, #d97706); -webkit-background-clip: text; color: transparent;">Community Bounty Board</h1>
|
|
<p style="color: #94a3b8; font-size: 1.125rem;">We're looking for these cards! Sell them to us for a bonus.</p>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;">
|
|
{% for bounty in bounties %}
|
|
<div style="background: var(--card-bg); border: 1px solid #d97706; border-radius: 0.75rem; overflow: hidden; position: relative;">
|
|
<div style="background: #d97706; color: white; padding: 0.25rem 0.5rem; position: absolute; top: 0; right: 0; font-weight: 700; font-size: 0.75rem; border-bottom-left-radius: 0.5rem;">
|
|
WANTED
|
|
</div>
|
|
|
|
<div style="padding: 1.5rem;">
|
|
<h3 style="margin: 0 0 0.5rem; font-size: 1.25rem;">{{ bounty.card.name }}</h3>
|
|
<p style="margin: 0; color: #94a3b8; font-size: 0.875rem;">{{ bounty.card.set.name }}</p>
|
|
|
|
<div style="margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: flex-end;">
|
|
<div>
|
|
<div style="font-size: 0.75rem; color: #94a3b8;">Buying At</div>
|
|
<div style="font-size: 1.5rem; font-weight: 800; color: #fbbf24;">${{ bounty.target_price }}</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 0.25rem;">Qty Wanted: {{ bounty.quantity_wanted }}</div>
|
|
<button onclick="alert('Sell Offer Submitted! (Mockup)')" class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.875rem;">I Have This</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div style="grid-column: 1 / -1; text-align: center; padding: 4rem; background: var(--card-bg); border-radius: 0.5rem; border: 1px dashed var(--border-color);">
|
|
<p style="color: #94a3b8; font-size: 1.25rem;">No active bounties at the moment.</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|