Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

App Files Community
mgbam commited on
Commit
d9ddbf8
·
verified ·
1 Parent(s): 510ee6f

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +53 -44
templates/index.html CHANGED
@@ -3,60 +3,69 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Sentinel TradeFlow Protocol</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
8
  <script src="https://unpkg.com/[email protected]"></script>
9
  <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
10
  <style>
11
- :root { --pico-font-family: 'Inter', system-ui, sans-serif; }
12
- body { background-color: #111927; color: #E5E7EB; }
13
- .container { max-width: 960px; margin: 2rem auto; }
14
- .header { text-align: center; margin-bottom: 2rem; }
15
- h1 { color: #38BDF8; margin-bottom: 0.25rem; }
16
- p { color: #9CA3AF; margin: 0; }
17
- .price-ticker { display: flex; justify-content: space-around; padding: 0.75rem 1.5rem; font-size: 0.9rem; background-color: #1F2937; border: 1px solid #374151; border-radius: 0.5rem; }
18
- .stream-article { margin-top: 1.5rem; background-color: transparent; border: none; }
19
- .stream-article > header { padding: 0 0 1rem 0; font-weight: bold; border: none; }
20
- .status { text-align: right; color: #9CA3AF; }
21
- .status-online { color: #34D399; font-weight: bold; }
22
- #signal-container { min-height: 400px; }
23
- .card { background-color: #1F2937; border: 1px solid #374151; border-radius: 0.5rem; border-left-width: 5px; margin-bottom: 1.5rem; }
24
- .card:first-child { animation: fadeIn 0.5s ease-in-out; }
25
- .card-header { display: flex; justify-content: space-between; padding: 0.75rem 1.25rem; background-color: #374151; border-bottom: 1px solid #4b5563; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
26
- blockquote { margin: 0; padding: 1.25rem; border: none; font-size: 1.05rem; }
27
- blockquote a { color: #E5E7EB; text-decoration: none; }
28
- blockquote a:hover { text-decoration: underline; }
29
- .card > footer { padding: 0.75rem 1.25rem; background-color: #374151; font-size: 0.9rem; border-top: 1px solid #4b5563; }
30
- .impact-low { border-left-color: #38BDF8; }
31
- .impact-medium { border-left-color: #FBBF24; }
32
- .impact-high { border-left-color: #F87171; }
33
- .sentiment-positive { color: #34D399; }
34
- .sentiment-negative { color: #F87171; }
35
- @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
36
  </style>
37
  </head>
38
- <body hx-ext="sse">
39
  <main class="container">
40
- <header class="header">
41
- <h1>Sentinel TradeFlow Protocol</h1>
42
- <p>Autonomous Low-Latency Signal Generation</p>
43
  </header>
44
 
45
- <section class="price-ticker" hx-get="/api/prices" hx-trigger="load, every 30s" hx-swap="innerHTML">
46
- <span aria-busy="true"></span>
47
- </section>
48
-
49
- <article class="stream-article">
50
- <header class="grid">
51
- <div><strong>Live Signal Stream</strong></div>
52
- <div class="status" id="signal-status">
53
- Status: <span class="status-online">ONLINE</span> (Last Signal: <span id="last-signal-time">never</span>)
54
- </div>
55
- </header>
56
- <div id="signal-container" sse-connect="/api/signals/stream" hx-swap="afterbegin">
57
- <!-- System boot sequence... please wait -->
58
- </div>
 
 
 
 
 
 
 
 
 
59
  </article>
60
  </main>
 
 
 
 
 
 
 
 
 
 
61
  </body>
62
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sentinel Arbitrage Engine</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
8
  <script src="https://unpkg.com/[email protected]"></script>
9
  <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
10
  <style>
11
+ :root { --pico-font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }
12
+ body { background-color: #111927; font-size: 14px; }
13
+ .container { max-width: 1280px; margin: 1rem auto; }
14
+ header { text-align: center; margin-bottom: 1.5rem; }
15
+ h1 { color: #38BDF8; margin-bottom: 0; }
16
+ table { width: 100%; border-collapse: separate; border-spacing: 0; }
17
+ th { background-color: #374151; }
18
+ td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; }
19
+ tbody tr:hover { background-color: #1f2937; }
20
+ .buy { color: #34D399; }
21
+ .sell { color: #F87171; }
22
+ .risk-low { color: #34D399; }
23
+ .risk-medium { color: #FBBF24; }
24
+ .risk-high { color: #F87171; }
25
+ .trade-btn { --pico-font-size: 12px; padding: 5px 10px; }
26
+ .status-bar { font-size: 12px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; }
 
 
 
 
 
 
 
 
 
27
  </style>
28
  </head>
29
+ <body hx-ext="sse" sse-connect="/api/signals/stream">
30
  <main class="container">
31
+ <header>
32
+ <h1>Sentinel Arbitrage Engine</h1>
 
33
  </header>
34
 
35
+ <div class="status-bar">
36
+ Engine Status: <span style="color: #34D399;">ONLINE</span> | Last Update: <span id="last-update-time">--:--:--</span>
37
+ </div>
38
+
39
+ <article>
40
+ <table>
41
+ <thead>
42
+ <tr>
43
+ <th>Pair</th>
44
+ <th>Buy On</th>
45
+ <th>Sell On</th>
46
+ <th>Spread</th>
47
+ <th>Risk</th>
48
+ <th>Strategy</th>
49
+ <th>Est. Profit (1 BTC)</th>
50
+ <th>Action</th>
51
+ </tr>
52
+ </thead>
53
+ <tbody id="opportunities-table">
54
+ <!-- New arbitrage opportunities will appear here via SSE -->
55
+ <tr><td colspan="8" style="text-align:center; padding: 2rem; color: #9CA3AF;">Awaiting arbitrage opportunities...</td></tr>
56
+ </tbody>
57
+ </table>
58
  </article>
59
  </main>
60
+
61
+ <script>
62
+ // On the first message, clear the "Awaiting..." placeholder.
63
+ document.body.addEventListener('htmx:sseMessage', function(evt) {
64
+ const placeholder = document.querySelector('#opportunities-table tr:first-child td[colspan="8"]');
65
+ if (placeholder) {
66
+ placeholder.parentElement.remove();
67
+ }
68
+ });
69
+ </script>
70
  </body>
71
  </html>