Merry MakeOver Styles

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: 960px; height: 1000px; background: #8bc7de url(https://i.imgur.com/juWy4AV.png); usemap=#image-map">

<!-- Topic aanklikbaar -->
<div id="cornerImageContainer" style="position: absolute; top: 710px; left: 330px; width: 300px; height: auto; cursor: pointer;">
    <a href="https://virtualpopstar.com/social/forum?category=11&topic=992557" target="_blank" style="position: relative; display: block;">
        <img id="cornerImage" src="https://i.imgur.com/E8rUkKA.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();">
					×
				</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: #fff; display: none;"></p> <!-- Message text for when showing text -->
    
  </div>
</div>

	<!-- 
		Text box above
			rgba(255, 255, 255, 0.8) for the BG colour of the box
			#252525 for the colour of the text
	-->
   
  <!-- Alle deurtjes - hoe groot -->
	<div class="doorContainer flexBox" style="position: absolute; width: 688px; top: 338px"></div>
	<!--...

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: white;
    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: #748445;
    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: #fff;
    background: white;
    border-radius: 90px;
    }
    
    #imagePopup img {
  display: none; /* Hide the image by default */
}

.popupMessage {
  display: none; /* Initially hidden */
  font-family: 'Patrick Hand SC', sans-serif;
    color: #748445;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
   ...

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 = [1,3,5,7,9,11,13,15,17,19,21,23,25,26,31]; 

 // 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 > 2024) {
    $(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] = ""
  codeMessage[7] = ""
  codeMessage[8] = ""
  codeMessage[9] = ""
  codeMessage[10] = ""
  codeMessage[11] = ""
  codeMessage[12] = ""
  codeMessage[13] = ""
  codeMessage[14] =...