<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Tester - 未来科技接口测试工具</title>
    <link rel="stylesheet" href="/static/css/main.css">
    <!-- 使用国内 CDN 加载字体，避免 Google Fonts 超时 -->
    <link href="https://fonts.loli.net/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* 备用字体，防止 CDN 也超时 */
        @font-face {
            font-family: 'JetBrains Mono';
            src: local('JetBrains Mono'), local('Menlo'), local('Monaco'), local('Consolas');
            font-display: swap;
        }
    </style>
</head>
<body>
    <!-- 动态粒子背景 -->
    <canvas id="particles-canvas"></canvas>
    
    <!-- 主容器 -->
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="app-header">
            <div class="logo">
                <span class="logo-icon">⚡</span>
                <span class="logo-text">API Tester</span>
                <span class="logo-badge">Pro</span>
            </div>
            <nav class="header-nav">
                <button class="nav-btn active" data-tab="request">请求</button>
                <button class="nav-btn" data-tab="history">历史</button>
                <button class="nav-btn" data-tab="collections">收藏</button>
                <button class="nav-btn" data-tab="environments">环境</button>
            </nav>
            <div class="header-actions">
                <button class="theme-btn" id="theme-toggle" title="切换主题">🎨</button>
                <button class="voice-btn" id="voice-input" title="语音输入">🎤</button>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="app-main">
            <!-- 请求面板 -->
            <section class="panel request-panel" id="request-panel">
                <!-- URL 输入区 -->
                <div class="url-bar">
                    <select class="method-select" id="method-select">
                        <option value="GET">GET</option>
                        <option value="POST">POST</option>
                        <option value="PUT">PUT</option>
                        <option value="DELETE">DELETE</option>
                        <option value="PATCH">PATCH</option>
                        <option value="HEAD">HEAD</option>
                        <option value="OPTIONS">OPTIONS</option>
                    </select>
                    <input type="text" class="url-input" id="url-input" 
                           placeholder="输入请求 URL，例如: https://api.example.com/users">
                    <button class="send-btn" id="send-btn">
                        <span class="btn-text">发送</span>
                        <span class="btn-icon">→</span>
                    </button>
                </div>

                <!-- 请求配置标签页 -->
                <div class="request-tabs">
                    <button class="tab-btn active" data-tab="params">Params</button>
                    <button class="tab-btn" data-tab="headers">Headers</button>
                    <button class="tab-btn" data-tab="body">Body</button>
                    <button class="tab-btn" data-tab="auth">Auth</button>
                </div>

                <!-- 请求配置内容 -->
                <div class="request-content">
                    <!-- Params 面板 -->
                    <div class="tab-content active" id="params-content">
                        <div class="kv-editor" id="params-editor">
                            <div class="kv-row">
                                <input type="text" class="kv-key" placeholder="Key">
                                <input type="text" class="kv-value" placeholder="Value">
                                <button class="kv-remove">×</button>
                            </div>
                        </div>
                        <button class="add-row-btn" data-target="params-editor">+ 添加参数</button>
                    </div>

                    <!-- Headers 面板 -->
                    <div class="tab-content" id="headers-content">
                        <div class="kv-editor" id="headers-editor">
                            <div class="kv-row">
                                <input type="text" class="kv-key" placeholder="Header Name">
                                <input type="text" class="kv-value" placeholder="Header Value">
                                <button class="kv-remove">×</button>
                            </div>
                        </div>
                        <button class="add-row-btn" data-target="headers-editor">+ 添加请求头</button>

                        <!-- 常用请求头预设 -->
                        <div class="header-presets-container">
                            <div class="preset-group">
                                <span class="preset-label">Content-Type:</span>
                                <button class="preset-btn" data-key="Content-Type" data-value="application/json">JSON</button>
                                <button class="preset-btn" data-key="Content-Type" data-value="application/x-www-form-urlencoded">Form</button>
                                <button class="preset-btn" data-key="Content-Type" data-value="multipart/form-data">Multipart</button>
                                <button class="preset-btn" data-key="Content-Type" data-value="text/plain">Text</button>
                                <button class="preset-btn" data-key="Content-Type" data-value="application/xml">XML</button>
                            </div>
                            <div class="preset-group">
                                <span class="preset-label">Accept:</span>
                                <button class="preset-btn" data-key="Accept" data-value="application/json">JSON</button>
                                <button class="preset-btn" data-key="Accept" data-value="*/*">Any</button>
                                <button class="preset-btn" data-key="Accept" data-value="text/html">HTML</button>
                            </div>
                            <div class="preset-group">
                                <span class="preset-label">鉴权:</span>
                                <button class="preset-btn auth-preset" data-key="Authorization" data-value="Bearer ">Bearer Token</button>
                                <button class="preset-btn auth-preset" data-key="Authorization" data-value="Basic ">Basic Auth</button>
                                <button class="preset-btn" data-key="X-API-Key" data-value="">API Key</button>
                                <button class="preset-btn" data-key="X-Access-Token" data-value="">Access Token</button>
                            </div>
                            <div class="preset-group">
                                <span class="preset-label">其他常用:</span>
                                <button class="preset-btn" data-key="User-Agent" data-value="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36">User-Agent</button>
                                <button class="preset-btn" data-key="Cache-Control" data-value="no-cache">No Cache</button>
                                <button class="preset-btn" data-key="Origin" data-value="">Origin</button>
                                <button class="preset-btn" data-key="Referer" data-value="">Referer</button>
                                <button class="preset-btn" data-key="Cookie" data-value="">Cookie</button>
                                <button class="preset-btn" data-key="X-Requested-With" data-value="XMLHttpRequest">AJAX</button>
                            </div>
                        </div>
                    </div>

                    <!-- Body 面板 -->
                    <div class="tab-content" id="body-content">
                        <div class="body-type-selector">
                            <label><input type="radio" name="bodyType" value="none" checked> none</label>
                            <label><input type="radio" name="bodyType" value="json"> JSON</label>
                            <label><input type="radio" name="bodyType" value="form"> form-data</label>
                            <label><input type="radio" name="bodyType" value="xml"> XML</label>
                            <label><input type="radio" name="bodyType" value="raw"> raw</label>
                        </div>
                        <div class="body-editor-container">
                            <textarea class="body-editor" id="body-editor" placeholder="请求体内容..."></textarea>
                            <button class="format-btn" id="format-json-btn" title="格式化 JSON">{ }</button>
                        </div>
                    </div>

                    <!-- Auth 面板 -->
                    <div class="tab-content" id="auth-content">
                        <div class="auth-type-selector">
                            <select id="auth-type">
                                <option value="none">No Auth</option>
                                <option value="bearer">Bearer Token</option>
                                <option value="basic">Basic Auth</option>
                                <option value="apikey">API Key</option>
                            </select>
                        </div>
                        <div class="auth-config" id="auth-config">
                            <!-- 动态填充认证配置 -->
                        </div>
                    </div>
                </div>
            </section>

            <!-- 响应面板 -->
            <section class="panel response-panel" id="response-panel">
                <div class="response-header">
                    <div class="response-status">
                        <span class="status-code" id="status-code">--</span>
                        <span class="status-text" id="status-text">等待请求</span>
                    </div>
                    <div class="response-meta">
                        <span class="meta-item"><span class="meta-label">耗时:</span> <span id="response-time">--</span></span>
                        <span class="meta-item"><span class="meta-label">大小:</span> <span id="response-size">--</span></span>
                    </div>
                </div>
                <div class="response-tabs">
                    <button class="tab-btn active" data-tab="response-body">Body</button>
                    <button class="tab-btn" data-tab="response-headers">Headers</button>
                </div>
                <div class="response-content">
                    <pre class="response-body" id="response-body"><code>// 响应将显示在这里</code></pre>
                    <pre class="response-headers hidden" id="response-headers-view"><code></code></pre>
                </div>
            </section>
        </main>

        <!-- 历史记录面板 (隐藏) -->
        <section class="panel history-panel hidden" id="history-panel">
            <div class="panel-header">
                <h2>请求历史</h2>
                <div class="panel-actions">
                    <input type="text" class="search-input" id="history-search" placeholder="搜索...">
                    <button class="clear-btn" id="clear-history">清空历史</button>
                </div>
            </div>
            <div class="history-list" id="history-list">
                <!-- 动态填充 -->
            </div>
        </section>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>

