Shine With Pride 2026 [lookcompetitie]

HTML

<div class="calendar-area" id="calendarArea">
    <img class="title-img" id="titleImg" alt="Title" src="https://i.imgur.com/WJ6qmxl.png" />
    <a href="https://virtualpopstar.com/social/forum?category=11&topic=994803"
   target="_blank" rel="noopener"
   class="discussion-link">
  <img src="https://i.imgur.com/tZMDQdT.png" alt="Inktober Discussion Thread"
       class="discussion-img">
</a>

  <!-- Shine -->
<div id="discussionShine" class="discussion-shine" aria-hidden="true"></div>



    <aside class="info-box" id="infoBox" aria-label="Information">
      <h2>Pride Month Lookcompetitie</h2>
      <p>Het is juni, dus Pride! Wij hebben een aantal vlaggen gekozen en aan de hand van de kleuren van deze vlag maak je een look. 
        De eerste 6 dagen van Juni kan je een vakje open krassen en dan klikken op "Vlag & Info" voor de vlag naam en informatie over deze vlag. 
        <br><i>Alle informatie komt van deze website: <a href="https://lgbtqia.fandom.com/wiki/LGBTQIA%2B_Wiki" style="color:#16061c;" target="_blank">LGBTQIA+ Wiki | Fandom</a>
</i>
      </p>
    </aside>

    <div class="grid-wrap">
      <div class="doors-grid" id="doorsGrid" aria-label="October Calendar"></div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal-backdrop" id="modalBackdrop" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal-box" id="modalBox">
      <header class="modal-header">
        <h3 id="modalTitle">Day</h3>
        <button class="modal-close" id="modalClose" aria-label="Close">&times;</button>
      </header>
      <div class="modal-content" id="modalContent"></div>
    </div>
  </div>

CSS

body{
    margin:0;
    background:#0b0b0b;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    font-family: Arial, Helvetica, sans-serif;
    color:#fff;
  }
  .calendar-area{
    position:relative;
    width:688px;
    height:700px;
    overflow:hidden;
    background:#fff center/cover no-repeat;

    box-shadow:0 10px 30px rgba(0,0,0,.5);
  }

  /* --- Header elements --- */

  .discussion-img{
    position:absolute;
    width:250px;
    height:80px;
    top:580px;
    left:219px;
    cursor:pointer;
    transition: transform .15s ease;
    z-index: 20;


    filter: drop-shadow(3px 5px 2px #62406e)
  }
  .discussion-img:hover{
    transform: scale(1.03);
    filter: drop-shadow(5px 7px 4px #62406e)
    }
  .info-box{
    position:absolute;
    top:14px;
    right:14px;
    width:285px;
    height:185px;
    padding:14px 16px;
    background:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    box-shadow:3px 6px 20px rgba(98,64,110,.65);
    overflow:auto;
    z-index: 15;
  }
  .info-box h2{ margin:0 0 6px 0; font-size:18px;color: #62406e; }
  .info-box p{ margin:0; font-size:14px; line-height:1.25; color: black; }

  /* --- Grid area --- */
  .grid-wrap{
    position:absolute;
    left:16px;
    right:16px;
    top:16px;
    bottom:16px;
    padding-top:275px; /* space for title + info */
  }
  .doors-grid{
    width:auto;
    height:50%;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap:20px;
    grid-auto-rows: 121px;
    justify-content:center;
    align-content:start;
    max-width:530px;
    max-height: 500px;
    margin:0 auto; 
  }

  /* --- Door cell stack --- */
  .cell{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    isolation:isolate;
    background: #0d3064;
  }
  .reveal{
    position:absolute; inset:0;
    background:#0d3064 center/cover...

JavaScript

(function($){
  /* ---------- CONFIG ---------- */
  var TARGET_MONTH = 6; 
  var TARGET_YEAR  = 2026; 
  var debugAll     = /[?&]debug=1\b/.test(location.search);

  // ---- Scratch look & feel ----
  var BRUSH_RADIUS    = 15;   
  var HARD_EDGE_BRUSH = true; 
  var FADE_THRESHOLD  = 0.60; 
  var TEXTURE_OPACITY = 0.35; 

/* ---------- TOP-LEVEL IMAGE FALLBACKS ---------- */
  // Replace the second URLs with your mirrors
  var ASSETS = {
    title:      { urls: ['https://i.imgur.com/Ae0SFO9.png', 'https://i.imgur.com/Ae0SFO9.png'] },
    discussion: { urls: ['https://i.imgur.com/6e0dPsX.png', 'https://i.imgur.com/6e0dPsX.png'] },
    bg:         { urls: ['https://i.imgur.com/bm7XfUJ.png', 'https://i.imgur.com/bm7XfUJ.png'] }
  };

  /* ---------- TIMEZONE: CET/CEST ---------- */
  function getCESTDate(){
    var now = new Date();
    var parts = new Intl.DateTimeFormat('en-GB', {
      timeZone: 'Europe/Amsterdam',
      year: 'numeric', month: 'numeric', day: 'numeric'
    }).formatToParts(now);
    var get = function(type){ return parseInt(parts.find(p => p.type === type).value, 10); };
    return { year: get('year'), month: get('month'), day: get('day') };
  }

  /* ---------- HELPERS ---------- */
  function firstWorkingUrl(urls, timeoutMs, cacheBust){
  urls = (urls || []).filter(Boolean);
  var to = (typeof timeoutMs === 'number') ? timeoutMs : 2500;
  var bust = !!cacheBust;

  function testOnce(u){
    return new Promise(function(resolve){
      var img = new Image();
      var done = false;
      var timer = setTimeout(function(){
        if (done) return;
        done = true;
        // Timeout: consider this URL failed
        resolve(null);
      }, to);

      img.onload = function(){
        if (done) return;
        done = true;
        clearTimeout(timer);
        resolve(u);
      };
      img.onerror = function(){
        if (done) return;
        done = true;
       ...