Christmas Calendar 2024

by Kofod

HTML

<!-- Don't put this in VP -->
	<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>

<!-- Everything from here on in VP -->
<!-- HTML -->
<div class="layoutContainer flexBox" style="position: relative; width: 940px; height: 1032px; background: #8bc7de url(https://i.imgur.com/Nhqhhhv.png);">
	
	<!-- 
		Text box above
			rgba(255, 255, 255, 0.8) for the BG colour of the box
			#252525 for the colour of the text
	-->
	<div class="textBox" style="position: absolute; overflow: auto; width: 714px; height: 180px; top: 70px; background: rgba(255, 255, 255, 0.8);  padding: 40px 50px 10px 50px; border-radius: 8px; text-align: justify; text-align-last: center; color: #252525;">
		 <div style="position: relative; z-index: 1;">
			<!-- Message in text box above -->
			After a year on hiatus, the Christmas Calendar is back!<br>
Before we start, let’s thank all the teams of VP who have been working in order to make this work! <br><br>

<b>We hope you all enjoy!</b><br><br>

In case you aren’t sure how the christmas calendar works, we’ll explain it to you: Each day a new door is available to open. Click the door and have a look at this message again, maybe something changed?<br>
Take a look at the stickied comment to get access to the calendar overview and the discussion thread!<br><br>

We have prepared a whole lot of fun for you this month, so keep your eyes open and come back every day to see what is behind the next door!<br><br>

We can’t wait to celebrate Christmas with you this year! And to all of you: <br>
<div style="text-align: center;">
  <img style="pointer-events: none; top: 0px;" src="https://i.imgur.com/5BD9JLh.png">
</div>
<br><br>

<b>From Teams of VP</b>
	</div>
  </div>
	<div class="doorContainer flexBox" style="position: absolute; width: 860px; top: 260px;"></div>
  
  
<!-- Audio element with Google Drive link to the MP3 file -->
<audio id="backgroundMusic"...

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: 'Patrick Hand SC', sans-serif;
    font-size: 24px;
    line-height: 24px;
}

.closeMessage {
    background: none;
    border: none;
    outline: none;
    float: right;
    font-size: 40px;
    line-height: 24px;
    cursor: pointer;
}

.addMessage {
    text-shadow: #fff 2px 0px, #fff 2px 2px, #fff 0px 2px, #fff -2px 2px, #fff -2px 0px, #fff -2px -2px, #fff 0px -2px, #fff 2px -2px;
}

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

.door {
    background: url(https://i.imgur.com/mkwJvff.png);
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 5px;
    cursor: pointer;
    transform: perspective(0px) rotateY(0deg);
    transform-origin: 0% 50%;
    transition: all 0.7s ease;
    box-shadow: none;
    backface-visibility: hidden;
}

.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: 10px;
    border-radius: 8px;
    text-align: center;
    color: #252525;
    background: rgba(255, 255, 255)
    }

JavaScript

// JAVASCRIPT

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

$(document).ready(function () {
  // If autoplay is blocked, start the music after first user interaction (click)
  var backgroundMusic = document.getElementById("backgroundMusic")
  backgroundMusic.play().catch(function (error) {
    console.log("Autoplay prevented: " + error)
  })

  $(document).one("click", function () {
    backgroundMusic.play().catch(function (error) {
      console.log("Autoplay prevented: " + error)
    })
  })
})

function openDoor(doorID) {
  var dateToday = new Date().getUTCDate()
  var dateYear = new Date().getFullYear()
  var thisDoor = "#door" + doorID

  if (dateToday == doorID) {
    $("#door" + dateToday)
      .parent()
      .removeClass("today")
  }
  // dateYear should be the current year
  if (dateToday >= doorID || dateYear > 2024) {
    $(thisDoor).toggleClass("open")
    if ($(thisDoor).hasClass("open")) {
      $(".textBox > div").html(codeMessage[doorID])
    }
  } else if (dateToday == doorID - 1) {
    $(".waitMessage").css("display", "flex").hide().fadeIn(100)
    $(".addTitle").html("ALMOST!")
    $(".addMessage").html("You only have to wait untill tomorrow!")
  } else if (doorID > dateToday) {
    $(".waitMessage").css("display", "flex").hide().fadeIn(100)
    $(".addTitle").html("BE PATIENT!")
    $(".addMessage").html(
      "You have to wait " +
        (doorID - dateToday) +
        " more days before you can open this present!",
    )
  }
  if ($(thisDoor).hasClass("open")) {
    $(thisDoor).prev(".behindDoor").html(behindDoor[doorID])
  }
}

function closeMessage() {
  $(".waitMessage").fadeOut(100)
  $(".puzzleContainer").fadeOut(100)
}

$(document).ready(function () {
  codeMessage = []

  // Messages for all the days that appear in the above text box!
  codeMessage[1] =
    'A test of memory awaits! <br> Match the pairs and prove your focus. How sharp is your mind...