FLOATING WORKSPACE

⠿ 🎮 LIVE STAGE

⠿ 📝 HTML Structure

<div class="vault-cabinet">
  <div class="vault-marquee">
    <div class="vault-title">🎁 UNLOCK YOUR DISCOUNT</div>
    <div class="vault-sub">Pick 1 of 3 Mystery Vaults to claim promo prize!</div>
  </div>
  <div class="vault-grid">
    <div class="vault-card" data-vault="0">
      <div class="vault-door">🔒</div>
      <div class="vault-num">VAULT #01</div>
    </div>
    <div class="vault-card" data-vault="1">
      <div class="vault-door">🔒</div>
      <div class="vault-num">VAULT #02</div>
    </div>
    <div class="vault-card" data-vault="2">
      <div class="vault-door">🔒</div>
      <div class="vault-num">VAULT #03</div>
    </div>
  </div>
  <div class="vault-reward-box" id="rewardBox" style="display:none;">
    <div class="reward-title">🎉 CONGRATULATIONS!</div>
    <div class="reward-val" id="rewardVal">30% OFF</div>
    <div class="coupon-row">
      <span class="coupon-code" id="couponCode">CYBER30</span>
      <button type="button" class="btn-copy-code" id="btnCopyCode">📋 COPY</button>
    </div>
    <div class="reward-timer">⏰ Expires in <span id="timerVal">15:00</span></div>
  </div>
</div>

⠿ 🎨 CSS Appearance

.vault-cabinet {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%);
  border: 2px solid #38bdf8;
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow: 0 0 30px rgba(56,189,248,.25);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
}
.vault-marquee { text-align: center; }
.vault-title { font-size: 1rem; font-weight: 800; color: #38bdf8; letter-spacing: .08em; }
.vault-sub { font-size: .72rem; color: #94a3b8; }
.vault-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.vault-card {
  background: #090d16;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 14px 6px;
  text-align: center;
  cursor: pointer;
  transition: all .25s ease;
}
.vault-card:hover { transform: translateY(-4px); border-color: #38bdf8; }
.vault-door { font-size: 2rem; }
.vault-num { font-size: .6rem; font-weight: 800; color: #64748b; }
.vault-card.opened { background: rgba(16,185,129,.15); border-color: #10b981; }
.vault-reward-box {
  background: rgba(5,8,17,.9);
  border: 1px solid #10b981;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.reward-title { font-size: .78rem; font-weight: 800; color: #34d399; }
.reward-val { font-size: 1.1rem; font-weight: 900; color: #facc15; margin: 4px 0 8px; }
.coupon-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
.coupon-code {
  background: #000;
  border: 1px dashed #38bdf8;
  color: #38bdf8;
  padding: 5px 10px;
  border-radius: 5px;
  font-family: ui-monospace, monospace;
  font-weight: 800;
  font-size: .82rem;
}
.btn-copy-code {
  background: #38bdf8;
  color: #021324;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-weight: 800;
  font-size: .7rem;
  cursor: pointer;
}
.reward-timer { font-size: .68rem; color: #94a3b8; }

⠿ ⚙️ JAVASCRIPT Behavior

const PRIZES = [
  { val: '5% OFF',   code: 'SAVE5'  },
  { val: '10% OFF',  code: 'SAVE10' },
  { val: '20% MEGA', code: 'SAVE20' }
];

const cards = stage.querySelectorAll('.vault-card');
const rewardBox = stage.querySelector('#rewardBox');
const rewardVal = stage.querySelector('#rewardVal');
const couponCode = stage.querySelector('#couponCode');
const btnCopy = stage.querySelector('#btnCopyCode');
let opened = false;

cards.forEach(card => {
  card.addEventListener('click', () => {
    if (opened) return;
    opened = true;
    card.classList.add('opened');
    card.querySelector('.vault-door').textContent = '🔓';

beep(440, 'triangle', .15);
    setTimeout(() => beep(880, 'sine', .3), 120);

const prize = PRIZES[Math.floor(Math.random() * PRIZES.length)];
    rewardVal.textContent = prize.val + ' DISCOUNT';
    couponCode.textContent = prize.code;
    rewardBox.style.display = 'block';

let seconds = 900;
    setInterval(() => {
      if (seconds > 0) seconds--;
      const m = String(Math.floor(seconds / 60)).padStart(2, '0');
      const s = String(seconds % 60).padStart(2, '0');
      const tv = stage.querySelector('#timerVal');
      if (tv) tv.textContent = m + ':' + s;
    }, 1000);
  });
});

if (btnCopy) {
  btnCopy.addEventListener('click', () => {
    navigator.clipboard.writeText(couponCode.textContent).then(() => {
      btnCopy.textContent = '✅ COPIED!';
      setTimeout(() => btnCopy.textContent = '📋 COPY', 2000);
    });
  });
}

⠿ 🧩 FRAMEWORK TABS