front end pra várias placas

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painel de Controle dos ESP32</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f0f2f5; margin: 0; padding: 2rem; }
        h1 { color: #1c1e21; text-align: center; }
        #device-container { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
        .device-card { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 1.5rem; width: 340px; text-align: center; }
        .device-card h3 { margin-top: 0; font-size: 1.1rem; color: #050505; word-wrap: break-word; }
        .device-card img { width: 320px; height: 240px; border-radius: 8px; background-color: #e4e6eb; object-fit: cover; }
        .device-card button { margin-top: 1rem; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; color: white; transition: background-color 0.3s; width: 100%; }
        .flash-on { background-color: #f5b400; }
        .flash-off { background-color: #38a169; }
        #loading-message { text-align: center; font-size: 1.2rem; color: #65676b; }
    </style>
</head>
<body>

    <h1>Painel de Controle dos ESP32</h1>
    <div id="device-container">
        <p id="loading-message">Carregando dispositivos...</p>
    </div>

    <script>
        const deviceContainer = document.getElementById('device-container');
        const loadingMessage = document.getElementById('loading-message');
        const managedDevices = {};

        async function fetchDevices() {
            try {
                // Confirma que a busca é no endpoint correto '/devices'
                const response = await fetch('/devices');
                if (!response.ok) {
                    loadingMessage.textContent = "Erro ao buscar dispositivos do servidor.";
                    return;
                }

                const deviceIds = await response.json();

                if (deviceIds.length > 0) {
                    loadingMessage.style.display = 'none';
                } else {
                    loadingMessage.textContent = "Nenhuma placa registrada. Ligue um ESP32 e aguarde.";
                }

                for (const id of deviceIds) {
                    if (!managedDevices[id]) {
                        createDeviceCard(id);
                        managedDevices[id] = {
                            imageInterval: setInterval(() => refreshImage(id), 5000)
                        };
                        refreshImage(id);
                        updateFlashButton(id);
                    }
                }

            } catch (error) {
                console.error("Erro ao buscar dispositivos:", error);
                loadingMessage.textContent = "Erro de conexão ao servidor.";
            }
        }

        function createDeviceCard(id) {
            const card = document.createElement('div');
            card.className = 'device-card';
            card.id = `device-${id}`;

            card.innerHTML = `
                <h3>Dispositivo ID: ${id}</h3>
                <img id="img-${id}" alt="Aguardando foto..." src="">
                <button id="btn-${id}">Carregando...</button>
            `;

            deviceContainer.appendChild(card);

            const flashButton = document.getElementById(`btn-${id}`);
            flashButton.addEventListener('click', () => toggleFlash(id));
        }

        function refreshImage(id) {
            const imgElement = document.getElementById(`img-${id}`);
            if (imgElement) {
                imgElement.src = `/latest-photo/${id}?t=${new Date().getTime()}`;
            }
        }

        async function updateFlashButton(id) {
            const button = document.getElementById(`btn-${id}`);
            if (!button) return;

            try {
                const response = await fetch(`/command/${id}`);
                const state = await response.text();

                if (state === 'FLASH_ON') {
                    button.textContent = 'Desligar Flash';
                    button.className = 'flash-on';
                } else {
                    button.textContent = 'Ligar Flash';
                    button.className = 'flash-off';
                }
            } catch (e) {
                button.textContent = 'Erro de estado';
            }
        }

        async function toggleFlash(id) {
            const button = document.getElementById(`btn-${id}`);
            const isCurrentlyOn = button.classList.contains('flash-on');
            const newCommand = isCurrentlyOn ? 'FLASH_OFF' : 'FLASH_ON';

            try {
                await fetch(`/command/${id}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ command: newCommand })
                });
                updateFlashButton(id);
            } catch (e) {
                console.error(`Erro ao enviar comando para ${id}:`, e);
            }
        }

        // Inicia a aplicação
        fetchDevices();
        setInterval(fetchDevices, 10000);
    </script>

</body>
</html>