mgbam commited on
Commit
3bccb62
·
verified ·
1 Parent(s): 6e3a2f9

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +30 -45
templates/index.html CHANGED
@@ -1,53 +1,38 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>CryptoSentinel AI</title>
6
- <script src="/static/htmx.min.js"></script>
7
- <style>
8
- body { font-family: system-ui, sans-serif; margin: 2rem; }
9
- .price { font-size: 2rem; margin: .5rem 0; }
10
- </style>
 
 
 
11
  </head>
12
  <body>
13
- <h1>🛡️ CryptoSentinel AI</h1>
 
 
 
 
14
 
15
- <section id="prices" hx-get="/prices" hx-trigger="load, every 10s" hx-swap="innerHTML">
16
- <!-- Populated by HTMX -->
17
- </section>
 
 
 
 
 
 
 
18
 
19
- <hr>
20
-
21
- <h2>Sentiment Lab</h2>
22
- <input id="text" placeholder="Type something…" style="width:60%">
23
- <button hx-post="/sentiment" hx-vals='js:{"text": document.getElementById("text").value}'
24
- hx-swap="none">Analyze</button>
25
-
26
- <pre id="sentiment-output">Waiting…</pre>
27
-
28
- <script>
29
- // EventSource for live sentiment push
30
- const es = new EventSource("/sentiment/stream");
31
- es.onmessage = e => {
32
- const data = JSON.parse(e.data);
33
- document.getElementById("sentiment-output").textContent =
34
- JSON.stringify(data, null, 2);
35
- };
36
- </script>
37
-
38
- <script>
39
- // Template for price section (client-side rendering)
40
- document.addEventListener("htmx:afterOnLoad", function(evt){
41
- if (evt.detail.path === "/prices"){
42
- const p = evt.detail.xhr.response;
43
- const json = JSON.parse(p);
44
- let html = '';
45
- for (const [k,v] of Object.entries(json)){
46
- html += `<div class="price">${k.toUpperCase()}: $${v}</div>`;
47
- }
48
- evt.detail.elt.innerHTML = html;
49
- }
50
- });
51
- </script>
52
  </body>
53
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <!-- Using a modern, lightweight CSS framework for better styling -->
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
8
+ <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
9
+ <title>Crypto Price Dashboard</title>
10
+ <style>
11
+ body { container-type: inline-size; }
12
+ .error { color: var(--pico-color-red-500); }
13
+ </style>
14
  </head>
15
  <body>
16
+ <main class="container">
17
+ <header>
18
+ <h1>Real-Time Cryptocurrency Prices</h1>
19
+ <p>Prices update automatically every 10 seconds.</p>
20
+ </header>
21
 
22
+ <article>
23
+ <div
24
+ id="prices"
25
+ hx-get="/api/prices"
26
+ hx-trigger="load, every 10s"
27
+ hx-swap="innerHTML">
28
+ <!-- This htmx-indicator will be shown during the request -->
29
+ <p aria-busy="true">Fetching latest prices...</p>
30
+ </div>
31
+ </article>
32
 
33
+ <footer>
34
+ <small>Data sourced from <a href="https://www.coingecko.com/">CoinGecko</a>.</small>
35
+ </footer>
36
+ </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  </body>
38
+ </html>