Update
This commit is contained in:
Evelyn Sucitro
parent
8f79205dfb
commit
54f5f2a5fb
320
Leaderboard.html
320
Leaderboard.html
@ -1,165 +1,185 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Leaderboard - 2048</title>
|
<title>Leaderboard</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="Leaderboard.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="particles"></div>
|
<div id="particles"></div>
|
||||||
|
|
||||||
<button class="btn-back" onclick="location.href='2048.html'">
|
<button class="btn-back" onclick="location.href='2048.html'">
|
||||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
<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"/>
|
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Leaderboard</h1>
|
<h1>Leaderboard</h1>
|
||||||
|
|
||||||
<div class="stats-container">
|
<div class="stats-container">
|
||||||
<div class="stat-box">
|
<div class="stat-box">
|
||||||
<div class="stat-label">Players</div>
|
<div class="stat-label">Players</div>
|
||||||
<div class="stat-value" id="totalPlayers">10</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>
|
</div>
|
||||||
|
<div class="stat-box">
|
||||||
<ul class="leaderboard-list" id="leaderboardList">
|
<div class="stat-label">Your Rank</div>
|
||||||
<li class="leaderboard-item rank-1">
|
<div class="stat-value" id="yourRank">5</div>
|
||||||
<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>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<script src="Leaderboard.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user