101 lines
3.7 KiB
JavaScript
101 lines
3.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const noBtn = document.getElementById('no-btn');
|
|
const yesBtn = document.getElementById('yes-btn');
|
|
const imageInput = document.getElementById('image-input');
|
|
const imagePreview = document.getElementById('preview-img');
|
|
const placeholderText = document.querySelector('.placeholder-text');
|
|
const proposalBox = document.getElementById('proposal-box');
|
|
const successBox = document.getElementById('success-message');
|
|
|
|
let yesScale = 1;
|
|
|
|
// Image Upload Logic
|
|
document.querySelector('.image-preview-container').addEventListener('click', () => {
|
|
imageInput.click();
|
|
});
|
|
|
|
imageInput.addEventListener('change', function() {
|
|
const file = this.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
imagePreview.src = e.target.result;
|
|
imagePreview.style.display = 'block';
|
|
placeholderText.style.display = 'none';
|
|
}
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// "No" Button Dodging Logic
|
|
const dodgeThreshold = 100; // pixels
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (successBox.style.display === 'block') return;
|
|
|
|
const rect = noBtn.getBoundingClientRect();
|
|
const btnCenterX = rect.left + rect.width / 2;
|
|
const btnCenterY = rect.top + rect.height / 2;
|
|
|
|
const distance = Math.hypot(e.clientX - btnCenterX, e.clientY - btnCenterY);
|
|
|
|
if (distance < dodgeThreshold) {
|
|
const angle = Math.atan2(e.clientY - btnCenterY, e.clientX - btnCenterX);
|
|
const moveDist = dodgeThreshold - distance + 20;
|
|
|
|
let newX = rect.left - Math.cos(angle) * moveDist;
|
|
let newY = rect.top - Math.sin(angle) * moveDist;
|
|
|
|
// Keep within viewport bounds
|
|
const padding = 20;
|
|
newX = Math.max(padding, Math.min(window.innerWidth - rect.width - padding, newX));
|
|
newY = Math.max(padding, Math.min(window.innerHeight - rect.height - padding, newY));
|
|
|
|
noBtn.style.position = 'fixed';
|
|
noBtn.style.left = `${newX}px`;
|
|
noBtn.style.top = `${newY}px`;
|
|
noBtn.style.margin = '0';
|
|
}
|
|
});
|
|
|
|
// "No" Click Logic (if they somehow manage to click it)
|
|
noBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
yesScale += 0.15;
|
|
yesBtn.style.transform = `scale(${yesScale})`;
|
|
yesBtn.style.fontSize = `${1 * yesScale}rem`;
|
|
});
|
|
|
|
// "Yes" Click Logic
|
|
yesBtn.addEventListener('click', () => {
|
|
proposalBox.style.display = 'none';
|
|
successBox.style.display = 'block';
|
|
|
|
// Confetti effect
|
|
const duration = 15 * 1000;
|
|
const animationEnd = Date.now() + duration;
|
|
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
|
|
|
|
function randomInRange(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
|
|
const interval = setInterval(function() {
|
|
const timeLeft = animationEnd - Date.now();
|
|
|
|
if (timeLeft <= 0) {
|
|
return clearInterval(interval);
|
|
}
|
|
|
|
const particleCount = 50 * (timeLeft / duration);
|
|
confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
|
|
confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
|
|
}, 250);
|
|
|
|
// Redirect after 15s
|
|
setTimeout(() => {
|
|
window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
|
|
}, 15000);
|
|
});
|
|
});
|