Inktober 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: 1100px; background: #8bc7de url(https://i.imgur.com/65fcUqI.png);">

<div id="cornerImageContainer" style="position: absolute; top: 5px; left: 25px; width: 180px; height: auto; cursor: pointer;">
    <a href="https://en.virtualpopstar.com/social/forum?category=1&topic=363092" target="_blank" style="position: relative; display: block;">
        <img id="cornerImage" src="https://i.imgur.com/Z6TKy4D.png" alt="Corner Image" style="width: 180px; height: auto;">
        <span id="cornerImageText" style="position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); font-family: 'Patrick Hand SC', sans-serif; color: white; font-size: 20px; text-align: center; font-weight: bold;">Discussion</span>
    </a>
</div>

<div id="rightCornerImageContainer" style="position: absolute; top: 5px; left: 710px; width: 180px; height: auto; cursor: pointer;">
    <img id="rightCornerImage" src="https://i.imgur.com/Z6TKy4D.png" alt="Right corner Image" style="width: 180px; height: auto;">
    <span id="rightCornerImageText" style="position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); font-family: 'Patrick Hand SC', sans-serif; color: white; font-size: 20px; text-align: center; font-weight: bold;">Prompt list</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="closeMessage();"></div>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #66658f; padding: 20px; border-radius:...

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!important;
    border: none!important;
    outline: none!important;
    float: right!important;
    font-size: 40px!important;
    line-height: 24px!important;
    cursor: pointer!important;
    color: #fff!important;
    font-family: 'Patrick Hand SC', sans-serif;
    color: white;
}

.addMessage {
    
}

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

.door {
    background: #020031;
    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: white;
    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: #66658f;
    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: white;
    font-size: 30px;
    font-weight: bold;
   ...

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])
  }
}

$(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] = ""
  codeMessage[20] = ""
  codeMessage[21] = ""
  codeMessage[22] = ""
  codeMessage[23] =...