<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap” rel=”stylesheet”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js”></script>

<style>
/* ওয়ার্ডপ্রেস থিম কনফ্লিক্ট এড়ানোর জন্য ফুল-স্ক্রিন রিসেট */
.wp-pdf-body {
font-family: ‘Inter’, Arial, sans-serif !important;
background-color: #f8fafc !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 80vh !important; /* থিমের ফাঁকা জায়গা অ্যাডজাস্ট করার জন্য */
color: #334155 !important;
box-sizing: border-box !important;
}
.wp-container {
width: 100% !important;
max-width: 520px !important;
background: white !important;
padding: 40px 30px !important;
border-radius: 16px !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
border: 1px solid #e2e8f0 !important;
text-align: center !important;
margin: 20px !important;
box-sizing: border-box !important;
}
.wp-container h2 {
margin-top: 0 !important;
margin-bottom: 8px !important;
color: #1e293b !important;
font-size: 24px !important;
font-weight: 700 !important;
}
.wp-container p.subtitle {
font-size: 14px !important;
color: #64748b !important;
margin-bottom: 30px !important;
line-height: 1.5 !important;
}
.wp-file-upload-box {
border: 2px dashed #cbd5e1 !important;
padding: 30px 20px !important;
border-radius: 12px !important;
background-color: #f1f5f9 !important;
margin-bottom: 25px !important;
transition: border-color 0.2s, background-color 0.2s !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
.wp-file-upload-box:hover {
border-color: #4f46e5 !important;
background-color: #f8fafc !important;
}
.wp-file-upload-box input[type=”file”] {
font-size: 14px !important;
color: #475569 !important;
max-width: 100% !important;
}
.wp-convert-btn {
background-color: #4f46e5 !important;
color: white !important;
border: none !important;
padding: 14px 28px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.2s, transform 0.1s !important;
width: 100% !important;
box-shadow: 0 2px 4px rgba(79, 70, 229, 0.15) !important;
display: block !important;
}
.wp-convert-btn:hover {
background-color: #4338ca !important;
}
.wp-convert-btn:active {
transform: scale(0.98) !important;
}
#wp-status-msg {
margin-top: 15px !important;
font-size: 14px !important;
color: #059669 !important;
font-weight: 500 !important;
display: none !important;
}
#wpPdfCanvas {
display: none !important;
}
</style>

<div class=”wp-pdf-body”>
<div class=”wp-container”>
<h2>PDF to Image Converter</h2>
<p class=”subtitle”>পিডিএফ আপলোড করে এক ক্লিকে সরাসরি ইমেজ ডাউনলোড করুন</p>

<div class=”wp-file-upload-box” onclick=”document.getElementById(‘wpPdfFile’).click();”>
<input id=”wpPdfFile” accept=”application/pdf” type=”file” onclick=”event.stopPropagation();”/>
</div>

<button class=”wp-convert-btn” onclick=”convertPDF()”>Convert &amp; Download</button>

<div id=”wp-status-msg”></div>

<canvas id=”wpPdfCanvas”></canvas>
</div>
</div>

<script type=’text/javascript’>
let originalFileName = “converted_image”;

document.getElementById(‘wpPdfFile’).addEventListener(‘change’, function(e) {
const file = e.target.files[0];
if (file) {
originalFileName = file.name.substring(0, file.name.lastIndexOf(‘.’)) || file.name;
document.getElementById(‘wp-status-msg’).style.display = “none”;
}
});

async function convertPDF() {
const fileInput = document.getElementById(‘wpPdfFile’);
const statusMsg = document.getElementById(‘wp-status-msg’);

if (fileInput.files.length === 0) {
alert(“দয়া করে প্রথমে একটি পিডিএফ ফাইল সিলেক্ট করুন।”);
return;
}

statusMsg.style.color = “#4f46e5”;
statusMsg.innerText = “কনভার্ট ও ডাউনলোড হচ্ছে…”;
statusMsg.style.display = “block”;

const file = fileInput.files[0];
const fileReader = new FileReader();

fileReader.onload = async function () {
try {
const typedarray = new Uint8Array(this.result);
const pdf = await pdfjsLib.getDocument(typedarray).promise;
const page = await pdf.getPage(1);

const viewport = page.getViewport({ scale: 2 });
const canvas = document.getElementById(‘wpPdfCanvas’);
const context = canvas.getContext(‘2d’);
canvas.height = viewport.height;
canvas.width = viewport.width;

const renderContext = {
canvasContext: context,
viewport: viewport
};

await page.render(renderContext).promise;

const imageURI = canvas.toDataURL(“image/png”);
const createTriggerLink = document.createElement(‘a’);

createTriggerLink.href = imageURI;
createTriggerLink.download = originalFileName + “.png”;

document.body.appendChild(createTriggerLink);
createTriggerLink.click();
document.body.removeChild(createTriggerLink);

statusMsg.style.color = “#059669”;
statusMsg.innerText = “✓ সফলভাবে ডাউনলোড হয়েছে!”;

} catch (error) {
statusMsg.style.color = “#dc2626”;
statusMsg.innerText = “কনভার্ট করতে সমস্যা হয়েছে। আবার চেষ্টা করুন।”;
console.error(error);
}
};

fileReader.readAsArrayBuffer(file);
}
</script>