Html Sensor Dashboard

HTML / CSS / JS Open Kit Simulator ↗ All recipes

About this recipe

Demo data — replace with fetch('/api/sensors') against your Pi

Libraries / imports

No imports detected

Hardware / pins

No physical pins or components referenced

Key API calls

fetch() setInterval() document.getElementById()

How to run

Press Render preview — renders live in a sandboxed iframe with mocked /api/*.

Editor html edits auto-save

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DIY KIT — Sensor Dashboard</title>
  <style>
    body { font-family: system-ui; margin:0; padding:32px; background:#0b1220; color:#f1f5f9; }
    h1   { font-weight:900; letter-spacing:-.02em; }
    .grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); margin-top:24px; }
    .card{ background:#1e293b; padding:18px 20px; border-radius:14px; border:1px solid #334155; }
    .lbl { color:#94a3b8; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
    .val { font-size:2rem; font-weight:900; margin-top:4px; }
    .ok  { color:#4ade80; } .warn{ color:#fbbf24; } .crit{ color:#f87171; }
  </style>
</head>
<body>
  <h1>🔧 DIY KIT Live Sensors</h1>
  <div class="grid">
    <div class="card"><div class="lbl">Temperature</div><div class="val ok" id="t">--</div></div>
    <div class="card"><div class="lbl">Humidity</div><div class="val ok" id="h">--</div></div>
    <div class="card"><div class="lbl">Pressure</div><div class="val ok" id="p">--</div></div>
  </div>
  <script>
    // Demo data — replace with fetch('/api/sensors') against your Pi
    setInterval(() => {
      document.getElementById('t').textContent = (22 + Math.random()*4).toFixed(1) + '°C';
      document.getElementById('h').textContent = (45 + Math.random()*10).toFixed(0) + '%';
      document.getElementById('p').textContent = (1012 + Math.random()*6).toFixed(0) + ' hPa';
    }, 1000);
  </script>
</body>
</html>

Output ready

Output will appear here after you click Run.

About this recipe

Libraries / imports

Hardware / pins

Key API calls

How to run

We use cookies to make DIY KIT work.