Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

App Files Community
mgbam commited on
Commit
04c9c82
·
verified ·
1 Parent(s): 243f098

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +93 -16
static/index.html CHANGED
@@ -4,22 +4,92 @@
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
  <style>
10
- :root { font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }
11
- body { background-color: #111927; color: #E5E7EB; font-size: 14px; }
12
- .container { max-width: 1280px; margin: 1.5rem auto; padding: 0 1rem; }
13
- header { text-align: center; margin-bottom: 1.5rem; }
14
- h1 { color: #38BDF8; margin-bottom: 0; }
15
- table { width: 100%; border-collapse: collapse; }
16
- th { background-color: #374151; text-align: left; }
17
- td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; }
18
- .buy { color: #34D399; } .sell { color: #F87171; }
19
- .risk-low { color: #34D399; } .risk-medium { color: #FBBF24; } .risk-high { color: #F87171; }
20
- .status-bar { font-size: 14px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; }
21
- tbody tr { animation: fadeIn 0.5s ease-out; }
22
- @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </style>
24
  </head>
25
  <body>
@@ -27,10 +97,12 @@
27
  <header>
28
  <h1>Sentinel Arbitrage Engine</h1>
29
  </header>
 
30
  <div class="status-bar grid">
31
- <div>Engine Status: <span style="color: #34D399;">ONLINE</span></div>
32
  <div id="pnl-ticker" style="text-align: right;">Simulated P/L: $0.00</div>
33
  </div>
 
34
  <article data-theme="dark" style="padding: 0; overflow-x: auto;">
35
  <table>
36
  <thead>
@@ -44,13 +116,18 @@
44
  <th>AI Strategy</th>
45
  </tr>
46
  </thead>
47
- <!-- This table body will be completely replaced every 2 seconds -->
 
 
48
  <tbody
49
  id="opportunities-table"
50
  hx-get="/api/signals"
51
  hx-trigger="load, every 2s"
52
  hx-swap="innerHTML">
53
- <tr id="placeholder-row">
 
 
 
54
  <td colspan="7" style="text-align:center; padding: 2rem;" aria-busy="true">
55
  Awaiting first signal from engine...
56
  </td>
 
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 for interactivity -->
12
  <script src="https://unpkg.com/[email protected]"></script>
13
+
14
  <style>
15
+ :root {
16
+ --pico-font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
17
+ --pico-font-size: 14px;
18
+ --pico-color-green-400: #34D399;
19
+ --pico-color-red-400: #F87171;
20
+ --pico-color-amber-400: #FBBF24;
21
+ }
22
+
23
+ body {
24
+ background-color: #111927;
25
+ }
26
+
27
+ .container {
28
+ max-width: 1280px;
29
+ margin: 1.5rem auto;
30
+ padding: 0 1rem;
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: collapse; /* Use collapse for a tighter look */
47
+ }
48
+
49
+ th {
50
+ background-color: #374151;
51
+ text-align: left;
52
+ position: sticky; /* Keep headers visible on scroll */
53
+ top: 0;
54
+ }
55
+
56
+ td, th {
57
+ padding: 0.75rem 1rem;
58
+ border-bottom: 1px solid #374151;
59
+ border-right: 1px solid #2b3544; /* Add vertical lines */
60
+ }
61
+ th:last-child, td:last-child {
62
+ border-right: none;
63
+ }
64
+
65
+ tbody tr:hover {
66
+ background-color: #1f2937;
67
+ }
68
+
69
+ tbody tr:first-child {
70
+ /* Animation for newly added rows */
71
+ animation: fadeIn 0.5s ease-out;
72
+ }
73
+
74
+ .buy { color: var(--pico-color-green-400); }
75
+ .sell { color: var(--pico-color-red-400); }
76
+
77
+ .risk-low { color: var(--pico-color-green-400); }
78
+ .risk-medium { color: var(--pico-color-amber-400); }
79
+ .risk-high { color: var(--pico-color-red-400); }
80
+
81
+ .status-bar {
82
+ font-size: 14px;
83
+ color: #9CA3AF;
84
+ margin-bottom: 1rem;
85
+ }
86
+
87
+ .status-online { color: #34D399; }
88
+
89
+ @keyframes fadeIn {
90
+ from { background-color: rgba(52, 211, 153, 0.2); }
91
+ to { background-color: transparent; }
92
+ }
93
  </style>
94
  </head>
95
  <body>
 
97
  <header>
98
  <h1>Sentinel Arbitrage Engine</h1>
99
  </header>
100
+
101
  <div class="status-bar grid">
102
+ <div>Engine Status: <span class="status-online"><strong>ONLINE</strong></span></div>
103
  <div id="pnl-ticker" style="text-align: right;">Simulated P/L: $0.00</div>
104
  </div>
105
+
106
  <article data-theme="dark" style="padding: 0; overflow-x: auto;">
107
  <table>
108
  <thead>
 
116
  <th>AI Strategy</th>
117
  </tr>
118
  </thead>
119
+ <!-- This table body is the heart of the application. -->
120
+ <!-- It polls the /api/signals endpoint every 2 seconds -->
121
+ <!-- and replaces its entire content with the response. -->
122
  <tbody
123
  id="opportunities-table"
124
  hx-get="/api/signals"
125
  hx-trigger="load, every 2s"
126
  hx-swap="innerHTML">
127
+
128
+ <!-- This placeholder is shown only on the first load. -->
129
+ <!-- It will be replaced by the first successful poll. -->
130
+ <tr>
131
  <td colspan="7" style="text-align:center; padding: 2rem;" aria-busy="true">
132
  Awaiting first signal from engine...
133
  </td>