diff 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 diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/pages/index.html	Thu Mar 20 11:12:21 2025 +0000
@@ -0,0 +1,53 @@
+<!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>
\ No newline at end of file