Dynamic QR Engine Pro<\/title>\n <script src=\"https:\/\/unpkg.com\/qr-code-styling@1.5.0\/lib\/qr-code-styling.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <style>\n :root {\n --qrcg-primary: #3b82f6;\n --qrcg-primary-hover: #2563eb;\n --qrcg-secondary: #4f46e5;\n --qrcg-bg-main: #f8fafc;\n --qrcg-bg-card: rgba(255, 255, 255, 0.9);\n --qrcg-text-dark: #0f172a;\n --qrcg-text-muted: #475569;\n --qrcg-border: #e2e8f0;\n --qrcg-radius: 16px;\n --qrcg-radius-sm: 8px;\n --qrcg-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);\n --qrcg-transition: all 0.2s ease-in-out;\n }\n\n .qrcg-body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background-color: var(--qrcg-bg-main);\n color: var(--qrcg-text-dark);\n margin: 0;\n padding: 0;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n box-sizing: border-box;\n }\n\n .qrcg-app-container {\n width: 100%;\n max-width: 1400px;\n padding: 2rem 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n box-sizing: border-box;\n }\n\n \/* HEADER *\/\n .qrcg-header {\n text-align: center;\n margin-bottom: 1rem;\n }\n\n .qrcg-header h1 {\n font-size: 2.5rem;\n font-weight: 800;\n letter-spacing: -0.05em;\n background: linear-gradient(135deg, var(--qrcg-primary) 0%, var(--qrcg-secondary) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin: 0 0 0.5rem 0;\n }\n\n .qrcg-header p {\n font-size: 1rem;\n color: var(--qrcg-text-muted);\n margin: 0;\n }\n\n \/* GRID SYSTEM *\/\n .qrcg-main-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n\n @media (min-width: 1024px) {\n .qrcg-main-grid {\n grid-template-columns: 1.2fr 0.8fr;\n }\n }\n\n \/* GLASS CARDS *\/\n .qrcg-card {\n background: var(--qrcg-bg-card);\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: var(--qrcg-radius);\n box-shadow: var(--qrcg-shadow);\n padding: 1.75rem;\n box-sizing: border-box;\n }\n\n \/* TAB BAR *\/\n .qrcg-tab-nav {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n background: #f1f5f9;\n padding: 0.5rem;\n border-radius: 12px;\n margin-bottom: 1.5rem;\n }\n\n .qrcg-tab-btn {\n background: transparent;\n border: none;\n color: var(--qrcg-text-muted);\n padding: 0.5rem 1rem;\n border-radius: 8px;\n font-weight: 600;\n font-size: 0.875rem;\n cursor: pointer;\n transition: var(--qrcg-transition);\n white-space: nowrap;\n }\n\n .qrcg-tab-btn.qrcg-active {\n background: #ffffff;\n color: var(--qrcg-primary);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n }\n\n \/* FORM COMPONENT LAYOUT *\/\n .qrcg-form-group {\n margin-bottom: 1.25rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .qrcg-form-group label {\n font-weight: 700;\n font-size: 0.875rem;\n color: var(--qrcg-text-dark);\n }\n\n .qrcg-input, .qrcg-select, .qrcg-textarea {\n width: 100%;\n padding: 0.75rem 1rem;\n border: 1.5px solid var(--qrcg-border);\n border-radius: var(--qrcg-radius-sm);\n font-size: 0.9375rem;\n background-color: #ffffff;\n color: var(--qrcg-text-dark);\n outline: none;\n transition: var(--qrcg-transition);\n box-sizing: border-box;\n }\n\n .qrcg-input:focus, .qrcg-select:focus, .qrcg-textarea:focus {\n border-color: var(--qrcg-primary);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n }\n\n \/* ACCORDION PANELS *\/\n .qrcg-accordion {\n border: 1px solid var(--qrcg-border);\n border-radius: var(--qrcg-radius-sm);\n margin-top: 1rem;\n overflow: hidden;\n }\n\n .qrcg-accordion-header {\n background: #f8fafc;\n padding: 1rem;\n font-weight: 700;\n font-size: 0.9375rem;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n user-select: none;\n }\n\n .qrcg-accordion-body {\n padding: 1.25rem;\n background: #ffffff;\n display: none;\n border-top: 1px solid var(--qrcg-border);\n }\n\n .qrcg-accordion.qrcg-open .qrcg-accordion-body {\n display: block;\n }\n\n \/* GRID COLS *\/\n .qrcg-customize-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 1rem;\n }\n\n \/* RANGE CONTROLLER SLIDER *\/\n .qrcg-range-container {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .qrcg-range-slider {\n flex: 1;\n accent-color: var(--qrcg-primary);\n }\n\n .qrcg-range-val {\n font-weight: 600;\n font-size: 0.875rem;\n min-width: 45px;\n text-align: right;\n }\n\n \/* COLOR PICKER MATRIX *\/\n .qrcg-color-row {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n }\n\n .qrcg-color-input {\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n padding: 0;\n background: none;\n }\n\n \/* PREVIEW CANVAS CONTAINER *\/\n .qrcg-preview-box {\n position: relative;\n background: #ffffff;\n border: 2px dashed var(--qrcg-border);\n border-radius: var(--qrcg-radius);\n padding: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);\n width: 100%;\n max-width: 340px;\n aspect-ratio: 1;\n box-sizing: border-box;\n transition: var(--qrcg-transition);\n }\n\n .qrcg-preview-box.qrcg-dark-mode {\n background: #0f172a;\n border-color: #334155;\n }\n\n #qrcg-rendered-output {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #qrcg-rendered-output canvas {\n max-width: 100% !important;\n max-height: 100% !important;\n height: auto !important;\n width: auto !important;\n }\n\n \/* ACTION BAR UNDER PREVIEW *\/\n .qrcg-preview-toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n width: 100%;\n justify-content: center;\n }\n\n .qrcg-tool-btn {\n background: #f1f5f9;\n border: none;\n color: var(--qrcg-text-muted);\n padding: 0.5rem 0.8rem;\n border-radius: var(--qrcg-radius-sm);\n cursor: pointer;\n font-size: 0.875rem;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n transition: var(--qrcg-transition);\n }\n\n .qrcg-tool-btn:hover {\n background: #e2e8f0;\n color: var(--qrcg-text-dark);\n }\n\n \/* DOWNLOAD MATRIX BUTTONS *\/\n .qrcg-download-group {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n }\n\n .qrcg-btn {\n background: linear-gradient(135deg, var(--qrcg-primary) 0%, var(--qrcg-secondary) 100%);\n border: none;\n color: #ffffff;\n font-weight: 700;\n padding: 0.75rem 1rem;\n border-radius: var(--qrcg-radius-sm);\n cursor: pointer;\n transition: var(--qrcg-transition);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n text-decoration: none;\n }\n\n .qrcg-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);\n }\n\n .qrcg-btn-outline {\n background: #ffffff;\n border: 1.5px solid var(--qrcg-border);\n color: var(--qrcg-text-dark);\n }\n\n .qrcg-btn-outline:hover {\n background: #f8fafc;\n border-color: var(--qrcg-text-dark);\n transform: none;\n box-shadow: none;\n }\n\n \/* DATA SPEC TABLE *\/\n .qrcg-details-table {\n width: 100%;\n font-size: 0.8125rem;\n border-collapse: collapse;\n margin-top: 0.5rem;\n }\n\n .qrcg-details-table td {\n padding: 0.4rem 0;\n color: var(--qrcg-text-muted);\n }\n\n .qrcg-details-table td:last-child {\n font-weight: 700;\n color: var(--qrcg-text-dark);\n text-align: right;\n }\n\n \/* HISTORY WRAP *\/\n .qrcg-history-wrap {\n margin-top: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .qrcg-history-item {\n background: #ffffff;\n border: 1px solid var(--qrcg-border);\n border-radius: var(--qrcg-radius-sm);\n padding: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n font-size: 0.8125rem;\n }\n\n .qrcg-history-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n }\n\n .qrcg-batch-preview-container {\n max-height: 250px;\n overflow-y: auto;\n border: 1px solid var(--qrcg-border);\n border-radius: var(--qrcg-radius-sm);\n margin-top: 1rem;\n display: flex;\n flex-direction: column;\n }\n\n .qrcg-batch-row {\n padding: 0.5rem 1rem;\n font-size: 0.8125rem;\n border-bottom: 1px solid var(--qrcg-border);\n display: flex;\n justify-content: space-between;\n }\n\n .qrcg-error-feedback {\n color: #ef4444;\n font-size: 0.8125rem;\n font-weight: 600;\n display: none;\n margin-top: 0.25rem;\n }\n\n .qrcg-error .qrcg-error-feedback {\n display: block;\n }\n\n .qrcg-error input {\n border-color: #ef4444;\n }\n\n .qrcg-hidden {\n display: none !important;\n }\n <\/style>\n<\/head>\n<body class=\"qrcg-body\">\n\n<div class=\"qrcg-app-container\">\n <header class=\"qrcg-header\">\n <h1>Dynamic QR Engine Pro<\/h1>\n <p>Draft vector-scannable, high-fidelity custom QR payloads instantly.<\/p>\n <\/header>\n\n <div class=\"qrcg-main-grid\">\n <main class=\"qrcg-card\" style=\"display: flex; flex-direction: column; gap: 1rem;\">\n <div class=\"qrcg-tab-nav\" id=\"qrcg-type-tabs\">\n <button class=\"qrcg-tab-btn qrcg-active\" data-type=\"text\">Plain Text<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"url\">Website URL<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"email\">Email<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"phone\">Phone<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"sms\">SMS<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"wifi\">WiFi Config<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"vcard\">vCard Contact<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"location\">Location<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"social\">Social Media<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"crypto\">Crypto\/UPI<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"calendar\">Calendar<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"batch\">Batch CSV<\/button>\n <\/div>\n\n <div id=\"qrcg-input-fields\">\n <div class=\"qrcg-form-group qrcg-field-group\" id=\"qrcg-field-text\">\n <label>Plain Text \/ Custom Content<\/label>\n <textarea class=\"qrcg-textarea\" id=\"qrcg-text-val\" rows=\"3\" placeholder=\"Enter standard alphanumeric copy or custom raw data to parse...\">Dynamic QR Engine Pro<\/textarea>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-url\">\n <label>Website Destination URL<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-url-val\" placeholder=\"https:\/\/example.com\" value=\"https:\/\/example.com\">\n <div class=\"qrcg-error-feedback\">Please enter a valid URL.<\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-email\">\n <div class=\"qrcg-form-group\">\n <label>Recipient Email Address<\/label>\n <input type=\"email\" class=\"qrcg-input\" id=\"qrcg-email-to\" placeholder=\"recipient@domain.com\" value=\"recipient@domain.com\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Default Email Subject<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-email-sub\" placeholder=\"Inquiry from QR Code\" value=\"Inquiry from QR Code\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-phone\">\n <label>Target Phone Number<\/label>\n <input type=\"tel\" class=\"qrcg-input\" id=\"qrcg-phone-num\" placeholder=\"+15550199\" value=\"+15550199\">\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-sms\">\n <div class=\"qrcg-form-group\">\n <label>Target Phone Number<\/label>\n <input type=\"tel\" class=\"qrcg-input\" id=\"qrcg-sms-num\" placeholder=\"+15550199\" value=\"+15550199\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>SMS Body Message<\/label>\n <textarea class=\"qrcg-textarea\" id=\"qrcg-sms-body\" rows=\"2\" placeholder=\"Send via SMS...\">Hello!<\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-wifi\">\n <div class=\"qrcg-form-group\">\n <label>SSID Access Point Name<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-wifi-ssid\" placeholder=\"HomeNetwork\" value=\"HomeNetwork\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>SSID Password<\/label>\n <input type=\"password\" class=\"qrcg-input\" id=\"qrcg-wifi-pass\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" value=\"password123\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Network Cipher Security Mode<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-wifi-cipher\">\n <option value=\"WPA\">WPA\/WPA2<\/option>\n <option value=\"WEP\">WEP Legacy<\/option>\n <option value=\"nopass\">No Cipher (Open)<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-vcard\">\n <div class=\"qrcg-form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-vcard-name\" placeholder=\"John Doe\" value=\"John Doe\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Phone Number<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-vcard-phone\" placeholder=\"+15550199\" value=\"+15550199\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Email<\/label>\n <input type=\"email\" class=\"qrcg-input\" id=\"qrcg-vcard-email\" placeholder=\"john@example.com\" value=\"john@example.com\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Company\/Organization<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-vcard-company\" placeholder=\"Acme Corp\" value=\"Acme Corp\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-location\">\n <div class=\"qrcg-form-group\">\n <label>Latitude Coordinate<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-loc-lat\" placeholder=\"37.7749\" value=\"37.7749\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Longitude Coordinate<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-loc-lng\" placeholder=\"-122.4194\" value=\"-122.4194\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-social\">\n <div class=\"qrcg-form-group\">\n <label>Platform Target<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-social-platform\">\n <option value=\"wa\">WhatsApp Direct Chat<\/option>\n <option value=\"yt\">YouTube Channel \/ Video<\/option>\n <option value=\"fb\">Facebook Profile \/ Page<\/option>\n <option value=\"insta\">Instagram Handle<\/option>\n <option value=\"x\">X (Twitter)<\/option>\n <option value=\"tg\">Telegram Username<\/option>\n <option value=\"li\">LinkedIn Profile URL<\/option>\n <option value=\"dc\">Discord Invite URL<\/option>\n <\/select>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Profile Link \/ Username \/ Parameter<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-social-val\" placeholder=\"Username, invite code, or phone number\" value=\"my_social_brand\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-crypto\">\n <div class=\"qrcg-form-group\">\n <label>Payment \/ Wallet Type<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-crypto-type\">\n <option value=\"upi\">UPI Payment Interface<\/option>\n <option value=\"btc\">Bitcoin Wallet<\/option>\n <option value=\"paypal\">PayPal Billing Link<\/option>\n <\/select>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Account \/ Wallet Identifier Address<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-crypto-val\" placeholder=\"payment@upi, btc_address, or user ID\" value=\"brand@upi\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-calendar\">\n <div class=\"qrcg-form-group\">\n <label>Event Title<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-cal-title\" placeholder=\"Meeting with Client\" value=\"Meeting with Client\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Start DateTime<\/label>\n <input type=\"datetime-local\" class=\"qrcg-input\" id=\"qrcg-cal-start\" value=\"2026-10-21T09:00\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>End DateTime<\/label>\n <input type=\"datetime-local\" class=\"qrcg-input\" id=\"qrcg-cal-end\" value=\"2026-10-21T10:00\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-batch\">\n <label>Upload Comma Separated CSV List File<\/label>\n <input type=\"file\" class=\"qrcg-input\" id=\"qrcg-batch-file\" accept=\".csv\">\n <p style=\"font-size:0.75rem; color:var(--qrcg-text-muted); margin:0.25rem 0 0 0;\">Upload a CSV with lines representing each separate item payload.<\/p>\n <div class=\"qrcg-batch-preview-container qrcg-hidden\" id=\"qrcg-batch-preview\"><\/div>\n <\/div>\n <\/div>\n\n <div style=\"margin-top: 1rem; display: flex; gap: 0.5rem;\">\n <button class=\"qrcg-btn\" id=\"qrcg-btn-generate\" style=\"width: 100%;\">\u26a1 Force Generate QR Code<\/button>\n <\/div>\n\n <div class=\"qrcg-accordion qrcg-open\" id=\"qrcg-acc-design\">\n <div class=\"qrcg-accordion-header\">\n <span>1. Design & Color Parameters<\/span>\n <span>\u25bc<\/span>\n <\/div>\n <div class=\"qrcg-accordion-body\">\n <div class=\"qrcg-customize-grid\">\n <div class=\"qrcg-form-group\">\n <label>Module Design<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-style-dots\">\n <option value=\"square\">Square Blocks<\/option>\n <option value=\"dots\">Circular Dots<\/option>\n <option value=\"rounded\">Rounded Paths<\/option>\n <option value=\"extra-rounded\">Extra Rounded<\/option>\n <option value=\"classy\">Classy Paths<\/option>\n <option value=\"classy-rounded\">Classy Rounded<\/option>\n <\/select>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Corner Ring Style<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-style-eye-ring\">\n <option value=\"square\">Square<\/option>\n <option value=\"dot\">Circular Ring<\/option>\n <option value=\"rounded\">Rounded<\/option>\n <\/select>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Corner Eye Ball<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-style-eye-ball\">\n <option value=\"square\">Square<\/option>\n <option value=\"dot\">Circle<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <hr style=\"border:0; border-top:1px solid var(--qrcg-border); margin:1.25rem 0;\">\n\n <div style=\"display:flex; flex-direction:column; gap:1rem;\">\n <div style=\"display:flex; justify-content:space-between; align-items:center;\">\n <label style=\"font-weight:700; font-size:0.875rem;\">Gradient Foreground<\/label>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-rand-colors\" style=\"padding:4px 8px; font-size:0.75rem;\">\ud83c\udfb2 Randomize<\/button>\n <\/div>\n \n <div class=\"qrcg-customize-grid\">\n <div class=\"qrcg-form-group\">\n <label>Foreground Color 1<\/label>\n <div class=\"qrcg-color-row\">\n <input type=\"color\" class=\"qrcg-color-input\" id=\"qrcg-color-fg1\" value=\"#3b82f6\">\n <span style=\"font-family:monospace; font-size:0.8125rem;\">#3b82f6<\/span>\n <\/div>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Foreground Color 2<\/label>\n <div class=\"qrcg-color-row\">\n <input type=\"color\" class=\"qrcg-color-input\" id=\"qrcg-color-fg2\" value=\"#4f46e5\">\n <span style=\"font-family:monospace; font-size:0.8125rem;\">#4f46e5<\/span>\n <\/div>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Background Color<\/label>\n <div class=\"qrcg-color-row\">\n <input type=\"color\" class=\"qrcg-color-input\" id=\"qrcg-color-bg\" value=\"#ffffff\">\n <span style=\"font-family:monospace; font-size:0.8125rem;\">#ffffff<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-accordion\" id=\"qrcg-acc-layout\">\n <div class=\"qrcg-accordion-header\">\n <span>2. Layout & Margins Controls<\/span>\n <span>\u25bc<\/span>\n <\/div>\n <div class=\"qrcg-accordion-body\">\n <div style=\"display:flex; flex-direction:column; gap:1.25rem;\">\n <div class=\"qrcg-form-group\">\n <label>QR Code Resolution Canvas Size<\/label>\n <div class=\"qrcg-range-container\">\n <input type=\"range\" class=\"qrcg-range-slider\" id=\"qrcg-range-size\" min=\"200\" max=\"1000\" step=\"50\" value=\"400\">\n <span class=\"qrcg-range-val\" id=\"qrcg-val-size\">400px<\/span>\n <\/div>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Quiet Zone Margin Padding<\/label>\n <div class=\"qrcg-range-container\">\n <input type=\"range\" class=\"qrcg-range-slider\" id=\"qrcg-range-margin\" min=\"0\" max=\"40\" step=\"5\" value=\"15\">\n <span class=\"qrcg-range-val\" id=\"qrcg-val-margin\">15px<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-accordion\" id=\"qrcg-acc-branding\">\n <div class=\"qrcg-accordion-header\">\n <span>3. Corporate Branding Logo Overlay<\/span>\n <span>\u25bc<\/span>\n <\/div>\n <div class=\"qrcg-accordion-body\">\n <div style=\"display:flex; flex-direction:column; gap:1.25rem;\">\n <div class=\"qrcg-form-group\">\n <label>Upload Center Image Logo<\/label>\n <input type=\"file\" class=\"qrcg-input\" id=\"qrcg-logo-file\" accept=\"image\/*\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Logo Scaled Size Ratio<\/label>\n <div class=\"qrcg-range-container\">\n <input type=\"range\" class=\"qrcg-range-slider\" id=\"qrcg-range-logo-scale\" min=\"0.05\" max=\"0.4\" step=\"0.05\" value=\"0.15\">\n <span class=\"qrcg-range-val\" id=\"qrcg-val-logo-scale\">15%<\/span>\n <\/div>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Logo Margin Space Offset<\/label>\n <div class=\"qrcg-range-container\">\n <input type=\"range\" class=\"qrcg-range-slider\" id=\"qrcg-range-logo-margin\" min=\"0\" max=\"20\" step=\"1\" value=\"5\">\n <span class=\"qrcg-range-val\" id=\"qrcg-val-logo-margin\">5px<\/span>\n <\/div>\n <\/div>\n <button class=\"qrcg-tool-btn qrcg-hidden\" id=\"qrcg-btn-clear-logo\" style=\"background:#fee2e2; color:#ef4444; border:1px solid #fecaca; margin-top:0.5rem; justify-content:center; width:100%;\">\u274c Strip Center Image<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <aside class=\"qrcg-preview-panel\">\n <div class=\"qrcg-card\" style=\"width:100%; display:flex; flex-direction:column; align-items:center; gap:1.5rem;\">\n <div class=\"qrcg-preview-box\" id=\"qrcg-preview-wrapper\">\n <div id=\"qrcg-rendered-output\"><\/div>\n <\/div>\n\n <div class=\"qrcg-preview-toolbar\">\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-preview-dark\">\ud83c\udf19 Dark Mode Canvas<\/button>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-copy-qr\">\ud83d\udccb Copy Image<\/button>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-copy-data\">\ud83d\udd17 Copy Data<\/button>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-reset\">\ud83d\udd04 Reset Config<\/button>\n <\/div>\n\n <div class=\"qrcg-download-group\">\n <button class=\"qrcg-btn\" id=\"qrcg-btn-dl-png\">Save PNG<\/button>\n <button class=\"qrcg-btn qrcg-btn-outline\" id=\"qrcg-btn-dl-jpg\">Save JPG<\/button>\n <button class=\"qrcg-btn qrcg-btn-outline\" id=\"qrcg-btn-dl-svg\">Save SVG<\/button>\n <button class=\"qrcg-btn\" id=\"qrcg-btn-dl-pdf\" style=\"grid-column: span 2;\">Save Document PDF<\/button>\n <\/div>\n\n <hr style=\"border:0; border-top:1px solid var(--qrcg-border); width:100%; margin:0;\">\n\n <div style=\"width:100%;\">\n <h4 style=\"margin:0 0 0.5rem 0; font-size:0.875rem; font-weight:800;\">Realtime QR Metrics<\/h4>\n <table class=\"qrcg-details-table\">\n <tr>\n <td>Interactive Type<\/td>\n <td id=\"qrcg-meta-type\">Plain Text<\/td>\n <\/tr>\n <tr>\n <td>Canvas Resolution<\/td>\n <td id=\"qrcg-meta-res\">400 x 400 px<\/td>\n <\/tr>\n <tr>\n <td>Timestamp Created<\/td>\n <td id=\"qrcg-meta-time\">–:– —<\/td>\n <\/tr>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-card\" style=\"width:100%; margin-top:1.5rem;\">\n <div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;\">\n <h3 style=\"margin:0; font-size:1.125rem; font-weight:800;\">Activity History Log<\/h3>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-history-clear\" style=\"font-size:0.75rem;\">Clear Logs<\/button>\n <\/div>\n <div class=\"qrcg-history-wrap\" id=\"qrcg-history-list\"><\/div>\n <\/div>\n <\/aside>\n <\/div>\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n \/\/ Global application configuration settings\n const qrcgApp = {\n activeType: 'text',\n logoDataUrl: null,\n qrGenerator: null,\n isDarkPreview: false,\n history: [],\n maxHistory: 5\n };\n\n \/\/ Safely load and reference the library with direct local\/module window fallback hooks\n function getQRCodeStylingLibrary() {\n if (typeof window.QRCodeStyling !== 'undefined') {\n return window.QRCodeStyling;\n }\n if (typeof QRCodeStyling !== 'undefined') {\n return QRCodeStyling;\n }\n return null;\n }\n\n document.addEventListener(\"DOMContentLoaded\", () => {\n qrcgInitAccordions();\n qrcgInitTabs();\n qrcgInitSettings();\n qrcgRestoreHistory();\n \n \/\/ Initial setup and trigger build\n qrcgRenderQRCode();\n });\n\n function qrcgInitAccordions() {\n document.querySelectorAll('.qrcg-accordion-header').forEach(header => {\n header.addEventListener('click', () => {\n const parent = header.parentElement;\n parent.classList.toggle('qrcg-open');\n });\n });\n }\n\n function qrcgInitTabs() {\n const tabContainer = document.getElementById('qrcg-type-tabs');\n tabContainer.querySelectorAll('.qrcg-tab-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n tabContainer.querySelectorAll('.qrcg-tab-btn').forEach(b => b.classList.remove('qrcg-active'));\n btn.classList.add('qrcg-active');\n \n const type = btn.getAttribute('data-type');\n qrcgApp.activeType = type;\n \n \/\/ Switch dynamic visible input field\n document.querySelectorAll('.qrcg-field-group').forEach(group => {\n group.classList.add('qrcg-hidden');\n });\n \n const targetField = document.getElementById(`qrcg-field-${type}`);\n if (targetField) {\n targetField.classList.remove('qrcg-hidden');\n }\n \n qrcgRenderQRCode();\n });\n });\n }\n\n \/\/ Capture dynamic inputs value structures \n function qrcgGetPayload() {\n const type = qrcgApp.activeType;\n let data = '';\n\n if (type === 'text') {\n data = document.getElementById('qrcg-text-val').value || 'Dynamic QR Engine Pro';\n } \n else if (type === 'url') {\n data = document.getElementById('qrcg-url-val').value || 'https:\/\/example.com';\n } \n else if (type === 'email') {\n const to = document.getElementById('qrcg-email-to').value || '';\n const sub = document.getElementById('qrcg-email-sub').value || '';\n data = `mailto:${to}?subject=${encodeURIComponent(sub)}`;\n } \n else if (type === 'phone') {\n const num = document.getElementById('qrcg-phone-num').value || '';\n data = `tel:${num}`;\n } \n else if (type === 'sms') {\n const num = document.getElementById('qrcg-sms-num').value || '';\n const body = document.getElementById('qrcg-sms-body').value || '';\n data = `sms:${num}?body=${encodeURIComponent(body)}`;\n }\n else if (type === 'wifi') {\n const ssid = document.getElementById('qrcg-wifi-ssid').value || '';\n const pass = document.getElementById('qrcg-wifi-pass').value || '';\n const cipher = document.getElementById('qrcg-wifi-cipher').value || 'WPA';\n data = `WIFI:S:${ssid};T:${cipher};P:${pass};;`;\n } \n else if (type === 'vcard') {\n const name = document.getElementById('qrcg-vcard-name').value || '';\n const phone = document.getElementById('qrcg-vcard-phone').value || '';\n const email = document.getElementById('qrcg-vcard-email').value || '';\n const comp = document.getElementById('qrcg-vcard-company').value || '';\n data = `BEGIN:VCARD\\nVERSION:3.0\\nN:${name}\\nTEL:${phone}\\nEMAIL:${email}\\nORG:${comp}\\nEND:VCARD`;\n }\n else if (type === 'location') {\n const lat = document.getElementById('qrcg-loc-lat').value || '37.7749';\n const lng = document.getElementById('qrcg-loc-lng').value || '-122.4194';\n data = `geo:${lat},${lng}`;\n }\n else if (type === 'social') {\n const socType = document.getElementById('qrcg-social-platform').value;\n const val = document.getElementById('qrcg-social-val').value || '';\n \n if (socType === 'wa') data = `https:\/\/wa.me\/${val}`;\n else if (socType === 'yt') data = `https:\/\/youtube.com\/${val}`;\n else if (socType === 'fb') data = `https:\/\/facebook.com\/${val}`;\n else if (socType === 'insta') data = `https:\/\/instagram.com\/${val}`;\n else if (socType === 'x') data = `https:\/\/x.com\/${val}`;\n else if (socType === 'tg') data = `https:\/\/t.me\/${val}`;\n else if (socType === 'li') data = `https:\/\/linkedin.com\/in\/${val}`;\n else if (socType === 'dc') data = `https:\/\/discord.gg\/${val}`;\n } \n else if (type === 'crypto') {\n const cryType = document.getElementById('qrcg-crypto-type').value;\n const val = document.getElementById('qrcg-crypto-val').value || '';\n \n if (cryType === 'upi') data = `upi:\/\/pay?pa=${val}&pn=Recipient`;\n else if (cryType === 'btc') data = `bitcoin:${val}`;\n else data = `https:\/\/paypal.me\/${val}`;\n } \n else if (type === 'calendar') {\n const title = document.getElementById('qrcg-cal-title').value || '';\n const start = document.getElementById('qrcg-cal-start').value || '';\n const end = document.getElementById('qrcg-cal-end').value || '';\n const formatCalDate = (dt) => {\n if (!dt) return '';\n return dt.replace(\/[-:]\/g, '') + '00Z';\n };\n data = `BEGIN:VEVENT\\nSUMMARY:${title}\\nDTSTART:${formatCalDate(start)}\\nDTEND:${formatCalDate(end)}\\nEND:VEVENT`;\n } \n else if (type === 'batch') {\n const activeRow = document.querySelector('.qrcg-batch-row');\n data = activeRow ? activeRow.lastElementChild.innerText : 'Batch Mode Ready';\n }\n\n return data;\n }\n\n function qrcgRenderQRCode() {\n const payload = qrcgGetPayload();\n const size = parseInt(document.getElementById('qrcg-range-size').value) || 400;\n const margin = parseInt(document.getElementById('qrcg-range-margin').value) || 15;\n \n const fg1 = document.getElementById('qrcg-color-fg1').value;\n const fg2 = document.getElementById('qrcg-color-fg2').value;\n const bg = document.getElementById('qrcg-color-bg').value;\n\n const dotsStyle = document.getElementById('qrcg-style-dots').value;\n const eyeRingStyle = document.getElementById('qrcg-style-eye-ring').value;\n const eyeBallStyle = document.getElementById('qrcg-style-eye-ball').value;\n\n const logoScale = parseFloat(document.getElementById('qrcg-range-logo-scale').value) || 0.15;\n const logoMargin = parseInt(document.getElementById('qrcg-range-logo-margin').value) || 5;\n\n const Lib = getQRCodeStylingLibrary();\n if (!Lib) {\n console.error(\"Critical: QR Code Styling script execution block failed. Native libraries missing.\");\n return;\n }\n\n const options = {\n width: size,\n height: size,\n type: \"canvas\",\n data: payload,\n margin: margin,\n qrOptions: {\n typeNumber: 0,\n mode: \"Byte\",\n errorCorrectionLevel: \"Q\"\n },\n imageOptions: {\n hideBackgroundDots: true,\n imageSize: logoScale,\n margin: logoMargin,\n crossOrigin: \"anonymous\"\n },\n dotsOptions: {\n color: fg1,\n type: dotsStyle,\n gradient: {\n type: \"linear\",\n rotation: 45,\n colorStops: [\n { offset: 0, color: fg1 },\n { offset: 1, color: fg2 }\n ]\n }\n },\n backgroundOptions: {\n color: bg\n },\n cornersSquareOptions: {\n color: fg1,\n type: eyeRingStyle\n },\n cornersDotOptions: {\n color: fg2,\n type: eyeBallStyle\n },\n image: qrcgApp.logoDataUrl || \"\"\n };\n\n const canvasContainer = document.getElementById('qrcg-rendered-output');\n\n \/\/ Check if QR Engine instance is alive - execute .update() or complete clear and instantiate append\n if (qrcgApp.qrGenerator) {\n canvasContainer.innerHTML = ''; \n qrcgApp.qrGenerator = new Lib(options);\n qrcgApp.qrGenerator.append(canvasContainer);\n } else {\n canvasContainer.innerHTML = '';\n qrcgApp.qrGenerator = new Lib(options);\n qrcgApp.qrGenerator.append(canvasContainer);\n }\n\n \/\/ Metrics output updates\n document.getElementById('qrcg-meta-type').innerText = qrcgApp.activeType.toUpperCase();\n document.getElementById('qrcg-meta-res').innerText = `${size} x ${size} px`;\n document.getElementById('qrcg-meta-time').innerText = new Date().toLocaleTimeString();\n\n qrcgAddHistory(payload);\n }\n\n function qrcgInitSettings() {\n \/\/ Event Binding setup\n document.getElementById('qrcg-btn-generate').addEventListener('click', () => {\n qrcgRenderQRCode();\n });\n\n \/\/ Track user dynamic slider movements\n document.getElementById('qrcg-range-size').addEventListener('input', (e) => {\n document.getElementById('qrcg-val-size').innerText = `${e.target.value}px`;\n qrcgRenderQRCode();\n });\n\n document.getElementById('qrcg-range-margin').addEventListener('input', (e) => {\n document.getElementById('qrcg-val-margin').innerText = `${e.target.value}px`;\n qrcgRenderQRCode();\n });\n\n document.getElementById('qrcg-range-logo-scale').addEventListener('input', (e) => {\n document.getElementById('qrcg-val-logo-scale').innerText = `${Math.round(e.target.value * 100)}%`;\n qrcgRenderQRCode();\n });\n\n document.getElementById('qrcg-range-logo-margin').addEventListener('input', (e) => {\n document.getElementById('qrcg-val-logo-margin').innerText = `${e.target.value}px`;\n qrcgRenderQRCode();\n });\n\n \/\/ Setup input color mappings\n ['fg1', 'fg2', 'bg'].forEach(col => {\n const input = document.getElementById(`qrcg-color-${col}`);\n input.addEventListener('input', (e) => {\n input.nextElementSibling.innerText = e.target.value.toUpperCase();\n qrcgRenderQRCode();\n });\n });\n\n \/\/ Setup drop changes\n ['style-dots', 'style-eye-ring', 'style-eye-ball'].forEach(sel => {\n document.getElementById(`qrcg-${sel}`).addEventListener('change', () => {\n qrcgRenderQRCode();\n });\n });\n\n \/\/ Bind on all static inputs\n document.querySelectorAll('#qrcg-input-fields input, #qrcg-input-fields textarea, #qrcg-input-fields select').forEach(element => {\n element.addEventListener('input', () => qrcgRenderQRCode());\n element.addEventListener('change', () => qrcgRenderQRCode());\n });\n\n \/\/ Dark-mode interface setup\n document.getElementById('qrcg-btn-preview-dark').addEventListener('click', () => {\n const box = document.getElementById('qrcg-preview-wrapper');\n qrcgApp.isDarkPreview = !qrcgApp.isDarkPreview;\n if (qrcgApp.isDarkPreview) {\n box.classList.add('qrcg-dark-mode');\n document.getElementById('qrcg-btn-preview-dark').innerText = '\u2600\ufe0f Light Mode Canvas';\n } else {\n box.classList.remove('qrcg-dark-mode');\n document.getElementById('qrcg-btn-preview-dark').innerText = '\ud83c\udf19 Dark Mode Canvas';\n }\n });\n\n \/\/ Dynamic randomizer palette logic\n document.getElementById('qrcg-btn-rand-colors').addEventListener('click', () => {\n const hexRandom = () => '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');\n const c1 = hexRandom();\n const c2 = hexRandom();\n \n document.getElementById('qrcg-color-fg1').value = c1;\n document.getElementById('qrcg-color-fg1').nextElementSibling.innerText = c1.toUpperCase();\n document.getElementById('qrcg-color-fg2').value = c2;\n document.getElementById('qrcg-color-fg2').nextElementSibling.innerText = c2.toUpperCase();\n qrcgRenderQRCode();\n });\n\n \/\/ Logo Upload Engine\n document.getElementById('qrcg-logo-file').addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (event) => {\n qrcgApp.logoDataUrl = event.target.result;\n document.getElementById('qrcg-btn-clear-logo').classList.remove('qrcg-hidden');\n qrcgRenderQRCode();\n };\n reader.readAsDataURL(file);\n }\n });\n\n document.getElementById('qrcg-btn-clear-logo').addEventListener('click', () => {\n qrcgApp.logoDataUrl = null;\n document.getElementById('qrcg-logo-file').value = '';\n document.getElementById('qrcg-btn-clear-logo').classList.add('qrcg-hidden');\n qrcgRenderQRCode();\n });\n\n \/\/ Document exports\n document.getElementById('qrcg-btn-dl-png').addEventListener('click', () => qrcgDownload('png'));\n document.getElementById('qrcg-btn-dl-jpg').addEventListener('click', () => qrcgDownload('jpeg'));\n document.getElementById('qrcg-btn-dl-svg').addEventListener('click', () => qrcgDownload('svg'));\n document.getElementById('qrcg-btn-dl-pdf').addEventListener('click', () => qrcgDownload('pdf'));\n\n \/\/ Reset Settings\n document.getElementById('qrcg-btn-reset').addEventListener('click', () => {\n location.reload();\n });\n\n \/\/ Copy QR Canvas logic\n document.getElementById('qrcg-btn-copy-qr').addEventListener('click', () => {\n const canvas = document.querySelector('#qrcg-rendered-output canvas');\n if (canvas) {\n try {\n canvas.toBlob(blob => {\n const item = new ClipboardItem({ \"image\/png\": blob });\n navigator.clipboard.write([item]).then(() => {\n alert(\"QR Code copied as an Image successfully!\");\n });\n }, 'image\/png');\n } catch(e) {\n alert(\"This browser doesn't support writing image data directly to the clipboard.\");\n }\n } else {\n alert(\"QR Code canvas is not populated.\");\n }\n });\n\n \/\/ Copy plain raw data logic\n document.getElementById('qrcg-btn-copy-data').addEventListener('click', () => {\n const payload = qrcgGetPayload();\n navigator.clipboard.writeText(payload).then(() => {\n alert(\"QR Data content copied to clipboard!\");\n });\n });\n\n \/\/ Log actions clean logic\n document.getElementById('qrcg-history-clear').addEventListener('click', () => {\n qrcgApp.history = [];\n localStorage.removeItem('qrcg_history');\n qrcgUpdateHistoryView();\n });\n\n \/\/ CSV Parser implementation\n document.getElementById('qrcg-batch-file').addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (event) => {\n const lines = event.target.result.split(\/\\r?\\n\/).filter(line => line.trim() !== '');\n const preview = document.getElementById('qrcg-batch-preview');\n preview.innerHTML = '';\n preview.classList.remove('qrcg-hidden');\n lines.forEach((line, idx) => {\n const row = document.createElement('div');\n row.className = 'qrcg-batch-row';\n row.innerHTML = `<span>#${idx+1}:<\/span> <span>${line}<\/span>`;\n preview.appendChild(row);\n });\n if (lines.length > 0) {\n qrcgRenderQRCode();\n }\n };\n reader.readAsText(file);\n }\n });\n }\n\n function qrcgDownload(format) {\n if (!qrcgApp.qrGenerator) return;\n if (format === 'pdf') {\n const canvas = document.querySelector('#qrcg-rendered-output canvas');\n if (canvas) {\n const imgData = canvas.toDataURL('image\/png');\n const { jsPDF } = window.jspdf;\n const pdf = new jsPDF('p', 'mm', 'a4');\n pdf.setFontSize(16);\n pdf.text(\"Exported Premium QR Code\", 20, 25);\n pdf.setFontSize(10);\n pdf.text(`Payload Type: ${qrcgApp.activeType.toUpperCase()}`, 20, 32);\n pdf.text(`Date Generated: ${new Date().toLocaleString()}`, 20, 38);\n pdf.addImage(imgData, 'PNG', 20, 48, 150, 150);\n pdf.save(`qrcg_document_${Date.now()}.pdf`);\n }\n } else {\n qrcgApp.qrGenerator.download({\n name: `qrcg_export_${Date.now()}`,\n extension: format\n });\n }\n }\n\n function qrcgAddHistory(payload) {\n if (!payload || payload === 'Dynamic QR Engine Pro') return;\n if (qrcgApp.history.includes(payload)) return;\n\n qrcgApp.history.unshift(payload);\n if (qrcgApp.history.length > qrcgApp.maxHistory) {\n qrcgApp.history.pop();\n }\n\n localStorage.setItem('qrcg_history', JSON.stringify(qrcgApp.history));\n qrcgUpdateHistoryView();\n }\n\n function qrcgRestoreHistory() {\n const raw = localStorage.getItem('qrcg_history');\n if (raw) {\n qrcgApp.history = JSON.parse(raw);\n qrcgUpdateHistoryView();\n }\n }\n\n function qrcgUpdateHistoryView() {\n const wrap = document.getElementById('qrcg-history-list');\n if (!wrap) return;\n wrap.innerHTML = '';\n if (qrcgApp.history.length === 0) {\n wrap.innerHTML = `<span style=\"font-size:0.75rem; color:var(--qrcg-text-muted);\">No recorded active conversions yet.<\/span>`;\n return;\n }\n\n qrcgApp.history.forEach((hist, index) => {\n const el = document.createElement('div');\n el.className = 'qrcg-history-item';\n el.innerHTML = `\n <div class=\"qrcg-history-text\">${hist}<\/div>\n <div class=\"qrcg-history-actions\">\n <button class=\"qrcg-tool-btn\" data-index=\"${index}\" style=\"padding:2px 6px; font-size:0.75rem;\">Reuse<\/button>\n <\/div>\n `;\n\n el.querySelector('button').addEventListener('click', () => {\n const targetText = qrcgApp.history[index];\n document.getElementById('qrcg-text-val').value = targetText;\n const tabFirst = document.getElementById('qrcg-type-tabs').firstElementChild;\n if (tabFirst) {\n tabFirst.click();\n }\n });\n\n wrap.appendChild(el);\n });\n }\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Create custom QR codes for URLs, text, email and more. Dynamic QR Engine Pro Dynamic QR Engine Pro Draft vector-scannable, high-fidelity custom QR payloads instantly. Plain Text Website URL Email Phone SMS WiFi Config vCard Contact Location Social Media Crypto\/UPI Calendar Batch CSV Plain Text \/ Custom Content Dynamic QR Engine Pro Website Destination URL […]<\/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-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":9,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":517,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions\/517"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":61,"date":"2026-07-01T13:35:24","date_gmt":"2026-07-01T13:35:24","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=61"},"modified":"2026-07-16T17:15:36","modified_gmt":"2026-07-16T17:15:36","slug":"qr-code-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/qr-code-generator\/","title":{"rendered":"QR Code Generator"},"content":{"rendered":"\n

