search5 0.3.2

search5 - Local File Search Engine
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜尋引擎 - search5</title>
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="max-w-4xl mx-auto px-4 py-16">
        <div class="text-center mb-12">
            <h1 class="text-5xl font-bold text-gray-800 mb-4">🔍 搜尋引擎</h1>
            <p class="text-gray-500 text-lg">search5 - 本地文件搜尋系統</p>
        </div>

        <form action="/search" method="get" class="mb-8">
            <div class="flex gap-2 max-w-2xl mx-auto">
                <input
                    type="text"
                    name="q"
                    placeholder="輸入關鍵字搜尋..."
                    class="flex-1 px-6 py-4 text-lg border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                    required
                >
                <button
                    type="submit"
                    class="px-8 py-4 bg-blue-600 text-white text-lg font-semibold rounded-lg hover:bg-blue-700 transition"
                >
                    搜尋
                </button>
            </div>
        </form>

        {% if stats.indexed > 0 %}
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h2 class="text-xl font-semibold mb-4">📊 索引狀態</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="text-center p-4 bg-blue-50 rounded-lg">
                    <div class="text-3xl font-bold text-blue-600">{{ stats.indexed }}</div>
                    <div class="text-gray-600">已索引文件</div>
                </div>
                <div class="text-center p-4 bg-green-50 rounded-lg">
                    <div class="text-3xl font-bold text-green-600">{{ stats.documents }}</div>
                    <div class="text-gray-600">文件總數</div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mb-6">
            <p class="text-yellow-800">
                ⚠️ 尚未建立索引,請先呼叫 <code>POST /index</code> 建立索引
            </p>
        </div>
        {% endif %}

        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold mb-4">💡 API 使用說明</h2>
            <div class="space-y-4 font-mono text-sm">
                <div class="p-3 bg-gray-100 rounded">
                    <span class="text-green-600">POST</span> /index - 建立索引
                </div>
                <div class="p-3 bg-gray-100 rounded">
                    <span class="text-blue-600">GET</span> /search?q=關鍵字 - 搜尋
                </div>
                <div class="p-3 bg-gray-100 rounded">
                    <span class="text-blue-600">GET</span> /index/status - 索引狀態
                </div>
            </div>
        </div>
    </div>
</body>
</html>