Spaces:

samlax12
/

pay

Running

App Files Files Community

samlax12 commited on Jun 10, 2025

Commit

a838f61

verified ·

1 Parent(s): 0209fdb

Create index1.html

Browse files

Files changed (1) hide show

index1.html +722 -0

index1.html ADDED Viewed

	@@ -0,0 +1,722 @@

+<!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, #fff4e6 0%, #ffe8d1 35%, #ffd4a3 100%);
+            min-height: 100vh;
+            color: #5a4a5a;
+            -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: #ff8c42;
+            font-weight: 600;
+            text-shadow: 2px 2px 4px rgba(255, 140, 66, 0.3);
+        }
+        .profile-card {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 20px;
+            padding: 20px;
+            box-shadow: 0 8px 32px rgba(255, 140, 66, 0.2);
+            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(255, 140, 66, 0.4);
+            background: #ffe8d1;
+        }
+        .avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .sparkle {
+            position: absolute;
+            color: #ffab73;
+            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: #ff8c42;
+            margin-bottom: 3px;
+        }
+        .profile-info p {
+            color: #a8a8a8;
+            font-size: 14px;
+        }
+        .amount-section {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 20px 15px;
+            box-shadow: 0 8px 32px rgba(255, 140, 66, 0.2);
+            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: #ff9966;
+            margin-bottom: 8px;
+            font-weight: 500;
+        }
+        .amount-value {
+            font-size: 36px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #ff8c42 0%, #ff9966 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(255, 245, 235, 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(255, 140, 66, 0.25);
+        }
+        .payment-item.active {
+            border-color: #ff9966;
+            box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.15);
+        }
+        .payment-item .emoji {
+            font-size: 20px;
+            margin-bottom: 6px;
+            display: block;
+            filter: drop-shadow(2px 2px 4px rgba(255, 140, 66, 0.3));
+            transition: transform 0.3s ease;
+        }
+        .payment-item:hover .emoji {
+            transform: scale(1.1);
+        }
+        .payment-item .price {
+            font-size: 15px;
+            font-weight: 600;
+            color: #ff8c42;
+        }
+        .payment-item .quantity {
+            position: absolute;
+            top: 50%;
+            right: 5px;
+            transform: translateY(-50%);
+            background: #ff9966;
+            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: #ff9966;
+            margin-bottom: 6px;
+            font-weight: 500;
+        }
+        .note-input {
+            width: 100%;
+            padding: 10px 12px;
+            border: 2px solid #ffe8d1;
+            border-radius: 10px;
+            font-size: 14px;
+            background: rgba(255, 255, 255, 0.8);
+            transition: all 0.3s ease;
+            color: #5a4a5a;
+            -webkit-user-select: text;
+            -moz-user-select: text;
+            -ms-user-select: text;
+            user-select: text;
+        }
+        .note-input:focus {
+            outline: none;
+            border-color: #ffab73;
+            background: white;
+            box-shadow: 0 0 0 3px rgba(255, 171, 115, 0.2);
+        }
+        .note-input::placeholder {
+            color: #d4a574;
+        }
+        .pay-button {
+            background: linear-gradient(135deg, #ff8c42 0%, #ff9966 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(255, 140, 66, 0.4);
+            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(255, 140, 66, 0.5);
+        }
+        .pay-button:active {
+            transform: translateY(0);
+        }
+        /* 模态框样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 171, 115, 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(255, 140, 66, 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: #ff8c42;
+            margin-bottom: 15px;
+            font-weight: 600;
+        }
+        .qr-wrapper {
+            position: relative;
+            display: inline-block;
+            padding: 12px;
+            background: linear-gradient(135deg, #fff5eb 0%, #ffe8d1 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(255, 140, 66, 0.3);
+        }
+        .qr-code-image img {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+        .payment-tips {
+            font-size: 13px;
+            color: #a8a8a8;
+            line-height: 1.5;
+            margin-bottom: 15px;
+        }
+        .payment-amount-display {
+            font-size: 22px;
+            color: #ff8c42;
+            font-weight: 600;
+            margin: 10px 0;
+        }
+        .close-button {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #ffe8d1;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            color: #ff9966;
+            transition: all 0.3s ease;
+        }
+        .close-button:hover {
+            background: #ffab73;
+            color: white;
+            transform: rotate(90deg);
+        }
+        /* 使用说明样式 */
+        .usage-tip {
+            font-size: 12px;
+            color: #d4a574;
+            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=\'%23ffe8d1\'/%3E%3Ctext x=\'90\' y=\'90\' text-anchor=\'middle\' dy=\'.3em\' font-size=\'13\' fill=\'%23ff9966\'%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) {
+                    // 如果数量为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 = '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>