(function () { 'use strict'; // ── Configuration ────────────────────────────────────────────────── // Map each camp path prefix to its 6-digit PIN. // Update these values before each camp session. var CAMP_PINS = { '/genai': '976214', '/cybersecurity': '562221', '/3d-printing-advanced': '572571', '/3d-printing-intro': '191854', '/drone-programming': '809619', '/gaming-pc': '506861', '/ethical-hacking': '819010', }; // Human-readable camp names shown on the gate card. var CAMP_NAMES = { '/genai': 'Introduction to GenAI & LLMs', '/cybersecurity': 'Introduction to Cybersecurity', '/3d-printing-advanced': 'Advanced 3D Printing & Modeling', '/3d-printing-intro': 'Introduction to 3D Printing & Modeling', '/drone-programming': 'Drone Programming', '/gaming-pc': 'Gaming PC Build & Play', '/ethical-hacking': 'Introduction to Ethical Hacking', }; // Lucide icon names matching docs.json tab icons. var CAMP_ICONS = { '/genai': 'bot', '/cybersecurity': 'shield', '/3d-printing-advanced': 'box', '/3d-printing-intro': 'boxes', '/drone-programming': 'plane', '/gaming-pc': 'monitor', '/ethical-hacking': 'terminal', }; var VIDEO_SRC = '/login-bg.mp4'; var ACCENT = '#0053FF'; // ── Navigation interceptor ───────────────────────────────────────── // Catches client-side link clicks BEFORE Mintlify's SPA router handles // them. If the destination is a gated camp that hasn't been unlocked, // force a full page reload so the gate runs fresh. function campForPath(p) { p = p.replace(/\/+$/, '') || '/'; var keys = Object.keys(CAMP_PINS); for (var k = 0; k < keys.length; k++) { if (p === keys[k] || p.indexOf(keys[k] + '/') === 0) return keys[k]; } return null; } document.addEventListener('click', function (e) { var link = e.target.closest ? e.target.closest('a[href]') : null; if (!link) return; var href = link.getAttribute('href'); if (!href || href.charAt(0) !== '/') return; var destCamp = campForPath(href); if (!destCamp) return; try { if (sessionStorage.getItem('unlocked_' + destCamp) === 'true') return; } catch (_) { return; } // Destination is a locked camp — block SPA navigation and force reload e.preventDefault(); e.stopPropagation(); window.location.href = href; }, true); // ── Mark locked tabs + smooth page transitions ───────────────────── // Inject CSS for locked tab hover and page fade-in var tabCss = document.createElement('style'); tabCss.textContent = [ /* prevent tab names from wrapping to two lines */ 'a.nav-tabs-item{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;max-width:120px}', '@media(min-width:1200px){a.nav-tabs-item{max-width:none}}', '@media(max-width:1199px){.nav-tabs{gap:12px!important}}', /* locked tab — lock fades in over the text on hover */ 'a.nav-tabs-item[data-pg-locked]{position:relative}', 'a.nav-tabs-item[data-pg-locked]:hover{color:rgba(255,255,255,.3)!important}', 'a.nav-tabs-item[data-pg-locked]:hover *{color:rgba(255,255,255,.3)!important;opacity:.3}', 'a.nav-tabs-item[data-pg-locked]::after{' + 'content:"";position:absolute;left:50%;top:50%;' + 'transform:translate(-50%,-50%);width:16px;height:16px;' + 'background-image:url("https://unpkg.com/lucide-static@latest/icons/lock.svg");' + 'background-size:contain;background-repeat:no-repeat;background-position:center;' + 'filter:invert(1);opacity:0;pointer-events:none;' + 'transition:opacity .2s ease}', 'a.nav-tabs-item[data-pg-locked]:hover::after{' + 'opacity:.85;animation:pgWiggle .5s ease .15s}', '@keyframes pgWiggle{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}' + '20%{transform:translate(-50%,-50%) rotate(-12deg)}' + '40%{transform:translate(-50%,-50%) rotate(10deg)}' + '60%{transform:translate(-50%,-50%) rotate(-6deg)}' + '80%{transform:translate(-50%,-50%) rotate(3deg)}}', /* smooth page transition for unlocked content */ 'body.pg-ready>*:not(script):not(style):not(link){' + 'animation:pgPageIn .3s ease forwards}', '@keyframes pgPageIn{from{opacity:0}to{opacity:1}}', ].join('\n'); document.head.appendChild(tabCss); // Mark locked camp tabs after DOM is ready function markLockedTabs() { var tabLinks = document.querySelectorAll('a.nav-tabs-item'); tabLinks.forEach(function (link) { var href = link.getAttribute('href'); if (!href) return; var destCamp = campForPath(href); if (!destCamp) return; try { if (sessionStorage.getItem('unlocked_' + destCamp) === 'true') { link.removeAttribute('data-pg-locked'); } else { link.setAttribute('data-pg-locked', ''); } } catch (_) {} }); } // Run immediately and re-run after Mintlify finishes rendering markLockedTabs(); setTimeout(markLockedTabs, 500); setTimeout(markLockedTabs, 1500); // Re-run after every SPA navigation — watch for DOM changes in the // tab bar area which Mintlify re-renders on client-side route changes. var markTimer = null; new MutationObserver(function () { clearTimeout(markTimer); markTimer = setTimeout(markLockedTabs, 80); }).observe(document.documentElement, { childList: true, subtree: true }); // ── Path detection & session check ───────────────────────────────── var path = window.location.pathname.replace(/\/+$/, '') || '/'; var camp = null; var prefixes = Object.keys(CAMP_PINS); for (var i = 0; i < prefixes.length; i++) { if (path === prefixes[i] || path.indexOf(prefixes[i] + '/') === 0) { camp = prefixes[i]; break; } } // Not a camp page — reveal content immediately and exit if (!camp) { document.body.classList.add('pg-ready'); return; } // Already unlocked for this camp — reveal and exit try { if (sessionStorage.getItem('unlocked_' + camp) === 'true') { document.body.classList.add('pg-ready'); return; } } catch (_) { /* sessionStorage unavailable — proceed with gate */ } var campName = CAMP_NAMES[camp] || 'STEM Workshop'; var campIcon = CAMP_ICONS[camp] || 'lock'; // ── Helpers ──────────────────────────────────────────────────────── function el(tag, cls, children) { var e = document.createElement(tag); if (cls) e.className = cls; if (typeof children === 'string') e.textContent = children; else if (Array.isArray(children)) children.forEach(function (c) { if (c) e.appendChild(c); }); else if (children) e.appendChild(children); return e; } // ── CSS injection ───────────────────────────────────────────────── var css = document.createElement('style'); css.textContent = [ /* reset — neutralise Mintlify global styles leaking into the gate */ '#pg-overlay *{box-sizing:border-box}', '#pg-overlay div,#pg-overlay p,#pg-overlay h2,#pg-overlay h3,#pg-overlay span,' + '#pg-overlay img,#pg-overlay svg,#pg-overlay button{' + 'background:transparent!important;border:none!important;' + 'backdrop-filter:none!important;-webkit-backdrop-filter:none!important;' + 'box-shadow:none!important;margin:0;padding:0;transition:none}', '#pg-overlay input{border:none!important;background:transparent!important;' + 'box-shadow:none!important;outline:none!important;border-radius:0}', /* overlay */ '#pg-overlay{position:fixed;inset:0;z-index:99999;background:#000!important;overflow:hidden}', /* video */ '.pg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.2);' + 'opacity:0;animation:pgVideoIn .8s ease .15s forwards}', '@keyframes pgVideoIn{to{opacity:1}}', /* colour overlays — hue #0053FF */ '.pg-color{position:absolute;inset:0;background:' + ACCENT + '!important;mix-blend-mode:color;opacity:.75}', '.pg-scrim{position:absolute;inset:0;background:rgba(0,0,0,.35)!important}', '.pg-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.25) 35%,rgba(0,0,0,.45) 65%,rgba(10,10,11,.95) 100%)!important}', '.pg-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 0%,rgba(0,0,0,.15) 70%,rgba(0,0,0,.45) 100%)!important}', /* back button — inside card top-left */ '#pg-overlay .pg-back{position:absolute;top:14px;left:16px;z-index:1;' + 'display:flex!important;align-items:center;gap:4px;' + 'font-size:11px;font-family:"Plus Jakarta Sans",sans-serif;' + 'color:rgba(255,255,255,.35);cursor:pointer;' + 'transition:color .15s ease;text-decoration:none!important}', '#pg-overlay .pg-back:hover{color:rgba(255,255,255,.65)}', '#pg-overlay .pg-back-arrow{width:12px;height:12px;filter:invert(1);opacity:.35;' + 'transition:opacity .15s ease,transform .15s ease}', '#pg-overlay .pg-back:hover .pg-back-arrow{opacity:.65;transform:translateX(-2px)}', /* card — uses #pg-overlay prefix for specificity over the reset rule */ '#pg-overlay .pg-panel{position:fixed!important;width:420px;max-width:calc(100% - 48px);top:50%;left:50%;' + 'transform:translate(-50%,-50%);background:rgba(18,18,24,.82)!important;' + 'backdrop-filter:blur(48px) saturate(1.4)!important;-webkit-backdrop-filter:blur(48px) saturate(1.4)!important;' + 'border:1px solid rgba(255,255,255,.12)!important;' + 'box-shadow:0 0 0 1px rgba(255,255,255,.05),0 24px 64px -8px rgba(0,0,0,.8),0 0 80px -20px rgba(0,83,255,.12)!important;' + 'border-radius:16px;z-index:100000;display:flex;flex-direction:column;align-items:center;' + 'padding:44px 36px 36px!important;' + 'opacity:0;animation:pgCardIn .5s cubic-bezier(.16,1,.3,1) .25s forwards}', '@keyframes pgCardIn{to{opacity:1}}', '.pg-panel-transition{transition:top .55s cubic-bezier(.16,1,.3,1),' + 'left .55s cubic-bezier(.16,1,.3,1),width .55s cubic-bezier(.16,1,.3,1),' + 'height .55s cubic-bezier(.16,1,.3,1),border-radius .55s cubic-bezier(.16,1,.3,1),' + 'transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease}', /* glow line */ '#pg-overlay .pg-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;' + 'background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%)!important}', /* logo */ '.pg-logo{height:26px;opacity:.92;margin-bottom:28px!important}', /* text */ '.pg-title{font-size:19px;font-weight:600;letter-spacing:-.025em;color:rgba(255,255,255,.95);' + 'margin:0 0 4px!important;text-align:center;font-family:"Plus Jakarta Sans",sans-serif}', '.pg-camp-name{font-size:14px;font-weight:500;color:rgba(255,255,255,.65);' + 'margin:6px 0 0!important;text-align:center;font-family:"Plus Jakarta Sans",sans-serif;' + 'display:flex!important;align-items:center;justify-content:center;gap:6px}', '#pg-overlay .pg-camp-icon{width:16px;height:16px;opacity:.7;filter:invert(1);flex-shrink:0}', '.pg-sub{font-size:13px;line-height:1.625;color:rgba(255,255,255,.4);margin:8px 0 28px!important;' + 'text-align:center;font-family:"Plus Jakarta Sans",sans-serif}', /* OTP slots */ '.pg-otp{display:flex;margin-bottom:24px!important}', '#pg-overlay .pg-slot{width:44px;height:44px;' + 'border:1px solid rgba(255,255,255,.08)!important;' + 'background:rgba(255,255,255,.04)!important;color:rgba(255,255,255,.9);font-size:16px;' + 'text-align:center;outline:none!important;font-family:"Plus Jakarta Sans",sans-serif;' + 'margin:0;padding:0;-webkit-appearance:none;-moz-appearance:textfield;' + 'caret-color:rgba(255,255,255,.6);border-radius:0}', '#pg-overlay .pg-slot::placeholder{color:rgba(255,255,255,.2);font-size:16px}', '#pg-overlay .pg-slot::-webkit-inner-spin-button,#pg-overlay .pg-slot::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}', '#pg-overlay .pg-otp .pg-slot:first-child{border-radius:8px 0 0 8px!important}', '#pg-overlay .pg-otp .pg-slot:last-child{border-radius:0 8px 8px 0!important}', '#pg-overlay .pg-slot+.pg-slot{margin-left:-1px}', '#pg-overlay .pg-slot:focus{box-shadow:0 0 0 3px rgba(0,83,255,.25)!important;' + 'border-color:rgba(0,83,255,.4)!important;position:relative;z-index:1}', /* button */ '#pg-overlay .pg-btn{height:32px;width:100%;border-radius:6px;' + 'background:' + ACCENT + '!important;border:none!important;' + 'color:#fff;font-size:13px;font-weight:500;font-family:"Plus Jakarta Sans",sans-serif;' + 'cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;' + 'box-shadow:0 2px 2px -1px rgba(0,0,0,.16),0 4px 4px -2px rgba(0,0,0,.24),0 0 0 1px rgba(0,0,0,.12)!important;' + 'transition:box-shadow .15s ease,background .15s ease,transform .1s ease}', '#pg-overlay .pg-btn:hover:not(:disabled){box-shadow:0 2px 2px -1px rgba(0,0,0,.16),' + '0 4px 4px -2px rgba(0,0,0,.24),0 0 0 1px rgba(0,0,0,.12),' + '0 4px 16px -4px rgba(0,83,255,.45)!important}', '#pg-overlay .pg-btn:active:not(:disabled){background:#003FCC!important;transform:scale(.985);' + 'box-shadow:inset 0 2px 3px rgba(0,0,0,.25)!important}', '#pg-overlay .pg-btn:disabled{opacity:.7;cursor:not-allowed}', '#pg-overlay .pg-btn:hover .pg-gloss{opacity:0}', /* button gloss */ '#pg-overlay .pg-gloss{position:absolute;inset:0;' + 'background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 100%)!important;' + 'box-shadow:inset 0 1px 1px 0 rgba(255,255,255,.12)!important;border-radius:inherit;' + 'pointer-events:none;transition:opacity .15s}', /* spinner */ '#pg-overlay .pg-spin{width:16px;height:16px;' + 'border:2px solid rgba(255,255,255,.3)!important;' + 'border-top-color:#fff!important;border-radius:50%;animation:pgSpin .6s linear infinite}', /* security footer */ '#pg-overlay .pg-sec{border-top:1px solid rgba(255,255,255,.06)!important;padding-top:20px!important;width:100%;' + 'display:flex;align-items:flex-start;gap:8px;margin-top:24px!important}', '.pg-sec-txt{font-size:11px;line-height:1.625;color:rgba(255,255,255,.5);margin:0!important;' + 'font-family:"Plus Jakarta Sans",sans-serif}', /* copyright — uses opacity-only animation to avoid transform conflicts */ '.pg-copy{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);' + 'font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.35);z-index:100000;' + 'font-family:"Plus Jakarta Sans",sans-serif;white-space:nowrap;' + 'opacity:0;animation:pgFadeOnly .4s ease .75s forwards}', '@keyframes pgFadeOnly{to{opacity:1}}', /* toast */ '#pg-overlay~.pg-toast,.pg-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%);' + 'background:rgba(10,10,12,.95)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:8px;' + 'padding:12px 20px!important;color:rgba(255,255,255,.9);font-size:13px;' + 'font-family:"Plus Jakarta Sans",sans-serif;z-index:100001;' + 'box-shadow:0 8px 32px rgba(0,0,0,.5)!important;animation:pgToastIn .3s ease forwards}', '.pg-toast-out{animation:pgToastOut .3s ease forwards!important}', /* keyframes */ '@keyframes pgFadeInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}', '@keyframes pgShake{0%,100%{transform:translateX(0)}10%,50%,90%{transform:translateX(-4px)}30%,70%{transform:translateX(4px)}}', '@keyframes pgToastIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}', '@keyframes pgToastOut{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-12px)}}', '@keyframes pgSpin{to{transform:rotate(360deg)}}', /* stagger animation */ '.pg-anim{opacity:0;animation:pgFadeInUp .3s cubic-bezier(.16,1,.3,1) forwards}', '.pg-d1{animation-delay:.35s}', '.pg-d2{animation-delay:.45s}', '.pg-d25{animation-delay:.5s}', '.pg-d3{animation-delay:.55s}', '.pg-d4{animation-delay:.6s}', '.pg-d5{animation-delay:.75s}', /* mobile */ '@media(max-width:460px){.pg-panel{padding:36px 24px 28px!important}.pg-slot{width:40px;height:40px;font-size:15px}' + '.pg-title{font-size:17px}.pg-sub{font-size:12px;margin-bottom:24px!important}}', ].join('\n'); document.head.appendChild(css); // ── DOM construction ────────────────────────────────────────────── var overlay = el('div'); overlay.id = 'pg-overlay'; // Background video var video = document.createElement('video'); video.className = 'pg-video'; video.src = VIDEO_SRC; video.autoplay = true; video.loop = true; video.muted = true; video.playsInline = true; video.setAttribute('playsinline', ''); overlay.appendChild(video); // Overlay layers overlay.appendChild(el('div', 'pg-color')); overlay.appendChild(el('div', 'pg-scrim')); overlay.appendChild(el('div', 'pg-grad')); overlay.appendChild(el('div', 'pg-vig')); // ── Back button (above card) ──────────────────────────────────────── var backBtn = el('a', 'pg-back'); var backArrow = document.createElement('img'); backArrow.className = 'pg-back-arrow'; backArrow.src = 'https://unpkg.com/lucide-static@latest/icons/arrow-left.svg'; backArrow.alt = ''; backArrow.setAttribute('aria-hidden', 'true'); backBtn.appendChild(backArrow); backBtn.appendChild(document.createTextNode('Go back')); backBtn.href = document.referrer && new URL(document.referrer).origin === window.location.origin ? document.referrer : '/'; backBtn.addEventListener('click', function (e) { e.preventDefault(); if (window.history.length > 1) { window.history.back(); } else { window.location.href = '/'; } }); // ── Card ─────────────────────────────────────────────────────────── var card = el('div', 'pg-panel'); // Back button (top-left of card) card.appendChild(backBtn); // Glow line card.appendChild(el('div', 'pg-glow')); // Logo var logo = document.createElement('img'); logo.className = 'pg-logo pg-anim pg-d1'; logo.src = '/logo/dark.png'; logo.alt = 'IP STEM Workshops'; card.appendChild(logo); // Title — asks for the PIN card.appendChild(el('h2', 'pg-title pg-anim pg-d2', 'Enter Workshop PIN')); // Camp name — icon + workshop name var campHeading = el('h3', 'pg-camp-name pg-anim pg-d25'); var campIconImg = document.createElement('img'); campIconImg.className = 'pg-camp-icon'; campIconImg.src = 'https://unpkg.com/lucide-static@latest/icons/' + campIcon + '.svg'; campIconImg.alt = ''; campIconImg.setAttribute('aria-hidden', 'true'); campHeading.appendChild(campIconImg); campHeading.appendChild(document.createTextNode(campName)); card.appendChild(campHeading); // Subtitle card.appendChild(el('p', 'pg-sub pg-anim pg-d3', 'Enter the 6-digit access code provided by your instructor')); // OTP group var otpGroup = el('div', 'pg-otp pg-anim pg-d4'); var slots = []; for (var s = 0; s < 6; s++) { var inp = document.createElement('input'); inp.className = 'pg-slot'; inp.type = 'text'; inp.inputMode = 'numeric'; inp.pattern = '[0-9]*'; inp.maxLength = 1; inp.autocomplete = 'one-time-code'; inp.placeholder = '0'; inp.setAttribute('aria-label', 'Digit ' + (s + 1) + ' of 6'); slots.push(inp); otpGroup.appendChild(inp); } card.appendChild(otpGroup); // Button var btn = document.createElement('button'); btn.className = 'pg-btn pg-anim pg-d4'; btn.type = 'button'; btn.disabled = true; var gloss = el('div', 'pg-gloss'); btn.appendChild(gloss); var btnLabel = el('span', null, 'Access Content \u2192'); btn.appendChild(btnLabel); var spinner = el('div', 'pg-spin'); spinner.style.display = 'none'; btn.appendChild(spinner); card.appendChild(btn); // Security footer var secWrap = el('div', 'pg-sec pg-anim pg-d5'); var lockSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); lockSvg.setAttribute('width', '12'); lockSvg.setAttribute('height', '12'); lockSvg.setAttribute('viewBox', '0 0 12 12'); lockSvg.setAttribute('fill', 'none'); lockSvg.style.flexShrink = '0'; lockSvg.style.marginTop = '2px'; var lockPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); lockPath.setAttribute('d', 'M3.5 5V3.5a2.5 2.5 0 0 1 5 0V5'); lockPath.setAttribute('stroke', 'rgba(255,255,255,0.5)'); lockPath.setAttribute('stroke-width', '1'); lockPath.setAttribute('stroke-linecap', 'round'); lockSvg.appendChild(lockPath); var lockRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); lockRect.setAttribute('x', '2'); lockRect.setAttribute('y', '5'); lockRect.setAttribute('width', '8'); lockRect.setAttribute('height', '6'); lockRect.setAttribute('rx', '1.5'); lockRect.setAttribute('stroke', 'rgba(255,255,255,0.5)'); lockRect.setAttribute('stroke-width', '1'); lockRect.setAttribute('fill', 'rgba(255,255,255,0.15)'); lockSvg.appendChild(lockRect); secWrap.appendChild(lockSvg); secWrap.appendChild( el('p', 'pg-sec-txt', 'Access is restricted. This content is protected.') ); card.appendChild(secWrap); overlay.appendChild(card); // Copyright footer overlay.appendChild( el('div', 'pg-copy', '\u00A9 ' + new Date().getFullYear() + ' Intellectual Point. All rights reserved.') ); document.body.appendChild(overlay); // ── Autofocus first slot ─────────────────────────────────────────── // Two-stage focus: immediate attempt + deferred fallback after animations settle slots[0].setAttribute('autofocus', ''); try { slots[0].focus(); } catch (_) {} setTimeout(function () { slots[0].focus(); }, 100); // Clean up stagger-animation classes once they've all completed so they // don't conflict with later animations (e.g. shake on wrong PIN). setTimeout(function () { var animated = card.querySelectorAll('.pg-anim'); for (var i = 0; i < animated.length; i++) { animated[i].style.opacity = '1'; animated[i].classList.remove('pg-anim', 'pg-d1', 'pg-d2', 'pg-d25', 'pg-d3', 'pg-d4', 'pg-d5'); } // Also clean the copyright footer var copy = overlay.querySelector('.pg-copy'); if (copy) copy.style.opacity = '1'; }, 1200); // ── OTP input logic ──────────────────────────────────────────────── var verifying = false; function getCode() { return slots.map(function (s) { return s.value; }).join(''); } function updateButton() { btn.disabled = getCode().length < 6 || verifying; } // Returns the index of the first empty slot, or 5 if all are filled. function activeIdx() { for (var j = 0; j < 6; j++) { if (!slots[j].value) return j; } return 5; } function focusActive() { slots[activeIdx()].focus(); } function clearSlots() { slots.forEach(function (s) { s.value = ''; }); updateButton(); slots[0].focus(); } slots.forEach(function (slot, idx) { // Clicking any slot redirects to the current active position slot.addEventListener('mousedown', function (e) { e.preventDefault(); focusActive(); }); slot.addEventListener('input', function () { slot.value = slot.value.replace(/[^0-9]/g, '').slice(-1); if (slot.value && idx < 5) { slots[idx + 1].focus(); } updateButton(); if (getCode().length === 6) { setTimeout(verify, 150); } }); slot.addEventListener('keydown', function (e) { if (e.key === 'Backspace') { e.preventDefault(); if (slot.value) { slot.value = ''; } else if (idx > 0) { slots[idx - 1].value = ''; slots[idx - 1].focus(); } updateButton(); } else if (e.key === 'ArrowLeft' && idx > 0) { e.preventDefault(); slots[idx - 1].focus(); } else if (e.key === 'ArrowRight' && idx < 5) { e.preventDefault(); slots[idx + 1].focus(); } else if (e.key === 'Enter' && getCode().length === 6) { verify(); } }); slot.addEventListener('paste', function (e) { e.preventDefault(); var data = (e.clipboardData || window.clipboardData) .getData('text') .replace(/[^0-9]/g, '') .slice(0, 6); for (var j = 0; j < data.length && j < 6; j++) { slots[j].value = data[j]; } focusActive(); updateButton(); if (data.length >= 6) { setTimeout(verify, 150); } }); }); btn.addEventListener('click', function () { if (getCode().length === 6 && !verifying) verify(); }); // ── Focus trap ───────────────────────────────────────────────────── overlay.addEventListener('keydown', function (e) { if (e.key === 'Tab') { var focusable = [].concat(slots, [btn]); var first = focusable[0]; var last = focusable[focusable.length - 1]; if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last.focus(); } } else { if (document.activeElement === last) { e.preventDefault(); first.focus(); } } } }); // ── Toast ────────────────────────────────────────────────────────── var toastTimer = null; function showToast(msg) { var existing = document.querySelector('.pg-toast'); if (existing) existing.remove(); clearTimeout(toastTimer); var t = el('div', 'pg-toast', msg); document.body.appendChild(t); toastTimer = setTimeout(function () { t.classList.add('pg-toast-out'); setTimeout(function () { t.remove(); }, 300); }, 3000); } // ── Verification ────────────────────────────────────────────────── function verify() { if (verifying) return; var code = getCode(); if (code.length < 6) return; verifying = true; btn.disabled = true; btnLabel.style.display = 'none'; spinner.style.display = 'block'; setTimeout(function () { if (code === CAMP_PINS[camp]) { onSuccess(); } else { onFailure(); } }, 400); } function onFailure() { verifying = false; spinner.style.display = 'none'; btnLabel.style.display = ''; otpGroup.classList.remove('pg-anim', 'pg-d4'); otpGroup.style.opacity = '1'; otpGroup.style.animation = 'none'; void otpGroup.offsetWidth; otpGroup.style.animation = 'pgShake .4s ease'; showToast('Invalid code \u2014 please try again'); setTimeout(function () { otpGroup.style.animation = ''; clearSlots(); }, 420); } function onSuccess() { try { sessionStorage.setItem('unlocked_' + camp, 'true'); } catch (_) { /* ignore */ } // Reveal page content behind the overlay document.body.classList.add('pg-ready'); // Fade card and overlay out together — no empty card flash card.style.transition = 'transform .45s cubic-bezier(.16,1,.3,1), opacity .4s ease'; card.style.transform = 'translate(-50%,-50%) scale(0.96)'; card.style.opacity = '0'; overlay.style.transition = 'opacity .45s ease'; overlay.style.opacity = '0'; setTimeout(function () { overlay.remove(); }, 480); } })();