Hugging Face's logo

Spaces:
samlax12
/
pay
Running

App Files Community
pay / index4.html
samlax12's picture
samlax12
Create index4.html
dbd4457 verified
raw
history blame contribute delete
27.1 kB
<!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;
 }
/* Matrix rain effect */
 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 */
 .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>
 <!-- Matrix Rain Background -->
 <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='&gt;_';">
 </div>
 <span class="sparkle">01</span>
 <span class="sparkle">10</span>
 </div>
 <div class="profile-info">
 <h2>&gt; TARGET.LOCKED</h2>
 <p>鱼习习(**怡)</p>
 </div>
 </div>
<div class="amount-section">
 <div class="amount-display">
 <div class="amount-label">&gt; 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">&gt; MESSAGE.INPUT</div>
 <input type="text" class="note-input" placeholder="Enter message...">
 </div>
<button class="pay-button" onclick="showPayment()">
 &gt; 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">&gt; 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">
 &gt; USE WECHAT TO SCAN<br>
 &gt; COMPLETE TRANSFER<br>
 &gt; CONNECTION SECURED
 </p>
 </div>
 </div>
<script>
 // Create Matrix rain effect
 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';
// Create random binary string
 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);
 }
 }
// Initialize Matrix rain on load
 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) {
 // 如果数量为1，取消选择
 element.classList.remove('active');
 selectedItems.delete(amount);
 delete itemQuantities[amount];
// 移除数量标签
 const qtyElement = element.querySelector('.quantity');
 if (qtyElement) {
 qtyElement.remove();
 }
 } else {
 // 数量大于1，减少数量
 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); // 2000毫秒（2秒）长按
 });
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>