adding sound to leaderboard

Leaderboard.php

@@ -147,5 +147,12 @@ if (is_array($currentUser)) {
     </div>
 </div>
 
+<div class="music-container">
+    <button id="lbMusicBtn" class="music-btn">🔇</button>
+</div>
+<audio id="lbAudio" loop src="music/music_background.mp3"></audio>
+
+<script src="assets/leaderboard.js"></script>
+
 </body>
-</html>
+</html>

assets/leaderboard.css

@@ -129,7 +129,7 @@ body {
 }
 
 .table-header {
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(255, 255, 255, 0.617);
     font-weight: bold;
     border-radius: 15px 15px 0 0;
     text-transform: uppercase;
@@ -239,4 +239,36 @@ body {
 /* Icon Juara Colors */
 .text-gold { color: gold; }
 .text-silver { color: silver; }
-.text-bronze { color: #cd7f32; }
+.text-bronze { color: #cd7f32; }
+
+.music-container {
+    position: fixed;  /* Kunci posisi di layar */
+    bottom: 30px;     /* Jarak dari bawah */
+    right: 30px;      /* Jarak dari kanan */
+    z-index: 9999;    /* Pastikan selalu di paling atas (supaya bisa diklik) */
+}
+
+.music-btn {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%; /* Membuat tombol bulat sempurna */
+    border: 2px solid white;
+    background: rgba(255, 255, 255, 0.25); /* Efek kaca transparan */
+    backdrop-filter: blur(5px);
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    outline: none;
+}
+
+.music-btn:hover {
+    transform: scale(1.1); /* Efek membesar saat kursor mendekat */
+    background: rgba(255, 255, 255, 0.4);
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
+}

assets/leaderboard.js

@@ -1,8 +1,29 @@
-    const buttons = document.querySelectorAll(".filter-btn");
+const buttons = document.querySelectorAll(".filter-btn");
-    buttons.forEach(btn => {
+buttons.forEach(btn => {
-        btn.addEventListener("click", function () {
+    btn.addEventListener("click", function () {
-            buttons.forEach(b => b.classList.remove("active"));
+        buttons.forEach(b => b.classList.remove("active"));
-            this.classList.add("active");
+        this.classList.add("active");
-        });
     });
+});
 
+
+const lbMusicBtn = document.getElementById("lbMusicBtn");
+const lbAudio = document.getElementById("lbAudio");
+let isLbPlaying = true;
+
+if (lbMusicBtn && lbAudio) {
+    lbMusicBtn.addEventListener("click", () => {
+        if (isLbPlaying) {
+            lbAudio.pause();
+            lbMusicBtn.innerHTML = "🔇"; 
+            isLbPlaying = false;
+        } else {
+            // Memulai musik
+            lbAudio.play().catch(error => {
+                console.log("Autoplay dicegah browser, klik manual diperlukan.");
+            });
+            lbMusicBtn.innerHTML = "🔊"; 
+            isLbPlaying = true;
+        }
+    });
+}