Floating Workspace #DragAnyPanel #StageOverlay #ScaleToFit #BloggerSafe ● Live editable

05 Floating Workspace: Draggable Panels + Fullscreen Stage

Drag panels by their header bar · resize from 8 handles · press ▶ Play to open the game in a fullscreen scale-to-fit stage · Esc to close · layout auto-saved to localStorage.

⠿ 📄 HEADER

E-Commerce & Gamification #MysteryVault #WebAudioAPI

04 Cyber Discount Mystery Vault

3 neon vault · Web Audio chimes · promo code · countdown

⠿ 🎮 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

import React, { useState } from 'react';
export default function Vault() {
  const [opened, setOpened] = useState(false);
  const [prize, setPrize] = useState(null);
  const prizes = [
    { val: '5% OFF', code: 'SAVE5' },
    { val: '10% OFF', code: 'SAVE10' },
    { val: '20% MEGA', code: 'SAVE20' }
  ];
  return (
    <div className="vault-cabinet">
      <div className="vault-title">🎁 UNLOCK YOUR DISCOUNT</div>
      <div className="vault-grid">
        {[1,2,3].map(n => (
          <div key={n} onClick={() => { setOpened(true); setPrize(prizes[Math.floor(Math.random()*3)]); }} className={`vault-card ${opened?'opened':''}`}>
            <div className="vault-door">{opened?'🔓':'🔒'}</div>
            <div className="vault-num">VAULT #0{n}</div>
          </div>
        ))}
      </div>
      {prize && <div className="vault-reward-box">{prize.val} — {prize.code}</div>}
    </div>
  );
}

<div class="w-full max-w-sm bg-gradient-to-br from-slate-900 to-indigo-950 border-2 border-sky-400 rounded-2xl p-5 shadow-2xl space-y-4">
  <h3 class="text-lg font-extrabold text-sky-400 tracking-wider text-center">🎁 UNLOCK YOUR DISCOUNT</h3>
  <div class="grid grid-cols-3 gap-3">
    <div class="bg-slate-950 border border-slate-700 rounded-xl p-4 text-center cursor-pointer hover:-translate-y-1 hover:border-sky-400 transition-all">
      <div class="text-3xl mb-1">🔒</div>
      <div class="text-[10px] font-bold text-slate-500">VAULT #01</div>
    </div>
    <div class="bg-slate-950 border border-slate-700 rounded-xl p-4 text-center cursor-pointer hover:-translate-y-1 hover:border-sky-400 transition-all">
      <div class="text-3xl mb-1">🔒</div>
      <div class="text-[10px] font-bold text-slate-500">VAULT #02</div>
    </div>
    <div class="bg-slate-950 border border-slate-700 rounded-xl p-4 text-center cursor-pointer hover:-translate-y-1 hover:border-sky-400 transition-all">
      <div class="text-3xl mb-1">🔒</div>
      <div class="text-[10px] font-bold text-slate-500">VAULT #03</div>
    </div>
  </div>
</div>

⠿ 🤖 AI PROMPT

⠿ 💡 USE CASES & ANALYSIS

🚀 Where to Use

E-Commerce flash sale landing pages
Blogger affiliate product reviews
Digital product launch campaigns
Lead magnet email capture
Black Friday / Cyber Monday hubs

⚙️ Tech Specs

Pure Vanilla JS ~2.8 KB minified
Web Audio API — no MP3 assets
Fullscreen stage with auto scale-to-fit
WCAG 2.1 AA compliant contrast
Works on WordPress / Blogger / Webflow