<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备数管理平台 - 首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .header h1 {
            font-size: 20px;
            color: #1f2937;
        }
        .btn-group {
            display: flex;
            gap: 10px;
        }
        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: opacity 0.3s;
        }
        .btn:hover {
            opacity: 0.9;
        }
        .btn-export {
            background-color: #52c41a;
            color: white;
        }
        .btn-record {
            background-color: #fa8c16;
            color: white;
        }
        .btn-logout {
            background-color: #ff4d4f;
            color: white;
        }
        .btn-capture {
            background-color: #1890ff;
            color: white;
            margin-top: 10px;
            padding: 6px 12px;
            font-size: 13px;
        }

        /* 监控区域样式 */
        .monitor-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .monitor-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #1f2937;
            font-weight: 600;
        }
        .camera-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(640px, 1fr));
            gap: 20px;
        }
        .camera-card {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 15px;
        }
        .camera-name {
            font-size: 16px;
            margin-bottom: 10px;
            color: #4b5563;
            display: flex;
            justify-content: space-between;
        }
        .camera-status {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 12px;
        }
        .status-online {
            background-color: #f0f9ff;
            color: #0ea5e9;
        }
        .status-offline {
            background-color: #fef2f2;
            color: #ef4444;
        }
        .camera-feed {
            width: 100%;
            border-radius: 4px;
            background-color: #f9fafb;
        }

        /* 数据表格样式 */
        .data-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .data-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #1f2937;
            font-weight: 600;
        }
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        .data-table th, .data-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }
        .data-table th {
            background-color: #f9fafb;
            color: #4b5563;
            font-weight: 600;
        }
        .data-table tr:hover {
            background-color: #f9fafb;
        }
        .empty-data {
            text-align: center;
            padding: 30px;
            color: #9ca3af;
            font-size: 14px;
        }

        /* 提示信息样式 */
        .flash-message {
            padding: 12px 15px;
            margin-bottom: 20px;
            border-radius: 6px;
            font-size: 14px;
        }
        .flash-success {
            background-color: #f0f9ff;
            color: #0ea5e9;
            border: 1px solid #bae6fd;
        }
        .flash-error {
            background-color: #fef2f2;
            color: #ef4444;
            border: 1px solid #fecdd3;
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <div class="header">
        <h1>家用设备数据管理平台d</h1>
        <div class="btn-group">
            <a href="/export" class="btn btn-export">📥 导出Excel数据</a>
            <a href="/logout" class="btn btn-logout">🚪 退出登录</a>
        </div>
    </div>

    <!-- 提示信息 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash-message flash-{{ category }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <!-- 实时监控区域 -->
    <div class="monitor-section">
        <h2 class="monitor-title">📹 实时监控画面</h2>
        <div class="camera-grid">
            {% for cam_id, cam in cameras.items() %}
            <div class="camera-card">
                <div class="camera-name">
                    {{ cam.name }}
                    <span class="camera-status status-{{ cam.status }}">{{ cam.status }}</span>
                </div>
                <img src="{{ url_for('video_feed', cam_id=cam_id) }}" class="camera-feed" alt="{{ cam.name }}实时画面">
                <form method="POST" action="{{ url_for('manual_capture', cam_id=cam_id) }}">
                    <button type="submit" class="btn btn-capture">📸 手抓拍</button>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 设备数据表格 -->
    <div class="data-section">
        <h2 class="data-title">📊 设备数据列表</h2>
        {% if data %}
        <table class="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>设备名称</th>
                    <th>记录时间</th>
                    <th>尺寸/规格</th>
                </tr>
            </thead>
            <tbody>
                {% for item in data %}
                <tr>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.create_time }}</td>
                    <td>{{ item.size }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-data">暂无设备数据，请添加数据后查看</div>
        {% endif %}
    </div>
</body>
</html>