<!DOCTYPE html>
<html>
<head>
<title>LED circuit simulator</title>
</head>
<body>

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>

<div class="volt-brand">
      <div class="brand-mark">⚡</div>
      <div>
        <strong>VOLT<span>LAB</span></strong>
        <small>INTERACTIVE CIRCUIT SIMULATOR</small>
      </div>
    </div>

<div class="header-right">
      <span class="live-indicator">
        <span></span>
        SIMULATION READY
      </span>
      <button id="resetCircuit" class="header-button">Reset Lab</button>
    </div>

</header>

<div class="sidebar-heading">
        <span class="section-label">COMPONENT LIBRARY</span>
        <h2>Build your circuit.</h2>
        <p>Select components to add them to your circuit.</p>
      </div>

<button class="component-card" data-component="battery">
          <span class="component-icon battery-icon">▮</span>
          <span class="component-info">
            <strong>DC Battery</strong>
            <small>Power source</small>
          </span>
          <span class="add-symbol">+</span>
        </button>

<button class="component-card" data-component="resistor">
          <span class="component-icon resistor-icon">〽</span>
          <span class="component-info">
            <strong>Resistor</strong>
            <small>Limits current</small>
          </span>
          <span class="add-symbol">+</span>
        </button>

<button class="component-card" data-component="led">
          <span class="component-icon led-icon">◉</span>
          <span class="component-info">
            <strong>LED</strong>
            <small>Light-emitting diode</small>
          </span>
          <span class="add-symbol">+</span>
        </button>

<button class="component-card" data-component="switch">
          <span class="component-icon switch-icon">⏻</span>
          <span class="component-info">
            <strong>Switch</strong>
            <small>Control current flow</small>
          </span>
          <span class="add-symbol">+</span>
        </button>

</div>

<div class="sidebar-tip">
        <span>💡</span>
        <p>
          <strong>Did you know?</strong><br>
          Current is calculated using Ohm's Law:
          <b>I = V / R</b>
        </p>
      </div>

</aside>

<div>
          <span class="section-label">WORKSPACE / CIRCUIT 01</span>
          <h2>DC Circuit Playground</h2>
        </div>

<div class="toolbar-actions">
          <button id="presetBasic" class="tool-button active">Basic</button>
          <button id="presetLED" class="tool-button">LED Circuit</button>
          <button id="presetHigh" class="tool-button">High Voltage</button>
        </div>

</div>

<div class="canvas-top-label">
          <span class="canvas-dot"></span>
          LIVE CIRCUIT VIEW
        </div>

<defs>

</defs>

</g>

<text x="180" y="300" text-anchor="middle"
                    class="svg-small-label">BATTERY</text>

</g>

<text x="400" y="155" text-anchor="middle"
                    class="svg-small-label">RESISTOR</text>

</g>

</g>

<text x="400" y="410" text-anchor="middle"
                    class="svg-small-label">SWITCH</text>

</g>

</svg>

</div>

<div class="canvas-bottom">
          <span id="circuitStatus">● CIRCUIT CLOSED</span>
          <span>DC SERIES CIRCUIT</span>
        </div>

</div>

<div class="panel-title">
            <span class="section-label">PARAMETERS</span>
            <h3>Circuit Controls</h3>
          </div>

<div class="slider-header">
              <label for="voltageSlider">Battery Voltage</label>
              <strong id="voltageValue">9 V</strong>
            </div>

</div>

<div class="slider-header">
              <label for="resistanceSlider">Resistance</label>
              <strong id="resistanceValue">220 Ω</strong>
            </div>

</div>

<div>
              <strong>Power Switch</strong>
              <small>Open or close the circuit</small>
            </div>

</div>

<div class="panel-title">
            <span class="section-label">LIVE MEASUREMENTS</span>
            <h3>Electrical Readings</h3>
          </div>

<div class="reading">
              <span>VOLTAGE</span>
              <strong id="readVoltage">9.0 <small>V</small></strong>
            </div>

