축하 창을 2.8초 후 자동으로 닫던 방식을 없애고, 명언까지 확인한 뒤 확인 버튼을 눌러야만 닫히고 바구니가 비워지도록 변경

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-25 23:48:14 +09:00
parent bb089191b3
commit 519b9fbae3

View File

@@ -82,7 +82,7 @@
opacity:0; pointer-events:none; opacity:0; pointer-events:none;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.celebrate.show{ opacity:1; } .celebrate.show{ opacity:1; pointer-events:auto; }
.celebrate .msg{ .celebrate .msg{
background: rgba(255,255,255,0.92); color:#1c2b22; background: rgba(255,255,255,0.92); color:#1c2b22;
padding:0.85rem 1.3rem; border-radius:14px; padding:0.85rem 1.3rem; border-radius:14px;
@@ -97,6 +97,17 @@
color:#4c6155; color:#4c6155;
} }
.celebrate .quote.show{ display:block; } .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){ @media (prefers-color-scheme: dark){
.celebrate .quote{ color:#9db3a6; } .celebrate .quote{ color:#9db3a6; }
} }
@@ -124,6 +135,7 @@
<div class="msg"> <div class="msg">
🎉 사과 5개를 모았어요! 🎉 사과 5개를 모았어요!
<div class="quote" id="quoteText"></div> <div class="quote" id="quoteText"></div>
<button type="button" class="confirm-btn" id="celebrateConfirm">확인</button>
</div> </div>
</div> </div>
</div> </div>
@@ -591,7 +603,6 @@ async function celebrate(){
celebrateEl.classList.add('show'); celebrateEl.classList.add('show');
quoteEl.classList.remove('show'); quoteEl.classList.remove('show');
spawnConfetti(); spawnConfetti();
setTimeout(clearBasket, 2800);
try { try {
const res = await fetch('./quotes.txt'); const res = await fetch('./quotes.txt');
@@ -628,6 +639,8 @@ function clearBasket(){
updateBasketCounter(); updateBasketCounter();
} }
document.getElementById('celebrateConfirm').addEventListener('click', clearBasket);
// ---------- animation loop ---------- // ---------- animation loop ----------
const clock = new THREE.Clock(); const clock = new THREE.Clock();