commit f9a06069b11a80aaea936e8f6d63ed12d8b6081e
Author: root <root@local>
Date:   Wed Jun 24 22:20:04 2026 +0800

    @
    首次提交：抖音 Cookie 项目初始化
    
    - Flask 应用主体
    - 项目依赖配置
    - 前端模板
    - .gitignore 配置
    @

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..020cefb
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,35 @@
+# --- Python ---
+__pycache__/
+*.py[cod]
+*.egg-info/
+dist/
+build/
+.eggs/
+*.egg
+
+# --- Virtual environment ---
+venv/
+.venv/
+env/
+
+# --- Environment & Config ---
+.env
+.user.ini
+
+# --- Logs ---
+logs/
+*.log
+
+# --- IDE & Editor ---
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# --- OS ---
+.DS_Store
+Thumbs.db
+
+# --- Static generated files ---
+static/qrcode.png
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..d45beea
--- /dev/null
+++ b/app.py
@@ -0,0 +1,438 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+
+import asyncio
+import base64
+import json
+import os
+import time
+import logging
+import threading
+import random
+from logging.handlers import RotatingFileHandler
+from io import BytesIO
+from PIL import Image
+
+import requests
+from flask import Flask, render_template, request, jsonify, send_file
+from playwright.async_api import async_playwright
+
+# 配置日志
+LOG_DIR = '/www/wwwlogs/douyin_cookie'
+if not os.path.exists(LOG_DIR):
+    os.makedirs(LOG_DIR, exist_ok=True)
+
+handler = RotatingFileHandler(
+    f'{LOG_DIR}/app.log',
+    maxBytes=1024*1024*10,
+    backupCount=5,
+    encoding="utf-8"
+)
+handler.setLevel(logging.INFO)
+formatter = logging.Formatter('%(asctime)s - %(levelname)s - %(message)s')
+handler.setFormatter(formatter)
+
+app = Flask(__name__)
+app.secret_key = os.urandom(24)
+app.logger.addHandler(handler)
+app.logger.setLevel(logging.INFO)
+
+# 静态文件目录
+STATIC_DIR = '/www/wwwroot/douyin_cookie_extractor/static'
+os.makedirs(STATIC_DIR, exist_ok=True)
+
+# 全局状态
+class LoginSession:
+    def __init__(self):
+        self.playwright = None
+        self.browser = None
+        self.context = None
+        self.page = None
+        self.login_page = None
+        self.status = "idle"
+        self.cookies = None
+        self.message = ""
+        self.start_time = 0
+        self.proxy_used = None
+        self.lock = threading.Lock()
+        self.loop = None
+
+login_session = LoginSession()
+
+def run_async_sync(coro):
+    if login_session.loop is None or login_session.loop.is_closed():
+        login_session.loop = asyncio.new_event_loop()
+        asyncio.set_event_loop(login_session.loop)
+    return login_session.loop.run_until_complete(coro)
+
+def get_proxy_from_api(api_url):
+    if not api_url:
+        return None
+    try:
+        resp = requests.get(api_url, timeout=10)
+        resp.raise_for_status()
+        content = resp.text.strip()
+        try:
+            data = resp.json()
+            if "ip" in data and "port" in data:
+                proxy_str = f"{data['ip']}:{data['port']}"
+            else:
+                proxy_str = content
+        except json.JSONDecodeError:
+            proxy_str = content
+        if not proxy_str.startswith(("http://", "https://")):
+            proxy_str = f"http://{proxy_str}"
+        return {"server": proxy_str}
+    except Exception as e:
+        app.logger.error(f"获取代理失败: {e}")
+        return None
+
+async def cleanup_session():
+    try:
+        if login_session.login_page:
+            await login_session.login_page.close()
+        if login_session.page:
+            await login_session.page.close()
+        if login_session.context:
+            await login_session.context.close()
+        if login_session.browser:
+            await login_session.browser.close()
+        if login_session.playwright:
+            await login_session.playwright.stop()
+    except Exception as e:
+        app.logger.warning(f"清理会话异常: {e}")
+    login_session.playwright = None
+    login_session.browser = None
+    login_session.context = None
+    login_session.page = None
+    login_session.login_page = None
+    login_session.status = "idle"
+    login_session.message = ""
+
+async def inject_stealth(context):
+    await context.add_init_script("""
+        Object.defineProperty(navigator, 'webdriver', {get: () => undefined});
+        window.navigator.chrome = { runtime: {} };
+        Object.defineProperty(navigator, 'plugins', { get: () => [] });
+        Object.defineProperty(navigator, 'languages', {get: () => ['zh-CN','zh','en']});
+    """)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/qrcode.png')
+def get_qrcode():
+    qr_path = os.path.join(STATIC_DIR, 'qrcode.png')
+    if os.path.exists(qr_path):
+        return send_file(qr_path, mimetype='image/png')
+    return "二维码未生成，请先点击获取二维码", 404
+
+@app.route('/api/start_qr', methods=['POST'])
+def start_qr():
+    if not login_session.lock.acquire(blocking=False):
+        return jsonify({"status": "error", "message": "已有正在进行的扫码任务，请稍后重试"})
+    try:
+        data = request.get_json() or {}
+        proxy_api = data.get('proxy_api', '').strip()
+        result = run_async_sync(_start_qr(proxy_api))
+        return result
+    finally:
+        login_session.lock.release()
+
+async def _start_qr(proxy_api):
+    await cleanup_session()
+    
+    login_session.status = "loading"
+    login_session.message = "正在启动浏览器..."
+    login_session.proxy_used = proxy_api if proxy_api else "默认IP"
+    
+    try:
+        login_session.playwright = await async_playwright().start()
+        
+        launch_options = {
+            "headless": True,
+            "args": [
+                "--disable-blink-features=AutomationControlled",
+                "--disable-infobars",
+                "--no-sandbox",
+                "--disable-dev-shm-usage",
+                "--disable-gpu",
+                "--font-render-hinting=medium"
+            ]
+        }
+        
+        proxy = get_proxy_from_api(proxy_api) if proxy_api else None
+        if proxy:
+            launch_options["proxy"] = proxy
+            app.logger.info(f"使用代理: {proxy['server']}")
+        else:
+            app.logger.info("使用默认 IP")
+        
+        login_session.browser = await login_session.playwright.chromium.launch(**launch_options)
+        login_session.context = await login_session.browser.new_context(
+            user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36",
+            viewport={"width": 1280, "height": 720},
+            locale="zh-CN",
+            timezone_id="Asia/Shanghai"
+        )
+        await inject_stealth(login_session.context)
+        login_session.page = await login_session.context.new_page()
+
+        async def handle_new_page(new_p):
+            app.logger.info("检测到新开登录页面")
+            login_session.login_page = new_p
+            await new_p.wait_for_load_state("domcontentloaded")
+        login_session.context.on("page", handle_new_page)
+        
+        app.logger.info("访问抖音主页")
+        await login_session.page.goto("https://www.douyin.com/", wait_until="domcontentloaded", timeout=30000)
+        await login_session.page.wait_for_timeout(random.uniform(2000, 4000))
+
+        page_target = login_session.page
+        login_btn = None
+        try:
+            login_btn = await page_target.wait_for_selector(
+                'button:has-text("登录"), a:has-text("登录"), div:has-text("登录")',
+                timeout=8000
+            )
+        except:
+            pass
+        if login_btn:
+            await login_btn.click()
+            app.logger.info("点击登录按钮成功")
+        else:
+            await page_target.evaluate('''()=>{
+                let els = document.querySelectorAll("*");
+                for(let el of els){
+                    if(el.textContent.trim()==="登录" && el.click) {el.click(); return true;}
+                }
+                return false;
+            }''')
+            app.logger.info("JS兜底点击登录")
+        
+        await login_session.page.wait_for_timeout(random.uniform(3000, 5000))
+
+        if login_session.login_page is not None:
+            page_target = login_session.login_page
+            app.logger.info("切换到新登录标签页")
+            await page_target.wait_for_load_state("domcontentloaded")
+            await page_target.wait_for_timeout(2000)
+
+        app.logger.info("等待登录弹窗...")
+        try:
+            await page_target.wait_for_selector(
+                'div[role="dialog"], .auth-modal, .login-box, [class*="login"], [class*="modal"]',
+                timeout=15000
+            )
+        except:
+            pass
+        await page_target.wait_for_timeout(2000)
+
+        # 强制点击“二维码登录”
+        app.logger.info("尝试切换到二维码登录...")
+        for attempt in range(3):
+            try:
+                qr_tab = await page_target.wait_for_selector(
+                    'text=二维码登录, [data-e2e="qrcode-tab"], div:has-text("二维码登录")',
+                    timeout=5000
+                )
+                if qr_tab:
+                    await qr_tab.click()
+                    app.logger.info(f"✅ 点击二维码登录选项卡 (第{attempt+1}次)")
+                    await page_target.wait_for_timeout(3000)
+                    break
+            except Exception as e:
+                app.logger.warning(f"点击二维码登录失败 {attempt+1}: {e}")
+                try:
+                    await page_target.evaluate('''()=>{
+                        let els = document.querySelectorAll("*");
+                        for(let el of els){
+                            if(el.textContent && el.textContent.includes("二维码登录") && el.click){
+                                el.click();
+                                return true;
+                            }
+                        }
+                        return false;
+                    }''')
+                    app.logger.info("JS点击二维码登录")
+                    await page_target.wait_for_timeout(3000)
+                    break
+                except:
+                    pass
+            await page_target.wait_for_timeout(2000)
+
+        app.logger.info("开始查找二维码...")
+        qr_img = None
+        max_wait = 60
+        start_time = time.time()
+
+        qr_selectors = [
+            'div[role="dialog"] img[src*="qrcode"]',
+            'div[role="dialog"] img[src*="passport"]',
+            '.auth-modal img[src*="qrcode"]',
+            '.login-box img[src*="qrcode"]',
+            'img[src*="qrcode"]',
+            'img[src*="passport"]',
+            'img[alt*="二维码"]',
+            'img[class*="qrcode"]',
+            '.qrcode-box img',
+            '.login-qrcode-image img',
+            'div[data-e2e="qrcode"] img',
+            'div[class*="qr"] img',
+            'canvas[class*="qrcode"]',
+            'svg[class*="qrcode"]'
+        ]
+
+        while time.time() - start_time < max_wait:
+            await page_target.wait_for_load_state("domcontentloaded")
+            for sel in qr_selectors:
+                try:
+                    elem = await page_target.query_selector(sel)
+                    if elem:
+                        if 'img' in sel:
+                            src = await elem.get_attribute('src')
+                            if src and len(src) > 10:
+                                qr_img = elem
+                                app.logger.info(f"✅ 找到二维码: {sel}")
+                                break
+                        else:
+                            qr_img = elem
+                            app.logger.info(f"✅ 找到二维码: {sel}")
+                            break
+                except:
+                    continue
+            if qr_img:
+                break
+            await page_target.wait_for_timeout(1000)
+            if int(time.time() - start_time) % 5 == 0:
+                app.logger.info(f"等待二维码... {int(time.time() - start_time)}s")
+
+        # ---------- 核心改动：全屏截图 ----------
+        if qr_img:
+            try:
+                await qr_img.wait_for_element_state("visible", timeout=5000)
+            except:
+                pass
+            
+            # 优先截取登录弹窗，没有则全屏截图
+            try:
+                dialog = await page_target.query_selector('div[role="dialog"], .auth-modal, .login-box, [class*="modal"]')
+                if dialog:
+                    img_bytes = await dialog.screenshot()
+                    app.logger.info("✅ 截取登录弹窗区域")
+                else:
+                    img_bytes = await page_target.screenshot(full_page=True)
+                    app.logger.info("✅ 全屏截图")
+            except Exception as e:
+                app.logger.warning(f"区域截图失败，使用全屏截图: {e}")
+                img_bytes = await page_target.screenshot(full_page=True)
+            # -------------------------------------
+            
+            # 保存到static
+            qr_file_path = os.path.join(STATIC_DIR, 'qrcode.png')
+            with open(qr_file_path, 'wb') as f:
+                f.write(img_bytes)
+            app.logger.info(f"二维码截图已保存至 {qr_file_path}")
+            
+            img_base64 = base64.b64encode(img_bytes).decode('utf-8')
+            login_session.status = "qr_ready"
+            login_session.message = "请使用抖音 App 扫码"
+            login_session.start_time = time.time()
+            return jsonify({
+                "status": "qr_ready",
+                "qr_image": f"data:image/png;base64,{img_base64}",
+                "proxy_used": login_session.proxy_used,
+                "qr_download": "/qrcode.png"
+            })
+        else:
+            app.logger.error(f"{max_wait}秒未检测到二维码，返回全屏截图")
+            img_bytes = await page_target.screenshot(full_page=True)
+            img_base64 = base64.b64encode(img_bytes).decode('utf-8')
+            login_session.status = "qr_ready"
+            login_session.message = "未检测到二维码，全屏截图请查看"
+            login_session.start_time = time.time()
+            return jsonify({
+                "status": "qr_ready",
+                "qr_image": f"data:image/png;base64,{img_base64}",
+                "proxy_used": login_session.proxy_used
+            })
+
+    except Exception as e:
+        app.logger.error(f"启动扫码失败: {e}", exc_info=True)
+        login_session.status = "error"
+        login_session.message = str(e)
+        await cleanup_session()
+        return jsonify({"status": "error", "message": str(e)})
+
+@app.route('/api/check_login', methods=['GET'])
+def check_login():
+    if login_session.status in ["idle", "loading"]:
+        return jsonify({"status": login_session.status, "message": login_session.message})
+    
+    if login_session.status == "error":
+        return jsonify({"status": "error", "message": login_session.message})
+    
+    if time.time() - login_session.start_time > 300:
+        run_async_sync(cleanup_session())
+        return jsonify({"status": "error", "message": "登录超时，请重新发起扫码"})
+    
+    try:
+        if not login_session.context:
+            run_async_sync(cleanup_session())
+            return jsonify({"status": "error", "message": "会话已失效"})
+        
+        cookies = run_async_sync(login_session.context.cookies())
+        app.logger.info(f"当前Cookie数量: {len(cookies)}")
+        
+        cookie_names = [c['name'] for c in cookies]
+        need_keys = {"sessionid_ss", "sessionid", "sid_guard", "uid_tt"}
+        has_valid = any(k in cookie_names for k in need_keys)
+        
+        if has_valid:
+            login_session.cookies = cookies
+            login_session.status = "success"
+            login_session.message = "登录成功"
+            app.logger.info(f"✅ 登录成功，获取有效Cookie {len(cookies)}个")
+            run_async_sync(cleanup_session())
+            return jsonify({
+                "status": "success",
+                "cookies": cookies,
+                "message": "Cookie 提取成功"
+            })
+        else:
+            return jsonify({"status": "scanning", "message": "等待手机抖音确认登录..."})
+            
+    except Exception as e:
+        app.logger.error(f"检查登录异常: {e}", exc_info=True)
+        return jsonify({"status": "error", "message": str(e)})
+
+@app.route('/api/test_proxy', methods=['POST'])
+def test_proxy():
+    data = request.get_json()
+    proxy_api = data.get('proxy_api', '').strip()
+    if not proxy_api:
+        return jsonify({"status": "error", "message": "请提供代理 API"})
+    try:
+        proxy = get_proxy_from_api(proxy_api)
+        if not proxy:
+            return jsonify({"status": "error", "message": "获取代理失败"})
+        proxies = {
+            'http': proxy['server'],
+            'https': proxy['server']
+        }
+        resp = requests.get('http://httpbin.org/ip', proxies=proxies, timeout=10)
+        if resp.status_code == 200:
+            data = resp.json()
+            return jsonify({
+                "status": "success",
+                "ip": data.get('origin', 'unknown'),
+                "message": "代理可用"
+            })
+        else:
+            return jsonify({"status": "error", "message": f"代理响应异常: {resp.status_code}"})
+    except Exception as e:
+        return jsonify({"status": "error", "message": str(e)})
+
+if __name__ == '__main__':
+    app.run(debug=False, host='0.0.0.0', port=5001)
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..0bbf3d9
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,6 @@
+Flask==2.3.3
+playwright==1.40.0
+playwright-stealth==1.0.6
+requests==2.31.0
+gunicorn==21.2.0
+eventlet==0.33.3
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..894cb83
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,1082 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>抖音 Cookie 扫码提取器</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+    <style>
+        :root {
+            --bg: #0f172a;
+            --card-bg: #1e293b;
+            --input-bg: #0f172a;
+            --text: #e2e8f0;
+            --text-secondary: #94a3b8;
+            --accent: #818cf8;
+            --accent-hover: #6366f1;
+            --accent-glow: rgba(129, 140, 248, 0.3);
+            --success: #34d399;
+            --error: #fb7185;
+            --warning: #facc15;
+            --radius: 16px;
+            --shadow: 0 20px 40px rgba(0,0,0,0.4);
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            padding: 20px;
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle at 30% 50%, rgba(129, 140, 248, 0.05) 0%, transparent 50%),
+                        radial-gradient(circle at 70% 80%, rgba(192, 132, 252, 0.05) 0%, transparent 50%);
+            animation: rotateBg 30s linear infinite;
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        @keyframes rotateBg {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .container {
+            width: 100%;
+            max-width: 720px;
+            position: relative;
+            z-index: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .card {
+            background: var(--card-bg);
+            border-radius: var(--radius);
+            padding: 28px;
+            box-shadow: var(--shadow);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.06);
+            transition: var(--transition);
+        }
+
+        .card:hover {
+            border-color: rgba(255,255,255,0.12);
+            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
+        }
+
+        /* 状态显示区 */
+        .status-panel {
+            background: rgba(0,0,0,0.3);
+            border-radius: 12px;
+            padding: 14px 18px;
+            margin-bottom: 16px;
+            border: 1px solid rgba(255,255,255,0.06);
+        }
+
+        .status-panel .status-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+
+        .status-panel .status-label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .status-panel .status-label .dot {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+
+        .dot.idle { background: var(--text-secondary); animation: none; }
+        .dot.loading { background: var(--warning); }
+        .dot.scanning { background: #38bdf8; }
+        .dot.ready { background: var(--success); }
+        .dot.error { background: var(--error); animation: none; }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 0.4; transform: scale(0.8); }
+            50% { opacity: 1; transform: scale(1.2); }
+        }
+
+        .status-panel .status-text {
+            font-size: 0.95rem;
+            color: var(--text);
+            font-weight: 500;
+            word-break: break-all;
+            min-height: 1.5em;
+        }
+
+        .status-panel .status-time {
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+            margin-top: 4px;
+        }
+
+        /* 进度条 */
+        .progress-bar {
+            width: 100%;
+            height: 4px;
+            background: rgba(255,255,255,0.06);
+            border-radius: 4px;
+            overflow: hidden;
+            margin-top: 10px;
+            display: none;
+        }
+
+        .progress-bar .progress-fill {
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg, var(--accent), var(--success));
+            border-radius: 4px;
+            transition: width 0.5s ease;
+        }
+
+        .progress-bar.active { display: block; }
+
+        /* 统计面板 */
+        .stats-float {
+            background: var(--card-bg);
+            border-radius: var(--radius);
+            padding: 16px 24px;
+            border: 1px solid rgba(255,255,255,0.06);
+            backdrop-filter: blur(10px);
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            box-shadow: var(--shadow);
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stats-float::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, var(--accent), transparent);
+            animation: shimmer 3s infinite;
+        }
+
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .stat-item {
+            text-align: center;
+            flex: 1;
+            padding: 4px 0;
+            position: relative;
+        }
+
+        .stat-item:not(:last-child)::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 20%;
+            height: 60%;
+            width: 1px;
+            background: rgba(255,255,255,0.06);
+        }
+
+        .stat-number {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #c084fc, #818cf8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            line-height: 1.2;
+        }
+
+        .stat-label {
+            font-size: 0.7rem;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-top: 2px;
+        }
+
+        .stat-item .stat-icon {
+            font-size: 1.1rem;
+            margin-right: 6px;
+            -webkit-text-fill-color: initial;
+            color: var(--accent);
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            margin-bottom: 16px;
+        }
+
+        .header-icon {
+            width: 48px;
+            height: 48px;
+            background: linear-gradient(135deg, rgba(192, 132, 252, 0.2), rgba(129, 140, 248, 0.2));
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.6rem;
+            flex-shrink: 0;
+            border: 1px solid rgba(255,255,255,0.06);
+        }
+
+        h1 {
+            font-size: 1.6rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #c084fc, #818cf8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            line-height: 1.2;
+        }
+
+        .subtitle {
+            color: var(--text-secondary);
+            font-size: 0.85rem;
+            margin-top: 2px;
+        }
+
+        .main-layout {
+            display: flex;
+            gap: 16px;
+            align-items: stretch;
+        }
+
+        .left-panel {
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .right-panel {
+            flex: 1;
+            min-width: 200px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .btn {
+            padding: 12px 20px;
+            border-radius: 12px;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-size: 0.95rem;
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #818cf8, #6366f1);
+            color: white;
+            box-shadow: 0 4px 15px rgba(129, 140, 248, 0.3);
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(129, 140, 248, 0.4);
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none !important;
+        }
+
+        .btn-danger {
+            background: linear-gradient(135deg, #fb7185, #e11d48);
+            color: white;
+            box-shadow: 0 4px 15px rgba(251, 113, 133, 0.3);
+        }
+
+        .btn-danger:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(251, 113, 133, 0.4);
+        }
+
+        .btn-success {
+            background: linear-gradient(135deg, #34d399, #10b981);
+            color: white;
+            box-shadow: 0 4px 15px rgba(52, 211, 153, 0.3);
+        }
+
+        .btn-success:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(52, 211, 153, 0.4);
+        }
+
+        .input-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .input-group label {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .input-group input {
+            padding: 10px 14px;
+            background: var(--input-bg);
+            border: 1px solid rgba(255,255,255,0.08);
+            border-radius: 10px;
+            color: var(--text);
+            font-size: 0.9rem;
+            outline: none;
+            transition: var(--transition);
+            width: 100%;
+        }
+
+        .input-group input:focus {
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px var(--accent-glow);
+        }
+
+        .input-group input::placeholder {
+            color: var(--text-secondary);
+            font-size: 0.8rem;
+        }
+
+        .input-group .proxy-status {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            padding: 4px 8px;
+            border-radius: 6px;
+            background: rgba(255,255,255,0.03);
+        }
+
+        .input-group .proxy-status.active {
+            color: var(--success);
+            background: rgba(52, 211, 153, 0.1);
+        }
+
+        .qr-container {
+            text-align: center;
+            padding: 16px;
+            background: rgba(0,0,0,0.2);
+            border-radius: 12px;
+            border: 1px solid rgba(255,255,255,0.04);
+            margin-top: 4px;
+        }
+
+        .qr-wrapper {
+            position: relative;
+            display: inline-block;
+        }
+
+        .qr-wrapper img {
+            max-width: 220px;
+            border-radius: 12px;
+            border: 2px solid rgba(255,255,255,0.08);
+            padding: 6px;
+            background: white;
+            transition: var(--transition);
+        }
+
+        .qr-wrapper img:hover {
+            transform: scale(1.02);
+        }
+
+        .qr-scan-line {
+            position: absolute;
+            left: 10%;
+            right: 10%;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, var(--accent), transparent);
+            animation: scanLine 2s ease-in-out infinite;
+            opacity: 0.6;
+        }
+
+        @keyframes scanLine {
+            0% { top: 10%; opacity: 0; }
+            50% { opacity: 1; }
+            100% { top: 90%; opacity: 0; }
+        }
+
+        .status-badge {
+            display: inline-block;
+            padding: 5px 16px;
+            border-radius: 50px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            margin-top: 10px;
+            animation: fadeInUp 0.4s ease;
+        }
+
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .status-loading { 
+            background: rgba(250,204,21,0.15); 
+            color: #facc15;
+            border: 1px solid rgba(250,204,21,0.2);
+        }
+        .status-scanning { 
+            background: rgba(56,189,248,0.15); 
+            color: #38bdf8;
+            border: 1px solid rgba(56,189,248,0.2);
+        }
+        .status-success { 
+            background: rgba(52,211,153,0.15); 
+            color: #34d399;
+            border: 1px solid rgba(52,211,153,0.2);
+        }
+        .status-error { 
+            background: rgba(251,113,133,0.15); 
+            color: #fb7185;
+            border: 1px solid rgba(251,113,133,0.2);
+        }
+
+        .code-box {
+            background: #0d1117;
+            border-radius: 12px;
+            padding: 14px;
+            position: relative;
+            margin-top: 4px;
+            border: 1px solid rgba(255,255,255,0.05);
+            transition: var(--transition);
+        }
+
+        .code-box:hover {
+            border-color: rgba(255,255,255,0.1);
+        }
+
+        .code-box pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-break: break-all;
+            font-family: 'JetBrains Mono', 'Fira Code', monospace;
+            font-size: 0.75rem;
+            max-height: 200px;
+            overflow-y: auto;
+            color: #c9d1d9;
+            padding-right: 50px;
+        }
+
+        .code-box pre::-webkit-scrollbar {
+            width: 3px;
+        }
+
+        .code-box pre::-webkit-scrollbar-thumb {
+            background: var(--accent);
+            border-radius: 4px;
+        }
+
+        .copy-btn {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.08);
+            border-radius: 6px;
+            padding: 4px 10px;
+            color: #c9d1d9;
+            cursor: pointer;
+            font-size: 0.7rem;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .copy-btn:hover {
+            background: rgba(129, 140, 248, 0.15);
+            border-color: var(--accent);
+            color: var(--accent);
+        }
+
+        .copy-btn.copied {
+            background: rgba(52, 211, 153, 0.15);
+            border-color: var(--success);
+            color: var(--success);
+        }
+
+        .toast {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            background: var(--card-bg);
+            border-left: 4px solid var(--success);
+            padding: 14px 22px;
+            border-radius: 12px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.6);
+            transform: translateX(120%);
+            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 999;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.06);
+            min-width: 200px;
+        }
+
+        .toast.show { transform: translateX(0); }
+        .toast.error { border-left-color: var(--error); }
+
+        .toast-icon {
+            font-size: 1.3rem;
+            flex-shrink: 0;
+        }
+
+        .toast-msg {
+            font-size: 0.9rem;
+            color: var(--text);
+        }
+
+        .hidden { display: none; }
+
+        .btn-group {
+            display: flex;
+            gap: 8px;
+        }
+
+        .btn-group .btn {
+            flex: 1;
+        }
+
+        @media (max-width: 640px) {
+            .main-layout {
+                flex-direction: column;
+            }
+            .right-panel {
+                min-width: unset;
+            }
+            .container { padding: 0; }
+            .card { padding: 20px; }
+            .stats-float { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
+            .stat-item { flex: 1 1 50%; }
+            .stat-item:not(:last-child)::after { display: none; }
+            .stat-number { font-size: 1.2rem; }
+            h1 { font-size: 1.3rem; }
+            .header-icon { width: 40px; height: 40px; font-size: 1.3rem; }
+            .qr-wrapper img { max-width: 150px; }
+            .toast { right: 16px; left: 16px; bottom: 16px; min-width: auto; }
+            .btn { padding: 10px 16px; font-size: 0.85rem; }
+            .btn-group { flex-direction: column; }
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <!-- 浮动统计面板 -->
+    <div class="stats-float" id="statsPanel">
+        <div class="stat-item">
+            <div class="stat-number">
+                <span class="stat-icon">🔄</span>
+                <span id="statTotal">0</span>
+            </div>
+            <div class="stat-label">总提取次数</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-number">
+                <span class="stat-icon">✅</span>
+                <span id="statSuccess">0</span>
+            </div>
+            <div class="stat-label">成功次数</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-number">
+                <span class="stat-icon">⏱️</span>
+                <span id="statAvgTime">0s</span>
+            </div>
+            <div class="stat-label">平均耗时</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-number">
+                <span class="stat-icon">📊</span>
+                <span id="statRate">0%</span>
+            </div>
+            <div class="stat-label">成功率</div>
+        </div>
+    </div>
+
+    <!-- 主卡片 -->
+    <div class="card">
+        <div class="header">
+            <div class="header-icon">🍪</div>
+            <div>
+                <h1>抖音 Cookie 提取器</h1>
+                <div class="subtitle">扫码登录 · 一键提取 JSON 格式 Cookie</div>
+            </div>
+        </div>
+
+        <!-- 状态显示面板 -->
+        <div class="status-panel">
+            <div class="status-header">
+                <div class="status-label">
+                    <span class="dot idle" id="statusDot"></span>
+                    <span id="statusLabel">就绪</span>
+                </div>
+                <span style="font-size:0.7rem;color:var(--text-secondary);" id="statusTime">-</span>
+            </div>
+            <div class="status-text" id="statusText">等待操作...</div>
+            <div class="progress-bar" id="progressBar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+        </div>
+
+        <!-- 左右布局 -->
+        <div class="main-layout">
+            <!-- 左侧：主要操作区 -->
+            <div class="left-panel">
+                <div class="btn-group">
+                    <button class="btn btn-primary" id="startBtn" onclick="startQR()">
+                        <i class="fas fa-qrcode"></i> 获取二维码
+                    </button>
+                    <button class="btn btn-danger" id="resetBtn" onclick="resetSession()" style="flex:0.5;">
+                        <i class="fas fa-undo"></i>
+                    </button>
+                </div>
+
+                <!-- 二维码展示区 -->
+                <div id="qrContainer" class="qr-container hidden">
+                    <div class="qr-wrapper">
+                        <img id="qrImage" src="" alt="抖音登录二维码">
+                        <div class="qr-scan-line" id="scanLine"></div>
+                    </div>
+                    <div id="statusBadge" class="status-badge"></div>
+                    <div style="margin-top:10px;font-size:0.8rem;color:var(--text-secondary);">
+                        <i class="fas fa-download"></i> 
+                        <a href="/qrcode.png" target="_blank" style="color:var(--accent);">下载二维码</a>
+                    </div>
+                </div>
+
+                <!-- Cookie 结果区 -->
+                <div id="resultContainer" class="hidden">
+                    <div class="code-box">
+                        <button class="copy-btn" onclick="copyCookies()">
+                            <i class="fas fa-copy"></i> 复制
+                        </button>
+                        <pre><code id="cookieCode" class="language-json"></code></pre>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 右侧：代理配置 -->
+            <div class="right-panel">
+                <div class="input-group">
+                    <label>
+                        <i class="fas fa-globe"></i> 代理 API
+                        <span style="font-weight:400;color:var(--text-secondary);font-size:0.7rem;">(选填)</span>
+                    </label>
+                    <input type="text" id="proxyApi" placeholder="https://api.example.com/proxy" autocomplete="off">
+                    <div class="proxy-status" id="proxyStatus">
+                        <i class="fas fa-circle" style="font-size:0.5rem;color:var(--text-secondary);"></i>
+                        默认：服务器 IP
+                    </div>
+                </div>
+                <button class="btn btn-success" id="testProxyBtn" onclick="testProxy()" style="font-size:0.85rem;padding:8px 12px;">
+                    <i class="fas fa-plug"></i> 测试代理
+                </button>
+                <div style="font-size:0.7rem;color:var(--text-secondary);text-align:center;padding:4px;">
+                    <i class="fas fa-info-circle"></i> 留空则使用服务器默认 IP
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Toast 通知 -->
+<div id="toast" class="toast">
+    <span class="toast-icon" id="toastIcon">✅</span>
+    <span class="toast-msg" id="toastMsg"></span>
+</div>
+
+<script>
+    let pollingInterval = null;
+    let statusPollingInterval = null;
+    let startTime = null;
+    let isQrReady = false;
+    
+    let stats = {
+        total: parseInt(localStorage.getItem('cookieStats_total') || '0'),
+        success: parseInt(localStorage.getItem('cookieStats_success') || '0'),
+        totalTime: parseInt(localStorage.getItem('cookieStats_totalTime') || '0')
+    };
+
+    const startBtn = document.getElementById('startBtn');
+    const resetBtn = document.getElementById('resetBtn');
+    const proxyInput = document.getElementById('proxyApi');
+    const proxyStatus = document.getElementById('proxyStatus');
+    const qrContainer = document.getElementById('qrContainer');
+    const qrImage = document.getElementById('qrImage');
+    const statusBadge = document.getElementById('statusBadge');
+    const resultContainer = document.getElementById('resultContainer');
+    const cookieCode = document.getElementById('cookieCode');
+    const toast = document.getElementById('toast');
+    const toastMsg = document.getElementById('toastMsg');
+    const toastIcon = document.getElementById('toastIcon');
+    const scanLine = document.getElementById('scanLine');
+    
+    // 状态显示元素
+    const statusDot = document.getElementById('statusDot');
+    const statusLabel = document.getElementById('statusLabel');
+    const statusText = document.getElementById('statusText');
+    const statusTime = document.getElementById('statusTime');
+    const progressBar = document.getElementById('progressBar');
+    const progressFill = document.getElementById('progressFill');
+
+    // ========== 状态更新 ==========
+    function updateStatus(status, message, progress) {
+        // 更新点颜色
+        statusDot.className = 'dot';
+        if (status === 'idle') {
+            statusDot.classList.add('idle');
+            statusLabel.textContent = '就绪';
+            progressBar.classList.remove('active');
+        } else if (status === 'loading') {
+            statusDot.classList.add('loading');
+            statusLabel.textContent = '⏳ 启动中';
+            progressBar.classList.add('active');
+        } else if (status === 'scanning') {
+            statusDot.classList.add('scanning');
+            statusLabel.textContent = '📱 扫码中';
+            progressBar.classList.add('active');
+        } else if (status === 'ready') {
+            statusDot.classList.add('ready');
+            statusLabel.textContent = '✅ 已就绪';
+            progressBar.classList.remove('active');
+        } else if (status === 'error') {
+            statusDot.classList.add('error');
+            statusLabel.textContent = '❌ 错误';
+            progressBar.classList.remove('active');
+        } else if (status === 'success') {
+            statusDot.classList.add('ready');
+            statusLabel.textContent = '🎉 成功';
+            progressBar.classList.remove('active');
+        }
+        
+        statusText.textContent = message || '等待操作...';
+        statusTime.textContent = new Date().toLocaleTimeString();
+        
+        if (progress !== undefined) {
+            progressFill.style.width = Math.min(progress, 100) + '%';
+        }
+    }
+
+    // ========== 轮询后端状态 ==========
+    async function pollStatus() {
+        try {
+            const resp = await fetch('/api/status');
+            const data = await resp.json();
+            
+            if (data.status === 'idle') {
+                updateStatus('idle', data.message || '就绪');
+            } else if (data.status === 'loading') {
+                updateStatus('loading', data.message || '正在启动浏览器...');
+            } else if (data.status === 'scanning') {
+                updateStatus('scanning', data.message || '等待扫码...');
+            } else if (data.status === 'qr_ready') {
+                updateStatus('ready', '✅ 二维码已生成，请扫码');
+            } else if (data.status === 'success') {
+                updateStatus('success', '🎉 登录成功！');
+            } else if (data.status === 'error') {
+                updateStatus('error', '❌ ' + data.message);
+            }
+        } catch (e) {
+            // 忽略轮询错误
+        }
+    }
+
+    // ========== 开始状态轮询 ==========
+    function startStatusPolling() {
+        if (statusPollingInterval) clearInterval(statusPollingInterval);
+        statusPollingInterval = setInterval(pollStatus, 2000);
+        pollStatus(); // 立即执行一次
+    }
+
+    // ========== 重置会话 ==========
+    async function resetSession() {
+        try {
+            const resp = await fetch('/api/reset', { method: 'POST' });
+            const data = await resp.json();
+            showToast(data.message || '已重置');
+            if (pollingInterval) {
+                clearInterval(pollingInterval);
+                pollingInterval = null;
+            }
+            isQrReady = false;
+            qrContainer.classList.add('hidden');
+            resultContainer.classList.add('hidden');
+            startBtn.disabled = false;
+            startBtn.innerHTML = '<i class="fas fa-qrcode"></i> 获取二维码';
+            updateStatus('idle', '已重置，可以重新开始');
+        } catch (e) {
+            showToast('重置失败，请重启服务', true);
+        }
+    }
+
+    // ========== 代理输入监听 ==========
+    proxyInput.addEventListener('input', function() {
+        if (this.value.trim()) {
+            proxyStatus.innerHTML = `<i class="fas fa-circle" style="font-size:0.5rem;color:var(--accent);"></i> 已配置代理`;
+            proxyStatus.className = 'proxy-status active';
+        } else {
+            proxyStatus.innerHTML = `<i class="fas fa-circle" style="font-size:0.5rem;color:var(--text-secondary);"></i> 默认：服务器 IP`;
+            proxyStatus.className = 'proxy-status';
+        }
+    });
+
+    // ========== 测试代理 ==========
+    async function testProxy() {
+        const proxyApi = proxyInput.value.trim();
+        if (!proxyApi) {
+            showToast('请先输入代理 API 地址', true);
+            return;
+        }
+
+        const btn = document.getElementById('testProxyBtn');
+        btn.disabled = true;
+        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 测试中...';
+
+        try {
+            const response = await fetch('/api/test_proxy', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ proxy_api: proxyApi })
+            });
+            const data = await response.json();
+            
+            if (data.status === 'success') {
+                showToast(`✅ 代理测试成功！IP: ${data.ip || '获取成功'}`);
+                proxyStatus.innerHTML = `<i class="fas fa-circle" style="font-size:0.5rem;color:var(--success);"></i> ✅ 代理可用`;
+                proxyStatus.className = 'proxy-status active';
+            } else {
+                showToast(`❌ 代理测试失败: ${data.message}`, true);
+                proxyStatus.innerHTML = `<i class="fas fa-circle" style="font-size:0.5rem;color:var(--error);"></i> ❌ 代理不可用`;
+                proxyStatus.className = 'proxy-status';
+            }
+        } catch (e) {
+            showToast('❌ 网络错误，请检查服务是否运行', true);
+        } finally {
+            btn.disabled = false;
+            btn.innerHTML = '<i class="fas fa-plug"></i> 测试代理';
+        }
+    }
+
+    // ========== 更新统计 ==========
+    function updateStats() {
+        document.getElementById('statTotal').textContent = stats.total;
+        document.getElementById('statSuccess').textContent = stats.success;
+        const avg = stats.success > 0 ? Math.round(stats.totalTime / stats.success) : 0;
+        document.getElementById('statAvgTime').textContent = avg > 0 ? `${avg}s` : '--';
+        const rate = stats.total > 0 ? Math.round((stats.success / stats.total) * 100) : 0;
+        document.getElementById('statRate').textContent = `${rate}%`;
+    }
+
+    function saveStats() {
+        localStorage.setItem('cookieStats_total', stats.total.toString());
+        localStorage.setItem('cookieStats_success', stats.success.toString());
+        localStorage.setItem('cookieStats_totalTime', stats.totalTime.toString());
+    }
+
+    // ========== Toast ==========
+    function showToast(message, isError = false) {
+        toastMsg.textContent = message;
+        toastIcon.textContent = isError ? '❌' : '✅';
+        toast.classList.remove('error');
+        if (isError) toast.classList.add('error');
+        toast.classList.add('show');
+        clearTimeout(toast._timeout);
+        toast._timeout = setTimeout(() => toast.classList.remove('show'), 4000);
+    }
+
+    // ========== 获取二维码 ==========
+    async function startQR() {
+        const proxyApi = proxyInput.value.trim();
+        
+        // 先检查是否已有任务
+        try {
+            const statusResp = await fetch('/api/status');
+            const statusData = await statusResp.json();
+            if (statusData.status === 'loading' || statusData.status === 'scanning') {
+                showToast('⏳ 已有任务正在执行，请等待...', true);
+                return;
+            }
+        } catch (e) {}
+        
+        startBtn.disabled = true;
+        startBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
+        qrContainer.classList.add('hidden');
+        resultContainer.classList.add('hidden');
+        scanLine.style.display = 'block';
+        isQrReady = false;
+        updateStatus('loading', '正在启动浏览器...');
+        startTime = Date.now();
+
+        try {
+            const response = await fetch('/api/start_qr', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ proxy_api: proxyApi })
+            });
+            const data = await response.json();
+            
+            if (data.status === 'qr_ready') {
+                qrImage.src = data.qr_image;
+                qrContainer.classList.remove('hidden');
+                isQrReady = true;
+                updateStatus('ready', '✅ 二维码已生成，请用抖音扫码');
+                startBtn.innerHTML = '<i class="fas fa-qrcode"></i> 获取二维码';
+                startBtn.disabled = false;
+                
+                // 开始轮询登录状态
+                startPolling();
+                stats.total++;
+                updateStats();
+                saveStats();
+                
+                if (proxyApi) {
+                    proxyStatus.innerHTML = `<i class="fas fa-circle" style="font-size:0.5rem;color:var(--success);"></i> ✅ 代理已启用`;
+                    proxyStatus.className = 'proxy-status active';
+                }
+                
+                showToast('✅ 二维码已生成，请扫码登录');
+            } else {
+                updateStatus('error', '❌ ' + (data.message || '获取二维码失败'));
+                startBtn.disabled = false;
+                startBtn.innerHTML = '<i class="fas fa-qrcode"></i> 获取二维码';
+                showToast(data.message || '获取二维码失败', true);
+                scanLine.style.display = 'none';
+            }
+        } catch (e) {
+            console.error('启动错误:', e);
+            updateStatus('error', '❌ 连接服务器失败');
+            startBtn.disabled = false;
+            startBtn.innerHTML = '<i class="fas fa-qrcode"></i> 获取二维码';
+            showToast('⚠️ 无法连接到服务器，请确保服务已启动', true);
+            scanLine.style.display = 'none';
+        }
+    }
+
+    // ========== 轮询登录状态 ==========
+    function startPolling() {
+        if (pollingInterval) clearInterval(pollingInterval);
+        pollingInterval = setInterval(checkLogin, 2000);
+    }
+
+    async function checkLogin() {
+        try {
+            const resp = await fetch('/api/check_login');
+            const data = await resp.json();
+            
+            if (data.status === 'success') {
+                clearInterval(pollingInterval);
+                pollingInterval = null;
+                const elapsed = Math.round((Date.now() - startTime) / 1000);
+                updateStatus('success', `🎉 登录成功！耗时 ${elapsed}s`);
+                displayCookies(data.cookies);
+                showToast(`🎉 Cookie 提取成功！耗时 ${elapsed}s`);
+                startBtn.disabled = false;
+                startBtn.innerHTML = '<i class="fas fa-qrcode"></i> 获取二维码';
+                scanLine.style.display = 'none';
+                isQrReady = false;
+                
+                stats.success++;
+                stats.totalTime += elapsed;
+                updateStats();
+                saveStats();
+            } else if (data.status === 'error') {
+                clearInterval(pollingInterval);
+                pollingInterval = null;
+                updateStatus('error', '❌ ' + data.message);
+                showToast(data.message, true);
+                startBtn.disabled = false;
+                startBtn.innerHTML = '<i class="fas fa-qrcode"></i> 获取二维码';
+                scanLine.style.display = 'none';
+                isQrReady = false;
+            } else if (data.status === 'scanning') {
+                updateStatus('scanning', '⏳ 等待手机确认登录...');
+            }
+        } catch (e) {
+            console.error('轮询错误', e);
+        }
+    }
+
+    // ========== 显示 Cookie ==========
+    function displayCookies(cookies) {
+        const jsonStr = JSON.stringify(cookies, null, 2);
+        cookieCode.textContent = jsonStr;
+        resultContainer.classList.remove('hidden');
+        hljs.highlightElement(cookieCode);
+    }
+
+    // ========== 复制 Cookie ==========
+    function copyCookies() {
+        const text = cookieCode.textContent;
+        const btn = document.querySelector('.copy-btn');
+        navigator.clipboard.writeText(text).then(() => {
+            btn.classList.add('copied');
+            btn.innerHTML = '<i class="fas fa-check"></i> 已复制';
+            showToast('📋 已复制到剪贴板');
+            setTimeout(() => {
+                btn.classList.remove('copied');
+                btn.innerHTML = '<i class="fas fa-copy"></i> 复制';
+            }, 2000);
+        }).catch(() => showToast('复制失败', true));
+    }
+
+    // ========== 页面关闭清理 ==========
+    window.addEventListener('beforeunload', () => {
+        if (pollingInterval) clearInterval(pollingInterval);
+        if (statusPollingInterval) clearInterval(statusPollingInterval);
+    });
+
+    // ========== 初始化 ==========
+    updateStats();
+    updateStatus('idle', '就绪，点击"获取二维码"开始');
+    startStatusPolling();
+</script>
+<script>hljs.highlightAll();</script>
+</body>
+</html>
\ No newline at end of file