<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LLM Proxier Admin - 启动页面</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .container {
            background: white;
            padding: 40px;
            border-radius: 16px;
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
            max-width: 500px;
            width: 100%;
            text-align: center;
        }
        .logo {
            width: 64px;
            height: 64px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo svg {
            width: 40px;
            height: 40px;
            stroke: white;
        }
        h1 {
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 12px;
        }
        .subtitle {
            color: #64748b;
            margin-bottom: 24px;
            font-size: 14px;
        }
        .info-box {
            background: #f1f5f9;
            padding: 16px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: left;
        }
        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
            font-size: 14px;
        }
        .info-item:last-child {
            border-bottom: none;
        }
        .info-label {
            font-weight: 600;
            color: #334155;
        }
        .info-value {
            color: #6366f1;
            font-family: 'Monaco', monospace;
        }
        .credentials {
            background: #e0e7ff;
            padding: 16px;
            border-radius: 8px;
            margin: 16px 0;
            font-size: 14px;
        }
        .credentials strong {
            color: #4f46e5;
        }
        .btn {
            display: inline-block;
            padding: 12px 32px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            margin-top: 20px;
            transition: transform 0.2s ease;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -5px rgb(99 102 241 / 0.4);
        }
        .btn:active {
            transform: translateY(0);
        }
        .note {
            font-size: 12px;
            color: #64748b;
            margin-top: 16px;
            line-height: 1.5;
        }
        .auto-open {
            color: #10b981;
            font-weight: 600;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <defs>
                    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#e0e7ff;stop-opacity:1" />
                    </linearGradient>
                </defs>
                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="url(#grad1)" fill="none"/>
            </svg>
        </div>
        <h1>LLM Proxier Admin</h1>
        <div class="subtitle">管理控制台已准备就绪</div>

        <div class="info-box">
            <div class="info-item">
                <span class="info-label">管理页面</span>
                <span class="info-value" id="adminUrl">/admin</span>
            </div>
            <div class="info-item">
                <span class="info-label">API 端点</span>
                <span class="info-value" id="apiUrl">/api/admin</span>
            </div>
            <div class="info-item">
                <span class="info-label">状态</span>
                <span class="info-value" style="color: #10b981;">✅ 运行中</span>
            </div>
        </div>

        <div class="credentials">
            <strong>默认登录凭证：</strong><br>
            用户名: <code>admin</code><br>
            密码: <code>password</code><br>
            (可在 .env 文件中修改)
        </div>

        <button class="btn" onclick="openAdmin()">打开管理页面</button>

        <div class="note">
            💡 页面将在 3 秒后自动打开<br>
            <span class="auto-open" id="countdown"></span>
        </div>
    </div>

    <script>
        function getAdminUrl() {
            const protocol = window.location.protocol;
            const host = window.location.host;
            return protocol + '//' + host + '/admin';
        }

        function openAdmin() {
            window.location.href = getAdminUrl();
        }

        // Auto-open after 3 seconds
        let countdown = 3;
        const countdownEl = document.getElementById('countdown');

        const timer = setInterval(() => {
            countdown--;
            if (countdown > 0) {
                countdownEl.textContent = countdown + ' 秒后自动跳转...';
            } else {
                clearInterval(timer);
                countdownEl.textContent = '正在跳转...';
                setTimeout(() => {
                    window.location.href = getAdminUrl();
                }, 500);
            }
        }, 1000);

        // Update URLs dynamically
        document.getElementById('adminUrl').textContent = getAdminUrl();
        document.getElementById('apiUrl').textContent = window.location.protocol + '//' + window.location.host + '/api/admin';
    </script>
</body>
</html>
