Christmas Calendar 2024

by enbette

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...