Spaces:

samlax12
/

pay

Running

App Files Files Community

samlax12 commited on Jun 10, 2025

Commit

dbd4457

verified ·

1 Parent(s): 873bac3

Create index4.html

Browse files

Files changed (1) hide show

index4.html +837 -0

index4.html ADDED Viewed

	@@ -0,0 +1,837 @@

+<!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>