diff --git a/Main.html b/Main.html
index d232a82..795aac7 100644
--- a/Main.html
+++ b/Main.html
@@ -10,7 +10,6 @@
-
-
-
+
+
diff --git a/Script.js b/Script.js
index 908eebe..277c5b3 100644
--- a/Script.js
+++ b/Script.js
@@ -1954,4 +1954,61 @@ function returnToMenu() {
}
console.log('Menu System Loaded');
-console.log('Settings:', gameSettings);
\ No newline at end of file
+console.log('Settings:', gameSettings);
+
+// === LEADERBOARD LOGIC ===
+const leaderboardMenu = document.getElementById('leaderboardMenu');
+const leaderboardBtn = document.getElementById('leaderboardBtn');
+const lbBackBtn = document.getElementById('lbBackBtn');
+const leaderboardList = document.getElementById('leaderboardList');
+
+// Buka Menu Leaderboard
+leaderboardBtn.addEventListener('click', () => {
+ playSound(menuClickSound); // Pastikan fungsi playSound ada
+ mainMenu.style.display = 'none';
+ leaderboardMenu.style.display = 'flex';
+ fetchLeaderboard();
+});
+
+// Tutup Menu Leaderboard
+lbBackBtn.addEventListener('click', () => {
+ playSound(menuClickSound);
+ leaderboardMenu.style.display = 'none';
+ mainMenu.style.display = 'flex';
+});
+
+// Fungsi Ambil Data dari PHP
+async function fetchLeaderboard() {
+ leaderboardList.innerHTML = '| Scanning Database... |
';
+
+ try {
+ const response = await fetch('leaderboard.php');
+ const result = await response.json();
+
+ if (result.success && result.data.length > 0) {
+ leaderboardList.innerHTML = ''; // Hapus loading
+
+ result.data.forEach(player => {
+ let rowClass = '';
+ if (player.rank === 1) rowClass = 'rank-1';
+ else if (player.rank === 2) rowClass = 'rank-2';
+ else if (player.rank === 3) rowClass = 'rank-3';
+
+ const row = `
+
+ | #${player.rank} |
+ ${player.username} |
+ LVL ${player.level} |
+ ${player.score.toLocaleString()} |
+
+ `;
+ leaderboardList.innerHTML += row;
+ });
+ } else {
+ leaderboardList.innerHTML = '| No Records Found |
';
+ }
+ } catch (error) {
+ console.error('Leaderboard error:', error);
+ leaderboardList.innerHTML = '| Connection Error |
';
+ }
+}
\ No newline at end of file
diff --git a/Style.css b/Style.css
index 2375fa6..bb2e205 100644
--- a/Style.css
+++ b/Style.css
@@ -7,7 +7,7 @@
body {
margin: 0;
padding: 0;
- background-color: #000;
+ background-color: #000;
font-family: 'Orbitron', sans-serif;
}
@@ -16,8 +16,9 @@ html, body {
overflow: hidden;
}
-/* === MAIN MENU & OPTIONS MENU === */
-#mainMenu, #optionsMenu {
+/* === MAIN MENU, OPTIONS, & LEADERBOARD MENU === */
+/* Saya menambahkan #leaderboardMenu disini agar posisinya sama */
+#mainMenu, #optionsMenu, #leaderboardMenu {
position: absolute;
width: 100vw;
height: 100vh;
@@ -38,7 +39,7 @@ html, body {
to { opacity: 1; }
}
-/* === STARS CONTAINER (hidden by default, no animation) === */
+/* === STARS CONTAINER (hidden by default) === */
.stars-container {
display: none;
}
@@ -262,28 +263,6 @@ input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
-input[type="range"]::-moz-range-thumb {
- width: 24px;
- height: 24px;
- background: linear-gradient(145deg, #00eaff, #00bcd4);
- border-radius: 50%;
- cursor: pointer;
- border: 2px solid #ffffff;
- box-shadow:
- 0 0 10px rgba(0, 234, 255, 0.8),
- 0 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-/* === SLIDER VALUE TEXT === */
-.slider-container span {
- color: #ffffff;
- font-size: 18px;
- font-weight: 700;
- min-width: 60px;
- text-align: right;
- text-shadow: 0 0 8px rgba(0, 234, 255, 0.6);
-}
-
/* === BUTTON GROUP === */
.button-group {
display: flex;
@@ -353,6 +332,65 @@ input[type="range"]::-moz-range-thumb {
inset 0 0 20px rgba(0, 234, 255, 0.3);
}
+/* === LEADERBOARD STYLES (NEW) === */
+.leaderboard-container {
+ background: rgba(0, 0, 0, 0.7);
+ border: 2px solid rgba(0, 234, 255, 0.4);
+ border-radius: 15px;
+ padding: 20px;
+ margin-bottom: 30px;
+ width: 90%;
+ max-width: 800px;
+ max-height: 450px;
+ overflow-y: auto;
+ backdrop-filter: blur(10px);
+ box-shadow: 0 0 30px rgba(0, 234, 255, 0.15);
+}
+
+.leaderboard-table {
+ width: 100%;
+ border-collapse: collapse;
+ color: #fff;
+ font-family: 'Orbitron', sans-serif;
+}
+
+.leaderboard-table th {
+ background: rgba(0, 234, 255, 0.1);
+ color: #00eaff;
+ font-size: 18px;
+ padding: 15px;
+ text-align: center;
+ border-bottom: 2px solid #00eaff;
+ letter-spacing: 2px;
+ text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
+ position: sticky;
+ top: 0;
+ backdrop-filter: blur(5px);
+}
+
+.leaderboard-table td {
+ padding: 15px;
+ text-align: center;
+ font-size: 16px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ letter-spacing: 1px;
+}
+
+.leaderboard-table tr:hover td {
+ background: rgba(255, 255, 255, 0.05);
+ color: #fff;
+}
+
+/* Leaderboard Rank Colors */
+.rank-1 td { color: #ffd700; text-shadow: 0 0 10px #ffd700; font-weight: 900; font-size: 20px; }
+.rank-2 td { color: #c0c0c0; text-shadow: 0 0 10px #c0c0c0; font-weight: 700; }
+.rank-3 td { color: #cd7f32; text-shadow: 0 0 10px #cd7f32; font-weight: 700; }
+
+/* Custom Scrollbar for Leaderboard */
+.leaderboard-container::-webkit-scrollbar { width: 8px; }
+.leaderboard-container::-webkit-scrollbar-thumb { background: #00eaff; border-radius: 4px; }
+.leaderboard-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.5); }
+
/* === GAME CONTAINER === */
#gameContainer {
width: 100vw;
@@ -370,26 +408,12 @@ input[type="range"]::-moz-range-thumb {
/* === RESPONSIVE === */
@media (max-width: 768px) {
- .title-word {
- font-size: 60px;
- }
+ .title-word { font-size: 60px; }
+ .menu-btn { font-size: 20px; padding: 12px 40px; min-width: 280px; }
+ .options-container { min-width: 90vw; padding: 30px; }
+ .options-title { font-size: 50px; }
+ .footer-info p { font-size: 12px; }
- .menu-btn {
- font-size: 20px;
- padding: 12px 40px;
- min-width: 280px;
- }
-
- .options-container {
- min-width: 90vw;
- padding: 30px;
- }
-
- .options-title {
- font-size: 50px;
- }
-
- .footer-info p {
- font-size: 12px;
- }
+ /* Responsive Leaderboard */
+ .leaderboard-table th, .leaderboard-table td { font-size: 14px; padding: 10px; }
}
\ No newline at end of file