<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>mspaint - The best BABFT script</title>
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="stylesheet" href="styles.css?v=2.2">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 检测是否需要显示加载页面 -->
    <script>
        // 检查是否已经加载过
        if (!sessionStorage.getItem('hasLoaded')) {
            // 首次访问，跳转到加载页面
            window.location.href = 'loading.html';
        }
    </script>

    <!-- 背景动画点阵 -->
    <div class="background-dots"></div>
    
    <!-- 雪花效果 -->
    <div class="snowflakes" id="snowflakes"></div>
    
    <!-- 流星效果 -->
    <div class="shooting-stars" id="shootingStars"></div>
    
    <!-- 雷电支持出品标识 -->
    <a href="https://space.bilibili.com/652308016" target="_blank" class="sponsor-badge">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="currentColor"/>
        </svg>
        <span>雷电支持出品</span>
    </a>
    
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.html" class="nav-brand">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 17L12 22L22 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 12L12 17L22 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>雷电汉化站</span>
            </a>
            
            <!-- 移动端菜单按钮 -->
            <button class="mobile-menu-btn" onclick="toggleMobileMenu()" aria-label="菜单">
                <span></span>
                <span></span>
                <span></span>
            </button>
            
            <div class="nav-links">
                <a href="#features">功能</a>
                <a href="#docs">文档</a>
                <a href="raw.html">Raw</a>
                <button class="nav-search-btn" onclick="toggleSearchModal()">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
                        <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                    搜索
                </button>
                <a href="#" class="nav-shop">Shop</a>
                
                <!-- 未登录状态 -->
                <a href="#" class="nav-signin" id="signInBtn" onclick="openAuthModal('login')">登录</a>
                
                <!-- 已登录状态 -->
                <div class="user-menu" id="userMenu" style="display: none;">
                    <button class="user-avatar" onclick="toggleUserDropdown()">
                        <img id="userAvatar" src="" alt="用户头像">
                        <span id="userName"></span>
                    </button>
                    <div class="user-dropdown" id="userDropdown">
                        <div class="user-info">
                            <p id="userEmail"></p>
                        </div>
                        <button class="dropdown-switch-btn" onclick="switchAccount()">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16 17l5-5-5-5M21 12H9M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            切换账号
                        </button>
                        <button class="dropdown-signout-btn" onclick="signOut()">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            退出登录
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="main-content">
        <!-- 购买按钮 -->
        <div class="buy-button-container">
            <button class="buy-button">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Buy mspaint
            </button>
        </div>

        <!-- 标题 -->
        <h1 class="main-title">雷电汉化站</h1>
        <p class="main-subtitle">最强DOOORS汉化脚本</p>

        <!-- 脚本加载器 -->
        <div class="script-loader">
            <div class="script-box">
                <code id="script-code">loadstring(game:HttpGet("https://your-domain.com/raw/mspaint-script.lua"))()</code>
                <button class="copy-button" onclick="copyScript()" id="copyBtn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="2"/>
                        <path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    <span class="copy-text">复制</span>
                </button>
            </div>
            <a href="https://discord.gg/your-server" target="_blank" class="discord-button" title="加入Discord社区">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                </svg>
            </a>
        </div>

        <!-- 预览图片 -->
        <div class="preview-container">
            <div class="preview-image">
                <div class="laptop-mockup">
                    <div class="laptop-screen">
                        <video autoplay loop muted playsinline preload="auto">
                            <source src="mp4/001.mp4" type="video/mp4">
                            您的浏览器不支持视频播放
                        </video>
                    </div>
                    <div class="laptop-keyboard"></div>
                </div>
            </div>
        </div>

        <!-- 功能介绍 -->
        <section id="features" class="features-section">
            <h2>主要功能</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3>自动建造</h3>
                    <p>智能建造系统，快速创建复杂结构</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>高性能</h3>
                    <p>优化的代码执行，流畅无卡顿</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🛡️</div>
                    <h3>安全可靠</h3>
                    <p>定期更新，确保脚本安全稳定</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎯</div>
                    <h3>精准控制</h3>
                    <p>精确的建造控制和位置调整</p>
                </div>
            </div>
        </section>

        <!-- 游戏支持展示 -->
        <section class="games-section">
            <h2>🎮 mspaint officially supports 15 games</h2>
            <p class="games-subtitle">quality & quantity</p>
            <div class="games-grid">
                <a href="games/doors.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/doors.jpg" alt="DOORS" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%236366f1%22 font-size=%2224%22 font-family=%22Arial%22%3EDOORS%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>DOORS</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/dead-rails.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/dead-rails.jpg" alt="Dead Rails" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%2322c55e%22 font-size=%2220%22 font-family=%22Arial%22%3EDead Rails%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Dead Rails</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/forsaken.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/forsaken.jpg" alt="Forsaken" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23f59e0b%22 font-size=%2224%22 font-family=%22Arial%22%3EForsaken%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Forsaken</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/99-nights.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/99-nights.jpg" alt="99 Nights In The Forest" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%238b5cf6%22 font-size=%2218%22 font-family=%22Arial%22%3E99 Nights%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>99 Nights In The Forest</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/fisch.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/fisch.jpg" alt="Fisch" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%233b82f6%22 font-size=%2224%22 font-family=%22Arial%22%3EFisch%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Fisch</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/grow-a-garden.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/grow-a-garden.jpg" alt="Grow A Garden" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%2310b981%22 font-size=%2218%22 font-family=%22Arial%22%3EGrow A Garden%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Grow A Garden</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/bubble-gum.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/bubble-gum.jpg" alt="Bubble Gum Simulator Infinity" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23f59e0b%22 font-size=%2216%22 font-family=%22Arial%22%3EBubble Gum%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Bubble Gum Simulator Infinity</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/pressure.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/pressure.jpg" alt="Pressure" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23ef4444%22 font-size=%2224%22 font-family=%22Arial%22%3EPressure%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Pressure</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/3008.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/3008.jpg" alt="3008" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%236b7280%22 font-size=%2224%22 font-family=%22Arial%22%3E3008%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>3008</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/rooms-doors.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/rooms-doors.jpg" alt="Rooms & Doors" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23f97316%22 font-size=%2218%22 font-family=%22Arial%22%3ERooms %26 Doors%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Rooms & Doors</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/build-a-boat.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/build-a-boat.jpg" alt="Build A Boat For Treasure" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%2322c55e%22 font-size=%2218%22 font-family=%22Arial%22%3EBuild A Boat%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Build A Boat For Treasure</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/grace.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/grace.jpg" alt="Grace" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23eab308%22 font-size=%2224%22 font-family=%22Arial%22%3EGrace%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Grace</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/murder-mystery-2.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/murder-mystery-2.jpg" alt="Murder Mystery 2" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23ec4899%22 font-size=%2218%22 font-family=%22Arial%22%3EMurder Mystery 2%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Murder Mystery 2</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/word-bomb.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/word-bomb.jpg" alt="Word Bomb" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23f59e0b%22 font-size=%2224%22 font-family=%22Arial%22%3EWord Bomb%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Word Bomb</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
                <a href="games/notoriety.html" class="game-card">
                    <div class="game-image-wrapper">
                        <img src="images/games/notoriety.jpg" alt="Notoriety" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22180%22%3E%3Crect fill=%22%232d3748%22 width=%22300%22 height=%22180%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%23ef4444%22 font-size=%2224%22 font-family=%22Arial%22%3ENotoriety%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div class="game-info">
                        <h3>Notoriety</h3>
                        <span class="game-status">✓</span>
                    </div>
                </a>
            </div>
        </section>

        <!-- 文档部分 -->
        <section id="docs" class="docs-section">
            <h2>📚 项目文档</h2>
            <div class="docs-grid">
                <div class="doc-card" onclick="openDoc('README.md')">
                    <div class="doc-icon">📖</div>
                    <h3>README.md</h3>
                    <p>项目介绍和快速开始指南</p>
                    <div class="doc-meta">
                        <span class="doc-badge">主文档</span>
                        <span class="doc-size">~8 KB</span>
                    </div>
                </div>
                
                <div class="doc-card" onclick="openDoc('CHAT_FEATURES.md')">
                    <div class="doc-icon">💬</div>
                    <h3>CHAT_FEATURES.md</h3>
                    <p>AI 聊天功能使用说明</p>
                    <div class="doc-meta">
                        <span class="doc-badge">功能说明</span>
                        <span class="doc-size">~4 KB</span>
                    </div>
                </div>
                
                <div class="doc-card" onclick="openDoc('RAW_USAGE.md')">
                    <div class="doc-icon">🔗</div>
                    <h3>RAW_USAGE.md</h3>
                    <p>Raw 文件访问和部署指南</p>
                    <div class="doc-meta">
                        <span class="doc-badge">部署指南</span>
                        <span class="doc-size">~6 KB</span>
                    </div>
                </div>
                
                <div class="doc-card" onclick="window.location.href='raw.html'">
                    <div class="doc-icon">📄</div>
                    <h3>Raw Files</h3>
                    <p>查看所有可用的脚本文件</p>
                    <div class="doc-meta">
                        <span class="doc-badge">脚本文件</span>
                        <span class="doc-size">查看全部</span>
                    </div>
                </div>
                
                <div class="doc-card" onclick="window.location.href='docs.html#admin'">
                    <div class="doc-icon">🔐</div>
                    <h3>管理后台配置</h3>
                    <p>管理后台配置和使用指南</p>
                    <div class="doc-meta">
                        <span class="doc-badge">配置指南</span>
                        <span class="doc-size">~15 KB</span>
                    </div>
                </div>
                
                <div class="doc-card" onclick="window.location.href='docs.html#recaptcha'">
                    <div class="doc-icon">🛡️</div>
                    <h3>reCAPTCHA 配置</h3>
                    <p>reCAPTCHA Enterprise 集成指南</p>
                    <div class="doc-meta">
                        <span class="doc-badge">安全配置</span>
                        <span class="doc-size">~18 KB</span>
                    </div>
                </div>
                
                <div class="doc-card" onclick="window.location.href='docs.html#firebase'">
                    <div class="doc-icon">🔥</div>
                    <h3>Firebase 配置</h3>
                    <p>Firebase 服务配置说明</p>
                    <div class="doc-meta">
                        <span class="doc-badge">配置指南</span>
                        <span class="doc-size">~12 KB</span>
                    </div>
                </div>
                
                <div class="doc-card" onclick="window.location.href='docs.html#github'">
                    <div class="doc-icon">🐙</div>
                    <h3>GitHub 登录配置</h3>
                    <p>GitHub OAuth 登录配置</p>
                    <div class="doc-meta">
                        <span class="doc-badge">认证配置</span>
                        <span class="doc-size">~10 KB</span>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- AI 聊天按钮 -->
    <button class="chat-toggle-btn" onclick="toggleChat()">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>

    <!-- AI 聊天窗口 -->
    <div class="chat-container" id="chatContainer">
        <div class="chat-header">
            <div class="chat-header-info">
                <h3>AI 助手</h3>
                <span class="chat-status">Powered by DeepSeek</span>
            </div>
            <button class="chat-close-btn" onclick="toggleChat()">×</button>
        </div>
        
        <div class="chat-messages" id="chatMessages">
            <div class="chat-message bot-message">
                <div class="message-avatar">🤖</div>
                <div class="message-content">
                    <p>你好！我是 AI 助手，有什么可以帮助你的吗？</p>
                </div>
            </div>
        </div>
        
        <div class="chat-input-container">
            <input 
                type="text" 
                class="chat-input" 
                id="chatInput" 
                placeholder="输入消息..."
                onkeypress="handleChatKeyPress(event)"
            >
            <button class="chat-send-btn" onclick="sendMessage()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
        
        <div class="chat-settings">
            <input 
                type="password" 
                class="api-key-input" 
                id="apiKeyInput" 
                placeholder="输入 DeepSeek API Key (从 platform.deepseek.com 获取)"
                onchange="saveApiKey()"
            >
            <div class="api-key-hint">
                💡 获取 API Key: <a href="https://platform.deepseek.com" target="_blank">platform.deepseek.com</a>
            </div>
        </div>
    </div>

    <!-- 搜索模态框 -->
    <div class="search-modal" id="searchModal">
        <div class="search-modal-content" id="searchModalContent">
            <div class="search-modal-header">
                <h3>🔍 网络搜索</h3>
                <div class="search-header-actions">
                    <button class="search-action-btn" onclick="openInNewTab()" title="在新标签页打开">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <polyline points="15 3 21 3 21 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <line x1="10" y1="14" x2="21" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                    <button class="search-close-btn" onclick="toggleSearchModal()">×</button>
                </div>
            </div>
            
            <div class="search-engine-tabs">
                <button class="search-tab active" data-engine="bing" onclick="switchSearchEngine('bing')">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M5 3v18l7-5 7 5V3H5z"/>
                    </svg>
                    必应
                </button>
                <button class="search-tab" data-engine="baidu" onclick="switchSearchEngine('baidu')">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <circle cx="12" cy="12" r="10"/>
                    </svg>
                    百度
                </button>
                <button class="search-tab" data-engine="google" onclick="switchSearchEngine('google')">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                    </svg>
                    谷歌
                </button>
            </div>
            
            <div class="search-input-container">
                <input 
                    type="text" 
                    class="search-input" 
                    id="searchInput" 
                    placeholder="输入搜索内容..."
                    onkeypress="handleSearchKeyPress(event)"
                >
                <button class="search-submit-btn" onclick="performSearch()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
                        <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                    搜索
                </button>
            </div>
            
            <!-- 搜索结果显示区域 -->
            <div class="search-results-container" id="searchResultsContainer" style="display: none;">
                <div class="search-results-header">
                    <span class="search-results-title" id="searchResultsTitle">搜索结果</span>
                    <button class="search-back-btn" onclick="backToSearch()">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        返回搜索
                    </button>
                </div>
                <iframe id="searchResultsFrame" class="search-results-frame"></iframe>
            </div>
            
            <div class="search-tips" id="searchTips">
                <p>💡 提示：选择搜索引擎后输入关键词，搜索结果将在下方显示</p>
            </div>
        </div>
    </div>

    <!-- 登录/注册模态框 -->
    <div class="auth-modal" id="authModal">
        <div class="auth-modal-content">
            <button class="auth-close-btn" onclick="closeAuthModal()">×</button>
            
            <!-- 登录表单 -->
            <div class="auth-form" id="loginForm">
                <h2>登录账户</h2>
                <p class="auth-subtitle">欢迎回来！</p>
                
                <div class="auth-input-group">
                    <label>邮箱</label>
                    <input type="email" id="loginEmail" placeholder="your@email.com">
                </div>
                
                <div class="auth-input-group">
                    <label>密码</label>
                    <input type="password" id="loginPassword" placeholder="••••••••">
                </div>
                
                <button class="auth-submit-btn" onclick="loginWithEmail()">登录</button>
                
                <div class="auth-divider">
                    <span>或者</span>
                </div>
                
                <button class="auth-google-btn" onclick="loginWithGoogle()">
                    <svg width="18" height="18" viewBox="0 0 24 24">
                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                    </svg>
                    使用 Google 登录
                </button>
                
                <button class="auth-github-btn" onclick="loginWithGithub()">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
                    </svg>
                    使用 GitHub 登录
                </button>
                
                <p class="auth-switch">
                    还没有账户？ <a href="#" onclick="switchToRegister()">立即注册</a>
                </p>
            </div>
            
            <!-- 注册表单 -->
            <div class="auth-form" id="registerForm" style="display: none;">
                <h2>创建账户</h2>
                <p class="auth-subtitle">加入我们！</p>
                
                <div class="auth-input-group">
                    <label>邮箱</label>
                    <input type="email" id="registerEmail" placeholder="your@email.com">
                </div>
                
                <div class="auth-input-group">
                    <label>密码</label>
                    <input type="password" id="registerPassword" placeholder="至少6个字符">
                </div>
                
                <div class="auth-input-group">
                    <label>确认密码</label>
                    <input type="password" id="confirmPassword" placeholder="再次输入密码">
                </div>
                
                <button class="auth-submit-btn" onclick="registerWithEmail()">注册</button>
                
                <div class="auth-divider">
                    <span>或者</span>
                </div>
                
                <button class="auth-google-btn" onclick="loginWithGoogle()">
                    <svg width="18" height="18" viewBox="0 0 24 24">
                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                    </svg>
                    使用 Google 注册
                </button>
                
                <button class="auth-github-btn" onclick="loginWithGithub()">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
                    </svg>
                    使用 GitHub 注册
                </button>
                
                <p class="auth-switch">
                    已有账户？ <a href="#" onclick="switchToLogin()">立即登录</a>
                </p>
            </div>
        </div>
    </div>

    <!-- 音频播放器 -->
    <div class="audio-player" id="audioPlayer">
        <button class="audio-toggle-btn" onclick="toggleAudioPlayer()">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
                <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
            </svg>
        </button>
        
        <div class="audio-player-panel" id="audioPlayerPanel">
            <div class="audio-player-header">
                <h4>🎵 背景音乐</h4>
                <button class="audio-close-btn" onclick="toggleAudioPlayer()">−</button>
            </div>
            
            <div class="audio-info">
                <div class="audio-title" id="audioTitle">bgm.mp3</div>
                <div class="audio-time">
                    <span id="currentTime">0:00</span>
                    <span class="time-separator">/</span>
                    <span id="duration">0:00</span>
                </div>
                <div class="audio-remaining">
                    剩余: <span id="remainingTime">0:00</span>
                </div>
            </div>
            
            <!-- 进度条 -->
            <div class="audio-control-group">
                <label>⏱️ 进度</label>
                <input 
                    type="range" 
                    class="audio-slider progress-slider" 
                    id="progressSlider" 
                    min="0" 
                    max="100" 
                    value="0"
                    oninput="seekAudio(this.value)"
                >
            </div>
            
            <!-- 音量控制 -->
            <div class="audio-control-group">
                <label>🔊 音量: <span id="volumeValue">100</span>%</label>
                <input 
                    type="range" 
                    class="audio-slider volume-slider" 
                    id="volumeSlider" 
                    min="0" 
                    max="100" 
                    value="100"
                    oninput="changeVolume(this.value)"
                >
            </div>
            
            <!-- 播放速度 -->
            <div class="audio-control-group">
                <label>⚡ 速度: <span id="speedValue">1.0</span>x</label>
                <input 
                    type="range" 
                    class="audio-slider speed-slider" 
                    id="speedSlider" 
                    min="25" 
                    max="200" 
                    value="100"
                    oninput="changeSpeed(this.value)"
                >
            </div>
            
            <!-- 播放控制按钮 -->
            <div class="audio-controls">
                <button class="audio-control-btn" onclick="skipBackward()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11 19l-7-7 7-7m8 14l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                
                <button class="audio-play-btn" id="playBtn" onclick="togglePlay()">
                    <svg id="playIcon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M8 5v14l11-7z"/>
                    </svg>
                    <svg id="pauseIcon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
                        <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                    </svg>
                </button>
                
                <button class="audio-control-btn" onclick="skipForward()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13 5l7 7-7 7M5 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                
                <button class="audio-control-btn" onclick="toggleLoop()" id="loopBtn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M17 1l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M21 13v2a4 4 0 0 1-4 4H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 返回顶部按钮 -->
    <button class="back-to-top" id="backToTop" onclick="scrollToTop()" title="返回顶部">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>

    <!-- 音频元素 -->
    <audio id="bgmAudio" src="mp4/bgm.mp3" preload="auto" autoplay loop></audio>

    <!-- jsmediatags 库用于提取音频封面 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>

    <!-- Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script>

    <!-- 页脚 -->
    <footer class="footer">
        <p>&copy; 2024 mspaint. All rights reserved.</p>
        <div class="footer-links">
            <a href="#">Terms</a>
            <a href="#">Privacy</a>
            <a href="#">Contact</a>
        </div>
    </footer>

    <script src="auth.js"></script>
    <script src="script.js"></script>
    
    <script>
        // 返回顶部功能
        const backToTopBtn = document.getElementById('backToTop');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 500) {
                backToTopBtn.classList.add('show');
            } else {
                backToTopBtn.classList.remove('show');
            }
        });
        
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
        
        // 平滑滚动到锚点
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                const href = this.getAttribute('href');
                if (href !== '#' && href.length > 1) {
                    e.preventDefault();
                    const target = document.querySelector(href);
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                }
            });
        });
        
        // 改进的复制功能
        function copyScript() {
            const scriptCode = document.getElementById('script-code').textContent;
            const copyBtn = document.getElementById('copyBtn');
            const copyText = copyBtn.querySelector('.copy-text');
            
            navigator.clipboard.writeText(scriptCode).then(() => {
                copyText.textContent = '已复制!';
                copyBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
                copyBtn.style.borderColor = '#10b981';
                
                setTimeout(() => {
                    copyText.textContent = '复制';
                    copyBtn.style.background = '';
                    copyBtn.style.borderColor = '';
                }, 2000);
            }).catch(err => {
                console.error('复制失败:', err);
                copyText.textContent = '复制失败';
                setTimeout(() => {
                    copyText.textContent = '复制';
                }, 2000);
            });
        }
        
        // 游戏卡片懒加载
        if ('IntersectionObserver' in window) {
            const gameCards = document.querySelectorAll('.game-card');
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '50px'
            });
            
            gameCards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(30px)';
                card.style.transition = `all 0.6s ease ${index * 0.05}s`;
                observer.observe(card);
            });
        }
        
        // 功能卡片动画
        if ('IntersectionObserver' in window) {
            const featureCards = document.querySelectorAll('.feature-card');
            const featureObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                        featureObserver.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1
            });
            
            featureCards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(30px)';
                card.style.transition = `all 0.6s ease ${index * 0.1}s`;
                featureObserver.observe(card);
            });
        }
    </script>
</body>
</html>
