Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

App Files Community
mgbam commited on
Commit
1d7515b
·
verified ·
1 Parent(s): 69513b3

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +110 -25
templates/index.html CHANGED
@@ -4,62 +4,147 @@
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; 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">
 
31
  <main class="container">
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>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Sentinel Arbitrage Engine</title>
7
+
8
+ <!-- Pico.css for a clean, modern base -->
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
10
+
11
+ <!-- HTMX Core and the Server-Sent Events Extension -->
12
  <script src="https://unpkg.com/[email protected]"></script>
13
  <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
14
+
15
  <style>
16
+ :root {
17
+ --pico-font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
18
+ --pico-font-size: 14px;
19
+ --pico-color-green-400: #34D399;
20
+ --pico-color-red-400: #F87171;
21
+ --pico-color-amber-400: #FBBF24;
22
+ }
23
+
24
+ body {
25
+ background-color: #111927;
26
+ }
27
+
28
+ .container {
29
+ max-width: 1280px;
30
+ margin: 1.5rem auto;
31
+ }
32
+
33
+ header {
34
+ text-align: center;
35
+ margin-bottom: 1.5rem;
36
+ }
37
+
38
+ h1 {
39
+ color: #38BDF8;
40
+ margin-bottom: 0;
41
+ font-weight: 600;
42
+ }
43
+
44
+ table {
45
+ width: 100%;
46
+ border-collapse: separate;
47
+ border-spacing: 0;
48
+ }
49
+
50
+ th {
51
+ background-color: #374151;
52
+ text-align: left;
53
+ }
54
+
55
+ td, th {
56
+ padding: 0.75rem 1rem;
57
+ border-bottom: 1px solid #374151;
58
+ white-space: nowrap;
59
+ }
60
+
61
+ tbody tr:hover {
62
+ background-color: #1f2937;
63
+ }
64
+
65
+ tbody tr:first-child {
66
+ /* Animation for newly added rows */
67
+ animation: fadeIn 0.7s ease-out;
68
+ }
69
+
70
+ .buy { color: var(--pico-color-green-400); }
71
+ .sell { color: var(--pico-color-red-400); }
72
+
73
+ .risk-low { color: var(--pico-color-green-400); }
74
+ .risk-medium { color: var(--pico-color-amber-400); }
75
+ .risk-high { color: var(--pico-color-red-400); }
76
+
77
+ .trade-btn {
78
+ --pico-font-size: 12px;
79
+ padding: 5px 10px;
80
+ width: 100%;
81
+ white-space: normal;
82
+ text-align: left;
83
+ background-color: #4b5563;
84
+ border-color: #4b5563;
85
+ }
86
+
87
+ .status-bar {
88
+ font-size: 12px;
89
+ color: #9CA3AF;
90
+ text-align: right;
91
+ margin-bottom: 1rem;
92
+ }
93
+
94
+ @keyframes fadeIn {
95
+ from { background-color: rgba(52, 211, 153, 0.2); }
96
+ to { background-color: transparent; }
97
+ }
98
  </style>
99
  </head>
100
+
101
+ <!-- Initialize the SSE extension for the entire page -->
102
  <body hx-ext="sse" sse-connect="/api/signals/stream">
103
+
104
  <main class="container">
105
  <header>
106
  <h1>Sentinel Arbitrage Engine</h1>
107
  </header>
108
+
109
  <div class="status-bar">
110
  Engine Status: <span style="color: #34D399;">ONLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span>
111
  </div>
112
+
113
  <article>
114
  <table>
115
  <thead>
116
  <tr>
117
  <th>Pair</th>
118
+ <th>CEX Price (Binance)</th>
119
+ <th>DEX Price (Pyth)</th>
120
  <th>Discrepancy</th>
121
+ <th>Risk Assessment</th>
122
  <th>Rationale</th>
123
  <th>Suggested Strategy</th>
124
  </tr>
125
  </thead>
126
  <tbody id="opportunities-table">
127
+ <!-- New arbitrage opportunities will be inserted here by HTMX -->
128
+ <tr id="placeholder-row">
129
+ <td colspan="7" style="text-align:center; padding: 2rem; color: #9CA3AF;">
130
+ Monitoring for On-Chain/Off-Chain price discrepancies...
131
+ </td>
132
+ </tr>
133
  </tbody>
134
  </table>
135
  </article>
136
+
137
  </main>
138
+
139
  <script>
140
+ // This simple listener removes the "Monitoring..." placeholder
141
+ // as soon as the very first signal arrives from the server.
142
  document.body.addEventListener('htmx:sseMessage', function(evt) {
143
+ const placeholder = document.getElementById('placeholder-row');
144
+ if (placeholder) {
145
+ placeholder.remove();
146
+ }
147
  });
148
+ </script>
149
  </body>
150
  </html>