Create custom QR codes for URLs, text, email and more.<\/p>\n\n\n\n\n\n\n \n \n Dynamic QR Engine Pro<\/title>\n <script src=\"https:\/\/unpkg.com\/qr-code-styling@1.5.0\/lib\/qr-code-styling.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <style>\n :root {\n --qrcg-primary: #3b82f6;\n --qrcg-primary-hover: #2563eb;\n --qrcg-secondary: #4f46e5;\n --qrcg-bg-main: #f8fafc;\n --qrcg-bg-card: rgba(255, 255, 255, 0.9);\n --qrcg-text-dark: #0f172a;\n --qrcg-text-muted: #475569;\n --qrcg-border: #e2e8f0;\n --qrcg-radius: 16px;\n --qrcg-radius-sm: 8px;\n --qrcg-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);\n --qrcg-transition: all 0.2s ease-in-out;\n }\n\n .qrcg-body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background-color: var(--qrcg-bg-main);\n color: var(--qrcg-text-dark);\n margin: 0;\n padding: 0;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n box-sizing: border-box;\n }\n\n .qrcg-app-container {\n width: 100%;\n max-width: 1400px;\n padding: 2rem 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n box-sizing: border-box;\n }\n\n \/* HEADER *\/\n .qrcg-header {\n text-align: center;\n margin-bottom: 1rem;\n }\n\n .qrcg-header h1 {\n font-size: 2.5rem;\n font-weight: 800;\n letter-spacing: -0.05em;\n background: linear-gradient(135deg, var(--qrcg-primary) 0%, var(--qrcg-secondary) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin: 0 0 0.5rem 0;\n }\n\n .qrcg-header p {\n font-size: 1rem;\n color: var(--qrcg-text-muted);\n margin: 0;\n }\n\n \/* GRID SYSTEM *\/\n .qrcg-main-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n\n @media (min-width: 1024px) {\n .qrcg-main-grid {\n grid-template-columns: 1.2fr 0.8fr;\n }\n }\n\n \/* GLASS CARDS *\/\n .qrcg-card {\n background: var(--qrcg-bg-card);\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: var(--qrcg-radius);\n box-shadow: var(--qrcg-shadow);\n padding: 1.75rem;\n box-sizing: border-box;\n }\n\n \/* TAB BAR *\/\n .qrcg-tab-nav {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n background: #f1f5f9;\n padding: 0.5rem;\n border-radius: 12px;\n margin-bottom: 1.5rem;\n }\n\n .qrcg-tab-btn {\n background: transparent;\n border: none;\n color: var(--qrcg-text-muted);\n padding: 0.5rem 1rem;\n border-radius: 8px;\n font-weight: 600;\n font-size: 0.875rem;\n cursor: pointer;\n transition: var(--qrcg-transition);\n white-space: nowrap;\n }\n\n .qrcg-tab-btn.qrcg-active {\n background: #ffffff;\n color: var(--qrcg-primary);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n }\n\n \/* FORM COMPONENT LAYOUT *\/\n .qrcg-form-group {\n margin-bottom: 1.25rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .qrcg-form-group label {\n font-weight: 700;\n font-size: 0.875rem;\n color: var(--qrcg-text-dark);\n }\n\n .qrcg-input, .qrcg-select, .qrcg-textarea {\n width: 100%;\n padding: 0.75rem 1rem;\n border: 1.5px solid var(--qrcg-border);\n border-radius: var(--qrcg-radius-sm);\n font-size: 0.9375rem;\n background-color: #ffffff;\n color: var(--qrcg-text-dark);\n outline: none;\n transition: var(--qrcg-transition);\n box-sizing: border-box;\n }\n\n .qrcg-input:focus, .qrcg-select:focus, .qrcg-textarea:focus {\n border-color: var(--qrcg-primary);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n }\n\n \/* ACCORDION PANELS *\/\n .qrcg-accordion {\n border: 1px solid var(--qrcg-border);\n border-radius: var(--qrcg-radius-sm);\n margin-top: 1rem;\n overflow: hidden;\n }\n\n .qrcg-accordion-header {\n background: #f8fafc;\n padding: 1rem;\n font-weight: 700;\n font-size: 0.9375rem;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n user-select: none;\n }\n\n .qrcg-accordion-body {\n padding: 1.25rem;\n background: #ffffff;\n display: none;\n border-top: 1px solid var(--qrcg-border);\n }\n\n .qrcg-accordion.qrcg-open .qrcg-accordion-body {\n display: block;\n }\n\n \/* GRID COLS *\/\n .qrcg-customize-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 1rem;\n }\n\n \/* RANGE CONTROLLER SLIDER *\/\n .qrcg-range-container {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .qrcg-range-slider {\n flex: 1;\n accent-color: var(--qrcg-primary);\n }\n\n .qrcg-range-val {\n font-weight: 600;\n font-size: 0.875rem;\n min-width: 45px;\n text-align: right;\n }\n\n \/* COLOR PICKER MATRIX *\/\n .qrcg-color-row {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n }\n\n .qrcg-color-input {\n width: 40px;\n height: 40px;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n padding: 0;\n background: none;\n }\n\n \/* PREVIEW CANVAS CONTAINER *\/\n .qrcg-preview-box {\n position: relative;\n background: #ffffff;\n border: 2px dashed var(--qrcg-border);\n border-radius: var(--qrcg-radius);\n padding: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);\n width: 100%;\n max-width: 340px;\n aspect-ratio: 1;\n box-sizing: border-box;\n transition: var(--qrcg-transition);\n }\n\n .qrcg-preview-box.qrcg-dark-mode {\n background: #0f172a;\n border-color: #334155;\n }\n\n #qrcg-rendered-output {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #qrcg-rendered-output canvas {\n max-width: 100% !important;\n max-height: 100% !important;\n height: auto !important;\n width: auto !important;\n }\n\n \/* ACTION BAR UNDER PREVIEW *\/\n .qrcg-preview-toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n width: 100%;\n justify-content: center;\n }\n\n .qrcg-tool-btn {\n background: #f1f5f9;\n border: none;\n color: var(--qrcg-text-muted);\n padding: 0.5rem 0.8rem;\n border-radius: var(--qrcg-radius-sm);\n cursor: pointer;\n font-size: 0.875rem;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n transition: var(--qrcg-transition);\n }\n\n .qrcg-tool-btn:hover {\n background: #e2e8f0;\n color: var(--qrcg-text-dark);\n }\n\n \/* DOWNLOAD MATRIX BUTTONS *\/\n .qrcg-download-group {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n }\n\n .qrcg-btn {\n background: linear-gradient(135deg, var(--qrcg-primary) 0%, var(--qrcg-secondary) 100%);\n border: none;\n color: #ffffff;\n font-weight: 700;\n padding: 0.75rem 1rem;\n border-radius: var(--qrcg-radius-sm);\n cursor: pointer;\n transition: var(--qrcg-transition);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n text-decoration: none;\n }\n\n .qrcg-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);\n }\n\n .qrcg-btn-outline {\n background: #ffffff;\n border: 1.5px solid var(--qrcg-border);\n color: var(--qrcg-text-dark);\n }\n\n .qrcg-btn-outline:hover {\n background: #f8fafc;\n border-color: var(--qrcg-text-dark);\n transform: none;\n box-shadow: none;\n }\n\n \/* DATA SPEC TABLE *\/\n .qrcg-details-table {\n width: 100%;\n font-size: 0.8125rem;\n border-collapse: collapse;\n margin-top: 0.5rem;\n }\n\n .qrcg-details-table td {\n padding: 0.4rem 0;\n color: var(--qrcg-text-muted);\n }\n\n .qrcg-details-table td:last-child {\n font-weight: 700;\n color: var(--qrcg-text-dark);\n text-align: right;\n }\n\n \/* HISTORY WRAP *\/\n .qrcg-history-wrap {\n margin-top: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .qrcg-history-item {\n background: #ffffff;\n border: 1px solid var(--qrcg-border);\n border-radius: var(--qrcg-radius-sm);\n padding: 0.75rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n font-size: 0.8125rem;\n }\n\n .qrcg-history-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n }\n\n .qrcg-batch-preview-container {\n max-height: 250px;\n overflow-y: auto;\n border: 1px solid var(--qrcg-border);\n border-radius: var(--qrcg-radius-sm);\n margin-top: 1rem;\n display: flex;\n flex-direction: column;\n }\n\n .qrcg-batch-row {\n padding: 0.5rem 1rem;\n font-size: 0.8125rem;\n border-bottom: 1px solid var(--qrcg-border);\n display: flex;\n justify-content: space-between;\n }\n\n .qrcg-error-feedback {\n color: #ef4444;\n font-size: 0.8125rem;\n font-weight: 600;\n display: none;\n margin-top: 0.25rem;\n }\n\n .qrcg-error .qrcg-error-feedback {\n display: block;\n }\n\n .qrcg-error input {\n border-color: #ef4444;\n }\n\n .qrcg-hidden {\n display: none !important;\n }\n <\/style>\n<\/head>\n<body class=\"qrcg-body\">\n\n<div class=\"qrcg-app-container\">\n <header class=\"qrcg-header\">\n <h1>Dynamic QR Engine Pro<\/h1>\n <p>Draft vector-scannable, high-fidelity custom QR payloads instantly.<\/p>\n <\/header>\n\n <div class=\"qrcg-main-grid\">\n <main class=\"qrcg-card\" style=\"display: flex; flex-direction: column; gap: 1rem;\">\n <div class=\"qrcg-tab-nav\" id=\"qrcg-type-tabs\">\n <button class=\"qrcg-tab-btn qrcg-active\" data-type=\"text\">Plain Text<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"url\">Website URL<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"email\">Email<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"phone\">Phone<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"sms\">SMS<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"wifi\">WiFi Config<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"vcard\">vCard Contact<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"location\">Location<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"social\">Social Media<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"crypto\">Crypto\/UPI<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"calendar\">Calendar<\/button>\n <button class=\"qrcg-tab-btn\" data-type=\"batch\">Batch CSV<\/button>\n <\/div>\n\n <div id=\"qrcg-input-fields\">\n <div class=\"qrcg-form-group qrcg-field-group\" id=\"qrcg-field-text\">\n <label>Plain Text \/ Custom Content<\/label>\n <textarea class=\"qrcg-textarea\" id=\"qrcg-text-val\" rows=\"3\" placeholder=\"Enter standard alphanumeric copy or custom raw data to parse...\">Dynamic QR Engine Pro<\/textarea>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-url\">\n <label>Website Destination URL<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-url-val\" placeholder=\"https:\/\/example.com\" value=\"https:\/\/example.com\">\n <div class=\"qrcg-error-feedback\">Please enter a valid URL.<\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-email\">\n <div class=\"qrcg-form-group\">\n <label>Recipient Email Address<\/label>\n <input type=\"email\" class=\"qrcg-input\" id=\"qrcg-email-to\" placeholder=\"recipient@domain.com\" value=\"recipient@domain.com\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Default Email Subject<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-email-sub\" placeholder=\"Inquiry from QR Code\" value=\"Inquiry from QR Code\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-phone\">\n <label>Target Phone Number<\/label>\n <input type=\"tel\" class=\"qrcg-input\" id=\"qrcg-phone-num\" placeholder=\"+15550199\" value=\"+15550199\">\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-sms\">\n <div class=\"qrcg-form-group\">\n <label>Target Phone Number<\/label>\n <input type=\"tel\" class=\"qrcg-input\" id=\"qrcg-sms-num\" placeholder=\"+15550199\" value=\"+15550199\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>SMS Body Message<\/label>\n <textarea class=\"qrcg-textarea\" id=\"qrcg-sms-body\" rows=\"2\" placeholder=\"Send via SMS...\">Hello!<\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-wifi\">\n <div class=\"qrcg-form-group\">\n <label>SSID Access Point Name<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-wifi-ssid\" placeholder=\"HomeNetwork\" value=\"HomeNetwork\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>SSID Password<\/label>\n <input type=\"password\" class=\"qrcg-input\" id=\"qrcg-wifi-pass\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" value=\"password123\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Network Cipher Security Mode<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-wifi-cipher\">\n <option value=\"WPA\">WPA\/WPA2<\/option>\n <option value=\"WEP\">WEP Legacy<\/option>\n <option value=\"nopass\">No Cipher (Open)<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-vcard\">\n <div class=\"qrcg-form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-vcard-name\" placeholder=\"John Doe\" value=\"John Doe\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Phone Number<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-vcard-phone\" placeholder=\"+15550199\" value=\"+15550199\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Email<\/label>\n <input type=\"email\" class=\"qrcg-input\" id=\"qrcg-vcard-email\" placeholder=\"john@example.com\" value=\"john@example.com\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Company\/Organization<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-vcard-company\" placeholder=\"Acme Corp\" value=\"Acme Corp\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-location\">\n <div class=\"qrcg-form-group\">\n <label>Latitude Coordinate<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-loc-lat\" placeholder=\"37.7749\" value=\"37.7749\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Longitude Coordinate<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-loc-lng\" placeholder=\"-122.4194\" value=\"-122.4194\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-social\">\n <div class=\"qrcg-form-group\">\n <label>Platform Target<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-social-platform\">\n <option value=\"wa\">WhatsApp Direct Chat<\/option>\n <option value=\"yt\">YouTube Channel \/ Video<\/option>\n <option value=\"fb\">Facebook Profile \/ Page<\/option>\n <option value=\"insta\">Instagram Handle<\/option>\n <option value=\"x\">X (Twitter)<\/option>\n <option value=\"tg\">Telegram Username<\/option>\n <option value=\"li\">LinkedIn Profile URL<\/option>\n <option value=\"dc\">Discord Invite URL<\/option>\n <\/select>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Profile Link \/ Username \/ Parameter<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-social-val\" placeholder=\"Username, invite code, or phone number\" value=\"my_social_brand\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-crypto\">\n <div class=\"qrcg-form-group\">\n <label>Payment \/ Wallet Type<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-crypto-type\">\n <option value=\"upi\">UPI Payment Interface<\/option>\n <option value=\"btc\">Bitcoin Wallet<\/option>\n <option value=\"paypal\">PayPal Billing Link<\/option>\n <\/select>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Account \/ Wallet Identifier Address<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-crypto-val\" placeholder=\"payment@upi, btc_address, or user ID\" value=\"brand@upi\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-calendar\">\n <div class=\"qrcg-form-group\">\n <label>Event Title<\/label>\n <input type=\"text\" class=\"qrcg-input\" id=\"qrcg-cal-title\" placeholder=\"Meeting with Client\" value=\"Meeting with Client\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Start DateTime<\/label>\n <input type=\"datetime-local\" class=\"qrcg-input\" id=\"qrcg-cal-start\" value=\"2026-10-21T09:00\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>End DateTime<\/label>\n <input type=\"datetime-local\" class=\"qrcg-input\" id=\"qrcg-cal-end\" value=\"2026-10-21T10:00\">\n <\/div>\n <\/div>\n\n <div class=\"qrcg-form-group qrcg-field-group qrcg-hidden\" id=\"qrcg-field-batch\">\n <label>Upload Comma Separated CSV List File<\/label>\n <input type=\"file\" class=\"qrcg-input\" id=\"qrcg-batch-file\" accept=\".csv\">\n <p style=\"font-size:0.75rem; color:var(--qrcg-text-muted); margin:0.25rem 0 0 0;\">Upload a CSV with lines representing each separate item payload.<\/p>\n <div class=\"qrcg-batch-preview-container qrcg-hidden\" id=\"qrcg-batch-preview\"><\/div>\n <\/div>\n <\/div>\n\n <div style=\"margin-top: 1rem; display: flex; gap: 0.5rem;\">\n <button class=\"qrcg-btn\" id=\"qrcg-btn-generate\" style=\"width: 100%;\">\u26a1 Force Generate QR Code<\/button>\n <\/div>\n\n <div class=\"qrcg-accordion qrcg-open\" id=\"qrcg-acc-design\">\n <div class=\"qrcg-accordion-header\">\n <span>1. Design & Color Parameters<\/span>\n <span>\u25bc<\/span>\n <\/div>\n <div class=\"qrcg-accordion-body\">\n <div class=\"qrcg-customize-grid\">\n <div class=\"qrcg-form-group\">\n <label>Module Design<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-style-dots\">\n <option value=\"square\">Square Blocks<\/option>\n <option value=\"dots\">Circular Dots<\/option>\n <option value=\"rounded\">Rounded Paths<\/option>\n <option value=\"extra-rounded\">Extra Rounded<\/option>\n <option value=\"classy\">Classy Paths<\/option>\n <option value=\"classy-rounded\">Classy Rounded<\/option>\n <\/select>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Corner Ring Style<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-style-eye-ring\">\n <option value=\"square\">Square<\/option>\n <option value=\"dot\">Circular Ring<\/option>\n <option value=\"rounded\">Rounded<\/option>\n <\/select>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Corner Eye Ball<\/label>\n <select class=\"qrcg-select\" id=\"qrcg-style-eye-ball\">\n <option value=\"square\">Square<\/option>\n <option value=\"dot\">Circle<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <hr style=\"border:0; border-top:1px solid var(--qrcg-border); margin:1.25rem 0;\">\n\n <div style=\"display:flex; flex-direction:column; gap:1rem;\">\n <div style=\"display:flex; justify-content:space-between; align-items:center;\">\n <label style=\"font-weight:700; font-size:0.875rem;\">Gradient Foreground<\/label>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-rand-colors\" style=\"padding:4px 8px; font-size:0.75rem;\">\ud83c\udfb2 Randomize<\/button>\n <\/div>\n \n <div class=\"qrcg-customize-grid\">\n <div class=\"qrcg-form-group\">\n <label>Foreground Color 1<\/label>\n <div class=\"qrcg-color-row\">\n <input type=\"color\" class=\"qrcg-color-input\" id=\"qrcg-color-fg1\" value=\"#3b82f6\">\n <span style=\"font-family:monospace; font-size:0.8125rem;\">#3b82f6<\/span>\n <\/div>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Foreground Color 2<\/label>\n <div class=\"qrcg-color-row\">\n <input type=\"color\" class=\"qrcg-color-input\" id=\"qrcg-color-fg2\" value=\"#4f46e5\">\n <span style=\"font-family:monospace; font-size:0.8125rem;\">#4f46e5<\/span>\n <\/div>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Background Color<\/label>\n <div class=\"qrcg-color-row\">\n <input type=\"color\" class=\"qrcg-color-input\" id=\"qrcg-color-bg\" value=\"#ffffff\">\n <span style=\"font-family:monospace; font-size:0.8125rem;\">#ffffff<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-accordion\" id=\"qrcg-acc-layout\">\n <div class=\"qrcg-accordion-header\">\n <span>2. Layout & Margins Controls<\/span>\n <span>\u25bc<\/span>\n <\/div>\n <div class=\"qrcg-accordion-body\">\n <div style=\"display:flex; flex-direction:column; gap:1.25rem;\">\n <div class=\"qrcg-form-group\">\n <label>QR Code Resolution Canvas Size<\/label>\n <div class=\"qrcg-range-container\">\n <input type=\"range\" class=\"qrcg-range-slider\" id=\"qrcg-range-size\" min=\"200\" max=\"1000\" step=\"50\" value=\"400\">\n <span class=\"qrcg-range-val\" id=\"qrcg-val-size\">400px<\/span>\n <\/div>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Quiet Zone Margin Padding<\/label>\n <div class=\"qrcg-range-container\">\n <input type=\"range\" class=\"qrcg-range-slider\" id=\"qrcg-range-margin\" min=\"0\" max=\"40\" step=\"5\" value=\"15\">\n <span class=\"qrcg-range-val\" id=\"qrcg-val-margin\">15px<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-accordion\" id=\"qrcg-acc-branding\">\n <div class=\"qrcg-accordion-header\">\n <span>3. Corporate Branding Logo Overlay<\/span>\n <span>\u25bc<\/span>\n <\/div>\n <div class=\"qrcg-accordion-body\">\n <div style=\"display:flex; flex-direction:column; gap:1.25rem;\">\n <div class=\"qrcg-form-group\">\n <label>Upload Center Image Logo<\/label>\n <input type=\"file\" class=\"qrcg-input\" id=\"qrcg-logo-file\" accept=\"image\/*\">\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Logo Scaled Size Ratio<\/label>\n <div class=\"qrcg-range-container\">\n <input type=\"range\" class=\"qrcg-range-slider\" id=\"qrcg-range-logo-scale\" min=\"0.05\" max=\"0.4\" step=\"0.05\" value=\"0.15\">\n <span class=\"qrcg-range-val\" id=\"qrcg-val-logo-scale\">15%<\/span>\n <\/div>\n <\/div>\n <div class=\"qrcg-form-group\">\n <label>Logo Margin Space Offset<\/label>\n <div class=\"qrcg-range-container\">\n <input type=\"range\" class=\"qrcg-range-slider\" id=\"qrcg-range-logo-margin\" min=\"0\" max=\"20\" step=\"1\" value=\"5\">\n <span class=\"qrcg-range-val\" id=\"qrcg-val-logo-margin\">5px<\/span>\n <\/div>\n <\/div>\n <button class=\"qrcg-tool-btn qrcg-hidden\" id=\"qrcg-btn-clear-logo\" style=\"background:#fee2e2; color:#ef4444; border:1px solid #fecaca; margin-top:0.5rem; justify-content:center; width:100%;\">\u274c Strip Center Image<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <aside class=\"qrcg-preview-panel\">\n <div class=\"qrcg-card\" style=\"width:100%; display:flex; flex-direction:column; align-items:center; gap:1.5rem;\">\n <div class=\"qrcg-preview-box\" id=\"qrcg-preview-wrapper\">\n <div id=\"qrcg-rendered-output\"><\/div>\n <\/div>\n\n <div class=\"qrcg-preview-toolbar\">\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-preview-dark\">\ud83c\udf19 Dark Mode Canvas<\/button>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-copy-qr\">\ud83d\udccb Copy Image<\/button>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-copy-data\">\ud83d\udd17 Copy Data<\/button>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-btn-reset\">\ud83d\udd04 Reset Config<\/button>\n <\/div>\n\n <div class=\"qrcg-download-group\">\n <button class=\"qrcg-btn\" id=\"qrcg-btn-dl-png\">Save PNG<\/button>\n <button class=\"qrcg-btn qrcg-btn-outline\" id=\"qrcg-btn-dl-jpg\">Save JPG<\/button>\n <button class=\"qrcg-btn qrcg-btn-outline\" id=\"qrcg-btn-dl-svg\">Save SVG<\/button>\n <button class=\"qrcg-btn\" id=\"qrcg-btn-dl-pdf\" style=\"grid-column: span 2;\">Save Document PDF<\/button>\n <\/div>\n\n <hr style=\"border:0; border-top:1px solid var(--qrcg-border); width:100%; margin:0;\">\n\n <div style=\"width:100%;\">\n <h4 style=\"margin:0 0 0.5rem 0; font-size:0.875rem; font-weight:800;\">Realtime QR Metrics<\/h4>\n <table class=\"qrcg-details-table\">\n <tr>\n <td>Interactive Type<\/td>\n <td id=\"qrcg-meta-type\">Plain Text<\/td>\n <\/tr>\n <tr>\n <td>Canvas Resolution<\/td>\n <td id=\"qrcg-meta-res\">400 x 400 px<\/td>\n <\/tr>\n <tr>\n <td>Timestamp Created<\/td>\n <td id=\"qrcg-meta-time\">–:– —<\/td>\n <\/tr>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"qrcg-card\" style=\"width:100%; margin-top:1.5rem;\">\n <div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;\">\n <h3 style=\"margin:0; font-size:1.125rem; font-weight:800;\">Activity History Log<\/h3>\n <button class=\"qrcg-tool-btn\" id=\"qrcg-history-clear\" style=\"font-size:0.75rem;\">Clear Logs<\/button>\n <\/div>\n <div class=\"qrcg-history-wrap\" id=\"qrcg-history-list\"><\/div>\n <\/div>\n <\/aside>\n <\/div>\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n \/\/ Global application configuration settings\n const qrcgApp = {\n activeType: 'text',\n logoDataUrl: null,\n qrGenerator: null,\n isDarkPreview: false,\n history: [],\n maxHistory: 5\n };\n\n \/\/ Safely load and reference the library with direct local\/module window fallback hooks\n function getQRCodeStylingLibrary() {\n if (typeof window.QRCodeStyling !== 'undefined') {\n return window.QRCodeStyling;\n }\n if (typeof QRCodeStyling !== 'undefined') {\n return QRCodeStyling;\n }\n return null;\n }\n\n document.addEventListener(\"DOMContentLoaded\", () => {\n qrcgInitAccordions();\n qrcgInitTabs();\n qrcgInitSettings();\n qrcgRestoreHistory();\n \n \/\/ Initial setup and trigger build\n qrcgRenderQRCode();\n });\n\n function qrcgInitAccordions() {\n document.querySelectorAll('.qrcg-accordion-header').forEach(header => {\n header.addEventListener('click', () => {\n const parent = header.parentElement;\n parent.classList.toggle('qrcg-open');\n });\n });\n }\n\n function qrcgInitTabs() {\n const tabContainer = document.getElementById('qrcg-type-tabs');\n tabContainer.querySelectorAll('.qrcg-tab-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n tabContainer.querySelectorAll('.qrcg-tab-btn').forEach(b => b.classList.remove('qrcg-active'));\n btn.classList.add('qrcg-active');\n \n const type = btn.getAttribute('data-type');\n qrcgApp.activeType = type;\n \n \/\/ Switch dynamic visible input field\n document.querySelectorAll('.qrcg-field-group').forEach(group => {\n group.classList.add('qrcg-hidden');\n });\n \n const targetField = document.getElementById(`qrcg-field-${type}`);\n if (targetField) {\n targetField.classList.remove('qrcg-hidden');\n }\n \n qrcgRenderQRCode();\n });\n });\n }\n\n \/\/ Capture dynamic inputs value structures \n function qrcgGetPayload() {\n const type = qrcgApp.activeType;\n let data = '';\n\n if (type === 'text') {\n data = document.getElementById('qrcg-text-val').value || 'Dynamic QR Engine Pro';\n } \n else if (type === 'url') {\n data = document.getElementById('qrcg-url-val').value || 'https:\/\/example.com';\n } \n else if (type === 'email') {\n const to = document.getElementById('qrcg-email-to').value || '';\n const sub = document.getElementById('qrcg-email-sub').value || '';\n data = `mailto:${to}?subject=${encodeURIComponent(sub)}`;\n } \n else if (type === 'phone') {\n const num = document.getElementById('qrcg-phone-num').value || '';\n data = `tel:${num}`;\n } \n else if (type === 'sms') {\n const num = document.getElementById('qrcg-sms-num').value || '';\n const body = document.getElementById('qrcg-sms-body').value || '';\n data = `sms:${num}?body=${encodeURIComponent(body)}`;\n }\n else if (type === 'wifi') {\n const ssid = document.getElementById('qrcg-wifi-ssid').value || '';\n const pass = document.getElementById('qrcg-wifi-pass').value || '';\n const cipher = document.getElementById('qrcg-wifi-cipher').value || 'WPA';\n data = `WIFI:S:${ssid};T:${cipher};P:${pass};;`;\n } \n else if (type === 'vcard') {\n const name = document.getElementById('qrcg-vcard-name').value || '';\n const phone = document.getElementById('qrcg-vcard-phone').value || '';\n const email = document.getElementById('qrcg-vcard-email').value || '';\n const comp = document.getElementById('qrcg-vcard-company').value || '';\n data = `BEGIN:VCARD\\nVERSION:3.0\\nN:${name}\\nTEL:${phone}\\nEMAIL:${email}\\nORG:${comp}\\nEND:VCARD`;\n }\n else if (type === 'location') {\n const lat = document.getElementById('qrcg-loc-lat').value || '37.7749';\n const lng = document.getElementById('qrcg-loc-lng').value || '-122.4194';\n data = `geo:${lat},${lng}`;\n }\n else if (type === 'social') {\n const socType = document.getElementById('qrcg-social-platform').value;\n const val = document.getElementById('qrcg-social-val').value || '';\n \n if (socType === 'wa') data = `https:\/\/wa.me\/${val}`;\n else if (socType === 'yt') data = `https:\/\/youtube.com\/${val}`;\n else if (socType === 'fb') data = `https:\/\/facebook.com\/${val}`;\n else if (socType === 'insta') data = `https:\/\/instagram.com\/${val}`;\n else if (socType === 'x') data = `https:\/\/x.com\/${val}`;\n else if (socType === 'tg') data = `https:\/\/t.me\/${val}`;\n else if (socType === 'li') data = `https:\/\/linkedin.com\/in\/${val}`;\n else if (socType === 'dc') data = `https:\/\/discord.gg\/${val}`;\n } \n else if (type === 'crypto') {\n const cryType = document.getElementById('qrcg-crypto-type').value;\n const val = document.getElementById('qrcg-crypto-val').value || '';\n \n if (cryType === 'upi') data = `upi:\/\/pay?pa=${val}&pn=Recipient`;\n else if (cryType === 'btc') data = `bitcoin:${val}`;\n else data = `https:\/\/paypal.me\/${val}`;\n } \n else if (type === 'calendar') {\n const title = document.getElementById('qrcg-cal-title').value || '';\n const start = document.getElementById('qrcg-cal-start').value || '';\n const end = document.getElementById('qrcg-cal-end').value || '';\n const formatCalDate = (dt) => {\n if (!dt) return '';\n return dt.replace(\/[-:]\/g, '') + '00Z';\n };\n data = `BEGIN:VEVENT\\nSUMMARY:${title}\\nDTSTART:${formatCalDate(start)}\\nDTEND:${formatCalDate(end)}\\nEND:VEVENT`;\n } \n else if (type === 'batch') {\n const activeRow = document.querySelector('.qrcg-batch-row');\n data = activeRow ? activeRow.lastElementChild.innerText : 'Batch Mode Ready';\n }\n\n return data;\n }\n\n function qrcgRenderQRCode() {\n const payload = qrcgGetPayload();\n const size = parseInt(document.getElementById('qrcg-range-size').value) || 400;\n const margin = parseInt(document.getElementById('qrcg-range-margin').value) || 15;\n \n const fg1 = document.getElementById('qrcg-color-fg1').value;\n const fg2 = document.getElementById('qrcg-color-fg2').value;\n const bg = document.getElementById('qrcg-color-bg').value;\n\n const dotsStyle = document.getElementById('qrcg-style-dots').value;\n const eyeRingStyle = document.getElementById('qrcg-style-eye-ring').value;\n const eyeBallStyle = document.getElementById('qrcg-style-eye-ball').value;\n\n const logoScale = parseFloat(document.getElementById('qrcg-range-logo-scale').value) || 0.15;\n const logoMargin = parseInt(document.getElementById('qrcg-range-logo-margin').value) || 5;\n\n const Lib = getQRCodeStylingLibrary();\n if (!Lib) {\n console.error(\"Critical: QR Code Styling script execution block failed. Native libraries missing.\");\n return;\n }\n\n const options = {\n width: size,\n height: size,\n type: \"canvas\",\n data: payload,\n margin: margin,\n qrOptions: {\n typeNumber: 0,\n mode: \"Byte\",\n errorCorrectionLevel: \"Q\"\n },\n imageOptions: {\n hideBackgroundDots: true,\n imageSize: logoScale,\n margin: logoMargin,\n crossOrigin: \"anonymous\"\n },\n dotsOptions: {\n color: fg1,\n type: dotsStyle,\n gradient: {\n type: \"linear\",\n rotation: 45,\n colorStops: [\n { offset: 0, color: fg1 },\n { offset: 1, color: fg2 }\n ]\n }\n },\n backgroundOptions: {\n color: bg\n },\n cornersSquareOptions: {\n color: fg1,\n type: eyeRingStyle\n },\n cornersDotOptions: {\n color: fg2,\n type: eyeBallStyle\n },\n image: qrcgApp.logoDataUrl || \"\"\n };\n\n const canvasContainer = document.getElementById('qrcg-rendered-output');\n\n \/\/ Check if QR Engine instance is alive - execute .update() or complete clear and instantiate append\n if (qrcgApp.qrGenerator) {\n canvasContainer.innerHTML = ''; \n qrcgApp.qrGenerator = new Lib(options);\n qrcgApp.qrGenerator.append(canvasContainer);\n } else {\n canvasContainer.innerHTML = '';\n qrcgApp.qrGenerator = new Lib(options);\n qrcgApp.qrGenerator.append(canvasContainer);\n }\n\n \/\/ Metrics output updates\n document.getElementById('qrcg-meta-type').innerText = qrcgApp.activeType.toUpperCase();\n document.getElementById('qrcg-meta-res').innerText = `${size} x ${size} px`;\n document.getElementById('qrcg-meta-time').innerText = new Date().toLocaleTimeString();\n\n qrcgAddHistory(payload);\n }\n\n function qrcgInitSettings() {\n \/\/ Event Binding setup\n document.getElementById('qrcg-btn-generate').addEventListener('click', () => {\n qrcgRenderQRCode();\n });\n\n \/\/ Track user dynamic slider movements\n document.getElementById('qrcg-range-size').addEventListener('input', (e) => {\n document.getElementById('qrcg-val-size').innerText = `${e.target.value}px`;\n qrcgRenderQRCode();\n });\n\n document.getElementById('qrcg-range-margin').addEventListener('input', (e) => {\n document.getElementById('qrcg-val-margin').innerText = `${e.target.value}px`;\n qrcgRenderQRCode();\n });\n\n document.getElementById('qrcg-range-logo-scale').addEventListener('input', (e) => {\n document.getElementById('qrcg-val-logo-scale').innerText = `${Math.round(e.target.value * 100)}%`;\n qrcgRenderQRCode();\n });\n\n document.getElementById('qrcg-range-logo-margin').addEventListener('input', (e) => {\n document.getElementById('qrcg-val-logo-margin').innerText = `${e.target.value}px`;\n qrcgRenderQRCode();\n });\n\n \/\/ Setup input color mappings\n ['fg1', 'fg2', 'bg'].forEach(col => {\n const input = document.getElementById(`qrcg-color-${col}`);\n input.addEventListener('input', (e) => {\n input.nextElementSibling.innerText = e.target.value.toUpperCase();\n qrcgRenderQRCode();\n });\n });\n\n \/\/ Setup drop changes\n ['style-dots', 'style-eye-ring', 'style-eye-ball'].forEach(sel => {\n document.getElementById(`qrcg-${sel}`).addEventListener('change', () => {\n qrcgRenderQRCode();\n });\n });\n\n \/\/ Bind on all static inputs\n document.querySelectorAll('#qrcg-input-fields input, #qrcg-input-fields textarea, #qrcg-input-fields select').forEach(element => {\n element.addEventListener('input', () => qrcgRenderQRCode());\n element.addEventListener('change', () => qrcgRenderQRCode());\n });\n\n \/\/ Dark-mode interface setup\n document.getElementById('qrcg-btn-preview-dark').addEventListener('click', () => {\n const box = document.getElementById('qrcg-preview-wrapper');\n qrcgApp.isDarkPreview = !qrcgApp.isDarkPreview;\n if (qrcgApp.isDarkPreview) {\n box.classList.add('qrcg-dark-mode');\n document.getElementById('qrcg-btn-preview-dark').innerText = '\u2600\ufe0f Light Mode Canvas';\n } else {\n box.classList.remove('qrcg-dark-mode');\n document.getElementById('qrcg-btn-preview-dark').innerText = '\ud83c\udf19 Dark Mode Canvas';\n }\n });\n\n \/\/ Dynamic randomizer palette logic\n document.getElementById('qrcg-btn-rand-colors').addEventListener('click', () => {\n const hexRandom = () => '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');\n const c1 = hexRandom();\n const c2 = hexRandom();\n \n document.getElementById('qrcg-color-fg1').value = c1;\n document.getElementById('qrcg-color-fg1').nextElementSibling.innerText = c1.toUpperCase();\n document.getElementById('qrcg-color-fg2').value = c2;\n document.getElementById('qrcg-color-fg2').nextElementSibling.innerText = c2.toUpperCase();\n qrcgRenderQRCode();\n });\n\n \/\/ Logo Upload Engine\n document.getElementById('qrcg-logo-file').addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (event) => {\n qrcgApp.logoDataUrl = event.target.result;\n document.getElementById('qrcg-btn-clear-logo').classList.remove('qrcg-hidden');\n qrcgRenderQRCode();\n };\n reader.readAsDataURL(file);\n }\n });\n\n document.getElementById('qrcg-btn-clear-logo').addEventListener('click', () => {\n qrcgApp.logoDataUrl = null;\n document.getElementById('qrcg-logo-file').value = '';\n document.getElementById('qrcg-btn-clear-logo').classList.add('qrcg-hidden');\n qrcgRenderQRCode();\n });\n\n \/\/ Document exports\n document.getElementById('qrcg-btn-dl-png').addEventListener('click', () => qrcgDownload('png'));\n document.getElementById('qrcg-btn-dl-jpg').addEventListener('click', () => qrcgDownload('jpeg'));\n document.getElementById('qrcg-btn-dl-svg').addEventListener('click', () => qrcgDownload('svg'));\n document.getElementById('qrcg-btn-dl-pdf').addEventListener('click', () => qrcgDownload('pdf'));\n\n \/\/ Reset Settings\n document.getElementById('qrcg-btn-reset').addEventListener('click', () => {\n location.reload();\n });\n\n \/\/ Copy QR Canvas logic\n document.getElementById('qrcg-btn-copy-qr').addEventListener('click', () => {\n const canvas = document.querySelector('#qrcg-rendered-output canvas');\n if (canvas) {\n try {\n canvas.toBlob(blob => {\n const item = new ClipboardItem({ \"image\/png\": blob });\n navigator.clipboard.write([item]).then(() => {\n alert(\"QR Code copied as an Image successfully!\");\n });\n }, 'image\/png');\n } catch(e) {\n alert(\"This browser doesn't support writing image data directly to the clipboard.\");\n }\n } else {\n alert(\"QR Code canvas is not populated.\");\n }\n });\n\n \/\/ Copy plain raw data logic\n document.getElementById('qrcg-btn-copy-data').addEventListener('click', () => {\n const payload = qrcgGetPayload();\n navigator.clipboard.writeText(payload).then(() => {\n alert(\"QR Data content copied to clipboard!\");\n });\n });\n\n \/\/ Log actions clean logic\n document.getElementById('qrcg-history-clear').addEventListener('click', () => {\n qrcgApp.history = [];\n localStorage.removeItem('qrcg_history');\n qrcgUpdateHistoryView();\n });\n\n \/\/ CSV Parser implementation\n document.getElementById('qrcg-batch-file').addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (event) => {\n const lines = event.target.result.split(\/\\r?\\n\/).filter(line => line.trim() !== '');\n const preview = document.getElementById('qrcg-batch-preview');\n preview.innerHTML = '';\n preview.classList.remove('qrcg-hidden');\n lines.forEach((line, idx) => {\n const row = document.createElement('div');\n row.className = 'qrcg-batch-row';\n row.innerHTML = `<span>#${idx+1}:<\/span> <span>${line}<\/span>`;\n preview.appendChild(row);\n });\n if (lines.length > 0) {\n qrcgRenderQRCode();\n }\n };\n reader.readAsText(file);\n }\n });\n }\n\n function qrcgDownload(format) {\n if (!qrcgApp.qrGenerator) return;\n if (format === 'pdf') {\n const canvas = document.querySelector('#qrcg-rendered-output canvas');\n if (canvas) {\n const imgData = canvas.toDataURL('image\/png');\n const { jsPDF } = window.jspdf;\n const pdf = new jsPDF('p', 'mm', 'a4');\n pdf.setFontSize(16);\n pdf.text(\"Exported Premium QR Code\", 20, 25);\n pdf.setFontSize(10);\n pdf.text(`Payload Type: ${qrcgApp.activeType.toUpperCase()}`, 20, 32);\n pdf.text(`Date Generated: ${new Date().toLocaleString()}`, 20, 38);\n pdf.addImage(imgData, 'PNG', 20, 48, 150, 150);\n pdf.save(`qrcg_document_${Date.now()}.pdf`);\n }\n } else {\n qrcgApp.qrGenerator.download({\n name: `qrcg_export_${Date.now()}`,\n extension: format\n });\n }\n }\n\n function qrcgAddHistory(payload) {\n if (!payload || payload === 'Dynamic QR Engine Pro') return;\n if (qrcgApp.history.includes(payload)) return;\n\n qrcgApp.history.unshift(payload);\n if (qrcgApp.history.length > qrcgApp.maxHistory) {\n qrcgApp.history.pop();\n }\n\n localStorage.setItem('qrcg_history', JSON.stringify(qrcgApp.history));\n qrcgUpdateHistoryView();\n }\n\n function qrcgRestoreHistory() {\n const raw = localStorage.getItem('qrcg_history');\n if (raw) {\n qrcgApp.history = JSON.parse(raw);\n qrcgUpdateHistoryView();\n }\n }\n\n function qrcgUpdateHistoryView() {\n const wrap = document.getElementById('qrcg-history-list');\n if (!wrap) return;\n wrap.innerHTML = '';\n if (qrcgApp.history.length === 0) {\n wrap.innerHTML = `<span style=\"font-size:0.75rem; color:var(--qrcg-text-muted);\">No recorded active conversions yet.<\/span>`;\n return;\n }\n\n qrcgApp.history.forEach((hist, index) => {\n const el = document.createElement('div');\n el.className = 'qrcg-history-item';\n el.innerHTML = `\n <div class=\"qrcg-history-text\">${hist}<\/div>\n <div class=\"qrcg-history-actions\">\n <button class=\"qrcg-tool-btn\" data-index=\"${index}\" style=\"padding:2px 6px; font-size:0.75rem;\">Reuse<\/button>\n <\/div>\n `;\n\n el.querySelector('button').addEventListener('click', () => {\n const targetText = qrcgApp.history[index];\n document.getElementById('qrcg-text-val').value = targetText;\n const tabFirst = document.getElementById('qrcg-type-tabs').firstElementChild;\n if (tabFirst) {\n tabFirst.click();\n }\n });\n\n wrap.appendChild(el);\n });\n }\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Create custom QR codes for URLs, text, email and more. Dynamic QR Engine Pro Dynamic QR Engine Pro Draft vector-scannable, high-fidelity custom QR payloads instantly. Plain Text Website URL Email Phone SMS WiFi Config vCard Contact Location Social Media Crypto\/UPI Calendar Batch CSV Plain Text \/ Custom Content Dynamic QR Engine Pro Website Destination URL […]<\/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-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":9,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":517,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions\/517"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}