96 lines
No EOL
5.6 KiB
HTML
96 lines
No EOL
5.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block body %}
|
|
<main class="flex flex-col items-center">
|
|
|
|
<h1 class="text-3xl text-white">{{ name }}'s SK TCG Trader</h1>
|
|
<div class="bg-gray-900 py-10 rounded-2xl shadow-lg my-4">
|
|
<h2 class="px-4 text-3xl font-bold leading-7 text-white sm:px-6 text-center lg:px-8">Latest Prices</h2>
|
|
<table class="mt-6 w-full whitespace-nowrap text-left">
|
|
<colgroup>
|
|
<col class="w-full sm:w-4/12">
|
|
<col class="lg:w-4/12">
|
|
<col class="lg:w-2/12">
|
|
<col class="lg:w-1/12">
|
|
<col class="lg:w-1/12">
|
|
</colgroup>
|
|
<thead class="border-b border-white/10 text-sm leading-6 text-white">
|
|
<tr>
|
|
<th scope="col" class="py-2 pl-4 pr-8 text-center font-semibold sm:pl-6 lg:pl-8">Card Name</th>
|
|
<th scope="col" class="hidden py-2 text-center pl-0 pr-8 font-semibold sm:table-cell">Card Count</th>
|
|
<th scope="col" class="py-2 pl-0 pr-4 text-center font-semibold sm:pr-8 sm:text-left lg:pr-20">Card Value</th>
|
|
<th scope="col" class="hidden py-2 pl-0 pr-8 font-semibold md:table-cell lg:pr-20">More Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
{% for card in cards %}
|
|
<tr>
|
|
<td class="py-4 pl-4 pr-8 sm:pl-6 lg:pl-8">
|
|
<div class="flex items-center gap-x-4">
|
|
<img src="https://api.dicebear.com/6.x/adventurer/svg?seed={{card.count}}-20-{{card.name|wordcount}}" class="h-7 w-7" alt="avatar" />
|
|
<div class="truncate text-sm font-medium leading-6 text-white">{{ card.name|capitalize }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8 text-center"> <!-- Added text-center class -->
|
|
<div class="font-mono text-sm leading-6 text-gray-400">{{ card.count }}</div>
|
|
</td>
|
|
<td class="py-4 pl-0 pr-4 text-sm leading-6 sm:pr-8 lg:pr-20 text-center"> <!-- Added text-center class -->
|
|
<div class="flex items-center justify-center gap-x-2 sm:justify-start"> <!-- Added justify-center class -->
|
|
{% if card.usd_value > 5.00 %}
|
|
<div class="flex-none rounded-full p-1 text-green-400 bg-green-400/10">
|
|
<div class="h-1.5 w-1.5 rounded-full bg-current"></div>
|
|
</div>
|
|
{% else if card.usd_value < 1.00 %}
|
|
<div class="flex-none rounded-full p-1 text-red-400 bg-green-400/10">
|
|
<div class="h-1.5 w-1.5 rounded-full bg-current"></div>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex-none rounded-full p-1 text-yellow-400 bg-green-400/10">
|
|
<div class="h-1.5 w-1.5 rounded-full bg-current"></div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="text-white">${{ card.usd_value }}</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td class=" py-4 pl-0 pr-8 text-sm leading-6 text-gray-400 md:table-cell lg:pr-20 text-center flex justify-center"> <!-- Added text-center and flex justify-center classes -->
|
|
<button class="p-2 rounded-xl bg-blue-600 text-lg text-gray-100 ring-1 ring-inset ring-gray-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
|
|
</tbody>
|
|
</table>
|
|
<nav class="flex items-center justify-between border-t bg-gray-900 border-white/10 px-4 py-3 sm:px-6" aria-label="Pagination">
|
|
<div class="hidden sm:block">
|
|
<p class="text-sm text-gray-50">
|
|
Showing
|
|
<span class="font-medium">{{ (current_page - 1) * 10 + 1 }}</span>
|
|
to
|
|
<span class="font-medium">{{ current_page * 10 }}</span>
|
|
of
|
|
<span class="font-medium">{{ total_cards }}</span>
|
|
results
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-1 justify-between sm:justify-end">
|
|
{% if current_page > 1 %}
|
|
<a href="?page={{ current_page - 1 }}" class="relative inline-flex items-center bg-blue-600 rounded-md px-3 py-2 text-sm font-semibold text-gray-50 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0" hx-get="/cards?page={{ current_page - 1 }}" hx-target="#card_table" hx-swap="innerHTML">Previous</a>
|
|
{% endif %}
|
|
{% if current_page * 10 < total_cards %}
|
|
<a href="?page={{ current_page + 1 }}" class="relative ml-3 inline-flex items-center bg-blue-600 rounded-md px-3 py-2 text-sm font-semibold text-gray-50 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0" hx-get="/cards?page={{ current_page + 1 }}" hx-target="#card_table" hx-swap="innerHTML">Next</a>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="p-2 mb-4 rounded-xl bg-blue-600 text-xl font-bold text-gray-100 ring-1 ring-inset ring-gray-300" hx-get="/metrics" hx-trigger="click" hx-target="#card_table" hx-swap="innerHTML">
|
|
Update Prices
|
|
</button>
|
|
</main>
|
|
{% endblock %} |