Christian Krakau-Louis
120 lines
5.1 KiB
HTML
120 lines
5.1 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto space-y-6">
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
|
|
<div>
|
|
<h1 class="text-2xl md:text-3xl font-garamond font-bold text-irish-green">League Leaderboard</h1>
|
|
<p class="text-gray-600">See how your team ranks against the competition</p>
|
|
</div>
|
|
|
|
<div class="mt-4 md:mt-0">
|
|
<form method="get" action="/leaderboard/">
|
|
<select name="timeframe"
|
|
onchange="this.form.submit()"
|
|
class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green bg-white">
|
|
<option value="all" {% if timeframe == "all" %}selected{% endif %}>All Time</option>
|
|
<option value="month" {% if timeframe == "month" %}selected{% endif %}>This Month</option>
|
|
<option value="week" {% if timeframe == "week" %}selected{% endif %}>This Week</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Podium (on larger screens) -->
|
|
<div class="hidden md:flex justify-center items-end space-x-8 mb-12">
|
|
<!-- 2nd Place -->
|
|
{% if top_teams[1] %}
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-20 h-20 rounded-full bg-white shadow-md flex items-center justify-center mb-4">
|
|
<span class="text-4xl font-bold text-gray-500">2</span>
|
|
</div>
|
|
<div class="bg-gray-100 w-32 h-32 flex flex-col items-center justify-center rounded-t-lg">
|
|
<p class="font-bold text-lg">{{ top_teams[1].name }}</p>
|
|
<p class="text-irish-green font-bold">{{ top_teams[1].points }} pts</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- 1st Place -->
|
|
{% if top_teams[0] %}
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-24 h-24 rounded-full bg-golden-ale shadow-md flex items-center justify-center mb-4">
|
|
<span class="text-5xl font-bold text-white">1</span>
|
|
</div>
|
|
<div class="bg-gray-100 w-36 h-40 flex flex-col items-center justify-center rounded-t-lg shadow-md">
|
|
<p class="font-bold text-xl">{{ top_teams[0].name }}</p>
|
|
<p class="text-irish-green font-bold text-xl">{{ top_teams[0].points }} pts</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- 3rd Place -->
|
|
{% if top_teams[2] %}
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-16 h-16 rounded-full bg-[#CD7F32] shadow-md flex items-center justify-center mb-4">
|
|
<span class="text-3xl font-bold text-white">3</span>
|
|
</div>
|
|
<div class="bg-gray-100 w-28 h-28 flex flex-col items-center justify-center rounded-t-lg">
|
|
<p class="font-bold">{{ top_teams[2].name }}</p>
|
|
<p class="text-irish-green font-bold">{{ top_teams[2].points }} pts</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Timeframe Indicator -->
|
|
<div class="bg-irish-green bg-opacity-10 text-irish-green px-4 py-3 rounded-md text-center font-bold mb-6">
|
|
Showing {{ time_label }} Rankings
|
|
</div>
|
|
|
|
<!-- Leaderboard Table -->
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<table class="min-w-full">
|
|
<thead class="bg-irish-green text-white">
|
|
<tr>
|
|
<th class="py-3 px-4 text-left">Rank</th>
|
|
<th class="py-3 px-4 text-left">Team</th>
|
|
<th class="py-3 px-4 text-right">Points</th>
|
|
<th class="py-3 px-4 text-center">Change</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
{% for team in teams %}
|
|
<tr class="{% if team.rank == 1 %}bg-golden-ale bg-opacity-10{% endif %} hover:bg-gray-50">
|
|
<td class="py-3 px-4 font-bold">{{ team.rank }}</td>
|
|
<td class="py-3 px-4">
|
|
<a href="/teams/{{ team.id }}" class="text-irish-green hover:underline">{{ team.name }}</a>
|
|
</td>
|
|
<td class="py-3 px-4 text-right font-bold">{{ team.points }}</td>
|
|
<td class="py-3 px-4 text-center">
|
|
{% if team.change > 0 %}
|
|
<span class="text-green-600"><i class="fas fa-arrow-up"></i> {{ team.change }}</span>
|
|
{% elif team.change < 0 %}
|
|
<span class="text-red-600"><i class="fas fa-arrow-down"></i> {{ team.change|abs }}</span>
|
|
{% else %}
|
|
<span class="text-gray-400">-</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
|
|
{% if not teams %}
|
|
<tr>
|
|
<td colspan="4" class="py-8 text-center text-gray-500">No teams found. Start a quiz league to see rankings here!</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Team Formation CTA -->
|
|
<div class="bg-irish-green rounded-lg shadow-md p-6 text-center text-white">
|
|
<h3 class="text-xl font-garamond font-bold mb-2">Ready to join the rankings?</h3>
|
|
<p class="mb-4">Create or join a team and start climbing the leaderboard today!</p>
|
|
<a href="/teams/" class="inline-block bg-white text-irish-green font-bold px-6 py-2 rounded-md hover:bg-gray-100 transition">
|
|
Join a Team
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|