<!DOCTYPE html>
<html>
<head>
<title>Flashlight fun</title>
</head>
<body>

<div class="torch-app">
  <header>
    <div class="logo">Flashlight<span>.</span></div>
    <span class="subtitle">LIGHT UP THE DARK</span>
  </header>

<div class="message">
        <h1>Explore the unknown.</h1>
        <p>There is more than meets the eye.</p>
      </div>

<div class="secret secret1">HELLO!</div>
      <div class="secret secret2">YOU FOUND ME</div>
      <div class="secret secret3">&#9829;</div>
    </div>

<div class="darkness" id="darkness"></div>
    <div class="hint" id="hint">MOVE TO EXPLORE</div>
  </div>

<footer>
    A LITTLE EXPERIMENT WITH LIGHT
  </footer>
</div>

</body>
</html>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #0b0e16;
  color: white;
  font-family: Arial, sans-serif;
}

.torch-app {
  max-width: 1000px;
  margin: auto;
  padding: 30px 20px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.logo {
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 2px;
}

.logo span {
  color: #facc15;
}

.subtitle {
  color: #7d8799;
  font-size: 10px;
  letter-spacing: 2px;
}

.room {
  position: relative;
  height: 500px;
  overflow: hidden;
  border: 1px solid #31394a;
  border-radius: 16px;
  cursor: none;
  touch-action: none;
  background: #1b2941;
}

.room-content {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 25%, #405578, transparent 40%),
    linear-gradient(135deg, #283c5a, #172335);
}

.message {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
}

.message h1 {
  font-size: clamp(28px, 5vw, 50px);
  margin: 0 0 15px;
}

.message p {
  color: #b3c3d7;
  font-size: 14px;
}

.star {
  position: absolute;
  color: #fde68a;
  font-size: 32px;
}

.star1 { top: 15%; left: 12%; }
.star2 { top: 68%; left: 80%; font-size: 50px; }
.star3 { top: 75%; left: 20%; font-size: 20px; }

.moon {
  position: absolute;
  right: 15%;
  top: 12%;
  font-size: 85px;
  color: #fde68a;
}

.planet {
  position: absolute;
  left: 18%;
  bottom: 14%;
  font-size: 100px;
  color: #a78bfa;
  text-shadow: 15px -10px 0 #6d4eaa;
}

.secret {
  position: absolute;
  color: #86efac;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
}

.secret1 { top: 30%; left: 25%; }
.secret2 { bottom: 18%; right: 18%; }
.secret3 {
  top: 20%;
  right: 38%;
  font-size: 35px;
  color: #fb7185;
}

/* Flashlight darkness overlay */

.darkness {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 180px at 50% 50%,
    transparent 0%,
    rgba(0,0,0,.2) 40%,
    rgba(0,0,0,.96) 100%
  );
}

.hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff88;
  font-size: 10px;
  letter-spacing: 2px;
  pointer-events: none;
}

.controls {
  display: flex;
  align-items: center;
  gap: 35px;
  padding: 25px 0;
}

button {
  border: none;
  border-radius: 9px;
  padding: 15px 25px;
  background: #facc15;
  color: #1a1707;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background: #fde047;
}

.size-control {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 20px;
}

.size-control label {
  color: #9aa6ba;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
}

input[type="range"] {
  width: 100%;
  accent-color: #facc15;
}

footer {
  margin-top: 15px;
  padding-top: 20px;
  border-top: 1px solid #252d3d;
  color: #78859a;
  font-size: 10px;
  letter-spacing: 2px;
}

@media (max-width: 600px) {
  .room {
    height: 420px;
  }

.controls {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

.subtitle {
    display: none;
  }
}

const room = document.getElementById("room");
const darkness = document.getElementById("darkness");
const powerBtn = document.getElementById("powerBtn");
const sizeSlider = document.getElementById("sizeSlider");

let lightOn = true;
let beamSize = 180;
let x = 50;
let y = 50;

function updateLight() {
  if (!lightOn) {
    darkness.style.background = "rgba(0,0,0,0.98)";
    return;
  }

darkness.style.background =
    "radial-gradient(circle " + beamSize + "px at " +
    x + "% " + y + "%, " +
    "transparent 0%, " +
    "rgba(0,0,0,0.15) 35%, " +
    "rgba(0,0,0,0.98) 100%)";
}

room.addEventListener("pointermove", function (event) {
  const rect = room.getBoundingClientRect();

x = ((event.clientX - rect.left) / rect.width) * 100;
  y = ((event.clientY - rect.top) / rect.height) * 100;

updateLight();
});

powerBtn.addEventListener("click", function () {
  lightOn = !lightOn;

powerBtn.textContent = lightOn
    ? "TURN OFF"
    : "TURN ON";

updateLight();
});

sizeSlider.addEventListener("input", function () {
  beamSize = Number(sizeSlider.value);
  updateLight();
});

updateLight();

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