77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
// Valid redemption code (you can change this to any 5-digit code)
|
|
const VALID_CODE = '12345';
|
|
|
|
// Get DOM elements
|
|
const codeScreen = document.getElementById('code-screen');
|
|
const revealScreen = document.getElementById('reveal-screen');
|
|
const finalScreen = document.getElementById('final-screen');
|
|
const codeInput = document.getElementById('code-input');
|
|
const redeemBtn = document.getElementById('redeem-btn');
|
|
const confirmBtn = document.getElementById('confirm-btn');
|
|
const errorMessage = document.getElementById('error-message');
|
|
|
|
// Format input to only accept numbers
|
|
codeInput.addEventListener('input', function(e) {
|
|
this.value = this.value.replace(/[^0-9]/g, '');
|
|
});
|
|
|
|
// Handle Enter key in code input
|
|
codeInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
redeemBtn.click();
|
|
}
|
|
});
|
|
|
|
// Redeem button click
|
|
redeemBtn.addEventListener('click', function() {
|
|
const code = codeInput.value.trim();
|
|
|
|
if (code.length !== 5) {
|
|
errorMessage.textContent = 'Please enter a 5-digit code';
|
|
codeInput.classList.add('shake');
|
|
setTimeout(() => codeInput.classList.remove('shake'), 500);
|
|
return;
|
|
}
|
|
|
|
if (code === VALID_CODE) {
|
|
errorMessage.textContent = '';
|
|
// Transition to reveal screen
|
|
codeScreen.classList.remove('active');
|
|
revealScreen.classList.add('active');
|
|
// Scroll to top
|
|
window.scrollTo(0, 0);
|
|
} else {
|
|
errorMessage.textContent = 'Invalid code. Please try again.';
|
|
codeInput.value = '';
|
|
codeInput.classList.add('shake');
|
|
setTimeout(() => codeInput.classList.remove('shake'), 500);
|
|
}
|
|
});
|
|
|
|
// Confirm button click (reveal the hoax)
|
|
confirmBtn.addEventListener('click', function() {
|
|
// Add some dramatic pause
|
|
confirmBtn.textContent = 'PROCESSING...';
|
|
confirmBtn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
revealScreen.classList.remove('active');
|
|
finalScreen.classList.add('active');
|
|
window.scrollTo(0, 0);
|
|
}, 1500);
|
|
});
|
|
|
|
// Add shake animation for invalid codes
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-10px); }
|
|
75% { transform: translateX(10px); }
|
|
}
|
|
.shake {
|
|
animation: shake 0.3s ease;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|