Spaces:
Sleeping
Sleeping
File size: 1,373 Bytes
d2f0104 3bccb62 d2f0104 3bccb62 d2f0104 3bccb62 d2f0104 3bccb62 d2f0104 3bccb62 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html>
<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> |