UTE

by Kaihgi

HTML

<div style="position: relative;">
    <div style="position: absolute; overflow: auto; width: 339px; height: 153px; left: 45px; top: 693px;">
        <b>Jullie kennen het vast nog wel, Unmasking the Evil.</b><br>
Dit jaar hebben wij het iets anders gedaan dan vorig jaar!
<br><br>
<b>Voor het eerste gedeelte</b> van de code moet je gaan achterhalen wie de dader is aan de hand van 10 hints die in de blog op het bloggers account staat.
<br><br>
<b>Voor het tweede gedeelte</b> van de code ga je naar het topic 'Who got killed'. Daar moet je een soort black storie game spelen, alleen hebben we je al een voorsprong gegeven en ook 13 hints op het topic geplaatst.
<br><br>
<b><u>De set die je kan winnen:</u></b><br>
<a href="https://virtualpopstar.com/clothing/avatarmanagement?x=set_info&set_id=justavampiregirliecosplayingasdraculaura" target="_blank"><img src="https://i.imgur.com/90tjM0S.png"></a>
<br>De set is heel de maand <b>OKTOBER</b> te claimen!
<br><br>
De code is in twee delen gesplitst, voor deel één moet je naar de blog gaan (zie knop aan de zijkant). Voor het tweede deel, ga je zelf een story uit de hints halen. Let daarbij op alle Powers die iedereen heeft (zie tweede bericht op topic). 
<br><br>
Mail je story naar het <b>SocialMediaTeam</b> account en als het ongeveer klopt met wat wij hebben, of wij zien dat je er moeite in hebt gestoken om het mysterie te ontrafelen, krijg je het tweede deel! 
Plak de twee antwoorden achter elkaar en <b>je krijgt de code.</b>
<br><br>
<i>Kom je er niet uit?</i> Mail dan gerust één van ons of laat een reactie achter op het topic.
<br><br>
Na oktober zal er in de blog (onderaan) een korte eind story komen! Één van ons zal dan een reactie plaatsen onder de blog om hem omhoog te halen! Voor de volledige uitgebreidere versie van het verhaal ga je naar de VirtualPopstar Instagram.
<br><br>
<b>Ik hoop dat jij Halloween kan redden!</b>
<br><br>
Lot of spooks,<br>
Charonia Styx, Mysai & Nelenix
    </div>
    <img...

CSS

.img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100%;
  max-width: 100%;
}

.popup {
  display: none;
  position: absolute;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  padding: 10px;
  z-index: 1000;
  transform: translate(15%, -130%);
}

.popup img {
  max-width: 640px;
  max-height: 830px;
  border-radius: 5px;
}

.popup a {
  color: blue;
  text-decoration: underline;
}


* {
  font-family: Arial, sans-serif;
  font-size: 12.5px;
}

JavaScript

import $ from "https://esm.sh/jquery"
document.querySelectorAll("area[data-popup]").forEach((area) => {
  area.addEventListener("click", function (event) {
    event.preventDefault()
    const popupId = this.getAttribute("data-popup")
    const popup = document.getElementById(popupId)

    // Hide any visible popups
    document
      .querySelectorAll(".popup")
      .forEach((p) => (p.style.display = "none"))

    // Show the clicked popup
    const rect = this.getBoundingClientRect()
    popup.style.left = `${rect.left + window.scrollX}px`
    popup.style.top = `${rect.bottom + window.scrollY}px`
    popup.style.display = "block"
  })
})

document.addEventListener("click", function (event) {
  if (!event.target.matches("area[data-popup]")) {
    document
      .querySelectorAll(".popup")
      .forEach((p) => (p.style.display = "none"))
  }
})

document.querySelectorAll(".button").forEach((button) => {
  button.addEventListener("click", function () {
    const textBoxClass = this.className.split(" ")[1]
    document
      .querySelectorAll(".hide")
      .forEach((el) => (el.style.display = "none"))
    document.querySelector("." + textBoxClass).style.display = "block"
  })
})

$(".button").click(function () {
  var textBox = this.className.split(" ")[1]
  $(".hide").hide()
  $("." + textBox).show()
})