From a66c14daa84d882049afecf8b1eea29648c74bfa Mon Sep 17 00:00:00 2001 From: Yustina Date: Mon, 15 Dec 2025 23:16:17 +0700 Subject: [PATCH] edit:update music effect --- gameboard-medium.html | 301 ++++++++++++++++++++++++------------------ 1 file changed, 173 insertions(+), 128 deletions(-) diff --git a/gameboard-medium.html b/gameboard-medium.html index 125c082..ffcec85 100644 --- a/gameboard-medium.html +++ b/gameboard-medium.html @@ -19,6 +19,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; @@ -59,10 +83,10 @@ body { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(4, 1fr); - gap: 8px; - padding: 10px; + gap: 16px; + padding: 25px 40px; box-sizing: border-box; + place-items: center; } .card { @@ -101,10 +125,7 @@ body { color: #ff6a4d; } -.back { - transform: rotateY(180deg); -} - +.back { transform: rotateY(180deg); } .back img { width: 85%; height: 85%; @@ -112,11 +133,6 @@ body { filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); } -.card:not(.flipped):hover .front { - transform: scale(1.05); - transition: 0.25s; -} - .card.flipped .inner { transform: rotateY(180deg); } .card.matched .front, @@ -138,6 +154,7 @@ body { animation: comboFade 1.4s ease forwards; pointer-events: none; border: 2px solid rgba(255,255,255,0.35); + z-index: 99; } @keyframes comboFade { @@ -148,10 +165,7 @@ body { .end-screen { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; + top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); backdrop-filter: blur(7px); display: none; @@ -169,64 +183,48 @@ body { text-align: center; } -.end-title { - font-size: 28px; - font-weight: 700; - margin-bottom: 4px; -} - -.score-row { - display: flex; - justify-content: space-between; - margin: 8px 0; - font-size: 18px; -} - -.end-btn { - width: 100%; - padding: 12px; - border-radius: 16px; - border: none; - font-size: 18px; - margin-top: 10px; - cursor: pointer; - 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; -} - +.end-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; } +.score-row { display: flex; justify-content: space-between; margin: 8px 0; font-size: 18px; } +.end-btn { width: 100%; padding: 12px; border-radius: 16px; border: none; font-size: 18px; margin-top: 10px; cursor: pointer; font-weight: 600; } .play-again { background: #b700ff; color: white; } .leaderboard { background: gold; } .back-menu { background: #444; color: white; } -@media (max-width: 900px) { - .gameboard { - grid-template-columns: repeat(3, 1fr); - padding: 20px; - gap: 12px; - } +.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: 600px) { - .gameboard { - grid-template-columns: repeat(2, 1fr); - padding: 14px; - gap: 10px; - } -} +@media (max-width: 600px) { .gameboard { grid-template-columns: repeat(4, 1fr); padding: 10px; gap: 8px; } } +
+ + + + + + + + + +
🔇
+
@@ -237,38 +235,72 @@ body {
+
-
🎉 Selamat!
-

Anda berhasil menyelesaikan permainan!

+
🎉 Selamat!
+

Anda berhasil menyelesaikan permainan!

Skor Base: 0
Time Bonus: 0
Move Bonus: 0
-
Total Skor: 0
- -
- - + \ No newline at end of file