E-Commerce & Gamification #VaultDiscount #PromoUnlock #WebAudioAPI ● Live editable

Theme:

05.2 E-Commerce Discount Vault Breaker

Boost online shop conversions by engaging customers with an interactive mystery coupon vault puzzle. Crack the 4-digit combination to reveal a 50% OFF promo code!

<div class="vault-box">
  <div class="vault-header">
    <div class="vault-badge">🎁 MYSTERY DISCOUNT VAULT</div>
    <div class="vault-title">Unlock 50% OFF Promo Code</div>
    <div class="vault-sub">Crack the 4-digit vault combo code in 6 tries!</div>
  </div>

<div class="vault-controls">
    <button type="button" class="btn-unlock" id="btnUnlock">🔓 UNLOCK VAULT</button>
    <button type="button" class="btn-new" id="btnNewVault">🔄 NEW CODE</button>
  </div>

<div class="vault-result" id="vaultResult">
    <div class="result-status" id="resultStatus">● 6 Attempts Remaining</div>
    <div class="result-coupon" id="resultCoupon" style="display:none;">
      <span>CODE: <strong>VIP50OFF</strong></span>
      <button type="button" class="btn-copy-code" id="btnCopyCoupon">📋 Copy Coupon</button>
    </div>
  </div>
</div>

.vault-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  font-family: inherit;
  color: var(--text, #0f172a);
}

.vault-header {
  text-align: center;
}

.vault-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(234, 179, 8, 0.15);
  color: #ca8a04;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
}

.vault-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.vault-sub {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 4px;
}

.vault-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.v-pin {
  width: 52px;
  height: 60px;
  border-radius: 12px;
  border: 2px solid var(--border, #cbd5e1);
  background: var(--bg, #f8fafc);
  color: var(--text, #0f172a);
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  outline: none;
  transition: all 0.2s ease;
}

.v-pin:focus {
  border-color: #eab308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
}

.vault-controls {
  display: flex;
  gap: 8px;
}

.btn-unlock {
  flex: 2;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #eab308, #ca8a04);
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.btn-unlock:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.btn-new {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #cbd5e1);
  background: transparent;
  color: var(--text, #0f172a);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.vault-result {
  background: var(--bg, #f8fafc);
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  font-size: 12px;
}

.result-status {
  font-weight: 600;
}

.result-coupon {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fef08a;
  color: #713f12;
  padding: 8px 12px;
  border-radius: 8px;
}

.btn-copy-code {
  background: #713f12;
  color: #ffffff;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

(function() {
  let secret = generateCode();
  let attempts = 6;
  let audioCtx = null;

function initAudio() {
    if(!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  }

function playBeep(freq = 440, type = 'sine') {
    initAudio();
    if(!audioCtx) return;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = type;
    osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
    gain.gain.setValueAtTime(0.08, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.15);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
    osc.stop(audioCtx.currentTime + 0.15);
  }

function generateCode() {
    return Array.from({length: 4}, () => Math.floor(Math.random() * 10)).join('');
  }

const inputs = [0,1,2,3].map(i => document.getElementById('v' + i));
  const btnUnlock = document.getElementById('btnUnlock');
  const btnNewVault = document.getElementById('btnNewVault');
  const statusEl = document.getElementById('resultStatus');
  const couponEl = document.getElementById('resultCoupon');
  const btnCopyCoupon = document.getElementById('btnCopyCoupon');

if(!btnUnlock) return;

inputs.forEach((inp, idx) => {
    if(!inp) return;
    inp.addEventListener('input', (e) => {
      playBeep(600);
      if(e.target.value.length === 1 && idx < 3) inputs[idx + 1].focus();
    });
    inp.addEventListener('keydown', (e) => {
      if(e.key === 'Backspace' && !inp.value && idx > 0) inputs[idx - 1].focus();
    });
  });

btnUnlock.addEventListener('click', () => {
    const guess = inputs.map(i => i ? i.value : '').join('');
    if(guess.length < 4) {
      statusEl.textContent = '⚠️ Enter all 4 digits!';
      return;
    }

attempts--;
    let exact = 0, partial = 0;
    let secArr = secret.split('');
    let gArr = guess.split('');

for(let i=0; i<4; i++) {
      if(gArr[i] === secArr[i]) {
        exact++;
        secArr[i] = null;
        gArr[i] = undefined;
      }
    }
    for(let i=0; i<4; i++) {
      if(gArr[i] !== undefined) {
        let foundIdx = secArr.indexOf(gArr[i]);
        if(foundIdx !== -1) {
          partial++;
          secArr[foundIdx] = null;
        }
      }
    }

if(exact === 4) {
      playBeep(880, 'triangle');
      statusEl.textContent = '🎉 UNLOCKED! 50% OFF COUPON GRANTED!';
      couponEl.style.display = 'flex';
      btnUnlock.disabled = true;
    } else if(attempts <= 0) {
      playBeep(200, 'sawtooth');
      statusEl.textContent = '❌ VAULT LOCKED! Correct combo was: ' + secret;
      btnUnlock.disabled = true;
    } else {
      playBeep(350);
      statusEl.textContent = `🎯 ${exact} Exact, 🟡 ${partial} Misplaced • ${attempts} Tries left`;
    }
  });

btnNewVault.addEventListener('click', () => {
    secret = generateCode();
    attempts = 6;
    inputs.forEach(i => { if(i) i.value = ''; });
    statusEl.textContent = '● 6 Attempts Remaining';
    couponEl.style.display = 'none';
    btnUnlock.disabled = false;
    if(inputs[0]) inputs[0].focus();
  });

if(btnCopyCoupon) {
    btnCopyCoupon.addEventListener('click', () => {
      navigator.clipboard.writeText('VIP50OFF');
      btnCopyCoupon.textContent = '✓ Copied!';
      setTimeout(() => { btnCopyCoupon.textContent = '📋 Copy Coupon'; }, 2000);
    });
  }
})();

// React E-Commerce Vault Breaker Component

<!-- Tailwind CSS Edition -->