100 lines
3.9 KiB
HTML
100 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Gateway Gamers — 40K Rankings</title>
|
||
<link rel="stylesheet" href="/src/style.css" />
|
||
</head>
|
||
<body class="min-h-screen flex flex-col">
|
||
|
||
<div id="header"></div>
|
||
|
||
<main class="flex-1 max-w-5xl w-full mx-auto px-6 py-10">
|
||
|
||
<!-- Page heading + live status + refresh -->
|
||
<div class="flex items-start justify-between mb-6 flex-wrap gap-4">
|
||
<div>
|
||
<h1 class="text-4xl font-bold uppercase tracking-wide">40K Rankings</h1>
|
||
<p class="text-sm opacity-50 uppercase tracking-widest mt-1">Warhammer 40,000 · ITC Standings</p>
|
||
</div>
|
||
<div class="flex items-center gap-3 pt-1">
|
||
<span class="flex items-center gap-2 text-sm opacity-60">
|
||
<span class="w-2 h-2 rounded-full bg-base-content/30 transition-colors" id="dot"></span>
|
||
<span id="updated">Loading…</span>
|
||
</span>
|
||
<button id="refresh" class="btn btn-warning btn-sm uppercase tracking-wide">Refresh</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats strip -->
|
||
<div class="stats shadow w-full mb-6 bg-base-200" id="strip" hidden>
|
||
<div class="stat">
|
||
<div class="stat-title">Players Placed</div>
|
||
<div class="stat-value text-2xl" id="s-placed">—</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-title">Top ITC Points</div>
|
||
<div class="stat-value text-2xl text-warning" id="s-top">—</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-title">Team Win %</div>
|
||
<div class="stat-value text-2xl" id="s-rec">—</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-title">Best League Rank</div>
|
||
<div class="stat-value text-2xl" id="s-best">—</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Banner (warnings / errors) -->
|
||
<div class="alert mb-4 hidden" id="banner"></div>
|
||
|
||
<!-- Champion card -->
|
||
<div class="card card-border border-warning bg-base-200 mb-6 hidden" id="champion">
|
||
<div class="card-body flex-row items-center gap-6 py-4">
|
||
<span class="text-warning font-mono font-bold text-5xl w-12 text-center shrink-0">1</span>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="font-bold text-2xl uppercase tracking-wide" id="champ-name"></div>
|
||
<div class="text-sm opacity-60 mt-1" id="champ-sub"></div>
|
||
</div>
|
||
<div class="text-right shrink-0">
|
||
<div class="text-warning font-mono font-bold text-3xl" id="champ-pts"></div>
|
||
<div class="text-xs opacity-50 uppercase tracking-widest mt-1">Team Leader</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Leaderboard table -->
|
||
<div class="overflow-x-auto">
|
||
<table class="table table-zebra w-full" id="board">
|
||
<thead>
|
||
<tr>
|
||
<th class="w-12">#</th>
|
||
<th class="cursor-pointer select-none" data-sort="name">Player</th>
|
||
<th class="text-right cursor-pointer select-none" data-sort="pts">ITC Points</th>
|
||
<th class="text-right hidden sm:table-cell">W–L–T</th>
|
||
<th class="text-right hidden sm:table-cell cursor-pointer select-none" data-sort="wpct">Win %</th>
|
||
<th class="text-right hidden sm:table-cell cursor-pointer select-none" data-sort="rank">ITC Rank</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="rows"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="text-center text-base-content/50 py-12 hidden" id="empty"></div>
|
||
|
||
<div class="divider mt-8"></div>
|
||
|
||
<p class="text-xs text-base-content/40 text-center" id="meta">
|
||
Data from Best Coast Pairings · live on refresh
|
||
</p>
|
||
|
||
</main>
|
||
|
||
<div id="footer"></div>
|
||
|
||
<script type="module" src="/src/main.js"></script>
|
||
</body>
|
||
</html>
|