2021-05-04 00:30:20 +02:00
<! doctype html >
< html lang = " fr_FR " >
< head >
<!-- Required meta tags -->
< meta charset = " utf-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1 " >
2021-09-22 00:21:35 +02:00
< link href = " /vendor/bootstrap.min.css?5.1.1 " rel = " stylesheet " >
< link href = " /vendor/bootstrap-icons.css?1.5.0 " rel = " stylesheet " >
2022-01-05 01:23:37 +01:00
< link href = " /css/app.css " rel = " stylesheet " >
2021-05-04 00:30:20 +02:00
< title > Signature PDF </ title >
</ head >
2022-03-26 11:02:47 +01:00
< body class = " bg-light " >
< div id = " page-upload " >
< div class = " px-4 py-5 my-5 text-center " >
< h1 class = " display-5 fw-bold " >< i class = " bi bi-vector-pen " ></ i > Signer un PDF </ h1 >
< div class = " col-lg-3 mx-auto " >
< div class = " col-12 " >
< label for = " input_pdf_upload " class = " form-label " > Choisir un PDF </ label >
< input id = " input_pdf_upload " class = " form-control form-control-lg " type = " file " accept = " .pdf,application/pdf " >
< p class = " mt-1 opacity-50 " >< small class = " text-muted " > Le PDF ne doit pas dépasser < ? php echo round ( $maxSize / 1024 / 1024 ) ?> Mo et <?php echo $maxPage ?> pages</small></p>
< a class = " btn btn-sm btn-link opacity-75 " href = " /signature#https://raw.githubusercontent.com/24eme/signaturepdf/master/tests/files/document.pdf " > Tester avec un PDF de démo </ a >
</ div >
</ div >
</ div >
< footer class = " text-center text-muted mb-2 fixed-bottom " >
< small > Logiciel libre sous license AGPL - 3.0 : < a href = " https://github.com/24eme/signaturepdf " > voir le code source </ a ></ small >
</ footer >
</ div >
< div id = " page-signature " style = " padding-right: 350px; " class = " d-none " >
2021-10-07 23:08:52 +02:00
< div style = " height: 65px; " class = " d-md-none " ></ div >
2022-01-05 01:23:37 +01:00
< div id = " container-pages " class = " col-12 pt-1 pb-1 text-center vh-100 " >
2021-10-07 01:38:44 +02:00
</ div >
2021-10-07 23:08:52 +02:00
< div style = " height: 55px; " class = " d-md-none " ></ div >
2022-01-05 01:23:37 +01:00
< div class = " offcanvas offcanvas-end show d-none d-md-block shadow-sm " data - bs - backdrop = " false " data - bs - scroll = " true " data - bs - keyboard = " false " tabindex = " -1 " id = " sidebarTools " aria - labelledby = " sidebarToolsLabel " >
2021-10-12 09:44:50 +02:00
< div class = " offcanvas-header mb-0 pb-0 " >
2022-01-05 01:23:37 +01:00
< h5 id = " sidebarToolsLabel " > Signature du PDF </ h5 >
2021-10-07 01:38:44 +02:00
< button type = " button " class = " btn-close text-reset d-md-none " data - bs - dismiss = " offcanvas " aria - label = " Close " ></ button >
</ div >
< div class = " offcanvas-body " >
2021-11-09 01:09:21 +01:00
< div class = " form-check form-switch mb-2 small d-none " >
2021-10-12 09:44:50 +02:00
< input class = " form-check-input " type = " checkbox " id = " add-lock-checkbox " disabled = " disabled " >
2021-10-30 00:41:22 +02:00
< label style = " cursor: pointer; " class = " form-check-label " for = " add-lock-checkbox " > Garder la séléction active </ label >
2021-10-12 09:44:50 +02:00
</ div >
2021-10-07 01:38:44 +02:00
< div id = " svg_list_signature " class = " list-item-add " ></ div >
< div class = " d-grid gap-2 mb-2 list-item-add " >
< input type = " radio " class = " btn-check " id = " radio_svg_signature_add " name = " svg_2_add " autocomplete = " off " value = " signature " >
2021-10-24 01:38:57 +02:00
< label data - bs - toggle = " modal " data - bs - target = " #modalAddSvg " data - type = " signature " class = " btn btn-outline-secondary text-black text-start btn-add-svg-type " for = " radio_svg_signature_add " id = " label_svg_signature_add " >< i class = " bi bi-vector-pen " ></ i > Signature < small class = " text-muted float-end " > Ajouter </ small ></ label >
2021-10-07 01:38:44 +02:00
</ div >
< div id = " svg_list_initials " class = " list-item-add " ></ div >
< div class = " d-grid gap-2 mb-2 list-item-add " >
< input type = " radio " class = " btn-check " id = " radio_svg_initials_add " name = " svg_2_add " autocomplete = " off " value = " intials " >
2021-10-24 01:38:57 +02:00
< label data - bs - toggle = " modal " data - bs - target = " #modalAddSvg " data - type = " initials " data - modalnav = " #nav-type-tab " class = " btn btn-outline-secondary text-black text-start btn-add-svg-type " for = " radio_svg_initials_add " id = " label_svg_initials_add " >< i class = " bi bi-type " ></ i > Paraphe < small class = " text-muted float-end " > Ajouter </ small ></ label >
2021-10-07 01:38:44 +02:00
</ div >
< div id = " svg_list_rubber_stamber " class = " list-item-add " ></ div >
< div class = " d-grid gap-2 mb-2 list-item-add " >
< input type = " radio " class = " btn-check " id = " radio_svg_rubber_stamber_add " name = " svg_2_add " autocomplete = " off " value = " rubber_stamber " >
2021-10-24 01:38:57 +02:00
< label data - bs - toggle = " modal " data - bs - target = " #modalAddSvg " data - type = " rubber_stamber " data - modalnav = " #nav-import-tab " class = " btn btn-outline-secondary text-black text-start btn-add-svg-type " for = " radio_svg_rubber_stamber_add " id = " label_svg_rubber_stamber_add " >< i class = " bi bi-card-text " ></ i > Tampon < small class = " text-muted float-end " > Ajouter </ small ></ label >
2021-10-07 01:38:44 +02:00
</ div >
< div class = " d-grid gap-2 mb-2 list-item-add " >
2021-10-12 01:57:10 +02:00
< input type = " radio " class = " btn-check " id = " radio_svg_text " data - svg = " data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdGV4dGFyZWEtdCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMS41IDIuNUExLjUgMS41IDAgMCAxIDMgMWgxMGExLjUgMS41IDAgMCAxIDEuNSAxLjV2My41NjNhMiAyIDAgMCAxIDAgMy44NzRWMTMuNUExLjUgMS41IDAgMCAxIDEzIDE1SDNhMS41IDEuNSAwIDAgMS0xLjUtMS41VjkuOTM3YTIgMiAwIDAgMSAwLTMuODc0VjIuNXptMSAzLjU2M2EyIDIgMCAwIDEgMCAzLjg3NFYxMy41YS41LjUgMCAwIDAgLjUuNWgxMGEuNS41IDAgMCAwIC41LS41VjkuOTM3YTIgMiAwIDAgMSAwLTMuODc0VjIuNUEuNS41IDAgMCAwIDEzIDJIM2EuNS41IDAgMCAwLS41LjV2My41NjN6TTIgN2ExIDEgMCAxIDAgMCAyIDEgMSAwIDAgMCAwLTJ6bTEyIDBhMSAxIDAgMSAwIDAgMiAxIDEgMCAwIDAgMC0yeiIvPjxwYXRoIGQ9Ik0xMS40MzQgNEg0LjU2Nkw0LjUgNS45OTRoLjM4NmMuMjEtMS4yNTIuNjEyLTEuNDQ2IDIuMTczLTEuNDk1bC4zNDMtLjAxMXY2LjM0M2MwIC41MzctLjExNi42NjUtMS4wNDkuNzQ4VjEyaDMuMjk0di0uNDIxYy0uOTM4LS4wODMtMS4wNTQtLjIxLTEuMDU0LS43NDhWNC40ODhsLjM0OC4wMWMxLjU2LjA1IDEuOTYzLjI0NCAyLjE3MyAxLjQ5NmguMzg2TDExLjQzNCA0eiIvPjwvc3ZnPgo= " name = " svg_2_add " autocomplete = " off " value = " text " >
2021-11-01 23:44:18 +01:00
< label draggable = " true " id = " label_svg_text " class = " btn btn-outline-secondary text-black text-start btn-svg " for = " radio_svg_text " >< i class = " bi bi-textarea-t " ></ i > Texte </ label >
2021-10-07 01:38:44 +02:00
</ div >
2021-11-14 02:40:36 +01:00
< div class = " d-grid gap-2 mb-2 list-item-add " >
< input type = " radio " class = " btn-check " id = " radio_svg_check " data - height = " 18 " name = " svg_2_add " autocomplete = " off " value = " data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hlY2stbGciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEyLjczNiAzLjk3YS43MzMuNzMzIDAgMCAxIDEuMDQ3IDBjLjI4Ni4yODkuMjkuNzU2LjAxIDEuMDVMNy44OCAxMi4wMWEuNzMzLjczMyAwIDAgMS0xLjA2NS4wMkwzLjIxNyA4LjM4NGEuNzU3Ljc1NyAwIDAgMSAwLTEuMDYuNzMzLjczMyAwIDAgMSAxLjA0NyAwbDMuMDUyIDMuMDkzIDUuNC02LjQyNWEuMjQ3LjI0NyAwIDAgMSAuMDItLjAyMloiLz4KPC9zdmc+Cg== " >
< label draggable = " true " id = " label_svg_check " class = " btn btn-outline-secondary text-black text-start btn-svg " for = " radio_svg_check " >< i class = " bi bi-check-square " ></ i > Case à cocher </ label >
</ div >
2021-10-07 01:38:44 +02:00
< div id = " svg_list " class = " d-grid gap-2 mt-2 mb-2 list-item-add " ></ div >
2021-10-03 09:34:05 +02:00
2021-10-07 01:38:44 +02:00
< div class = " d-grid gap-2 mt-2 " >
< button type = " button " id = " btn-add-svg " class = " btn btn-sm btn-light " data - bs - toggle = " modal " data - bs - target = " #modalAddSvg " >< i class = " bi bi-plus-circle " ></ i > Ajouter un élément </ button >
</ div >
2022-03-31 13:29:38 +02:00
< div id = " form_block " class = " position-absolute bottom-0 pb-2 ps-0 pe-4 w-100 d-none d-sm-none d-md-block " >
< ? php if ( ! isset ( $hash )) : ?>
2022-03-31 11:08:46 +02:00
< form id = " form_sharing " action = " /share " method = " post " enctype = " multipart/form-data " >
< input id = " input_pdf_share " name = " pdf " type = " file " class = " d-none " />
2022-03-31 18:37:30 +02:00
< input id = " input_svg_share " name = " svg[] " type = " file " class = " d-none " />
2022-03-31 11:08:46 +02:00
< div class = " d-grid gap-2 mt-2 " >
2022-03-31 18:39:52 +02:00
< button class = " btn btn-outline-dark w-100 " type = " submit " id = " save_share " >< i class = " bi bi-share " ></ i > Partager pour signer à plusieurs < i class = " bi bi-people " ></ i ></ button >
2022-03-31 11:08:46 +02:00
</ div >
</ form >
< form id = " form_pdf " action = " /sign " method = " post " enctype = " multipart/form-data " >
< input id = " input_pdf " name = " pdf " type = " file " class = " d-none " />
< input id = " input_svg " name = " svg[] " type = " file " class = " d-none " />
2022-03-31 18:23:45 +02:00
< button class = " btn btn-primary w-100 mt-2 " disabled = " disabled " type = " submit " id = " save " >< i class = " bi bi-download " ></ i > Télécharger le PDF Signé </ button >
2022-03-31 11:08:46 +02:00
</ form >
2022-03-31 16:05:45 +02:00
< ? php else : ?>
2022-03-31 18:23:45 +02:00
< a class = " btn btn-outline-dark w-100 " href = " /signature/<?php echo $hash ?>/pdf " >< i class = " bi bi-download " ></ i > Télécharger le PDF </ a >
2022-03-31 16:05:45 +02:00
< form id = " form_pdf " action = " /signature/<?php echo $hash ?>/save " method = " post " enctype = " multipart/form-data " >
< input id = " input_svg " name = " svg[] " type = " file " class = " d-none " />
2022-03-31 18:23:45 +02:00
< button class = " btn btn-success w-100 mt-2 " disabled = " disabled " type = " submit " id = " save " >< i class = " bi bi-check-circle " ></ i > Enregistrer ma signature </ button >
2022-03-31 16:05:45 +02:00
</ form >
2022-03-31 13:29:38 +02:00
< ? php endif ; ?>
2022-03-31 11:08:46 +02:00
</ div >
2021-10-07 01:38:44 +02:00
</ div >
</ div >
2021-10-07 23:08:52 +02:00
< div class = " position-fixed top-0 start-0 bg-white w-100 p-2 shadow-sm d-md-none " >
2021-10-07 01:38:44 +02:00
< div class = " d-grid gap-2 " >
2022-01-05 01:23:37 +01:00
< button id = " btn_svn_select " class = " btn btn-light btn-lg " data - bs - toggle = " offcanvas " data - bs - target = " #sidebarTools " aria - controls = " sidebarTools " >< i class = " bi bi-hand-index " ></ i > Séléctionner une signature </ button >
2021-10-07 01:38:44 +02:00
</ div >
2021-11-14 01:56:07 +01:00
< div id = " svg_selected_container " class = " text-center d-none position-relative " >
2021-11-14 02:18:42 +01:00
< img id = " svg_selected " src = " " style = " height: 48px; " class = " img-fluid " />
2021-11-14 02:01:58 +01:00
< button type = " button " id = " btn_svg_selected_close " class = " btn-close text-reset position-absolute " style = " top: 9px; right: 9px; " ></ button >
2021-10-07 01:38:44 +02:00
</ div >
2021-11-01 00:48:56 +01:00
< div id = " svg_object_actions " class = " d-none " >
< button id = " btn-svg-pdf-delete " class = " btn btn-lg btn-light " >< i class = " bi bi-trash " ></ i ></ button >
</ div >
2021-10-07 01:38:44 +02:00
</ div >
< div class = " position-fixed bottom-0 start-0 bg-white w-100 p-2 shadow d-md-none " >
2021-10-10 22:31:33 +02:00
< div class = " btn-group position-absolute opacity-25 " style = " top: -46px; " >
< button id = " btn-zoom-decrease " class = " btn btn-secondary " >< i class = " bi bi-dash " ></ i ></ button >
< button id = " btn-zoom-increase " class = " btn btn-secondary " >< i class = " bi bi-plus " ></ i ></ button >
</ div >
2021-10-07 01:38:44 +02:00
< div class = " d-grid gap-2 " >
< button class = " btn btn-primary " disabled = " disabled " type = " submit " id = " save_mobile " >< i class = " bi bi-download " ></ i > Télécharger le PDF Signé </ button >
</ div >
2021-05-04 00:30:20 +02:00
</ div >
2021-09-21 19:41:11 +02:00
2021-09-25 15:01:22 +02:00
< div class = " modal fade " id = " modalAddSvg " tabindex = " -1 " aria - labelledby = " exampleModalLabel " aria - hidden = " true " >
< div class = " modal-dialog " >
< div class = " modal-content " >
< div class = " modal-body " >
< nav >
< div class = " nav nav-tabs " id = " nav-tab " role = " tablist " >
< button class = " nav-link active " id = " nav-draw-tab " data - bs - toggle = " tab " data - bs - target = " #nav-draw " type = " button " role = " tab " aria - controls = " nav-draw " aria - selected = " true " >< i class = " bi bi-vector-pen " ></ i > Dessiner </ button >
< button class = " nav-link " id = " nav-type-tab " data - bs - toggle = " tab " data - bs - target = " #nav-type " type = " button " role = " tab " aria - controls = " nav-type " aria - selected = " false " >< i class = " bi bi-fonts " ></ i > Saisir </ button >
< button class = " nav-link " id = " nav-import-tab " data - bs - toggle = " tab " data - bs - target = " #nav-import " type = " button " role = " tab " aria - controls = " nav-import " aria - selected = " false " >< i class = " bi bi-image " ></ i > Importer </ button >
</ div >
</ nav >
2021-09-25 15:36:34 +02:00
< div class = " tab-content mt-3 " id = " nav-svg-add " >
2021-09-25 15:01:22 +02:00
< div class = " tab-pane fade show active " id = " nav-draw " role = " tabpanel " aria - labelledby = " nav-draw-tab " >
2021-11-11 00:34:15 +01:00
< small id = " signature-pad-reset " class = " text-muted opacity-75 position-absolute " style = " right: 25px; bottom: 25px; cursor: pointer; " title = " Effacer la signature " >< i class = " bi bi-trash " ></ i ></ small >
2021-09-26 23:43:17 +02:00
< canvas id = " signature-pad " class = " border bg-light " width = " 462 " height = " 200 " ></ canvas >
2021-09-25 15:01:22 +02:00
</ div >
< div class = " tab-pane fade " id = " nav-type " role = " tabpanel " aria - labelledby = " nav-type-tab " >
2022-01-05 01:23:37 +01:00
< input id = " input-text-signature " type = " text " class = " form-control form-control-lg " placeholder = " Ma signature " />
2021-09-25 15:01:22 +02:00
</ div >
< div class = " tab-pane fade " id = " nav-import " role = " tabpanel " aria - labelledby = " nav-import-tab " >
< div class = " text-center " >
2022-01-05 01:23:37 +01:00
< img id = " img-upload " class = " d-none " src = " " />
2021-09-25 15:01:22 +02:00
</ div >
< form id = " form-image-upload " action = " /image2svg " method = " POST " enctype = " multipart/form-data " >
< input id = " input-image-upload " class = " form-control " name = " image " type = " file " >
</ form >
</ div >
</ div >
2021-10-03 09:34:05 +02:00
< input id = " input-svg-type " type = " hidden " />
</ div >
2021-09-25 15:01:22 +02:00
< div class = " modal-footer " >
2021-10-12 17:19:08 +02:00
< button tabindex = " -1 " type = " button " class = " btn btn-light " data - bs - dismiss = " modal " > Annuler </ button >
< button id = " btn_modal_ajouter " type = " button " disabled = " disabled " class = " btn btn-primary " data - bs - dismiss = " modal " >< span id = " btn_modal_ajouter_spinner " class = " spinner-border spinner-border-sm d-none " ></ span >< span id = " btn_modal_ajouter_check " class = " bi bi-check-circle " ></ span > Ajouter </ button >
2021-09-25 15:01:22 +02:00
</ div >
</ div >
</ div >
2021-10-24 01:38:57 +02:00
</ div >
2022-03-31 16:35:26 +02:00
</ div >
< ? php if ( isset ( $shareLink )) : ?>
< div id = " modal-share-informations " class = " modal " tabindex = " -1 " >
2022-03-31 18:24:10 +02:00
< div class = " modal-dialog modal-md " >
2022-03-31 16:35:26 +02:00
< div class = " modal-content " >
< div class = " modal-header " >
2022-03-31 18:24:10 +02:00
< h5 class = " modal-title " >< i class = " bi bi-people " ></ i > Signer ce PDF à plusieurs </ h5 >
2022-03-31 16:35:26 +02:00
< button type = " button " class = " btn-close " data - bs - dismiss = " modal " aria - label = " Close " ></ button >
</ div >
< div class = " modal-body " >
2022-03-31 18:24:10 +02:00
< p > Plusieurs personnes peuvent signer ce PDF en même temps en allant sur cette page :</ p >
2022-03-31 16:35:26 +02:00
< div class = " input-group mb-3 " >
2022-03-31 18:24:10 +02:00
< input id = " input-share-link " type = " text " onclick = " this.select(); this.setSelectionRange(0, 99999); " readonly = " readonly " class = " form-control " value = " <?php echo $shareLink ?> " >
< button onclick = " navigator.clipboard.writeText(document.getElementById('input-share-link').value); this.innerText = 'Copié !'; " autofocus = " autofocus " class = " btn btn-primary " type = " button " id = " btn-copy-share-link " >< i class = " bi bi-clipboard " ></ i > Copier </ button >
2022-03-31 16:35:26 +02:00
</ div >
2022-03-31 18:24:10 +02:00
< p > C 'est aussi depuis cette page qu' il est possible de télécharger le PDF signer par tous .</ p >
2022-03-31 16:35:26 +02:00
</ div >
< div class = " modal-footer text-start " >
< button type = " button " class = " btn btn-light " data - bs - dismiss = " modal " > Fermer </ button >
</ div >
</ div >
</ div >
</ div >
< ? php endif ; ?>
2021-10-07 01:38:44 +02:00
< span id = " is_mobile " class = " d-md-none " ></ span >
2022-03-26 11:11:06 +01:00
< script src = " /vendor/bootstrap.min.js?5.1.3 " ></ script >
2021-09-22 00:08:27 +02:00
< script src = " /vendor/pdf.js?legacy " ></ script >
2021-10-07 01:38:44 +02:00
< script src = " /vendor/fabric.min.js?4.6.0 " ></ script >
2021-09-22 00:21:35 +02:00
< script src = " /vendor/signature_pad.umd.min.js?3.0.0-beta.3 " ></ script >
< script src = " /vendor/opentype.min.js?1.3.3 " ></ script >
2021-05-04 00:30:20 +02:00
< script >
2022-03-26 11:02:47 +01:00
var maxSize = < ? php echo $maxSize ?> ;
2021-11-12 10:10:32 +01:00
var maxPage = < ? php echo $maxPage ?> ;
2022-03-31 11:53:55 +02:00
var hash = null ;
< ? php if ( isset ( $hash )) : ?>
hash = " <?php echo $hash ?> " ;
< ? php endif ; ?>
2021-05-04 00:30:20 +02:00
</ script >
2022-03-26 11:02:47 +01:00
< script src = " /js/signature.js?202203261059 " ></ script >
2021-05-04 00:30:20 +02:00
</ body >
</ html >
