melhor front que atualiza pra vários ESPs

 html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Painel de Controle ESP32</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f1f1f1;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        .esp {
            background: white;
            padding: 10px 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            box-shadow: 0 0 4px rgba(0,0,0,0.1);
        }
        .on {
            color: green;
        }
        .off {
            color: red;
        }
        .btn-toggle {
            padding: 5px 10px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Painel de Controle dos ESP32</h1>
    <div id="esp-list">
        Carregando dispositivos...
    </div>

    <script>
        function carregarDispositivos() {
            fetch("/esp_list")
                .then(res => res.json())
                .then(data => {
                    const container = document.getElementById("esp-list");
                    container.innerHTML = "";

                    data.forEach(device => {
                        const div = document.createElement("div");
                        div.className = "esp";
                        div.innerHTML = `
                            <strong>ID:</strong> ${device.id}<br>
                            <strong>Estado:</strong> <span class="${device.state ? 'on' : 'off'}">${device.state ? 'LIGADO' : 'DESLIGADO'}</span><br>
                            <button class="btn-toggle" onclick="toggleEstado('${device.id}')">Alternar</button>
                        `;
                        container.appendChild(div);
                    });
                });
        }

        function toggleEstado(id) {
            fetch("/control", {
                method: "POST",
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `id=${id}`
            }).then(() => carregarDispositivos());
        }

        // Atualiza a lista de dispositivos a cada 5 segundos
        setInterval(carregarDispositivos, 5000);
        carregarDispositivos();
    </script>
</body>
</html>