Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

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

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +14 -20
templates/index.html CHANGED
@@ -15,15 +15,16 @@
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">
@@ -31,41 +32,34 @@
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>
 
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; white-space: nowrap; }
19
+ tbody tr:first-child { animation: fadeIn 0.5s ease-out; }
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; width: 100%; white-space: normal; text-align: left;}
26
  .status-bar { font-size: 12px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; }
27
+ @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); } to { background-color: transparent; } }
28
  </style>
29
  </head>
30
  <body hx-ext="sse" sse-connect="/api/signals/stream">
 
32
  <header>
33
  <h1>Sentinel Arbitrage Engine</h1>
34
  </header>
 
35
  <div class="status-bar">
36
+ Engine Status: <span style="color: #34D399;">ONLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span>
37
  </div>
 
38
  <article>
39
  <table>
40
  <thead>
41
  <tr>
42
  <th>Pair</th>
43
+ <th>Source 1</th>
44
+ <th>Source 2</th>
45
+ <th>Discrepancy</th>
46
  <th>Risk</th>
47
+ <th>Rationale</th>
48
+ <th>Suggested Strategy</th>
 
49
  </tr>
50
  </thead>
51
  <tbody id="opportunities-table">
52
  <!-- New arbitrage opportunities will appear here via SSE -->
53
+ <tr><td colspan="7" style="text-align:center; padding: 2rem; color: #9CA3AF;">Monitoring for On-Chain/Off-Chain price discrepancies...</td></tr>
54
  </tbody>
55
  </table>
56
  </article>
57
  </main>
 
58
  <script>
 
59
  document.body.addEventListener('htmx:sseMessage', function(evt) {
60
+ const placeholder = document.querySelector('#opportunities-table tr:first-child td[colspan="7"]');
61
+ if (placeholder) placeholder.parentElement.remove();
 
 
62
  });
63
+ </html
64
  </body>
65
  </html>