ET: Spaces Travels 2025

by Kofod

HTML

<!-- Title -->
  <img src="https://i.imgur.com/piKYx3q.png" alt="Event Title" class="title-image">


  <!-- Planets -->
  <div id="mercury" class="planet" style="height:72px; width:65px; top:830px; left:120px; background-image: url('https://i.imgur.com/ME9F5rP.png');"></div>
  <div id="venus" class="planet" style="height:99px; width:66px; top:650px; left:209px; background-image: url('https://i.imgur.com/Gkpk4yq.png');"></div>
  <div id="earth" class="planet" style="height:89px; width:74px; top:710px; left:320px; background-image: url('https://i.imgur.com/0CobTF2.png');"></div>
  <div id="mars" class="planet" style="height:91px; width:54px; top:826px; left:375px; background-image: url('https://i.imgur.com/OEU98cx.png');"></div>
  <div id="jupiter" class="planet" style="height:138px; width:116px; top:556px; left:483px; background-image: url('https://i.imgur.com/Mnbk5IB.png');"></div>
  <div id="saturn" class="planet" style="height:116px; width:115px; top:770px; left:580px; background-image: url('https://i.imgur.com/SZpUe7L.png');"></div>
  <div id="uranus" class="planet" style="height:69px; width:115px; top:533px; left:715px; background-image: url('https://i.imgur.com/rhjaUW2.png');"></div>
  <div id="neptune" class="planet" style="height:115px; width:63px; top:797px; left:814px; background-image: url('https://i.imgur.com/XKmic2G.png');"></div>

  <!-- Text box -->
  <div class="text-box">
    <br><b>Are you ready to travel with us?!</b><br><br>
Click the planets when the little astronaut lands on them to see what we've got for you this Summer!<br><br>
When you participate in our Space events you might get a chance to win this amazing set made by Areximache and Kofod<br><br>
<button class="event-button" id="textBoxButton">Read More</button>
  </div>

  <!-- Prize & Raffle -->
  <div id="prize" class="prize" style="background-image: url('https://i.imgur.com/fhhcZQa.png');"></div>
  <div class="raffle raffleLink" style="background-image:...

CSS

body {
  margin: 0;
  padding: 0;
  width: 960px;
  height: 960px;
  font-family: sans-serif;
      background-image: url('https://i.imgur.com/dzSOhNT.png');
        background-repeat: no-repeat;
          background-size: cover;
  position: relative;
}

.background {
  height: 600px;
  width: 960px;
}

.title-image {
  position: absolute;
  top: 20px;
  left: 163px;
  width: 508px; /* Adjust as needed */
  height: auto;
}

.planet {
  position: absolute;
  background-size: cover;
  cursor: pointer;
  pointer-events: none;
}

.planet.active {
  opacity: 1;
  pointer-events: auto;
}

.text-box {
  position: absolute;
  width: 500px;
  height: 250px;
  top: 157px;
  left: 157px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}

.event-button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #f48e74;
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.event-button:hover {
  background-color: #ec596d;
}

.prize {
  position: absolute;
  width: 281px;
  height: 327px;
  top: 26px;
  left: 680px;
  background-size: cover;
  cursor: pointer;
}

 .raffle {
  position: absolute;
  width: 151px; 
  height: 111px;
  top: 250px;    
  left: 750px;  
  background-size: cover;
  cursor: pointer;
}

.puzzleContainer * {
      font-family: 'Arial', sans-serif;
      font-size: 12px;
      box-sizing: border-box;
    }

    .flexBox {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }

    .puzzleContainer {
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 2;
    }

    .darkScreen {
      width: 100%;
      height: 100%;
      background: rgba(30, 30, 30, 0.8);
    }

   ...

JavaScript

$(function () {
    var planets = [
      { id: 'mercury', link: 'https://en.virtualpopstar.com/social/forum?category=11&topic=367370', date: '2025-07-07' },
      { id: 'venus', link: 'https://en.virtualpopstar.com/social/forum?category=11&topic=367424', date: '2025-07-10' },
      { id: 'earth', link: 'https://en.virtualpopstar.com/social/forum?category=11&topic=367436', date: '2025-07-14' },
      { id: 'mars', link: 'https://en.virtualpopstar.com/social/forum?category=11&topic=367511', date: '2025-07-17' },
      { id: 'jupiter', link: 'https://en.virtualpopstar.com/social/forum?category=11&topic=367631', date: '2025-07-21' },
      { id: 'saturn', link: 'https://en.virtualpopstar.com/social/forum?category=11&topic=367748', date: '2025-07-24' },
      { id: 'uranus', link: 'https://en.virtualpopstar.com/social/forum?category=11&topic=367632', date: '2025-07-28' },
      { id: 'neptune', link: 'https://en.virtualpopstar.com/social/forum?category=11&topic=367827', date: '2025-07-31' }
    ];

// Simulate current time in CEST (UTC+2)
  var now = new Date();
  var utc = now.getTime() + now.getTimezoneOffset() * 60000;
  var cestTime = new Date(utc + 2 * 3600000); // UTC+2 for CEST

  $.each(planets, function (i, planet) {
    var openDate = new Date(planet.date + 'T00:00:00+02:00'); // Interpret the date in CEST
    if (cestTime >= openDate) {
      $('#' + planet.id).addClass('active').click(function () {
        window.open(planet.link, '_blank');
      });
    }
  });

     $('#prize').click(function () {
        window.open('https://en.virtualpopstar.com/social/forum?category=3&topic=367182', '_blank');
      });

      $('#textBoxButton').click(function () {
        window.open('https://en.virtualpopstar.com/social/forum?category=3&topic=367182', '_blank');
      });
       const iframeLinks = {
        raffleLink: '//jsfiddle.net/Kofod/yna9Lmsz/embedded/result/'
      };

      $(document).on('click', '.raffle', function...