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>CryptoSentinel Pro</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> | |
| .card { border-left-width: 4px; border-left-style: solid; margin-bottom: 1.5rem; } | |
| .impact-low { border-left-color: var(--pico-color-cyan-500); } | |
| .impact-medium { border-left-color: var(--pico-color-amber-500); } | |
| .impact-high { border-left-color: var(--pico-color-red-600); } | |
| .sentiment-positive { color: var(--pico-color-green-400); } | |
| .sentiment-negative { color: var(--pico-color-red-400); } | |
| .sentiment-neutral { color: var(--pico-color-gray-400); } | |
| blockquote { font-style: italic; } | |
| </style> | |
| </head> | |
| <body hx-ext="sse"> | |
| <main class="container"> | |
| <header style="text-align: center;"> | |
| <h1>🤖 CryptoSentinel Pro</h1> | |
| <p>AI-Powered Market Intelligence</p> | |
| </header> | |
| <div class="grid"> | |
| <!-- Left Column: Manual Analysis & Prices --> | |
| <section> | |
| <article> | |
| <header><strong>Market Snapshot</strong></header> | |
| <div id="prices" hx-get="/api/prices" hx-trigger="load, every 30s" hx-swap="innerHTML"> | |
| <p aria-busy="true">Fetching prices...</p> | |
| </div> | |
| </article> | |
| <article> | |
| <header><strong>Manual Analysis</strong></header> | |
| <form hx-post="/api/sentiment" hx-target="#analysis-status" hx-on::after-request="this.reset()"> | |
| <textarea name="text" placeholder="Paste news headline or tweet here..." required></textarea> | |
| <button type="submit">Run Deep Analysis</button> | |
| <small id="analysis-status"></small> | |
| </form> | |
| <div id="manual-results" hx-sse="connect:/api/sentiment/stream" hx-swap="afterbegin"> | |
| <!-- Manual analysis results appear here --> | |
| </div> | |
| </article> | |
| </section> | |
| <!-- Right Column: Automated News Feed --> | |
| <section> | |
| <article> | |
| <header><strong>Automated Market Intelligence Feed</strong></header> | |
| <div id="news-feed" hx-sse="connect:/api/news/stream" hx-swap="afterbegin"> | |
| <p aria-busy="true">Initializing live news feed...</p> | |
| </div> | |
| </article> | |
| </section> | |
| </div> | |
| </main> | |
| </body> | |
| </html> |