<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>云教 ID 查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        form {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin: 0 auto;
        }

        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 15px;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 14px;
            border-radius: 8px;
            overflow: hidden;
        }

        table th,
        table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        table th {
            background-color: #4CAF50;
            color: white;
            font-weight: bold;
        }

        table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        table tr:hover {
            background-color: #e0e0e0;
        }

        /* 新的 CSS 样式用于 tab 切换 */
       .tabs {
            display: flex;
            margin-top: 10px;
        }

       .tab {
            padding: 8px 12px;
            background-color: #ddd;
            cursor: pointer;
            border-radius: 4px 4px 0 0;
            margin-right: 5px;
        }

       .tab.active {
            background-color: #4CAF50;
            color: white;
        }

       .tab-content {
            border: 1px solid #ddd;
            border-top: none;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h3 align="center">云教 ID 查询</h3>
    <div class="tabs">
        <div class="tab active" onclick="showTab('userTab')">用户 ID 查询</div>
        <div class="tab" onclick="showTab('schoolIdTab')">学校 ID 查询</div>
    </div>
    <div id="userTab" class="tab-content">
        <form method="post" action="/parse-data/">
            <label for="AdminToken">AdminToken:</label>
            <input type="text" id="AdminToken" name="AdminToken" size="50" required><br><br>

            <label for="Authorization">Authorization:</label>
            <input type="text" id="Authorization" name="Authorization" size="50" required><br><br>

            <label for="nickName">Nickname:</label>
            <input type="text" id="nickname" name="nickName" size="35" required><br><br>

            <label for="schoolName">School Name:</label>
            <input type="text" id="deptname" name="schoolName" size="35"><span style="font-size:12px;color:#999;">（可留空）</span><br><br>

            <input type="submit" value="Submit">
        </form>
    </div>
    <div id="schoolIdTab" class="tab-content" style="display:none;">
        <form method="post" action="/parse-school-data/">
            <label for="AdminToken">AdminToken:</label>
            <input type="text" id="AdminTokenInput" name="AdminTokenInput" size="50" required><br><br>

            <label for="Authorization">Authorization:</label>
            <input type="text" id="AuthorizationInput" name="AuthorizationInput" size="50" required><br><br>

            <label for="schoolId">School Name:</label>
            <input type="text" id="schoolnameInput" name="schoolnameInput" size="35" required><br><br>

            <input type="submit" value="Submit">
        </form>
    </div>
    {% if result is string %}
        <p style="text-align: center;">{{ result }}</p>
    {% elif result %}
    <table>
        <tr>
            <th>User ID</th>
            <th>Department ID</th>
            <th>User Name</th>
            <th>Nick Name</th>
            <th>School ID</th>
            <th>School Name</th>
        </tr>
        {% for item in result %}
        <tr>
            <td>{{ item.userId }}</td>
            <td>{{ item.deptId }}</td>
            <td>{{ item.userName }}</td>
            <td>{{ item.nickName }}</td>
            <td>{{ item.schoolId }}</td>
            <td>{{ item.schoolName }}</td>
        </tr>
        {% endfor %}
    </table>
    {% endif %}
    {% if schoolIdResult is string %}
        <p style="text-align: center;">{{ schoolIdResult }}</p>
    {% elif schoolIdResult %}
    <table>
        <tr>
            <th>schoolName</th>
            <th>cityStateName</th>
            <th>countyName</th>
            <th>schoolId</th>
            <th>deptId</th>
            <th>schoolArea</th>
            <th>thirdPartyCode</th>
        </tr>
        {% for item in schoolIdResult %}
        <tr>
            <td>{{ item.schoolName }}</td>
            <td>{{ item.cityStateName }}</td>
            <td>{{ item.countyName }}</td>
            <td>{{ item.schoolId }}</td>
            <td>{{ item.deptId }}</td>
            <td>{{ item.schoolArea }}</td>
            <td>{{ item.thirdPartyCode }}</td>
        </tr>
        {% endfor %}
    </table>
    {% endif %}
    <script>
        function showTab(tabId) {
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            const tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(content => content.style.display = 'none');
            document.getElementById(tabId).style.display = 'block';
            document.querySelector(`[onclick="showTab('${tabId}')"]`).classList.add('active');
        }
    </script>
</body>

</html>
上面的html希望能美化界面