{"id":706,"date":"2025-12-02T06:39:44","date_gmt":"2025-12-02T06:39:44","guid":{"rendered":"https:\/\/jaincensus.ciws.in\/?page_id=706"},"modified":"2025-12-03T05:02:50","modified_gmt":"2025-12-03T05:02:50","slug":"generate-qr-code-for-temple","status":"publish","type":"page","link":"https:\/\/alljains.com\/en\/generate-qr-code-for-temple\/","title":{"rendered":"Generate QR Code For Temple"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"706\" class=\"elementor elementor-706\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-08bfab9 e-flex e-con-boxed e-con e-parent\" data-id=\"08bfab9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b41af83 e-flex e-con-boxed e-con e-parent\" data-id=\"b41af83\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-624abe2 elementor-widget elementor-widget-shortcode\" data-id=\"624abe2\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">  \n  <style>\n  .qr-container {\n      max-width: 440px;\n      margin: 30px auto;\n      padding: 25px;\n      background: #ffffff;\n      border-radius: 12px;\n      box-shadow: 0px 4px 15px rgba(0,0,0,0.15);\n      font-family: Arial, sans-serif;\n  }\n  .qr-container h2 {\n      text-align: center;\n      margin-bottom: 20px;\n      color: #39BDB2;\n  }\n  .qr-form { max-width: 450px; margin: 0 auto; }\n  .form-group { margin-bottom: 14px; }\n  .form-group label {\n      display:block;margin-bottom:5px;font-weight:600;font-size:13px;color:#222;\n  }\n  .form-group .required { color:red;font-weight:bold;margin-left:3px; }\n  .form-group input {\n      width:100%;padding:10px;border-radius:6px;\n      border:1px solid #ccc !important;font-size:14px;\n  }\n  .submit-btn {\n      width:100%;padding:12px;background:#2271b1;\n      border:none;color:white;font-size:16px;\n      font-weight:bold;border-radius:6px;cursor:pointer;\n  }\n  .submit-btn:hover { background:#135e96; }\n  .qr-result-box { text-align:center;margin-top:20px;display:none; }\n  .download-btn {\n      background:#28a745;color:#fff;padding:10px 18px;\n      margin:6px;border-radius:6px;font-weight:bold;border:none;\n  }\n  .print-btn {\n      background:#ff9800;color:#fff;padding:10px 18px;\n      margin:6px;border-radius:6px;font-weight:bold;border:none;\n  }\n  .download-btn:hover{background:#1e7e34;}\n  .print-btn:hover{background:#e68900;}\n  <\/style>\n  \n  <div class=\"qr-container\">\n  <h2>Generate QR Code For Temple<\/h2>\n  \n  <form id=\"qrForm\" class=\"qr-form\">\n  \n  <div class=\"form-group\">\n                <label>Name Of The Temple For Which QR Code Is Required <span class=\"required\">*<\/span><\/label>\n                <input type=\"text\" name=\"place\" placeholder=\"Name Of The Temple For Which QR Code Is Required\" required>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Your Designation In The Temple Committee (If Any)<\/label>\n                <input type=\"text\" name=\"designation\" placeholder=\"Your Designation In The Temple\">\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Village \/ Town<\/label>\n                <input type=\"text\" name=\"town\" placeholder=\"Village \/ Town\">\n            <\/div>\n            \n            <div class=\"form-group\">\n                <label>Pincode<\/label>\n                <input type=\"text\" name=\"pincode\" placeholder=\"Pincode\">\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Full Name <span class=\"required\">*<\/span><\/label>\n                <input type=\"text\" name=\"full_name\" placeholder=\"Full Name\" required>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Mobile Number <span class=\"required\">*<\/span><\/label>\n                <input type=\"tel\" \n                      name=\"mobile_no\" \n                      placeholder=\"Mobile Number\" \n                      pattern=\"[6-9]{1}[0-9]{9}\" \n                      maxlength=\"10\"\n                      title=\"Please enter valid 10 digit mobile number\"\n                      required>\n            <\/div>\n\n  \n  <button type=\"submit\" class=\"submit-btn\">Generate QR<\/button>\n  <\/form>\n  <\/div>\n  <div style=\"display: none;\">\n    <p>National Jain Unity Association Digambar Jain Mahasabha<\/p>\n    <p>Scan the QR Code below to submit your Details<\/p>\n    <p>How to Participate<\/p>\n    <p>Open your mobile camera or any QR scanner.<\/p> \n    <p>Scan the QR code.<\/p> \n    <p>Click on the link. <\/p>\n    <p>Fill your details and submit.<\/p>\n    <p>Your information is 100% secure and used only for Jain community development.<\/p>\n    <p>Organised By: Jain Census Committee<\/p>\n    <p>Name of the temple<\/p>\n  <\/div>\n  <div class=\"qr-result-box\" id=\"qr_result\"><\/div>\n  \n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n  \n  <script>\n  document.getElementById(\"qrForm\").addEventListener(\"submit\", function(e){\n  \n  e.preventDefault();\n  \n  let formData = new FormData(this);\n  \n  let dataObj = {\n  place: formData.get('place'),\n  full_name: formData.get('full_name'),\n  designation: formData.get('designation'),\n  mobile_no: formData.get('mobile_no'),\n  town: formData.get('town'),\n  pincode: formData.get('pincode')\n  };\n  \n\/\/let jsonString = JSON.stringify(dataObj);\n\/\/let encodedString = btoa(unescape(encodeURIComponent(jsonString)));\n\nlet jsonString = JSON.stringify(dataObj);\n\nlet encodedString = btoa(\n    encodeURIComponent(jsonString)\n        .replace(\/%([0-9A-F]{2})\/g, function(match, p1) {\n            return String.fromCharCode('0x' + p1);\n        })\n);\n\n\n  \n  let qrText = \"https:\/\/jangadna.alljains.com\/add\/census-form?data=\" + encodeURIComponent(encodedString);\n  let qrImage = \"https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=300x300&data=\" + encodeURIComponent(qrText);\n  \n    formData.append(\"action\", \"save_qr_log\");\n    formData.append(\"url_text\", qrText);\n    formData.append(\"qr_image\", qrImage);\n\n  let qrBox = document.getElementById(\"qr_result\");\n  qrBox.style.display = \"block\";\n  \n  qrBox.innerHTML = `\n  <style>\n    @page {\n      size: A4;\n      margin: 15mm;\n    }\n\n    body {\n      margin: 0;\n      padding: 0;\n      font-family: \"Segoe UI\", Arial, sans-serif;\n      background: #f6f6f6;\n    }\n\n    .print-box {\n      width: 100%;\n      background: #fff;\n      border: 4px solid #b8860b;\n      border-radius: 12px;\n      padding: 25px;\n      text-align: center;\n      box-sizing: border-box;\n    }\n\n    \/* HEADER *\/\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 20px;\n      margin-bottom: 12px;\n    }\n\n    .header img {\n      width: 45px;\n    }\n\n    .temple-title {\n      font-size: 13px;\n      text-transform: uppercase;\n      font-weight: bold;\n      color: #7a5700;\n      letter-spacing: 2px;\n    }\n\n    .main-title {\n      font-size: 28px;\n      font-weight: bold;\n      color: #b8860b;\n    }\n\n    .subtitle {\n      margin: 14px 0;\n      font-size: 16px;\n      color: #333;\n      font-weight: 600;\n    }\n\n    .divider {\n      height: 3px;\n      background: linear-gradient(to right, #b8860b, #ffd675, #b8860b);\n      margin: 18px 0;\n      border-radius: 4px;\n    }\n\n    \/* QR AREA *\/\n    .qr-section {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 30px;\n      margin-top: 10px;\n      flex-wrap: wrap;\n    }\n\n    .qr-box {\n      border: 3px solid #b8860b;\n      padding: 10px;\n      border-radius: 12px;\n      background: #fffaf0;\n    }\n\n    .qr-box img {\n      width: 180px;\n      height: 180px;\n      display: block;\n    }\n\n    .instructions {\n      text-align: left;\n      max-width: 360px;\n      font-size: 14.5px;\n      line-height: 1.7;\n      color: #222;\n    }\n\n    .instructions h3 {\n      margin-top: 0;\n      font-size: 17px;\n      color: #b8860b;\n      text-align: center;\n    }\n\n    .highlight {\n      background: #fff3cd;\n      border-left: 6px solid #b8860b;\n      padding: 10px;\n      margin-top: 12px;\n      font-size: 13px;\n      border-radius: 6px;\n    }\n\n    \/* FOOTER *\/\n    .footer {\n      margin-top: 22px;\n      border-top: 2px dashed #b8860b;\n      padding-top: 12px;\n      font-size: 14px;\n      font-weight: bold;\n      color: #333;\n      text-align: center;\n    }\n\n    \n  <\/style>\n  <div class=\"print-box\" id=\"print-box\">\n  \n  <div class=\"header\">\n  <img decoding=\"async\" src=\"https:\/\/alljains.com\/wp-content\/uploads\/elementor\/thumbs\/logosite-jain-rf9qvicuiyg6kto41fsiwwuqbo15rx44fqwki0cb1u.png\" width=\"45\">\n  <div>\n  <div class=\"temple-title\">National Jain Unity Association Digambar Jain Mahasabha<\/div>\n  <div class=\"main-title\">Jain Census 2026<\/div>\n  <\/div>\n  <\/div>\n  \n  <div class=\"subtitle\">\n  <center>Scan the QR Code below to submit your Details<\/center>\n  <\/div>\n  \n  <div class=\"divider\"><\/div>\n  \n  <div class=\"qr-section\">\n  \n  <div class=\"qr-box\">\n  <img decoding=\"async\" src=\"${qrImage}\" width=\"180\">\n  <\/div>\n  \n  <div class=\"instructions\">\n  <h3 style=\"text-align:left;\">How to Participate<\/h3>\n  <ol>\n  <li>Open your mobile camera or any QR scanner.<\/li>\n  <li>Scan the QR code.<\/li>\n  <li>Click on the link.<\/li>\n  <li>Fill your details and submit.<\/li>\n  <\/ol>\n  \n  <div class=\"highlight\">\n  Your information is 100% secure and used only for Jain community development.\n  <\/div>\n  <\/div>\n  \n  <\/div>\n  \n  <div class=\"footer\">\n  Organised By: Jain Census Committee\n  <p>Name of the temple<\/p>\n  <\/div>\n  \n  <\/div>\n  \n  <center>\n  <button type=\"button\" class=\"download-btn\" onclick=\"downloadQR()\">Download QR<\/button>\n  <button type=\"button\" class=\"print-btn\" onclick=\"printQR()\">Print QR<\/button>\n  <\/center>\n  `;\n  \n  \/\/this.reset();\n  fetch(\"https:\/\/alljains.com\/wp-admin\/admin-ajax.php\", {\n            method: \"POST\",\n            body: new URLSearchParams(formData)\n        })\n        .then(() => {\n            form.reset();\n        });\n        setTimeout(() => {\n            document.getElementById(\"qr_result\").scrollIntoView({\n                behavior: \"smooth\",\n                block: \"center\"\n            });\n        }, 300);\n  });\n\n\n \n  \n  function downloadQR(){\n  html2canvas(document.getElementById(\"print-box\"),{scale:2,useCORS:true})\n  .then(canvas=>{\n  let link=document.createElement(\"a\");\n  link.href=canvas.toDataURL(\"image\/png\");\n  link.download=\"qr-code.png\";\n  link.click();\n  });\n  }\n  \n  function printQR() {\n\nvar sourceDiv = document.getElementById(\"print-box\");\n\nif (!sourceDiv) {\n    alert(\"Print content not found!\");\n    return;\n}\n\nvar win = window.open('', '_blank');\n\nwin.document.body.innerHTML = sourceDiv.outerHTML;\n\nwin.focus();\n\nsetTimeout(function () {\n    win.print();\n    win.close();\n}, 300);\n}\n  <\/script>\n  \n  <\/div>\n\t\t\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-706","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alljains.com\/en\/wp-json\/wp\/v2\/pages\/706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alljains.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alljains.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alljains.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alljains.com\/en\/wp-json\/wp\/v2\/comments?post=706"}],"version-history":[{"count":42,"href":"https:\/\/alljains.com\/en\/wp-json\/wp\/v2\/pages\/706\/revisions"}],"predecessor-version":[{"id":765,"href":"https:\/\/alljains.com\/en\/wp-json\/wp\/v2\/pages\/706\/revisions\/765"}],"wp:attachment":[{"href":"https:\/\/alljains.com\/en\/wp-json\/wp\/v2\/media?parent=706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}