diff --git a/gameboard-easy.html b/gameboard-easy.html index 30f3a50..4bb3380 100644 --- a/gameboard-easy.html +++ b/gameboard-easy.html @@ -129,13 +129,12 @@ body { box-shadow: 0 0 15px #7affd6, 0 0 30px rgba(122,255,214,0.8); } -/* === COMBO POPUP TANPA ICON === */ +/* COMBO POPUP */ .combo-popup { position: absolute; padding: 12px 20px; background: linear-gradient(135deg, rgba(255,95,109,0.92), rgba(255,0,102,0.92)); border-radius: 14px; - backdrop-filter: none; color: white; font-weight: 800; text-align: center; @@ -147,18 +146,66 @@ body { } @keyframes comboFade { - 0% { - opacity: 0; - transform: translate(-50%, -10px) scale(0.7); - } - 20% { - opacity: 1; - transform: translate(-50%, -30px) scale(1); - } - 100% { - opacity: 0; - transform: translate(-50%, -80px) scale(1.1); - } + 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.7); } + 20% { opacity: 1; transform: translate(-50%, -30px) scale(1); } + 100% { opacity: 0; transform: translate(-50%, -80px) scale(1.1); } +} + +/* END SCREEN */ +.end-screen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.45); + backdrop-filter: blur(7px); + display: none; + justify-content: center; + align-items: center; + z-index: 200; +} + +.end-box { + width: 80%; + max-width: 380px; + background: white; + border-radius: 22px; + padding: 20px; + text-align: center; + animation: fadeIn 0.4s ease; +} + +.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; } + +@keyframes fadeIn { + from { opacity:0; transform: scale(0.8); } + to { opacity:1; transform: scale(1); } } @@ -175,6 +222,28 @@ body {
+ +Anda berhasil menyelesaikan permainan!
+ +