Html Relay Control Panel

HTML / CSS / JS Open Kit Simulator ↗ All recipes

About this recipe

fetch(`/api/relay/${b.dataset.id}/${b.classList.contains('on')?'on':'off'}`)

Libraries / imports

No imports detected

Hardware / pins

No physical pins or components referenced

Key API calls

document.querySelectorAll() addEventListener() fetch()

How to run

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

Editor html edits auto-save

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Relay Panel</title>
<style>
body{font-family:system-ui;margin:0;padding:24px;background:#0b1220;color:#f1f5f9}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;max-width:760px}
.relay{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:18px;text-align:center}
.relay h3{margin:0 0 10px}
.toggle{width:60px;height:32px;background:#475569;border-radius:999px;border:0;cursor:pointer;position:relative;transition:all .2s}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle.on{background:#16a34a}
.toggle.on::after{transform:translateX(28px)}
</style></head><body>
<h1>🏠 Smart Home Relays</h1>
<div class="grid">
  <div class="relay"><h3>Living room</h3><button class="toggle" data-id="1"></button></div>
  <div class="relay"><h3>Kitchen</h3><button class="toggle" data-id="2"></button></div>
  <div class="relay"><h3>Bedroom</h3><button class="toggle" data-id="3"></button></div>
  <div class="relay"><h3>Garden</h3><button class="toggle" data-id="4"></button></div>
</div>
<script>
document.querySelectorAll('.toggle').forEach(b => {
  b.addEventListener('click', async () => {
    b.classList.toggle('on');
    // fetch(`/api/relay/${b.dataset.id}/${b.classList.contains('on')?'on':'off'}`)
  });
});
</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.