Spooky Movies

by Kofod

HTML

<div class="spookometer" role="application" aria-label="Spook-O-Meter">
  <img class="bg" src="https://i.ibb.co/zWjnvVNG/6.png" alt="" draggable="false" />

  <!-- Arrow -->
  <img
    class="arrow"
    id="arrow"
    src="https://i.ibb.co/MycgB5B9/sarrow.png"
    alt="Spook-O-Meter arrow"
    draggable="false"
  />

  <!-- Overlay -->
  <img
    class="overlay"
    src="https://i.ibb.co/p619zmwX/Intro-Herobrine-Laughing-Jack-Slenderman-Eyeless-jack-Jeff-the-killer-Ben-drowned-2.png"
    alt=""
    draggable="false"
  />

  <!-- Text box -->
  <div class="textbox" id="spookText" aria-live="polite"></div>

  <!-- Buttons -->
  <button
    class="spook-btn"
    data-level="scary"
    style="left: 464px; top: 256px; width: 191px; height: 81px;"
  >
    <img
      src="https://i.ibb.co/LD57CJkm/Casry.png"
      alt="Scary area"
      draggable="false"
    />
  </button>

  <button
    class="spook-btn"
    data-level="nottoo"
    style="left: 466px; top: 338px; width: 188px; height: 82px;"
  >
    <img
      src="https://i.ibb.co/xSSyfyT1/notspooks.png"
      alt="Not too spooky"
      draggable="false"
    />
  </button>

  <button
    class="spook-btn"
    data-level="vibes"
    style="left: 471px; top: 421px; width: 181px; height: 78px;"
  >
    <img
      src="https://i.ibb.co/q3PWNt9X/spookvibe.png"
      alt="Just spooky vibes"
      draggable="false"
    />
  </button>
</div>

CSS

.spookometer {
  position: relative;
  width: 688px;
  height: 500px;
  overflow: hidden;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* Only top-level layout images fill the background */
.spookometer > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 688px;
  height: 500px;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.spookometer .bg { z-index: 1; }
.spookometer .overlay { z-index: 3; }

/* Arrow (73x42) pivot at 550x250 */
.spookometer .arrow {
  position: absolute;
  width: 73px;
  height: 42px;
  left: 560px;
  top: 250px;
  transform-origin: 0px 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 500ms ease-in-out;
  z-index: 4;
  pointer-events: none;
}

/* Textbox */
.spookometer .textbox {
  position: absolute;
  left: 46px;
  top: 153px;
  width: 320px;
  height: 290px;
  z-index: 5;
  text-align: center;
  color: #f5f5f5;
  line-height: 1.35;
  backdrop-filter: blur(2px);
  overflow: auto;
  padding: 10px 12px;
}

/* Button images placed with inline coords */
.spookometer .spook-btn {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 7;
  transition: transform 120ms ease;
}
.spookometer .spook-btn:hover {
  transform: scale(1.05);
}

/* Make the image fill its box */
.spookometer .spook-btn img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Optional: scrollbar style */
.spookometer .textbox::-webkit-scrollbar {
  width: 8px;
}
.spookometer .textbox::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
}
.spookometer .textbox::-webkit-scrollbar-track {
  background: transparent;
}

JavaScript

(function () {
  const ANGLES = {
    intro: -90,
    vibes: -135,
    nottoo: -90,
    scary: -45,
  };

  const INTRO_TEXT = `
     <strong>Welcome to the Spook-O-Meter! 🎃</strong><br><br>
      Today we will show you a list of spooky movies, just click the Spook-O-Meter on the right to select your scare limit.<br>
      Then we will show you our movie suggestions!
      The vibes are:<br>
      <em>Just spooky vibes</em>, <em>Not too spooky</em>, or enter the <em>Scary area</em>…<br><br>
      The needle will swing and this panel will explain what you’ve summoned. Good luck.
  `;

  const TEXTS = {
    vibes: `<strong>Just Spooky Vibes</strong><br><br>
     
   Beetlejuice 1 + 2<br>
   Corspe Bride<br>
   Frankenweenie<br>
   Edward Scissor Hands<br>
   Coraline<br>
   Paranorman<br>
   The Addams Family<br>
   The Nightmare Before Christmas<br>
   Hocus Pocus<br>
   Haunted Mansion<br>
   Scooby-Doo<br>
   Monster House<br>
   Casper<br>
   Witches<br>
   Little Shop Of Horror<br>
   Fright Night<br>
   Twitches<br>
   Halloween Town<br>
</ul>`,
    nottoo: `<strong>Not Too Spooky</strong><br><br>
     
   The Shining<br>
   The Blair Witch Project<br>
   The Scream Saga<br>
   The Halloween Franchise<br>
   Friday 13th<br>
   The Chucky saga<br>
   The Saw franchise<br>
   1408<br>
   A Quiet Place<br>
   Rocky Horror Picture Show<br>
</ul>`,
    scary: `<strong>Scary Area</strong><br><br>
     
   The Conjuring<br>
   Mama<br>
   Insidious<br>
   Pet Cemetery<br>
   The Annabelle Triology<br>
   Terrifier 1 + 2<br>
   Us<br>
   It 1 + 2<br>
   The exorcist<br>
   Poltergeist<br>
   The Curse of Llorona<br>
   The nun<br>
   Sinister<br>
   Smile 1 + 2<br>
   Nosferatu<br>
</ul>`,
  };

  const arrow = document.getElementById("arrow");
  const box = document.getElementById("spookText");

  function setAngle(deg) {
    arrow.style.transform = `translateY(-50%) rotate(${deg}deg)`;
 ...