leaderboard.js
This commit is contained in:
Evelyn
parent
120b93aba5
commit
9af82122b5
134
Leaderboard.html
134
Leaderboard.html
@ -3,125 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Leaderboard</title>
|
<title>Leaderboard</title>
|
||||||
|
<link rel="stylesheet" href="assets/leaderboard.css">
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background: linear-gradient(135deg, #c42ddf, #fe8bb4);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 32px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.subtitle {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: rgb(255, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@ -161,18 +43,6 @@ thead {
|
|||||||
<span id="baseScoreEnd">0</span></div></p>
|
<span id="baseScoreEnd">0</span></div></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="assets/leaderboard.js"></script>
|
||||||
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
114
assets/leaderboard.css
Normal file
114
assets/leaderboard.css
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #c42ddf, #fe8bb4);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: rgb(255, 0, 0);
|
||||||
|
}
|
||||||
8
assets/leaderboard.js
Normal file
8
assets/leaderboard.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
const buttons = document.querySelectorAll(".filter-btn");
|
||||||
|
buttons.forEach(btn => {
|
||||||
|
btn.addEventListener("click", function () {
|
||||||
|
buttons.forEach(b => b.classList.remove("active"));
|
||||||
|
this.classList.add("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
@ -9,15 +9,11 @@
|
|||||||
isMusicPlaying = !isMusicPlaying;
|
isMusicPlaying = !isMusicPlaying;
|
||||||
});
|
});
|
||||||
|
|
||||||
// NAVIGATION
|
// NAVIGATION (Ini yang penting, sudah .php)
|
||||||
function selectStage(stage) {
|
function selectStage(stage) {
|
||||||
window.location.href = "gameboard-" + stage + ".html";
|
window.location.href = "gameboard-" + stage + ".php";
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
|
||||||
window.location.href = "Leaderboard.html";
|
|
||||||
});
|
|
||||||
|
|
||||||
// OVERLAY CREDITS
|
// OVERLAY CREDITS
|
||||||
function openCredits() {
|
function openCredits() {
|
||||||
document.getElementById('creditsOverlay').style.display = 'flex';
|
document.getElementById('creditsOverlay').style.display = 'flex';
|
||||||
@ -27,11 +23,14 @@
|
|||||||
document.getElementById('creditsOverlay').style.display = 'none';
|
document.getElementById('creditsOverlay').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Karena JS eksternal mungkin tidak tahu lokasi logout.php, kita bantu disini
|
// LOGOUT
|
||||||
document.getElementById("logoutBtn").addEventListener("click", () => {
|
document.getElementById("logoutBtn").addEventListener("click", () => {
|
||||||
window.location.href = "logout.php";
|
window.location.href = "logout.php";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// LEADERBOARD (Cukup ditulis satu kali saja)
|
||||||
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
||||||
window.location.href = "Leaderboard.html"; // Atau Leaderboard.php jika sudah diubah
|
// Pastikan file aslinya bernama Leaderboard.html
|
||||||
|
// Kalau sudah diubah jadi PHP, ganti jadi "Leaderboard.php"
|
||||||
|
window.location.href = "Leaderboard.html";
|
||||||
});
|
});
|
||||||
@ -7,6 +7,7 @@ exit();
|
|||||||
}
|
}
|
||||||
$user = $_SESSION['user'];
|
$user = $_SESSION['user'];
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|||||||
@ -60,10 +60,12 @@ $roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮';
|
|||||||
<span class="icon">😊</span>
|
<span class="icon">😊</span>
|
||||||
<h3>Easy Mode</h3>
|
<h3>Easy Mode</h3>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button class="stage-btn" onclick="selectStage('medium')">
|
<button class="stage-btn" onclick="selectStage('medium')">
|
||||||
<span class="icon">🤔</span>
|
<span class="icon">🤔</span>
|
||||||
<h3>Medium Mode</h3>
|
<h3>Medium Mode</h3>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button class="stage-btn" onclick="selectStage('hard')">
|
<button class="stage-btn" onclick="selectStage('hard')">
|
||||||
<span class="icon">😤</span>
|
<span class="icon">😤</span>
|
||||||
<h3>Hard Mode</h3>
|
<h3>Hard Mode</h3>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user