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