Spaces:

mgbam
/

CryptoSentinel_AI

Running

App Files Files Community

mgbam commited on 4 days ago

Commit

3271a8d

verified ·

1 Parent(s): 56eb560

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +39 -123

templates/index.html CHANGED Viewed

@@ -1,154 +1,70 @@
 <!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>

 <!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>
     <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: 'Inter', system-ui, sans-serif; --pico-font-size: 100%; }
+        body { background-color: #111927; color: #E5E7EB; }
+        .container { max-width: 960px; margin: 2rem auto; }
+        .header { text-align: center; margin-bottom: 3rem; }
+        .header h1 { color: #38BDF8; margin-bottom: 0.25rem; }
+        .header p { color: #9CA3AF; margin: 0; }
+        article { background-color: #1F2937; border: 1px solid #374151; border-radius: 0.5rem; }
+        article > header { padding: 1rem 1.5rem; border-bottom: 1px solid #374151; font-weight: bold; }
+        .price-ticker { display: flex; justify-content: space-around; padding: 0.75rem 1.5rem; font-size: 0.9rem; }
+        .signal-stream-container { padding: 1.5rem; min-height: 400px; }
+        .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; }
+        .card:hover { transform: translateY(-3px); }
+        blockquote { margin: 0 0 1rem; padding: 0; border: none; font-style: normal; font-weight: 500; }
+        blockquote a { color: #E5E7EB; text-decoration: none; }
+        blockquote a:hover { text-decoration: underline; }
+        .impact-low { border-left-color: #38BDF8; }
+        .impact-medium { border-left-color: #FBBF24; }
+        .impact-high { border-left-color: #F87171; }
+        .sentiment-positive { color: #34D399; }
+        .sentiment-negative { color: #F87171; }
+        .sentiment-neutral { color: #9CA3AF; }
+        .status { text-align: right; }
+        .status-online { color: #34D399; font-weight: bold; }
     </style>
 </head>
 <body hx-ext="sse">
     <main class="container">
+        <header class="header">
             <h1>Sentinel TradeFlow Protocol</h1>
             <p>Autonomous Low-Latency Signal Generation</p>
         </header>
+        <article class="price-ticker" hx-get="/api/prices" hx-trigger="every 30s" hx-swap="innerHTML">
+            <span aria-busy="true">Loading prices...</span>
+        </article>
+        <article style="margin-top: 2rem;">
             <header class="grid">
                 <div><strong>Signal Stream</strong></div>
+                <div class="status" id="signal-status">Status: CONNECTING... (Last Signal: <span id="last-signal-time">never</span>)</div>
             </header>
+            <div class="signal-stream-container" sse-connect="/api/signals/stream" hx-swap="afterbegin">
+                <!-- New signals will appear here -->
             </div>
         </article>
     </main>
     <script>
+        document.body.addEventListener('htmx:sseOpen', function(evt) {
+            document.querySelector('#signal-status .status-text')?.remove();
             const statusDiv = document.getElementById('signal-status');
+            if (statusDiv.querySelector('.status-online')) return; // Already online
+            const onlineSpan = document.createElement('span');
+            onlineSpan.className = 'status-online';
+            onlineSpan.textContent = 'ONLINE';
+            statusDiv.prepend(onlineSpan, 'Status: ');
         });
     </script>
 </body>
 </html>