front

<!DOCTYPE html>
<html>
<head>
    <title>Painel de controle ESP32</title>
    <!-- ... (mantenha todos os mesmos estilos) ... -->
</head>
<body>
    <div class="container">
        <h1>Controle remoto do ESP32</h1>
        <h2>Controle do LED</h2>

        <div class="led-status">
            Estado atual do LED: <span id="ledState" class="off">DESLIGADO</span>
        </div>

        <form action="/control" method="post">
            <input type="hidden" name="action" value="toggle">
            <button type="submit" class="btn-toggle">Alternar LED</button>
        </form>
    </div>

    <script>
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            fetch('/control', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=toggle'
            })
            .then(response => {
                if (response.ok) {
                    checkStatus(); // Force immediate status check after toggle
                }
            })
            .catch(error => console.error('Erro:', error));
        });

        function checkStatus() {
            fetch('/status')
                .then(response => {
                    if (!response.ok) throw new Error('Resposta inválida');
                    return response.text();
                })
                .then(state => {
                    const stateElement = document.getElementById('ledState');
                    state = state.toLowerCase().trim();

                    if (state === 'on' || state === 'ligado' || state === 'true' || state === '1') {
                        stateElement.textContent = 'LIGADO';
                        stateElement.className = 'on';
                    } else {
                        stateElement.textContent = 'DESLIGADO';
                        stateElement.className = 'off';
                    }
                })
                .catch(error => console.error('Erro ao verificar estado:', error));
        }

        // Verifica o estado a cada 2 segundos
        setInterval(checkStatus, 2000);
        checkStatus(); // Verificação inicial
    </script>
</body>
</html>