Spaces:
Running
Running
Create static/index.html
Browse files- static/index.html +100 -0
static/index.html
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Sentinel Arbitrage Engine</title>
|
| 7 |
+
<style>
|
| 8 |
+
:root { font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }
|
| 9 |
+
body { background-color: #111927; color: #E5E7EB; font-size: 14px; margin: 0; padding: 1rem; }
|
| 10 |
+
.container { max-width: 1280px; margin: 0 auto; }
|
| 11 |
+
header { text-align: center; margin-bottom: 1.5rem; }
|
| 12 |
+
h1 { color: #38BDF8; margin-bottom: 0; font-weight: 600; }
|
| 13 |
+
.status-bar { font-size: 12px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; }
|
| 14 |
+
.status-online { color: #34D399; } .status-offline { color: #F87171; }
|
| 15 |
+
table { width: 100%; border-collapse: collapse; }
|
| 16 |
+
th { background-color: #374151; text-align: left; }
|
| 17 |
+
td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; white-space: nowrap; }
|
| 18 |
+
.buy { color: #34D399; } .sell { color: #F87171; }
|
| 19 |
+
.risk-low { color: #34D399; } .risk-medium { color: #FBBF24; } .risk-high { color: #F87171; }
|
| 20 |
+
@keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); } to { background-color: transparent; } }
|
| 21 |
+
</style>
|
| 22 |
+
<!-- The Socket.IO client library -->
|
| 23 |
+
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
| 24 |
+
</head>
|
| 25 |
+
<body>
|
| 26 |
+
<main class="container">
|
| 27 |
+
<header>
|
| 28 |
+
<h1>Sentinel Arbitrage Engine</h1>
|
| 29 |
+
</header>
|
| 30 |
+
|
| 31 |
+
<div class="status-bar">
|
| 32 |
+
Engine Status: <span id="status-light" class="status-offline">OFFLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span>
|
| 33 |
+
</div>
|
| 34 |
+
|
| 35 |
+
<article>
|
| 36 |
+
<table>
|
| 37 |
+
<thead>
|
| 38 |
+
<tr>
|
| 39 |
+
<th>Pair</th>
|
| 40 |
+
<th>Oracle 1 (Pyth)</th>
|
| 41 |
+
<th>Oracle 2 (Chainlink Agg.)</th>
|
| 42 |
+
<th>Discrepancy</th>
|
| 43 |
+
<th>Risk</th>
|
| 44 |
+
<th>Rationale</th>
|
| 45 |
+
<th>Strategy</th>
|
| 46 |
+
</tr>
|
| 47 |
+
</thead>
|
| 48 |
+
<tbody id="opportunities-table">
|
| 49 |
+
<tr id="placeholder-row"><td colspan="7" style="text-align:center; padding: 2rem;">Connecting to engine...</td></tr>
|
| 50 |
+
</tbody>
|
| 51 |
+
</table>
|
| 52 |
+
</article>
|
| 53 |
+
</main>
|
| 54 |
+
|
| 55 |
+
<script>
|
| 56 |
+
// --- THE NEW JAVASCRIPT ENGINE ---
|
| 57 |
+
const socket = io();
|
| 58 |
+
const statusLight = document.getElementById('status-light');
|
| 59 |
+
const opportunitiesTable = document.getElementById('opportunities-table');
|
| 60 |
+
const placeholderRow = document.getElementById('placeholder-row');
|
| 61 |
+
const lastUpdateTime = document.getElementById('last-update-time');
|
| 62 |
+
|
| 63 |
+
socket.on('connect', () => {
|
| 64 |
+
console.log('✅ Connected to Sentinel Engine via WebSocket.');
|
| 65 |
+
statusLight.textContent = 'ONLINE';
|
| 66 |
+
statusLight.className = 'status-online';
|
| 67 |
+
if (placeholderRow) placeholderRow.cells[0].textContent = 'Monitoring for oracle dislocations...';
|
| 68 |
+
});
|
| 69 |
+
|
| 70 |
+
socket.on('disconnect', () => {
|
| 71 |
+
console.log('🔥 Disconnected from Sentinel Engine.');
|
| 72 |
+
statusLight.textContent = 'OFFLINE';
|
| 73 |
+
statusLight.className = 'status-offline';
|
| 74 |
+
});
|
| 75 |
+
|
| 76 |
+
socket.on('new_signal', (signal) => {
|
| 77 |
+
console.log('⚡️ New Signal Received:', signal);
|
| 78 |
+
if (placeholderRow) placeholderRow.remove();
|
| 79 |
+
|
| 80 |
+
const pythClass = signal.pyth_price < signal.chainlink_price ? 'buy' : 'sell';
|
| 81 |
+
const chainlinkClass = signal.pyth_price < signal.chainlink_price ? 'sell' : 'buy';
|
| 82 |
+
|
| 83 |
+
const newRow = opportunitiesTable.insertRow(0);
|
| 84 |
+
newRow.style.animation = 'fadeIn 0.7s ease-out';
|
| 85 |
+
newRow.innerHTML = `
|
| 86 |
+
<td><strong>BTC/USD</strong></td>
|
| 87 |
+
<td><span class="${pythClass}">Pyth Network</span><br>$${signal.pyth_price.toFixed(2)}</td>
|
| 88 |
+
<td><span class="${chainlinkClass}">Chainlink Agg.</span><br>$${signal.chainlink_price.toFixed(2)}</td>
|
| 89 |
+
<td><strong>${signal.spread_pct.toFixed(3)}%</strong></td>
|
| 90 |
+
<td><span class="risk-${signal.risk.toLowerCase()}">${signal.risk}</span></td>
|
| 91 |
+
<td>${signal.rationale}</td>
|
| 92 |
+
<td>${signal.strategy}</td>
|
| 93 |
+
`;
|
| 94 |
+
|
| 95 |
+
const timeStr = new Date(signal.timestamp).toLocaleTimeString('en-GB', { timeZone: 'UTC' });
|
| 96 |
+
lastUpdateTime.textContent = `${timeStr} UTC`;
|
| 97 |
+
});
|
| 98 |
+
</script>
|
| 99 |
+
</body>
|
| 100 |
+
</html>
|