Progati Agent ID System<\/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\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\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n\n<style>\n:root{--main:#EB078E}\nbody{font-family:Poppins;background:#fff;padding:20px}\n\n\/* INPUT FIX *\/\ninput,select,button{\n width:100%;\n padding:8px;\n margin-bottom:8px;\n border:1px solid #ccc;\n outline:none;\n}\ninput:focus{border:1px solid var(--main)}\nbutton{background:var(--main);color:#fff;border:none;cursor:pointer}\n\n\/* LOGIN *\/\n#loginScreen{\n position:fixed;inset:0;background:#fff;\n display:flex;justify-content:center;align-items:center;\n}\n.login-box{width:300px;text-align:center}\n\n\/* MAIN *\/\n.wrapper{display:none;gap:20px;flex-direction:column}\n\n\/* CARD *\/\n.card{\n width:3.375in;\n height:2.125in;\n border:1px solid #ccc;\n border-radius:10px;\n overflow:hidden;\n position:relative;\n background:#fff;\n}\n\n.header{\n background:var(--main);\n color:#fff;\n display:flex;\n align-items:center;\n justify-content:center;\n gap:6px;\n font-weight:700;\n font-size:13px;\n}\n\n.header img{width:20px;height:20px;border-radius:50%}\n\n.photo{\n width:45px;height:55px;\n border:1px solid #000;\n margin:5px auto;\n}\n.photo img{width:100%;height:100%;object-fit:cover;}\n\n.info{\n font-size:10px;\n padding:4px;\n font-weight:600;\n}\n\n.row{\n display:grid;\n grid-template-columns:80px 5px auto;\n}\n\n.label-bold{\n font-weight:700;\n white-space:nowrap;\n}\n\n.signature img{width:60px;height:20px}\n\n\/* LEFT SIGN *\/\n.agent-sign-label{font-size:8px;margin-top:2px}\n.signature{margin-left:5px}\n\n\/* AUTH SIGN *\/\n.auth-sign{\n position:absolute;\n bottom:5px;right:5px;\n text-align:center;font-size:8px;\n}\n.auth-sign .name{\n font-family:Pacifico;\n font-size:10px;\n}\n\n\/* BACK *\/\n.back{text-align:center;font-size:9px;padding:5px}\n.back svg{margin:6px auto}\n.powered{\n text-align:center;font-size:8px;\n color:var(--main);font-weight:700;\n}\n\n\/* PRINT *\/\n@media print{\n body *{visibility:hidden}\n #cardArea, #cardArea *{visibility:visible}\n #cardArea{position:absolute;left:0;top:0}\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<div id=\"loginScreen\">\n <div class=\"login-box\">\n <h3>Enter Access Code<\/h3>\n <input type=\"password\" id=\"code\" placeholder=\"Access Code\">\n <button onclick=\"login()\">Login<\/button>\n <\/div>\n<\/div>\n\n<div class=\"wrapper\" id=\"main\">\n\n<div>\n<h3>Agent \u09a4\u09a5\u09cd\u09af \u09a6\u09bf\u09a8<\/h3>\n\n<input id=\"name\" placeholder=\"Agent Name\">\n<input id=\"join\" type=\"date\">\n<input id=\"expire\" type=\"date\">\n\n<select id=\"area\">\n<option value=\"\">Working Area Select<\/option>\n<option>Sahebrampur Bazar-2020<\/option>\n<option>Anderchar-2020<\/option>\n<option>Char Sahebrampur-2023<\/option>\n<option>North Sahebrampur-2024<\/option>\n<option>Krokirchar-2025<\/option>\n<option>Khudro Char-2026<\/option>\n<option>Natun Anderchar-2019<\/option>\n<option>West sahebrampur-2021<\/option>\n<option>South Sahebrampur-2022<\/option>\n<option>Jaliar hat-2029<\/option>\n<\/select>\n\n<label>Agent Photo Upload<\/label>\n<input type=\"file\" id=\"photo\">\n\n<label>Agent Signature Upload<\/label>\n<input type=\"file\" id=\"sign\">\n\n<label>Organization Logo Upload<\/label>\n<input type=\"file\" id=\"logo\">\n\n<button onclick=\"generate()\">Generate Card<\/button>\n<button onclick=\"downloadPDF()\">Download PDF<\/button>\n<button onclick=\"downloadPNG()\">Download PNG<\/button>\n<button onclick=\"printCard()\">Print Card<\/button>\n<\/div>\n\n<div id=\"cardArea\"><\/div>\n\n<\/div>\n\n<script>\n\n\/\/ LOGIN\nfunction login(){\n if(document.getElementById(\"code\").value===\"4313\"){\n document.getElementById(\"loginScreen\").style.display=\"none\";\n document.getElementById(\"main\").style.display=\"flex\";\n }\n}\n\n\/\/ AUTO ID\nlet agentId = localStorage.getItem(\"agentId\") \n? parseInt(localStorage.getItem(\"agentId\")) : 100;\n\nfunction generate(){\n\n agentId++;\n localStorage.setItem(\"agentId\", agentId);\n\n const id=\"PSF-AG\"+agentId;\n\n const name=document.getElementById(\"name\").value;\n const join=document.getElementById(\"join\").value;\n const expire=document.getElementById(\"expire\").value;\n const area=document.getElementById(\"area\").value;\n\n const barcodeData = `${id}|${name}|${join}|${expire}|${area}`;\n\n document.getElementById(\"cardArea\").innerHTML=`\n\n<div class=\"card\">\n<div class=\"header\">\n<img id=\"logoTop\">\n<span>PROGATI SHEBA FOUNDATION<\/span>\n<\/div>\n\n<div class=\"photo\"><img id=\"p\"><\/div>\n\n<div class=\"info\">\n<div class=\"row\"><div class=\"label-bold\">Agent Name<\/div><div>:<\/div><div>${name}<\/div><\/div>\n<div class=\"row\"><div class=\"label-bold\">Agent ID<\/div><div>:<\/div><div>${id}<\/div><\/div>\n<div class=\"row\"><div class=\"label-bold\">Join Date<\/div><div>:<\/div><div>${join}<\/div><\/div>\n<div class=\"row\"><div class=\"label-bold\">EXP<\/div><div>:<\/div><div>${expire}<\/div><\/div>\n<div class=\"row\"><div class=\"label-bold\">Area<\/div><div>:<\/div><div>${area}<\/div><\/div>\n\n<div class=\"agent-sign-label\">Agent Signature<\/div>\n<div class=\"signature\"><img id=\"s\"><\/div>\n<\/div>\n\n<div class=\"auth-sign\">\n<div class=\"name\">Zakir Hossain<\/div>\n<div>Authorized<\/div>\n<\/div>\n<\/div>\n\n<div class=\"card back\">\n<h4>Agent ID: ${id}<\/h4>\n<svg id=\"barcode\"><\/svg>\n\n<div>\nHead office: Vorosha Tower, Nikunjo-2, Dhaka-1229<br>\nEmail: info@psf.org.bd | Phone: 09649100050<br>\nBranch: Sahebrampur, Kalkini, Madaripur<br>\nContact: 01713873732<br>\nWeb: https:\/\/psf.org.bd\n<\/div>\n\n<div class=\"powered\">Powered by Progati Sheba Foundation<\/div>\n<\/div>\n`;\n\n function loadImage(inputId, targetId){\n const fileInput = document.getElementById(inputId);\n if(fileInput.files[0]){\n const reader = new FileReader();\n reader.onload = e => document.getElementById(targetId).src = e.target.result;\n reader.readAsDataURL(fileInput.files[0]);\n }\n }\n\n loadImage(\"photo\",\"p\");\n loadImage(\"sign\",\"s\");\n loadImage(\"logo\",\"logoTop\");\n\n setTimeout(()=>{\n JsBarcode(\"#barcode\", barcodeData, {\n format:\"CODE128\",\n width:2,\n height:40,\n displayValue:false\n });\n },200);\n}\n\n\/\/ PDF FIX\nfunction downloadPDF(){\n const element = document.getElementById(\"cardArea\");\n\n setTimeout(()=>{\n html2pdf().set({\n margin:0,\n filename:'Agent_ID.pdf',\n html2canvas:{scale:4,useCORS:true},\n jsPDF:{unit:'in',format:[3.375,2.125],orientation:'landscape'}\n }).from(element).save();\n },800);\n}\n\n\/\/ PNG\nfunction downloadPNG(){\n html2canvas(document.getElementById(\"cardArea\")).then(canvas=>{\n let a=document.createElement(\"a\");\n a.download=\"Agent_ID.png\";\n a.href=canvas.toDataURL();\n a.click();\n });\n}\n\n\/\/ PRINT\nfunction printCard(){\n window.print();\n}\n\n<\/script>\n\n<\/body>\n<\/html>\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 Agent ID System Enter Access Code Login Agent \u09a4\u09a5\u09cd\u09af \u09a6\u09bf\u09a8 Working Area SelectSahebrampur Bazar-2020Anderchar-2020Char Sahebrampur-2023North Sahebrampur-2024Krokirchar-2025Khudro Char-2026Natun Anderchar-2019West sahebrampur-2021South Sahebrampur-2022Jaliar hat-2029 Agent Photo Upload Agent Signature Upload Organization Logo Upload Generate Card Download PDF Download PNG Print Card<\/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-1327","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1327","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=1327"}],"version-history":[{"count":67,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1327\/revisions"}],"predecessor-version":[{"id":1405,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1327\/revisions\/1405"}],"wp:attachment":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1327"}],"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 Agent ID System<\/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\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\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n\n<style>\n:root{--main:#EB078E}\nbody{font-family:Poppins;background:#fff;padding:20px}\n\n\/* INPUT FIX *\/\ninput,select,button{\n width:100%;\n padding:8px;\n margin-bottom:8px;\n border:1px solid #ccc;\n outline:none;\n}\ninput:focus{border:1px solid var(--main)}\nbutton{background:var(--main);color:#fff;border:none;cursor:pointer}\n\n\/* LOGIN *\/\n#loginScreen{\n position:fixed;inset:0;background:#fff;\n display:flex;justify-content:center;align-items:center;\n}\n.login-box{width:300px;text-align:center}\n\n\/* MAIN *\/\n.wrapper{display:none;gap:20px;flex-direction:column}\n\n\/* CARD *\/\n.card{\n width:3.375in;\n height:2.125in;\n border:1px solid #ccc;\n border-radius:10px;\n overflow:hidden;\n position:relative;\n background:#fff;\n}\n\n.header{\n background:var(--main);\n color:#fff;\n display:flex;\n align-items:center;\n justify-content:center;\n gap:6px;\n font-weight:700;\n font-size:13px;\n}\n\n.header img{width:20px;height:20px;border-radius:50%}\n\n.photo{\n width:45px;height:55px;\n border:1px solid #000;\n margin:5px auto;\n}\n.photo img{width:100%;height:100%;object-fit:cover;}\n\n.info{\n font-size:10px;\n padding:4px;\n font-weight:600;\n}\n\n.row{\n display:grid;\n grid-template-columns:80px 5px auto;\n}\n\n.label-bold{\n font-weight:700;\n white-space:nowrap;\n}\n\n.signature img{width:60px;height:20px}\n\n\/* LEFT SIGN *\/\n.agent-sign-label{font-size:8px;margin-top:2px}\n.signature{margin-left:5px}\n\n\/* AUTH SIGN *\/\n.auth-sign{\n position:absolute;\n bottom:5px;right:5px;\n text-align:center;font-size:8px;\n}\n.auth-sign .name{\n font-family:Pacifico;\n font-size:10px;\n}\n\n\/* BACK *\/\n.back{text-align:center;font-size:9px;padding:5px}\n.back svg{margin:6px auto}\n.powered{\n text-align:center;font-size:8px;\n color:var(--main);font-weight:700;\n}\n\n\/* PRINT *\/\n@media print{\n body *{visibility:hidden}\n #cardArea, #cardArea *{visibility:visible}\n #cardArea{position:absolute;left:0;top:0}\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<div id=\"loginScreen\">\n <div class=\"login-box\">\n <h3>Enter Access Code<\/h3>\n <input type=\"password\" id=\"code\" placeholder=\"Access Code\">\n <button onclick=\"login()\">Login<\/button>\n <\/div>\n<\/div>\n\n<div class=\"wrapper\" id=\"main\">\n\n<div>\n<h3>Agent \u09a4\u09a5\u09cd\u09af \u09a6\u09bf\u09a8<\/h3>\n\n<input id=\"name\" placeholder=\"Agent Name\">\n<input id=\"join\" type=\"date\">\n<input id=\"expire\" type=\"date\">\n\n<select id=\"area\">\n<option value=\"\">Working Area Select<\/option>\n<option>Sahebrampur Bazar-2020<\/option>\n<option>Anderchar-2020<\/option>\n<option>Char Sahebrampur-2023<\/option>\n<option>North Sahebrampur-2024<\/option>\n<option>Krokirchar-2025<\/option>\n<option>Khudro Char-2026<\/option>\n<option>Natun Anderchar-2019<\/option>\n<option>West sahebrampur-2021<\/option>\n<option>South Sahebrampur-2022<\/option>\n<option>Jaliar hat-2029<\/option>\n<\/select>\n\n<label>Agent Photo Upload<\/label>\n<input type=\"file\" id=\"photo\">\n\n<label>Agent Signature Upload<\/label>\n<input type=\"file\" id=\"sign\">\n\n<label>Organization Logo Upload<\/label>\n<input type=\"file\" id=\"logo\">\n\n<button onclick=\"generate()\">Generate Card<\/button>\n<button onclick=\"downloadPDF()\">Download PDF<\/button>\n<button onclick=\"downloadPNG()\">Download PNG<\/button>\n<button onclick=\"printCard()\">Print Card<\/button>\n<\/div>\n\n<div id=\"cardArea\"><\/div>\n\n<\/div>\n\n<script>\n\n\/\/ LOGIN\nfunction login(){\n if(document.getElementById(\"code\").value===\"4313\"){\n document.getElementById(\"loginScreen\").style.display=\"none\";\n document.getElementById(\"main\").style.display=\"flex\";\n }\n}\n\n\/\/ AUTO ID\nlet agentId = localStorage.getItem(\"agentId\") \n? parseInt(localStorage.getItem(\"agentId\")) : 100;\n\nfunction generate(){\n\n agentId++;\n localStorage.setItem(\"agentId\", agentId);\n\n const id=\"PSF-AG\"+agentId;\n\n const name=document.getElementById(\"name\").value;\n const join=document.getElementById(\"join\").value;\n const expire=document.getElementById(\"expire\").value;\n const area=document.getElementById(\"area\").value;\n\n const barcodeData = `${id}|${name}|${join}|${expire}|${area}`;\n\n document.getElementById(\"cardArea\").innerHTML=`\n\n<div class=\"card\">\n<div class=\"header\">\n<img id=\"logoTop\">\n<span>PROGATI SHEBA FOUNDATION<\/span>\n<\/div>\n\n<div class=\"photo\"><img id=\"p\"><\/div>\n\n<div class=\"info\">\n<div class=\"row\"><div class=\"label-bold\">Agent Name<\/div><div>:<\/div><div>${name}<\/div><\/div>\n<div class=\"row\"><div class=\"label-bold\">Agent ID<\/div><div>:<\/div><div>${id}<\/div><\/div>\n<div class=\"row\"><div class=\"label-bold\">Join Date<\/div><div>:<\/div><div>${join}<\/div><\/div>\n<div class=\"row\"><div class=\"label-bold\">EXP<\/div><div>:<\/div><div>${expire}<\/div><\/div>\n<div class=\"row\"><div class=\"label-bold\">Area<\/div><div>:<\/div><div>${area}<\/div><\/div>\n\n<div class=\"agent-sign-label\">Agent Signature<\/div>\n<div class=\"signature\"><img id=\"s\"><\/div>\n<\/div>\n\n<div class=\"auth-sign\">\n<div class=\"name\">Zakir Hossain<\/div>\n<div>Authorized<\/div>\n<\/div>\n<\/div>\n\n<div class=\"card back\">\n<h4>Agent ID: ${id}<\/h4>\n<svg id=\"barcode\"><\/svg>\n\n<div>\nHead office: Vorosha Tower, Nikunjo-2, Dhaka-1229<br>\nEmail: info@psf.org.bd | Phone: 09649100050<br>\nBranch: Sahebrampur, Kalkini, Madaripur<br>\nContact: 01713873732<br>\nWeb: https:\/\/psf.org.bd\n<\/div>\n\n<div class=\"powered\">Powered by Progati Sheba Foundation<\/div>\n<\/div>\n`;\n\n function loadImage(inputId, targetId){\n const fileInput = document.getElementById(inputId);\n if(fileInput.files[0]){\n const reader = new FileReader();\n reader.onload = e => document.getElementById(targetId).src = e.target.result;\n reader.readAsDataURL(fileInput.files[0]);\n }\n }\n\n loadImage(\"photo\",\"p\");\n loadImage(\"sign\",\"s\");\n loadImage(\"logo\",\"logoTop\");\n\n setTimeout(()=>{\n JsBarcode(\"#barcode\", barcodeData, {\n format:\"CODE128\",\n width:2,\n height:40,\n displayValue:false\n });\n },200);\n}\n\n\/\/ PDF FIX\nfunction downloadPDF(){\n const element = document.getElementById(\"cardArea\");\n\n setTimeout(()=>{\n html2pdf().set({\n margin:0,\n filename:'Agent_ID.pdf',\n html2canvas:{scale:4,useCORS:true},\n jsPDF:{unit:'in',format:[3.375,2.125],orientation:'landscape'}\n }).from(element).save();\n },800);\n}\n\n\/\/ PNG\nfunction downloadPNG(){\n html2canvas(document.getElementById(\"cardArea\")).then(canvas=>{\n let a=document.createElement(\"a\");\n a.download=\"Agent_ID.png\";\n a.href=canvas.toDataURL();\n a.click();\n });\n}\n\n\/\/ PRINT\nfunction printCard(){\n window.print();\n}\n\n<\/script>\n\n<\/body>\n<\/html>\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 Agent ID System Enter Access Code Login Agent \u09a4\u09a5\u09cd\u09af \u09a6\u09bf\u09a8 Working Area SelectSahebrampur Bazar-2020Anderchar-2020Char Sahebrampur-2023North Sahebrampur-2024Krokirchar-2025Khudro Char-2026Natun Anderchar-2019West sahebrampur-2021South Sahebrampur-2022Jaliar hat-2029 Agent Photo Upload Agent Signature Upload Organization Logo Upload Generate Card Download PDF Download PNG Print Card<\/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-1327","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1327","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=1327"}],"version-history":[{"count":67,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1327\/revisions"}],"predecessor-version":[{"id":1405,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/1327\/revisions\/1405"}],"wp:attachment":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}