축하 창을 2.8초 후 자동으로 닫던 방식을 없애고, 명언까지 확인한 뒤 확인 버튼을 눌러야만 닫히고 바구니가 비워지도록 변경
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
17
index.html
17
index.html
@@ -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();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user