<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>

    <link rel="icon" type="image/svg+xml" href="/static/icon.svg">
    <link rel="apple-touch-icon" href="/static/icon.svg">

    <script src="/static/js/vendor/tailwindcss.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['DM Sans', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
                        mono: ['JetBrains Mono', 'SF Mono', 'Consolas', 'monospace'],
                    },
                    colors: {
                        surface: {
                            base: '#0b0e14',
                            raised: '#111620',
                            overlay: '#171d2b',
                            muted: '#1e2636',
                        }
                    },
                }
            }
        }
    </script>
    <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=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        @keyframes breathe {
            0%, 100% { opacity: 0.35; transform: scale(1); }
            50% { opacity: 0.1; transform: scale(1.5); }
        }
        @keyframes pulse-ring {
            0% { transform: scale(0.8); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 0.2; }
            100% { transform: scale(0.8); opacity: 0.5; }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
    </style>
</head>
<body class="bg-surface-base text-slate-200 font-sans h-screen flex flex-col items-center justify-center overflow-hidden antialiased">

    <div class="flex flex-col items-center gap-6 text-center px-6">
        <!-- Logo -->
        <div class="w-16 h-16 rounded-[18px] bg-gradient-to-br from-blue-500 to-violet-500 flex items-center justify-center text-[28px] text-white font-extrabold shadow-[0_8px_30px_rgba(59,130,246,0.3)] animate-[float_3s_ease-in-out_infinite]">
            M
        </div>

        <!-- Title -->
        <div>
            <h1 class="text-2xl font-bold text-slate-100 mb-1.5">MCP Feedback Enhanced</h1>
            <p class="text-[15px] text-slate-400">Web UI 交互式反馈收集工具</p>
            <span class="inline-block mt-2 font-mono text-xs text-blue-400 bg-blue-500/[0.12] px-2.5 py-0.5 rounded-full">v{{ version }}</span>
        </div>

        <!-- Status -->
        <div class="flex items-center gap-2.5 mt-4">
            <div class="relative w-[9px] h-[9px]">
                <div class="absolute inset-0 rounded-full bg-amber-400"></div>
                <div class="absolute -inset-[4px] rounded-full bg-amber-400 animate-[pulse-ring_2s_ease-in-out_infinite]"></div>
            </div>
            <span id="statusText" class="text-[14px] font-medium text-amber-400">等待 MCP 服务调用...</span>
        </div>

        <p class="text-xs text-slate-500 max-w-sm leading-relaxed mt-2">
            当 AI 代理调用 <code class="font-mono text-xs text-blue-400 bg-surface-overlay px-1.5 py-0.5 rounded">interactive_feedback</code> 工具时，页面将自动跳转到反馈界面。
        </p>
    </div>

    <script>
        function checkSession() {
            fetch('/api/status')
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.has_session) {
                        location.reload();
                    }
                })
                .catch(function() {});
        }

        setInterval(checkSession, 3000);
    </script>
</body>
</html>
