<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🏆 Student Scores Leaderboard (FastAPI)</title>
<link rel="stylesheet" href="/static/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
<div class="container">
<header>
<h1>🏆 Student Scores Leaderboard</h1>
<p>Top students of the Agents Course Unit 4 Challenge</p>
<div id="last-updated">Loading...</div>
</header>
<div class="leaderboard-header">
<div class="rank">Rank</div>
<div class="username">Username</div>
<div class="score">Score</div>
<div class="timestamp">Timestamp</div>
<div class="code-action">Code</div>
</div>
<div id="leaderboard-body">
<div id="loading-indicator">
<div class="spinner"></div>
Loading leaderboard data...
</div>
</div>
<footer>
Keep learning, stay awesome 🤗 | Auto-refreshing every 60s
</footer>
</div>
<div id="code-modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h2 id="modal-username">Code for User</h2>
<pre><code id="modal-code" class="language-python"></code></pre>
</div>
</div>
<script src="/static/script.js"></script>
</body>
</html>