{"id":7,"date":"2026-01-31T06:26:22","date_gmt":"2026-01-31T05:26:22","guid":{"rendered":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/?page_id=7"},"modified":"2026-01-31T06:35:57","modified_gmt":"2026-01-31T05:35:57","slug":"qr-code","status":"publish","type":"page","link":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/qr-code\/","title":{"rendered":"G\u00e9n\u00e9rateur de QR Code"},"content":{"rendered":"\n<div id=\"qr-app-container\" style=\"max-width: 450px; margin: 20px auto; text-align: center; font-family: sans-serif; border: 1px solid #ddd; padding: 25px; border-radius: 12px; background: #f9f9f9; box-shadow: 0 10px 25px rgba(0,0,0,0.1);\">\n    \n    <h3 style=\"margin-bottom: 20px; color: #333;\">QR Studio Pro<\/h3>\n\n    <input type=\"text\" id=\"qr-input\" placeholder=\"URL ou texte \u00e0 encoder...\" \n           style=\"width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 6px;\">\n    \n    <div style=\"display: flex; gap: 10px; margin-bottom: 15px;\">\n        <div style=\"flex: 1;\">\n            <label style=\"display: block; font-size: 11px; text-transform: uppercase; margin-bottom: 5px;\">Couleur QR<\/label>\n            <input type=\"color\" id=\"color-dark\" value=\"#000000\" style=\"width: 100%; height: 35px; border: none; background: none; cursor: pointer;\">\n        <\/div>\n        <div style=\"flex: 1;\">\n            <label style=\"display: block; font-size: 11px; text-transform: uppercase; margin-bottom: 5px;\">Fond<\/label>\n            <input type=\"color\" id=\"color-light\" value=\"#ffffff\" style=\"width: 100%; height: 35px; border: none; background: none; cursor: pointer;\">\n        <\/div>\n    <\/div>\n\n    <div style=\"margin-bottom: 20px; text-align: left;\">\n        <label style=\"display: block; font-size: 11px; text-transform: uppercase; margin-bottom: 5px;\">Logo personnalis\u00e9 (Optionnel)<\/label>\n        <input type=\"file\" id=\"logo-input\" accept=\"image\/*\" style=\"font-size: 12px; width: 100%;\">\n    <\/div>\n\n    <button onclick=\"processAndGenerate()\" \n            style=\"background-color: #0073aa; color: white; border: none; padding: 15px 20px; cursor: pointer; border-radius: 6px; width: 100%; font-weight: bold; font-size: 16px;\">\n        G\u00e9n\u00e9rer le QR Code\n    <\/button>\n\n    <div id=\"qrcode-result\" style=\"margin: 25px 0; display: flex; justify-content: center; background: white; padding: 10px; border-radius: 8px; min-height: 280px; align-items: center; border: 1px solid #eee;\">\n        <span style=\"color: #999;\">Aper\u00e7u du QR Code<\/span>\n    <\/div>\n\n    <button id=\"download-btn\" onclick=\"downloadQR()\" \n            style=\"display: none; background-color: #28a745; color: white; border: none; padding: 12px 20px; cursor: pointer; border-radius: 6px; width: 100%; font-weight: bold;\">\n        T\u00e9l\u00e9charger mon QR Code (PNG)\n    <\/button>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/ushelp\/EasyQRCodeJS@master\/dist\/easy.qrcode.min.js\"><\/script>\n\n<script>\nlet customLogoData = null;\n\n\/\/ G\u00e9rer la lecture du logo upload\u00e9\ndocument.getElementById('logo-input').addEventListener('change', function(e) {\n    const file = e.target.files[0];\n    if (file) {\n        const reader = new FileReader();\n        reader.onload = function(event) {\n            customLogoData = event.target.result;\n        };\n        reader.readAsDataURL(file);\n    }\n});\n\nfunction processAndGenerate() {\n    const text = document.getElementById('qr-input').value;\n    if (!text) return alert(\"Saisis d'abord une URL !\");\n    \n    const resultDiv = document.getElementById('qrcode-result');\n    resultDiv.innerHTML = \"\"; \/\/ Clear\n\n    const options = {\n        text: text,\n        width: 300,\n        height: 300,\n        colorDark: document.getElementById('color-dark').value,\n        colorLight: document.getElementById('color-light').value,\n        correctLevel: QRCode.CorrectLevel.H,\n        \n        \/\/ Utilise le logo upload\u00e9 ou rien\n        logo: customLogoData ? customLogoData : \"\", \n        logoWidth: 80,\n        logoHeight: 80,\n        logoBackgroundTransparent: true,\n        \n        quietZone: 15,\n        onRenderingEnd: function() {\n            document.getElementById('download-btn').style.display = \"block\";\n        }\n    };\n\n    new QRCode(resultDiv, options);\n}\n\nfunction downloadQR() {\n    const canvas = document.querySelector('#qrcode-result canvas');\n    if (canvas) {\n        const link = document.createElement('a');\n        link.download = 'qr-code-maurice.png';\n        link.href = canvas.toDataURL(\"image\/png\");\n        link.click();\n    }\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>QR Studio Pro Couleur QR Fond Logo personnalis\u00e9 (Optionnel) G\u00e9n\u00e9rer le QR Code Aper\u00e7u du QR Code T\u00e9l\u00e9charger mon QR Code (PNG)<\/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-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":4,"href":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/wp-json\/wp\/v2\/pages\/7\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/lesbalconsdeladrome.fr\/test-balcons\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}