🎉 Funny Card Maker

30 hilarious templates. Live preview. Free & instant — no sign-up needed.

Pick a Template
Live Preview — updates as you type
About this site
Birthday Card (PDF) Funny Card Maker Marriage Certificate Diploma Resignation Letter Medical Test Invoice Generator
'; } document.getElementById('btn-email').addEventListener('click', () => { const data = getData(); const imgData = canvas.toDataURL('image/png'); const popup = window.open('', '_blank', 'width=680,height=720,resizable=yes,scrollbars=yes'); if (!popup) { alert('Please allow pop-ups for this site to use the Email feature.'); return; } popup.document.open(); popup.document.write(buildEmailHtml(imgData, data, selectedTemplate)); popup.document.close(); // Wire copy button from parent window (same-origin — we wrote the content) const copyBtn = popup.document.getElementById('copy-btn'); if (copyBtn) { copyBtn.addEventListener('click', () => { const imgHtml = 'greeting card'; const htmlBlob = new Blob([imgHtml], { type: 'text/html' }); if (navigator.clipboard && navigator.clipboard.write) { navigator.clipboard.write([new ClipboardItem({ 'text/html': htmlBlob })]) .then(() => { copyBtn.textContent = '\u2705 Copied! Now paste into your email'; copyBtn.style.cssText += ';background:#f0fff4;color:#276749;border-color:#9ae6b4'; }) .catch(() => openImgFallback(popup, imgData)); } else { openImgFallback(popup, imgData); } }); } if (typeof plausible === 'function') plausible('Card Email'); }); function openImgFallback(ref, src) { const w = (ref || window).open(''); if (w) { w.document.write(' '); w.document.close(); } } function getData() { return { recipient: document.getElementById('inp-recipient').value.trim(), sender: document.getElementById('inp-sender').value.trim(), age: document.getElementById('inp-age').value.trim(), custom: document.getElementById('inp-custom').value.trim(), }; } function redraw() { renderCard(selectedTemplate, getData()); } // ─── TEMPLATE GALLERY ──────────────────────────────────────────────────────── function renderGallery() { const gallery = document.getElementById('template-gallery'); gallery.innerHTML = ''; const filtered = activeCategory === 'all' ? TEMPLATES : TEMPLATES.filter(t => t.category === activeCategory); for (const tpl of filtered) { const chip = document.createElement('div'); chip.className = 'tpl-chip' + (tpl.id === selectedTemplate.id ? ' selected' : ''); chip.style.background = tpl.chipBg; chip.style.color = tpl.chipText; chip.innerHTML = ` ${tpl.emoji} ${tpl.name} ${tpl.category} `; chip.addEventListener('click', () => { selectedTemplate = tpl; document.querySelectorAll('.tpl-chip').forEach(c => c.classList.remove('selected')); chip.classList.add('selected'); // Show/hide age field based on category document.getElementById('age-label').style.display = (tpl.category === 'Birthday' || tpl.category === 'Anniversary' || tpl.category === 'Retirement') ? '' : 'none'; redraw(); }); gallery.appendChild(chip); } } document.querySelectorAll('.cat-btn').forEach(btn => { btn.addEventListener('click', () => { activeCategory = btn.dataset.cat; document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); renderGallery(); }); }); // ─── INPUT LISTENERS ───────────────────────────────────────────────────────── ['inp-recipient', 'inp-sender', 'inp-age', 'inp-custom'].forEach(id => { document.getElementById(id).addEventListener('input', redraw); }); // ─── DOWNLOAD ──────────────────────────────────────────────────────────────── document.getElementById('btn-download').addEventListener('click', () => { const link = document.createElement('a'); const recipientName = document.getElementById('inp-recipient').value.trim(); const filename = `funny-card${recipientName ? '-' + recipientName.replace(/\s+/g, '-').toLowerCase() : ''}.png`; link.download = filename; link.href = canvas.toDataURL('image/png'); link.click(); if (typeof confetti === 'function') { confetti({ particleCount: 80, spread: 70, origin: { y: 0.6 } }); setTimeout(() => confetti({ particleCount: 40, spread: 50, origin: { y: 0.6 } }), 400); } if (typeof plausible === 'function') plausible('Card Download'); }); // ─── SHARE ─────────────────────────────────────────────────────────────────── if (navigator.share && navigator.canShare) { document.getElementById('btn-share').style.display = ''; } document.getElementById('btn-share').addEventListener('click', async () => { canvas.toBlob(async (blob) => { const recipient = document.getElementById('inp-recipient').value.trim(); const file = new File([blob], 'funny-card.png', { type: 'image/png' }); const shareData = { title: recipient ? `Card for ${recipient}` : 'Funny Card', text: `Check out this card I made!`, files: [file], }; if (navigator.canShare(shareData)) { try { await navigator.share(shareData); if (typeof plausible === 'function') plausible('Card Share'); } catch {} } }); }); // ─── ABOUT TOGGLE ───────────────────────────────────────────────────────────── document.getElementById('about-link').addEventListener('click', (e) => { e.preventDefault(); const t = document.getElementById('about-text'); t.style.display = t.style.display === 'none' ? 'block' : 'none'; }); // ─── INIT ───────────────────────────────────────────────────────────────────── renderGallery(); redraw();