让 gemini3 做的网页拥有支付功能，访客变付费用户！附提示词

# 🚀 卡密系统集成提示词## 📋 项目概述这是一个完整的卡密系统集成指南，适用于任何需要增值服务验证的Web应用项目。通过本提示词，工程师可以快速为项目添加卡密验证、设备绑定、有效期管理等功能。## 🎯 核心功能需求### 1. 卡密验证与激活- **卡密格式**：`RED-XXXX-XXXX-XXXX`（12位随机字符）- **验证逻辑**：前端格式验证 + 后端有效性验证- **激活机制**：设备绑定 + 有效期计算- **状态管理**：已激活/已过期/已使用/无效### 2. 设备绑定与唯一性- **设备ID生成**：基于浏览器指纹 + 随机字符串- **绑定机制**：一个卡密只能绑定一个设备- **跨设备限制**：防止卡密在多设备间共享### 3. 有效期管理- **时间计算**：精确到毫秒的有效期计算- **状态检查**：实时验证卡密是否在有效期内- **过期处理**：自动禁用过期卡密的功能### 4. 用户界面集成- **验证弹窗**：美观的模态对话框设计- **状态提示**：清晰的验证结果反馈- **多语言支持**：中英文界面自动切换## 🛠️ 技术架构说明### 前端实现（推荐方案）```javascript// 核心组件结构- 卡密验证弹窗 (Modal)- 验证状态管理 (State Management)- 本地存储持久化 (LocalStorage)- 国际化支持 (i18n)- 设备指纹生成 (Device ID)```### 后端API接口（可选）```javascript// 基础API端点POST /api/cards/validate    # 卡密验证POST /api/cards/activate    # 卡密激活GET  /api/cards/status      # 状态查询POST /api/cards/generate    # 卡密生成（管理员）```## 📝 集成步骤指南### 步骤1：前端界面集成#### 1.1 添加卡密验证弹窗```html<!-- 卡密验证模态框 --><div id="card-modal" class="modal">    <div class="modal-content">        <h3>🔒 解锁高级功能</h3>        <p>请输入卡密解锁功能</p>        <input type="text" id="card-input" placeholder="请输入卡密">        <button id="verify-card">验证卡密</button>        <div id="card-result"></div>    </div></div>```#### 1.2 实现验证逻辑```javascript// 卡密验证核心函数async function validateCard(cardValue) {    // 1. 格式验证    if (!/^RED-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}$/.test(cardValue)) {        return { valid: false, message: '卡密格式错误' };    }    // 2. 本地存储检查    const localResult = checkLocalValidation(cardValue);    if (localResult.valid) return localResult;    // 3. 后端验证（如有）    if (hasBackend) {        return await validateWithBackend(cardValue);    }    return { valid: false, message: '卡密无效' };}```幅有限，评论区发给大家

// 监听输入框变化并自动保存function setupAutoSave() {    const inputs = document.querySelectorAll('input, textarea');    inputs.forEach(input => {        input.addEventListener('input', debounce(() => {            localStorage.setItem(input.id, input.value);        }, 500));    });        // 页面加载时恢复数据    inputs.forEach(input => {        const savedValue = localStorage.getItem(input.id);        if (savedValue) input.value = savedValue;    });用户输入数据持久化存储}

// 检查图表容器是否存在const chartDom = document.getElementById('dashboardStatusChart');if (!chartDom) {    console.warn('图表容器未找到');    return;}