205 lines
No EOL
8.3 KiB
HTML
205 lines
No EOL
8.3 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static trade_offer_tags card_badge cache card_multiselect %}
|
|
|
|
{% block content %}
|
|
<h1 class="text-center text-4xl font-bold mb-8 pt-4">
|
|
<span class="inline leading-none" aria-hidden="true">
|
|
<span class="inline-block relative">Welcome to</span>
|
|
<span class="inline-block relative align-text-top">P</span><span class="inline-block relative align-text-bottom">K</span><span class="inline-block relative align-text-top">M</span><span class="inline-block relative align-text-bottom">N</span>
|
|
<span class="inline-block relative">Trade Club</span>
|
|
</span>
|
|
<span aria-hidden="false" class="sr-only">Welcome to PKMN Trade Club</span>
|
|
</h1>
|
|
|
|
<!-- Search/Create Form Section -->
|
|
<section id="trade-search" class="mb-8">
|
|
<form id="tradeSearchForm" method="post" class="space-y-4">
|
|
{% csrf_token %}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
{% card_multiselect "have_cards" "I Have:" "Select some cards..." cards have_cards %}
|
|
</div>
|
|
<div>
|
|
{% card_multiselect "want_cards" "I Want:" "Select some cards..." cards want_cards %}
|
|
</div>
|
|
</div>
|
|
{# Pass the user's default friend code as a hidden field for creation #}
|
|
<input type="hidden" name="initiated_by" value="{{ request.user.default_friend_code.pk }}">
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
<button type="submit" name="search" formaction="{% url 'trade_offer_search' %}" class="btn btn-primary grow">
|
|
Find a Trade Offer
|
|
</button>
|
|
<button type="submit" name="preview" formaction="{% url 'trade_offer_confirm_create' %}" class="btn btn-secondary grow">
|
|
Create Trade Offer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Card Stats Section -->
|
|
<section aria-labelledby="stats-heading" class="mb-8">
|
|
<h2 id="stats-heading" class="text-2xl font-semibold mb-4">Card Stats</h2>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<!-- Most Offered Cards -->
|
|
<div>
|
|
<div class="card card-border bg-base-100 shadow-lg">
|
|
<div class="card-header text-base-content p-4">
|
|
<h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Most Offered</h5>
|
|
</div>
|
|
<div class="card-body my-4 p-0">
|
|
{% cache 3600 most_offered_cards %}
|
|
{% include "home/_card_list.html" with cards=most_offered_cards %}
|
|
{% endcache %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Most Wanted Cards -->
|
|
<div>
|
|
<div class="card card-border bg-base-100 shadow-lg">
|
|
<div class="card-header text-base-content p-4">
|
|
<h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Most Wanted</h5>
|
|
</div>
|
|
<div class="card-body my-4 p-0">
|
|
{% cache 3600 most_wanted_cards %}
|
|
{% include "home/_card_list.html" with cards=most_wanted_cards %}
|
|
{% endcache %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Least Offered Cards (Last Group) -->
|
|
<div class="col-span-2 md:col-span-1">
|
|
<div class="card card-border bg-base-100 shadow-lg">
|
|
<div class="card-header text-base-content p-4">
|
|
<h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Least Offered</h5>
|
|
</div>
|
|
<div class="card-body my-4 p-0">
|
|
{% cache 3600 least_offered_cards %}
|
|
{% include "home/_card_list.html" with cards=least_offered_cards %}
|
|
{% endcache %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Offers and Recent Offers Section -->
|
|
<section class="mb-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Featured Offers -->
|
|
<div>
|
|
{% cache 60 featured_offers %}
|
|
<div class="p-4 text-center ">
|
|
<h5 class="text-xl font-semibold whitespace-nowrap truncate mb-0">Featured Offers</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<!-- Tab contents -->
|
|
<div id="featured-tab-contents">
|
|
<div class="tab-content" data-tab="featured-all">
|
|
{% if featured_offers.All %}
|
|
<div class="flex flex-col items-center gap-3 w-auto mx-auto">
|
|
{% for offer in featured_offers.All %}
|
|
{% render_trade_offer offer %}
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-center">No featured offers available.</p>
|
|
{% endif %}
|
|
</div>
|
|
{% for rarity, offers in featured_offers.items %}
|
|
{% if rarity != "All" %}
|
|
<div class="tab-content" data-tab="featured-{{ forloop.counter }}" style="display: none;">
|
|
{% if offers %}
|
|
<div class="flex flex-col items-center gap-3 w-auto mx-auto">
|
|
{% for offer in offers %}
|
|
{% render_trade_offer offer %}
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="text-center">No featured offers for {{ rarity }}.</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
<!-- DaisyUI Tabs for Featured Offers (hidden for now) -->
|
|
<div class="card card-border bg-base-100 shadow-lg w-96 md:w-80 lg:w-96 mt-8 mx-auto hidden">
|
|
<!-- Tabs navigation using daisyUI tabs-box -->
|
|
<div class="tabs tabs-box bg-white dark:bg-base-100 grid grid-cols-3 gap-1.5 justify-items-stretch">
|
|
<!-- Radio inputs for controlling tab state -->
|
|
<input type="radio" class="tab text-xs font-bold md:text-sm w-full bg-base-100" name="featured_tabs" id="featured-all" checked="checked" aria-label="All">
|
|
{% for rarity, offers in featured_offers.items %}
|
|
{% if rarity != "All" %}
|
|
<input type="radio" class="tab text-xs font-bold md:text-sm w-full bg-base-100" name="featured_tabs" id="featured-{{ forloop.counter }}" aria-label="{{ rarity }}">
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endcache %}
|
|
</div>
|
|
|
|
<!-- Recent Offers -->
|
|
<div>
|
|
{% cache 60 recent_offers %}
|
|
<div class="text-center p-4">
|
|
<h5 class="text-xl font-semibold whitespace-nowrap truncate mb-0">Recent Offers</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<div class="flex flex-col items-center gap-3">
|
|
{% for offer in recent_offers %}
|
|
{% render_trade_offer offer %}
|
|
{% empty %}
|
|
<p>No recent offers available.</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endcache %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
<script defer>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Minimal JavaScript for toggling Featured Offers tabs
|
|
const featuredTabs = document.querySelectorAll('input[name="featured_tabs"]');
|
|
const featuredTabContents = document.querySelectorAll('#featured-tab-contents .tab-content');
|
|
|
|
function updateFeaturedTabs() {
|
|
featuredTabs.forEach(radio => {
|
|
if (radio.checked) {
|
|
const target = radio.id;
|
|
featuredTabContents.forEach(content => {
|
|
content.style.display = content.getAttribute('data-tab') === target ? 'block' : 'none';
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
featuredTabs.forEach(radio => {
|
|
radio.addEventListener('change', updateFeaturedTabs);
|
|
});
|
|
|
|
// Initialize tabs on page load
|
|
updateFeaturedTabs();
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.tabs-box .tab {
|
|
z-index: 1;
|
|
}
|
|
.tabs-box .tab:checked,
|
|
.tabs-box .tab.active {
|
|
z-index: 2;
|
|
background-color: var(--color-base-200);
|
|
accent-color: var(--color-base-200);
|
|
}
|
|
.tabs-box .tab:focus-visible {
|
|
outline: none;
|
|
}
|
|
</style>
|
|
{% endblock %} |