Time to be wicked!

by bluesweater

HTML

<!-- Don't put this in VP : Don't delete this otherwise the doors wil disappear-->
	<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  </head>

<!-- Everything from here on in VP -->

<!-- HTML -->
<!-- Achtergrond -->
<div class="layoutContainer flexBox" style="position: relative; width: 688px; height: 688px; background: url(https://i.imgur.com/jvvU7XI.png)">

    <div style="color: white; position: absolute; overflow: auto; width: 569px; height: 335px; left: 96px; top: 658px;">
<center><i><b>LET OP</b> Thema 1, 3 en 5 gaan over het namaken van looks. Dit moet geen exacte kopie zijn, maar door dezelfde kleuren (en eventueel deels dezelfde items) te gebruiken kan je zo'n look namaken.</i></center>
    </div>

<!-- Topic aanklikbaar -->
<div id="cornerImageContainer" style="position: absolute; top: 180px; left: 340px; width: 300px; height: auto; cursor: pointer;">
    <a href="https://virtualpopstar.com/social/forum?category=11&topic=993293" target="_blank" style="position: relative; display: block;">
        <img id="cornerImage" src="https://i.imgur.com/W5vOVht.png" alt="Corner Image" style="width: 320px; height: auto;">
    </a>
</div>

<div id="imagePopup" class="popupContainer" style="display: none; position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 3;">
  <div class="darkScreen" style="width: 100%; height: 100%; background: rgba(30, 30, 30, 0.8);" onclick="closeMessage();"></div>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 20px; border-radius: 8px; text-align: center;">
  <button class="closeMessage" onclick="closeMessage();">
					X
				</button>
    <img src="https://i.imgur.com/0mfy6Zu.png" alt="Popup Image" style="max-width: 90%; max-height: 90%;"> <!-- Image for when showing an image -->
    <p class="popupMessage" style="width: 100%; padding: 10px; border-radius: 5px; background:...

CSS

.layoutContainer *,
.waitMessage * {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.flexBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.addTitle {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    line-height: 24px;
}

.closeMessage {
    background: none!important;
    border: none!important;
    outline: none!important;
    float: right!important;
    font-size: 40px!important;
    line-height: 24px!important;
    cursor: pointer!important;
    color: #000!important;
    font-family: 'Patrick Hand SC', sans-serif;
    color: black;
}

.addMessage {
    
}

.doors {
    position: relative;
    width: 105px;
    height: 105px;
    margin: 8px;
}

.door {
    background: #fecfe3;
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 190px;
    cursor: pointer;
    transform: perspective(0px) rotateY(0deg);
    transform-origin: 0% 50%;
    transition: all 0.7s ease;
    box-shadow: none;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.doorText {
    font-family: 'Patrick Hand SC', sans-serif;
    color: #1c2120;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    font-weight: bold;
}

.door.open {
    transform: perspective(600px) rotateY(-105deg);
    box-shadow: 20px 0px 15px -7px rgba(37, 37, 37, 0.1);
}

.behindDoor {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 3px;
    border-radius: 8px;
    text-align: center;
    color: #fecfe3;
    background: #fecfe3;
    border-radius: 90px;
    }
    
    #imagePopup img {
  display: none; /* Hide the image by default */
}

.popupMessage {
  display: none; /* Initially hidden */
  font-family: 'Patrick Hand SC',...

JavaScript

// JAVASCRIPT

$("head").append(
  '<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap" rel="stylesheet">',
)

function openDoor(doorID) {
  var dateToday = parseInt(
    new Date().toLocaleString("en-GB", {
      timeZone: "Europe/Paris",
      day: "2-digit",
    }),
  )
  var dateYear = parseInt(
    new Date().toLocaleString("en-GB", {
      timeZone: "Europe/Paris",
      year: "numeric",
    }),
  )

  const thisDoor = "#door" + doorID
  const doorDates = [16,18,20,22,24,26]; 

 // Check if doorDates[doorID - 1] is defined and if today's date matches it
  if (doorDates[doorID - 1] && dateToday >= doorDates[doorID - 1]) {
    $("#door" + doorDates[doorID - 1]).parent().removeClass("today");
  }

  if (dateToday >= doorDates[doorID - 1] || dateYear > 2025) {
    $(thisDoor).toggleClass("open");
  } else if (dateToday === doorDates[doorID - 1] - 1) {
    $(".waitMessage").css("display", "flex").hide().fadeIn(100);
    $(".addTitle").html("Bijna zover!");
    $(".addMessage").html("Nog maar 1 dag!");
  } else if (doorDates[doorID - 1] > dateToday) {
    const daysLeft = doorDates[doorID - 1] - dateToday;
    $(".waitMessage").css("display", "flex").hide().fadeIn(100);
    $(".addTitle").html("Nog even geduld!");
    $(".addMessage").html(
      "Het duurt nog " +
        daysLeft +
        " dag" +
        (daysLeft > 1 ? "en" : "") +
        " tot het thema bekend is!"
    );
  }

  if ($(thisDoor).hasClass("open")) {
    $(thisDoor).prev(".behindDoor").html(behindDoor[doorID]);
  }
}
  
$(document).ready(function () {
  codeMessage = []

  // Messages for all the days that appear in the above text box!
  codeMessage[1] = ""
  codeMessage[2] = ""
  codeMessage[3] = ""
  codeMessage[4] = ""
  codeMessage[5] = ""
  codeMessage[6] = ""


  var doorNr = 1
  var rows = 2
  var cols = 3

  for (row = 0; row < rows; row++) {
    for (col = 0; col < cols; col++) {
    ...