Pay Card Generator - Final with Front+Back Download<\/title>\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Arial&family=Courier+New&family=Times+New+Roman&family=Verdana&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:\/\/cdn.jsdelivr.net\/npm\/qrcodejs\/qrcode.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\n\n<style>\nbody {\n font-family: Arial, sans-serif;\n background: #f0f0f0;\n display: flex;\n gap: 20px;\n padding: 20px;\n}\n\n\/* PAGE LOCK OVERLAY *\/\n#lockOverlay{\n position:fixed;\n inset:0;\n background:rgba(0,0,0,0.95);\n color:#fff;\n display:flex;\n justify-content:center;\n align-items:center;\n z-index:9999;\n flex-direction:column;\n}\n#lockOverlay input{\n padding:10px;\n font-size:16px;\n margin-top:10px;\n width:180px;\n text-align:center;\n border:none;\n border-radius:5px;\n}\n#lockOverlay button{\n margin-top:10px;\n padding:10px 20px;\n font-size:16px;\n background:#EC008C;\n border:none;\n border-radius:5px;\n color:#fff;\n font-weight:bold;\n cursor:pointer;\n}\n#lockOverlay button:hover{opacity:0.9;}\n#errorMsg{margin-top:10px;color:red;font-weight:bold;}\n\n\/* Left Input Form *\/\n.left {\n width: 320px;\n background: #fff;\n padding: 15px;\n border-radius: 10px;\n}\n.left input, .left select, .left button {\n width: 100%;\n padding: 8px;\n margin-bottom: 8px;\n box-sizing: border-box;\n}\n.left button {\n background: #EC008C;\n color: #fff;\n border: none;\n cursor: pointer;\n}\n\n\/* Right Preview *\/\n.right {\n perspective: 1000px;\n}\n.card-wrapper {\n width: 340px;\n height: 210px;\n}\n.card {\n width: 100%;\n height: 100%;\n border-radius: 12px;\n transform-style: preserve-3d;\n transition: 0.8s;\n position: relative;\n}\n.card.flip { transform: rotateY(180deg); }\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n backface-visibility: hidden;\n color: #fff;\n padding: 12px;\n box-sizing: border-box;\n}\n.front {\n background: linear-gradient(135deg,#0a1f44,#EC008C);\n display: flex;\n flex-direction: column;\n}\n.back {\n background: #111;\n transform: rotateY(180deg);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n\/* Front *\/\n.logo { font-weight: bold; font-size: 18px; display: inline-block; }\n.logo-sim { color: #FFD700; font-weight: bold; margin-left:5px; } \n.number { letter-spacing:2px; margin-top:5px; font-size:16px; }\n.footer { \n display:flex; \n justify-content:space-between; \n font-size:14px; \n align-items:center;\n}\n#cardName { font-size:16px; font-weight:bold; } \n.photo {\n width: 35px;\n height: 35px;\n object-fit: cover;\n display: inline-block;\n vertical-align: middle;\n border-radius: 50%;\n}\n.chip { width: 35px; height: 25px; background: gold; border-radius: 4px; margin: 8px 0; position:relative; }\n\n\/* Back Side *\/\n.back-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n}\n.back-left {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.strip { height:12px; background:#444; margin-bottom:6px; }\n.cvv { background:#fff; color:#000; width:50px; font-size:10px; padding:2px; text-align:center; }\n#barcode { margin-top:5px; }\n.back-footer {\n text-align: center;\n font-size: 8px;\n margin-top: 4px;\n color: #000;\n background: yellow;\n font-weight: bold;\n padding: 2px 4px;\n border-radius: 4px;\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<div id=\"lockOverlay\">\n <h2>Enter Page Access Code<\/h2>\n <input type=\"password\" id=\"accessCode\" placeholder=\"Enter Code\">\n <button onclick=\"checkAccess()\">Unlock<\/button>\n <div id=\"errorMsg\"><\/div>\n<\/div>\n\n\n<div id=\"pageContent\" style=\"display:none;\">\n<div class=\"left\">\n <h3>Card Input<\/h3>\n <input id=\"logo\" placeholder=\"Brand Logo\">\n <input id=\"number\" placeholder=\"Card Number\">\n <input id=\"name\" placeholder=\"Card Holder Name\">\n <input id=\"date\" placeholder=\"Valid Thru (MM\/YY)\">\n <input id=\"cvv\" placeholder=\"CVV\">\n <input type=\"file\" id=\"photo\">\n <select id=\"font\">\n <option value=\"'Arial', sans-serif\">Arial<\/option>\n <option value=\"'Verdana', sans-serif\">Verdana<\/option>\n <option value=\"'Courier New', monospace\">Courier New<\/option>\n <option value=\"'Times New Roman', serif\">Times New Roman<\/option>\n <\/select>\n <button onclick=\"preview()\">Preview<\/button>\n <button onclick=\"flip()\">Flip Card<\/button>\n <button onclick=\"downloadFace('front')\">Download Front<\/button>\n <button onclick=\"downloadFace('back')\">Download Back<\/button>\n <button onclick=\"downloadFrontBack()\">Download Front+Back<\/button>\n <button onclick=\"printCard()\">Print<\/button>\n<\/div>\n\n\n<div class=\"right\">\n <div class=\"card-wrapper\">\n <div class=\"card\" id=\"card\">\n\n \n <div class=\"face front\" id=\"front\">\n <div>\n <span class=\"logo\" id=\"logoText\">BRAND<\/span>\n <span class=\"logo-sim\">ATM<\/span>\n <\/div>\n <div class=\"chip\"><\/div>\n <div class=\"number\" id=\"cardNum\">0000 0000 0000 0000<\/div>\n <div class=\"footer\">\n <span id=\"cardName\">CARD HOLDER<\/span>\n <img id=\"photoPreview\" class=\"photo\">\n <span id=\"valid\">MM\/YY<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"face back\">\n <div class=\"strip\"><\/div>\n <div class=\"back-top\">\n <div class=\"back-left\">\n <div class=\"cvv\" id=\"cvvBox\">CVV<\/div>\n <div class=\"small\">\n \ud83d\udcde 09649100050<br>\n \ud83c\udf10 https:\/\/psf.org.bd\/\n <\/div>\n <\/div>\n <div id=\"barcode-container\">\n <svg id=\"barcode\"><\/svg>\n <\/div>\n <\/div>\n <div class=\"back-footer\">\n [ Powered By Progati Sheba Foundation ]\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/div>\n<\/div> \n\n<script>\n\/\/ \ud83d\udd11 PAGE ACCESS CODE\nconst PAGE_CODE = \"4313\";\n\nfunction checkAccess(){\n const code = document.getElementById(\"accessCode\").value;\n if(code === PAGE_CODE){\n document.getElementById(\"lockOverlay\").style.display=\"none\";\n document.getElementById(\"pageContent\").style.display=\"flex\";\n } else {\n document.getElementById(\"errorMsg\").innerText=\"\u274c Wrong Code!\";\n }\n}\n\ndocument.getElementById(\"accessCode\").addEventListener(\"keypress\", function(e){\n if(e.key === \"Enter\") checkAccess();\n});\n\n\/\/ ===== Card JS =====\nconst card = document.getElementById(\"card\");\nconst front = document.getElementById(\"front\");\nconst back = document.querySelector('.back');\nconst photoPreview = document.getElementById(\"photoPreview\");\n\nfunction preview(){\n const logoVal = document.getElementById(\"logo\").value || \"BRAND\";\n const numberVal = document.getElementById(\"number\").value || \"0000 0000 0000 0000\";\n const nameVal = document.getElementById(\"name\").value.toUpperCase() || \"CARD HOLDER\";\n const dateVal = document.getElementById(\"date\").value || \"MM\/YY\";\n const cvvVal = document.getElementById(\"cvv\").value || \"CVV\";\n const fontVal = document.getElementById(\"font\").value;\n\n document.getElementById(\"logoText\").innerText = logoVal;\n document.getElementById(\"cardNum\").innerText = numberVal;\n document.getElementById(\"cardName\").innerText = nameVal;\n document.getElementById(\"valid\").innerText = dateVal;\n front.style.fontFamily = fontVal;\n document.getElementById(\"cvvBox\").innerText = cvvVal;\n\n JsBarcode(\"#barcode\", numberVal.replace(\/\\s\/g,''), {format:\"CODE128\",height:20,displayValue:false});\n\n const photoInput = document.getElementById(\"photo\");\n if(photoInput.files && photoInput.files[0]){\n const reader = new FileReader();\n reader.onload = e=>{\n photoPreview.src = e.target.result;\n photoPreview.style.display=\"inline-block\";\n }\n reader.readAsDataURL(photoInput.files[0]);\n } else { photoPreview.style.display=\"none\"; }\n}\n\nfunction flip(){ card.classList.toggle(\"flip\"); }\n\nfunction downloadFace(face){\n const targetFace = face==='front'? front: back;\n front.style.display = face==='front'? 'block':'none';\n back.style.display = face==='back'? 'flex':'none';\n\n html2canvas(targetFace).then(canvas=>{\n const link = document.createElement('a');\n link.download = face+'-card.png';\n link.href = canvas.toDataURL();\n link.click();\n front.style.display='block';\n back.style.display='flex';\n });\n}\n\nfunction downloadFrontBack(){\n front.style.display='block';\n back.style.display='block';\n\n html2canvas(card).then(canvas=>{\n const link = document.createElement('a');\n link.download='front-back-card.png';\n link.href=canvas.toDataURL();\n link.click();\n });\n}\n\nfunction printCard(){\n html2canvas(card).then(canvas=>{\n const win=window.open();\n win.document.write('<img decoding=\"async\" src=\"'+canvas.toDataURL()+'\" style=\"width:100%;\"\/>');\n win.document.close();\n win.focus();\n win.print();\n win.close();\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>Genaretor Classical Progati Pay 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-950","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/950","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=950"}],"version-history":[{"count":40,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/950\/revisions"}],"predecessor-version":[{"id":1006,"href":"https:\/\/psf.org.bd\/index.php?rest_route=\/wp\/v2\/pages\/950\/revisions\/1006"}],"wp:attachment":[{"href":"https:\/\/psf.org.bd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}