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> | |
| <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: #111927; font-size: 14px; } | |
| .container { max-width: 1280px; margin: 1rem auto; } | |
| header { text-align: center; margin-bottom: 1.5rem; } | |
| h1 { color: #38BDF8; margin-bottom: 0; } | |
| table { width: 100%; border-collapse: separate; border-spacing: 0; } | |
| th { background-color: #374151; } | |
| td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; white-space: nowrap; } | |
| tbody tr:first-child { animation: fadeIn 0.5s ease-out; } | |
| .buy { color: #34D399; } | |
| .sell { color: #F87171; } | |
| .risk-low { color: #34D399; } | |
| .risk-medium { color: #FBBF24; } | |
| .risk-high { color: #F87171; } | |
| .trade-btn { --pico-font-size: 12px; padding: 5px 10px; width: 100%; white-space: normal; text-align: left;} | |
| .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> | |
| <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> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Pair</th> | |
| <th>Source 1</th> | |
| <th>Source 2</th> | |
| <th>Discrepancy</th> | |
| <th>Risk</th> | |
| <th>Rationale</th> | |
| <th>Suggested Strategy</th> | |
| </tr> | |
| </thead> | |
| <tbody id="opportunities-table"> | |
| <!-- New arbitrage opportunities will appear here via SSE --> | |
| <tr><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> | |
| document.body.addEventListener('htmx:sseMessage', function(evt) { | |
| const placeholder = document.querySelector('#opportunities-table tr:first-child td[colspan="7"]'); | |
| if (placeholder) placeholder.parentElement.remove(); | |
| }); | |
| </html | |
| </body> | |
| </html> |