增加接口读取发卡网优惠券

2025-04-01 10:17:12 +08:00
parent 342e0b1269
commit c001659a18
6 changed files with 659 additions and 0 deletions
--- a/activation-codes.html
+++ b/activation-codes.html
@@ -0,0 +1,520 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>优惠券列表 - 听泉科技</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <style>
+        /* 激活码页面特定样式 */
+        .activation-page {
+            padding-top: 120px;
+            padding-bottom: 80px;
+        }
+        
+        .announcement-banner {
+            background: linear-gradient(135deg, #4F46E5, #06B6D4);
+            color: white;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+        
+        .search-box {
+            position: relative;
+            margin: 2rem auto;
+            max-width: 500px;
+        }
+        
+        .search-box input {
+            width: 100%;
+            padding: 1rem 1rem 1rem 3rem;
+            border-radius: 2rem;
+            border: 1px solid var(--border-color);
+            background-color: var(--glass-background);
+            font-size: 1rem;
+        }
+        
+        .search-box i {
+            position: absolute;
+            left: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--light-text);
+        }
+        
+        .activation-codes {
+            background-color: white;
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            overflow: hidden;
+        }
+        
+        .code-header {
+            display: grid;
+            grid-template-columns: 0.5fr 2fr 3fr 1fr 1fr 1fr;
+            background: linear-gradient(90deg, #4F46E5, #06B6D4);
+            color: white;
+            font-weight: bold;
+            padding: 1rem;
+        }
+        
+        .code-header span {
+            text-align: center;
+        }
+        
+        .code-list {
+            max-height: 600px;
+            overflow-y: auto;
+        }
+        
+        .code-item {
+            display: grid;
+            grid-template-columns: 0.5fr 2fr 3fr 1fr 1fr 1fr;
+            padding: 0.75rem 1rem;
+            border-bottom: 1px solid var(--border-color);
+            align-items: center;
+        }
+        
+        .code-item:nth-child(even) {
+            background-color: #f9fafb;
+        }
+        
+        .code-item span {
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        
+        .code-value {
+            font-family: monospace;
+            font-weight: bold;
+            color: var(--primary-color);
+        }
+        
+        .btn-copy-code {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 0.25rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+            transition: background-color 0.3s;
+        }
+        
+        .btn-copy-code:hover {
+            background-color: var(--primary-dark);
+        }
+        
+        .coupon-instructions {
+            margin-top: 3rem;
+            background-color: white;
+            padding: 2rem;
+            border-radius: 0.5rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+        
+        .coupon-instructions h3 {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            color: var(--text-color);
+        }
+        
+        .coupon-instructions ol {
+            padding-left: 1.5rem;
+        }
+        
+        .coupon-instructions li {
+            margin-bottom: 0.75rem;
+        }
+        
+        .no-results {
+            text-align: center;
+            padding: 3rem;
+            color: var(--light-text);
+        }
+        
+        /* 响应式调整 */
+        @media (max-width: 768px) {
+            .code-header, .code-item {
+                grid-template-columns: 0.5fr 1fr 1.5fr 1fr;
+            }
+            
+            .code-header span:nth-child(5), 
+            .code-item span:nth-child(5) {
+                display: none;
+            }
+            
+            .code-header span:nth-child(2), 
+            .code-item span:nth-child(2) {
+                display: none;
+            }
+            
+            .code-item span {
+                padding: 0.25rem;
+            }
+            
+            .code-item span:before {
+                content: attr(data-label);
+                display: block;
+                font-size: 0.75rem;
+                color: var(--light-text);
+                margin-bottom: 0.25rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="overlay"></div>
+    <!-- 导航栏 -->
+    <header>
+        <div class="container">
+            <div class="logo">
+                <h1>听泉科技</h1>
+            </div>
+            <nav>
+                <ul>
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="products.html">产品</a></li>
+                    <li><a href="pricing.html">价格</a></li>
+                    <li><a href="activation-codes.html" class="active">优惠券</a></li>
+                    <li><a href="contact.html">联系我们</a></li>
+                    <li><a href="api-docs.html">API文档</a></li>
+                </ul>
+            </nav>
+            <button class="menu-button">
+                <span class="menu-icon"></span>
+            </button>
+        </div>
+    </header>
+
+    <!-- 激活码页面内容 -->
+    <section class="activation-page">
+        <div class="container">
+            <h1 class="section-title">优惠券列表</h1>
+            
+            <div class="purchase-cta" style="background: linear-gradient(90deg, #FF9500, #FF5E3A); padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; text-align: center; color: white; box-shadow: 0 4px 10px rgba(255, 94, 58, 0.3);">
+                <h2 style="margin-top: 0; margin-bottom: 0.5rem;"><i class="fas fa-bolt"></i> 听泉Cursor助手 - 专业AI编程辅助工具</h2>
+                <p style="margin-bottom: 1rem; font-size: 1.1rem;">店铺购买链接天卡，周卡，月卡</p>
+                <div>
+                    <a href="https://www.houfaka.com/links/3BD4C127/" target="_blank" class="btn btn-primary" style="background-color: white; color: #FF5E3A; border: none; padding: 0.8rem 2rem; font-size: 1.1rem; margin-right: 1rem;">
+                        <i class="fas fa-shopping-cart"></i> 立即购买
+                    </a>
+                    <span style="font-size: 0.9rem; opacity: 0.9;">👇 使用下方优惠券可享受折扣价格</span>
+                </div>
+            </div>
+            
+            <div class="announcement-banner">
+                <h1><i class="fas fa-gift"></i> 听泉Cursor助手优惠券</h1>
+                <p>下面是购买Cursor助手时可使用的优惠券的商品，点击复制按钮获取优惠券代码</p>
+                <div style="margin-top: 0.8rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;">
+                    <a href="https://www.houfaka.com/details/5D113F32" target="_blank" class="btn btn-secondary" style="margin: 0.5rem; white-space: nowrap;">
+                        <i class="fas fa-shopping-cart"></i> 立即购买
+                    </a>
+                    <span style="margin: 0 1rem;">•</span>
+                    <span style="font-size: 0.9rem; opacity:.9; margin: 0.5rem;">
+                        数据最后更新时间: <span id="lastUpdate">加载中...</span>
+                        <button onclick="fetchActivationCodes()" style="background: none; border: none; color: white; cursor: pointer; margin-left: 0.5rem;">
+                            <i class="fas fa-sync-alt"></i> 刷新
+                        </button>
+                    </span>
+                </div>
+            </div>
+            
+            <div class="search-box">
+                <input type="text" id="codeSearch" placeholder="搜索优惠券或产品名称..." onkeyup="searchCodes()">
+                <i class="fas fa-search"></i>
+            </div>
+
+            <!-- 激活码列表 -->
+            <div class="activation-codes">
+                <div class="code-header">
+                    <span class="code-id">序号</span>
+                    <span class="code-type">产品名字</span>
+                    <span class="code-value">优惠券</span>
+                    <span class="code-price">优惠券金额</span>
+                    <span class="code-valid">有效期</span>
+                    <span class="code-action">操作</span>
+                </div>
+                
+                <div class="code-list" id="codeList">
+                    <!-- 这里将通过JavaScript填充激活码 -->
+                </div>
+            </div>
+            
+            <div class="coupon-instructions">
+                <h3><i class="fas fa-tags"></i> 如何使用优惠券</h3>
+                <div style="display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 1.5rem;">
+                    <div style="flex: 1; min-width: 200px; padding: 1rem; text-align: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin: 0.5rem;">
+                        <div style="background-color: #4F46E5; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem auto;">1</div>
+                        <p>点击"复制"按钮复制您需要的优惠券代码</p>
+                    </div>
+                    <div style="flex: 1; min-width: 200px; padding: 1rem; text-align: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin: 0.5rem;">
+                        <div style="background-color: #4F46E5; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem auto;">2</div>
+                        <p>前往<a href="https://www.houfaka.com/details/5D113F32" target="_blank" style="color: #4F46E5; font-weight: bold;">购买页面</a></p>
+                    </div>
+                    <div style="flex: 1; min-width: 200px; padding: 1rem; text-align: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin: 0.5rem;">
+                        <div style="background-color: #4F46E5; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem auto;">3</div>
+                        <p>结算时在"使用优惠券"输入框粘贴代码</p>
+                    </div>
+                    <div style="flex: 1; min-width: 200px; padding: 1rem; text-align: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin: 0.5rem;">
+                        <div style="background-color: #4F46E5; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 1rem auto;">4</div>
+                        <p>点击"确认"按钮享受折扣价格</p>
+                    </div>
+                </div>
+                <div style="background-color: rgba(79, 70, 229, 0.1); padding: 1rem; border-radius: 0.5rem; margin-top: 1.5rem;">
+                    <p style="margin: 0;"><i class="fas fa-info-circle" style="color: #4F46E5;"></i> 注意：每个优惠券仅可使用一次，请在有效期内使用。如有问题请联系客服微信：behikcigar</p>
+                </div>
+                <div style="text-align: center; margin-top: 1.5rem;">
+                    <a href="https://www.houfaka.com/details/5D113F32" target="_blank" class="btn btn-primary" style="padding: 0.8rem 2rem; font-size: 1.1rem;">
+                        <i class="fas fa-shopping-cart"></i> 前往购买 Cursor助手
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 页脚 -->
+    <footer>
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-col">
+                    <h3>听泉科技</h3>
+                    <p>专注于智能软件解决方案</p>
+                </div>
+                <div class="footer-col">
+                    <h3>快速链接</h3>
+                    <ul>
+                        <li><a href="index.html">首页</a></li>
+                        <li><a href="products.html">产品</a></li>
+                        <li><a href="pricing.html">价格</a></li>
+                        <li><a href="activation-codes.html">激活码</a></li>
+                        <li><a href="contact.html">联系我们</a></li>
+                        <li><a href="api-docs.html">API文档</a></li>
+                    </ul>
+                </div>
+                <div class="footer-col">
+                    <h3>联系我们</h3>
+                    <p><i class="fas fa-envelope"></i> maticarmy@gmail.com</p>
+                    <div class="social-links">
+                        <a href="https://github.com/maticarmy/free_cursor_pro.git" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
+                        <a href="javascript:void(0)" onclick="showWechatModal()" title="微信"><i class="fab fa-weixin"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="copyright">
+                <p>&copy; 2024 听泉科技. 保留所有权利.</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- 微信弹窗 -->
+    <div id="wechatModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
+        <div style="position: relative; background: white; max-width: 400px; margin: 100px auto; padding: 2rem; border-radius: 1rem; text-align: center;">
+            <span onclick="closeWechatModal()" style="position: absolute; right: 1rem; top: 1rem; cursor: pointer; font-size: 1.5rem;">&times;</span>
+            <img src="img/wechat_qr.png" alt="微信二维码" style="width: 200px; border-radius: 0.5rem;">
+            <p style="margin-top: 1rem; font-weight: bold;">
+                <i class="fab fa-weixin"></i> 微信号：behikcigar
+            </p>
+        </div>
+    </div>
+
+    <script src="js/main.js"></script>
+    <script>
+        // 微信弹窗功能
+        function showWechatModal() {
+            document.getElementById('wechatModal').style.display = 'block';
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeWechatModal() {
+            document.getElementById('wechatModal').style.display = 'none';
+            document.body.style.overflow = 'auto';
+        }
+
+        // 点击空白处关闭弹窗
+        document.getElementById('wechatModal').addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeWechatModal();
+            }
+        });
+
+        // 激活码数据将从API获取
+        let activationCodes = [];
+
+        // 从API获取激活码数据
+        function fetchActivationCodes() {
+            const codeList = document.getElementById('codeList');
+            
+            // 显示加载中状态
+            codeList.innerHTML = `
+                <div style="text-align: center; padding: 3rem;">
+                    <i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: var(--primary-color); margin-bottom: 1rem;"></i>
+                    <p>正在加载优惠券数据，请稍候...</p>
+                </div>
+            `;
+            
+            // 使用AJAX获取数据
+            fetch('https://api.cursorpro.com.cn/admin/api.Houfaka/capu')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP错误! 状态码: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(response => {
+                    console.log("API响应:", response); // 调试日志
+                    
+                    // 正确处理API返回的格式 {code: 0, msg: "", data: [], total: 101}
+                    if (response && response.code === 0 && Array.isArray(response.data)) {
+                        // 成功情况，处理data数组
+                        if (response.data.length === 0) {
+                            throw new Error('优惠券数据为空');
+                        }
+                        
+                        activationCodes = response.data.map((item, index) => ({
+                            id: item.id || index + 1,
+                            type: item.name || '听泉cursor助手',
+                            code: item.coupon || '',
+                            price: item.coupon_amount || '8.00元',
+                            threshold: item.threshold_amount || '0.00元',
+                            validity: item.valid_period || '4天后',
+                            note: item.remark || '福利发放'
+                        }));
+                        
+                        // 更新UI显示优惠券
+                        renderActivationCodes(activationCodes);
+                        
+                        // 更新数据最后更新时间
+                        const lastUpdateEl = document.getElementById('lastUpdate');
+                        if (lastUpdateEl) {
+                            const now = new Date();
+                            lastUpdateEl.textContent = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
+                        }
+                    } else {
+                        // 处理API返回错误的情况
+                        const errorMsg = response && response.msg ? response.msg : 'API返回未知错误';
+                        throw new Error(errorMsg);
+                    }
+                })
+                .catch(error => {
+                    console.error('获取优惠券数据失败:', error);
+                    
+                    // 显示错误信息
+                    codeList.innerHTML = `
+                        <div style="text-align: center; padding: 3rem; color: #e74c3c;">
+                            <i class="fas fa-exclamation-circle" style="font-size: 2rem; margin-bottom: 1rem;"></i>
+                            <p>获取优惠券数据失败，请稍后再试</p>
+                            <p style="color: #7f8c8d; font-size: 0.9rem;">错误信息: ${error.message}</p>
+                            <button class="btn btn-copy-code" style="margin-top: 1rem;" onclick="fetchActivationCodes()">
+                                <i class="fas fa-sync-alt"></i> 重新加载
+                            </button>
+                        </div>
+                    `;
+                    
+                    // 如果API加载失败，显示备用数据
+                    if (error.message === '优惠券数据为空' || error.message.includes('格式')) {
+                        // 使用备用数据
+                        activationCodes = [
+                            { id: 1, type: '听泉cursor助手', code: '02117ECD8FCBJWXO', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' },
+                            { id: 2, type: '听泉cursor助手', code: '0422997AFF953S6H', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' },
+                            { id: 3, type: '听泉cursor助手', code: '082613C5999BTQV0', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' },
+                            { id: 4, type: '听泉cursor助手', code: '0A8E3AF062406KBC', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' },
+                            { id: 5, type: '听泉cursor助手', code: '0B11A3CDC5BCRTC7', price: '8.00元', threshold: '0.00元', validity: '4天后', note: '福利发放' }
+                        ];
+                        renderActivationCodes(activationCodes);
+                    }
+                });
+        }
+
+        // 渲染优惠券列表
+        function renderActivationCodes(codes) {
+            const codeList = document.getElementById('codeList');
+            codeList.innerHTML = '';
+            
+            if (codes.length === 0) {
+                codeList.innerHTML = '<div class="no-results">没有找到匹配的优惠券</div>';
+                return;
+            }
+            
+            codes.forEach(code => {
+                const codeItem = document.createElement('div');
+                codeItem.className = 'code-item';
+                
+                codeItem.innerHTML = `
+                    <span data-label="序号:">${code.id}</span>
+                    <span data-label="产品名字:">${code.type}</span>
+                    <span data-label="优惠券:" class="code-value">${code.code}</span>
+                    <span data-label="金额:">${code.price}</span>
+                    <span data-label="有效期:">${code.validity}</span>
+                    <span data-label="" class="code-action">
+                        <button class="btn btn-copy-code" onclick="copyCode('${code.code}', this)">
+                            <i class="fas fa-copy"></i> 复制
+                        </button>
+                        <a href="https://www.houfaka.com/details/5D113F32" target="_blank" class="btn" style="background-color: #10B981; margin-left: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: white; border-radius: 0.25rem; text-decoration: none; display: inline-block;">
+                            <i class="fas fa-shopping-cart"></i> 使用
+                        </a>
+                    </span>
+                `;
+                
+                codeList.appendChild(codeItem);
+            });
+        }
+        
+        // 复制优惠券功能
+        function copyCode(code, button) {
+            const textarea = document.createElement('textarea');
+            textarea.value = code;
+            textarea.style.position = 'fixed';
+            document.body.appendChild(textarea);
+            textarea.select();
+            
+            try {
+                document.execCommand('copy');
+                const originalText = button.innerHTML;
+                button.innerHTML = '<i class="fas fa-check"></i> 已复制';
+                
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                }, 2000);
+                
+            } catch (err) {
+                console.error('复制失败:', err);
+            }
+            
+            document.body.removeChild(textarea);
+        }
+        
+        // 搜索优惠券
+        function searchCodes() {
+            const searchTerm = document.getElementById('codeSearch').value.toLowerCase();
+            
+            if (searchTerm.trim() === '') {
+                renderActivationCodes(activationCodes);
+            } else {
+                const filteredCodes = activationCodes.filter(code => 
+                    code.code.toLowerCase().includes(searchTerm) || 
+                    code.type.toLowerCase().includes(searchTerm)
+                );
+                renderActivationCodes(filteredCodes);
+            }
+        }
+        
+        // 页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            // 立即获取优惠券数据
+            fetchActivationCodes();
+            
+            // 设置搜索框的事件监听
+            const searchInput = document.getElementById('codeSearch');
+            if (searchInput) {
+                searchInput.addEventListener('keyup', searchCodes);
+            }
+        });
+    </script>
+</body>
+</html> 
--- a/api-docs.html
+++ b/api-docs.html
@@ -76,6 +76,7 @@
                    <li><a href="index.html">首页</a></li>
                    <li><a href="products.html">产品</a></li>
                    <li><a href="pricing.html">价格</a></li>
+                    <li><a href="activation-codes.html">优惠券</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                    <li><a href="api-docs.html" class="active">API文档</a></li>
                </ul>
--- a/contact.html
+++ b/contact.html
@@ -76,6 +76,7 @@
                    <li><a href="index.html">首页</a></li>
                    <li><a href="products.html">产品</a></li>
                    <li><a href="pricing.html">价格</a></li>
+                    <li><a href="activation-codes.html">优惠券</a></li>
                    <li><a href="contact.html" class="active">联系我们</a></li>
                    <li><a href="api-docs.html">API文档</a></li>
                </ul>
--- a/css/style.css
+++ b/css/style.css
@@ -614,4 +614,134 @@ footer {
    100% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
+}
+
+/* 优惠券部分样式 */
+.coupons {
+    padding: 4rem 0;
+    background-color: #f8f9fa;
+}
+
+.section-desc {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto 2rem;
+    color: #666;
+}
+
+.coupon-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+
+.coupon-card {
+    background-color: white;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    transition: transform 0.3s, box-shadow 0.3s;
+    border: 2px dashed #3498db;
+    position: relative;
+}
+
+.coupon-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+}
+
+.coupon-content {
+    padding: 1.5rem;
+    position: relative;
+}
+
+.coupon-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.coupon-value {
+    font-size: 1.8rem;
+    font-weight: bold;
+    color: #e74c3c;
+}
+
+.coupon-type {
+    background-color: #3498db;
+    color: white;
+    padding: 0.3rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+}
+
+.coupon-code {
+    background-color: #f0f0f0;
+    padding: 0.8rem;
+    text-align: center;
+    font-family: monospace;
+    font-size: 1.2rem;
+    font-weight: bold;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    margin: 1rem 0;
+    border: 1px dashed #ccc;
+    user-select: all;
+}
+
+.coupon-date {
+    font-size: 0.85rem;
+    color: #777;
+    margin-bottom: 1rem;
+}
+
+.btn-copy {
+    width: 100%;
+    background-color: #2ecc71;
+    border: none;
+}
+
+.btn-copy:hover {
+    background-color: #27ae60;
+}
+
+.coupon-note {
+    background-color: #f8f4e5;
+    padding: 0.8rem;
+    text-align: center;
+    font-size: 0.9rem;
+    color: #b58105;
+}
+
+.coupon-instructions {
+    max-width: 700px;
+    margin: 0 auto;
+    background-color: white;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+}
+
+.coupon-instructions h3 {
+    text-align: center;
+    margin-bottom: 1.5rem;
+    color: #2c3e50;
+}
+
+.coupon-instructions ol {
+    margin-left: 1.5rem;
+    line-height: 1.8;
+}
+
+.coupon-instructions a {
+    color: #3498db;
+    text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+    .coupon-grid {
+        grid-template-columns: 1fr;
+    }
 } 
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
                    <li><a href="index.html" class="active">首页</a></li>
                    <li><a href="products.html">产品</a></li>
                    <li><a href="pricing.html">价格</a></li>
+                    <li><a href="activation-codes.html">优惠券</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                    <li><a href="api-docs.html">API文档</a></li>
                </ul>
@@ -45,6 +46,10 @@
                        <i class="fas fa-shopping-cart"></i>
                        前往购买
                    </a>
+                    <a href="activation-codes.html" class="btn btn-outline" style="background-color: orange; color: white; border-color: orange;">
+                        <i class="fas fa-tags"></i>
+                        优惠券
+                    </a>
                </div>
            </div>
        </div>
@@ -150,6 +155,7 @@
                        <li><a href="index.html">首页</a></li>
                        <li><a href="products.html">产品</a></li>
                        <li><a href="pricing.html">价格</a></li>
+                        <li><a href="activation-codes.html">激活码</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                        <li><a href="api-docs.html">API文档</a></li>
                    </ul>
--- a/products.html
+++ b/products.html
@@ -70,6 +70,7 @@
                    <li><a href="index.html">首页</a></li>
                    <li><a href="products.html" class="active">产品</a></li>
                    <li><a href="pricing.html">价格</a></li>
+                    <li><a href="activation-codes.html">优惠券</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                    <li><a href="api-docs.html">API文档</a></li>
                </ul>