view www/pages/index.html @ 12:aaf85ae1f942

add very simple html template
author Dennis C. M. <dennis@denniscm.com>
date Thu, 20 Mar 2025 11:12:21 +0000
parents
children
line wrap: on
line source

<!DOCTYPE html>
<html lang="en">

<head>
    {{ template "head.html" .}}
    <style>
        .container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    </style>
</head>

<body>
    <h1>Hola, soy Pacobot, tu bot de Twitch.</h1>
    <div class="col">
        <div class="container">
            <a href="api/auth"><button id="loginBtn">Login</button></a>
            <div id="loginOkMsg">{{ if .isLogged}} ✅ Logged in {{ end }}</div>
        </div>
        <div class="container">
            <button id="connectBtn">Connect</button>
            <div id="connectOkMsg" hidden>✅ Connected</div>
            <div id="connectErrorMsg" hidden>❌ Connection failed</div>
        </div>
    </div>
</body>

<script lang="js">
    const connectBtn = document.getElementById('connectBtn');
    const connectOkMsg = document.getElementById("connectOkMsg")
    const connectErrorMsg = document.getElementById("connectErrorMsg")

    connectBtn.addEventListener('click', async () => {
        try {
            const response = await fetch('/api/connect');

            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }

            connectOkMsg.hidden = false;
            connectErrorMsg.hidden = true;
        } catch (error) {
            console.error('Login failed:', error);
            connectOkMsg.hidden = true;
            connectErrorMsg.hidden = false;
        }
    });
</script>

</html>