<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人脸识别应用</title>
    <style>
        /* 基本布局和样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f1f3f5;
            padding: 30px;
            margin: 0;
            box-sizing: border-box;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        h2 {
            margin-top: 30px;
            color: #495057;
        }

        /* 卡片布局 */
        .face-card {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            justify-items: center;
            margin-top: 20px;
        }

        .face-item {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 15px;
            transition: transform 0.2s ease-in-out;
        }

        .face-item:hover {
            transform: scale(1.05);
        }

        .face-item img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        .face-item button {
            padding: 8px 16px;
            border: none;
            background-color: #f44336;
            color: white;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .face-item button:hover {
            background-color: #d32f2f;
        }

        /* 添加人脸表单 */
        form {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 30px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 15px;
        }

        form input, form button {
            padding: 12px;
            border-radius: 6px;
            border: 1px solid #ddd;
            font-size: 16px;
        }

        form button {
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        form button:hover {
            background-color: #0056b3;
        }

        /* 状态消息框 */
        #alert-box {
            padding: 15px;
            background-color: #d4edda;
            color: #155724;
            border-radius: 5px;
            margin-top: 30px;
            display: none;
            font-size: 16px;
        }

        #alert-box.alert-error {
            background-color: #f8d7da;
            color: #721c24;
        }

        /* 媒体查询: 调整在小屏设备（手机）上的显示 */
        @media (max-width: 768px) {
            body {
                padding: 20px;
            }

            .face-card {
                grid-template-columns: 1fr 1fr; /* 在小屏设备上两列显示 */
            }

            .face-item {
                width: 160px; /* 缩小卡片尺寸 */
            }

            form input, form button {
                font-size: 14px;
                padding: 10px;
            }

            h1 {
                font-size: 24px;
            }

            h2 {
                font-size: 20px;
            }
        }

        @media (max-width: 480px) {
            /* 在极小屏幕上调整 */
            .face-card {
                grid-template-columns: 1fr; /* 单列显示 */
            }

            .face-item {
                width: 150px;
            }

            form input, form button {
                padding: 8px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

    <h1>人脸识别应用</h1>

    <h2>已注册的人脸：</h2>

    <!-- 使用卡片式布局展示人脸 -->
    <div class="face-card" id="face-list">
        <!-- 人脸将动态加载到这里 -->
    </div>

    <!-- 状态消息框: 现在放在上传表单上面 -->
    <div id="alert-box"></div>

    <!-- 添加人脸表单 -->
    <form id="add-face-form" enctype="multipart/form-data">
        <input type="text" id="add-name" placeholder="请输入姓名" required>
        <input type="file" id="add-file" accept="image/*" required>
        <button type="submit">添加人脸</button>
    </form>

    <script>
        // 加载所有人脸
        async function loadFaces() {
            try {
                const response = await fetch('/list_faces');
                const data = await response.json();

                const faceList = document.getElementById('face-list');
                faceList.innerHTML = '';  // 清空现有列表

                // 为每个注册的人脸生成卡片项
                data.faces.forEach(face => {
                    const listItem = document.createElement('div');
                    listItem.classList.add('face-item');
                    listItem.innerHTML = `
                        <img src="${face.image}" alt="${face.name}">
                        <h3>${face.name}</h3>
                        <button onclick="deleteFace('${face.name}')">删除</button>
                    `;
                    faceList.appendChild(listItem);
                });
            } catch (error) {
                showAlert('加载人脸时发生错误。');
            }
        }

        // 删除人脸
        async function deleteFace(name) {
            try {
                const response = await fetch('/delete_face', {
                    method: 'POST',
                    body: new URLSearchParams({ name: name })
                });
                const result = await response.json();

                if (result.success) {
                    showAlert(result.success, '/');  // 删除成功后重定向
                } else if (result.error) {
                    showAlert(result.error);  // 显示错误消息
                }
            } catch (error) {
                showAlert('发生了意外错误。');
            }
        }

        // 提交添加人脸表单
        document.getElementById('add-face-form').addEventListener('submit', async function(e) {
            e.preventDefault();

            const name = document.getElementById('add-name').value;
            const file = document.getElementById('add-file').files[0];

            const formData = new FormData();
            formData.append('name', name);
            formData.append('file', file);

            try {
                const response = await fetch('/add_face', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();

                if (result.success) {
                    showAlert(result.success, '/');  // 成功后重定向
                } else if (result.error) {
                    showAlert(result.error);  // 显示错误消息
                }
            } catch (error) {
                showAlert('发生了意外错误。');
            }
        });

        // 显示消息
        function showAlert(message, redirectUrl = null) {
            const alertBox = document.getElementById('alert-box');
            alertBox.innerText = message;

            if (message.includes('成功')) {
                alertBox.classList.add('alert-success');
                alertBox.classList.remove('alert-error');
            } else {
                alertBox.classList.add('alert-error');
                alertBox.classList.remove('alert-success');
            }

            alertBox.style.display = 'block';

            // 如果需要重定向，则等待并执行重定向
            if (redirectUrl) {
                setTimeout(() => {
                    window.location.href = redirectUrl;  // 重定向
                }, 6000);
            } else {
                setTimeout(() => {
                    alertBox.style.display = 'none';
                }, 3000);  // 3秒后隐藏警告框
            }
        }

        // 页面加载时加载所有人脸
        loadFaces();
    </script>

</body>
</html>
