162 lines
5.8 KiB
HTML
162 lines
5.8 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 - 2048</title>
|
|
<link rel="stylesheet" href="leaderboard.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="particles"></div>
|
|
|
|
<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">142</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">Your Rank</div>
|
|
<div class="stat-value" id="yourRank">--</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">Best Score</div>
|
|
<div class="stat-value" id="bestScore">0</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">Player 1</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">Player 2</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">Player 3</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">Player 4</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">Player 5</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">Player 6</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">Player 7</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">Player 8</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">Player 9</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">Player 10</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">2,340</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="leaderboard-item rank-other your-rank">
|
|
<div class="rank-badge">12</div>
|
|
<div class="player-info">
|
|
<div class="player-name">You</div>
|
|
</div>
|
|
<div class="player-score">
|
|
<div class="score-value">1,840</div>
|
|
<div class="score-label">Points</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<button class="btn-back" onclick="location.href='2048.html'">
|
|
Back to Game
|
|
</button>
|
|
</div>
|
|
|
|
<script src="leaderboard.js"></script>
|
|
</body>
|
|
</html> |