<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Modern Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #09090b;
color: #fafafa;
min-height: 100vh;
}
</style>
</head>
<body>
<div class="min-h-screen bg-zinc-950 text-zinc-100 flex items-center justify-center p-6">
<div class="max-w-md w-full bg-zinc-900 border border-zinc-800 rounded-2xl p-6 shadow-2xl space-y-6">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400 font-bold">
⚡
</div>
<div>
<h2 class="font-bold text-sm text-white">Quantum Node</h2>
<p class="text-xs text-zinc-500">Node cluster #402</p>
</div>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
Active
</span>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="bg-zinc-950 border border-zinc-800/80 p-3 rounded-xl">
<p class="text-[11px] text-zinc-500 font-medium">Throughput</p>
<p class="text-lg font-bold text-white mt-0.5">14.2 GB/s</p>
</div>
<div class="bg-zinc-950 border border-zinc-800/80 p-3 rounded-xl">
<p class="text-[11px] text-zinc-500 font-medium">Latency</p>
<p class="text-lg font-bold text-emerald-400 mt-0.5">1.2 ms</p>
</div>
</div>
<div class="space-y-2">
<div class="flex justify-between text-xs text-zinc-400">
<span>Memory Allocation</span>
<span class="font-mono text-zinc-300">4.8 / 16 GB (30%)</span>
</div>
<div class="w-full bg-zinc-800 h-1.5 rounded-full overflow-hidden">
<div class="bg-indigo-500 h-full rounded-full" style="width: 30%"></div>
</div>
</div>
<button class="w-full py-2.5 px-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-xs font-semibold shadow-lg shadow-indigo-600/20 transition-colors">
Inspect Telemetry
</button>
</div>
</div>
</body>
</html>Scan with iPhone Camera or Android QR scanner to preview natively on your device.