October dressup 2024

by Kofod

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 -->
<div class="layoutContainer flexBox" style="position: relative; width: 960px; height: 800px; background: #8bc7de url(https://i.imgur.com/UTTTRlr.png);">

<div id="cornerImageContainer" style="position: absolute; top: 10px; left: 10px; width: 200px; height: auto; cursor: pointer;">
    <img id="cornerImage" src="https://i.imgur.com/EJeWMjQ.png" alt="Corner Image" style="width: 200px; height: auto;">
    <span id="cornerImageText" style="position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); font-family: 'Patrick Hand SC', sans-serif; color: black; font-size: 20px; text-align: center; font-weight: bold;">Set preview</span>
</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="closePopup();"></div>
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <img src="https://i.imgur.com/CWykVX2.png" alt="Popup Image" style="max-width: 90%; max-height: 90%;">
        <button onclick="closePopup();" style="position: absolute; top: 10px; right: 10px; font-size: 20px; background: none; border: none; color: white; cursor: pointer;">×</button>
    </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
	-->
	<div class="doorContainer flexBox" style="position: absolute; width: 960px; top: 170px;"></div>
	<!-- Image for the title of the Advent Calendar -->
	<img style="position: absolute; pointer-events: none; top: 0px;" src="https://i.imgur.com/gAOseSR.png">
	

	<!-- The wait message you see...

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;
    color: #fff;
}

.addMessage {
    
}

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

.door {
    background: #561d19;
    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: black;
    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: #252525;
    background: #b29896;
    border-radius: 90px;
    }

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' }));
    
    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');
    } else if (dateToday == doorID - 1) {
        $('.waitMessage').css('display', 'flex').hide().fadeIn(100);
        $('.addTitle').html('Not quite yet!');
        $('.addMessage').html('Just one more day!');
    } else if (doorID > dateToday) {
        var daysLeft = doorID - dateToday;
        $('.waitMessage').css('display', 'flex').hide().fadeIn(100);
        $('.addTitle').html('BE PATIENT!');
        $('.addMessage').html('You have to wait ' + daysLeft + ' more day' + (daysLeft > 1 ? 's' : '') + ', don&#39t lose patience!');
    }

    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] = ('');
	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] = ('');
	codeMessage[15] = ('');
	codeMessage[16] = ('');
	codeMessage[17] = ('');
	codeMessage[18] = ('');
	codeMessage[19] =...