Professional Student ID Card Maker with Source Code - PDF Pedia BD

 

প্রফেশনাল স্টুডেন্ট আইডি কার্ড মেকার: স্কুল-কলেজের জন্য একটি অপরিহার্য ডিজিটাল টুল

বর্তমান যুগে ডিজিটালাইজেশন শিক্ষা ব্যবস্থার একটি অবিচ্ছেদ্য অংশ হয়ে দাঁড়িয়েছে। একটি শিক্ষা প্রতিষ্ঠানের পেশাদারিত্বের অন্যতম পরিচয় হলো শিক্ষার্থীদের জন্য একটি মানসম্মত আইডি কার্ড। তবে সাধারণত গ্রাফিক ডিজাইন বা কাস্টম আইডি কার্ড তৈরির প্রক্রিয়াটি বেশ সময়সাপেক্ষ এবং ব্যয়বহুল। এই সমস্যার সহজ এবং কার্যকরী সমাধান হিসেবে PDF Pedia BD নিয়ে এসেছে সম্পূর্ণ ফ্রি "Professional Student ID Card Maker"।

আপনি যদি একজন শিক্ষক, আইটি অপারেটর বা শিক্ষা উদ্যোক্তা হয়ে থাকেন, তবে এই টুলটি আপনার কাজের গতি কয়েকগুণ বাড়িয়ে দেবে। নিচে এই টুলটির বিভিন্ন দিক এবং ব্যবহারের নিয়ম নিয়ে বিস্তারিত আলোচনা করা হলো।

কেন এই আইডি কার্ড মেকার টুলটি ব্যবহার করবেন?

প্রথাগতভাবে আইডি কার্ড তৈরি করতে হলে আপনাকে ফটোশপ বা ইলাস্ট্রেটরের মতো জটিল সফটওয়্যার জানতে হয়। কিন্তু আমাদের এই অনলাইন টুলের মাধ্যমে কোনো গ্রাফিক ডিজাইন জ্ঞান ছাড়াই যে কেউ উন্নতমানের আইডি কার্ড তৈরি করতে পারবেন। এর প্রধান সুবিধাগুলো হলো:

১. সময় ও অর্থ সাশ্রয়: বাইরে থেকে আইডি কার্ড ডিজাইন করিয়ে নিতে যে খরচ হয়, তা এখানে একদম জিরো। এছাড়া কয়েক মিনিটের মধ্যেই আপনি একসাথে অনেক শিক্ষার্থীর কার্ড রেডি করতে পারবেন। ২. ইউজার ফ্রেন্ডলি ইন্টারফেস: আমাদের এই টুলের ডিজাইন এমনভাবে করা হয়েছে যে কেউ একবার দেখলেই এটি ব্যবহার করতে পারবেন। এটি অত্যন্ত হালকা এবং যে কোনো ব্রাউজারে দ্রুত লোড হয়। ৩. ১০৫৮ পিক্সেল অপ্টিমাইজড লেআউট: আমাদের সাইটের কন্টেইনার সাইজ অনুযায়ী এটি সাজানো, যার ফলে বড় স্ক্রিনে আপনি ইনপুট দেওয়ার পাশাপাশি সরাসরি পাশে আউটপুট দেখতে পাবেন।

এই টুলের বিশেষ ফিচারসমূহ (Key Features)

এই আইডি কার্ড মেকারটি সাধারণ কোনো টুল নয়; এতে এমন কিছু অ্যাডভান্সড ফিচার যোগ করা হয়েছে যা সচরাচর ফ্রি টুলে পাওয়া যায় না:

• ডুয়েল ল্যাঙ্গুয়েজ সাপোর্ট (Bangla & English): আপনি চাইলে এক ক্লিকেই পুরো ইন্টারফেস এবং আইডি কার্ডের ফরম্যাট বাংলা বা ইংরেজিতে পরিবর্তন করতে পারবেন।

• রিয়েল-টাইম প্রিভিউ: আপনি যখনই কোনো তথ্য (নাম, রোল, শ্রেণী) ইনপুট বক্সে লিখবেন, তা সাথে সাথেই ডান পাশের ডেমো কার্ডে আপডেট হবে।

• কাস্টম থিম কালার: প্রতিটি শিক্ষা প্রতিষ্ঠানের নিজস্ব রঙ বা লোগোর সাথে মিল রেখে আপনি আইডি কার্ডের থিম কালার পরিবর্তন করতে পারবেন। এতে করে প্রতিটি প্রতিষ্ঠানের জন্য আলাদা ইউনিক ডিজাইন পাওয়া সম্ভব।

