Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

App Files Community
mgbam commited on
Commit
c3c2e5d
·
verified ·
1 Parent(s): dc458f1

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +26 -45
templates/index.html CHANGED
@@ -8,31 +8,31 @@
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; --pico-font-size: 100%; }
12
  body { background-color: #111927; color: #E5E7EB; }
13
  .container { max-width: 960px; margin: 2rem auto; }
14
- .header { text-align: center; margin-bottom: 3rem; }
15
- .header h1 { color: #38BDF8; margin-bottom: 0.25rem; }
16
- .header p { color: #9CA3AF; margin: 0; }
17
- article { background-color: #1F2937; border: 1px solid #374151; border-radius: 0.5rem; }
18
- article > header { padding: 1rem 1.5rem; border-bottom: 1px solid #374151; font-weight: bold; }
19
- .price-ticker { display: flex; justify-content: space-around; padding: 0.75rem 1.5rem; font-size: 0.9rem; }
20
- .signal-stream-container { padding: 1.5rem; min-height: 400px; }
21
- .card { background-color: #374151; border-radius: 0.375rem; border-left: 5px solid; margin-bottom: 1.5rem; padding: 1rem 1.5rem; transition: transform 0.2s ease-in-out; }
22
- .card:hover { transform: translateY(-3px); }
23
- blockquote { margin: 0 0 1rem; padding: 0; border: none; font-style: normal; font-weight: 500; }
 
 
 
24
  blockquote a { color: #E5E7EB; text-decoration: none; }
25
  blockquote a:hover { text-decoration: underline; }
 
26
  .impact-low { border-left-color: #38BDF8; }
27
  .impact-medium { border-left-color: #FBBF24; }
28
  .impact-high { border-left-color: #F87171; }
29
- .impact-error { border-left-color: #4B5563; }
30
  .sentiment-positive { color: #34D399; }
31
  .sentiment-negative { color: #F87171; }
32
- .sentiment-neutral { color: #9CA3AF; }
33
- .status { text-align: right; }
34
- .status-online { color: #34D399; font-weight: bold; }
35
- .status-offline { color: #F87171; font-weight: bold; }
36
  </style>
37
  </head>
38
  <body hx-ext="sse">
@@ -42,40 +42,21 @@
42
  <p>Autonomous Low-Latency Signal Generation</p>
43
  </header>
44
 
45
- <article class="price-ticker" hx-get="/api/prices" hx-trigger="every 30s" hx-swap="innerHTML">
46
- <span aria-busy="true">Loading prices...</span>
47
- </article>
48
 
49
- <article style="margin-top: 2rem;">
50
  <header class="grid">
51
- <div><strong>Signal Stream</strong></div>
52
- <div class="status" id="signal-status">Status: CONNECTING... (Last Signal: <span id="last-signal-time">never</span>)</div>
 
 
53
  </header>
54
- <div class="signal-stream-container" sse-connect="/api/signals/stream" hx-swap="afterbegin" id="signal-container">
55
- <!-- New signals will appear here -->
56
  </div>
57
  </article>
58
  </main>
59
-
60
- <!-- This small script provides better user feedback for the connection status -->
61
- <script>
62
- document.body.addEventListener('htmx:sseOpen', function(evt) {
63
- const statusDiv = document.getElementById('signal-status');
64
- const timeDiv = document.getElementById('last-signal-time');
65
- if (statusDiv) {
66
- // Clear the previous content and set the new ONLINE status.
67
- statusDiv.innerHTML = 'Status: <span class="status-online">ONLINE</span> (Last Signal: <span id="last-signal-time">' + timeDiv.innerHTML + '</span>)';
68
- }
69
- });
70
-
71
- document.body.addEventListener('htmx:sseError', function(evt) {
72
- const statusDiv = document.getElementById('signal-status');
73
- const timeDiv = document.getElementById('last-signal-time');
74
- if (statusDiv) {
75
- // Let the user know if the connection fails.
76
- statusDiv.innerHTML = 'Status: <span class="status-offline">OFFLINE - Retrying...</span> (Last Signal: <span id="last-signal-time">' + timeDiv.innerHTML + '</span>)';
77
- }
78
- });
79
- </script>
80
  </body>
81
  </html>
 
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">
 
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>