<div class="reading">
              <span>CURRENT</span>
              <strong id="readCurrent">40.9 <small>mA</small></strong>
            </div>

<div class="reading">
              <span>RESISTANCE</span>
              <strong id="readResistance">220 <small>Ω</small></strong>
            </div>

<div class="reading">
              <span>POWER</span>
              <strong id="readPower">0.37 <small>W</small></strong>
            </div>

</div>

</div>

</main>

</div>

</div>

</body>
</html>

</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #080d18;
  color: #e5edf7;
  font-family: 'DM Sans', sans-serif;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.volt-app {
  min-height: 100vh;
  background: #080d18;
}

.volt-header {
  height: 90px;
  padding: 0 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff12;
  background: #0b1220;
}

.volt-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f7c85c;
  color: #101827;
  font-size: 26px;
}

.volt-brand strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 23px;
  letter-spacing: -1px;
}

.volt-brand strong span {
  color: #f7c85c;
}

.volt-brand small {
  display: block;
  margin-top: 4px;
  color: #718096;
  font-size: 9px;
  letter-spacing: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 25px;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #8c9bad;
}

.live-indicator span {
  width: 7px;
  height: 7px;
  background: #6ce7d2;
  border-radius: 50%;
  box-shadow: 0 0 12px #6ce7d2;
}

.header-button {
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 11px 18px;
  background: #141f30;
  color: #d8e3ef;
  font-size: 12px;
}

.header-button:hover {
  background: #1e2c42;
}

.volt-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: calc(100vh - 90px);
}

.component-sidebar {
  padding: 32px 20px;
  background: #0d1523;
  border-right: 1px solid #ffffff12;
}

.section-label {
  color: #f7c85c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.sidebar-heading h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 25px;
  line-height: 1.2;
  margin: 14px 0;
}

.sidebar-heading p {
  color: #8190a4;
  font-size: 12px;
  line-height: 1.8;
}

.component-list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.component-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px;
  text-align: left;
  border: 1px solid #27364b;
  border-radius: 12px;
  background: #131e2f;
  color: white;
  transition: .25s;
}

.component-card:hover {
  border-color: #f7c85c;
  transform: translateX(4px);
  background: #1a2940;
}

.component-card.selected {
  border-color: #f7c85c;
  background: #f7c85c12;
}

.component-icon {
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: #26374a;
}

