diff --git a/index.html b/index.html index c05af09..b33f521 100644 --- a/index.html +++ b/index.html @@ -82,7 +82,7 @@ opacity:0; pointer-events:none; transition: opacity 0.3s ease; } - .celebrate.show{ opacity:1; } + .celebrate.show{ opacity:1; pointer-events:auto; } .celebrate .msg{ background: rgba(255,255,255,0.92); color:#1c2b22; padding:0.85rem 1.3rem; border-radius:14px; @@ -97,6 +97,17 @@ color:#4c6155; } .celebrate .quote.show{ display:block; } + .celebrate .confirm-btn{ + display:block; + margin:0.75rem auto 0; + padding:0.4rem 1.1rem; + border:none; border-radius:999px; + background:#4f9d6e; color:#fff; + font-weight:700; font-size:0.85rem; + font-family:inherit; + cursor:pointer; + } + .celebrate .confirm-btn:active{ background:#3f8a5d; } @media (prefers-color-scheme: dark){ .celebrate .quote{ color:#9db3a6; } } @@ -124,6 +135,7 @@
🎉 사과 5개를 모았어요!
+
@@ -591,7 +603,6 @@ async function celebrate(){ celebrateEl.classList.add('show'); quoteEl.classList.remove('show'); spawnConfetti(); - setTimeout(clearBasket, 2800); try { const res = await fetch('./quotes.txt'); @@ -628,6 +639,8 @@ function clearBasket(){ updateBasketCounter(); } +document.getElementById('celebrateConfirm').addEventListener('click', clearBasket); + // ---------- animation loop ---------- const clock = new THREE.Clock();