Compare commits
2 Commits
6faafd0e04
...
6e8463f224
| Author | SHA1 | Date | |
|---|---|---|---|
| 6e8463f224 | |||
| e3239804f6 |
179
Leaderboard.html
Normal file
179
Leaderboard.html
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="id">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Leaderboard</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #c42ddf, #fe8bb4);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TOPBAR */
|
||||||
|
.topbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn, .logout-btn {
|
||||||
|
background: white;
|
||||||
|
padding: 8px 15px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-icon {
|
||||||
|
background: #d05dec;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TITLE */
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FILTER BUTTONS */
|
||||||
|
.filter-container {
|
||||||
|
margin: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
background: rgba(255,255,255,0.3);
|
||||||
|
border: none;
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.filter-btn.active {
|
||||||
|
background: white;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
le {
|
||||||
|
width: 95%;
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: rgba(255,255,255,0.15);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.hard { background: #ff6b6b; }
|
||||||
|
.medium { background: #ffe86a; }
|
||||||
|
.easy { background: #7ddf8c; }
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 28%;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(255,255,255,0.25);
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h2 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="topbar">
|
||||||
|
<button class="back-btn" onclick="window.location.href='mainboard.html'">← Kembali</button>
|
||||||
|
<button class="logout-btn">Logout</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="title">🏆 Leaderboard</h1>
|
||||||
|
<p class="subtitle"> Top skor dari semua pemain</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="filter-container">
|
||||||
|
<span>Filter:</span>
|
||||||
|
<button class="filter-btn active">Semua</button>
|
||||||
|
<button class="filter-btn">Easy</button>
|
||||||
|
<button class="filter-btn">Medium</button>
|
||||||
|
<button class="filter-btn">Hard</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
🎮
|
||||||
|
<p>Total Game Dimainkan</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
👑
|
||||||
|
<p>Top Player</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
⭐
|
||||||
|
<p>Highest Score</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const buttons = document.querySelectorAll(".filter-btn");
|
||||||
|
buttons.forEach(btn => {
|
||||||
|
btn.addEventListener("click", function () {
|
||||||
|
buttons.forEach(b => b.classList.remove("active"));
|
||||||
|
this.classList.add("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -217,8 +217,6 @@ body {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.play-again { background: #b700ff; color: white; }
|
.play-again { background: #b700ff; color: white; }
|
||||||
.leaderboard { background: gold; }
|
.leaderboard { background: gold; }
|
||||||
.back-menu { background: #444; color: white; }
|
.back-menu { background: #444; color: white; }
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user