From 255a35e4ac4d8c252e216ae013bcbb584b0346e5 Mon Sep 17 00:00:00 2001 From: Yustina Date: Mon, 15 Dec 2025 22:52:17 +0700 Subject: [PATCH] update music background --- gameboard-easy.html | 275 ++++++++++++++++++++++--------------- mainboard.html | 62 ++++++++- music/music-click.mp3 | Bin 0 -> 11702 bytes music/music-correct.mp3 | Bin 0 -> 18720 bytes music/music-countdown.mp3 | Bin 0 -> 58080 bytes music/music-incorrect.mp3 | Bin 0 -> 17554 bytes music/music-lose.mp3 | Bin 0 -> 105120 bytes music/music-win.mp3 | Bin 0 -> 351085 bytes music/music_background.mp3 | Bin 0 -> 1285958 bytes 9 files changed, 217 insertions(+), 120 deletions(-) create mode 100644 music/music-click.mp3 create mode 100644 music/music-correct.mp3 create mode 100644 music/music-countdown.mp3 create mode 100644 music/music-incorrect.mp3 create mode 100644 music/music-lose.mp3 create mode 100644 music/music-win.mp3 create mode 100644 music/music_background.mp3 diff --git a/gameboard-easy.html b/gameboard-easy.html index 58e0004..9ee0c89 100644 --- a/gameboard-easy.html +++ b/gameboard-easy.html @@ -20,6 +20,30 @@ body { flex-direction: column; } +/* OVERLAY COUNTDOWN */ +#countdown-overlay { + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + background: rgba(0,0,0,0.85); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + color: white; + font-size: 150px; + font-weight: 800; + display: none; +} + +.pulse-anim { + animation: pulse 1s ease-out infinite; +} + +@keyframes pulse { + 0% { transform: scale(1); opacity: 1; } + 100% { transform: scale(2); opacity: 0; } +} + .topbar { display: flex; justify-content: space-between; @@ -67,7 +91,7 @@ body { grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; - box-sizing: border-box; + box-sizing: border-box; } .card { @@ -200,38 +224,25 @@ body { font-weight: 600; } -.gameboard { - flex: 1; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 16px; - padding: 25px 40px; - box-sizing: border-box; - place-items: center; -} - -.card { - width: 100%; - aspect-ratio: 4 / 3; - perspective: 1000px; - cursor: pointer; -} - .play-again { background: #b700ff; color: white; } .leaderboard { background: gold; } .back-menu { background: #444; color: white; } -@keyframes fadeIn { - from { opacity:0; transform: scale(0.8); } - to { opacity:1; transform: scale(1); } -} - -@media (max-width: 700px) { - .gameboard { - grid-template-columns: repeat(3, 1fr); - padding: 12px; - gap: 10px; - } +.music-control { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 100; + background: white; + width: 45px; + height: 45px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: 0 4px 10px rgba(0,0,0,0.3); + font-size: 20px; } @media (max-width: 700px) { @@ -241,11 +252,22 @@ body { gap: 10px; } } - +
+ + + + + + + + + +
🔇
+
@@ -256,16 +278,16 @@ body {
+
-
🎉 Selamat!
-

Anda berhasil menyelesaikan permainan!

+
🎉 Selamat!
+

Anda berhasil menyelesaikan permainan!

Skor Base: 0
Time Bonus: 0
Move Bonus: 0
-
Total Skor: 0 @@ -274,18 +296,58 @@ body { -
- - + \ No newline at end of file diff --git a/mainboard.html b/mainboard.html index 51ab506..95f7597 100644 --- a/mainboard.html +++ b/mainboard.html @@ -99,7 +99,7 @@ body { } /* ================================ - 🎀 BUTTONS + 🎀 BUTTONS ================================== */ .btn { @@ -130,7 +130,7 @@ body { } /* ================================ - 📝 TITLE + 📝 TITLE ================================== */ .title { @@ -149,7 +149,7 @@ body { } /* ================================ - 🎮 STAGE SELECTION GRID + 🎮 STAGE SELECTION GRID ================================== */ .stage-grid { @@ -212,14 +212,47 @@ body { 100% { transform: translateX(0); } } +/* STYLE TAMBAHAN UNTUK TOMBOL SPEAKER */ +.music-container { + position: fixed; + top: 20px; + right: 20px; + z-index: 1000; +} + +.music-btn { + width: 50px; + height: 50px; + background: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 5px 15px rgba(0,0,0,0.2); + font-size: 24px; + transition: 0.3s; + border: none; +} + +.music-btn:hover { + transform: scale(1.1); +} + +
+ +
+ +
- @@ -231,7 +264,6 @@ body { -