{"id":2114,"date":"2024-09-30T20:59:07","date_gmt":"2024-09-30T14:59:07","guid":{"rendered":"https:\/\/getrizwan.com\/ecom\/?page_id=2114"},"modified":"2024-09-30T21:10:12","modified_gmt":"2024-09-30T15:10:12","slug":"modern-qr-code-generator","status":"publish","type":"page","link":"https:\/\/getrizwan.com\/ecom\/modern-qr-code-generator\/","title":{"rendered":"Modern QR Code Generator"},"content":{"rendered":"\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/qr-code-styling@1.5.0\/lib\/qr-code-styling.js\"><\/script>\n\n\n\n<div class=\"qr-generator\">\n        <h1>Modern QR Code Generator<\/h1>\n        <p>Create customized QR codes in seconds. Enter the details below and download your QR code in any format.<\/p>\n        <div class=\"form-group\">\n            <label for=\"content\">QR Code Content:<\/label>\n            <input type=\"text\" id=\"content\" placeholder=\"Enter content\">\n        <\/div>\n\n        <div class=\"form-group\">\n            <label for=\"size\">QR Code Size (px):<\/label>\n            <input type=\"number\" id=\"size\" value=\"200\">\n        <\/div>\n\n        <div class=\"form-group\">\n            <label for=\"color\">QR Code Color:<\/label>\n            <input type=\"color\" id=\"color\" value=\"#000000\">\n        <\/div>\n\n        <div class=\"form-group\">\n            <label for=\"shape\">Shape:<\/label>\n            <select id=\"shape\">\n                <option value=\"square\">Square<\/option>\n                <option value=\"circle\">Circle<\/option>\n            <\/select>\n        <\/div>\n\n        <div class=\"form-group\">\n            <label for=\"icon\">Icon (Optional):<\/label>\n            <input type=\"file\" id=\"icon\" accept=\"image\/*\">\n        <\/div>\n\n        <button id=\"generate-btn\">Generate QR Code<\/button>\n        <div id=\"qr-result\"><\/div>\n\n        <div class=\"download-options\">\n            <button id=\"download-png\">Download as PNG<\/button>\n            <button id=\"download-jpg\">Download as JPG<\/button>\n            <button id=\"download-svg\">Download as SVG<\/button>\n        <\/div>\n    <\/div>\n\n\n\n<style>\n\/* Base Styles for all devices *\/\n* {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n}\n\nbody {\n    font-family: 'Poppins', sans-serif;\n    background-color: #f4f4f9;\n    align-items: center;\n    margin: 0;\n    padding: 20px;\n}\n\n\/* QR Generator Container *\/\n.qr-generator {\n    background-color: white;\n    padding: 30px;\n    border-radius: 15px;\n    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\n    max-width: 600px;\n    width: 100%;\n    margin: 0px auto;\n    text-align: center;\n    transition: all 0.3s ease-in-out;\n}\n\n\/* Headings and Text *\/\nh1 {\n    font-size: 26px;\n    color: #333;\n    margin-bottom: 20px;\n}\n\np {\n    font-size: 16px;\n    margin-bottom: 20px;\n    color: #666;\n}\n\n\/* Form Inputs *\/\n.form-group {\n    margin-bottom: 15px;\n    font-size: 21px; \/* Increase font size *\/\n}\n\nlabel {\n    font-size: 16px;\n    display: block;\n    margin-bottom: 5px;\n    color: #555;\n}\n\ninput, select {\n    padding: 10px;\n    border: 1px solid #ccc;\n    border-radius: 8px;\n    width: 100%;\n    margin-top: 5px;\n    font-size: 18px;\n}\n\ninput[type=\"color\"] {\n    padding: 5px;\n    height: 40px;\n    width: auto;\n}\n\n\/* Buttons *\/\nbutton {\n    padding: 12px 25px;\n    margin: 10px 5px;\n    background-color: #28a745;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n    font-size: 18px;\n    transition: background-color 0.3s ease-in-out;\n}\n\nbutton:hover {\n    background-color: #218838;\n}\n\n\/* QR Result Area *\/\n#qr-result {\n    margin-top: 20px;\n}\n\n\/* Download Options *\/\n.download-options {\n    margin-top: 20px;\n}\n\n\/* Small devices (Mobile-first approach) *\/\n@media screen and (max-width: 600px) {\n    .qr-generator {\n        padding: 20px;\n    }\n\n    h1 {\n        font-size: 24px;\n    }\n\n    button {\n        padding: 10px 20px;\n        font-size: 16px;\n    }\n}\n\n\/* Medium devices (Tablets, Laptops) *\/\n@media screen and (min-width: 601px) and (max-width: 1024px) {\n    h1 {\n        font-size: 26px;\n    }\n\n    button {\n        padding: 12px 25px;\n        font-size: 18px;\n    }\n}\n\n\/* Large devices (Desktops) *\/\n@media screen and (min-width: 1025px) {\n    h1 {\n        font-size: 28px;\n    }\n\n    button {\n        padding: 14px 30px;\n        font-size: 20px;\n    }\n\n    .qr-generator {\n        max-width: 700px;\n    }\n}\n<\/style>\n\n\n\n<script>\ndocument.getElementById('generate-btn').addEventListener('click', generateQRCode);\ndocument.getElementById('download-png').addEventListener('click', () => downloadQRCode('png'));\ndocument.getElementById('download-jpg').addEventListener('click', () => downloadQRCode('jpg'));\ndocument.getElementById('download-svg').addEventListener('click', () => downloadQRCode('svg'));\n\nlet qrCode;\n\nfunction generateQRCode() {\n    const content = document.getElementById('content').value;\n    const size = document.getElementById('size').value;\n    const color = document.getElementById('color').value;\n    const shape = document.getElementById('shape').value;\n    const iconFile = document.getElementById('icon').files[0];\n\n    \/\/ Clear existing QR code\n    document.getElementById('qr-result').innerHTML = '';\n\n    if (!content) {\n        alert('Please enter the QR code content.');\n        return;\n    }\n\n    if (iconFile) {\n        const reader = new FileReader();\n        reader.onloadend = function () {\n            const base64Icon = reader.result;\n            createQRCode(content, size, color, shape, base64Icon);\n        };\n        reader.readAsDataURL(iconFile);\n    } else {\n        createQRCode(content, size, color, shape, null);\n    }\n}\n\nfunction createQRCode(content, size, color, shape, icon) {\n    qrCode = new QRCodeStyling({\n        width: size,\n        height: size,\n        data: content,\n        dotsOptions: {\n            color: color,\n            type: shape\n        },\n        image: icon,\n        imageOptions: {\n            crossOrigin: \"anonymous\",\n            margin: 5\n        }\n    });\n\n    qrCode.append(document.getElementById('qr-result'));\n}\n\nfunction downloadQRCode(format) {\n    if (!qrCode) {\n        alert('Please generate a QR code first.');\n        return;\n    }\n    qrCode.download({\n        name: \"qr_code\",\n        extension: format\n    });\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Modern QR Code Generator Create customized QR codes in seconds. Enter the details below and download your QR code in any format. QR Code Content: QR Code Size (px): QR Code Color: Shape: SquareCircle Icon (Optional): Generate QR Code Download as PNG Download as JPG Download as SVG<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2114","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/pages\/2114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/comments?post=2114"}],"version-history":[{"count":0,"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/pages\/2114\/revisions"}],"wp:attachment":[{"href":"https:\/\/getrizwan.com\/ecom\/wp-json\/wp\/v2\/media?parent=2114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}