Untitled

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Simple Lamp</title>
  <style>
    :root { --bg:#222; --off:#444; --on:#FFD76B; --glass:rgba(255,255,255,0.06);}
    html,body{height:100%;margin:0;font-family:sans-serif;background:var(--bg);display:flex;align-items:center;justify-content:center}
    .scene{display:flex;flex-direction:column;align-items:center;gap:18px}
    .lamp{
      width:160px;height:220px;border-radius:90px 90px 20px 20px/100px 100px 10px 10px;
      background:linear-gradient(180deg,var(--glass), #2a2a2a);box-shadow:0 10px 30px rgba(0,0,0,0.6);
      position:relative;transition:filter 300ms, background 300ms;
      display:flex;align-items:center;justify-content:center;
    }
    .bulb{
      width:90px;height:90px;border-radius:50%;background:var(--off);
      box-shadow:0 6px 18px rgba(0,0,0,0.6), inset 0 -6px 14px rgba(0,0,0,0.25);
      transition:background 300ms, box-shadow 300ms, transform 300ms;
    }
    .lamp.on .bulb{
      background:var(--on);
      box-shadow:0 20px 60px rgba(255, 215, 107, 0.25), 0 4px 8px rgba(0,0,0,0.35), inset 0 -8px 20px rgba(255,220,120,0.15);
      transform:translateY(-4px);
    }
    .switch{cursor:pointer;padding:8px 14px;border-radius:999px;background:#111;color:#fff;border:1px solid rgba(255,255,255,0.03)}
    .hint{color:#bbb;font-size:13px}
  </style>
</head>
<body>
  <div class="scene">
    <div id="lamp" class="lamp">
      <div class="bulb"></div>
    </div>
    <button id="toggle" class="switch">Toggle light</button>
    <div class="hint">Click the button or press <kbd>Space</kbd></div>
  </div>

  <script>
    const lamp = document.getElementById('lamp');
    const btn = document.getElementById('toggle');
    let on = false;
    function setOn(v){
      on = Boolean(v);
      lamp.classList.toggle('on', on);
      document.body.style.background = on ? 'radial-gradient(circle at 30% 10%, rgba(255,230,160,0.08), rgba(34,34,34,1))' : '#222';
      btn.textContent = on ? 'Turn off' : 'Turn on';
    }
    btn.addEventListener('click', ()=> setOn(!on));
    window.addEventListener('keydown', e => { if (e.code === 'Space') { e.preventDefault(); setOn(!on); }});
    setOn(false);
  </script>
</body>
</html>
Editor is loading...