• ফটো ও লোগো জুম কন্ট্রোল: অনেক সময় আপলোড করা ছবি বা লোগো ফ্রেমে ঠিকমতো বসে না। আমাদের টুলে থাকা 'Zoom Bar' ব্যবহার করে আপনি ছবিটিকে নিখুঁতভাবে অ্যাডজাস্ট করতে পারবেন।

• অটোমেটিক কিউআর কোড জেনারেটর: আধুনিক আইডি কার্ড মানেই কিউআর কোড। কার্ডের পেছনে স্বয়ংক্রিয়ভাবে একটি কিউআর কোড তৈরি হবে, যেখানে আপনি শিক্ষার্থীর তথ্য বা প্রতিষ্ঠানের ওয়েবসাইট লিংক যুক্ত করতে পারবেন।

• হাই-কোয়ালিটি ডাউনলোড: এই টুল দিয়ে তৈরি কার্ডগুলো হাই-রেজোলিউশনে (Scale 3) ডাউনলোড হয়, যার ফলে প্রিন্ট করার পর লেখাগুলো অত্যন্ত পরিষ্কার এবং ঝকঝকে দেখায়।

আইডি কার্ড তৈরি করার ধাপসমূহ (How to Use)

এই টুলটি ব্যবহার করা অত্যন্ত সহজ। নিচের ধাপগুলো অনুসরণ করে আপনি একটি প্রফেশনাল আইডি কার্ড তৈরি করতে পারেন:

১. ভাষা নির্বাচন: প্রথমে আপনার পছন্দ অনুযায়ী 'English' বা 'বাংলা' বাটন সিলেক্ট করুন। 

২. ছবি ও লোগো আপলোড: 'Student Photo' এবং 'School Logo' বাটনে ক্লিক করে আপনার কম্পিউটার বা ফোন থেকে প্রয়োজনীয় ছবিগুলো সিলেক্ট করুন। 

৩. ছবি অ্যাডজাস্টমেন্ট: যদি ছবি বা লোগোটি ছোট বা বড় মনে হয়, তবে স্লাইডার (Zoom Bar) ড্র্যাগ করে সেটিকে ফ্রেমের সাথে মানানসই করে নিন। 

৪. তথ্য পূরণ: বাম পাশের ফর্মটিতে প্রতিষ্ঠানের নাম, শিক্ষার্থীর নাম, ক্লাস, রোল, পিতার নাম, রক্তের গ্রুপ এবং মোবাইল নম্বর টাইপ করুন। 

৫. ঠিকানা ও কিউআর কোড: কার্ডের পেছনের অংশের জন্য স্কুলের ঠিকানা, স্থায়ী ঠিকানা এবং কিউআর কোডের জন্য নির্দিষ্ট তথ্য দিন। 

৬. থিম কালার পরিবর্তন: আপনার প্রতিষ্ঠানের লোগোর সাথে মিলিয়ে 'Theme Color' পিকার থেকে একটি সুন্দর রঙ নির্বাচন করুন। 

৭. সংরক্ষণ: সব কিছু ঠিক থাকলে 'Save Front Side' এবং 'Save Back Side' বাটনে ক্লিক করে কার্ডের দুটি অংশ আপনার ডিভাইসে পিএনজি (PNG) ফরম্যাটে সেভ করে নিন।

কার জন্য এই টুলটি সবথেকে বেশি কার্যকর?

এই টুলটি মূলত শিক্ষা সংশ্লিষ্ট ব্যক্তিদের কথা মাথায় রেখে তৈরি করা হয়েছে:

• স্কুল ও কলেজ কর্তৃপক্ষ: যারা স্বল্প খরচে নিজস্ব ব্যবস্থাপনায় আইডি কার্ড তৈরি করতে চান।

• কোচিং সেন্টার: ছোট বা বড় কোচিং সেন্টারের শিক্ষার্থীদের প্রফেশনাল লুক দেওয়ার জন্য।

• সাইবার ক্যাফে মালিক: যারা গ্রাহকদের আইডি কার্ড তৈরির সার্ভিস প্রদান করে আয় করতে চান।

• প্রোগ্রামিং শিক্ষার্থী: যারা ওয়েব ডেভেলপমেন্ট শিখছেন, তারা এই কোডটি বিশ্লেষণ করে নতুন কিছু শিখতে পারবেন।

উপসংহার

প্রযুক্তির সঠিক ব্যবহারের মাধ্যমে জটিল কাজকে সহজ করাই PDF Pedia BD-এর লক্ষ্য। আমাদের এই প্রফেশনাল আইডি কার্ড মেকার টুলটি আপনার শিক্ষা প্রতিষ্ঠানের প্রশাসনিক কাজকে আরও সহজ এবং স্মার্ট করে তুলবে। আমরা এই টুলের সোর্স কোডটি সবার জন্য উন্মুক্ত করে দিয়েছি যাতে আপনি নিজের ব্লগে বা প্রজেক্টেও এটি ব্যবহার করতে পারেন।

আমাদের এই প্রচেষ্টা যদি আপনার উপকারে আসে, তবে আপনার সহকর্মী বা বন্ধুদের সাথে শেয়ার করতে ভুলবেন না। ধন্যবাদ।

👁️ Live Demo দেখুন

Source Code (HTML/CSS/JS)

<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Advanced ID Card Maker - PDF Pedia BD</title> <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <style> :root { --pedia-color: #0080a1; --dark-bg: #2c3e50; } body { font-family: 'Hind Siliguri', sans-serif; background: #f4f7f9; margin: 0; padding: 10px; } /* Main Container: Fixed 1058px */ .pedia-wrapper { max-width: 1058px; margin: 20px auto; display: flex; flex-direction: row; align-items: flex-start; gap: 20px; background: #fff; padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); box-sizing: border-box; } /* Left Side: Controls */ .pedia-controls { flex: 1.4; padding-right: 20px; border-right: 2px solid #f0f0f0; } .lang-switch { display: flex; gap: 10px; margin-bottom: 20px; } .lang-btn { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #ddd; cursor: pointer; font-family: 'Hind Siliguri', sans-serif; font-weight: 700; background: #fff; transition: 0.3s; } .lang-btn.active { background: var(--pedia-color); color: #fff; border-color: var(--pedia-color); } /* Upload & Slider Box */ .feature-box { background: #f8fafc; padding: 15px; border-radius: 10px; margin-bottom: 15px; border: 1px solid #edf2f7; } .upload-row { display: flex; gap: 10px; margin-bottom: 15px; } .u-btn { flex: 1; border: 2px dashed var(--pedia-color); padding: 12px; text-align: center; cursor: pointer; border-radius: 8px; font-weight: 600; font-size: 14px; background: #fff; } .slider-group { margin-bottom: 10px; } .slider-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; color: #34495e; } input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--pedia-color); } .pedia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pedia-grid input { padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; width: 100%; box-sizing: border-box; font-family: 'Hind Siliguri', sans-serif; font-size: 14px; } .full-span { grid-column: span 2; } /* Right Side: Preview (Sticky) */ .pedia-view { flex: 1; position: sticky; top: 20px; display: flex; flex-direction: column; align-items: center; gap: 25px; } /* Card Design */ .card-box { width: 300px; height: 450px; background: #fff; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid #ddd; box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .card-top { background: var(--dark-bg); color: #fff; padding: 10px; display: flex; align-items: center; gap: 8px; height: 55px; box-sizing: border-box; transition: 0.3s; } .logo-c { width: 38px; height: 38px; border-radius: 50%; background: #fff; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } .logo-c img { width: 100%; object-fit: contain; } .card-top h4 { font-size: 13px; margin: 0; text-align: center; flex: 1; font-weight: 700; line-height: 1.2; } .photo-f { width: 135px; height: 155px; border: 3px solid var(--pedia-color); margin: 15px auto; overflow: hidden; border-radius: 10px; background: #eee; display: flex; align-items: center; justify-content: center; position: relative; } .photo-f img { width: 100%; transition: transform 0.1s; } .card-data { padding: 0 20px; } .d-row { display: flex; margin-bottom: 7px; border-bottom: 1px solid #f1f5f9; padding-bottom: 3px; font-size: 12px; } .d-label { width: 90px; font-weight: 700; color: var(--pedia-color); transition: 0.3s; } .card-footer { position: absolute; bottom: 0; width: 100%; height: 20px; background: var(--pedia-color); transition: 0.3s; } /* Back Side */ .back-inner { background: var(--dark-bg); height: 100%; color: #fff; text-align: center; transition: 0.3s; } .qr-c { background: #fff; padding: 6px; width: fit-content; margin: 18px auto; border-radius: 6px; } /* Action Buttons */ .save-group { display: flex; gap: 10px; margin-top: 20px; width: 100%; } .btn-action { flex: 1; padding: 14px; border: none; border-radius: 10px; color: #fff; font-weight: 700; cursor: pointer; font-family: 'Hind Siliguri', sans-serif; transition: 0.3s; } .btn-green { background: #27ae60; } .btn-red { background: #e74c3c; } .btn-green:hover { background: #219150; } @media (max-width: 850px) { .pedia-wrapper { flex-direction: column; } .pedia-controls { border-right: none; padding-right: 0; margin-bottom: 30px; } .pedia-view { position: static; } } </style> </head> <body> <div class="pedia-wrapper"> <div class="pedia-controls"> <h2 id="t-main" style="margin-top:0; color:var(--pedia-color); text-align:center;">Student ID Card Maker</h2> <div class="lang-switch"> <button class="lang-btn active" id="btn-en" onclick="setLang('en')">English</button> <button class="lang-btn" id="btn-bn" onclick="setLang('bn')">বাংলা</button> </div> <div class="feature-box"> <div class="upload-row"> <div class="u-btn" onclick="document.getElementById('f-p').click()">👤 Student Photo</div> <div class="u-btn" onclick="document.getElementById('f-l').click()">🏫 School Logo</div> <input type="file" id="f-p" hidden accept="image/*"> <input type="file" id="f-l" hidden accept="image/*"> </div> <div class="slider-group"> <label id="t-zp">Photo Zoom (ছবি ছোট-বড়)</label> <input type="range" id="z-p" min="0.5" max="3" step="0.1" value="1"> </div> <div class="slider-group"> <label id="t-zl">Logo Zoom (লোগো ছোট-বড়)</label> <input type="range" id="z-l" min="0.5" max="4" step="0.1" value="1"> </div> <div class="slider-group" style="margin-top:15px;"> <label id="t-theme">Select Theme Color (থিম কালার)</label> <input type="color" id="theme-color" value="#0080a1" style="height:40px; border-radius:5px; border:none; padding:2px;"> </div> </div> <div class="pedia-grid"> <input type="text" id="i-inst" class="full-span" placeholder="Institution Name"> <input type="text" id="i-name" class="full-span" placeholder="Student Name"> <input type="text" id="i-class" placeholder="Class"> <input type="text" id="i-roll" placeholder="Roll No"> <input type="text" id="i-father" class="full-span" placeholder="Father's Name"> <input type="text" id="i-blood" placeholder="Blood Group"> <input type="text" id="i-phone" placeholder="Phone Number"> <input type="text" id="i-s-addr" class="full-span" placeholder="School Address"> <input type="text" id="i-h-addr" class="full-span" placeholder="Home Address"> <input type="text" id="i-qr" class="full-span" placeholder="QR Code Text"> </div> <div class="save-group"> <button class="btn-action btn-green" onclick="save('front')">Save Front (সামনে)</button> <button class="btn-action btn-green" onclick="save('back')">Save Back (পেছনে)</button> <button class="btn-action btn-red" onclick="location.reload()">Reset</button> </div> </div> <div class="pedia-view"> <div class="card-box" id="card-front"> <div class="card-top dynamic-bg"> <div class="logo-c"><img id="v-l" src="https://via.placeholder.com/50"></div> <h4 id="v-inst">INSTITUTION NAME</h4> </div> <div class="photo-f" id="v-border"><img id="v-p" src="https://via.placeholder.com/150"></div> <div class="card-data"> <div class="d-row"><span class="d-label l-n dynamic-text">NAME</span>: <span id="v-name">-</span></div> <div class="d-row"><span class="d-label l-c dynamic-text">CLASS</span>: <span id="v-class">-</span></div> <div class="d-row"><span class="d-label l-r dynamic-text">ROLL</span>: <span id="v-roll">-</span></div> <div class="d-row"><span class="d-label l-f dynamic-text">FATHER</span>: <span id="v-father">-</span></div> <div class="d-row"><span class="d-label l-b dynamic-text">BLOOD</span>: <span id="v-blood">-</span></div> <div class="d-row"><span class="d-label l-ph dynamic-text">PHONE</span>: <span id="v-phone">-</span></div> </div> <div class="card-footer dynamic-bg"></div> </div> <div class="card-box" id="card-back"> <div class="back-inner dynamic-bg-dark"> <div id="t-info" style="background:rgba(0,0,0,0.3); padding:10px; font-weight:700; font-size:14px; letter-spacing:1px;">INFORMATION</div> <div class="qr-c" id="v-qr"></div> <div style="padding: 0 15px; font-size: 11px;"> <span class="l-sa" style="font-weight:700; color:#fff; display:block; margin-bottom:3px;">SCHOOL ADDRESS</span> <p id="v-s-addr" style="margin:0 0 12px 0; opacity:0.9;">-</p> <span class="l-ha" style="font-weight:700; color:#fff; display:block; margin-bottom:3px;">HOME ADDRESS</span> <p id="v-h-addr" style="margin:0; opacity:0.9;">-</p> </div> <div class="card-footer dynamic-bg" style="opacity:0.5;"></div> </div> </div> </div> </div> <script> // HTML Entity Decoder to prevent Bengali breaking function decodeHtml(html) { var txt = document.createElement("textarea"); txt.innerHTML = html; return txt.value; } const langs = { en: { main:"ID Card Maker", zp:"Photo Zoom", zl:"Logo Zoom", theme:"Select Theme Color", n:"NAME", c:"CLASS", r:"ROLL", f:"FATHER", b:"BLOOD", ph:"PHONE", sa:"SCHOOL ADDRESS", ha:"HOME ADDRESS", info:"INFORMATION" }, bn: { main:"আইডি কার্ড মেকার", zp:"ছবি জুম", zl:"লোগো জুম", theme:"থিম কালার পরিবর্তন", n:"নাম", c:"শ্রেণী", r:"রোল", f:"পিতার নাম", b:"রক্তের গ্রুপ", ph:"মোবাইল", sa:"স্কুলের ঠিকানা", ha:"স্থায়ী ঠিকানা", info:"প্রয়োজনীয় তথ্য" } }; function setLang(l) { document.getElementById('t-main').innerText = decodeHtml(langs[l].main); document.getElementById('t-zp').innerText = decodeHtml(langs[l].zp); document.getElementById('t-zl').innerText = decodeHtml(langs[l].zl); document.getElementById('t-theme').innerText = decodeHtml(langs[l].theme); document.getElementById('t-info').innerText = decodeHtml(langs[l].info); document.querySelector('.l-n').innerText = decodeHtml(langs[l].n); document.querySelector('.l-c').innerText = decodeHtml(langs[l].c); document.querySelector('.l-r').innerText = decodeHtml(langs[l].r); document.querySelector('.l-f').innerText = decodeHtml(langs[l].f); document.querySelector('.l-b').innerText = decodeHtml(langs[l].b); document.querySelector('.l-ph').innerText = decodeHtml(langs[l].ph); document.querySelector('.l-sa').innerText = decodeHtml(langs[l].sa); document.querySelector('.l-ha').innerText = decodeHtml(langs[l].ha); document.getElementById('btn-en').classList.toggle('active', l === 'en'); document.getElementById('btn-bn').classList.toggle('active', l === 'bn'); } // Slider Controls document.getElementById('z-p').oninput = function() { document.getElementById('v-p').style.transform = `scale(${this.value})`; }; document.getElementById('z-l').oninput = function() { document.getElementById('v-l').style.transform = `scale(${this.value})`; }; // Theme Color Control document.getElementById('theme-color').oninput = function() { const color = this.value; document.querySelectorAll('.dynamic-bg').forEach(el => el.style.backgroundColor = color); document.querySelectorAll('.dynamic-text').forEach(el => el.style.color = color); document.getElementById('v-border').style.borderColor = color; }; // Real-time Input Syncing const inputIds = ['inst','name','class','roll','father','blood','phone','s-addr','h-addr']; inputIds.forEach(id => { document.getElementById(`i-${id}`).oninput = function() { document.getElementById(`v-${id}`).innerText = this.value || '-'; }; }); // Image Upload Handlers function handleUpload(inputId, viewId) { document.getElementById(inputId).onchange = function() { const reader = new FileReader(); reader.onload = e => document.getElementById(viewId).src = e.target.result; reader.readAsDataURL(this.files[0]); }; } handleUpload('f-p', 'v-p'); handleUpload('f-l', 'v-l'); // QR Code Generator document.getElementById('i-qr').oninput = function() { document.getElementById('v-qr').innerHTML = ""; new QRCode(document.getElementById("v-qr"), { text: this.value || "PDFPedia", width: 80, height: 80 }); }; // Save as Image function save(side) { const element = document.getElementById(`card-${side}`); html2canvas(element, { scale: 3, useCORS: true, backgroundColor: null }).then(canvas => { const link = document.createElement('a'); link.download = `ID_${side}_${Date.now()}.png`; link.href = canvas.toDataURL("image/png"); link.click(); }); } </script> </body> </html>