Spaces:

mgbam
/

CryptoSentinel_AI

Running

App Files Files Community

mgbam commited on 2 days ago

Commit

a1abbf9

verified ·

1 Parent(s): 2f96557

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +126 -41

templates/index.html CHANGED Viewed

@@ -1,69 +1,154 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sentinel TradeFlow - Command Center</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
-    <script src="https://unpkg.com/[email protected]"></script>
     <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
     <style>
-        :root { --pico-font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }
-        body { background-color: #010409; color: #e6edf3; }
-        main.container { max-width: 960px; margin: 2rem auto; }
-        header { text-align: center; margin-bottom: 2rem; }
-        header h1 { color: var(--pico-primary); }
-        .card {
-            background-color: #0d1117;
-            border: 1px solid #30363d;
-            border-left-width: 6px;
-            margin-bottom: 1.5rem;
-            border-radius: 6px;
-            padding: 0;
-            overflow: hidden;
         }
-        .card-header, .signal-header {
-            display: flex;
-            justify-content: space-between;
-            background-color: #161b22;
-            padding: 0.75rem 1.25rem;
-            font-weight: bold;
-            border-bottom: 1px solid #30363d;
         }
-        .signal-long { border-left-color: #238636; }
-        .signal-short { border-left-color: #da3633; }
-        .card .headline { font-style: italic; color: #8b949e; padding: 1rem 1.25rem 0; }
-        .card p { margin: 0; padding: 0.5rem 1.25rem; }
-        .card .grid { padding: 0 1.25rem 1rem; }
-        #signal-stream:empty::before {
-            content: 'Awaiting first high-conviction signal from the protocol...';
-            display: block;
             text-align: center;
-            padding: 3rem;
-            color: #8b949e;
-            border: 2px dashed #30363d;
-            border-radius: 6px;
         }
     </style>
 </head>
 <body hx-ext="sse">
     <main class="container">
         <header>
             <h1>Sentinel TradeFlow Protocol</h1>
             <p>Autonomous Low-Latency Signal Generation</p>
         </header>
         <article>
-            <header class="card-header">
-                <span>Signal Stream</span>
-                <span>Status: <strong style="color: #238636;">ONLINE</strong></span>
             </header>
-            <div id="signal-stream"
-                 hx-sse="connect:/api/signals/stream"
-                 hx-swap="afterbegin">
-                <!-- Actionable trade hypotheses will be injected here in real-time -->
             </div>
         </article>
     </main>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sentinel TradeFlow Protocol</title>
+    <!-- Pico.css for modern styling -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <!-- HTMX Core and Server-Sent Events (SSE) Extension -->
+    <script src="https://unpkg.com/[email protected]"></script>
     <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
     <style>
+        body {
+            background-color: #111927; /* A deep navy blue background */
+            color: #E5E7EB; /* A soft white for text */
         }
+        main.container {
+            max-width: 960px; /* A bit wider for a better dashboard feel */
+            margin: 2rem auto;
         }
+        h1 {
+            color: #38BDF8; /* A vibrant light blue for the main title */
+            text-align: center;
+        }
+        h1+p {
             text-align: center;
+            color: #9CA3AF; /* Muted gray for the subtitle */
+            margin-bottom: 3rem;
         }
+        article {
+            background-color: #1F2937; /* A slightly lighter navy for cards */
+            border: 1px solid #374151; /* Subtle border */
+            border-radius: 0.5rem;
+            padding: 0; /* Remove default padding to use header/body structure */
+        }
+        article > header {
+            padding: 1rem 1.5rem;
+            border-bottom: 1px solid #374151;
+            font-weight: bold;
+        }
+        #signal-container {
+            padding: 1.5rem;
+            min-height: 200px; /* Give the container some initial height */
+        }
+        /* Styles for the dynamically loaded signal cards */
+        .card {
+            background-color: #374151; /* Darker card background for contrast */
+            border-radius: 0.375rem;
+            border-left-width: 5px;
+            border-left-style: solid;
+            margin-bottom: 1.5rem;
+            padding: 1rem 1.5rem;
+        }
+        blockquote {
+            margin: 0 0 1rem 0;
+            padding: 0;
+            border: none;
+            font-style: normal;
+            font-weight: 500;
+        }
+        blockquote a {
+            color: #E5E7EB;
+            text-decoration: none;
+        }
+        blockquote a:hover {
+            text-decoration: underline;
+        }
+        /* Color coding for impact */
+        .impact-low { border-left-color: #38BDF8; } /* Light Blue */
+        .impact-medium { border-left-color: #FBBF24; } /* Amber */
+        .impact-high { border-left-color: #F87171; } /* Red */
+        .impact-error { border-left-color: #4B5563; } /* Gray */
+        /* Color coding for sentiment */
+        .sentiment-positive { color: #34D399; } /* Green */
+        .sentiment-negative { color: #F87171; } /* Red */
+        .sentiment-neutral { color: #9CA3AF; } /* Gray */
+        .sentiment-error { color: #FBBF24; } /* Amber */
+        .status-online {
+            color: #34D399;
+            font-weight: bold;
+        }
     </style>
 </head>
+<!-- Enable the HTMX SSE extension for the page -->
 <body hx-ext="sse">
     <main class="container">
         <header>
             <h1>Sentinel TradeFlow Protocol</h1>
             <p>Autonomous Low-Latency Signal Generation</p>
         </header>
         <article>
+            <header class="grid">
+                <div><strong>Signal Stream</strong></div>
+                <!-- This div will be updated by our script when the SSE connection opens -->
+                <div id="signal-status" style="text-align: right;">Status: CONNECTING...</div>
             </header>
+            <!-- This div is the target for our SSE stream. New signals will be added here. -->
+            <div
+                id="signal-container"
+                sse-connect="/api/signals/stream"
+                hx-swap="afterbegin">
+                <!--
+                    sse-connect: Tells HTMX to connect to this endpoint.
+                    hx-swap="afterbegin": Tells HTMX to prepend new messages to this div.
+                    HTMX listens for the default 'message' event from the server.
+                -->
             </div>
         </article>
     </main>
+    <!-- This small script provides better user feedback for the connection status -->
+    <script>
+        document.body.addEventListener('htmx:sseOpen', function(event) {
+            const statusDiv = document.getElementById('signal-status');
+            if (statusDiv) {
+                // Update the status text and color when the connection is live.
+                statusDiv.innerHTML = 'Status: <span class="status-online">ONLINE</span>';
+            }
+        });
+        document.body.addEventListener('htmx:sseError', function(event) {
+            const statusDiv = document.getElementById('signal-status');
+            if (statusDiv) {
+                // Let the user know if the connection fails.
+                statusDiv.innerHTML = 'Status: <span style="color: #F87171;">OFFLINE - Retrying...</span>';
+            }
+        });
+    </script>
 </body>
 </html>