<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据提取与转换器 - 大学生专用工具</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>数据提取与转换器</h1>
            <p class="subtitle">专为大学生开发的多功能数据处理工具</p>
        </header>

        <div class="tabs">
            <button class="tab-button active" onclick="openTab('pdf-tab')">PDF处理</button>
            <button class="tab-button" onclick="openTab('image-tab')">图片OCR</button>
            <button class="tab-button" onclick="openTab('format-tab')">格式转换</button>
            <button class="tab-button" onclick="openTab('web-tab')">网页抓取</button>
            <button class="tab-button" onclick="openTab('database-tab')">数据库导出</button>
        </div>

        <!-- PDF处理标签页 -->
        <div id="pdf-tab" class="tab-content active">
            <h2>PDF文本/表格提取</h2>
            <div class="upload-area" id="pdf-upload-area">
                <input type="file" id="pdf-file" accept=".pdf" style="display: none;">
                <div class="upload-placeholder" onclick="document.getElementById('pdf-file').click()">
                    <p>点击选择PDF文件或拖拽文件到此处</p>
                    <p class="file-types">支持格式: .pdf</p>
                </div>
            </div>
            <div class="action-buttons">
                <button onclick="processPdf('extract')" class="btn btn-primary">提取文本</button>
                <button onclick="processPdf('to_excel')" class="btn btn-success">导出为Excel</button>
            </div>
            <div id="pdf-result" class="result-area"></div>
        </div>

        <!-- 图片OCR标签页 -->
        <div id="image-tab" class="tab-content">
            <h2>图片文字识别 (OCR)</h2>
            <div class="upload-area" id="image-upload-area">
                <input type="file" id="image-file" accept="image/*" style="display: none;">
                <div class="upload-placeholder" onclick="document.getElementById('image-file').click()">
                    <p>点击选择图片文件或拖拽文件到此处</p>
                    <p class="file-types">支持格式: .jpg, .jpeg, .png, .gif, .bmp</p>
                </div>
            </div>
            <div class="action-buttons">
                <button onclick="processImage('extract')" class="btn btn-primary">识别文字</button>
                <button onclick="processImage('to_excel')" class="btn btn-success">导出为Excel</button>
                <button onclick="processImage('to_text')" class="btn btn-info">导出为文本</button>
            </div>
            <div id="image-result" class="result-area"></div>
        </div>

        <!-- 格式转换标签页 -->
        <div id="format-tab" class="tab-content">
            <h2>文件格式转换</h2>
            <div class="upload-area" id="format-upload-area">
                <input type="file" id="format-file" accept=".xlsx,.xls,.csv,.json" style="display: none;">
                <div class="upload-placeholder" onclick="document.getElementById('format-file').click()">
                    <p>点击选择文件或拖拽文件到此处</p>
                    <p class="file-types">支持格式: .xlsx, .xls, .csv, .json</p>
                </div>
            </div>
            <div class="conversion-options">
                <label>转换为:</label>
                <select id="target-format">
                    <option value="excel">Excel (.xlsx)</option>
                    <option value="csv">CSV (.csv)</option>
                    <option value="json">JSON (.json)</option>
                </select>
                <button onclick="processFormat()" class="btn btn-success">开始转换</button>
            </div>
            <div id="format-result" class="result-area"></div>
        </div>

        <!-- 网页抓取标签页 -->
        <div id="web-tab" class="tab-content">
            <h2>网页数据抓取</h2>
            <div class="input-group">
                <label for="web-url">网页URL:</label>
                <input type="url" id="web-url" placeholder="https://example.com">
            </div>
            <div class="input-group">
                <label for="css-selector">CSS选择器 (可选):</label>
                <input type="text" id="css-selector" placeholder="例如: .content, #main, p">
                <small>留空则抓取整个页面文本</small>
            </div>
            <div class="action-buttons">
                <button onclick="processWeb()" class="btn btn-primary">抓取内容</button>
                <button onclick="processWebToExcel()" class="btn btn-success">导出为Excel</button>
            </div>
            <div id="web-result" class="result-area"></div>
        </div>

        <!-- 数据库导出标签页 -->
        <div id="database-tab" class="tab-content">
            <h2>数据库导出</h2>
            <div class="upload-area" id="db-upload-area">
                <input type="file" id="db-file" accept=".db,.sqlite" style="display: none;">
                <div class="upload-placeholder" onclick="document.getElementById('db-file').click()">
                    <p>点击选择数据库文件或拖拽文件到此处</p>
                    <p class="file-types">支持格式: .db, .sqlite</p>
                </div>
            </div>
            <div class="input-group">
                <label for="table-name">表名 (可选):</label>
                <input type="text" id="table-name" placeholder="留空则导出所有表">
            </div>
            <div class="conversion-options">
                <label>导出为:</label>
                <select id="db-target-format">
                    <option value="excel">Excel (.xlsx)</option>
                    <option value="csv">CSV (.csv)</option>
                    <option value="json">JSON (.json)</option>
                </select>
                <button onclick="processDatabase()" class="btn btn-success">开始导出</button>
            </div>
            <div id="database-result" class="result-area"></div>
        </div>

        <!-- 全局状态显示 -->
        <div id="status-message" class="status-message"></div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>