leaderboard.js
This commit is contained in:
Evelyn
parent
120b93aba5
commit
9af82122b5
134
Leaderboard.html
134
Leaderboard.html
@ -3,125 +3,7 @@
|
||||
<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 {
|
||||
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>
|
||||
|
||||
<link rel="stylesheet" href="assets/leaderboard.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -161,18 +43,6 @@ thead {
|
||||
<span id="baseScoreEnd">0</span></div></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>
|
||||
|
||||
<script src="assets/leaderboard.js"></script>
|
||||
</body>
|
||||
</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");
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,37 +1,36 @@
|
||||
// LOGIKA MUSIK
|
||||
const musicBtn = document.getElementById('musicBtn');
|
||||
const bgMusic = document.getElementById('bgMusic');
|
||||
let isMusicPlaying = false;
|
||||
const musicBtn = document.getElementById('musicBtn');
|
||||
const bgMusic = document.getElementById('bgMusic');
|
||||
let isMusicPlaying = false;
|
||||
|
||||
musicBtn.addEventListener('click', () => {
|
||||
musicBtn.addEventListener('click', () => {
|
||||
isMusicPlaying ? bgMusic.pause() : bgMusic.play();
|
||||
musicBtn.innerText = isMusicPlaying ? '🔇' : '🔊';
|
||||
isMusicPlaying = !isMusicPlaying;
|
||||
});
|
||||
});
|
||||
|
||||
// NAVIGATION
|
||||
function selectStage(stage) {
|
||||
window.location.href = "gameboard-" + stage + ".html";
|
||||
}
|
||||
// NAVIGATION (Ini yang penting, sudah .php)
|
||||
function selectStage(stage) {
|
||||
window.location.href = "gameboard-" + stage + ".php";
|
||||
}
|
||||
|
||||
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
||||
window.location.href = "Leaderboard.html";
|
||||
});
|
||||
|
||||
// OVERLAY CREDITS
|
||||
function openCredits() {
|
||||
// OVERLAY CREDITS
|
||||
function openCredits() {
|
||||
document.getElementById('creditsOverlay').style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
function closeCredits() {
|
||||
function closeCredits() {
|
||||
document.getElementById('creditsOverlay').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Karena JS eksternal mungkin tidak tahu lokasi logout.php, kita bantu disini
|
||||
document.getElementById("logoutBtn").addEventListener("click", () => {
|
||||
// LOGOUT
|
||||
document.getElementById("logoutBtn").addEventListener("click", () => {
|
||||
window.location.href = "logout.php";
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
||||
window.location.href = "Leaderboard.html"; // Atau Leaderboard.php jika sudah diubah
|
||||
});
|
||||
// LEADERBOARD (Cukup ditulis satu kali saja)
|
||||
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
||||
// 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'];
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
@ -60,10 +60,12 @@ $roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮';
|
||||
<span class="icon">😊</span>
|
||||
<h3>Easy Mode</h3>
|
||||
</button>
|
||||
|
||||
<button class="stage-btn" onclick="selectStage('medium')">
|
||||
<span class="icon">🤔</span>
|
||||
<h3>Medium Mode</h3>
|
||||
</button>
|
||||
|
||||
<button class="stage-btn" onclick="selectStage('hard')">
|
||||
<span class="icon">😤</span>
|
||||
<h3>Hard Mode</h3>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user