186 lines
5.7 KiB
HTML
186 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Leaderboard</title>
|
|
<link rel="stylesheet" href="Leaderboard.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div id="particles"></div>
|
|
|
|
<button class="btn-back" onclick="location.href='Homepage.html'">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="container">
|
|
<h1>Leaderboard</h1>
|
|
|
|
<div class="stats-container">
|
|
<div class="stat-box">
|
|
<div class="stat-label">Players</div>
|
|
<div class="stat-value" id="totalPlayers">10</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">Your Rank</div>
|
|
<div class="stat-value" id="yourRank">5</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">High Score</div>
|
|
<div class="stat-value" id="highScore">9,850</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="leaderboard-list" id="leaderboardList">
|
|
<li class="leaderboard-item rank-1">
|
|
<div class="rank-badge">1</div>
|
|
<div class="player-info">
|
|
<div class="player-name">CyberKing</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">9,850</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-2">
|
|
<div class="rank-badge">2</div>
|
|
<div class="player-info">
|
|
<div class="player-name">NeonMaster</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">8,200</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-3">
|
|
<div class="rank-badge">3</div>
|
|
<div class="player-info">
|
|
<div class="player-name">PixelHunter</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">6,950</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-other">
|
|
<div class="rank-badge">4</div>
|
|
<div class="player-info">
|
|
<div class="player-name">StarGazer</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">5,420</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-other">
|
|
<div class="rank-badge">5</div>
|
|
<div class="player-info">
|
|
<div class="player-name">You</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">4,890</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-other">
|
|
<div class="rank-badge">6</div>
|
|
<div class="player-info">
|
|
<div class="player-name">ByteWarrior</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">4,320</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-other">
|
|
<div class="rank-badge">7</div>
|
|
<div class="player-info">
|
|
<div class="player-name">DataDragon</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">3,850</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-other">
|
|
<div class="rank-badge">8</div>
|
|
<div class="player-info">
|
|
<div class="player-name">SyntaxSage</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">3,120</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-other">
|
|
<div class="rank-badge">9</div>
|
|
<div class="player-info">
|
|
<div class="player-name">LogicLord</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">2,780</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-other">
|
|
<div class="rank-badge">10</div>
|
|
<div class="player-info">
|
|
<div class="player-name">BugSlayer</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">2,340</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="your-rank-container">
|
|
<div class="your-rank-item">
|
|
<div
|
|
class="rank-badge"
|
|
style="
|
|
background: linear-gradient(135deg, #00ff88, #00eaff);
|
|
color: #0c001a;
|
|
box-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
|
|
"
|
|
>
|
|
5
|
|
</div>
|
|
<div class="player-info">
|
|
<div
|
|
class="player-name"
|
|
style="
|
|
color: #00ff88;
|
|
filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.6));
|
|
"
|
|
>
|
|
You
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="player-score"
|
|
style="color: #00ff88; text-shadow: 0 0 15px rgba(0, 255, 136, 0.8)"
|
|
>
|
|
<div class="score-value" style="font-size: 24px">4,890</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="Leaderboard.js"></script>
|
|
</body>
|
|
</html>
|