Progati Employee 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.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 button{width:100%;padding:8px;margin-bottom:8px;}\n.form button{background:var(--progati);color:#fff;border:none;cursor:pointer;}\n.card{width:360px;height:540px;border-radius:18px;box-shadow:0 15px 35px rgba(0,0,0,.25);border:1px solid #eee;overflow:hidden;position:relative;background:#fff;page-break-after:always;}\n.header{background:var(--progati);color:#fff;text-align:center;padding:18px 10px;}\n.logo{width:110px;height:110px;background:#fff;border-radius:50%;margin:0 auto 6px;overflow:hidden;border:4px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.2);}\n.logo img{width:100%;height:100%;object-fit:contain;}\n.photo{width:85px;height:105px;border:2px solid var(--progati);margin:10px auto;}\n.photo img{width:100%;height:100%;object-fit:cover;}\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.back{padding:20px;font-size:16px;position:relative;}\n#barcode{display:block;margin:30px auto 10px;}\n.back-logo{width:100px;margin:20px auto;}\n.back-logo img{width:100%;}\n.address{text-align:center;margin-top:10px;font-size:14px;}\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.powered{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--progati);font-weight:700;white-space:nowrap;}\n#loginScreen{position:fixed;inset:0;background:#ffffff;display:flex;justify-content:center;align-items:center;z-index:9999;}\n.login-box{width:320px;padding:30px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);text-align:center;}\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;cursor:pointer;}\n#errorMsg{color:red;font-size:13px;}\n<\/style>\n<\/head>\n\n<body>\n\n\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\n<div id=\"mainContent\">\n<div class=\"wrapper\">\n\n<div class=\"form\">\n <h2>Employee Input<\/h2>\n <input id=\"empName\" placeholder=\"Employee Name\">\n <input id=\"dob\" placeholder=\"Date of Birth\">\n <input id=\"join\" placeholder=\"Join Date\">\n <input id=\"des\" placeholder=\"Designation\">\n <input id=\"dep\" placeholder=\"Department\">\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\nfunction checkAccess(){\n const correctCode = \"4313\"; \/\/ Change your code\n const entered = document.getElementById(\"accessCode\").value;\n if(entered === correctCode){\n isLoggedIn = true;\n document.getElementById(\"loginScreen\").style.display=\"none\";\n document.getElementById(\"mainContent\").style.display=\"block\";\n } else {\n document.getElementById(\"errorMsg\").innerText=\"Wrong Access Code!\";\n }\n}\n\nfunction generate(){\n if(!isLoggedIn){ alert(\"Please login first!\"); return; }\n\n const empName = document.getElementById(\"empName\").value || \"\";\n const dob = document.getElementById(\"dob\").value || \"\";\n const join = document.getElementById(\"join\").value || \"\";\n const des = document.getElementById(\"des\").value || \"\";\n const dep = document.getElementById(\"dep\").value || \"\";\n const contact = document.getElementById(\"contact\").value || \"\";\n const empId = \"PSF-\" + Math.floor(1000 + Math.random()*9000);\n\n document.getElementById(\"cardArea\").innerHTML = `\n <div class=\"card front\">\n <div class=\"header\">\n <div class=\"logo\"><img id=\"org1\"><\/div>\n <b>PROGATI SHEBA FOUNDATION<\/b>\n <\/div>\n <div class=\"photo\"><img id=\"empImg\"><\/div>\n <div class=\"info\">\n <div class=\"row\"><div class=\"label\">Employee Name<\/div><div>:<\/div><div>${empName}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Employee ID<\/div><div>:<\/div><div>${empId}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Date of Birth<\/div><div>:<\/div><div>${dob}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Join Date<\/div><div>:<\/div><div>${join}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Designation<\/div><div>:<\/div><div>${des}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Department<\/div><div>:<\/div><div>${dep}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Contact No<\/div><div>:<\/div><div>${contact}<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"card back\">\n <div class=\"back-logo\"><img id=\"org2\"><\/div>\n <svg id=\"barcode\"><\/svg>\n <div class=\"address\">\n Head office:Vorosha Tower, Nikunjo-2,Dhaka-1229<br>Email: info@psf.org.bd, Phone: 09649100050 <br>\n Branch address: Sahebrampur,Kalkini<br> Madaripur,contact:01713873732 <br\n Web:https:\/\/psf.org.bd\n <\/div>\n <div class=\"powered\">Powered by Progati Sheba Foundation<\/div>\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 \/\/ Employee Photo\n if(photo.files[0]){\n const r=new FileReader();\n r.onload=e=>document.getElementById(\"empImg\").src=e.target.result;\n r.readAsDataURL(photo.files[0]);\n }\n\n \/\/ Logo\n if(logo.files[0]){\n const r=new FileReader();\n r.onload=e=>{\n document.getElementById(\"org1\").src=e.target.result;\n document.getElementById(\"org2\").src=e.target.result;\n }\n r.readAsDataURL(logo.files[0]);\n }\n\n JsBarcode(\"#barcode\", empId, {width:2,height:50});\n}\n\nfunction downloadPDF(){\n if(!isLoggedIn){ alert(\"Please login first!\"); return; }\n const area = document.getElementById(\"cardArea\");\n if(!area.innerHTML.trim()){ alert(\"Generate ID card first\"); return; }\n\n html2pdf().from(area).set({\n filename:'Progati_Employee_ID.pdf',\n margin:0,\n html2canvas:{scale:2},\n jsPDF:{unit:'mm',format:'a4'}\n }).save();\n}\n\nfunction downloadPNG(){\n if(!isLoggedIn){ alert(\"Please login first!\"); return; }\n const area = document.getElementById(\"cardArea\");\n if(!area.innerHTML.trim()){ alert(\"Generate ID card first\"); return; }\n\n html2canvas(area).then(canvas=>{\n const link = document.createElement(\"a\");\n link.download = \"Progati_Employee_ID.png\";\n link.href = canvas.toDataURL(\"image\/png\");\n link.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 Employee ID Card Progati Access Login Employee Input 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-1178","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1178","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=1178"}],"version-history":[{"count":62,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1178\/revisions"}],"predecessor-version":[{"id":1244,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1178\/revisions\/1244"}],"wp:attachment":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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 Employee 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.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 button{width:100%;padding:8px;margin-bottom:8px;}\n.form button{background:var(--progati);color:#fff;border:none;cursor:pointer;}\n.card{width:360px;height:540px;border-radius:18px;box-shadow:0 15px 35px rgba(0,0,0,.25);border:1px solid #eee;overflow:hidden;position:relative;background:#fff;page-break-after:always;}\n.header{background:var(--progati);color:#fff;text-align:center;padding:18px 10px;}\n.logo{width:110px;height:110px;background:#fff;border-radius:50%;margin:0 auto 6px;overflow:hidden;border:4px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.2);}\n.logo img{width:100%;height:100%;object-fit:contain;}\n.photo{width:85px;height:105px;border:2px solid var(--progati);margin:10px auto;}\n.photo img{width:100%;height:100%;object-fit:cover;}\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.back{padding:20px;font-size:16px;position:relative;}\n#barcode{display:block;margin:30px auto 10px;}\n.back-logo{width:100px;margin:20px auto;}\n.back-logo img{width:100%;}\n.address{text-align:center;margin-top:10px;font-size:14px;}\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.powered{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--progati);font-weight:700;white-space:nowrap;}\n#loginScreen{position:fixed;inset:0;background:#ffffff;display:flex;justify-content:center;align-items:center;z-index:9999;}\n.login-box{width:320px;padding:30px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);text-align:center;}\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;cursor:pointer;}\n#errorMsg{color:red;font-size:13px;}\n<\/style>\n<\/head>\n\n<body>\n\n\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\n<div id=\"mainContent\">\n<div class=\"wrapper\">\n\n<div class=\"form\">\n <h2>Employee Input<\/h2>\n <input id=\"empName\" placeholder=\"Employee Name\">\n <input id=\"dob\" placeholder=\"Date of Birth\">\n <input id=\"join\" placeholder=\"Join Date\">\n <input id=\"des\" placeholder=\"Designation\">\n <input id=\"dep\" placeholder=\"Department\">\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\nfunction checkAccess(){\n const correctCode = \"4313\"; \/\/ Change your code\n const entered = document.getElementById(\"accessCode\").value;\n if(entered === correctCode){\n isLoggedIn = true;\n document.getElementById(\"loginScreen\").style.display=\"none\";\n document.getElementById(\"mainContent\").style.display=\"block\";\n } else {\n document.getElementById(\"errorMsg\").innerText=\"Wrong Access Code!\";\n }\n}\n\nfunction generate(){\n if(!isLoggedIn){ alert(\"Please login first!\"); return; }\n\n const empName = document.getElementById(\"empName\").value || \"\";\n const dob = document.getElementById(\"dob\").value || \"\";\n const join = document.getElementById(\"join\").value || \"\";\n const des = document.getElementById(\"des\").value || \"\";\n const dep = document.getElementById(\"dep\").value || \"\";\n const contact = document.getElementById(\"contact\").value || \"\";\n const empId = \"PSF-\" + Math.floor(1000 + Math.random()*9000);\n\n document.getElementById(\"cardArea\").innerHTML = `\n <div class=\"card front\">\n <div class=\"header\">\n <div class=\"logo\"><img id=\"org1\"><\/div>\n <b>PROGATI SHEBA FOUNDATION<\/b>\n <\/div>\n <div class=\"photo\"><img id=\"empImg\"><\/div>\n <div class=\"info\">\n <div class=\"row\"><div class=\"label\">Employee Name<\/div><div>:<\/div><div>${empName}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Employee ID<\/div><div>:<\/div><div>${empId}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Date of Birth<\/div><div>:<\/div><div>${dob}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Join Date<\/div><div>:<\/div><div>${join}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Designation<\/div><div>:<\/div><div>${des}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Department<\/div><div>:<\/div><div>${dep}<\/div><\/div>\n <div class=\"row\"><div class=\"label\">Contact No<\/div><div>:<\/div><div>${contact}<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"card back\">\n <div class=\"back-logo\"><img id=\"org2\"><\/div>\n <svg id=\"barcode\"><\/svg>\n <div class=\"address\">\n Head office:Vorosha Tower, Nikunjo-2,Dhaka-1229<br>Email: info@psf.org.bd, Phone: 09649100050 <br>\n Branch address: Sahebrampur,Kalkini<br> Madaripur,contact:01713873732 <br\n Web:https:\/\/psf.org.bd\n <\/div>\n <div class=\"powered\">Powered by Progati Sheba Foundation<\/div>\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 \/\/ Employee Photo\n if(photo.files[0]){\n const r=new FileReader();\n r.onload=e=>document.getElementById(\"empImg\").src=e.target.result;\n r.readAsDataURL(photo.files[0]);\n }\n\n \/\/ Logo\n if(logo.files[0]){\n const r=new FileReader();\n r.onload=e=>{\n document.getElementById(\"org1\").src=e.target.result;\n document.getElementById(\"org2\").src=e.target.result;\n }\n r.readAsDataURL(logo.files[0]);\n }\n\n JsBarcode(\"#barcode\", empId, {width:2,height:50});\n}\n\nfunction downloadPDF(){\n if(!isLoggedIn){ alert(\"Please login first!\"); return; }\n const area = document.getElementById(\"cardArea\");\n if(!area.innerHTML.trim()){ alert(\"Generate ID card first\"); return; }\n\n html2pdf().from(area).set({\n filename:'Progati_Employee_ID.pdf',\n margin:0,\n html2canvas:{scale:2},\n jsPDF:{unit:'mm',format:'a4'}\n }).save();\n}\n\nfunction downloadPNG(){\n if(!isLoggedIn){ alert(\"Please login first!\"); return; }\n const area = document.getElementById(\"cardArea\");\n if(!area.innerHTML.trim()){ alert(\"Generate ID card first\"); return; }\n\n html2canvas(area).then(canvas=>{\n const link = document.createElement(\"a\");\n link.download = \"Progati_Employee_ID.png\";\n link.href = canvas.toDataURL(\"image\/png\");\n link.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 Employee ID Card Progati Access Login Employee Input 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-1178","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1178","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=1178"}],"version-history":[{"count":62,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1178\/revisions"}],"predecessor-version":[{"id":1244,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1178\/revisions\/1244"}],"wp:attachment":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}