|
<!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> |
