====== */
img.src = url;
});
// draw theme background
const bg = new Image();
bg.crossOrigin = 'anonymous';
bg.src = selectedTheme;
bg.onload = ()=> {
// draw bg full
ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);
// overlay slight vignette for readability
ctx.fillStyle = 'rgba(0,0,0,0.18)';
ctx.fillRect(0, canvas.height*0.62, canvas.width, canvas.height*0.38);
// draw user image circle (center-left)
const imgSize = Math.floor(canvas.width * 0.38); // ~38% width
const imgX = Math.floor(canvas.width*0.06);
const imgY = Math.floor(canvas.height*0.18);
if(userImg){
// crop/fit into circle
const iw = userImg.width, ih = userImg.height;
// compute scale to cover
const scale = Math.max(imgSize/iw, imgSize/ih);
const sw = imgSize/scale, sh = imgSize/scale;
// draw circular clip
ctx.save();
ctx.beginPath();
ctx.arc(imgX + imgSize/2, imgY + imgSize/2, imgSize/2, 0, Math.PI*2);
ctx.closePath();
ctx.clip();
// center crop
const sx = (iw - sw)/2, sy = (ih - sh)/2;
ctx.drawImage(userImg, sx, sy, sw, sh, imgX, imgY, imgSize, imgSize);
ctx.restore();
// ring around photo
ctx.beginPath();
ctx.arc(imgX + imgSize/2, imgY + imgSize/2, imgSize/2 + 6, 0, Math.PI*2);
ctx.strokeStyle = 'rgba(246,200,76,0.95)';
ctx.lineWidth = 8;
ctx.stroke();
} else {
// placeholder circle
ctx.save();
ctx.beginPath();
ctx.arc(imgX + imgSize/2, imgY + imgSize/2, imgSize/2, 0, Math.PI*2);
ctx.fillStyle = 'rgba(255,255,255,0.08)';
ctx.fill();
ctx.restore();
}
// draw texts on right/lower area
const name = document.getElementById('userName').value.trim() || 'आपका नाम';
ctx.fillStyle = '#fff';
// small header
ctx.font = '48px "Poppins", Arial';
ctx.textAlign = 'left';
ctx.fillText('🪔 Happy Diwali 🪔', canvas.width*0.46, canvas.height*0.36);
// name line
ctx.font = 'bold 64px "Poppins", Arial';
ctx.fillStyle = '#ffd966';
ctx.fillText(`${name} की तरफ़ से`, canvas.width*0.46, canvas.height*0.46);
// wishes (wrap)
ctx.font = '36px "Poppins", Arial';
ctx.fillStyle = '#ffffff';
ctx.textAlign = 'left';
const wishes = 'दीपों की रौशनी, खुशियों का à¤à¤°à¤ªूर साथ — आपकी दिवाली मंगलमय हो!';
wrapText(ctx, wishes, canvas.width*0.46, canvas.height*0.54, canvas.width*0.46, 46);
// bottom watermark
ctx.font = '28px Arial';
ctx.fillStyle = 'rgba(255,255,255,0.85)';
ctx.textAlign = 'center';
ctx.fillText('— yourquotezone.com', canvas.width/2, canvas.height*0.94);
// show download and share buttons
document.getElementById('downloadBtn').style.display = 'inline-block';
document.getElementById('whatsappShare').style.display = 'inline-block';
document.getElementById('copyLinkBtn').style.display = 'inline-block';
};
bg.onerror = ()=> {
alert('Theme image load error. Check theme URLs in config.');
};
}
document.getElementById('generateBtn').addEventListener('click', ()=>{
drawPreview();
});
// Download
document.getElementById('downloadBtn').addEventListener('click', ()=>{
const a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
const name = (document.getElementById('userName').value || 'MyDiwali').replace(/\s+/g,'_');
a.download = `${name}_Diwali_Story.png`;
a.click();
});
// Share link (referral)
function makeShareLink(){
const base = location.origin + location.pathname; // uses current page
const name = encodeURIComponent(document.getElementById('userName').value || '');
// include theme index optionally
const themeIndex = Array.from(document.querySelectorAll('.theme-thumb')).findIndex(t=>t.classList.contains('selected'));
const ref = `ref=${name}&t=${themeIndex}`;
return `${base}?${ref}`;
}
// WhatsApp share
document.getElementById('whatsappShare').addEventListener('click', ()=>{
const url = makeShareLink();
const text = encodeURIComponent(`मैंने अपनी Diwali wish बनाई — तुम्हारी बारी! 🌟\n${url}`);
const wa = `https://wa.me/?text=${text}`;
window.open(wa, '_blank');
});
// Copy link
document.getElementById('copyLinkBtn').addEventListener('click', ()=>{
const url = makeShareLink();
navigator.clipboard.writeText(url).then(()=> {
alert('Share link copied! अब इसे WhatsApp/Instagram पर à¤ेजो.');
}).catch(()=> alert('Copy failed. URL: ' + url));
});
/* Optional: parse incoming ref params so page can prefill name/theme */
window.addEventListener('load', ()=>{
const params = new URLSearchParams(location.search);
if(params.has('ref')) {
const nm = params.get('ref');
document.getElementById('userName').value = decodeURIComponent(nm);
} else if(params.has('t')) {
// optional theme preselect
const tidx = parseInt(params.get('t')||'0');
const thumbs = document.querySelectorAll('.theme-thumb');
if(thumbs[tidx]) {
thumbs.forEach(x=>x.classList.remove('selected'));
thumbs[tidx].classList.add('selected');
selectedTheme = thumbs[tidx].dataset.src;
}
}
// initial preview
drawPreview();
});