|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
|
|
<title>💖 收款 💖</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
|
|
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 35%, #a5d6a7 100%); |
|
|
min-height: 100vh; |
|
|
color: #2e4a2e; |
|
|
-webkit-user-select: none; |
|
|
-moz-user-select: none; |
|
|
-ms-user-select: none; |
|
|
user-select: none; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 480px; |
|
|
margin: 0 auto; |
|
|
padding: 15px; |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
padding-top: 10px; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 24px; |
|
|
color: #388e3c; |
|
|
font-weight: 600; |
|
|
text-shadow: 2px 2px 4px rgba(56, 142, 60, 0.2); |
|
|
} |
|
|
|
|
|
.profile-card { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
border-radius: 20px; |
|
|
padding: 20px; |
|
|
box-shadow: 0 8px 32px rgba(76, 175, 80, 0.15); |
|
|
backdrop-filter: blur(10px); |
|
|
margin-bottom: 20px; |
|
|
text-align: center; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.avatar-wrapper { |
|
|
position: relative; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.avatar { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); |
|
|
background: #c8e6c9; |
|
|
} |
|
|
|
|
|
.avatar img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.sparkle { |
|
|
position: absolute; |
|
|
color: #66bb6a; |
|
|
font-size: 16px; |
|
|
animation: sparkle 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.sparkle:nth-child(2) { top: -8px; right: -8px; animation-delay: 0.3s; } |
|
|
.sparkle:nth-child(3) { bottom: -8px; left: -8px; animation-delay: 0.6s; } |
|
|
|
|
|
@keyframes sparkle { |
|
|
0%, 100% { opacity: 0; transform: scale(0.8); } |
|
|
50% { opacity: 1; transform: scale(1.2); } |
|
|
} |
|
|
|
|
|
.profile-info { |
|
|
text-align: left; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.profile-info h2 { |
|
|
font-size: 18px; |
|
|
color: #388e3c; |
|
|
margin-bottom: 3px; |
|
|
} |
|
|
|
|
|
.profile-info p { |
|
|
color: #666666; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.amount-section { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
border-radius: 20px; |
|
|
padding: 20px 15px; |
|
|
box-shadow: 0 8px 32px rgba(76, 175, 80, 0.15); |
|
|
backdrop-filter: blur(10px); |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.amount-display { |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.amount-label { |
|
|
font-size: 13px; |
|
|
color: #4caf50; |
|
|
margin-bottom: 8px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.amount-value { |
|
|
font-size: 36px; |
|
|
font-weight: 700; |
|
|
background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.payment-items { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 10px; |
|
|
margin-bottom: 20px; |
|
|
flex: 1; |
|
|
align-content: start; |
|
|
grid-auto-rows: min-content; |
|
|
} |
|
|
|
|
|
.payment-item { |
|
|
background: rgba(232, 245, 233, 0.8); |
|
|
padding: 12px; |
|
|
border-radius: 12px; |
|
|
text-align: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
border: 2px solid transparent; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.payment-item:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2); |
|
|
} |
|
|
|
|
|
.payment-item.active { |
|
|
border-color: #4caf50; |
|
|
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); |
|
|
} |
|
|
|
|
|
.payment-item .emoji { |
|
|
font-size: 20px; |
|
|
margin-bottom: 6px; |
|
|
display: block; |
|
|
filter: drop-shadow(2px 2px 4px rgba(76, 175, 80, 0.2)); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.payment-item:hover .emoji { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.payment-item .price { |
|
|
font-size: 15px; |
|
|
font-weight: 600; |
|
|
color: #388e3c; |
|
|
} |
|
|
|
|
|
.payment-item .quantity { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
right: 5px; |
|
|
transform: translateY(-50%); |
|
|
background: #4caf50; |
|
|
color: white; |
|
|
padding: 1px 6px; |
|
|
border-radius: 8px; |
|
|
font-size: 11px; |
|
|
font-weight: 600; |
|
|
min-width: 20px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.note-section { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.note-label { |
|
|
font-size: 13px; |
|
|
color: #4caf50; |
|
|
margin-bottom: 6px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.note-input { |
|
|
width: 100%; |
|
|
padding: 10px 12px; |
|
|
border: 2px solid #c8e6c9; |
|
|
border-radius: 10px; |
|
|
font-size: 14px; |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
transition: all 0.3s ease; |
|
|
color: #2e4a2e; |
|
|
-webkit-user-select: text; |
|
|
-moz-user-select: text; |
|
|
-ms-user-select: text; |
|
|
user-select: text; |
|
|
} |
|
|
|
|
|
.note-input:focus { |
|
|
outline: none; |
|
|
border-color: #66bb6a; |
|
|
background: white; |
|
|
box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.15); |
|
|
} |
|
|
|
|
|
.note-input::placeholder { |
|
|
color: #81c784; |
|
|
} |
|
|
|
|
|
.pay-button { |
|
|
background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 14px 30px; |
|
|
font-size: 16px; |
|
|
font-weight: 600; |
|
|
border-radius: 25px; |
|
|
cursor: pointer; |
|
|
width: 100%; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
box-shadow: 0 4px 15px rgba(56, 142, 60, 0.3); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.pay-button::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
width: 0; |
|
|
height: 0; |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
border-radius: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
transition: width 0.6s, height 0.6s; |
|
|
} |
|
|
|
|
|
.pay-button:hover::before { |
|
|
width: 300px; |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
.pay-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 20px rgba(56, 142, 60, 0.4); |
|
|
} |
|
|
|
|
|
.pay-button:active { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(102, 187, 106, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
z-index: 1000; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background: white; |
|
|
padding: 30px 25px; |
|
|
border-radius: 25px; |
|
|
text-align: center; |
|
|
max-width: 320px; |
|
|
width: 90%; |
|
|
box-shadow: 0 20px 60px rgba(56, 142, 60, 0.3); |
|
|
position: relative; |
|
|
animation: modalFadeIn 0.4s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes modalFadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: scale(0.9) translateY(20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: scale(1) translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.modal-title { |
|
|
font-size: 18px; |
|
|
color: #388e3c; |
|
|
margin-bottom: 15px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.qr-wrapper { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
padding: 12px; |
|
|
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); |
|
|
border-radius: 18px; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.qr-code-image { |
|
|
width: 180px; |
|
|
height: 180px; |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2); |
|
|
} |
|
|
|
|
|
.qr-code-image img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.payment-tips { |
|
|
font-size: 13px; |
|
|
color: #666666; |
|
|
line-height: 1.5; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.payment-amount-display { |
|
|
font-size: 22px; |
|
|
color: #388e3c; |
|
|
font-weight: 600; |
|
|
margin: 10px 0; |
|
|
} |
|
|
|
|
|
.close-button { |
|
|
position: absolute; |
|
|
top: 12px; |
|
|
right: 12px; |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
border-radius: 50%; |
|
|
background: #c8e6c9; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 18px; |
|
|
color: #388e3c; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.close-button:hover { |
|
|
background: #66bb6a; |
|
|
color: white; |
|
|
transform: rotate(90deg); |
|
|
} |
|
|
|
|
|
|
|
|
.usage-tip { |
|
|
font-size: 12px; |
|
|
color: #81c784; |
|
|
text-align: center; |
|
|
margin-top: 10px; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
|
|
|
.decoration { |
|
|
position: fixed; |
|
|
pointer-events: none; |
|
|
opacity: 0.5; |
|
|
animation: float 6s ease-in-out infinite; |
|
|
font-size: 20px; |
|
|
} |
|
|
|
|
|
.decoration:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; } |
|
|
.decoration:nth-child(2) { top: 20%; right: 5%; animation-delay: 1s; } |
|
|
.decoration:nth-child(3) { bottom: 20%; left: 10%; animation-delay: 2s; } |
|
|
.decoration:nth-child(4) { bottom: 10%; right: 10%; animation-delay: 3s; } |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0) rotate(0deg); } |
|
|
50% { transform: translateY(-15px) rotate(10deg); } |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-height: 700px) { |
|
|
.container { |
|
|
padding: 10px; |
|
|
} |
|
|
.header { |
|
|
margin-bottom: 15px; |
|
|
padding-top: 5px; |
|
|
} |
|
|
.header h1 { |
|
|
font-size: 22px; |
|
|
} |
|
|
.profile-card { |
|
|
padding: 15px; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
.avatar { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
} |
|
|
.amount-section { |
|
|
padding: 15px 12px; |
|
|
} |
|
|
.amount-value { |
|
|
font-size: 32px; |
|
|
} |
|
|
.payment-items { |
|
|
gap: 8px; |
|
|
} |
|
|
.payment-item { |
|
|
padding: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-height: 600px) { |
|
|
.amount-display { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
.payment-items { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
.note-section { |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
.pay-button { |
|
|
padding: 12px 25px; |
|
|
font-size: 15px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="decoration">💚</div> |
|
|
<div class="decoration">🌿</div> |
|
|
<div class="decoration">🍀</div> |
|
|
<div class="decoration">✨</div> |
|
|
|
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>ଘ(੭ˊ꒳ˋ)੭ 收款页面</h1> |
|
|
</div> |
|
|
|
|
|
<div class="profile-card"> |
|
|
<div class="avatar-wrapper"> |
|
|
<div class="avatar"> |
|
|
|
|
|
<img src="avatar.jpg" alt="头像" onerror="this.style.display='none'; this.parentElement.innerHTML='👧';"> |
|
|
</div> |
|
|
<span class="sparkle">✨</span> |
|
|
<span class="sparkle">✨</span> |
|
|
</div> |
|
|
<div class="profile-info"> |
|
|
<h2>给小可爱的打赏</h2> |
|
|
<p>鱼习习(**怡)</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="amount-section"> |
|
|
<div class="amount-display"> |
|
|
<div class="amount-label">打赏金额</div> |
|
|
<div class="amount-value">¥<span id="totalAmount">1.00</span></div> |
|
|
</div> |
|
|
|
|
|
<div class="payment-items"> |
|
|
<div class="payment-item active" data-amount="1.00" onclick="selectItem(this)"> |
|
|
<span class="emoji">⊂(˃̶͈̀ε ˂̶͈́ ⊂ )</span> |
|
|
<div class="price">¥1.00</div> |
|
|
<span class="quantity">×1</span> |
|
|
</div> |
|
|
<div class="payment-item" data-amount="5.20" onclick="selectItem(this)"> |
|
|
<span class="emoji">ฅ՞•ﻌ•՞ฅ</span> |
|
|
<div class="price">¥5.20</div> |
|
|
</div> |
|
|
<div class="payment-item" data-amount="6.66" onclick="selectItem(this)"> |
|
|
<span class="emoji">૮₍ ˃ ⤙ ˂ ₎ა</span> |
|
|
<div class="price">¥6.66</div> |
|
|
</div> |
|
|
<div class="payment-item" data-amount="8.88" onclick="selectItem(this)"> |
|
|
<span class="emoji">(´・(oo)・｀)</span> |
|
|
<div class="price">¥8.88</div> |
|
|
</div> |
|
|
<div class="payment-item" data-amount="13.14" onclick="selectItem(this)"> |
|
|
<span class="emoji">((づ￣ ³￣)づ</span> |
|
|
<div class="price">¥13.14</div> |
|
|
</div> |
|
|
<div class="payment-item" data-amount="52.00" onclick="selectItem(this)"> |
|
|
<span class="emoji">(｡･ω･｡)ﾉ♡</span> |
|
|
<div class="price">¥52.00</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="usage-tip"> |
|
|
点击选择项目 | 长按或右键减少数量 |
|
|
</div> |
|
|
|
|
|
<div class="note-section"> |
|
|
<div class="note-label">💌 留言</div> |
|
|
<input type="text" class="note-input" placeholder="写点什么暖心的话吧~ ♡"> |
|
|
</div> |
|
|
|
|
|
<button class="pay-button" onclick="showPayment()"> |
|
|
💚 确认打赏 💚 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal" id="paymentModal"> |
|
|
<div class="modal-content"> |
|
|
<button class="close-button" onclick="closeModal()">×</button> |
|
|
<h3 class="modal-title">扫码支付 (｡･ω･｡)ﾉ♡</h3> |
|
|
<div class="qr-wrapper"> |
|
|
<div class="qr-code-image"> |
|
|
|
|
|
<img src="wechat_pay.jpg" alt="赞赏码" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'180\' height=\'180\' viewBox=\'0 0 180 180\'%3E%3Crect width=\'180\' height=\'180\' fill=\'%23c8e6c9\'/%3E%3Ctext x=\'90\' y=\'90\' text-anchor=\'middle\' dy=\'.3em\' font-size=\'13\' fill=\'%234caf50\'%3E请添加赞赏码%3C/text%3E%3C/svg%3E'"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="payment-amount-display"> |
|
|
¥<span id="modalAmount">0.00</span> |
|
|
</div> |
|
|
<p class="payment-tips"> |
|
|
请使用微信扫描上方二维码<br> |
|
|
完成支付 ~ 感谢您的支持<br> |
|
|
ଘ(੭ˊ꒳ˋ)੭ |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let selectedItems = new Set(); |
|
|
let itemQuantities = {}; |
|
|
|
|
|
|
|
|
selectedItems.add('1.00'); |
|
|
itemQuantities['1.00'] = 1; |
|
|
|
|
|
function selectItem(element) { |
|
|
const amount = element.dataset.amount; |
|
|
|
|
|
if (selectedItems.has(amount)) { |
|
|
|
|
|
itemQuantities[amount] = (itemQuantities[amount] || 1) + 1; |
|
|
|
|
|
|
|
|
const qtyElement = element.querySelector('.quantity'); |
|
|
if (qtyElement) { |
|
|
qtyElement.textContent = `×${itemQuantities[amount]}`; |
|
|
} |
|
|
} else { |
|
|
|
|
|
element.classList.add('active'); |
|
|
selectedItems.add(amount); |
|
|
itemQuantities[amount] = 1; |
|
|
|
|
|
const span = document.createElement('span'); |
|
|
span.className = 'quantity'; |
|
|
span.textContent = '×1'; |
|
|
element.appendChild(span); |
|
|
} |
|
|
|
|
|
updateTotalAmount(); |
|
|
} |
|
|
|
|
|
|
|
|
function handleRightClick(element, event) { |
|
|
event.preventDefault(); |
|
|
const amount = element.dataset.amount; |
|
|
|
|
|
if (selectedItems.has(amount) && itemQuantities[amount] > 0) { |
|
|
if (itemQuantities[amount] === 1) { |
|
|
|
|
|
element.classList.remove('active'); |
|
|
selectedItems.delete(amount); |
|
|
delete itemQuantities[amount]; |
|
|
|
|
|
|
|
|
const qtyElement = element.querySelector('.quantity'); |
|
|
if (qtyElement) { |
|
|
qtyElement.remove(); |
|
|
} |
|
|
} else { |
|
|
|
|
|
itemQuantities[amount]--; |
|
|
const qtyElement = element.querySelector('.quantity'); |
|
|
if (qtyElement) { |
|
|
qtyElement.textContent = `×${itemQuantities[amount]}`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (selectedItems.size === 0) { |
|
|
const firstItem = document.querySelector('.payment-item'); |
|
|
firstItem.classList.add('active'); |
|
|
const firstAmount = firstItem.dataset.amount; |
|
|
selectedItems.add(firstAmount); |
|
|
itemQuantities[firstAmount] = 1; |
|
|
|
|
|
const span = document.createElement('span'); |
|
|
span.className = 'quantity'; |
|
|
span.textContent = '×1'; |
|
|
firstItem.appendChild(span); |
|
|
} |
|
|
|
|
|
updateTotalAmount(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
document.querySelectorAll('.payment-item').forEach(item => { |
|
|
item.addEventListener('contextmenu', function(e) { |
|
|
handleRightClick(this, e); |
|
|
}); |
|
|
|
|
|
|
|
|
let pressTimer; |
|
|
item.addEventListener('touchstart', function(e) { |
|
|
pressTimer = setTimeout(() => { |
|
|
handleRightClick(this, e); |
|
|
|
|
|
if (navigator.vibrate) { |
|
|
navigator.vibrate(50); |
|
|
} |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
item.addEventListener('touchend', function() { |
|
|
clearTimeout(pressTimer); |
|
|
}); |
|
|
|
|
|
item.addEventListener('touchmove', function() { |
|
|
clearTimeout(pressTimer); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function updateTotalAmount() { |
|
|
let total = 0; |
|
|
selectedItems.forEach(amount => { |
|
|
total += parseFloat(amount) * (itemQuantities[amount] || 1); |
|
|
}); |
|
|
document.getElementById('totalAmount').textContent = total.toFixed(2); |
|
|
document.getElementById('modalAmount').textContent = total.toFixed(2); |
|
|
} |
|
|
|
|
|
function showPayment() { |
|
|
document.getElementById('paymentModal').style.display = 'flex'; |
|
|
setTimeout(() => { |
|
|
document.querySelector('.modal-content').style.animation = 'modalFadeIn 0.4s ease-out'; |
|
|
}, 10); |
|
|
} |
|
|
|
|
|
function closeModal() { |
|
|
const modal = document.getElementById('paymentModal'); |
|
|
modal.style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('paymentModal').addEventListener('click', function(e) { |
|
|
if (e.target === this) { |
|
|
closeModal(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
updateTotalAmount(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.payment-item').forEach(item => { |
|
|
item.addEventListener('mouseenter', function() { |
|
|
this.querySelector('.emoji').style.transform = 'scale(1.1)'; |
|
|
}); |
|
|
item.addEventListener('mouseleave', function() { |
|
|
this.querySelector('.emoji').style.transform = 'scale(1)'; |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
