// Target date for countdown (YYYY, Month-1, Day, Hour, Minute, Second) // Default date is set to December 31, 2023 let targetDate = new Date(2025, 3, 10, 0, 0, 0).getTime(); const test = true; if (test) { // Para teste: descomentar a linha abaixo para simular que a data já passou // targetDate = new Date().getTime() - 1000; // 1 segundo no passado targetDate = new Date(2025, 2, 10, 0, 0, 0).getTime(); } // Update the target date display document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', { day: 'numeric', month: 'long', year: 'numeric' }); // Elements const daysElement = document.getElementById('days'); const hoursElement = document.getElementById('hours'); const minutesElement = document.getElementById('minutes'); const secondsElement = document.getElementById('seconds'); const countdownElement = document.querySelector('.countdown'); const expiredMessageElement = document.getElementById('expired-message'); const canvas = document.getElementById('fireworks-canvas'); const body = document.body; // Fireworks variables let context; let fireworks = []; let particles = []; let fireworksActive = false; // Canvas setup function setupCanvas() { if (!canvas) return; context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Event to resize canvas when window resizes window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); } // Firework class class Firework { constructor() { this.x = Math.random() * canvas.width; this.y = canvas.height; this.targetX = Math.random() * canvas.width; this.targetY = Math.random() * canvas.height / 2; this.speed = 2 + Math.random() * 3; this.angle = Math.atan2(this.targetY - this.y, this.targetX - this.x); this.velocityX = Math.cos(this.angle) * this.speed; this.velocityY = Math.sin(this.angle) * this.speed; this.size = 2; this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; this.particleCount = 80 + Math.floor(Math.random() * 40); } update() { this.x += this.velocityX; this.y += this.velocityY; // Check if firework reached its target if (Math.abs(this.x - this.targetX) < 10 && Math.abs(this.y - this.targetY) < 10) { this.explode(); return false; } return true; } explode() { for (let i = 0; i < this.particleCount; i++) { particles.push(new Particle(this.x, this.y, this.color)); } } draw() { context.fillStyle = this.color; context.beginPath(); context.arc(this.x, this.y, this.size, 0, Math.PI * 2); context.fill(); } } // Particle class (for explosion) class Particle { constructor(x, y, color) { this.x = x; this.y = y; this.velocityX = (Math.random() - 0.5) * 5; this.velocityY = (Math.random() - 0.5) * 5; this.size = Math.random() * 3; this.color = color; this.alpha = 1; this.gravity = 0.05; this.resistance = 0.92; } update() { this.velocityX *= this.resistance; this.velocityY *= this.resistance; this.velocityY += this.gravity; this.x += this.velocityX; this.y += this.velocityY; this.alpha -= 0.01; return this.alpha > 0; } draw() { context.globalAlpha = this.alpha; context.fillStyle = this.color; context.beginPath(); context.arc(this.x, this.y, this.size, 0, Math.PI * 2); context.fill(); context.globalAlpha = 1; } } // Animation loop for fireworks function animateFireworks() { if (!fireworksActive) return; requestAnimationFrame(animateFireworks); context.fillStyle = 'rgba(0, 0, 0, 0.1)'; context.fillRect(0, 0, canvas.width, canvas.height); // Random chance to create a new firework if (fireworks.length < 5 && Math.random() < 0.03) { fireworks.push(new Firework()); } // Update and draw fireworks fireworks = fireworks.filter(firework => { firework.draw(); return firework.update(); }); // Update and draw particles particles = particles.filter(particle => { particle.draw(); return particle.update(); }); } // Start fireworks function startFireworks() { if (fireworksActive) return; setupCanvas(); fireworksActive = true; body.classList.add('fireworks-active'); animateFireworks(); } // Update the countdown every second function updateCountdown() { // Get the current date and time const now = new Date().getTime(); // Find the distance between now and the target date const distance = targetDate - now; // Check if the target date has passed if (distance < 0) { // Hide countdown and show expired message countdownElement.classList.add('hidden'); expiredMessageElement.classList.remove('hidden'); startFireworks(); return; } // Time calculations for days, hours, minutes and seconds const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the results daysElement.innerHTML = days.toString().padStart(2, '0'); hoursElement.innerHTML = hours.toString().padStart(2, '0'); minutesElement.innerHTML = minutes.toString().padStart(2, '0'); secondsElement.innerHTML = seconds.toString().padStart(2, '0'); } // Initial call to set correct values updateCountdown(); // Update the countdown every second const countdownInterval = setInterval(updateCountdown, 1000); // Function to change the target date function changeTargetDate(newDate) { // You can call this function to change the target date dynamically targetDate = new Date(newDate).getTime(); // Update the target date display document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', { day: 'numeric', month: 'long', year: 'numeric' }); // Reset the countdown display countdownElement.classList.remove('hidden'); expiredMessageElement.classList.add('hidden'); // Reset fireworks if active if (fireworksActive) { fireworksActive = false; body.classList.remove('fireworks-active'); fireworks = []; particles = []; } // Update the countdown immediately updateCountdown(); }