Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nova // Autonomous Matrix</title> | |
| <style> | |
| :root { | |
| --bg: #0a0a0c; | |
| --surface: #121216; | |
| --accent: #ff3e6c; | |
| --text: #e2e8f0; | |
| --text-muted: #64748b; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'Courier New', Courier, monospace; | |
| margin: 0; | |
| padding: 20px; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 800px; | |
| } | |
| header { | |
| border-bottom: 2px solid var(--accent); | |
| padding-bottom: 10px; | |
| margin-bottom: 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 11fr); | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-card { | |
| background: var(--surface); | |
| padding: 15px; | |
| border-radius: 4px; | |
| border-left: 3px solid var(--accent); | |
| } | |
| .stat-val { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: #fff; | |
| margin-top: 5px; | |
| } | |
| .current-box { | |
| background: var(--surface); | |
| padding: 20px; | |
| border-radius: 4px; | |
| margin-bottom: 20px; | |
| } | |
| .thought-bubble { | |
| font-style: italic; | |
| color: #a78bfa; | |
| border-left: 2px dashed #a78bfa; | |
| padding-left: 10px; | |
| margin-top: 10px; | |
| } | |
| .log-container { | |
| margin-top: 30px; | |
| } | |
| .log-item { | |
| background: #14141a; | |
| padding: 10px 15px; | |
| margin-bottom: 8px; | |
| border-radius: 4px; | |
| font-size: 0.9rem; | |
| border: 1px solid #222; | |
| } | |
| .log-meta { | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| margin-bottom: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>PROJECT: NOVA // VIRTUAL LIFE</h1> | |
| <div id="status" style="color: #4ade80;">● ACTIVE SIMULATION</div> | |
| </header> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div>TIME REMAINING</div> | |
| <div class="stat-val" id="stat-time">--</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div>WALLET BALANCE</div> | |
| <div class="stat-val" id="stat-cash">--</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div>CURRENT SECTOR</div> | |
| <div class="stat-val" id="stat-loc" style="font-size: 1.1rem;">--</div> | |
| </div> | |
| </div> | |
| <div class="current-box"> | |
| <h3>CURRENT ACTION</h3> | |
| <p id="curr-action">Connecting to neural grid...</p> | |
| <div class="thought-bubble" id="curr-thought">"Thinking..."</div> | |
| </div> | |
| <div class="log-container"> | |
| <h3>LOG FEED (UPDATES EVERY 10S)</h3> | |
| <div id="logs"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // Replace with your Hugging Face space backend URL if needed | |
| const API_URL = window.location.origin + "/state"; | |
| async function fetchState() { | |
| try { | |
| const res = await fetch(API_URL); | |
| const data = await res.json(); | |
| // Update DOM | |
| const daysLeft = (data.hours_left / 24).toFixed(2); | |
| document.getElementById('stat-time').innerText = `${daysLeft} Days`; | |
| document.getElementById('stat-cash').innerText = `$${data.cash.toFixed(2)}`; | |
| document.getElementById('stat-loc').innerText = data.current_location; | |
| document.getElementById('curr-action').innerText = data.current_action; | |
| document.getElementById('curr-thought').innerText = `"${data.inner_thought}"`; | |
| if(data.hours_left <= 0) { | |
| document.getElementById('status').innerText = "■ OFFLINE / EXPIRED"; | |
| document.getElementById('status').style.color = var(--accent); | |
| } | |
| // Render Feed History | |
| const logsDiv = document.getElementById('logs'); | |
| logsDiv.innerHTML = ''; | |
| data.history.forEach(item => { | |
| const div = document.createElement('div'); | |
| div.className = 'log-item'; | |
| div.innerHTML = ` | |
| <div class="log-meta">[${item.time}] — Days Left: ${item.days_left} — Spent: $${item.spent}</div> | |
| <strong>@ ${item.location}:</strong> ${item.action} | |
| <div style="color: #a78bfa; font-size: 0.85rem; margin-top: 4px;">↳ "${item.thought}"</div> | |
| `; | |
| logsDiv.appendChild(div); | |
| }); | |
| } catch (err) { | |
| console.error("Error connecting to matrix controller:", err); | |
| } | |
| } | |
| // Run on boot and pull fresh data every 4 seconds | |
| fetchState(); | |
| setInterval(fetchState, 4000); | |
| </script> | |
| </body> | |
| </html> | |