comparison 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
comparison
equal deleted inserted replaced
11:6d91c612310a 12:aaf85ae1f942
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 {{ template "head.html" .}}
6 <style>
7 .container {
8 display: flex;
9 align-items: center;
10 gap: 10px;
11 }
12 </style>
13 </head>
14
15 <body>
16 <h1>Hola, soy Pacobot, tu bot de Twitch.</h1>
17 <div class="col">
18 <div class="container">
19 <a href="api/auth"><button id="loginBtn">Login</button></a>
20 <div id="loginOkMsg">{{ if .isLogged}} ✅ Logged in {{ end }}</div>
21 </div>
22 <div class="container">
23 <button id="connectBtn">Connect</button>
24 <div id="connectOkMsg" hidden>✅ Connected</div>
25 <div id="connectErrorMsg" hidden>❌ Connection failed</div>
26 </div>
27 </div>
28 </body>
29
30 <script lang="js">
31 const connectBtn = document.getElementById('connectBtn');
32 const connectOkMsg = document.getElementById("connectOkMsg")
33 const connectErrorMsg = document.getElementById("connectErrorMsg")
34
35 connectBtn.addEventListener('click', async () => {
36 try {
37 const response = await fetch('/api/connect');
38
39 if (!response.ok) {
40 throw new Error(`HTTP error! Status: ${response.status}`);
41 }
42
43 connectOkMsg.hidden = false;
44 connectErrorMsg.hidden = true;
45 } catch (error) {
46 console.error('Login failed:', error);
47 connectOkMsg.hidden = true;
48 connectErrorMsg.hidden = false;
49 }
50 });
51 </script>
52
53 </html>