File size: 3,501 Bytes
deda93b 6023cb5 deda93b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
document.addEventListener('DOMContentLoaded', function() {
// Initialize particles
if (document.getElementById('coin-particles')) {
initCoinParticles();
}
// Payment method selection
const paymentMethods = document.querySelectorAll('.payment-method');
paymentMethods.forEach(method => {
method.addEventListener('click', function() {
paymentMethods.forEach(m => m.classList.remove('active'));
this.classList.add('active');
});
});
// Input focus effects
const inputs = document.querySelectorAll('.input-glow input');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.querySelector('.glow-effect').style.opacity = '1';
});
input.addEventListener('blur', function() {
this.parentElement.querySelector('.glow-effect').style.opacity = '0';
});
});
// Mobile summary toggle
const summaryToggle = document.querySelector('.glass-card button');
if (summaryToggle) {
summaryToggle.addEventListener('click', function() {
const content = this.nextElementSibling;
const icon = this.querySelector('i');
if (content.style.maxHeight) {
content.style.maxHeight = null;
icon.setAttribute('data-feather', 'chevron-down');
} else {
content.style.maxHeight = content.scrollHeight + 'px';
icon.setAttribute('data-feather', 'chevron-up');
}
feather.replace();
});
}
// Form submission
const confirmButtons = document.querySelectorAll('.glow-button');
confirmButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
// Simulate payment processing
this.innerHTML = '<span class="flex items-center justify-center"><i data-feather="loader" class="animate-spin mr-2"></i> Processing...</span>';
feather.replace();
setTimeout(() => {
// Show success animation
showSuccessAnimation(this);
}, 2000);
});
});
});
function showSuccessAnimation(button) {
button.innerHTML = '<i data-feather="check"></i> Payment Successful!';
feather.replace();
// Create coin burst effect
const rect = button.getBoundingClientRect();
const burst = document.createElement('div');
burst.className = 'coin-burst';
burst.style.position = 'absolute';
burst.style.left = `${rect.left + rect.width/2}px`;
burst.style.top = `${rect.top + rect.height/2}px`;
document.body.appendChild(burst);
// Remove after animation
setTimeout(() => {
burst.remove();
}, 1000);
}
function showSuccessAnimation(button) {
button.innerHTML = '<i data-feather="check"></i> Payment Successful!';
feather.replace();
// Create coin burst effect
const rect = button.getBoundingClientRect();
const burst = document.createElement('div');
burst.className = 'coin-burst';
burst.style.position = 'fixed';
burst.style.left = `${rect.left + rect.width/2 - 50}px`;
burst.style.top = `${rect.top + rect.height/2 - 50}px`;
document.body.appendChild(burst);
// Redirect after animation
setTimeout(() => {
burst.remove();
window.location.href = 'success.html';
}, 1000);
}
|