{"id":1826,"date":"2025-10-02T23:48:31","date_gmt":"2025-10-02T23:48:31","guid":{"rendered":"https:\/\/www.brooklynclick.com\/?page_id=1826"},"modified":"2026-10-02T01:57:57","modified_gmt":"2026-10-02T01:57:57","slug":"qr-code-generator","status":"publish","type":"page","link":"https:\/\/www.brooklynclick.com\/qr-code-generator\/","title":{"rendered":"QR Code Generator"},"content":{"rendered":"<div class=\"wpb-content-wrapper\" id=\"wpb-content-root\"><div data-vc-full-width=\"true\" data-vc-full-width-temp=\"true\" data-vc-full-width-init=\"false\" data-vc-stretch-content=\"true\" class=\"vc_row wpb_row vc_row-fluid vc_custom_1759450157077 bg-image-ps-inherit\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- Premium Max Features QR Code Generator (WordPress Safe, Hash Deep Linking, All Features) -->\r\n<div class=\"qr-pro-container\" id=\"qr-app\">\r\n  <header class=\"qr-header\">\r\n    <h2>Pro QR Code Generator<\/h2>\r\n    <p>Create stunning QR codes with full customization \u2013 all features free.<\/p>\r\n  <\/header>\r\n\r\n  <!-- Tabs with distinct colors and icons (data-tab matches hash) -->\r\n  <div class=\"qr-tabs\" role=\"tablist\" aria-label=\"QR code types\">\r\n    <button class=\"qr-tab tab-url active\" role=\"tab\" aria-selected=\"true\" aria-controls=\"tab-url\" data-tab=\"url\"><span class=\"tab-icon\">\ud83d\udd17<\/span>URL<\/button>\r\n    <button class=\"qr-tab tab-text\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-text\" data-tab=\"text\"><span class=\"tab-icon\">\ud83d\udcdd<\/span>Text<\/button>\r\n    <button class=\"qr-tab tab-vcard\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-vcard\" data-tab=\"vcard\"><span class=\"tab-icon\">\ud83d\udc64<\/span>vCard<\/button>\r\n    <button class=\"qr-tab tab-wifi\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-wifi\" data-tab=\"wifi\"><span class=\"tab-icon\">\ud83d\udcf6<\/span>Wi\u2011Fi<\/button>\r\n    <button class=\"qr-tab tab-event\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-event\" data-tab=\"event\"><span class=\"tab-icon\">\ud83d\udcc5<\/span>Event<\/button>\r\n    <button class=\"qr-tab tab-sms\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-sms\" data-tab=\"sms\"><span class=\"tab-icon\">\ud83d\udcac<\/span>SMS<\/button>\r\n    <button class=\"qr-tab tab-email\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-email\" data-tab=\"email\"><span class=\"tab-icon\">\u2709\ufe0f<\/span>Email<\/button>\r\n    <button class=\"qr-tab tab-phone\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-phone\" data-tab=\"phone\"><span class=\"tab-icon\">\ud83d\udcde<\/span>Phone<\/button>\r\n    <button class=\"qr-tab tab-geo\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-geo\" data-tab=\"geo\"><span class=\"tab-icon\">\ud83d\udccd<\/span>Geo<\/button>\r\n    <button class=\"qr-tab tab-crypto\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-crypto\" data-tab=\"crypto\"><span class=\"tab-icon\">\ud83e\ude99<\/span>Crypto<\/button>\r\n    <button class=\"qr-tab tab-zoom\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-zoom\" data-tab=\"zoom\"><span class=\"tab-icon\">\ud83c\udfa5<\/span>Zoom<\/button>\r\n  <\/div>\r\n\r\n  <!-- Tab Panels -->\r\n  <div class=\"tab-panels\">\r\n    <div class=\"qr-tab-content active\" id=\"tab-url\" role=\"tabpanel\"><input type=\"url\" id=\"qr-url\" placeholder=\"https:\/\/example.com\" required><\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-text\" role=\"tabpanel\"><textarea id=\"qr-text\" placeholder=\"Enter your text here\"><\/textarea><\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-vcard\" role=\"tabpanel\">\r\n      <input type=\"text\" id=\"v-name\" placeholder=\"Full Name\">\r\n      <input type=\"text\" id=\"v-phone\" placeholder=\"Phone Number\">\r\n      <input type=\"email\" id=\"v-email\" placeholder=\"Email\">\r\n      <input type=\"text\" id=\"v-company\" placeholder=\"Company\">\r\n    <\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-wifi\" role=\"tabpanel\">\r\n      <input type=\"text\" id=\"wifi-ssid\" placeholder=\"Wi\u2011Fi SSID\">\r\n      <input type=\"password\" id=\"wifi-pass\" placeholder=\"Wi\u2011Fi Password\">\r\n      <select id=\"wifi-encryption\"><option value=\"WPA\">WPA\/WPA2<\/option><option value=\"WEP\">WEP<\/option><option value=\"nopass\">No Password<\/option><\/select>\r\n    <\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-event\" role=\"tabpanel\">\r\n      <input type=\"text\" id=\"event-title\" placeholder=\"Event Title\">\r\n      <input type=\"date\" id=\"event-date\">\r\n      <input type=\"time\" id=\"event-time\">\r\n      <input type=\"text\" id=\"event-location\" placeholder=\"Event Location\">\r\n    <\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-sms\" role=\"tabpanel\">\r\n      <input type=\"tel\" id=\"sms-phone\" placeholder=\"Phone Number\">\r\n      <textarea id=\"sms-message\" placeholder=\"Message (optional)\"><\/textarea>\r\n    <\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-email\" role=\"tabpanel\">\r\n      <input type=\"email\" id=\"email-to\" placeholder=\"Recipient Email\">\r\n      <input type=\"text\" id=\"email-subject\" placeholder=\"Subject\">\r\n      <textarea id=\"email-body\" placeholder=\"Body\"><\/textarea>\r\n    <\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-phone\" role=\"tabpanel\">\r\n      <input type=\"tel\" id=\"phone-number\" placeholder=\"Phone Number\">\r\n    <\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-geo\" role=\"tabpanel\">\r\n      <input type=\"text\" id=\"geo-lat\" placeholder=\"Latitude e.g., 40.7128\">\r\n      <input type=\"text\" id=\"geo-lng\" placeholder=\"Longitude e.g., -74.0060\">\r\n    <\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-crypto\" role=\"tabpanel\">\r\n      <select id=\"crypto-currency\">\r\n        <option value=\"bitcoin\">Bitcoin (BTC)<\/option>\r\n        <option value=\"ethereum\">Ethereum (ETH)<\/option>\r\n        <option value=\"litecoin\">Litecoin (LTC)<\/option>\r\n        <option value=\"bitcoincash\">Bitcoin Cash (BCH)<\/option>\r\n      <\/select>\r\n      <input type=\"text\" id=\"crypto-address\" placeholder=\"Wallet Address\">\r\n      <input type=\"number\" id=\"crypto-amount\" placeholder=\"Amount (optional)\" step=\"any\">\r\n      <input type=\"text\" id=\"crypto-label\" placeholder=\"Label (optional)\">\r\n    <\/div>\r\n    <div class=\"qr-tab-content\" id=\"tab-zoom\" role=\"tabpanel\">\r\n      <input type=\"text\" id=\"zoom-meeting-id\" placeholder=\"Meeting ID\">\r\n      <input type=\"password\" id=\"zoom-password\" placeholder=\"Password (optional)\">\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Customization Options -->\r\n  <div class=\"qr-options\">\r\n    <h3>Customize<\/h3>\r\n\r\n    <!-- Row 1: Colors -->\r\n    <div class=\"option-row\">\r\n      <div class=\"row-label\">Colors<\/div>\r\n      <div class=\"row-controls\">\r\n        <label class=\"color-field\"><span>QR Color<\/span><input type=\"color\" id=\"qr-color\" value=\"#6a11cb\"><\/label>\r\n        <label class=\"color-field\"><span>Background<\/span><input type=\"color\" id=\"qr-bg\" value=\"#ffffff\"><\/label>\r\n        <label class=\"checkbox-field\"><input type=\"checkbox\" id=\"transparent-bg\"><span>Transparent BG<\/span><\/label>\r\n        <label class=\"checkbox-field\"><input type=\"checkbox\" id=\"use-gradient\"><span>Gradient<\/span><\/label>\r\n        <label class=\"color-field gradient-color\" style=\"display:none;\"><span>Second Color<\/span><input type=\"color\" id=\"qr-color2\" value=\"#2575fc\"><\/label>\r\n        <label class=\"slider-field gradient-rotation\" style=\"display:none;\"><span>Gradient Rotation: <span id=\"gradient-rotation-value\">45<\/span>\u00b0<\/span><input type=\"range\" id=\"gradient-rotation\" min=\"0\" max=\"360\" value=\"45\"><\/label>\r\n        <label class=\"checkbox-field\"><input type=\"checkbox\" id=\"separate-corners\"><span>Separate Corner Colors<\/span><\/label>\r\n        <div class=\"corner-colors\" style=\"display:none; display:flex; gap:10px;\">\r\n          <label class=\"color-field\"><span>Corner Square<\/span><input type=\"color\" id=\"corner-square-color\" value=\"#6a11cb\"><\/label>\r\n          <label class=\"color-field\"><span>Corner Dot<\/span><input type=\"color\" id=\"corner-dot-color\" value=\"#6a11cb\"><\/label>\r\n        <\/div>\r\n        <label class=\"slider-field\"><span>BG Opacity: <span id=\"bg-opacity-value\">100<\/span>%<\/span><input type=\"range\" id=\"bg-opacity\" min=\"0\" max=\"100\" value=\"100\"><\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Row 2: Size & Quiet Zone -->\r\n    <div class=\"option-row\">\r\n      <div class=\"row-label\">Size<\/div>\r\n      <div class=\"row-controls\">\r\n        <div class=\"button-group\" id=\"size-group\" role=\"radiogroup\" aria-label=\"QR Code Size\">\r\n          <button type=\"button\" class=\"group-btn\" data-value=\"200\">200<\/button>\r\n          <button type=\"button\" class=\"group-btn active\" data-value=\"300\">300<\/button>\r\n          <button type=\"button\" class=\"group-btn\" data-value=\"400\">400<\/button>\r\n          <button type=\"button\" class=\"group-btn\" data-value=\"500\">500<\/button>\r\n          <button type=\"button\" class=\"group-btn\" data-value=\"600\">600<\/button>\r\n        <\/div>\r\n        <label class=\"slider-field\"><span>Quiet Zone: <span id=\"quiet-zone-value\">20<\/span>px<\/span><input type=\"range\" id=\"quiet-zone\" min=\"0\" max=\"50\" value=\"20\"><\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Row 3: Logo -->\r\n    <div class=\"option-row\">\r\n      <div class=\"row-label\">Logo<\/div>\r\n      <div class=\"row-controls\">\r\n        <label class=\"file-field\"><span>Upload Logo<\/span><input type=\"file\" id=\"qr-logo\" accept=\"image\/*\"><\/label>\r\n        <label class=\"slider-field\"><span>Logo Size: <span id=\"logo-size-value\">25<\/span>%<\/span><input type=\"range\" id=\"logo-size\" min=\"10\" max=\"50\" value=\"25\"><\/label>\r\n        <label class=\"slider-field\"><span>Logo Margin: <span id=\"logo-margin-value\">5<\/span>px<\/span><input type=\"range\" id=\"logo-margin\" min=\"0\" max=\"20\" value=\"5\"><\/label>\r\n        <label class=\"checkbox-field\"><input type=\"checkbox\" id=\"logo-rounded\" checked><span>Rounded Logo<\/span><\/label>\r\n        <label class=\"checkbox-field\"><input type=\"checkbox\" id=\"logo-bg\"><span>Logo Background<\/span><\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Row 4: Styles -->\r\n    <div class=\"option-row\">\r\n      <div class=\"row-label\">Styles<\/div>\r\n      <div class=\"row-controls\">\r\n        <div class=\"style-group\">\r\n          <span class=\"sub-label\">Dot Style<\/span>\r\n          <div class=\"button-group\" id=\"dot-style-group\">\r\n            <button type=\"button\" class=\"group-btn active\" data-value=\"rounded\">Rounded<\/button>\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"dots\">Dots<\/button>\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"classy\">Classy<\/button>\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"classy-rounded\">Classy Rounded<\/button>\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"square\">Square<\/button>\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"extra-rounded\">Extra Rounded<\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"style-group\">\r\n          <span class=\"sub-label\">Corner Square<\/span>\r\n          <div class=\"button-group\" id=\"corner-square-group\">\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"dot\">Dot<\/button>\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"square\">Square<\/button>\r\n            <button type=\"button\" class=\"group-btn active\" data-value=\"extra-rounded\">Extra Rounded<\/button>\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"rounded\">Rounded<\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"style-group\">\r\n          <span class=\"sub-label\">Corner Dot<\/span>\r\n          <div class=\"button-group\" id=\"corner-dot-group\">\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"dot\">Dot<\/button>\r\n            <button type=\"button\" class=\"group-btn active\" data-value=\"square\">Square<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Row 5: Error Correction & Version -->\r\n    <div class=\"option-row\">\r\n      <div class=\"row-label\">Error & Version<\/div>\r\n      <div class=\"row-controls\">\r\n        <div class=\"style-group\">\r\n          <span class=\"sub-label\">Error Correction<\/span>\r\n          <div class=\"button-group\" id=\"error-correction-group\">\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"L\">Low (7%)<\/button>\r\n            <button type=\"button\" class=\"group-btn active\" data-value=\"M\">Medium (15%)<\/button>\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"Q\">Quartile (25%)<\/button>\r\n            <button type=\"button\" class=\"group-btn\" data-value=\"H\">High (30%)<\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"style-group\">\r\n          <span class=\"sub-label\">Version<\/span>\r\n          <label class=\"checkbox-field\"><input type=\"checkbox\" id=\"auto-version\" checked><span>Auto<\/span><\/label>\r\n          <label class=\"slider-field\" id=\"version-slider-field\" style=\"display:none;\"><span>Version: <span id=\"version-value\">1<\/span><\/span><input type=\"range\" id=\"qr-version\" min=\"1\" max=\"40\" value=\"1\"><\/label>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Row 6: Frame -->\r\n    <div class=\"option-row\">\r\n      <div class=\"row-label\">Frame<\/div>\r\n      <div class=\"row-controls\">\r\n        <label class=\"text-field\"><span>Frame Text<\/span><input type=\"text\" id=\"frame-text\" placeholder=\"Optional text\" maxlength=\"50\"><\/label>\r\n        <label class=\"color-field\"><span>Frame Color<\/span><input type=\"color\" id=\"frame-color\" value=\"#000000\"><\/label>\r\n        <label class=\"slider-field\"><span>Font Size: <span id=\"frame-font-size-value\">16<\/span>px<\/span><input type=\"range\" id=\"frame-font-size\" min=\"10\" max=\"30\" value=\"16\"><\/label>\r\n        <label class=\"text-field\"><span>Font Family<\/span><select id=\"frame-font-family\"><option value=\"Arial\">Arial<\/option><option value=\"Verdana\">Verdana<\/option><option value=\"Times New Roman\">Times New Roman<\/option><option value=\"Courier New\">Courier New<\/option><option value=\"Georgia\">Georgia<\/option><\/select><\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Row 7: Options -->\r\n    <div class=\"option-row\">\r\n      <div class=\"row-label\">Options<\/div>\r\n      <div class=\"row-controls\">\r\n        <label class=\"checkbox-field\"><input type=\"checkbox\" id=\"auto-generate\"><span>Auto-generate<\/span><\/label>\r\n        <button type=\"button\" id=\"reset-btn\" class=\"reset-btn\">Reset All<\/button>\r\n        <button type=\"button\" id=\"save-template\" class=\"save-btn\">Save as Template<\/button>\r\n        <button type=\"button\" id=\"load-template\" class=\"load-btn\">Load Template<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <button id=\"qr-generate\" class=\"generate-btn\">Generate QR Code<\/button>\r\n\r\n  <!-- Result -->\r\n  <div id=\"qr-result\" class=\"qr-result\" hidden>\r\n    <h3>Live Preview<\/h3>\r\n    <div id=\"qr-preview\" class=\"qr-preview\"><\/div>\r\n    <div class=\"qr-downloads\">\r\n      <button id=\"qr-download-png\" disabled>PNG<\/button>\r\n      <button id=\"qr-download-svg\" disabled>SVG<\/button>\r\n      <button id=\"qr-download-jpeg\" disabled>JPEG<\/button>\r\n      <button id=\"qr-download-webp\" disabled>WEBP<\/button>\r\n      <button id=\"qr-copy\" disabled>Copy<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div id=\"error-message\" class=\"error-message\" role=\"alert\" hidden><\/div>\r\n<\/div>\r\n\r\n<!-- QRCodeStyling Library -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/qr-code-styling@1.9.1\/lib\/qr-code-styling.js\"><\/script>\r\n\r\n<style>\r\n\/* Scoped styles \u2013 safe with WordPress *\/\r\n.qr-pro-container {\r\n  --qr-bg: #fef9ff;\r\n  --qr-card-bg: #ffffff;\r\n  --qr-text: #2d2d2d;\r\n  --qr-text-secondary: #555;\r\n  --qr-border: #e0e0e0;\r\n  --qr-shadow: 0 12px 35px rgba(0,0,0,0.12);\r\n  --qr-transition: 0.3s ease;\r\n  --tab-url:#2196F3; --tab-text:#4CAF50; --tab-vcard:#9C27B0; --tab-wifi:#FF9800; --tab-event:#F44336; --tab-sms:#00BCD4; --tab-email:#795548; --tab-phone:#607D8B; --tab-geo:#E91E63; --tab-crypto:#FFC107; --tab-zoom:#3F51B5;\r\n  max-width: 100%; margin: 40px auto; padding: 35px; background: var(--qr-card-bg); border-radius: 30px; box-shadow: var(--qr-shadow); font-family: 'Inter','Poppins',sans-serif; color: var(--qr-text); position: relative; overflow: hidden; background-image: radial-gradient(circle at 10% 20%, rgba(106,17,203,0.05) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(37,117,252,0.05) 0%, transparent 50%);\r\n}\r\n.qr-pro-container::before { content:''; position:absolute; top:0; left:0; width:100%; height:6px; background: linear-gradient(90deg,var(--tab-url),var(--tab-text),var(--tab-vcard),var(--tab-wifi),var(--tab-event),var(--tab-sms),var(--tab-email),var(--tab-phone),var(--tab-geo),var(--tab-crypto),var(--tab-zoom)); background-size:200% 100%; animation:qrGradientShift 6s ease infinite; }\r\n@keyframes qrGradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }\r\n.qr-header{text-align:center;margin-bottom:30px}\r\n.qr-header h2{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#6a11cb,#2575fc,#00c9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}\r\n.qr-header p{color:var(--qr-text-secondary);font-size:1.05rem}\r\n.qr-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:30px}\r\n.qr-tab{padding:10px 15px;border:none;border-radius:50px;cursor:pointer;font-weight:600;font-size:0.85rem;transition:all var(--qr-transition);position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;background:#f0f0f5;color:var(--qr-text);opacity:0.8}\r\n.qr-tab .tab-icon{font-size:1.1em}\r\n.qr-tab.tab-url:not(.active){border:2px solid var(--tab-url);color:var(--tab-url)}\r\n.qr-tab.tab-text:not(.active){border:2px solid var(--tab-text);color:var(--tab-text)}\r\n.qr-tab.tab-vcard:not(.active){border:2px solid var(--tab-vcard);color:var(--tab-vcard)}\r\n.qr-tab.tab-wifi:not(.active){border:2px solid var(--tab-wifi);color:var(--tab-wifi)}\r\n.qr-tab.tab-event:not(.active){border:2px solid var(--tab-event);color:var(--tab-event)}\r\n.qr-tab.tab-sms:not(.active){border:2px solid var(--tab-sms);color:var(--tab-sms)}\r\n.qr-tab.tab-email:not(.active){border:2px solid var(--tab-email);color:var(--tab-email)}\r\n.qr-tab.tab-phone:not(.active){border:2px solid var(--tab-phone);color:var(--tab-phone)}\r\n.qr-tab.tab-geo:not(.active){border:2px solid var(--tab-geo);color:var(--tab-geo)}\r\n.qr-tab.tab-crypto:not(.active){border:2px solid var(--tab-crypto);color:var(--tab-crypto)}\r\n.qr-tab.tab-zoom:not(.active){border:2px solid var(--tab-zoom);color:var(--tab-zoom)}\r\n.qr-tab:hover{opacity:1;transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,0.1)}\r\n.qr-tab.tab-url.active{background:var(--tab-url);color:#fff;box-shadow:0 8px 20px rgba(33,150,243,0.4)}\r\n.qr-tab.tab-text.active{background:var(--tab-text);color:#fff;box-shadow:0 8px 20px rgba(76,175,80,0.4)}\r\n.qr-tab.tab-vcard.active{background:var(--tab-vcard);color:#fff;box-shadow:0 8px 20px rgba(156,39,176,0.4)}\r\n.qr-tab.tab-wifi.active{background:var(--tab-wifi);color:#fff;box-shadow:0 8px 20px rgba(255,152,0,0.4)}\r\n.qr-tab.tab-event.active{background:var(--tab-event);color:#fff;box-shadow:0 8px 20px rgba(244,67,54,0.4)}\r\n.qr-tab.tab-sms.active{background:var(--tab-sms);color:#fff;box-shadow:0 8px 20px rgba(0,188,212,0.4)}\r\n.qr-tab.tab-email.active{background:var(--tab-email);color:#fff;box-shadow:0 8px 20px rgba(121,85,72,0.4)}\r\n.qr-tab.tab-phone.active{background:var(--tab-phone);color:#fff;box-shadow:0 8px 20px rgba(96,125,139,0.4)}\r\n.qr-tab.tab-geo.active{background:var(--tab-geo);color:#fff;box-shadow:0 8px 20px rgba(233,30,99,0.4)}\r\n.qr-tab.tab-crypto.active{background:var(--tab-crypto);color:#fff;box-shadow:0 8px 20px rgba(255,193,7,0.4)}\r\n.qr-tab.tab-zoom.active{background:var(--tab-zoom);color:#fff;box-shadow:0 8px 20px rgba(63,81,181,0.4)}\r\n.qr-tab.active{opacity:1;transform:translateY(-2px)}\r\n.qr-tab-content{display:none;animation:qrFadeIn 0.4s ease}\r\n.qr-tab-content.active{display:block}\r\n.qr-tab-content input,.qr-tab-content textarea,.qr-options input,.qr-options select{width:100%;padding:12px;margin:6px 0;border-radius:10px;border:1px solid var(--qr-border);background:var(--qr-card-bg);color:var(--qr-text);font-size:0.95rem;transition:border-color var(--qr-transition),box-shadow var(--qr-transition);box-sizing:border-box}\r\n.qr-pro-container select{appearance:auto!important;-webkit-appearance:auto!important;-moz-appearance:auto!important;cursor:pointer;pointer-events:auto!important;background-image:none!important}\r\n.qr-pro-container label{pointer-events:auto!important}\r\n.qr-tab-content input:focus,.qr-tab-content textarea:focus,.qr-options input:focus,.qr-options select:focus{outline:none;border-color:#6a11cb;box-shadow:0 0 0 4px rgba(106,17,203,0.1)}\r\n.qr-tab-content textarea{min-height:80px;resize:vertical}\r\n.qr-options{margin:30px 0;text-align:left}\r\n.qr-options h3{margin-bottom:20px;font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,#6a11cb,#2575fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}\r\n.option-row{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-bottom:20px;padding-bottom:15px;border-bottom:1px dashed #e0e0e0}\r\n.option-row:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}\r\n.row-label{flex:0 0 110px;font-weight:700;font-size:1rem;color:#6a11cb}\r\n.row-controls{flex:1;display:flex;flex-wrap:wrap;gap:15px;align-items:center}\r\n.color-field,.file-field,.text-field,.slider-field,.checkbox-field{display:flex;flex-direction:column;gap:5px;font-size:0.85rem}\r\n.color-field span,.file-field span,.text-field span,.slider-field span,.checkbox-field span{font-weight:500}\r\n.checkbox-field{flex-direction:row;align-items:center;gap:8px}\r\n.checkbox-field input[type=\"checkbox\"]{width:auto;margin:0;accent-color:#6a11cb}\r\n.color-field input[type=\"color\"]{width:50px;height:40px;padding:2px;border-radius:8px;border:1px solid #ccc;cursor:pointer}\r\n.text-field input,.text-field select{width:150px}\r\n.slider-field input[type=\"range\"]{width:150px;accent-color:#6a11cb}\r\n.button-group{display:flex;flex-wrap:wrap;gap:6px}\r\n.group-btn{padding:8px 12px;border:2px solid #ddd;border-radius:50px;background:#f9f9f9;color:#333;cursor:pointer;font-weight:600;font-size:0.8rem;transition:all var(--qr-transition);white-space:nowrap}\r\n.group-btn:hover{border-color:#6a11cb;background:#f0e6ff}\r\n.group-btn.active{background:#6a11cb;color:#fff;border-color:#6a11cb;box-shadow:0 4px 12px rgba(106,17,203,0.3)}\r\n.style-group{display:flex;flex-direction:column;gap:5px}\r\n.sub-label{font-weight:600;font-size:0.8rem;color:#555}\r\n.reset-btn,.save-btn,.load-btn{padding:8px 16px;border:2px solid #dc3545;border-radius:50px;background:#fff;color:#dc3545;cursor:pointer;font-weight:600;font-size:0.85rem;transition:all var(--qr-transition)}\r\n.reset-btn:hover,.save-btn:hover,.load-btn:hover{background:#dc3545;color:#fff}\r\n.save-btn,.load-btn{border-color:#0073e6;color:#0073e6}\r\n.save-btn:hover,.load-btn:hover{background:#0073e6;color:#fff}\r\n.generate-btn{width:100%;padding:16px 30px;border:none;border-radius:50px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:1.15rem;font-weight:700;cursor:pointer;letter-spacing:0.5px;transition:all var(--qr-transition);box-shadow:0 10px 25px rgba(118,75,162,0.4)}\r\n.generate-btn:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(118,75,162,0.5)}\r\n.generate-btn:active{transform:translateY(0);box-shadow:0 5px 15px rgba(118,75,162,0.4)}\r\n.qr-result{margin-top:35px;text-align:center}\r\n.qr-result h3{margin-bottom:20px;font-size:1.3rem;color:#6a11cb}\r\n.qr-preview{display:inline-block;padding:25px;border-radius:20px;background:#fafafa;box-shadow:0 15px 35px rgba(0,0,0,0.15);animation:qrScaleIn 0.5s ease}\r\n.qr-downloads{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px}\r\n.qr-downloads button{padding:10px 18px;border:none;border-radius:50px;background:#28a745;color:#fff;cursor:pointer;font-weight:600;font-size:0.85rem;transition:background var(--qr-transition),transform 0.2s,opacity var(--qr-transition)}\r\n.qr-downloads button:disabled{opacity:0.5;cursor:not-allowed;transform:none}\r\n.qr-downloads button:not(:disabled):hover{background:#1e7e34;transform:translateY(-2px)}\r\n.error-message{margin-top:20px;padding:14px 20px;background:#fff0f0;color:#d32f2f;border-radius:12px;font-weight:500;border-left:4px solid #d32f2f;animation:qrFadeIn 0.3s ease}\r\n@keyframes qrFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\r\n@keyframes qrScaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}\r\n@media(max-width:600px){.qr-pro-container{padding:20px}.qr-header h2{font-size:2rem}.option-row{flex-direction:column;align-items:stretch}.row-label{flex:0 0 auto;margin-bottom:10px}.row-controls{justify-content:flex-start}.qr-tabs{gap:6px}.qr-tab{padding:6px 10px;font-size:0.75rem}}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  \/\/ DOM elements\r\n  const container = document.getElementById('qr-app');\r\n  const qrPreview = document.getElementById('qr-preview');\r\n  const qrResult = document.getElementById('qr-result');\r\n  const errorMessage = document.getElementById('error-message');\r\n  const downloadPng = document.getElementById('qr-download-png');\r\n  const downloadSvg = document.getElementById('qr-download-svg');\r\n  const downloadJpeg = document.getElementById('qr-download-jpeg');\r\n  const downloadWebp = document.getElementById('qr-download-webp');\r\n  const copyBtn = document.getElementById('qr-copy');\r\n  const generateBtn = document.getElementById('qr-generate');\r\n  const resetBtn = document.getElementById('reset-btn');\r\n  const saveTemplateBtn = document.getElementById('save-template');\r\n  const loadTemplateBtn = document.getElementById('load-template');\r\n  const autoGenerateCheckbox = document.getElementById('auto-generate');\r\n  const gradientCheckbox = document.getElementById('use-gradient');\r\n  const separateCornersCheckbox = document.getElementById('separate-corners');\r\n  const secondColorField = document.querySelector('.gradient-color');\r\n  const gradientRotationField = document.querySelector('.gradient-rotation');\r\n  const cornerColorsDiv = document.querySelector('.corner-colors');\r\n  const transparentBgCheckbox = document.getElementById('transparent-bg');\r\n  const autoVersionCheckbox = document.getElementById('auto-version');\r\n  const versionSliderField = document.getElementById('version-slider-field');\r\n\r\n  let qrCode = null;\r\n  let currentSize = 300;\r\n  let currentDotStyle = 'rounded';\r\n  let currentCornerSquare = 'extra-rounded';\r\n  let currentCornerDot = 'square';\r\n  let currentErrorLevel = 'M';\r\n\r\n  \/\/ ---------- Hash-based tab activation ----------\r\n  function activateTab(tabId) {\r\n    const targetTab = container.querySelector(`.qr-tab[data-tab=\"${tabId}\"]`);\r\n    if (!targetTab) tabId = 'url';\r\n    const tabs = container.querySelectorAll('.qr-tab');\r\n    tabs.forEach(t => {\r\n      const isActive = t.dataset.tab === tabId;\r\n      t.classList.toggle('active', isActive);\r\n      t.setAttribute('aria-selected', isActive ? 'true' : 'false');\r\n    });\r\n    container.querySelectorAll('.qr-tab-content').forEach(panel => {\r\n      panel.classList.toggle('active', panel.id === `tab-${tabId}`);\r\n    });\r\n    if (history.replaceState) history.replaceState(null, '', '#' + tabId);\r\n  }\r\n\r\n  const initialTab = location.hash.replace('#', '') || 'url';\r\n  activateTab(initialTab);\r\n\r\n  window.addEventListener('hashchange', () => {\r\n    const tabId = location.hash.replace('#', '') || 'url';\r\n    activateTab(tabId);\r\n  });\r\n\r\n  \/\/ ---------- Button group helpers ----------\r\n  function setActiveButton(groupSelector, dataValue) {\r\n    const buttons = document.querySelectorAll(groupSelector + ' .group-btn');\r\n    buttons.forEach(btn => {\r\n      if(btn.dataset.value === dataValue) btn.classList.add('active');\r\n      else btn.classList.remove('active');\r\n    });\r\n  }\r\n\r\n  function initButtonGroup(groupSelector, stateSetter, currentValue) {\r\n    const buttons = document.querySelectorAll(groupSelector + ' .group-btn');\r\n    setActiveButton(groupSelector, currentValue);\r\n    buttons.forEach(btn => {\r\n      btn.addEventListener('click', () => {\r\n        buttons.forEach(b => b.classList.remove('active'));\r\n        btn.classList.add('active');\r\n        const val = btn.dataset.value;\r\n        stateSetter(val);\r\n        if (autoGenerateCheckbox.checked) generateQR();\r\n      });\r\n    });\r\n  }\r\n\r\n  initButtonGroup('#size-group', (val) => { currentSize = parseInt(val,10); }, '300');\r\n  initButtonGroup('#dot-style-group', (val) => { currentDotStyle = val; }, 'rounded');\r\n  initButtonGroup('#corner-square-group', (val) => { currentCornerSquare = val; }, 'extra-rounded');\r\n  initButtonGroup('#corner-dot-group', (val) => { currentCornerDot = val; }, 'square');\r\n  initButtonGroup('#error-correction-group', (val) => { currentErrorLevel = val; }, 'M');\r\n\r\n  \/\/ Tab click events (update hash)\r\n  const tabs = container.querySelectorAll('.qr-tab');\r\n  tabs.forEach(tab => {\r\n    tab.addEventListener('click', () => {\r\n      activateTab(tab.dataset.tab);\r\n      if (autoGenerateCheckbox.checked) generateQR();\r\n    });\r\n  });\r\n\r\n  \/\/ Toggle visibility events\r\n  gradientCheckbox.addEventListener('change', () => {\r\n    secondColorField.style.display = gradientCheckbox.checked ? 'flex' : 'none';\r\n    gradientRotationField.style.display = gradientCheckbox.checked ? 'flex' : 'none';\r\n    if (autoGenerateCheckbox.checked) generateQR();\r\n  });\r\n\r\n  separateCornersCheckbox.addEventListener('change', () => {\r\n    cornerColorsDiv.style.display = separateCornersCheckbox.checked ? 'flex' : 'none';\r\n    if (autoGenerateCheckbox.checked) generateQR();\r\n  });\r\n\r\n  autoVersionCheckbox.addEventListener('change', () => {\r\n    versionSliderField.style.display = autoVersionCheckbox.checked ? 'none' : 'flex';\r\n    if (autoGenerateCheckbox.checked) generateQR();\r\n  });\r\n\r\n  transparentBgCheckbox.addEventListener('change', () => {\r\n    if (autoGenerateCheckbox.checked) generateQR();\r\n  });\r\n\r\n  \/\/ Slider updates\r\n  function updateSlider(sliderId, outputId, suffix) {\r\n    const slider = document.getElementById(sliderId);\r\n    const output = document.getElementById(outputId);\r\n    slider.addEventListener('input', () => {\r\n      output.textContent = slider.value + suffix;\r\n      if (autoGenerateCheckbox.checked) generateQR();\r\n    });\r\n  }\r\n  updateSlider('quiet-zone', 'quiet-zone-value', 'px');\r\n  updateSlider('logo-size', 'logo-size-value', '%');\r\n  updateSlider('logo-margin', 'logo-margin-value', 'px');\r\n  updateSlider('frame-font-size', 'frame-font-size-value', 'px');\r\n  updateSlider('gradient-rotation', 'gradient-rotation-value', '\u00b0');\r\n  updateSlider('bg-opacity', 'bg-opacity-value', '%');\r\n  updateSlider('qr-version', 'version-value', '');\r\n\r\n  document.getElementById('qr-logo').addEventListener('change', () => {\r\n    if (autoGenerateCheckbox.checked) generateQR();\r\n  });\r\n\r\n  container.addEventListener('input', (e) => {\r\n    if (autoGenerateCheckbox.checked && e.target.tagName !== 'BUTTON') generateQR();\r\n  });\r\n  container.addEventListener('change', (e) => {\r\n    if (autoGenerateCheckbox.checked && e.target.tagName !== 'BUTTON') generateQR();\r\n  });\r\n\r\n  \/\/ Data extraction\r\n  function getDataFromActiveTab() {\r\n    const activeTab = document.querySelector('.qr-tab.active').dataset.tab;\r\n    let data = '';\r\n    switch(activeTab) {\r\n      case 'url':\r\n        const url = document.getElementById('qr-url').value.trim();\r\n        if(!url) throw new Error('Please enter a URL.');\r\n        if(!\/^https?:\\\/\\\/.+\/i.test(url)) throw new Error('URL must start with http:\/\/ or https:\/\/');\r\n        data = url; break;\r\n      case 'text':\r\n        data = document.getElementById('qr-text').value.trim();\r\n        if(!data) throw new Error('Please enter some text.');\r\n        break;\r\n      case 'vcard': {\r\n        const name = document.getElementById('v-name').value.trim();\r\n        const phone = document.getElementById('v-phone').value.trim();\r\n        const email = document.getElementById('v-email').value.trim();\r\n        const company = document.getElementById('v-company').value.trim();\r\n        if(!name && !phone && !email && !company) throw new Error('Please fill at least one vCard field.');\r\n        const esc = s => s.replace(\/\\\\\/g,'\\\\\\\\').replace(\/;\/g,'\\\\;').replace(\/,\/g,'\\\\,').replace(\/\\n\/g,'\\\\n');\r\n        const parts = ['BEGIN:VCARD','VERSION:3.0'];\r\n        if(name) parts.push('FN:'+esc(name));\r\n        if(company) parts.push('ORG:'+esc(company));\r\n        if(phone) parts.push('TEL:'+esc(phone));\r\n        if(email) parts.push('EMAIL:'+esc(email));\r\n        parts.push('END:VCARD');\r\n        data = parts.join('\\n'); break;\r\n      }\r\n      case 'wifi': {\r\n        const ssid = document.getElementById('wifi-ssid').value.trim();\r\n        if(!ssid) throw new Error('Wi\u2011Fi SSID is required.');\r\n        const encryption = document.getElementById('wifi-encryption').value;\r\n        const password = document.getElementById('wifi-pass').value;\r\n        const esc = s => s.replace(\/\\\\\/g,'\\\\\\\\').replace(\/;\/g,'\\\\;').replace(\/,\/g,'\\\\,').replace(\/:\/g,'\\\\:');\r\n        let wifi = `WIFI:S:${esc(ssid)};T:${encryption};`;\r\n        if(encryption !== 'nopass') {\r\n          if(!password) throw new Error('Password required for encrypted Wi\u2011Fi.');\r\n          wifi += `P:${esc(password)};`;\r\n        }\r\n        wifi += ';';\r\n        data = wifi; break;\r\n      }\r\n      case 'event': {\r\n        const title = document.getElementById('event-title').value.trim();\r\n        if(!title) throw new Error('Event title is required.');\r\n        const date = document.getElementById('event-date').value;\r\n        const time = document.getElementById('event-time').value;\r\n        if(!date) throw new Error('Event date is required.');\r\n        const location = document.getElementById('event-location').value.trim();\r\n        const dtstart = date.replace(\/-\/g,'') + 'T' + (time ? time.replace(':','') + '00' : '000000');\r\n        const esc = s => s.replace(\/\\\\\/g,'\\\\\\\\').replace(\/;\/g,'\\\\;').replace(\/,\/g,'\\\\,');\r\n        const parts = ['BEGIN:VEVENT', `SUMMARY:${esc(title)}`, `DTSTART:${dtstart}`];\r\n        if(location) parts.push(`LOCATION:${esc(location)}`);\r\n        parts.push('END:VEVENT');\r\n        data = parts.join('\\n'); break;\r\n      }\r\n      case 'sms': {\r\n        const phone = document.getElementById('sms-phone').value.trim();\r\n        if(!phone) throw new Error('Phone number is required.');\r\n        const msg = document.getElementById('sms-message').value.trim();\r\n        data = `SMSTO:${phone}:${msg}`; break;\r\n      }\r\n      case 'email': {\r\n        const to = document.getElementById('email-to').value.trim();\r\n        if(!to) throw new Error('Recipient email is required.');\r\n        const subject = document.getElementById('email-subject').value.trim();\r\n        const body = document.getElementById('email-body').value.trim();\r\n        data = `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; break;\r\n      }\r\n      case 'phone': {\r\n        const phone = document.getElementById('phone-number').value.trim();\r\n        if(!phone) throw new Error('Phone number is required.');\r\n        data = `tel:${phone}`; break;\r\n      }\r\n      case 'geo': {\r\n        const lat = document.getElementById('geo-lat').value.trim();\r\n        const lng = document.getElementById('geo-lng').value.trim();\r\n        if(!lat || !lng) throw new Error('Latitude and longitude are required.');\r\n        data = `geo:${lat},${lng}`; break;\r\n      }\r\n      case 'crypto': {\r\n        const currency = document.getElementById('crypto-currency').value;\r\n        const address = document.getElementById('crypto-address').value.trim();\r\n        if(!address) throw new Error('Wallet address is required.');\r\n        const amount = document.getElementById('crypto-amount').value.trim();\r\n        const label = document.getElementById('crypto-label').value.trim();\r\n        let cryptoData = `${currency}:${address}`;\r\n        if(amount) cryptoData += `?amount=${amount}`;\r\n        if(label) cryptoData += `&label=${encodeURIComponent(label)}`;\r\n        data = cryptoData; break;\r\n      }\r\n      case 'zoom': {\r\n        const meetingId = document.getElementById('zoom-meeting-id').value.trim();\r\n        if(!meetingId) throw new Error('Meeting ID is required.');\r\n        const password = document.getElementById('zoom-password').value.trim();\r\n        data = `https:\/\/zoom.us\/j\/${meetingId}`;\r\n        if(password) data += `?pwd=${password}`;\r\n        break;\r\n      }\r\n      default: throw new Error('Unknown tab type.');\r\n    }\r\n    return data;\r\n  }\r\n\r\n  \/\/ Generate QR code\r\n  async function generateQR() {\r\n    errorMessage.hidden = true;\r\n    try {\r\n      const data = getDataFromActiveTab();\r\n\r\n      const mainColor = document.getElementById('qr-color').value;\r\n      const bgOpacity = parseInt(document.getElementById('bg-opacity').value, 10) \/ 100;\r\n      const bgColor = transparentBgCheckbox.checked ? 'rgba(0,0,0,0)' : hexToRgba(document.getElementById('qr-bg').value, bgOpacity);\r\n      const useGradient = gradientCheckbox.checked;\r\n      const secondColor = document.getElementById('qr-color2').value;\r\n      const gradientRotation = parseInt(document.getElementById('gradient-rotation').value, 10) * Math.PI \/ 180;\r\n      const useSeparateCorners = separateCornersCheckbox.checked;\r\n      const cornerSquareColor = useSeparateCorners ? document.getElementById('corner-square-color').value : mainColor;\r\n      const cornerDotColor = useSeparateCorners ? document.getElementById('corner-dot-color').value : mainColor;\r\n\r\n      const autoVersion = autoVersionCheckbox.checked;\r\n      const qrVersion = autoVersion ? undefined : parseInt(document.getElementById('qr-version').value, 10);\r\n\r\n      const quietZone = parseInt(document.getElementById('quiet-zone').value, 10);\r\n      const logoFile = document.getElementById('qr-logo').files[0];\r\n      const logoSize = parseInt(document.getElementById('logo-size').value, 10) \/ 100;\r\n      const logoMargin = parseInt(document.getElementById('logo-margin').value, 10);\r\n      const logoRounded = document.getElementById('logo-rounded').checked;\r\n      const logoBg = document.getElementById('logo-bg').checked;\r\n\r\n      const frameText = document.getElementById('frame-text').value.trim();\r\n      const frameColor = document.getElementById('frame-color').value;\r\n      const frameFontSize = parseInt(document.getElementById('frame-font-size').value, 10);\r\n      const frameFontFamily = document.getElementById('frame-font-family').value;\r\n\r\n      const options = {\r\n        width: currentSize,\r\n        height: currentSize,\r\n        type: 'canvas',\r\n        data: data,\r\n        backgroundOptions: { color: bgColor },\r\n        dotsOptions: {\r\n          color: mainColor,\r\n          type: currentDotStyle,\r\n          ...(useGradient ? { gradient: { type: 'linear', rotation: gradientRotation, colorStops: [{ offset: 0, color: mainColor }, { offset: 1, color: secondColor }] } } : {})\r\n        },\r\n        cornersSquareOptions: { color: cornerSquareColor, type: currentCornerSquare },\r\n        cornersDotOptions: { color: cornerDotColor, type: currentCornerDot },\r\n        qrOptions: { errorCorrectionLevel: currentErrorLevel, ...(qrVersion ? { version: qrVersion } : {}) },\r\n        margin: quietZone\r\n      };\r\n\r\n      if (logoFile) {\r\n        options.imageOptions = {\r\n          crossOrigin: 'anonymous',\r\n          hideBackgroundDots: !logoBg,\r\n          imageSize: logoSize,\r\n          margin: logoMargin,\r\n          borderRadius: logoRounded ? 0.5 : 0\r\n        };\r\n      }\r\n\r\n      if (frameText) {\r\n        options.frameOptions = { text: frameText, color: frameColor, fontSize: frameFontSize, fontFamily: frameFontFamily };\r\n      }\r\n\r\n      qrCode = new QRCodeStyling(options);\r\n\r\n      if (logoFile) {\r\n        const logoDataUrl = await readFileAsDataURL(logoFile);\r\n        qrCode.update({ image: logoDataUrl, imageOptions: options.imageOptions });\r\n      }\r\n\r\n      qrPreview.innerHTML = '';\r\n      qrCode.append(qrPreview);\r\n\r\n      qrResult.hidden = false;\r\n      downloadPng.disabled = downloadSvg.disabled = downloadJpeg.disabled = downloadWebp.disabled = copyBtn.disabled = false;\r\n    } catch (err) {\r\n      errorMessage.textContent = err.message;\r\n      errorMessage.hidden = false;\r\n      qrResult.hidden = true;\r\n      downloadPng.disabled = downloadSvg.disabled = downloadJpeg.disabled = downloadWebp.disabled = copyBtn.disabled = true;\r\n    }\r\n  }\r\n\r\n  function hexToRgba(hex, alpha) {\r\n    const r = parseInt(hex.slice(1,3),16);\r\n    const g = parseInt(hex.slice(3,5),16);\r\n    const b = parseInt(hex.slice(5,7),16);\r\n    return `rgba(${r},${g},${b},${alpha})`;\r\n  }\r\n\r\n  generateBtn.addEventListener('click', generateQR);\r\n\r\n  \/\/ Reset button\r\n  resetBtn.addEventListener('click', () => {\r\n    container.querySelectorAll('input[type=\"color\"]').forEach(inp => inp.value = inp.id === 'qr-color' || inp.id === 'corner-square-color' || inp.id === 'corner-dot-color' ? '#6a11cb' : inp.id === 'qr-bg' ? '#ffffff' : '#000000');\r\n    container.querySelectorAll('input[type=\"checkbox\"]').forEach(inp => inp.checked = inp.id === 'logo-rounded' ? true : false);\r\n    container.querySelectorAll('input[type=\"range\"]').forEach(inp => {\r\n      if(inp.id === 'quiet-zone') inp.value = 20;\r\n      else if(inp.id === 'logo-size') inp.value = 25;\r\n      else if(inp.id === 'logo-margin') inp.value = 5;\r\n      else if(inp.id === 'frame-font-size') inp.value = 16;\r\n      else if(inp.id === 'gradient-rotation') inp.value = 45;\r\n      else if(inp.id === 'bg-opacity') inp.value = 100;\r\n      else if(inp.id === 'qr-version') inp.value = 1;\r\n      document.getElementById(inp.id + '-value').textContent = inp.value + (inp.id === 'logo-size' ? '%' : inp.id === 'gradient-rotation' ? '\u00b0' : inp.id === 'bg-opacity' ? '%' : 'px');\r\n    });\r\n    document.getElementById('frame-text').value = '';\r\n    document.getElementById('qr-logo').value = '';\r\n    setActiveButton('#size-group', '300'); currentSize = 300;\r\n    setActiveButton('#dot-style-group', 'rounded'); currentDotStyle = 'rounded';\r\n    setActiveButton('#corner-square-group', 'extra-rounded'); currentCornerSquare = 'extra-rounded';\r\n    setActiveButton('#corner-dot-group', 'square'); currentCornerDot = 'square';\r\n    setActiveButton('#error-correction-group', 'M'); currentErrorLevel = 'M';\r\n    secondColorField.style.display = 'none';\r\n    gradientRotationField.style.display = 'none';\r\n    cornerColorsDiv.style.display = 'none';\r\n    gradientCheckbox.checked = false;\r\n    separateCornersCheckbox.checked = false;\r\n    transparentBgCheckbox.checked = false;\r\n    autoVersionCheckbox.checked = true;\r\n    versionSliderField.style.display = 'none';\r\n    qrResult.hidden = true;\r\n    downloadPng.disabled = downloadSvg.disabled = downloadJpeg.disabled = downloadWebp.disabled = copyBtn.disabled = true;\r\n    errorMessage.hidden = true;\r\n  });\r\n\r\n  \/\/ Save template\r\n  saveTemplateBtn.addEventListener('click', () => {\r\n    const template = {\r\n      size: currentSize,\r\n      dotStyle: currentDotStyle,\r\n      cornerSquare: currentCornerSquare,\r\n      cornerDot: currentCornerDot,\r\n      errorLevel: currentErrorLevel,\r\n      colors: {\r\n        main: document.getElementById('qr-color').value,\r\n        bg: document.getElementById('qr-bg').value,\r\n        gradient: gradientCheckbox.checked,\r\n        secondColor: document.getElementById('qr-color2').value,\r\n        transparent: transparentBgCheckbox.checked,\r\n        separateCorners: separateCornersCheckbox.checked,\r\n        cornerSquareColor: document.getElementById('corner-square-color').value,\r\n        cornerDotColor: document.getElementById('corner-dot-color').value,\r\n        bgOpacity: document.getElementById('bg-opacity').value\r\n      },\r\n      logo: {\r\n        rounded: document.getElementById('logo-rounded').checked,\r\n        bg: document.getElementById('logo-bg').checked,\r\n        size: document.getElementById('logo-size').value,\r\n        margin: document.getElementById('logo-margin').value\r\n      },\r\n      frame: {\r\n        text: document.getElementById('frame-text').value,\r\n        color: document.getElementById('frame-color').value,\r\n        fontSize: document.getElementById('frame-font-size').value,\r\n        fontFamily: document.getElementById('frame-font-family').value\r\n      },\r\n      quietZone: document.getElementById('quiet-zone').value,\r\n      version: autoVersionCheckbox.checked ? 'auto' : document.getElementById('qr-version').value,\r\n      gradientRotation: document.getElementById('gradient-rotation').value\r\n    };\r\n    localStorage.setItem('qr-template', JSON.stringify(template));\r\n    alert('Template saved!');\r\n  });\r\n\r\n  \/\/ Load template\r\n  loadTemplateBtn.addEventListener('click', () => {\r\n    const saved = localStorage.getItem('qr-template');\r\n    if(!saved) { alert('No saved template found.'); return; }\r\n    const t = JSON.parse(saved);\r\n    document.getElementById('qr-color').value = t.colors.main;\r\n    document.getElementById('qr-bg').value = t.colors.bg;\r\n    gradientCheckbox.checked = t.colors.gradient;\r\n    secondColorField.style.display = t.colors.gradient ? 'flex' : 'none';\r\n    gradientRotationField.style.display = t.colors.gradient ? 'flex' : 'none';\r\n    document.getElementById('qr-color2').value = t.colors.secondColor;\r\n    transparentBgCheckbox.checked = t.colors.transparent;\r\n    separateCornersCheckbox.checked = t.colors.separateCorners;\r\n    cornerColorsDiv.style.display = t.colors.separateCorners ? 'flex' : 'none';\r\n    document.getElementById('corner-square-color').value = t.colors.cornerSquareColor;\r\n    document.getElementById('corner-dot-color').value = t.colors.cornerDotColor;\r\n    document.getElementById('bg-opacity').value = t.colors.bgOpacity;\r\n    document.getElementById('bg-opacity-value').textContent = t.colors.bgOpacity + '%';\r\n    document.getElementById('logo-rounded').checked = t.logo.rounded;\r\n    document.getElementById('logo-bg').checked = t.logo.bg;\r\n    document.getElementById('logo-size').value = t.logo.size;\r\n    document.getElementById('logo-size-value').textContent = t.logo.size + '%';\r\n    document.getElementById('logo-margin').value = t.logo.margin;\r\n    document.getElementById('logo-margin-value').textContent = t.logo.margin + 'px';\r\n    document.getElementById('frame-text').value = t.frame.text;\r\n    document.getElementById('frame-color').value = t.frame.color;\r\n    document.getElementById('frame-font-size').value = t.frame.fontSize;\r\n    document.getElementById('frame-font-size-value').textContent = t.frame.fontSize + 'px';\r\n    document.getElementById('frame-font-family').value = t.frame.fontFamily;\r\n    document.getElementById('quiet-zone').value = t.quietZone;\r\n    document.getElementById('quiet-zone-value').textContent = t.quietZone + 'px';\r\n    document.getElementById('gradient-rotation').value = t.gradientRotation;\r\n    document.getElementById('gradient-rotation-value').textContent = t.gradientRotation + '\u00b0';\r\n    if(t.version === 'auto') { autoVersionCheckbox.checked = true; versionSliderField.style.display = 'none'; }\r\n    else { autoVersionCheckbox.checked = false; versionSliderField.style.display = 'flex'; document.getElementById('qr-version').value = t.version; document.getElementById('version-value').textContent = t.version; }\r\n    setActiveButton('#size-group', t.size); currentSize = t.size;\r\n    setActiveButton('#dot-style-group', t.dotStyle); currentDotStyle = t.dotStyle;\r\n    setActiveButton('#corner-square-group', t.cornerSquare); currentCornerSquare = t.cornerSquare;\r\n    setActiveButton('#corner-dot-group', t.cornerDot); currentCornerDot = t.cornerDot;\r\n    setActiveButton('#error-correction-group', t.errorLevel); currentErrorLevel = t.errorLevel;\r\n    if(autoGenerateCheckbox.checked) generateQR();\r\n  });\r\n\r\n  \/\/ Download handlers\r\n  function download(ext) {\r\n    if(qrCode) qrCode.download({ name: `qr-code-${Date.now()}`, extension: ext });\r\n  }\r\n  downloadPng.addEventListener('click', ()=>download('png'));\r\n  downloadSvg.addEventListener('click', ()=>download('svg'));\r\n  downloadJpeg.addEventListener('click', ()=>download('jpeg'));\r\n  downloadWebp.addEventListener('click', ()=>download('webp'));\r\n\r\n  \/\/ Copy to clipboard\r\n  copyBtn.addEventListener('click', async () => {\r\n    if(!qrCode) return;\r\n    try {\r\n      const canvas = qrPreview.querySelector('canvas');\r\n      if(!canvas) throw new Error('No canvas found');\r\n      const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image\/png'));\r\n      await navigator.clipboard.write([new ClipboardItem({'image\/png': blob})]);\r\n      copyBtn.textContent = 'Copied!';\r\n      setTimeout(()=> copyBtn.textContent = 'Copy', 2000);\r\n    } catch(err) {\r\n      alert('Copy failed: ' + err.message);\r\n    }\r\n  });\r\n\r\n  \/\/ Helper to read file\r\n  function readFileAsDataURL(file) {\r\n    return new Promise((resolve, reject) => {\r\n      const reader = new FileReader();\r\n      reader.onload = e => resolve(e.target.result);\r\n      reader.onerror = reject;\r\n      reader.readAsDataURL(file);\r\n    });\r\n  }\r\n\r\n  \/\/ Initial disable downloads\r\n  downloadPng.disabled = downloadSvg.disabled = downloadJpeg.disabled = downloadWebp.disabled = copyBtn.disabled = true;\r\n})();\r\n<\/script>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Pro QR Code Generator Create stunning QR codes with full customization \u2013 all features free. \ud83d\udd17URL \ud83d\udcddText \ud83d\udc64vCard \ud83d\udcf6Wi\u2011Fi \ud83d\udcc5Event \ud83d\udcacSMS \u2709\ufe0fEmail \ud83d\udcdePhone \ud83d\udccdGeo \ud83e\ude99Crypto \ud83c\udfa5Zoom WPA\/WPA2WEPNo Password Bitcoin (BTC) Ethereum (ETH) Litecoin (LTC) Bitcoin Cash (BCH) Customize Colors QR Color Background Transparent BG Gradient Second Color Gradient Rotation: 45\u00b0 Separate Corner Colors Corner Square [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-1826","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>QR Code Generator<\/title>\n<meta name=\"description\" content=\"Pro QR Code Generator Create stunning QR codes with full customization \u2013 all features free.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.brooklynclick.com\/lv\/wp-json\/wp\/v2\/pages\/1826\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"QR Code Generator\" \/>\n<meta property=\"og:description\" content=\"Pro QR Code Generator Create stunning QR codes with full customization \u2013 all features free.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.brooklynclick.com\/qr-code-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Brooklynclick786\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-02T01:57:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.brooklynclick.com\/wp-content\/uploads\/2025\/05\/brooklyn-click-favicon.png\" \/>\n\t<meta property=\"og:image:width\" content=\"790\" \/>\n\t<meta property=\"og:image:height\" content=\"672\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"QR Code Generator\" \/>\n<meta name=\"twitter:description\" content=\"Pro QR Code Generator Create stunning QR codes with full customization \u2013 all features free.\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/qr-code-generator\\\/\",\"url\":\"https:\\\/\\\/www.brooklynclick.com\\\/qr-code-generator\\\/\",\"name\":\"QR Code Generator\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#website\"},\"datePublished\":\"2025-10-02T23:48:31+00:00\",\"dateModified\":\"2026-10-02T01:57:57+00:00\",\"description\":\"Pro QR Code Generator Create stunning QR codes with full customization \u2013 all features free.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/qr-code-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.brooklynclick.com\\\/qr-code-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/qr-code-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.brooklynclick.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"QR Code Generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#website\",\"url\":\"https:\\\/\\\/www.brooklynclick.com\\\/\",\"name\":\"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA\",\"description\":\"BrooklynClick.com is a dynamic SEO and digital marketing agency based in the heart of Brooklyn, dedicated to driving growth and visibility for businesses of all sizes.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.brooklynclick.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#organization\",\"name\":\"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA\",\"url\":\"https:\\\/\\\/www.brooklynclick.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.brooklynclick.com\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/brooklyn-click-favicon.png\",\"contentUrl\":\"https:\\\/\\\/www.brooklynclick.com\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/brooklyn-click-favicon.png\",\"width\":790,\"height\":672,\"caption\":\"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA\"},\"image\":{\"@id\":\"https:\\\/\\\/www.brooklynclick.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Brooklynclick786\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"QR Code Generator","description":"Pro QR Code Generator Create stunning QR codes with full customization \u2013 all features free.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.brooklynclick.com\/lv\/wp-json\/wp\/v2\/pages\/1826\/","og_locale":"en_US","og_type":"article","og_title":"QR Code Generator","og_description":"Pro QR Code Generator Create stunning QR codes with full customization \u2013 all features free.","og_url":"https:\/\/www.brooklynclick.com\/qr-code-generator\/","og_site_name":"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA","article_publisher":"https:\/\/www.facebook.com\/Brooklynclick786\/","article_modified_time":"2026-10-02T01:57:57+00:00","og_image":[{"width":790,"height":672,"url":"https:\/\/www.brooklynclick.com\/wp-content\/uploads\/2025\/05\/brooklyn-click-favicon.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"QR Code Generator","twitter_description":"Pro QR Code Generator Create stunning QR codes with full customization \u2013 all features free.","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.brooklynclick.com\/qr-code-generator\/","url":"https:\/\/www.brooklynclick.com\/qr-code-generator\/","name":"QR Code Generator","isPartOf":{"@id":"https:\/\/www.brooklynclick.com\/#website"},"datePublished":"2025-10-02T23:48:31+00:00","dateModified":"2026-10-02T01:57:57+00:00","description":"Pro QR Code Generator Create stunning QR codes with full customization \u2013 all features free.","breadcrumb":{"@id":"https:\/\/www.brooklynclick.com\/qr-code-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.brooklynclick.com\/qr-code-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.brooklynclick.com\/qr-code-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.brooklynclick.com\/"},{"@type":"ListItem","position":2,"name":"QR Code Generator"}]},{"@type":"WebSite","@id":"https:\/\/www.brooklynclick.com\/#website","url":"https:\/\/www.brooklynclick.com\/","name":"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA","description":"BrooklynClick.com is a dynamic SEO and digital marketing agency based in the heart of Brooklyn, dedicated to driving growth and visibility for businesses of all sizes.","publisher":{"@id":"https:\/\/www.brooklynclick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.brooklynclick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.brooklynclick.com\/#organization","name":"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA","url":"https:\/\/www.brooklynclick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.brooklynclick.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.brooklynclick.com\/wp-content\/uploads\/2025\/05\/brooklyn-click-favicon.png","contentUrl":"https:\/\/www.brooklynclick.com\/wp-content\/uploads\/2025\/05\/brooklyn-click-favicon.png","width":790,"height":672,"caption":"Brooklyn Click :: SEO And Digital Marketing Agency in Brooklyn USA"},"image":{"@id":"https:\/\/www.brooklynclick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Brooklynclick786\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/pages\/1826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/comments?post=1826"}],"version-history":[{"count":1,"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/pages\/1826\/revisions"}],"predecessor-version":[{"id":2101,"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/pages\/1826\/revisions\/2101"}],"wp:attachment":[{"href":"https:\/\/www.brooklynclick.com\/wp-json\/wp\/v2\/media?parent=1826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}