{"id":647,"date":"2026-07-01T05:49:52","date_gmt":"2026-07-01T05:49:52","guid":{"rendered":"https:\/\/vikassrivastava.in\/academy\/?page_id=647"},"modified":"2026-07-01T05:51:02","modified_gmt":"2026-07-01T05:51:02","slug":"qr-generator","status":"publish","type":"page","link":"https:\/\/vikassrivastava.in\/academy\/qr-generator\/","title":{"rendered":"QR Generator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"647\" class=\"elementor elementor-647\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19b0441 e-con e-atomic-element e-flexbox-base e-b1912e4 \" data-id=\"19b0441\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"19b0441\">\n    \t\t<div class=\"elementor-element elementor-element-d3e3ff6 elementor-widget elementor-widget-html\" data-id=\"d3e3ff6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"custom-qr-generator-app\">\r\n  <style>\r\n    #custom-qr-generator-app {\r\n      --qr-primary: #2563eb;\r\n      --qr-primary-dark: #1d4ed8;\r\n      --qr-green: #16a34a;\r\n      --qr-red: #dc2626;\r\n      --qr-yellow: #f59e0b;\r\n      --qr-bg: #f4f7fb;\r\n      --qr-card: #ffffff;\r\n      --qr-text: #1f2937;\r\n      --qr-muted: #6b7280;\r\n      --qr-border: #e5e7eb;\r\n      --qr-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);\r\n      font-family: Arial, Helvetica, sans-serif;\r\n      color: var(--qr-text);\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    #custom-qr-generator-app *,\r\n    #custom-qr-generator-app *::before,\r\n    #custom-qr-generator-app *::after {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-main-wrapper {\r\n      max-width: 1180px;\r\n      margin: 0 auto;\r\n      padding: 22px;\r\n      border-radius: 24px;\r\n      background: linear-gradient(135deg, #eef5ff, #f7fafc, #ecfdf5);\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-header {\r\n      padding: 30px;\r\n      border-radius: 22px;\r\n      background: linear-gradient(135deg, #1d4ed8, #2563eb, #16a34a);\r\n      color: #ffffff;\r\n      box-shadow: var(--qr-shadow);\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-header h2 {\r\n      margin: 0 0 10px;\r\n      font-size: clamp(26px, 4vw, 40px);\r\n      line-height: 1.2;\r\n      color: #ffffff;\r\n      font-weight: 800;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-header p {\r\n      margin: 0;\r\n      max-width: 900px;\r\n      color: rgba(255, 255, 255, 0.95);\r\n      font-size: 16px;\r\n      line-height: 1.6;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-privacy-note {\r\n      margin-top: 16px;\r\n      display: inline-block;\r\n      padding: 10px 14px;\r\n      border-radius: 999px;\r\n      background: rgba(255, 255, 255, 0.16);\r\n      color: #ffffff;\r\n      font-size: 13px;\r\n      font-weight: 600;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-card {\r\n      background: var(--qr-card);\r\n      border: 1px solid var(--qr-border);\r\n      border-radius: 20px;\r\n      padding: 20px;\r\n      box-shadow: var(--qr-shadow);\r\n      margin-bottom: 18px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-card h3 {\r\n      margin: 0 0 14px;\r\n      font-size: 20px;\r\n      color: #111827;\r\n      font-weight: 800;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-layout {\r\n      display: grid;\r\n      grid-template-columns: 1.15fr 0.85fr;\r\n      gap: 18px;\r\n      align-items: start;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-type-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 10px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-type-button {\r\n      min-height: 86px;\r\n      border: 1px solid var(--qr-border);\r\n      background: #ffffff;\r\n      border-radius: 16px;\r\n      padding: 14px 10px;\r\n      cursor: pointer;\r\n      text-align: center;\r\n      transition: 0.2s ease;\r\n      color: #374151;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-type-button:hover {\r\n      transform: translateY(-2px);\r\n      border-color: #93c5fd;\r\n      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-type-button.active {\r\n      border-color: var(--qr-primary);\r\n      background: #eff6ff;\r\n      color: var(--qr-primary-dark);\r\n      box-shadow: inset 0 0 0 1px var(--qr-primary);\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-icon {\r\n      display: block;\r\n      font-size: 25px;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-type-title {\r\n      display: block;\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-form-section {\r\n      display: none;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-form-section.active {\r\n      display: block;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-form-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 14px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-field {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 7px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-field.full {\r\n      grid-column: 1 \/ -1;\r\n    }\r\n\r\n    #custom-qr-generator-app label {\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      color: #374151;\r\n    }\r\n\r\n    #custom-qr-generator-app input,\r\n    #custom-qr-generator-app textarea,\r\n    #custom-qr-generator-app select {\r\n      width: 100%;\r\n      min-height: 46px;\r\n      border: 1px solid #d1d5db;\r\n      border-radius: 12px;\r\n      padding: 12px 13px;\r\n      background: #ffffff;\r\n      color: #111827;\r\n      font-size: 14px;\r\n      outline: none;\r\n      transition: 0.2s ease;\r\n    }\r\n\r\n    #custom-qr-generator-app textarea {\r\n      min-height: 110px;\r\n      resize: vertical;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    #custom-qr-generator-app input:focus,\r\n    #custom-qr-generator-app textarea:focus,\r\n    #custom-qr-generator-app select:focus {\r\n      border-color: var(--qr-primary);\r\n      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);\r\n    }\r\n\r\n    #custom-qr-generator-app input[type=\"color\"] {\r\n      padding: 4px;\r\n      height: 46px;\r\n      cursor: pointer;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-helper {\r\n      margin: 8px 0 0;\r\n      color: var(--qr-muted);\r\n      font-size: 12px;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-button-row {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 10px;\r\n      margin-top: 16px;\r\n    }\r\n\r\n    #custom-qr-generator-app button {\r\n      min-height: 44px;\r\n      border: none;\r\n      border-radius: 12px;\r\n      padding: 12px 16px;\r\n      cursor: pointer;\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      transition: 0.2s ease;\r\n    }\r\n\r\n    #custom-qr-generator-app button:hover {\r\n      transform: translateY(-1px);\r\n      filter: brightness(0.98);\r\n    }\r\n\r\n    #custom-qr-generator-app button:disabled {\r\n      opacity: 0.55;\r\n      cursor: not-allowed;\r\n      transform: none;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-btn-primary {\r\n      background: var(--qr-primary);\r\n      color: #ffffff;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-btn-green {\r\n      background: var(--qr-green);\r\n      color: #ffffff;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-btn-dark {\r\n      background: #111827;\r\n      color: #ffffff;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-btn-light {\r\n      background: #eef2ff;\r\n      color: #1e40af;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-btn-danger {\r\n      background: #fee2e2;\r\n      color: var(--qr-red);\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-btn-warning {\r\n      background: #fef3c7;\r\n      color: #92400e;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-message {\r\n      display: none;\r\n      padding: 12px 14px;\r\n      border-radius: 14px;\r\n      margin-top: 14px;\r\n      font-size: 14px;\r\n      line-height: 1.5;\r\n      font-weight: 700;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-message.error {\r\n      display: block;\r\n      color: #991b1b;\r\n      background: #fee2e2;\r\n      border: 1px solid #fecaca;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-message.success {\r\n      display: block;\r\n      color: #166534;\r\n      background: #dcfce7;\r\n      border: 1px solid #bbf7d0;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-preview-box {\r\n      text-align: center;\r\n      border: 1px dashed #cbd5e1;\r\n      background: #f8fafc;\r\n      border-radius: 18px;\r\n      padding: 18px;\r\n      min-height: 300px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    #custom-qr-generator-app #qr-code-output {\r\n      background: #ffffff;\r\n      border-radius: 18px;\r\n      padding: 16px;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      max-width: 100%;\r\n      overflow: auto;\r\n    }\r\n\r\n    #custom-qr-generator-app #qr-code-output:empty::before {\r\n      content: \"QR preview will appear here\";\r\n      color: #94a3b8;\r\n      font-weight: 700;\r\n      padding: 95px 20px;\r\n      display: block;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-meta {\r\n      display: none;\r\n      width: 100%;\r\n      margin-top: 16px;\r\n      text-align: left;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-meta.active {\r\n      display: block;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-meta-row {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      gap: 12px;\r\n      padding: 9px 0;\r\n      border-bottom: 1px solid #e5e7eb;\r\n      font-size: 13px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-meta-row strong {\r\n      min-width: 115px;\r\n      color: #374151;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-meta-row span {\r\n      text-align: right;\r\n      color: #4b5563;\r\n      word-break: break-word;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-record-tools {\r\n      display: grid;\r\n      grid-template-columns: 1fr 190px;\r\n      gap: 10px;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-table-wrap {\r\n      overflow-x: auto;\r\n      border: 1px solid var(--qr-border);\r\n      border-radius: 16px;\r\n      background: #ffffff;\r\n    }\r\n\r\n    #custom-qr-generator-app table {\r\n      width: 100%;\r\n      min-width: 850px;\r\n      border-collapse: collapse;\r\n      background: #ffffff;\r\n    }\r\n\r\n    #custom-qr-generator-app th,\r\n    #custom-qr-generator-app td {\r\n      padding: 12px;\r\n      border-bottom: 1px solid #e5e7eb;\r\n      text-align: left;\r\n      font-size: 13px;\r\n      vertical-align: middle;\r\n    }\r\n\r\n    #custom-qr-generator-app th {\r\n      background: #f8fafc;\r\n      color: #374151;\r\n      font-weight: 900;\r\n    }\r\n\r\n    #custom-qr-generator-app td {\r\n      color: #4b5563;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-small-actions {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 6px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-small-actions button {\r\n      min-height: 34px;\r\n      padding: 8px 10px;\r\n      border-radius: 9px;\r\n      font-size: 12px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-color-dot {\r\n      display: inline-block;\r\n      width: 14px;\r\n      height: 14px;\r\n      border-radius: 50%;\r\n      border: 1px solid #d1d5db;\r\n      vertical-align: middle;\r\n      margin-right: 5px;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-empty {\r\n      text-align: center;\r\n      padding: 24px;\r\n      color: var(--qr-muted);\r\n      font-weight: 700;\r\n    }\r\n\r\n    #custom-qr-generator-app .qr-footer-tools {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      flex-wrap: wrap;\r\n      gap: 10px;\r\n      margin-top: 14px;\r\n    }\r\n\r\n    @media (max-width: 920px) {\r\n      #custom-qr-generator-app .qr-layout,\r\n      #custom-qr-generator-app .qr-record-tools {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      #custom-qr-generator-app .qr-type-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      #custom-qr-generator-app .qr-main-wrapper {\r\n        padding: 12px;\r\n        border-radius: 16px;\r\n      }\r\n\r\n      #custom-qr-generator-app .qr-header {\r\n        padding: 22px 18px;\r\n        border-radius: 18px;\r\n      }\r\n\r\n      #custom-qr-generator-app .qr-card {\r\n        padding: 16px;\r\n        border-radius: 16px;\r\n      }\r\n\r\n      #custom-qr-generator-app .qr-form-grid,\r\n      #custom-qr-generator-app .qr-type-grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      #custom-qr-generator-app .qr-button-row {\r\n        flex-direction: column;\r\n      }\r\n\r\n      #custom-qr-generator-app .qr-button-row button,\r\n      #custom-qr-generator-app .qr-footer-tools button {\r\n        width: 100%;\r\n      }\r\n\r\n      #custom-qr-generator-app #qr-code-output {\r\n        padding: 10px;\r\n      }\r\n\r\n      #custom-qr-generator-app #qr-code-output canvas,\r\n      #custom-qr-generator-app #qr-code-output img {\r\n        max-width: 100% !important;\r\n        height: auto !important;\r\n      }\r\n\r\n      #custom-qr-generator-app .qr-meta-row {\r\n        flex-direction: column;\r\n      }\r\n\r\n      #custom-qr-generator-app .qr-meta-row span {\r\n        text-align: left;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"qr-main-wrapper\">\r\n    <div class=\"qr-header\">\r\n      <h2>Custom QR Code Generator<\/h2>\r\n      <p>Create custom QR codes for websites, text, contact details, and WiFi passwords. Useful for business websites, event pages, marketing campaigns, visiting cards, product packaging, office documents, digital profiles, and professional sharing.<\/p>\r\n      <div class=\"qr-privacy-note\">\ud83d\udd12 Your QR data is processed in your browser only. No data is sent to any server.<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"qr-card\">\r\n      <h3>1. Select QR Code Type<\/h3>\r\n      <div class=\"qr-type-grid\">\r\n        <button type=\"button\" class=\"qr-type-button active\" data-type=\"url\">\r\n          <span class=\"qr-icon\">\ud83c\udf10<\/span>\r\n          <span class=\"qr-type-title\">Website URL<\/span>\r\n        <\/button>\r\n        <button type=\"button\" class=\"qr-type-button\" data-type=\"text\">\r\n          <span class=\"qr-icon\">\ud83d\udcdd<\/span>\r\n          <span class=\"qr-type-title\">Plain Text<\/span>\r\n        <\/button>\r\n        <button type=\"button\" class=\"qr-type-button\" data-type=\"contact\">\r\n          <span class=\"qr-icon\">\ud83d\udc64<\/span>\r\n          <span class=\"qr-type-title\">Contact Details<\/span>\r\n        <\/button>\r\n        <button type=\"button\" class=\"qr-type-button\" data-type=\"wifi\">\r\n          <span class=\"qr-icon\">\ud83d\udcf6<\/span>\r\n          <span class=\"qr-type-title\">WiFi Password<\/span>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"qr-layout\">\r\n      <div>\r\n        <div class=\"qr-card\">\r\n          <h3>2. Enter QR Details<\/h3>\r\n\r\n          <div class=\"qr-form-section active\" data-form=\"url\">\r\n            <div class=\"qr-form-grid\">\r\n              <div class=\"qr-field full\">\r\n                <label for=\"qr-url-input\">Website URL *<\/label>\r\n                <input id=\"qr-url-input\" type=\"text\" placeholder=\"example.com or https:\/\/example.com\">\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"qr-form-section\" data-form=\"text\">\r\n            <div class=\"qr-form-grid\">\r\n              <div class=\"qr-field full\">\r\n                <label for=\"qr-text-input\">Text \/ Message *<\/label>\r\n                <textarea id=\"qr-text-input\" placeholder=\"Welcome to our event.\"><\/textarea>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"qr-form-section\" data-form=\"contact\">\r\n            <div class=\"qr-form-grid\">\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-name-input\">Full Name *<\/label>\r\n                <input id=\"qr-name-input\" type=\"text\" placeholder=\"Full Name\">\r\n              <\/div>\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-mobile-input\">Mobile Number<\/label>\r\n                <input id=\"qr-mobile-input\" type=\"tel\" placeholder=\"+91 9876543210\">\r\n              <\/div>\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-email-input\">Email ID<\/label>\r\n                <input id=\"qr-email-input\" type=\"email\" placeholder=\"name@example.com\">\r\n              <\/div>\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-company-input\">Company Name<\/label>\r\n                <input id=\"qr-company-input\" type=\"text\" placeholder=\"Company Name\">\r\n              <\/div>\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-designation-input\">Designation<\/label>\r\n                <input id=\"qr-designation-input\" type=\"text\" placeholder=\"Manager\">\r\n              <\/div>\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-contact-website-input\">Website URL<\/label>\r\n                <input id=\"qr-contact-website-input\" type=\"text\" placeholder=\"company.com\">\r\n              <\/div>\r\n              <div class=\"qr-field full\">\r\n                <label for=\"qr-address-input\">Address<\/label>\r\n                <textarea id=\"qr-address-input\" placeholder=\"Office \/ business address\"><\/textarea>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"qr-form-section\" data-form=\"wifi\">\r\n            <div class=\"qr-form-grid\">\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-ssid-input\">WiFi Network Name \/ SSID *<\/label>\r\n                <input id=\"qr-ssid-input\" type=\"text\" placeholder=\"Network Name\">\r\n              <\/div>\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-password-input\">WiFi Password<\/label>\r\n                <input id=\"qr-password-input\" type=\"text\" placeholder=\"Password\">\r\n              <\/div>\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-security-input\">Security Type<\/label>\r\n                <select id=\"qr-security-input\">\r\n                  <option value=\"WPA\" selected>WPA\/WPA2<\/option>\r\n                  <option value=\"WEP\">WEP<\/option>\r\n                  <option value=\"nopass\">No Password<\/option>\r\n                <\/select>\r\n              <\/div>\r\n              <div class=\"qr-field\">\r\n                <label for=\"qr-hidden-input\">Hidden Network<\/label>\r\n                <select id=\"qr-hidden-input\">\r\n                  <option value=\"false\" selected>No<\/option>\r\n                  <option value=\"true\">Yes<\/option>\r\n                <\/select>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div id=\"qr-message-box\" class=\"qr-message\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"qr-card\">\r\n          <h3>3. Customize QR Code<\/h3>\r\n\r\n          <div class=\"qr-form-grid\">\r\n            <div class=\"qr-field\">\r\n              <label for=\"qr-foreground-color\">Foreground Color<\/label>\r\n              <input id=\"qr-foreground-color\" type=\"color\" value=\"#000000\">\r\n            <\/div>\r\n\r\n            <div class=\"qr-field\">\r\n              <label for=\"qr-background-color\">Background Color<\/label>\r\n              <input id=\"qr-background-color\" type=\"color\" value=\"#ffffff\">\r\n            <\/div>\r\n\r\n            <div class=\"qr-field\">\r\n              <label for=\"qr-size-input\">QR Code Size<\/label>\r\n              <select id=\"qr-size-input\">\r\n                <option value=\"150\">150 \u00d7 150 px<\/option>\r\n                <option value=\"200\">200 \u00d7 200 px<\/option>\r\n                <option value=\"250\" selected>250 \u00d7 250 px<\/option>\r\n                <option value=\"300\">300 \u00d7 300 px<\/option>\r\n                <option value=\"400\">400 \u00d7 400 px<\/option>\r\n              <\/select>\r\n            <\/div>\r\n\r\n            <div class=\"qr-field\">\r\n              <label for=\"qr-error-level-input\">Error Correction Level<\/label>\r\n              <select id=\"qr-error-level-input\">\r\n                <option value=\"L\">Low<\/option>\r\n                <option value=\"M\">Medium<\/option>\r\n                <option value=\"Q\">Quartile<\/option>\r\n                <option value=\"H\" selected>High<\/option>\r\n              <\/select>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <p class=\"qr-helper\">Dark foreground and light background are recommended for better scanning. Higher error correction improves scanning reliability but may make the QR code denser.<\/p>\r\n\r\n          <div class=\"qr-button-row\">\r\n            <button type=\"button\" class=\"qr-btn-primary\" id=\"qr-generate-btn\">Generate QR Code<\/button>\r\n            <button type=\"button\" class=\"qr-btn-green\" id=\"qr-save-btn\">Save QR Record<\/button>\r\n            <button type=\"button\" class=\"qr-btn-light\" id=\"qr-view-records-btn\">View Saved Records<\/button>\r\n            <button type=\"button\" class=\"qr-btn-danger\" id=\"qr-reset-btn\">Clear \/ Reset<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div>\r\n        <div class=\"qr-card\">\r\n          <h3>4. QR Preview<\/h3>\r\n\r\n          <div class=\"qr-preview-box\" id=\"qr-preview-box\">\r\n            <div id=\"qr-code-output\"><\/div>\r\n\r\n            <div class=\"qr-meta\" id=\"qr-meta-box\">\r\n              <div class=\"qr-meta-row\">\r\n                <strong>QR Type<\/strong>\r\n                <span id=\"qr-meta-type\">-<\/span>\r\n              <\/div>\r\n              <div class=\"qr-meta-row\">\r\n                <strong>Content Summary<\/strong>\r\n                <span id=\"qr-meta-summary\">-<\/span>\r\n              <\/div>\r\n              <div class=\"qr-meta-row\">\r\n                <strong>Colors<\/strong>\r\n                <span id=\"qr-meta-colors\">-<\/span>\r\n              <\/div>\r\n              <div class=\"qr-meta-row\">\r\n                <strong>Size<\/strong>\r\n                <span id=\"qr-meta-size\">-<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"qr-button-row\">\r\n            <button type=\"button\" class=\"qr-btn-dark\" id=\"qr-download-btn\">Download QR Code<\/button>\r\n            <button type=\"button\" class=\"qr-btn-light\" id=\"qr-copy-btn\">Copy QR Content<\/button>\r\n            <button type=\"button\" class=\"qr-btn-warning\" id=\"qr-print-btn\">Print QR Code<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"qr-card\" id=\"qr-records-section\" style=\"display:none;\">\r\n      <h3>5. Saved QR Records<\/h3>\r\n\r\n      <div class=\"qr-record-tools\">\r\n        <input id=\"qr-record-search\" type=\"text\" placeholder=\"Search saved records...\">\r\n        <select id=\"qr-record-filter\">\r\n          <option value=\"all\">All QR Types<\/option>\r\n          <option value=\"url\">Website URL<\/option>\r\n          <option value=\"text\">Plain Text<\/option>\r\n          <option value=\"contact\">Contact Details<\/option>\r\n          <option value=\"wifi\">WiFi Password<\/option>\r\n        <\/select>\r\n      <\/div>\r\n\r\n      <div class=\"qr-table-wrap\">\r\n        <table>\r\n          <thead>\r\n            <tr>\r\n              <th>Date & Time<\/th>\r\n              <th>QR Type<\/th>\r\n              <th>Content Summary<\/th>\r\n              <th>Size<\/th>\r\n              <th>Colors<\/th>\r\n              <th>Actions<\/th>\r\n            <\/tr>\r\n          <\/thead>\r\n          <tbody id=\"qr-record-body\"><\/tbody>\r\n        <\/table>\r\n      <\/div>\r\n\r\n      <div class=\"qr-footer-tools\">\r\n        <div class=\"qr-helper\">Saved records are stored in this browser only using localStorage.<\/div>\r\n        <button type=\"button\" class=\"qr-btn-danger\" id=\"qr-clear-all-records-btn\">Clear All Records<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\r\n\r\n  <script>\r\n    (function () {\r\n      \"use strict\";\r\n\r\n      var QR_STORAGE_KEY = \"custom_qr_generator_saved_records_v1\";\r\n      var selectedType = \"url\";\r\n      var currentQRData = null;\r\n\r\n      var typeLabels = {\r\n        url: \"Website URL\",\r\n        text: \"Plain Text\",\r\n        contact: \"Contact Details\",\r\n        wifi: \"WiFi Password\"\r\n      };\r\n\r\n      function getEl(id) {\r\n        return document.getElementById(id);\r\n      }\r\n\r\n      function trimText(value) {\r\n        return String(value || \"\").trim();\r\n      }\r\n\r\n      function showMessage(message, type) {\r\n        var box = getEl(\"qr-message-box\");\r\n        box.className = \"qr-message \" + (type === \"success\" ? \"success\" : \"error\");\r\n        box.textContent = message;\r\n      }\r\n\r\n      function clearMessage() {\r\n        var box = getEl(\"qr-message-box\");\r\n        box.className = \"qr-message\";\r\n        box.textContent = \"\";\r\n      }\r\n\r\n      function normalizeUrl(url) {\r\n        url = trimText(url);\r\n        if (!url) return \"\";\r\n        if (!\/^https?:\\\/\\\/\/i.test(url)) {\r\n          url = \"https:\/\/\" + url;\r\n        }\r\n        return url;\r\n      }\r\n\r\n      function isValidUrl(url) {\r\n        try {\r\n          var parsedUrl = new URL(url);\r\n          return parsedUrl.protocol === \"http:\" || parsedUrl.protocol === \"https:\";\r\n        } catch (e) {\r\n          return false;\r\n        }\r\n      }\r\n\r\n      function isValidEmail(email) {\r\n        return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\r\n      }\r\n\r\n      function escapeHtml(text) {\r\n        return String(text || \"\").replace(\/[&<>\"']\/g, function (char) {\r\n          return {\r\n            \"&\": \"&amp;\",\r\n            \"<\": \"&lt;\",\r\n            \">\": \"&gt;\",\r\n            '\"': \"&quot;\",\r\n            \"'\": \"&#039;\"\r\n          }[char];\r\n        });\r\n      }\r\n\r\n      function escapeVCard(value) {\r\n        return trimText(value)\r\n          .replace(\/\\\\\/g, \"\\\\\\\\\")\r\n          .replace(\/\\n\/g, \"\\\\n\")\r\n          .replace(\/,\/g, \"\\\\,\")\r\n          .replace(\/;\/g, \"\\\\;\");\r\n      }\r\n\r\n      function escapeWifi(value) {\r\n        return trimText(value)\r\n          .replace(\/\\\\\/g, \"\\\\\\\\\")\r\n          .replace(\/;\/g, \"\\\\;\")\r\n          .replace(\/,\/g, \"\\\\,\")\r\n          .replace(\/:\/g, \"\\\\:\");\r\n      }\r\n\r\n      function shortenText(text, length) {\r\n        text = trimText(text).replace(\/\\s+\/g, \" \");\r\n        if (text.length <= length) return text;\r\n        return text.substring(0, length - 3) + \"...\";\r\n      }\r\n\r\n      function getDateTime() {\r\n        return new Date().toLocaleString();\r\n      }\r\n\r\n      function getFileDateTime() {\r\n        var d = new Date();\r\n        var year = d.getFullYear();\r\n        var month = String(d.getMonth() + 1).padStart(2, \"0\");\r\n        var day = String(d.getDate()).padStart(2, \"0\");\r\n        var hour = String(d.getHours()).padStart(2, \"0\");\r\n        var minute = String(d.getMinutes()).padStart(2, \"0\");\r\n        var second = String(d.getSeconds()).padStart(2, \"0\");\r\n        return year + \"-\" + month + \"-\" + day + \"-\" + hour + minute + second;\r\n      }\r\n\r\n      function getCorrectionLevel(level) {\r\n        if (typeof QRCode === \"undefined\") return null;\r\n\r\n        var map = {\r\n          L: QRCode.CorrectLevel.L,\r\n          M: QRCode.CorrectLevel.M,\r\n          Q: QRCode.CorrectLevel.Q,\r\n          H: QRCode.CorrectLevel.H\r\n        };\r\n\r\n        return map[level] || QRCode.CorrectLevel.H;\r\n      }\r\n\r\n      function getSettings() {\r\n        return {\r\n          foreground: getEl(\"qr-foreground-color\").value || \"#000000\",\r\n          background: getEl(\"qr-background-color\").value || \"#ffffff\",\r\n          size: parseInt(getEl(\"qr-size-input\").value, 10) || 250,\r\n          errorLevel: getEl(\"qr-error-level-input\").value || \"H\"\r\n        };\r\n      }\r\n\r\n      function buildQRContent() {\r\n        if (selectedType === \"url\") {\r\n          var url = normalizeUrl(getEl(\"qr-url-input\").value);\r\n\r\n          if (!url) {\r\n            return { error: \"Please enter website URL.\" };\r\n          }\r\n\r\n          if (!isValidUrl(url)) {\r\n            return { error: \"Please enter a valid website URL.\" };\r\n          }\r\n\r\n          getEl(\"qr-url-input\").value = url;\r\n\r\n          return {\r\n            type: \"url\",\r\n            content: url,\r\n            summary: url\r\n          };\r\n        }\r\n\r\n        if (selectedType === \"text\") {\r\n          var text = trimText(getEl(\"qr-text-input\").value);\r\n\r\n          if (!text) {\r\n            return { error: \"Please enter text or message.\" };\r\n          }\r\n\r\n          return {\r\n            type: \"text\",\r\n            content: text,\r\n            summary: shortenText(text, 90)\r\n          };\r\n        }\r\n\r\n        if (selectedType === \"contact\") {\r\n          var fullName = trimText(getEl(\"qr-name-input\").value);\r\n          var mobile = trimText(getEl(\"qr-mobile-input\").value);\r\n          var email = trimText(getEl(\"qr-email-input\").value);\r\n          var company = trimText(getEl(\"qr-company-input\").value);\r\n          var designation = trimText(getEl(\"qr-designation-input\").value);\r\n          var website = trimText(getEl(\"qr-contact-website-input\").value);\r\n          var address = trimText(getEl(\"qr-address-input\").value);\r\n\r\n          if (!fullName) {\r\n            return { error: \"Please enter full name.\" };\r\n          }\r\n\r\n          if (!mobile && !email) {\r\n            return { error: \"Please enter mobile number or email ID.\" };\r\n          }\r\n\r\n          if (email && !isValidEmail(email)) {\r\n            return { error: \"Please enter a valid email ID.\" };\r\n          }\r\n\r\n          if (website) {\r\n            website = normalizeUrl(website);\r\n\r\n            if (!isValidUrl(website)) {\r\n              return { error: \"Please enter a valid website URL in contact details.\" };\r\n            }\r\n\r\n            getEl(\"qr-contact-website-input\").value = website;\r\n          }\r\n\r\n          var vcard = [\r\n            \"BEGIN:VCARD\",\r\n            \"VERSION:3.0\",\r\n            \"FN:\" + escapeVCard(fullName)\r\n          ];\r\n\r\n          if (company) vcard.push(\"ORG:\" + escapeVCard(company));\r\n          if (designation) vcard.push(\"TITLE:\" + escapeVCard(designation));\r\n          if (mobile) vcard.push(\"TEL:\" + escapeVCard(mobile));\r\n          if (email) vcard.push(\"EMAIL:\" + escapeVCard(email));\r\n          if (website) vcard.push(\"URL:\" + escapeVCard(website));\r\n          if (address) vcard.push(\"ADR:\" + escapeVCard(address));\r\n\r\n          vcard.push(\"END:VCARD\");\r\n\r\n          return {\r\n            type: \"contact\",\r\n            content: vcard.join(\"\\n\"),\r\n            summary: fullName + (company ? \" | \" + company : \"\") + (mobile ? \" | \" + mobile : \"\") + (email ? \" | \" + email : \"\")\r\n          };\r\n        }\r\n\r\n        if (selectedType === \"wifi\") {\r\n          var ssid = trimText(getEl(\"qr-ssid-input\").value);\r\n          var password = trimText(getEl(\"qr-password-input\").value);\r\n          var security = getEl(\"qr-security-input\").value;\r\n          var hidden = getEl(\"qr-hidden-input\").value;\r\n\r\n          if (!ssid) {\r\n            return { error: \"Please enter WiFi network name \/ SSID.\" };\r\n          }\r\n\r\n          if ((security === \"WPA\" || security === \"WEP\") && !password) {\r\n            return { error: \"Please enter WiFi password for selected security type.\" };\r\n          }\r\n\r\n          var wifiContent = \"WIFI:T:\" + security + \";S:\" + escapeWifi(ssid) + \";\";\r\n\r\n          if (security !== \"nopass\") {\r\n            wifiContent += \"P:\" + escapeWifi(password) + \";\";\r\n          }\r\n\r\n          wifiContent += \"H:\" + hidden + \";;\";\r\n\r\n          return {\r\n            type: \"wifi\",\r\n            content: wifiContent,\r\n            summary: \"SSID: \" + ssid + \" | Security: \" + (security === \"nopass\" ? \"No Password\" : security) + \" | Hidden: \" + (hidden === \"true\" ? \"Yes\" : \"No\")\r\n          };\r\n        }\r\n\r\n        return { error: \"Please select a valid QR type.\" };\r\n      }\r\n\r\n      function getQRImageData() {\r\n        var output = getEl(\"qr-code-output\");\r\n        var canvas = output.querySelector(\"canvas\");\r\n        var image = output.querySelector(\"img\");\r\n\r\n        if (canvas) {\r\n          try {\r\n            return canvas.toDataURL(\"image\/png\");\r\n          } catch (e) {\r\n            return \"\";\r\n          }\r\n        }\r\n\r\n        if (image && image.src) {\r\n          return image.src;\r\n        }\r\n\r\n        return \"\";\r\n      }\r\n\r\n      function generateQRCode() {\r\n        clearMessage();\r\n\r\n        if (typeof QRCode === \"undefined\") {\r\n          showMessage(\"QR code library failed to load. Please check internet\/CDN access and try again.\", \"error\");\r\n          return false;\r\n        }\r\n\r\n        var built = buildQRContent();\r\n\r\n        if (built.error) {\r\n          showMessage(built.error, \"error\");\r\n          return false;\r\n        }\r\n\r\n        var settings = getSettings();\r\n        var output = getEl(\"qr-code-output\");\r\n        output.innerHTML = \"\";\r\n\r\n        try {\r\n          new QRCode(output, {\r\n            text: built.content,\r\n            width: settings.size,\r\n            height: settings.size,\r\n            colorDark: settings.foreground,\r\n            colorLight: settings.background,\r\n            correctLevel: getCorrectionLevel(settings.errorLevel)\r\n          });\r\n\r\n          currentQRData = {\r\n            type: built.type,\r\n            typeLabel: typeLabels[built.type],\r\n            content: built.content,\r\n            summary: built.summary,\r\n            size: settings.size,\r\n            foreground: settings.foreground,\r\n            background: settings.background,\r\n            errorLevel: settings.errorLevel,\r\n            dateTime: getDateTime(),\r\n            imageData: \"\"\r\n          };\r\n\r\n          setTimeout(function () {\r\n            currentQRData.imageData = getQRImageData();\r\n          }, 250);\r\n\r\n          getEl(\"qr-meta-box\").classList.add(\"active\");\r\n          getEl(\"qr-meta-type\").textContent = currentQRData.typeLabel;\r\n          getEl(\"qr-meta-summary\").textContent = currentQRData.summary;\r\n          getEl(\"qr-meta-colors\").innerHTML =\r\n            '<span class=\"qr-color-dot\" style=\"background:' + settings.foreground + '\"><\/span>' +\r\n            settings.foreground +\r\n            ' \/ <span class=\"qr-color-dot\" style=\"background:' + settings.background + '\"><\/span>' +\r\n            settings.background;\r\n          getEl(\"qr-meta-size\").textContent = settings.size + \" \u00d7 \" + settings.size + \" px\";\r\n\r\n          showMessage(\"QR code generated successfully.\", \"success\");\r\n          return true;\r\n        } catch (e) {\r\n          showMessage(\"QR generation failed. Please reduce content length or try again.\", \"error\");\r\n          return false;\r\n        }\r\n      }\r\n\r\n      function ensureGeneratedQR() {\r\n        if (!currentQRData) {\r\n          showMessage(\"Please generate a QR code first.\", \"error\");\r\n          return false;\r\n        }\r\n\r\n        var imageData = getQRImageData();\r\n\r\n        if (!imageData) {\r\n          showMessage(\"QR image is not available. Please generate the QR code again.\", \"error\");\r\n          return false;\r\n        }\r\n\r\n        currentQRData.imageData = imageData;\r\n        return true;\r\n      }\r\n\r\n      function downloadImage(dataUrl, fileName) {\r\n        var link = document.createElement(\"a\");\r\n        link.href = dataUrl;\r\n        link.download = fileName;\r\n        document.body.appendChild(link);\r\n        link.click();\r\n        document.body.removeChild(link);\r\n      }\r\n\r\n      function downloadCurrentQR() {\r\n        if (!ensureGeneratedQR()) return;\r\n\r\n        var fileName = \"custom-qr-\" + currentQRData.type + \"-\" + getFileDateTime() + \".png\";\r\n        downloadImage(currentQRData.imageData, fileName);\r\n      }\r\n\r\n      function copyQRContent() {\r\n        if (!currentQRData) {\r\n          showMessage(\"Please generate a QR code first.\", \"error\");\r\n          return;\r\n        }\r\n\r\n        if (navigator.clipboard && navigator.clipboard.writeText) {\r\n          navigator.clipboard.writeText(currentQRData.content).then(function () {\r\n            showMessage(\"QR content copied successfully.\", \"success\");\r\n          }).catch(function () {\r\n            fallbackCopy(currentQRData.content);\r\n          });\r\n        } else {\r\n          fallbackCopy(currentQRData.content);\r\n        }\r\n      }\r\n\r\n      function fallbackCopy(text) {\r\n        var textarea = document.createElement(\"textarea\");\r\n        textarea.value = text;\r\n        textarea.style.position = \"fixed\";\r\n        textarea.style.opacity = \"0\";\r\n        document.body.appendChild(textarea);\r\n        textarea.select();\r\n\r\n        try {\r\n          document.execCommand(\"copy\");\r\n          showMessage(\"QR content copied successfully.\", \"success\");\r\n        } catch (e) {\r\n          showMessage(\"Unable to copy content. Please copy manually.\", \"error\");\r\n        }\r\n\r\n        document.body.removeChild(textarea);\r\n      }\r\n\r\n      function printQRCode() {\r\n        if (!ensureGeneratedQR()) return;\r\n\r\n        var printWindow = window.open(\"\", \"_blank\", \"width=720,height=760\");\r\n\r\n        if (!printWindow) {\r\n          showMessage(\"Popup blocked. Please allow popups to print QR code.\", \"error\");\r\n          return;\r\n        }\r\n\r\n        printWindow.document.write(\r\n          \"<!DOCTYPE html>\" +\r\n          \"<html>\" +\r\n          \"<head>\" +\r\n          \"<title>Print QR Code<\/title>\" +\r\n          \"<style>\" +\r\n          \"body{font-family:Arial,sans-serif;text-align:center;padding:30px;color:#111827;}\" +\r\n          \".box{border:1px solid #e5e7eb;border-radius:18px;padding:24px;display:inline-block;max-width:620px;}\" +\r\n          \"img{max-width:100%;height:auto;}\" +\r\n          \".summary{margin-top:15px;color:#4b5563;line-height:1.5;word-break:break-word;}\" +\r\n          \"h2{margin:0 0 18px;color:#1f2937;}\" +\r\n          \"button{padding:12px 18px;border:none;background:#2563eb;color:#fff;border-radius:10px;font-weight:700;cursor:pointer;}\" +\r\n          \"@media print{button{display:none;}}\" +\r\n          \"<\/style>\" +\r\n          \"<\/head>\" +\r\n          \"<body>\" +\r\n          \"<div class='box'>\" +\r\n          \"<h2>\" + escapeHtml(currentQRData.typeLabel) + \" QR Code<\/h2>\" +\r\n          \"<img src='\" + currentQRData.imageData + \"' alt='QR Code'>\" +\r\n          \"<div class='summary'><strong>Content Summary:<\/strong><br>\" + escapeHtml(currentQRData.summary) + \"<\/div>\" +\r\n          \"<\/div>\" +\r\n          \"<br><br>\" +\r\n          \"<button onclick='window.print()'>Print QR Code<\/button>\" +\r\n          \"<\/body>\" +\r\n          \"<\/html>\"\r\n        );\r\n\r\n        printWindow.document.close();\r\n        printWindow.focus();\r\n      }\r\n\r\n      function getRecords() {\r\n        try {\r\n          var records = localStorage.getItem(QR_STORAGE_KEY);\r\n          return records ? JSON.parse(records) : [];\r\n        } catch (e) {\r\n          return [];\r\n        }\r\n      }\r\n\r\n      function saveRecords(records) {\r\n        localStorage.setItem(QR_STORAGE_KEY, JSON.stringify(records));\r\n      }\r\n\r\n      function saveQRRecord() {\r\n        if (!ensureGeneratedQR()) return;\r\n\r\n        var records = getRecords();\r\n\r\n        var record = {\r\n          id: \"qr_\" + Date.now(),\r\n          type: currentQRData.type,\r\n          typeLabel: currentQRData.typeLabel,\r\n          content: currentQRData.content,\r\n          summary: currentQRData.summary,\r\n          dateTime: getDateTime(),\r\n          size: currentQRData.size,\r\n          foreground: currentQRData.foreground,\r\n          background: currentQRData.background,\r\n          errorLevel: currentQRData.errorLevel,\r\n          imageData: currentQRData.imageData\r\n        };\r\n\r\n        records.unshift(record);\r\n        saveRecords(records);\r\n\r\n        showMessage(\"QR record saved successfully in your browser.\", \"success\");\r\n\r\n        getEl(\"qr-records-section\").style.display = \"block\";\r\n        renderRecords();\r\n      }\r\n\r\n      function renderRecords() {\r\n        var tbody = getEl(\"qr-record-body\");\r\n        var searchValue = trimText(getEl(\"qr-record-search\").value).toLowerCase();\r\n        var filterValue = getEl(\"qr-record-filter\").value;\r\n        var records = getRecords();\r\n\r\n        var filteredRecords = records.filter(function (record) {\r\n          var matchesType = filterValue === \"all\" || record.type === filterValue;\r\n          var searchText = [\r\n            record.typeLabel,\r\n            record.summary,\r\n            record.dateTime\r\n          ].join(\" \").toLowerCase();\r\n\r\n          var matchesSearch = !searchValue || searchText.indexOf(searchValue) !== -1;\r\n\r\n          return matchesType && matchesSearch;\r\n        });\r\n\r\n        if (!filteredRecords.length) {\r\n          tbody.innerHTML = '<tr><td colspan=\"6\"><div class=\"qr-empty\">No saved QR records found.<\/div><\/td><\/tr>';\r\n          return;\r\n        }\r\n\r\n        tbody.innerHTML = filteredRecords.map(function (record) {\r\n          return (\r\n            \"<tr>\" +\r\n            \"<td>\" + escapeHtml(record.dateTime) + \"<\/td>\" +\r\n            \"<td><strong>\" + escapeHtml(record.typeLabel) + \"<\/strong><\/td>\" +\r\n            \"<td>\" + escapeHtml(shortenText(record.summary, 95)) + \"<\/td>\" +\r\n            \"<td>\" + escapeHtml(record.size + \" \u00d7 \" + record.size) + \"<\/td>\" +\r\n            \"<td>\" +\r\n            \"<span class='qr-color-dot' style='background:\" + record.foreground + \"'><\/span>\" + escapeHtml(record.foreground) +\r\n            \"<br>\" +\r\n            \"<span class='qr-color-dot' style='background:\" + record.background + \"'><\/span>\" + escapeHtml(record.background) +\r\n            \"<\/td>\" +\r\n            \"<td>\" +\r\n            \"<div class='qr-small-actions'>\" +\r\n            \"<button type='button' class='qr-btn-light' data-view-id='\" + record.id + \"'>View QR<\/button>\" +\r\n            \"<button type='button' class='qr-btn-dark' data-download-id='\" + record.id + \"'>Download<\/button>\" +\r\n            \"<button type='button' class='qr-btn-danger' data-delete-id='\" + record.id + \"'>Delete<\/button>\" +\r\n            \"<\/div>\" +\r\n            \"<\/td>\" +\r\n            \"<\/tr>\"\r\n          );\r\n        }).join(\"\");\r\n      }\r\n\r\n      function findRecord(id) {\r\n        var records = getRecords();\r\n\r\n        for (var i = 0; i < records.length; i++) {\r\n          if (records[i].id === id) {\r\n            return records[i];\r\n          }\r\n        }\r\n\r\n        return null;\r\n      }\r\n\r\n      function viewRecord(id) {\r\n        var record = findRecord(id);\r\n\r\n        if (!record) return;\r\n\r\n        currentQRData = {\r\n          type: record.type,\r\n          typeLabel: record.typeLabel,\r\n          content: record.content,\r\n          summary: record.summary,\r\n          size: record.size,\r\n          foreground: record.foreground,\r\n          background: record.background,\r\n          errorLevel: record.errorLevel,\r\n          dateTime: record.dateTime,\r\n          imageData: record.imageData\r\n        };\r\n\r\n        getEl(\"qr-code-output\").innerHTML =\r\n          '<img decoding=\"async\" src=\"' + record.imageData + '\" alt=\"Saved QR Code\" width=\"' + record.size + '\" height=\"' + record.size + '\">';\r\n\r\n        getEl(\"qr-meta-box\").classList.add(\"active\");\r\n        getEl(\"qr-meta-type\").textContent = record.typeLabel;\r\n        getEl(\"qr-meta-summary\").textContent = record.summary;\r\n        getEl(\"qr-meta-colors\").innerHTML =\r\n          '<span class=\"qr-color-dot\" style=\"background:' + record.foreground + '\"><\/span>' +\r\n          record.foreground +\r\n          ' \/ <span class=\"qr-color-dot\" style=\"background:' + record.background + '\"><\/span>' +\r\n          record.background;\r\n        getEl(\"qr-meta-size\").textContent = record.size + \" \u00d7 \" + record.size + \" px\";\r\n\r\n        showMessage(\"Saved QR record loaded in preview.\", \"success\");\r\n        getEl(\"qr-preview-box\").scrollIntoView({ behavior: \"smooth\", block: \"center\" });\r\n      }\r\n\r\n      function downloadRecord(id) {\r\n        var record = findRecord(id);\r\n\r\n        if (!record) return;\r\n\r\n        var fileName = \"custom-qr-\" + record.type + \"-\" + getFileDateTime() + \".png\";\r\n        downloadImage(record.imageData, fileName);\r\n      }\r\n\r\n      function deleteRecord(id) {\r\n        if (!confirm(\"Are you sure you want to delete this QR record?\")) return;\r\n\r\n        var records = getRecords().filter(function (record) {\r\n          return record.id !== id;\r\n        });\r\n\r\n        saveRecords(records);\r\n        renderRecords();\r\n        showMessage(\"QR record deleted successfully.\", \"success\");\r\n      }\r\n\r\n      function clearAllRecords() {\r\n        if (!confirm(\"Are you sure you want to clear all saved QR records?\")) return;\r\n\r\n        localStorage.removeItem(QR_STORAGE_KEY);\r\n        renderRecords();\r\n        showMessage(\"All saved QR records cleared successfully.\", \"success\");\r\n      }\r\n\r\n      function resetForm() {\r\n        clearMessage();\r\n\r\n        var fieldIds = [\r\n          \"qr-url-input\",\r\n          \"qr-text-input\",\r\n          \"qr-name-input\",\r\n          \"qr-mobile-input\",\r\n          \"qr-email-input\",\r\n          \"qr-company-input\",\r\n          \"qr-designation-input\",\r\n          \"qr-contact-website-input\",\r\n          \"qr-address-input\",\r\n          \"qr-ssid-input\",\r\n          \"qr-password-input\"\r\n        ];\r\n\r\n        fieldIds.forEach(function (id) {\r\n          var field = getEl(id);\r\n          if (field) field.value = \"\";\r\n        });\r\n\r\n        getEl(\"qr-security-input\").value = \"WPA\";\r\n        getEl(\"qr-hidden-input\").value = \"false\";\r\n        getEl(\"qr-foreground-color\").value = \"#000000\";\r\n        getEl(\"qr-background-color\").value = \"#ffffff\";\r\n        getEl(\"qr-size-input\").value = \"250\";\r\n        getEl(\"qr-error-level-input\").value = \"H\";\r\n\r\n        getEl(\"qr-code-output\").innerHTML = \"\";\r\n        getEl(\"qr-meta-box\").classList.remove(\"active\");\r\n\r\n        currentQRData = null;\r\n        updateWifiPasswordStatus();\r\n      }\r\n\r\n      function switchQRType(type) {\r\n        selectedType = type;\r\n\r\n        var buttons = document.querySelectorAll(\"#custom-qr-generator-app .qr-type-button\");\r\n        buttons.forEach(function (button) {\r\n          button.classList.toggle(\"active\", button.getAttribute(\"data-type\") === type);\r\n        });\r\n\r\n        var forms = document.querySelectorAll(\"#custom-qr-generator-app .qr-form-section\");\r\n        forms.forEach(function (form) {\r\n          form.classList.toggle(\"active\", form.getAttribute(\"data-form\") === type);\r\n        });\r\n\r\n        clearMessage();\r\n      }\r\n\r\n      function updateWifiPasswordStatus() {\r\n        var security = getEl(\"qr-security-input\").value;\r\n        var passwordInput = getEl(\"qr-password-input\");\r\n\r\n        if (security === \"nopass\") {\r\n          passwordInput.value = \"\";\r\n          passwordInput.disabled = true;\r\n          passwordInput.placeholder = \"Not required for No Password\";\r\n        } else {\r\n          passwordInput.disabled = false;\r\n          passwordInput.placeholder = \"Password\";\r\n        }\r\n      }\r\n\r\n      function initEvents() {\r\n        var typeButtons = document.querySelectorAll(\"#custom-qr-generator-app .qr-type-button\");\r\n\r\n        typeButtons.forEach(function (button) {\r\n          button.addEventListener(\"click\", function () {\r\n            switchQRType(button.getAttribute(\"data-type\"));\r\n          });\r\n        });\r\n\r\n        getEl(\"qr-generate-btn\").addEventListener(\"click\", generateQRCode);\r\n        getEl(\"qr-download-btn\").addEventListener(\"click\", downloadCurrentQR);\r\n        getEl(\"qr-copy-btn\").addEventListener(\"click\", copyQRContent);\r\n        getEl(\"qr-print-btn\").addEventListener(\"click\", printQRCode);\r\n        getEl(\"qr-save-btn\").addEventListener(\"click\", saveQRRecord);\r\n        getEl(\"qr-reset-btn\").addEventListener(\"click\", resetForm);\r\n\r\n        getEl(\"qr-view-records-btn\").addEventListener(\"click\", function () {\r\n          getEl(\"qr-records-section\").style.display = \"block\";\r\n          renderRecords();\r\n          getEl(\"qr-records-section\").scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n        });\r\n\r\n        getEl(\"qr-record-search\").addEventListener(\"input\", renderRecords);\r\n        getEl(\"qr-record-filter\").addEventListener(\"change\", renderRecords);\r\n        getEl(\"qr-clear-all-records-btn\").addEventListener(\"click\", clearAllRecords);\r\n        getEl(\"qr-security-input\").addEventListener(\"change\", updateWifiPasswordStatus);\r\n\r\n        getEl(\"qr-record-body\").addEventListener(\"click\", function (event) {\r\n          var target = event.target;\r\n\r\n          var viewId = target.getAttribute(\"data-view-id\");\r\n          var downloadId = target.getAttribute(\"data-download-id\");\r\n          var deleteId = target.getAttribute(\"data-delete-id\");\r\n\r\n          if (viewId) viewRecord(viewId);\r\n          if (downloadId) downloadRecord(downloadId);\r\n          if (deleteId) deleteRecord(deleteId);\r\n        });\r\n      }\r\n\r\n      initEvents();\r\n      updateWifiPasswordStatus();\r\n      renderRecords();\r\n    })();\r\n  <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Custom QR Code Generator Create custom QR codes for websites, text, contact details, and WiFi passwords. Useful for business websites, event pages, marketing campaigns, visiting cards, product packaging, office documents, digital profiles, and professional sharing. \ud83d\udd12 Your QR data is processed in your browser only. No data is sent to any server. 1. Select QR [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-647","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/comments?post=647"}],"version-history":[{"count":4,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/647\/revisions"}],"predecessor-version":[{"id":651,"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/pages\/647\/revisions\/651"}],"wp:attachment":[{"href":"https:\/\/vikassrivastava.in\/academy\/wp-json\/wp\/v2\/media?parent=647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}