Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- Using a modern, lightweight CSS framework for better styling --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"> | |
| <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script> | |
| <title>Crypto Price Dashboard</title> | |
| <style> | |
| body { container-type: inline-size; } | |
| .error { color: var(--pico-color-red-500); } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="container"> | |
| <header> | |
| <h1>Real-Time Cryptocurrency Prices</h1> | |
| <p>Prices update automatically every 10 seconds.</p> | |
| </header> | |
| <article> | |
| <div | |
| id="prices" | |
| hx-get="/api/prices" | |
| hx-trigger="load, every 10s" | |
| hx-swap="innerHTML"> | |
| <!-- This htmx-indicator will be shown during the request --> | |
| <p aria-busy="true">Fetching latest prices...</p> | |
| </div> | |
| </article> | |
| <footer> | |
| <small>Data sourced from <a href="https://www.coingecko.com/">CoinGecko</a>.</small> | |
| </footer> | |
| </main> | |
| </body> | |
| </html> |