Spaces:
Running
Running
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sentinel Arbitrage Engine</title> | |
| <!-- Pico.css for a clean, modern base --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"> | |
| <!-- HTMX Core and the Server-Sent Events Extension --> | |
| <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; | |
| --pico-font-size: 14px; | |
| --pico-color-green-400: #34D399; | |
| --pico-color-red-400: #F87171; | |
| --pico-color-amber-400: #FBBF24; | |
| } | |
| body { | |
| background-color: #111927; | |
| } | |
| .container { | |
| max-width: 1280px; | |
| margin: 1.5rem auto; | |
| padding: 0 1rem; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| h1 { | |
| color: #38BDF8; | |
| margin-bottom: 0; | |
| font-weight: 600; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| } | |
| th { | |
| background-color: #374151; | |
| text-align: left; | |
| } | |
| td, th { | |
| padding: 0.75rem 1rem; | |
| border-bottom: 1px solid #374151; | |
| white-space: nowrap; | |
| } | |
| tbody tr:hover { | |
| background-color: #1f2937; | |
| } | |
| tbody tr:first-child { | |
| /* Animation for newly added rows */ | |
| animation: fadeIn 0.7s ease-out; | |
| } | |
| .buy { color: var(--pico-color-green-400); } | |
| .sell { color: var(--pico-color-red-400); } | |
| .risk-low { color: var(--pico-color-green-400); } | |
| .risk-medium { color: var(--pico-color-amber-400); } | |
| .risk-high { color: var(--pico-color-red-400); } | |
| .trade-btn { | |
| --pico-font-size: 12px; | |
| --pico-padding: 0.5rem 0.75rem; | |
| width: 100%; | |
| white-space: normal; | |
| text-align: left; | |
| background-color: #4b5563; | |
| border-color: #4b5563; | |
| } | |
| .status-bar { | |
| font-size: 12px; | |
| color: #9CA3AF; | |
| text-align: right; | |
| margin-bottom: 1rem; | |
| } | |
| @keyframes fadeIn { | |
| from { background-color: rgba(52, 211, 153, 0.2); } | |
| to { background-color: transparent; } | |
| } | |
| </style> | |
| </head> | |
| <!-- Initialize the SSE extension for the entire page --> | |
| <body hx-ext="sse" sse-connect="/api/signals/stream"> | |
| <main class="container"> | |
| <header> | |
| <h1>Sentinel Arbitrage Engine</h1> | |
| </header> | |
| <div class="status-bar"> | |
| Engine Status: <span style="color: #34D399;">ONLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span> | |
| </div> | |
| <article data-theme="dark" style="padding: 0; overflow-x: auto;"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Pair</th> | |
| <th>Oracle 1 (Pyth)</th> | |
| <th>Oracle 2 (Chainlink Agg.)</th> | |
| <th>Discrepancy</th> | |
| <th>Risk Assessment</th> | |
| <th>Rationale</th> | |
| <th>Suggested Strategy</th> | |
| </tr> | |
| </thead> | |
| <tbody id="opportunities-table"> | |
| <!-- New arbitrage opportunities will be inserted here by HTMX --> | |
| <tr id="placeholder-row"> | |
| <td colspan="7" style="text-align:center; padding: 2rem; color: #9CA3AF;"> | |
| Monitoring for On-Chain/Off-Chain price discrepancies... | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </article> | |
| </main> | |
| <script> | |
| // This simple listener removes the "Monitoring..." placeholder | |
| // as soon as the very first signal arrives from the server. | |
| document.body.addEventListener('htmx:sseMessage', function(evt) { | |
| const placeholder = document.getElementById('placeholder-row'); | |
| if (placeholder) { | |
| placeholder.remove(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |