|
|
<!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: 'Courier New', monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; |
|
|
background: #000000; |
|
|
min-height: 100vh; |
|
|
color: #00ff00; |
|
|
-webkit-user-select: none; |
|
|
-moz-user-select: none; |
|
|
-ms-user-select: none; |
|
|
user-select: none; |
|
|
position: relative; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
body::before { |
|
|
content: ''; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(0deg, |
|
|
rgba(0,0,0,0.95) 0%, |
|
|
rgba(0,0,0,0.85) 50%, |
|
|
rgba(0,0,0,0.95) 100%); |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 480px; |
|
|
margin: 0 auto; |
|
|
padding: 15px; |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
padding-top: 10px; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 24px; |
|
|
color: #00ff00; |
|
|
font-weight: 600; |
|
|
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; |
|
|
animation: glow 2s ease-in-out infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes glow { |
|
|
from { text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; } |
|
|
to { text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00, 0 0 35px #00ff00; } |
|
|
} |
|
|
|
|
|
.profile-card { |
|
|
background: rgba(0, 20, 0, 0.8); |
|
|
border: 1px solid #00ff00; |
|
|
border-radius: 0; |
|
|
padding: 20px; |
|
|
box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); |
|
|
margin-bottom: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 15px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.profile-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.2), transparent); |
|
|
animation: scan 3s infinite; |
|
|
} |
|
|
|
|
|
@keyframes scan { |
|
|
0% { left: -100%; } |
|
|
100% { left: 100%; } |
|
|
} |
|
|
|
|
|
.avatar-wrapper { |
|
|
position: relative; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.avatar { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 0; |
|
|
overflow: hidden; |
|
|
border: 1px solid #00ff00; |
|
|
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); |
|
|
background: #001100; |
|
|
} |
|
|
|
|
|
.avatar img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
filter: sepia(100%) hue-rotate(90deg) brightness(0.8) contrast(1.5); |
|
|
} |
|
|
|
|
|
.sparkle { |
|
|
position: absolute; |
|
|
color: #00ff00; |
|
|
font-size: 16px; |
|
|
animation: matrix-sparkle 1s 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 matrix-sparkle { |
|
|
0%, 100% { opacity: 0; transform: scale(0.8); } |
|
|
50% { opacity: 1; transform: scale(1.2); text-shadow: 0 0 5px #00ff00; } |
|
|
} |
|
|
|
|
|
.profile-info { |
|
|
text-align: left; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.profile-info h2 { |
|
|
font-size: 18px; |
|
|
color: #00ff00; |
|
|
margin-bottom: 3px; |
|
|
text-shadow: 0 0 5px #00ff00; |
|
|
} |
|
|
|
|
|
.profile-info p { |
|
|
color: #00cc00; |
|
|
font-size: 14px; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.amount-section { |
|
|
background: rgba(0, 20, 0, 0.8); |
|
|
border: 1px solid #00ff00; |
|
|
border-radius: 0; |
|
|
padding: 20px 15px; |
|
|
box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.amount-display { |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.amount-label { |
|
|
font-size: 13px; |
|
|
color: #00cc00; |
|
|
margin-bottom: 8px; |
|
|
font-weight: 500; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 2px; |
|
|
} |
|
|
|
|
|
.amount-value { |
|
|
font-size: 36px; |
|
|
font-weight: 700; |
|
|
color: #00ff00; |
|
|
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
.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(0, 40, 0, 0.6); |
|
|
padding: 12px; |
|
|
border: 1px solid #004400; |
|
|
text-align: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.payment-item::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 255, 0, 0.1); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.payment-item:hover { |
|
|
border-color: #00ff00; |
|
|
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.payment-item:hover::after { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.payment-item.active { |
|
|
border-color: #00ff00; |
|
|
background: rgba(0, 80, 0, 0.6); |
|
|
box-shadow: 0 0 15px rgba(0, 255, 0, 0.5), inset 0 0 15px rgba(0, 255, 0, 0.1); |
|
|
} |
|
|
|
|
|
.payment-item .emoji { |
|
|
font-size: 20px; |
|
|
margin-bottom: 6px; |
|
|
display: block; |
|
|
filter: drop-shadow(0 0 3px #00ff00); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.payment-item:hover .emoji { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.payment-item .price { |
|
|
font-size: 15px; |
|
|
font-weight: 600; |
|
|
color: #00ff00; |
|
|
text-shadow: 0 0 3px #00ff00; |
|
|
} |
|
|
|
|
|
.payment-item .quantity { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
right: 5px; |
|
|
transform: translateY(-50%); |
|
|
background: #00ff00; |
|
|
color: #000000; |
|
|
padding: 1px 6px; |
|
|
border-radius: 0; |
|
|
font-size: 11px; |
|
|
font-weight: 600; |
|
|
min-width: 20px; |
|
|
text-align: center; |
|
|
box-shadow: 0 0 5px #00ff00; |
|
|
} |
|
|
|
|
|
.note-section { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.note-label { |
|
|
font-size: 13px; |
|
|
color: #00cc00; |
|
|
margin-bottom: 6px; |
|
|
font-weight: 500; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.note-input { |
|
|
width: 100%; |
|
|
padding: 10px 12px; |
|
|
border: 1px solid #00ff00; |
|
|
border-radius: 0; |
|
|
font-size: 14px; |
|
|
background: rgba(0, 20, 0, 0.6); |
|
|
transition: all 0.3s ease; |
|
|
color: #00ff00; |
|
|
font-family: 'Courier New', monospace; |
|
|
-webkit-user-select: text; |
|
|
-moz-user-select: text; |
|
|
-ms-user-select: text; |
|
|
user-select: text; |
|
|
} |
|
|
|
|
|
.note-input:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5), inset 0 0 5px rgba(0, 255, 0, 0.2); |
|
|
background: rgba(0, 40, 0, 0.8); |
|
|
} |
|
|
|
|
|
.note-input::placeholder { |
|
|
color: #006600; |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.pay-button { |
|
|
background: linear-gradient(135deg, #001100 0%, #003300 100%); |
|
|
color: #00ff00; |
|
|
border: 1px solid #00ff00; |
|
|
padding: 14px 30px; |
|
|
font-size: 16px; |
|
|
font-weight: 600; |
|
|
border-radius: 0; |
|
|
cursor: pointer; |
|
|
width: 100%; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
box-shadow: 0 0 15px rgba(0, 255, 0, 0.3); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 2px; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
.pay-button::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 255, 0, 0.3); |
|
|
transition: left 0.5s; |
|
|
} |
|
|
|
|
|
.pay-button:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.pay-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); |
|
|
text-shadow: 0 0 10px #00ff00; |
|
|
} |
|
|
|
|
|
.pay-button:active { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.95); |
|
|
z-index: 1000; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background: #000000; |
|
|
border: 1px solid #00ff00; |
|
|
padding: 30px 25px; |
|
|
border-radius: 0; |
|
|
text-align: center; |
|
|
max-width: 320px; |
|
|
width: 90%; |
|
|
box-shadow: 0 0 30px rgba(0, 255, 0, 0.5); |
|
|
position: relative; |
|
|
animation: matrixModalFadeIn 0.4s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes matrixModalFadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: scale(0.9) translateY(20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: scale(1) translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.modal-title { |
|
|
font-size: 18px; |
|
|
color: #00ff00; |
|
|
margin-bottom: 15px; |
|
|
font-weight: 600; |
|
|
text-shadow: 0 0 10px #00ff00; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 2px; |
|
|
} |
|
|
|
|
|
.qr-wrapper { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
padding: 12px; |
|
|
background: #001100; |
|
|
border: 1px solid #00ff00; |
|
|
margin-bottom: 15px; |
|
|
box-shadow: 0 0 15px rgba(0, 255, 0, 0.3); |
|
|
} |
|
|
|
|
|
.qr-code-image { |
|
|
width: 180px; |
|
|
height: 180px; |
|
|
border-radius: 0; |
|
|
overflow: hidden; |
|
|
border: 1px solid #00ff00; |
|
|
filter: sepia(100%) hue-rotate(90deg) brightness(1.2) contrast(1.5); |
|
|
} |
|
|
|
|
|
.qr-code-image img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.payment-tips { |
|
|
font-size: 13px; |
|
|
color: #00cc00; |
|
|
line-height: 1.5; |
|
|
margin-bottom: 15px; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
.payment-amount-display { |
|
|
font-size: 22px; |
|
|
color: #00ff00; |
|
|
font-weight: 600; |
|
|
margin: 10px 0; |
|
|
text-shadow: 0 0 10px #00ff00; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
.close-button { |
|
|
position: absolute; |
|
|
top: 12px; |
|
|
right: 12px; |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
border-radius: 0; |
|
|
background: #000000; |
|
|
border: 1px solid #00ff00; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 18px; |
|
|
color: #00ff00; |
|
|
transition: all 0.3s ease; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
.close-button:hover { |
|
|
background: #00ff00; |
|
|
color: #000000; |
|
|
box-shadow: 0 0 10px #00ff00; |
|
|
} |
|
|
|
|
|
|
|
|
.usage-tip { |
|
|
font-size: 12px; |
|
|
color: #008800; |
|
|
text-align: center; |
|
|
margin-top: 10px; |
|
|
opacity: 0.8; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
|
|
|
.matrix-rain { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
pointer-events: none; |
|
|
overflow: hidden; |
|
|
z-index: 0; |
|
|
} |
|
|
|
|
|
.matrix-column { |
|
|
position: absolute; |
|
|
top: -100%; |
|
|
font-family: 'Courier New', monospace; |
|
|
font-size: 14px; |
|
|
color: #00ff00; |
|
|
animation: matrix-fall linear infinite; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
@keyframes matrix-fall { |
|
|
to { |
|
|
top: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@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="matrix-rain" id="matrixRain"></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">01</span> |
|
|
<span class="sparkle">10</span> |
|
|
</div> |
|
|
<div class="profile-info"> |
|
|
<h2>> TARGET.LOCKED</h2> |
|
|
<p>鱼习习(**怡)</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="amount-section"> |
|
|
<div class="amount-display"> |
|
|
<div class="amount-label">> TRANSFER.AMOUNT</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"> |
|
|
[CLICK] SELECT | [HOLD/RIGHT-CLICK] DECREASE |
|
|
</div> |
|
|
|
|
|
<div class="note-section"> |
|
|
<div class="note-label">> MESSAGE.INPUT</div> |
|
|
<input type="text" class="note-input" placeholder="Enter message..."> |
|
|
</div> |
|
|
|
|
|
<button class="pay-button" onclick="showPayment()"> |
|
|
> EXECUTE TRANSFER |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal" id="paymentModal"> |
|
|
<div class="modal-content"> |
|
|
<button class="close-button" onclick="closeModal()">X</button> |
|
|
<h3 class="modal-title">> SCAN.QR.CODE</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=\'%23001100\'/%3E%3Ctext x=\'90\' y=\'90\' text-anchor=\'middle\' dy=\'.3em\' font-size=\'13\' fill=\'%2300ff00\' style=\'font-family: Courier New\'%3E[QR CODE]%3C/text%3E%3C/svg%3E'"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="payment-amount-display"> |
|
|
¥<span id="modalAmount">0.00</span> |
|
|
</div> |
|
|
<p class="payment-tips"> |
|
|
> USE WECHAT TO SCAN<br> |
|
|
> COMPLETE TRANSFER<br> |
|
|
> CONNECTION SECURED |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createMatrixRain() { |
|
|
const matrixRain = document.getElementById('matrixRain'); |
|
|
const characters = '01'; |
|
|
const columnCount = Math.floor(window.innerWidth / 20); |
|
|
|
|
|
for (let i = 0; i < columnCount; i++) { |
|
|
const column = document.createElement('div'); |
|
|
column.className = 'matrix-column'; |
|
|
column.style.left = i * 20 + 'px'; |
|
|
column.style.animationDuration = (Math.random() * 5 + 5) + 's'; |
|
|
column.style.animationDelay = Math.random() * 5 + 's'; |
|
|
|
|
|
|
|
|
let content = ''; |
|
|
for (let j = 0; j < 50; j++) { |
|
|
content += characters.charAt(Math.floor(Math.random() * characters.length)) + '<br>'; |
|
|
} |
|
|
column.innerHTML = content; |
|
|
|
|
|
matrixRain.appendChild(column); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('load', createMatrixRain); |
|
|
|
|
|
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 = 'matrixModalFadeIn 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> |
