Birthday Invitation Generator Birthday Invitation Generator Birthday Invitation Generator Design Your Perfect Party Invite 1. Event Details 2. Invitation Preview Party Information Birthday Person / Event Title Tone / Theme (For Styling) Pink & Gold (Festive) Blue & Green (Adventure) Purple & Silver (Elegant) When & Where Date Time Location Name / Address RSVP & Notes RSVP Contact & Deadline Special Note (e.g., Gifts, Costume) View Invitation Preview → Review your invitation before downloading. Download PDF ← Edit Details ${invitationData.rsvp} ${invitationData.note} `; } // --- 5. EVENT LISTENERS --- function attachListeners() { Object.values(inputs).forEach(inp => inp.addEventListener('input', updatePreview)); downloadBtn.addEventListener('click', downloadPDF); // Tab switching logic document.querySelectorAll('.tab-btn').forEach(btn => { btn.addEventListener('click', function() { abcSwitchTab(this.dataset.tab); }); }); } // --- 6. TAB NAVIGATION --- window.abcSwitchTab = function(tabId) { // Ensure preview is updated immediately before showing updatePreview(); document.querySelectorAll('.tab-pane').forEach(p => p.classList.add('hidden')); document.querySelectorAll('.tab-btn').forEach(b => { b.classList.remove('active', 'border-pink-500', 'text-pink-600'); b.classList.add('text-gray-600', 'hover:text-pink-600', 'hover:border-pink-500'); }); document.getElementById(tabId).classList.remove('hidden'); document.querySelector(`.tab-btn[data-tab="${tabId}"]`).classList.add('active', 'border-pink-500', 'text-pink-600'); document.querySelector(`.tab-btn[data-tab="${tabId}"]`).classList.remove('text-gray-600', 'hover:text-pink-600', 'hover:border-pink-500'); document.getElementById('birthday-invitation-tool').scrollIntoView({behavior: 'smooth'}); }; // --- 7. PDF EXPORT --- function downloadPDF() { const element = document.getElementById('invitation-render-area'); const filename = (invitationData.title || 'Birthday_Invite').replace(/\s+/g, '_'); const opt = { margin: 0.5, filename: `${filename}.pdf`, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 3, useCORS: true }, // Increased scale for print quality jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; const origText = downloadBtn.innerText; downloadBtn.innerText = "Generating PDF..."; html2pdf().set(opt).from(element).save().then(() => { downloadBtn.innerText = origText; }); }