{"id":3989,"date":"2025-12-10T12:30:36","date_gmt":"2025-12-10T11:30:36","guid":{"rendered":"https:\/\/pbp-medias.bzh\/?page_id=3989"},"modified":"2025-12-10T12:30:37","modified_gmt":"2025-12-10T11:30:37","slug":"signature-consentement","status":"publish","type":"page","link":"https:\/\/pbp-medias.bzh\/index.php\/signature-consentement\/","title":{"rendered":"Signature consentement"},"content":{"rendered":"    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/signature_pad@4.0.0\/dist\/signature_pad.umd.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n    <style>\n        \/* CSS exact pour correspondre \u00e0 l'image *\/\n        .pbp-container {\n            max-width: 600px;\n            margin: 40px auto;\n            background: #fff;\n            padding: 40px;\n            border-radius: 12px;\n            box-shadow: 0 10px 25px rgba(0,0,0,0.05);\n            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n            color: #4B5563;\n        }\n        .pbp-logo { text-align: center; margin-bottom: 20px; }\n        .pbp-logo img { max-height: 60px; }\n        .pbp-title {\n            text-align: center; color: #1F2937; font-size: 24px; font-weight: 700; margin-bottom: 20px;\n        }\n        .pbp-text { font-size: 14px; line-height: 1.6; margin-bottom: 15px; text-align: justify; }\n        .pbp-row { display: flex; gap: 20px; margin-bottom: 20px; }\n        .pbp-field { flex: 1; }\n        .pbp-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; color: #374151; }\n        .pbp-field input {\n            width: 100%; padding: 10px; border: 1px solid #E5E7EB; border-radius: 6px; background: #F9FAFB;\n        }\n        .pbp-signature-area { margin-bottom: 25px; }\n        .pbp-signature-pad {\n            border: 2px solid #E5E7EB; border-radius: 8px; width: 100%; height: 200px; background: #F9FAFB; cursor: crosshair;\n        }\n        .pbp-btn {\n            width: 100%; background-color: #2563EB; color: white; padding: 15px; border: none; border-radius: 8px;\n            font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s;\n        }\n        .pbp-btn:hover { background-color: #1D4ED8; }\n        .pbp-footer { text-align: center; font-size: 12px; color: #9CA3AF; margin-top: 20px; }\n        #pbp-message { text-align: center; margin-top: 10px; font-weight: bold; }\n    <\/style>\n\n    <div class=\"pbp-container\" id=\"pbp-form-container\">\n        <div class=\"pbp-logo\">\n            <img decoding=\"async\" src=\"http:\/\/pbp-medias.bzh\/wp-content\/uploads\/2025\/09\/logo_header_site_100px_transp.png\" alt=\"Logo\">\n        <\/div>\n        \n        <h2 class=\"pbp-title\">Formulaire de Consentement<\/h2>\n        \n        <div class=\"pbp-text\">\n            J'autorise PBP M\u00e9dias \u00e0 utiliser, reproduire et diffuser mon image, captur\u00e9e ce jour, pour illustrer ses articles et communications locales sur le blog et les r\u00e9seaux sociaux associ\u00e9s, pour une dur\u00e9e ind\u00e9termin\u00e9e et \u00e0 titre gratuit.\n        <\/div>\n        <div class=\"pbp-text\">\n            Je reconnais avoir \u00e9t\u00e9 inform\u00e9(e) de mes droits (acc\u00e8s, rectification) et accepte que ces informations soient trait\u00e9es conform\u00e9ment au RGPD par PBP M\u00e9dias.\n        <\/div>\n\n        <form id=\"pbp-consent-form\">\n            <div class=\"pbp-row\">\n                <div class=\"pbp-field\">\n                    <label>Pr\u00e9nom<\/label>\n                    <input type=\"text\" id=\"prenom\" placeholder=\"Jean\" required>\n                <\/div>\n                <div class=\"pbp-field\">\n                    <label>Nom<\/label>\n                    <input type=\"text\" id=\"nom\" placeholder=\"Dupont\" required>\n                <\/div>\n            <\/div>\n\n            <div class=\"pbp-signature-area\">\n                <label style=\"font-weight: 600; font-size: 14px; color: #374151;\">Signature<\/label>\n                <canvas id=\"signature-pad\" class=\"pbp-signature-pad\"><\/canvas>\n                <div style=\"text-align:right; font-size:12px;\"><a href=\"#\" id=\"clear-signature\" style=\"color:#9CA3AF; text-decoration:none;\">Effacer<\/a><\/div>\n            <\/div>\n\n            <button type=\"submit\" class=\"pbp-btn\" id=\"submit-btn\">Valider le consentement<\/button>\n        <\/form>\n        <div id=\"pbp-message\"><\/div>\n        <div class=\"pbp-footer\">\n            En signant, vous autorisez l'utilisation de votre image conform\u00e9ment \u00e0 la r\u00e9glementation en vigueur.\n        <\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        \/\/ Initialisation Signature Pad\n        var canvas = document.getElementById('signature-pad');\n        function resizeCanvas() {\n            var ratio =  Math.max(window.devicePixelRatio || 1, 1);\n            canvas.width = canvas.offsetWidth * ratio;\n            canvas.height = canvas.offsetHeight * ratio;\n            canvas.getContext(\"2d\").scale(ratio, ratio);\n        }\n        window.onresize = resizeCanvas;\n        resizeCanvas();\n\n        var signaturePad = new SignaturePad(canvas, { backgroundColor: 'rgba(0,0,0,0)' });\n\n        document.getElementById('clear-signature').addEventListener('click', function(e){\n            e.preventDefault();\n            signaturePad.clear();\n        });\n\n        \/\/ Gestion de la soumission\n        document.getElementById('pbp-consent-form').addEventListener('submit', async function(e) {\n            e.preventDefault();\n            \n            if (signaturePad.isEmpty()) {\n                alert(\"Veuillez signer le formulaire.\");\n                return;\n            }\n\n            var btn = document.getElementById('submit-btn');\n            btn.innerHTML = \"G\u00e9n\u00e9ration du PDF...\";\n            btn.disabled = true;\n\n            var prenom = document.getElementById('prenom').value;\n            var nom = document.getElementById('nom').value;\n            var signatureImg = signaturePad.toDataURL();\n\n            \/\/ G\u00e9n\u00e9ration PDF via jsPDF\n            const { jsPDF } = window.jspdf;\n            const doc = new jsPDF();\n\n            \/\/ Mise en page du PDF\n            doc.setFontSize(20);\n            doc.text(\"Formulaire de Consentement\", 105, 20, null, null, \"center\");\n            \n            doc.setFontSize(12);\n            doc.text(\"Je soussign\u00e9(e) : \" + prenom + \" \" + nom, 20, 40);\n            \n            var text = \"J'autorise PBP M\u00e9dias \u00e0 utiliser, reproduire et diffuser mon image, captur\u00e9e ce jour, pour illustrer ses articles et communications locales sur le blog et les r\u00e9seaux sociaux associ\u00e9s, pour une dur\u00e9e ind\u00e9termin\u00e9e et \u00e0 titre gratuit.\\n\\nJe reconnais avoir \u00e9t\u00e9 inform\u00e9(e) de mes droits (acc\u00e8s, rectification) et accepte que ces informations soient trait\u00e9es conform\u00e9ment au RGPD par PBP M\u00e9dias.\";\n            var splitText = doc.splitTextToSize(text, 170);\n            doc.text(splitText, 20, 55);\n\n            doc.text(\"Date : \" + new Date().toLocaleDateString(), 20, 100);\n            doc.text(\"Signature :\", 20, 115);\n            doc.addImage(signatureImg, 'PNG', 20, 120, 60, 40);\n\n            \/\/ Convertir PDF en Blob pour l'envoi\n            var pdfBlob = doc.output('blob');\n\n            \/\/ Pr\u00e9paration envoi AJAX\n            var formData = new FormData();\n            formData.append('action', 'pbp_save_consent');\n            formData.append('nonce', '2ab41527eb');\n            formData.append('prenom', prenom);\n            formData.append('nom', nom);\n            formData.append('pdf_file', pdfBlob, 'consentement_' + nom + '_' + prenom + '.pdf');\n\n            \/\/ Envoi \u00e0 WordPress\n            fetch('https:\/\/pbp-medias.bzh\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                body: formData\n            })\n            .then(response => response.json())\n            .then(data => {\n                if(data.success) {\n                    document.getElementById('pbp-form-container').innerHTML = \"<div style='text-align:center; padding:50px; color:green;'><h2>Merci !<\/h2><p>Votre consentement a \u00e9t\u00e9 enregistr\u00e9 avec succ\u00e8s.<\/p><\/div>\";\n                } else {\n                    btn.innerHTML = \"R\u00e9essayer\";\n                    btn.disabled = false;\n                    alert(\"Erreur : \" + data.data);\n                }\n            })\n            .catch(error => {\n                console.error(error);\n                btn.innerHTML = \"R\u00e9essayer\";\n                btn.disabled = false;\n                alert(\"Une erreur technique est survenue.\");\n            });\n        });\n    });\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-3989","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pbp-medias.bzh\/index.php\/wp-json\/wp\/v2\/pages\/3989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pbp-medias.bzh\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pbp-medias.bzh\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pbp-medias.bzh\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pbp-medias.bzh\/index.php\/wp-json\/wp\/v2\/comments?post=3989"}],"version-history":[{"count":1,"href":"https:\/\/pbp-medias.bzh\/index.php\/wp-json\/wp\/v2\/pages\/3989\/revisions"}],"predecessor-version":[{"id":3990,"href":"https:\/\/pbp-medias.bzh\/index.php\/wp-json\/wp\/v2\/pages\/3989\/revisions\/3990"}],"wp:attachment":[{"href":"https:\/\/pbp-medias.bzh\/index.php\/wp-json\/wp\/v2\/media?parent=3989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}