.battery-icon { color: #f7c85c; }
.resistor-icon { color: #6ce7d2; }
.led-icon { color: #ff8c9d; }
.switch-icon { color: #8faeff; }

.component-info {
  flex: 1;
}

.component-info strong {
  display: block;
  font-size: 12px;
}

.component-info small {
  display: block;
  margin-top: 5px;
  color: #7e8da2;
  font-size: 10px;
}

.add-symbol {
  color: #8b9aae;
  font-size: 19px;
}

.sidebar-tip {
  margin-top: 35px;
  padding: 18px;
  background: #f7c85c0d;
  border: 1px solid #f7c85c2b;
  border-radius: 12px;
  display: flex;
  gap: 12px;
}

.sidebar-tip span {
  font-size: 20px;
}

.sidebar-tip p {
  font-size: 11px;
  line-height: 1.8;
  color: #aab6c6;
  margin: 0;
}

.sidebar-tip strong {
  color: #f7c85c;
}

/* WORKSPACE */

.workspace {
  padding: 30px;
  min-width: 0;
}

.workspace-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

.workspace-toolbar h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 25px;
  margin: 10px 0 0;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
}

.tool-button {
  padding: 10px 16px;
  border: 1px solid #2b3a50;
  border-radius: 8px;
  background: #131f30;
  color: #8e9fb4;
  font-size: 11px;
}

.tool-button.active,
.tool-button:hover {
  background: #f7c85c;
  color: #101827;
  border-color: #f7c85c;
}

/* CIRCUIT CANVAS */

.circuit-canvas {
  position: relative;
  overflow: hidden;
  border: 1px solid #2a3a50;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 45%, #1a2b40, transparent 60%),
    #101b2b;
  min-height: 470px;
}

.canvas-grid {
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(#ffffff12 1px, transparent 1px),
    linear-gradient(90deg, #ffffff12 1px, transparent 1px);
  background-size: 25px 25px;
}

.canvas-top-label {
  position: absolute;
  top: 20px;
  left: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8ea0b6;
  font-size: 10px;
  letter-spacing: 2px;
  z-index: 5;
}

.canvas-dot {
  width: 7px;
  height: 7px;
  background: #6ce7d2;
  border-radius: 50%;
}

.circuit-diagram {
  position: relative;
  z-index: 2;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#circuitSVG {
  width: 100%;
  max-width: 850px;
  height: 100%;
}

.circuit-wire {
  fill: none;
  stroke: #4d6078;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.active-wire {
  fill: none;
  stroke: #f7c85c;
  stroke-width: 3;
  stroke-dasharray: 12 16;
  stroke-linecap: round;
  filter: url(#wireGlow);
  animation: electricityFlow 1.5s linear infinite;
}

.active-wire.off {
  opacity: 0;
  animation-play-state: paused;
}

.svg-component {
  cursor: pointer;
  transition: opacity .3s;
}

.component-background {
  fill: #17263a;
  stroke: #4b6078;
  stroke-width: 2;
}

.svg-label {
  fill: #e4ecf6;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}

.svg-small-label {
  fill: #8192a7;
  font-size: 11px;
  letter-spacing: 2px;
}

.canvas-bottom {
  position: absolute;
  bottom: 20px;
  left: 25px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #71849a;
}

#circuitStatus {
  color: #6ce7d2;
}

/* PANELS */

.workspace-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.control-panel,
.readings-panel {
  padding: 25px;
  border: 1px solid #26364c;
  border-radius: 14px;
  background: #111d2d;
}

.panel-title h3 {
  margin: 9px 0 25px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
}

.slider-group {
  margin-bottom: 25px;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 12px;
}

.slider-header strong {
  color: #f7c85c;
}

input[type="range"] {
  width: 100%;
  height: 6px;
  accent-color: #f7c85c;
  cursor: pointer;
}

.slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: #73849b;
  font-size: 10px;
}

.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid #ffffff12;
}

.switch-row strong {
  display: block;
  font-size: 12px;
}

.switch-row small {
  display: block;
  margin-top: 5px;
  color: #7e90a6;
  font-size: 10px;
}

.power-toggle {
  width: 52px;
  height: 29px;
  border: none;
  border-radius: 20px;
  padding: 4px;
  background: #435167;
  transition: .3s;
}

.power-toggle span {
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: white;
  transition: .3s;
}

.power-toggle.on {
  background: #6ce7d2;
}

.power-toggle.on span {
  transform: translateX(23px);
}

.readings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.reading {
  padding: 20px;
  border: 1px solid #2c3c52;
  border-radius: 11px;
  background: #18263a;
}

.reading span {
  display: block;
  color: #8294aa;
  font-size: 10px;
  letter-spacing: 1.5px;
}

.reading strong {
  display: block;
  margin-top: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 25px;
  color: #f1f5fa;
}

.reading small {
  font-size: 12px;
  color: #8ea1b8;
}

.formula-box {
  margin-top: 15px;
  padding: 20px;
  border-radius: 10px;
  background: #f7c85c0d;
  border: 1px solid #f7c85c25;
}

.formula-box span {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: #f7c85c;
}

.formula-box strong {
  display: block;
  margin-top: 10px;
  font-size: 23px;
  font-family: 'Space Grotesk', sans-serif;
}

.formula-box p {
  margin-bottom: 0;
  color: #9aaabd;
  font-size: 12px;
}

/* ANIMATIONS */

@keyframes electricityFlow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -56;
  }
}

@keyframes ledPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

@media (max-width: 1100px) {
  .volt-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

.workspace-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 750px) {
  .volt-layout {
    display: flex;
    flex-direction: column;
  }

.component-sidebar {
    border-right: none;
    border-bottom: 1px solid #ffffff12;
  }

.component-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

.workspace {
    padding: 20px;
  }

.workspace-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

.circuit-canvas {
    min-height: 350px;
  }

.circuit-diagram {
    height: 330px;
  }

.volt-header {
    padding: 0 18px;
  }

.live-indicator {
    display: none;
  }
}

@media (max-width: 420px) {
  .component-list {
    grid-template-columns: 1fr;
  }

.toolbar-actions {
    flex-wrap: wrap;
  }

.readings-grid {
    grid-template-columns: 1fr 1fr;
  }

.reading {
    padding: 12px;
  }

.reading strong {
    font-size: 20px;
  }
}

var voltage = 9;
var resistance = 220;
var circuitClosed = true;
var ledEnabled = true;
var resistorEnabled = true;
var batteryEnabled = true;
var switchEnabled = true;

var voltageSlider = document.getElementById("voltageSlider");
var resistanceSlider = document.getElementById("resistanceSlider");

var activeWire = document.getElementById("activeWire");
var ledBulb = document.getElementById("ledBulb");
var ledHalo = document.getElementById("ledHalo");
var switchLever = document.getElementById("switchLever");

var electronLayer = document.getElementById("electronLayer");

var electrons = [];
var animationFrame = null;
var lastFrameTime = 0;

var wirePath = document.querySelector(".circuit-wire");
var wireLength = wirePath.getTotalLength();

function calculateCircuit() {
  var current = 0;
  var power = 0;

var connected =
    batteryEnabled &&
    resistorEnabled &&
    circuitClosed;

if (connected) {
    current = voltage / resistance;
    power = voltage * current;
  }

return {
    voltage: voltage,
    resistance: resistance,
    current: current,
    power: power,
    connected: connected
  };
}

function updateReadings() {
  var result = calculateCircuit();

document.getElementById("voltageValue").innerHTML =
    voltage + " V";

document.getElementById("resistanceValue").innerHTML =
    resistance + " Ω";

document.getElementById("batteryLabel").textContent =
    voltage + "V";

document.getElementById("resistorLabel").textContent =
    resistance + " Ω";

document.getElementById("readVoltage").innerHTML =
    voltage.toFixed(1) + " <small>V</small>";

document.getElementById("readCurrent").innerHTML =
    (result.current * 1000).toFixed(1) +
    " <small>mA</small>";

document.getElementById("readResistance").innerHTML =
    resistance + " <small>Ω</small>";

document.getElementById("readPower").innerHTML =
    result.power.toFixed(2) + " <small>W</small>";

document.getElementById("formulaExplanation").innerHTML =
    voltage + " V ÷ " +
    resistance + " Ω = " +
    result.current.toFixed(4) + " A";

updateCircuitVisuals(result);
}

function updateCircuitVisuals(result) {
  var status = document.getElementById("circuitStatus");

if (result.connected) {
    activeWire.classList.remove("off");

status.innerHTML = "● CIRCUIT CLOSED";
    status.style.color = "#6ce7d2";

switchLever.setAttribute("x2", "425");
    switchLever.setAttribute("y2", "350");
  } else {
    activeWire.classList.add("off");

status.innerHTML = "● CIRCUIT OPEN";
    status.style.color = "#ff8c9d";

switchLever.setAttribute("x2", "410");
    switchLever.setAttribute("y2", "325");
  }

var brightness = Math.min(result.current / 0.05, 1);

if (result.connected && ledEnabled) {
    ledBulb.setAttribute("fill", "#ffc857");
    ledHalo.setAttribute("opacity", brightness * 0.8);
    ledHalo.setAttribute("r", 35 + brightness * 25);
  } else {
    ledBulb.setAttribute("fill", "#334155");
    ledHalo.setAttribute("opacity", "0");
  }

activeWire.style.animationDuration =
    Math.max(0.3, 2 - result.current * 20) + "s";
}

function createElectrons() {
  electronLayer.innerHTML = "";
  electrons = [];

for (var i = 0; i < 22; i++) {
    var electron = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "circle"
    );

electron.setAttribute("r", "4");
    electron.setAttribute("fill", "#7ce8ff");
    electron.setAttribute("opacity", "0.9");

electron.style.filter =
      "drop-shadow(0 0 5px #7ce8ff)";

electronLayer.appendChild(electron);

electrons.push({
      element: electron,
      position: (i / 22) * wireLength
    });
  }
}

function animateElectrons(timestamp) {
  if (!lastFrameTime) {
    lastFrameTime = timestamp;
  }

var delta = Math.min((timestamp - lastFrameTime) / 1000, 0.05);
  lastFrameTime = timestamp;

var result = calculateCircuit();

electrons.forEach(function(electron) {
    if (result.connected) {
      var speed = 40 + result.current * 1000;

electron.position += speed * delta;

if (electron.position > wireLength) {
        electron.position -= wireLength;
      }

var point = wirePath.getPointAtLength(electron.position);

electron.element.setAttribute("cx", point.x);
      electron.element.setAttribute("cy", point.y);

electron.element.setAttribute("opacity", "0.9");
    } else {
      electron.element.setAttribute("opacity", "0");
    }
  });

animationFrame = requestAnimationFrame(animateElectrons);
}

function toggleCircuit() {
  circuitClosed = !circuitClosed;

var toggle = document.getElementById("powerSwitch");

toggle.classList.toggle("on", circuitClosed);

updateReadings();
}

function setPreset(type) {
  var buttons = document.querySelectorAll(".tool-button");

buttons.forEach(function(button) {
    button.classList.remove("active");
  });

if (type === "basic") {
    voltage = 9;
    resistance = 220;
    ledEnabled = true;

document.getElementById("presetBasic").classList.add("active");
  }

if (type === "led") {
    voltage = 5;
    resistance = 330;
    ledEnabled = true;

document.getElementById("presetLED").classList.add("active");
  }

if (type === "high") {
    voltage = 24;
    resistance = 470;
    ledEnabled = true;

document.getElementById("presetHigh").classList.add("active");
  }

circuitClosed = true;

voltageSlider.value = voltage;
  resistanceSlider.value = resistance;

document.getElementById("powerSwitch").classList.add("on");

updateReadings();
}

function resetCircuit() {
  batteryEnabled = true;
  resistorEnabled = true;
  ledEnabled = true;
  switchEnabled = true;

setPreset("basic");

document.querySelectorAll(".component-card").forEach(
    function(card) {
      card.classList.remove("selected");
    }
  );
}

voltageSlider.addEventListener("input", function() {
  voltage = parseFloat(this.value);
  updateReadings();
});

resistanceSlider.addEventListener("input", function() {
  resistance = parseFloat(this.value);
  updateReadings();
});

document.getElementById("powerSwitch").addEventListener(
  "click",
  toggleCircuit
);

document.getElementById("switchComponent").addEventListener(
  "click",
  toggleCircuit
);

document.getElementById("presetBasic").addEventListener(
  "click",
  function() {
    setPreset("basic");
  }
);

document.getElementById("presetLED").addEventListener(
  "click",
  function() {
    setPreset("led");
  }
);

document.getElementById("presetHigh").addEventListener(
  "click",
  function() {
    setPreset("high");
  }
);

document.getElementById("resetCircuit").addEventListener(
  "click",
  resetCircuit
);

document.querySelectorAll(".component-card").forEach(
  function(card) {
    card.addEventListener("click", function() {
      var component = this.getAttribute("data-component");

this.classList.toggle("selected");

if (component === "battery") {
        batteryEnabled = !batteryEnabled;
      }

if (component === "resistor") {
        resistorEnabled = !resistorEnabled;
      }

if (component === "led") {
        ledEnabled = !ledEnabled;
      }

if (component === "switch") {
        toggleCircuit();
      }

updateReadings();
    });
  }
);

createElectrons();
updateReadings();

animationFrame = requestAnimationFrame(animateElectrons);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground