{"id":1246,"date":"2026-02-16T14:03:09","date_gmt":"2026-02-16T14:03:09","guid":{"rendered":"https:\/\/psf.org.bd\/?page_id=1246"},"modified":"2026-02-16T16:31:16","modified_gmt":"2026-02-16T16:31:16","slug":"student-id-card","status":"publish","type":"page","link":"https:\/\/psf.org.bd\/?page_id=1246","title":{"rendered":"Student ID Card"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\nProgati Learning Center Student ID Card<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&family=Pacifico&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsbarcode@3.11.6\/dist\/JsBarcode.all.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n<style>\n:root{--progati:#EB078E}\nbody{margin:0;padding:20px;font-family:'Poppins',sans-serif;background:#fff;}\n#mainContent{display:none;}\n.wrapper{display:flex;gap:20px;flex-wrap:wrap;}\n\n.form{width:320px;border:1px solid #ccc;padding:15px;border-radius:10px;}\n.form h2{margin:0 0 10px;color:var(--progati)}\n.form input,.form select,.form button{\nwidth:100%;padding:8px;margin-bottom:8px;border-radius:6px;border:1px solid #ccc;\n}\n.form button{background:var(--progati);color:#fff;border:none;cursor:pointer;}\n\n.card{\nwidth:360px;height:540px;border-radius:18px;\nbox-shadow:0 15px 35px rgba(0,0,0,.25);\nborder:1px solid #eee;overflow:hidden;\nposition:relative;background:#fff;\npage-break-after:always;\n}\n\n.header{background:var(--progati);color:#fff;text-align:center;padding:18px 10px;}\n.logo{\nwidth:110px;height:110px;background:#fff;border-radius:50%;\nmargin:0 auto 6px;overflow:hidden;\nborder:4px solid #fff;\n}\n.logo img{width:100%;height:100%;object-fit:contain;}\n\n.photo{\nwidth:85px;height:105px;\nborder:2px solid var(--progati);\nmargin:10px auto;\n}\n.photo img{width:100%;height:100%;object-fit:cover;}\n\n.info{padding:10px 18px;font-size:13px;}\n.row{display:grid;grid-template-columns:160px 10px auto;margin-bottom:6px;}\n.label{font-weight:600;}\n\n.back{padding:20px;font-size:14px;position:relative;text-align:center;}\n#barcode{display:block;margin:25px auto 10px;}\n\n.signature{position:absolute;bottom:45px;right:20px;text-align:center;}\n.sign-name{font-family:'Pacifico',cursive;font-size:20px;}\n.sign-line{border-top:1px solid #000;width:150px;margin-top:4px;font-size:12px;}\n\n.powered{\nposition:absolute;\nbottom:15px;\nleft:50%;\ntransform:translateX(-50%);\nfont-size:12px;\ncolor:var(--progati);\nfont-weight:700;\nwhite-space:nowrap;\n}\n\n#loginScreen{\nposition:fixed;inset:0;background:#fff;\ndisplay:flex;justify-content:center;align-items:center;\nz-index:9999;\n}\n\n.login-box{\nwidth:320px;padding:30px;border-radius:12px;\nbox-shadow:0 10px 30px rgba(0,0,0,.2);text-align:center;\n}\n.login-box h2{color:var(--progati);margin-bottom:15px;}\n.login-box input{width:100%;padding:10px;margin-bottom:10px;}\n.login-box button{width:100%;padding:10px;background:var(--progati);color:#fff;border:none;}\n#errorMsg{color:red;font-size:13px;}\n<\/style>\n<\/head>\n\n<body>\n\n<!-- LOGIN -->\n<div id=\"loginScreen\">\n <div class=\"login-box\">\n <h2>Progati Access<\/h2>\n <input type=\"password\" id=\"accessCode\" placeholder=\"Enter Access Code\">\n <button onclick=\"checkAccess()\">Login<\/button>\n <p id=\"errorMsg\"><\/p>\n <\/div>\n<\/div>\n\n<!-- MAIN -->\n<div id=\"mainContent\">\n<div class=\"wrapper\">\n\n<div class=\"form\">\n <h2>Student Input<\/h2>\n\n <input id=\"stuName\" placeholder=\"Student Name\">\n <input id=\"dob\" placeholder=\"Date of Birth\">\n <input id=\"adm\" placeholder=\"Admission Date\">\n\n <!-- Course Name Dropdown -->\n <select id=\"courseName\">\n <option value=\"\">Select Course Name<\/option>\n <option>Office Application Course (Basic)<\/option>\n <option>Office Application Course (Advance)<\/option>\n <option>Diploma in Computer Scince & Hardware<\/option>\n <option>Graphice Design<\/option>\n <option>Web Design & Development<\/option>\n <option>Digital Marketing<\/option>\n <\/select>\n\n <!-- Duration Dropdown -->\n <select id=\"duration\">\n <option value=\"\">Select Duration<\/option>\n <option>3 Month<\/option>\n <option>6 Month<\/option>\n <option>1 Year<\/option>\n <\/select>\n\n <input id=\"contact\" placeholder=\"Contact No\">\n <input type=\"file\" id=\"photo\">\n <input type=\"file\" id=\"logo\">\n\n <button onclick=\"generate()\">Generate ID Card<\/button>\n <button onclick=\"downloadPDF()\">Download PDF<\/button>\n <button onclick=\"downloadPNG()\">Download PNG<\/button>\n<\/div>\n\n<div id=\"cardArea\"><\/div>\n\n<\/div>\n<\/div>\n\n<script>\nlet isLoggedIn = false;\n\n\/* LOGIN FUNCTION *\/\nfunction checkAccess(){\n const enteredCode = document.getElementById(\"accessCode\").value.trim();\n const loginScreen = document.getElementById(\"loginScreen\");\n const mainContent = document.getElementById(\"mainContent\");\n const errorMsg = document.getElementById(\"errorMsg\");\n\n if(enteredCode === \"4313\"){\n isLoggedIn = true;\n loginScreen.style.display = \"none\";\n mainContent.style.display = \"block\";\n errorMsg.innerText = \"\";\n } else {\n errorMsg.innerText = \"Wrong Access Code!\";\n }\n}\n\n\/* ENTER PRESS LOGIN *\/\ndocument.getElementById(\"accessCode\").addEventListener(\"keypress\", function(e){\n if(e.key === \"Enter\"){\n checkAccess();\n }\n});\n\n\/* GENERATE CARD *\/\nfunction generate(){\nif(!isLoggedIn){ alert(\"Login first\"); return; }\n\nconst name = document.getElementById(\"stuName\").value;\nconst dobVal = document.getElementById(\"dob\").value;\nconst admVal = document.getElementById(\"adm\").value;\nconst course = document.getElementById(\"courseName\").value;\nconst durationVal = document.getElementById(\"duration\").value;\nconst contactVal = document.getElementById(\"contact\").value;\n\nconst photo = document.getElementById(\"photo\");\nconst logo = document.getElementById(\"logo\");\n\n\/* Sequential ID from 101 *\/\nlet lastId = localStorage.getItem(\"plc_last_id\");\nif(!lastId){ lastId = 100; } else { lastId = parseInt(lastId); }\nlastId += 1;\nlocalStorage.setItem(\"plc_last_id\", lastId);\nconst studentId = \"PLC-\" + lastId;\n\ndocument.getElementById(\"cardArea\").innerHTML = `\n<div class=\"card\">\n<div class=\"header\">\n<div class=\"logo\"><img id=\"org1\"><\/div>\n<b>PROGATI LEARNING CENTER<\/b>\n<\/div>\n\n<div class=\"photo\"><img id=\"stuImg\"><\/div>\n\n<div class=\"info\">\n<div class=\"row\"><div class=\"label\">Student Name<\/div><div>:<\/div><div>${name}<\/div><\/div>\n<div class=\"row\"><div class=\"label\">Student ID<\/div><div>:<\/div><div>${studentId}<\/div><\/div>\n<div class=\"row\"><div class=\"label\">Date of Birth<\/div><div>:<\/div><div>${dobVal}<\/div><\/div>\n<div class=\"row\"><div class=\"label\">Admission Date<\/div><div>:<\/div><div>${admVal}<\/div><\/div>\n<div class=\"row\"><div class=\"label\">Course Name<\/div><div>:<\/div><div>${course}<\/div><\/div>\n<div class=\"row\"><div class=\"label\">Course Duration<\/div><div>:<\/div><div>${durationVal}<\/div><\/div>\n<div class=\"row\"><div class=\"label\">Contact No<\/div><div>:<\/div><div>${contactVal}<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"card back\">\n<div style=\"text-align:center;margin-bottom:10px;\">\n<img id=\"org2\" style=\"width:90px;\">\n<\/div>\n\n<svg id=\"barcode\"><\/svg>\n\n<div>\nOffice: Jannat House, Progati Learning Center,<br>\nSahebrampur, Kalkini, Madaripur<br>\nWeb: plc.progati.net\n<\/div>\n\n<div class=\"powered\">Powered by Progati Sheba Foundation<\/div>\n\n<div class=\"signature\">\n<div class=\"sign-name\">Zakir Hossain<\/div>\n<div class=\"sign-line\">Authorized Signature<\/div>\n<\/div>\n<\/div>\n`;\n\n\/* PHOTO *\/\nif(photo.files[0]){\nlet r = new FileReader();\nr.onload = e => document.getElementById(\"stuImg\").src = e.target.result;\nr.readAsDataURL(photo.files[0]);\n}\n\n\/* LOGO *\/\nif(logo.files[0]){\nlet r = new FileReader();\nr.onload = e => {\n document.getElementById(\"org1\").src = e.target.result;\n document.getElementById(\"org2\").src = e.target.result;\n};\nr.readAsDataURL(logo.files[0]);\n}\n\n\/* BARCODE *\/\nJsBarcode(\"#barcode\", studentId, {\n width:2,\n height:50,\n displayValue:true\n});\n}\n\n\/* PDF *\/\nfunction downloadPDF(){\nconst area = document.getElementById(\"cardArea\");\nif(!area.innerHTML.trim()){ alert(\"Generate ID first\"); return; }\nhtml2pdf().from(area).save(\"Progati_Student_ID.pdf\");\n}\n\n\/* PNG *\/\nfunction downloadPNG(){\nconst area = document.getElementById(\"cardArea\");\nif(!area.innerHTML.trim()){ alert(\"Generate ID first\"); return; }\n\nhtml2canvas(area).then(canvas=>{\nlet link=document.createElement(\"a\");\nlink.download=\"Progati_Student_ID.png\";\nlink.href=canvas.toDataURL();\nlink.click();\n});\n}\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Progati Learning Center Student ID Card Progati Access Login Student Input Select Course NameOffice Application Course (Basic)Office Application Course (Advance)Diploma in Computer Scince & HardwareGraphice DesignWeb Design & DevelopmentDigital Marketing Select Duration3 Month6 Month1 Year Generate ID Card Download PDF Download PNG<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1246","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1246"}],"version-history":[{"count":64,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1246\/revisions"}],"predecessor-version":[{"id":1314,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1246\/revisions\/1314"}],"wp:attachment":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}