// Handle input interactions const mainInput = document.querySelector('.main-input'); const addBtn = document.querySelector('.add-btn'); const uploadBtn = document.querySelector('.upload-btn'); // Focus input when clicking add button if (addBtn) { addBtn.addEventListener('click', () => { mainInput.focus(); }); } // Handle upload button click if (uploadBtn) { uploadBtn.addEventListener('click', () => { // Create hidden file input const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = 'image/*,.pdf'; fileInput.style.display = 'none'; fileInput.addEventListener('change', (e) => { if (e.target.files && e.target.files[0]) { console.log('File selected:', e.target.files[0].name); // Handle file upload logic here } }); document.body.appendChild(fileInput); fileInput.click(); document.body.removeChild(fileInput); }); } // Handle Enter key in input if (mainInput) { mainInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && mainInput.value.trim()) { console.log('Generating:', mainInput.value); // Handle generation logic here } }); } // Handle template card clicks const templateCards = document.querySelectorAll('.template-card'); templateCards.forEach(card => { card.addEventListener('click', () => { const templateName = card.querySelector('.template-name').textContent; console.log('Template clicked:', templateName); // Handle template navigation here }); }); // Handle navigation dropdowns const dropdowns = document.querySelectorAll('.nav-link.dropdown'); dropdowns.forEach(dropdown => { dropdown.addEventListener('click', (e) => { e.preventDefault(); console.log('Dropdown clicked:', dropdown.textContent.trim()); // Handle dropdown menu display here }); }); // Add smooth scroll behavior document.documentElement.style.scrollBehavior = 'smooth'; // Add smooth animations on page load window.addEventListener('load', () => { const hero = document.querySelector('.hero'); if (hero) { hero.style.opacity = '0'; hero.style.transform = 'translateY(10px)'; setTimeout(() => { hero.style.transition = 'all 0.5s ease'; hero.style.opacity = '1'; hero.style.transform = 'translateY(0)'; }, 100); } // Animate template cards const cards = document.querySelectorAll('.template-card'); cards.forEach((card, index) => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.transition = 'all 0.4s ease'; card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 200 + (index * 50)); }); });