// Toast notification function function showToast(message, type = 'info', duration = 3000) { const container = document.getElementById('toast-container'); if (!container) return; const toast = document.createElement('div'); const colors = { success: 'bg-green-100 border-green-300 text-green-800', error: 'bg-red-100 border-red-300 text-red-800', info: 'bg-blue-100 border-blue-300 text-blue-800', warning: 'bg-yellow-100 border-yellow-300 text-yellow-800' }; toast.className = `px-4 py-3 rounded-lg border shadow-lg transform transition-all duration-300 translate-x-full opacity-0 ${colors[type] || colors.info}`; toast.innerHTML = `

${message}

`; container.appendChild(toast); // Animate in setTimeout(() => { toast.classList.remove('translate-x-full', 'opacity-0'); toast.classList.add('translate-x-0', 'opacity-100'); }, 10); // Auto remove setTimeout(() => { toast.classList.remove('translate-x-0', 'opacity-100'); toast.classList.add('translate-x-full', 'opacity-0'); setTimeout(() => { if (toast.parentNode) { toast.parentNode.removeChild(toast); } }, 300); }, duration); } // Global toast event listener document.addEventListener('showToast', function(e) { showToast(e.detail.message, e.detail.type, e.detail.duration || 3000); }); // Interactive elements document.addEventListener('DOMContentLoaded', function() { // Build Resume button const buildResumeBtn = document.querySelector('.btn-build-resume'); if (buildResumeBtn) { buildResumeBtn.addEventListener('click', function() { const originalHTML = this.innerHTML; this.innerHTML = ' Loading...'; setTimeout(() => { showToast('Opening Resume Builder...', 'info'); this.innerHTML = originalHTML; }, 800); }); } // Create Resume button const createResumeBtn = document.querySelector('.btn-primary'); if (createResumeBtn) { createResumeBtn.addEventListener('click', function() { const originalHTML = this.innerHTML; this.innerHTML = ' Creating...'; setTimeout(() => { showToast('Choose from our professional templates to begin!', 'info'); this.innerHTML = originalHTML; }, 1000); }); } // Import Resume button const importResumeBtn = document.querySelector('.btn-secondary'); if (importResumeBtn) { importResumeBtn.addEventListener('click', function() { showToast('Select a file to import (PDF, DOC, or TXT format)', 'info'); }); } // Mobile menu button const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const mobileMenu = document.querySelector('.mobile-menu'); if (mobileMenuBtn && mobileMenu) { mobileMenuBtn.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); mobileMenu.classList.toggle('flex'); }); } // Create floating dots function createFloatingDots() { const dotsContainer = document.getElementById('floatingDots'); if (!dotsContainer) return; const dotCount = 25; for (let i = 0; i < dotCount; i++) { const dot = document.createElement('div'); dot.className = 'dot'; // Random size const size = Math.random() * 20 + 5; dot.style.width = `${size}px`; dot.style.height = `${size}px`; // Random red gradient const opacity = Math.random() * 0.2 + 0.1; dot.style.background = `linear-gradient(135deg, rgba(220, 53, 69, ${opacity}), rgba(255, 45, 85, ${opacity}))`; // Random position dot.style.left = `${Math.random() * 100}vw`; // Random animation delay and duration const delay = Math.random() * 20; const duration = Math.random() * 15 + 20; dot.style.animationDelay = `${delay}s`; dot.style.animationDuration = `${duration}s`; dotsContainer.appendChild(dot); } } // Interactive bulb const bulb = document.querySelector('.bulb'); if (bulb) { bulb.addEventListener('mouseenter', function() { this.style.animation = 'bulbGlow 0.5s ease-in-out infinite alternate'; }); bulb.addEventListener('mouseleave', function() { this.style.animation = 'bulbGlow 2s ease-in-out infinite alternate'; }); bulb.addEventListener('click', function() { this.style.animation = 'none'; this.style.boxShadow = '0 0 60px rgba(220, 53, 69, 0.8), 0 0 120px rgba(220, 53, 69, 0.5), 0 0 180px rgba(220, 53, 69, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.5)'; setTimeout(() => { this.style.animation = 'bulbGlow 2s ease-in-out infinite alternate'; }, 500); }); } // Initialize floating dots createFloatingDots(); // Dynamic gradient intensity on scroll window.addEventListener('scroll', () => { const scrollPosition = window.pageYOffset; const gradientBg = document.querySelector('.gradient-bg'); if (gradientBg) { gradientBg.style.opacity = Math.max(0.5, 1 - (scrollPosition / 1000)); } }); // Button ripple effect const buttons = document.querySelectorAll('.btn-primary, .btn-secondary, .btn-build-resume'); buttons.forEach(button => { button.addEventListener('click', function(e) { const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.cssText = ` position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s linear; width: ${size}px; height: ${size}px; top: ${y}px; left: ${x}px; pointer-events: none; `; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Scroll animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('fade-in-up'); } }); }, observerOptions); // Observe elements for scroll animations document.querySelectorAll('.delay-1, .delay-2, .delay-3').forEach(el => { observer.observe(el); }); });

Loading Resume Editor