<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>đ Afrin Marriage Media - āĻ¸োāĻļ্āĻ¯াāĻ˛ āĻĒোāĻ¸্āĻ āĻেāĻ¨াāĻ°েāĻāĻ° đ</title>
<style>
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%); margin: 0; padding: 10px; color: #333; }
.container { max-width: 900px; margin: 0 auto; background: white; border-radius: 25px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); overflow: hidden; }
header { background: linear-gradient(45deg, #E91E63, #9C27B0); color: white; padding: 20px; text-align: center; }
header img.logo { width: 120px; height: auto; margin-bottom: 10px; border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
h1 { margin: 0; font-size: 1.8em; }
.tabs { display: flex; background: #f8f9fa; }
.tab-btn { flex: 1; padding: 15px; border: none; background: none; cursor: pointer; font-weight: bold; transition: all 0.3s; }
.tab-btn.active { background: linear-gradient(45deg, #E91E63, #9C27B0); color: white; }
.tab-content { display: none; padding: 20px; }
.tab-content.active { display: block; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
label { font-weight: bold; color: #9C27B0; margin-bottom: 5px; display: block; font-size: 0.95em; }
input, select, textarea { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 12px; font-size: 16px; transition: border-color 0.3s; }
input:focus, select:focus, textarea:focus { border-color: #E91E63; outline: none; }
textarea { grid-column: 1 / -1; min-height: 80px; resize: vertical; }
.preview-section { grid-column: 1 / -1; text-align: center; margin-top: 20px; }
#livePreview { width: 300px; height: 450px; border-radius: 15px; box-shadow: 0 15px 30px rgba(0,0,0,0.2); border: 3px solid #E91E63; }
.actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.btn { padding: 12px 24px; border: none; border-radius: 25px; font-weight: bold; cursor: pointer; transition: all 0.3s; font-size: 1em; flex: 1; max-width: 200px; }
.btn-primary { background: linear-gradient(45deg, #E91E63, #9C27B0); color: white; }
.btn-primary:hover { transform: scale(1.05); }
.btn-secondary { background: #f8f9fa; color: #9C27B0; border: 2px solid #9C27B0; }
#caption { background: linear-gradient(45deg, #f8f9fa, #fff); padding: 15px; border-radius: 12px; margin-top: 15px; border-left: 5px solid #E91E63; display: none; }
#bulkForm { display: none; }
#bulkInput { width: 100%; height: 200px; font-family: monospace; }
.bulk-list { max-height: 300px; overflow-y: auto; }
.bulk-item { border: 1px solid #ddd; margin: 10px 0; padding: 10px; border-radius: 10px; }
@media (max-width: 768px) { form { grid-template-columns: 1fr; } .actions { flex-direction: column; } }
</style>
</head>
<body>
<div class="container">
<header>
<img class="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Vx5gjWzYnNoQIgiheEED0muEzzKPti1fEJNKsjyvZOA87trLnEAm5-075oI5wprNbpOlgVIJeD4_p68kwQ5B0SZl59kUAqKS7goXckRVkAgULyjpjmUXuyIOozYaqSqTaF2YNhqD88rI2dIQRYQeHySqNTl2fi4j_SaOhVKhed0_Mp5gwRL2PgPe-3Sl/s1600/Afrin%20Marriage%20Media%20Logo.png.png" alt="Afrin Marriage Media" onload="initCanvas()" onerror="this.style.display='none'">
<h1>đ Afrin Marriage Media āĻĒোāĻ¸্āĻ āĻেāĻ¨াāĻ°েāĻāĻ° đ</h1>
<p>āĻĒাāĻ¤্āĻ°/āĻĒাāĻ¤্āĻ°ী āĻĒ্āĻ°োāĻĢাāĻāĻ˛ āĻĨেāĻে FB/IG āĻĒোāĻ¸্āĻ āĻ¤ৈāĻ°ি āĻāĻ°ুāĻ¨</p>
</header>
<div class="tabs">
<button class="tab-btn active" onclick="showTab('single')">āĻāĻāĻ āĻĒ্āĻ°োāĻĢাāĻāĻ˛</button>
<button class="tab-btn" onclick="showTab('bulk')">āĻŦাāĻ˛্āĻ (āĻŽাāĻ˛্āĻি)</button>
</div>
<div id="singleTab" class="tab-content active">
<form id="form">
<div>
<label>āĻাāĻāĻĒ</label>
<select id="type"><option value="āĻĒাāĻ¤্āĻ°ী āĻাāĻ">āĻĒাāĻ¤্āĻ°ী āĻাāĻ (āĻĒাāĻ¤্āĻ°)</option><option value="āĻĒাāĻ¤্āĻ° āĻাāĻ">āĻĒাāĻ¤্āĻ° āĻাāĻ (āĻĒাāĻ¤্āĻ°ী)</option></select>
</div>
<div>
<label>āĻ¨াāĻŽ</label>
<input type="text" id="name" placeholder="āĻ¯েāĻŽāĻ¨: āĻ°াāĻšুāĻ˛ āĻাāĻ¨" value="āĻ°াāĻšুāĻ˛ āĻাāĻ¨">
</div>
<div>
<label>āĻŦāĻ¯়āĻ¸</label>
<input type="text" id="age" placeholder="ā§Šā§Ļ" value="ā§Šā§Ļ">
</div>
<div>
<label>āĻāĻ্āĻāĻ¤া</label>
<input type="text" id="height" placeholder="ā§Ģ āĻĢুāĻ ā§ āĻāĻ্āĻি" value="ā§Ģ'ā§"">
</div>
<div>
<label>āĻļিāĻ্āĻˇা</label>
<input type="text" id="education" placeholder="BUTEX" value="BUTEX">
</div>
<div>
<label>āĻĒেāĻļা</label>
<input type="text" id="profession" placeholder="āĻ
্āĻ¯াāĻ¸িāĻ¸্āĻ্āĻ¯াāĻ¨্āĻ āĻĄিāĻ°েāĻ্āĻāĻ° (NSI)" value="āĻ
্āĻ¯াāĻ¸িāĻ¸্āĻ্āĻ¯াāĻ¨্āĻ āĻĄিāĻ°েāĻ্āĻāĻ° (NSI)">
</div>
<div>
<label>āĻŦাāĻŦাāĻ° āĻĒেāĻļা</label>
<input type="text" id="father" placeholder="āĻ
āĻŦāĻ¸āĻ°āĻĒ্āĻ°াāĻĒ্āĻ¤ āĻ¸āĻ°āĻাāĻ°ি āĻāĻ°্āĻŽāĻāĻ°্āĻ¤া" value="āĻ
āĻŦāĻ¸āĻ°āĻĒ্āĻ°াāĻĒ্āĻ¤ āĻ¸āĻ°āĻাāĻ°ি āĻāĻ°্āĻŽāĻāĻ°্āĻ¤া">
</div>
<div>
<label>āĻাāĻāĻŦোāĻ¨</label>
<input type="text" id="siblings" placeholder="ā§§ āĻাāĻ, ā§¨ āĻŦোāĻ¨" value="">
</div>
<div>
<label>āĻ
āĻŦāĻ¸্āĻĨাāĻ¨</label>
<input type="text" id="location" placeholder="āĻĸাāĻা" value="āĻĸাāĻা">
</div>
<div>
<label>āĻĢোāĻ¨</label>
<input type="text" id="phone" placeholder="ā§Ļā§§ā§ā§¯ā§Ģā§¨ā§Ļā§ā§Žā§Ŧā§Ŧ" value="ā§Ļā§§ā§ā§¯ā§Ģā§¨ā§Ļā§ā§Žā§Ŧā§Ŧ">
</div>
<textarea id="desc" placeholder="āĻ
āĻ¤িāĻ°িāĻ্āĻ¤ āĻŦিāĻŦāĻ°āĻŖ..."></textarea>
<div>
<label>āĻেāĻŽāĻĒ্āĻ˛েāĻ</label>
<select id="template">
<option value="1">Classic Pink</option>
<option value="2">Purple Modern</option>
<option value="3">Golden Elegant</option>
</select>
</div>
<div class="preview-section">
<h3>āĻ˛াāĻāĻ āĻĒ্āĻ°িāĻিāĻ</h3>
<canvas id="livePreview"></canvas>
</div>
<div class="actions">
<button class="btn btn-primary" onclick="downloadImage()">đĨ āĻĄাāĻāĻ¨āĻ˛োāĻĄ PNG</button>
<button class="btn btn-secondary" onclick="copyCaption()">đ āĻ্āĻ¯াāĻĒāĻļāĻ¨ āĻāĻĒি</button>
<button class="btn btn-primary" onclick="shareSocial()">đ āĻļেāĻ¯়াāĻ° (FB/IG)</button>
</div>
<div id="caption"></div>
</form>
</div>
<div id="bulkTab" class="tab-content">
<p>JSON āĻĢāĻ°āĻŽ্āĻ¯াāĻে āĻĒ্āĻ°োāĻĢাāĻāĻ˛ āĻ˛িāĻ¸্āĻ āĻĒেāĻ¸্āĻ āĻāĻ°ুāĻ¨ (āĻāĻĻাāĻšāĻ°āĻŖ āĻ¨িāĻে):</p>
<textarea id="bulkInput" placeholder='[\n {\n "type": "āĻĒাāĻ¤্āĻ°ী āĻাāĻ",\n "name": "ABC",\n "age": "28",\n ... \n }\n]'></textarea>
<div class="actions">
<button class="btn btn-primary" onclick="generateBulk()">Generate All</button>
</div>
<div id="bulkList" class="bulk-list"></div>
</div>
</div>
<canvas id="mainCanvas" width="1080" height="1350" style="display:none;"></canvas>
<img id="logoImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Vx5gjWzYnNoQIgiheEED0muEzzKPti1fEJNKsjyvZOA87trLnEAm5-075oI5wprNbpOlgVIJeD4_p68kwQ5B0SZl59kUAqKS7goXckRVkAgULyjpjmUXuyIOozYaqSqTaF2YNhqD88rI2dIQRYQeHySqNTl2fi4j_SaOhVKhed0_Mp5gwRL2PgPe-3Sl/s1600/Afrin%20Marriage%20Media%20Logo.png.png" style="display:none;" crossorigin="anonymous">
<script>
let logo = null;
const mainCtx = document.getElementById('mainCanvas').getContext('2d');
const previewCtx = document.getElementById('livePreview').getContext('2d');
function initCanvas() {
logo = document.getElementById('logoImg');
drawPreview();
}
function showTab(tab) {
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
event.target.classList.add('active');
document.getElementById(tab + 'Tab').classList.add('active');
}
function getData() {
return {
type: document.getElementById('type').value,
name: document.getElementById('name').value,
age: document.getElementById('age').value,
height: document.getElementById('height').value,
education: document.getElementById('education').value,
profession: document.getElementById('profession').value,
father: document.getElementById('father').value,
siblings: document.getElementById('siblings').value,
location: document.getElementById('location').value,
phone: document.getElementById('phone').value,
desc: document.getElementById('desc').value,
template: document.getElementById('template').value
};
}
function drawCanvas(ctx, width, height, data, scale=1) {
const temp = parseInt(data.template);
// Background gradient
let gradient;
if (temp === 1) gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0, '#FFE4E1');
gradient.addColorStop(1, '#F8BBD9');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
// Logo top center
if (logo && logo.complete) {
ctx.drawImage(logo, width/2 - 60*scale, 20*scale, 120*scale, 120*scale);
}
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Title
ctx.fillStyle = temp===1 ? '#E91E63' : temp===2 ? '#9C27B0' : '#FFD700';
ctx.font = `${80*scale}px bold Arial`;
ctx.fillText(data.type, width/2, 200*scale);
// Name
ctx.fillStyle = '#333';
ctx.font = `${60*scale}px bold Arial`;
ctx.fillText(data.name, width/2, 320*scale);
// Details
ctx.fillStyle = '#555';
ctx.font = `${40*scale}px Arial`;
ctx.textAlign = 'left';
let y = 420*scale;
const details = [
`āĻŦāĻ¯়āĻ¸: ${data.age}, āĻāĻ্āĻāĻ¤া: ${data.height}`,
`āĻļিāĻ্āĻˇা: ${data.education}`,
`āĻĒেāĻļা: ${data.profession}`,
`āĻŦাāĻŦা: ${data.father}`,
data.siblings ? `āĻাāĻāĻŦোāĻ¨: ${data.siblings}` : '',
`āĻ
āĻŦāĻ¸্āĻĨাāĻ¨: ${data.location}`
].filter(Boolean);
details.forEach(d => {
ctx.fillText(d, 100*scale, y);
y += 55*scale;
});
// Desc
if (data.desc) {
ctx.textAlign = 'center';
ctx.fillStyle = '#333';
ctx.font = `${35*scale}px italic Arial`;
ctx.fillText(data.desc, width/2, y + 50*scale);
}
// Phone box
ctx.fillStyle = temp===1 ? '#E91E63' : temp===2 ? '#9C27B0' : '#FFD700';
ctx.roundRect ? ctx.roundRect(100*scale, 900*scale, 880*scale, 120*scale, 20*scale) : drawRoundedRect(ctx, 100*scale, 900*scale, 880*scale, 120*scale, 20*scale);
ctx.fill();
ctx.fillStyle = 'white';
ctx.font = `${55*scale}px bold Arial`;
ctx.textAlign = 'left';
ctx.fillText('đ ' + data.phone, 140*scale, 960*scale);
// Heart bottom
ctx.textAlign = 'center';
ctx.font = `${200*scale}px Arial`;
ctx.fillText('đ', width/2, height - 150*scale);
// Company
ctx.fillStyle = temp===1 ? '#E91E63' : temp===2 ? '#9C27B0' : '#FFD700';
ctx.font = `${30*scale}px bold Arial`;
ctx.fillText('Afrin Marriage Media', width/2, height - 50*scale);
}
function drawRoundedRect(ctx, x, y, w, h, r) {
ctx.beginPath();
ctx.moveTo(x+r, y);
ctx.lineTo(x+w-r, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+r);
ctx.lineTo(x+w, y+h-r);
ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
ctx.lineTo(x+r, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-r);
ctx.lineTo(x, y+r);
ctx.quadraticCurveTo(x, y, x+r, y);
ctx.fill();
}
function drawPreview() {
const data = getData();
const pWidth = 300, pHeight = 450;
previewCtx.clearRect(0, 0, pWidth, pHeight);
previewCtx.imageSmoothingEnabled = true;
drawCanvas(previewCtx, pWidth, pHeight, data, pWidth/1080);
generateCaption(data);
}
function generateCaption(data) {
const caption = `đ ${data.type} đ\n\nđ¨đ ${data.name}\nđ āĻŦāĻ¯়āĻ¸: ${data.age} | āĻāĻ্āĻāĻ¤া: ${data.height}\nđ ${data.education}\nđŧ ${data.profession}\nđ¨đŠđ§đĻ āĻŦাāĻŦা: ${data.father}\nđ ${data.location}\n\nđ ${data.phone}\n\n#AfrinMarriageMedia #āĻŦিāĻŦাāĻš #āĻĒাāĻ¤্āĻ° #āĻĒাāĻ¤্āĻ°ী #MatrimonyBD`;
document.getElementById('caption').innerHTML = `<strong>āĻ্āĻ¯াāĻĒāĻļāĻ¨ (āĻāĻĒি āĻāĻ°ুāĻ¨):</strong><br><textarea readonly style="width:100%;height:100px;">${caption}</textarea>`;
document.getElementById('caption').style.display = 'block';
}
['type','name','age','height','education','profession','father','siblings','location','phone','desc','template'].forEach(id => {
document.getElementById(id).addEventListener('input', drawPreview);
});
function downloadImage() {
const data = getData();
const canvas = document.getElementById('mainCanvas');
const ctx = mainCtx;
ctx.clearRect(0, 0, 1080, 1350);
drawCanvas(ctx, 1080, 1350, data, 1);
const link = document.createElement('a');
link.download = `afrin_${data.type.replace(/\\s+/g,'_')}_${data.name}.png`;
link.href = canvas.toDataURL('image/png');
link.click();
}
function copyCaption() {
const data = getData();
navigator.clipboard.writeText(document.getElementById('caption').querySelector('textarea').value).then(() => alert('āĻ্āĻ¯াāĻĒāĻļāĻ¨ āĻāĻĒি āĻšāĻ¯়েāĻে!'));
}
async function shareSocial() {
const data = getData();
downloadImage(); // First download
if (navigator.share) {
await navigator.share({title: data.type, text: document.getElementById('caption').innerText, files: []});
} else {
const fbUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`;
window.open(fbUrl, '_blank');
}
}
function generateBulk() {
try {
const profiles = JSON.parse(document.getElementById('bulkInput').value);
const list = document.getElementById('bulkList');
list.innerHTML = '';
profiles.forEach((data, i) => {
data.template = data.template || '1';
const canvas = document.createElement('canvas');
canvas.width = 1080; canvas.height = 1350;
const ctx = canvas.getContext('2d');
drawCanvas(ctx, 1080, 1350, data, 1);
const img = document.createElement('img');
img.src = canvas.toDataURL('image/png');
img.style.width = '200px';
img.onclick = () => {
const link = document.createElement('a');
link.download = `bulk_${i+1}.png`;
link.href = img.src;
link.click();
};
const div = document.createElement('div');
div.className = 'bulk-item';
div.appendChild(img);
div.innerHTML += `<p>${data.name}</p>`;
list.appendChild(div);
});
} catch(e) {
alert('JSON āĻুāĻ˛! āĻāĻĻাāĻšāĻ°āĻŖ āĻĻেāĻুāĻ¨।');
}
}
// Init
drawPreview();
</script>
</html>
**āĻেāĻ¸্āĻ āĻāĻ°ুāĻ¨:** Local HTML āĻĢাāĻāĻ˛ āĻŦাāĻ¨িāĻ¯়ে āĻেāĻ āĻāĻ°ুāĻ¨। Blogger-āĻ gadget size 100% āĻāĻ°ুāĻ¨। āĻ¯āĻĻি āĻ˛োāĻো āĻ¨া āĻ˛োāĻĄ āĻšāĻ¯়, local image upload āĻāĻ°ুāĻ¨। āĻāĻ°āĻ āĻাāĻ¸্āĻāĻŽ āĻাāĻāĻ˛ে āĻŦāĻ˛ুāĻ¨! đ✨`