<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡密商店 · VECTNEL</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#0b0e14;color:#e8edf5;padding:20px}
.container{max-width:900px;margin:0 auto}
h1{font-size:28px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.back-link{color:#94a3b8;text-decoration:none;font-size:14px}
.back-link:hover{color:#c4b5fd}
.category-title{font-size:20px;font-weight:700;margin:30px 0 15px;color:#cbd5e1;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:8px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-bottom:30px}
.product-card{background:#161b24;border-radius:16px;padding:18px;border:1px solid rgba(255,255,255,0.04);transition:all .3s;cursor:pointer}
.product-card:hover{border-color:rgba(139,92,246,0.3);transform:translateY(-4px)}
.product-card img{width:100%;height:140px;object-fit:cover;border-radius:10px;background:#0f141a}
.product-card h3{font-size:16px;font-weight:600;margin:10px 0 4px}
.product-card .price{font-size:18px;font-weight:700;color:#a78bfa}
.product-card .desc{color:#94a3b8;font-size:13px;margin:6px 0}
.product-card .stock{font-size:12px;color:#64748b}
.btn-buy{display:inline-block;padding:10px 20px;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;margin-top:10px;width:100%}
.btn-buy:hover{opacity:.9}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;padding:20px}
.modal-overlay.active{display:flex}
.modal-box{background:#1a1f2a;border-radius:20px;padding:30px;width:440px;max-width:100%;border:1px solid rgba(255,255,255,0.06)}
.modal-box h2{font-size:22px;margin-bottom:16px}
.modal-box .field{margin-bottom:14px}
.modal-box label{display:block;font-size:13px;font-weight:500;color:#cbd5e1;margin-bottom:4px}
.modal-box input,.modal-box select{width:100%;padding:10px 14px;background:#0f141a;border:1px solid rgba(255,255,255,0.06);border-radius:8px;color:#e8edf5;font-size:14px;outline:none}
.modal-box input:focus,.modal-box select:focus{border-color:#8b5cf6}
.modal-box .btn-submit{width:100%;padding:12px;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:10px}
.modal-box .btn-submit:hover{opacity:.9}
.modal-close{float:right;font-size:24px;color:#94a3b8;cursor:pointer;background:0;border:none}
.modal-close:hover{color:#fff}
.qrcode-box{text-align:center;padding:20px}
.qrcode-box img{max-width:200px;border-radius:10px;background:#fff;padding:8px}
.order-info{color:#94a3b8;font-size:13px;margin-top:10px}
.msg-box{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}
.msg-box.error{background:rgba(239,68,68,0.15);color:#f87171}
.msg-box.success{background:rgba(16,185,129,0.15);color:#34d399}
.pay-methods{display:flex;gap:10px;margin-bottom:14px}
.pay-methods label{padding:8px 16px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);cursor:pointer;font-size:14px}
.pay-methods input[type=radio]{display:none}
.pay-methods input[type=radio]:checked+label{border-color:#8b5cf6;background:rgba(139,92,246,0.12)}
@media(max-width:600px){.product-grid{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.product-grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="container">
    <a href="/" class="back-link"><i class="fas fa-arrow-left"></i> 返回首页</a>
    <h1><i class="fas fa-store"></i> 卡密商店</h1>

    
            <p style="color:#94a3b8;text-align:center;padding:40px 0;">暂无商品，请稍后再来</p>
    </div>

<div class="modal-overlay" id="buyModal">
    <div class="modal-box">
        <button class="modal-close" onclick="closeBuyModal()">&times;</button>
        <h2 id="modalProductName">商品名称</h2>
        <p id="modalPrice" style="font-size:20px;font-weight:700;color:#a78bfa;margin-bottom:16px;">¥0.00</p>
        <form method="POST" id="buyForm">
            <input type="hidden" name="action" value="buy">
            <input type="hidden" name="product_id" id="buyProductId">
            <div class="field">
                <label>您的昵称</label>
                <input type="text" name="buyer_name" required placeholder="如：张三">
            </div>
            <div class="field">
                <label>联系方式（QQ/邮箱/手机）</label>
                <input type="text" name="buyer_contact" required placeholder="用于接收卡密">
            </div>
            <div class="pay-methods">
                <input type="radio" name="pay_type" id="pay_ali" value="alipay" checked>
                <label for="pay_ali"><i class="fab fa-alipay"></i> 支付宝</label>
                <input type="radio" name="pay_type" id="pay_wx" value="wxpay">
                <label for="pay_wx"><i class="fab fa-weixin"></i> 微信支付</label>
            </div>
            <button type="submit" class="btn-submit">确认支付</button>
        </form>
    </div>
</div>

<script>
function openBuyModal(id, name, price, stock) {
    if (stock <= 0) {
        alert('库存不足');
        return;
    }
    document.getElementById('buyProductId').value = id;
    document.getElementById('modalProductName').textContent = name;
    document.getElementById('modalPrice').textContent = '¥' + parseFloat(price).toFixed(2);
    document.getElementById('buyModal').classList.add('active');
}
function closeBuyModal() {
    document.getElementById('buyModal').classList.remove('active');
}
document.getElementById('buyModal').addEventListener('click', function(e) {
    if (e.target === this) closeBuyModal();
});
document.getElementById('buyForm').addEventListener('submit', function() {
    this.querySelector('.btn-submit').disabled = true;
    this.querySelector('.btn-submit').textContent = '处理中...';
});
</script>
</body>
</html>