[
  {
    "path": "LICENCE",
    "content": "Copyright (c) Johann Pardanaud\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "[🇫🇷 This project was reused by the French governement to create their own certificate generator. 🇫🇷](https://github.com/LAB-MI/deplacement-covid-19)\n\nThe code was written by using these awesome open source projects:\n\n- [PDF-LIB](https://pdf-lib.js.org/)\n- [Signature Pad](https://github.com/szimek/signature_pad)\n- [Bootstrap](https://getbootstrap.com/)\n- [Font Awesome](https://fontawesome.com/license)\n- [Twemoji](https://twemoji.twitter.com/)\n"
  },
  {
    "path": "certificate.js",
    "content": "const { PDFDocument, StandardFonts } = PDFLib\n\nconst $ = (...args) => document.querySelector(...args)\nconst $$ = (...args) => document.querySelectorAll(...args)\nconst signaturePad = new SignaturePad($('#field-signature'), { minWidth: 1, maxWidth: 3 })\n\nfunction hasProfile() {\n  return localStorage.getItem('name') !== null\n}\n\nfunction saveProfile() {\n  for (field of $$('#form-profile input:not([disabled]):not([type=checkbox])')) {\n    localStorage.setItem(field.id.substring('field-'.length), field.value)\n  }\n\n  localStorage.setItem('signature', signaturePad.toDataURL())\n}\n\nfunction getProfile() {\n  const fields = {}\n  for (let i = 0; i < localStorage.length; i++){\n    const name = localStorage.key(i)\n    fields[name] = localStorage.getItem(name)\n  }\n  return fields\n}\n\nasync function generatePdf(profile, reason) {\n  const url = 'certificate.pdf?v=bfc885e5326a9e0d3184aed9d183bca20a9cd76f'\n  const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer())\n\n  const pdfDoc = await PDFDocument.load(existingPdfBytes)\n  const page = pdfDoc.getPages()[0]\n\n  const font = await pdfDoc.embedFont(StandardFonts.Helvetica)\n  const drawText = (text, x, y, size = 11) => {\n    page.drawText(text, {x, y, size, font})\n  }\n\n  drawText(profile.name, 125, 685)\n  drawText(profile.birthday, 125, 661)\n  drawText(profile.birthplace || '', 95, 637)\n  drawText(`${profile.address} ${profile.zipcode} ${profile.town}`, 140, 613)\n\n  switch (reason) {\n    case 'work':\n      drawText('x', 76.5, 526, 20)\n      break\n    case 'groceries':\n      drawText('x', 76.5, 476.5, 20)\n      break\n    case 'health':\n      drawText('x', 76.5, 436, 20)\n      break\n    case 'family':\n      drawText('x', 76.5, 399.5, 20)\n      break\n    case 'sport':\n      drawText('x', 76.5, 344, 20)\n      break\n    case 'notification':\n      drawText('x', 76.5, 297, 20)\n      break\n    case 'mission':\n      drawText('x', 76.5, 261, 20)\n      break\n  }\n\n  drawText(profile['done-at'] || profile.town, 110, 225)\n\n  if (reason !== '') {\n    const date = [\n      String((new Date).getDate()).padStart(2, '0'),\n      String((new Date).getMonth() + 1).padStart(2, '0'),\n      String((new Date).getFullYear()),\n    ].join('/')\n\n    drawText(date, 105, 201)\n    drawText(String((new Date).getHours()).padStart(2, '0'), 195, 201)\n\n    // Round the minutes to the lower X0 or X5 value, so it feels more human.\n    const minutes = Math.floor((new Date).getMinutes() / 5) * 5;\n    drawText(String(minutes).padStart(2, '0'), 225, 201)\n  }\n\n  const signatureArrayBuffer = await fetch(profile.signature).then(res => res.arrayBuffer())\n  const signatureImage = await pdfDoc.embedPng(signatureArrayBuffer)\n  const signatureDimensions = signatureImage.scale(1 / (signatureImage.width / 80))\n\n  page.drawImage(signatureImage, {\n    x: page.getWidth() - signatureDimensions.width - 380,\n    y: 130,\n    width: signatureDimensions.width,\n    height: signatureDimensions.height,\n  })\n\n  const pdfBytes = await pdfDoc.save()\n  return new Blob([pdfBytes], {type: 'application/pdf'})\n}\n\nfunction downloadBlob(blob, fileName) {\n  const link = document.createElement('a')\n  var url = URL.createObjectURL(blob)\n  link.href = url\n  link.download = fileName\n  link.click()\n}\n\nfunction getAndSaveReason() {\n  const {value} = $('input[name=\"field-reason\"]:checked')\n  localStorage.setItem('last-reason', value)\n  return value\n}\n\nfunction restoreReason() {\n  const value = localStorage.getItem('last-reason')\n  if (value === null) {\n    return\n  }\n\n  $(`#radio-${value}`).checked = true\n}\n\n// see: https://stackoverflow.com/a/32348687/1513045\nfunction isFacebookBrowser() {\n  const ua = navigator.userAgent || navigator.vendor || window.opera\n  return (ua.indexOf(\"FBAN\") > -1) || (ua.indexOf(\"FBAV\") > -1)\n}\n\nfunction applyDoneAt() {\n  const { checked } = $('#check-same-town')\n  $('#group-done-at').style.display = checked ? 'none' : 'block';\n  $('#field-done-at').disabled = checked;\n}\n\nif (isFacebookBrowser()) {\n  $('#alert-facebook').style.display = 'block';\n}\n\n$('#alert-official .close').addEventListener('click', ({ target }) => {\n  target.offsetParent.style.display = 'none'\n  localStorage.setItem('dismiss-official-alert', true)\n})\n\nif (localStorage.getItem('dismiss-official-alert')) {\n  $('#alert-official').style.display = 'none'\n}\n\nif (hasProfile()) {\n  $('#form-generate').style.display = 'block'\n} else {\n  $('#form-profile').style.display = 'block'\n}\n\n$('#form-profile').addEventListener('submit', event => {\n  event.preventDefault()\n  saveProfile()\n  location.reload()\n})\n\n$('#date-selector').addEventListener('change', ({ target }) => {\n  $('#field-birthday').value = target.value.split('-').reverse().join('/')\n})\n\n$('#check-same-town').addEventListener('change', applyDoneAt)\napplyDoneAt()\n\nconst formWidth = $('#form-profile').offsetWidth\n$('#field-signature').width = formWidth\n$('#field-signature').height = formWidth / 1.5\n\n$('#reset-signature').addEventListener('click', () => signaturePad.clear())\n\n$('#form-generate').addEventListener('submit', async event => {\n  event.preventDefault()\n\n  const button = event.target.querySelector('button[type=submit]')\n  button.disabled = true\n\n  const reason = getAndSaveReason()\n  const profile = getProfile()\n\n  if (profile.birthplace === undefined) {\n    const birthplace = prompt([\n      `La nouvelle attestation, en date du 25 mars, exige maintenant le lieu de naissance et votre profil ne contient`,\n      `actuellement pas cette information, merci de compléter :`,\n    ].join(' '))\n\n    if (birthplace) {\n      profile.birthplace = birthplace\n      localStorage.setItem('birthplace', birthplace)\n    }\n  }\n\n  const pdfBlob = await generatePdf(profile, reason)\n  button.disabled = false\n\n  downloadBlob(pdfBlob, 'attestation.pdf')\n})\n\nrestoreReason()\n"
  },
  {
    "path": "favicons/browserconfig.xml",
    "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig>\n    <msapplication>\n        <tile>\n            <square150x150logo src=\"mstile-150x150.png\"/>\n            <TileColor>#603cba</TileColor>\n        </tile>\n    </msapplication>\n</browserconfig>\n"
  },
  {
    "path": "favicons/site.webmanifest",
    "content": "{\n    \"name\": \"\",\n    \"short_name\": \"\",\n    \"icons\": [\n        {\n            \"src\": \"android-chrome-192x192.png\",\n            \"sizes\": \"192x192\",\n            \"type\": \"image/png\"\n        },\n        {\n            \"src\": \"android-chrome-512x512.png\",\n            \"sizes\": \"512x512\",\n            \"type\": \"image/png\"\n        }\n    ],\n    \"theme_color\": \"#ffffff\",\n    \"background_color\": \"#ffffff\",\n    \"display\": \"standalone\"\n}\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <meta name=\"msapplication-TileColor\" content=\"#603cba\">\n    <meta name=\"msapplication-config\" content=\"./favicons/browserconfig.xml\">\n    <meta name=\"theme-color\" content=\"#ffffff\">\n\n    <link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"./favicons/apple-touch-icon.png\">\n    <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"./favicons/favicon-32x32.png\">\n    <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"./favicons/favicon-16x16.png\">\n    <link rel=\"manifest\" href=\"./favicons/site.webmanifest\">\n    <link rel=\"mask-icon\" href=\"./favicons/safari-pinned-tab.svg\" color=\"#21bf73\">\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css\">\n\n    <title>COVID-19 – Générateur d'attestation de déplacement</title>\n\n    <style>\n        body {\n            padding: 20px;\n        }\n\n        h4, form, footer, #alert-official {\n            margin: 30px auto;\n            max-width: 400px;\n        }\n\n        footer {\n            margin-top: 40px;\n        }\n\n        canvas {\n            border: 1px solid #ced4da;\n            border-radius: .25rem;\n        }\n\n        #form-profile .form-check {\n            margin-bottom: 1rem;\n        }\n\n        #form-profile .form-check-label {\n            font-size: 80%;\n            font-weight: 400;\n            transform: translateY(-2px);\n        }\n\n        #form-generate .form-check {\n            margin: 10px;\n        }\n\n        #alert-facebook {\n            position: fixed;\n            top: 10px;\n            left: 10px;\n            right: 10px;\n        }\n\n        #alert-official {\n            margin: 1rem auto 0;\n        }\n\n        #date-selector-group {\n            position: relative;\n            overflow: hidden;\n        }\n\n        #date-selector {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            height: 100%;\n            transform: translateX(-50%); /* center the input to avoid reset buttons */\n            opacity: 0;\n            z-index: 1;\n            cursor: pointer;\n        }\n\n        svg {\n            height: 1em;\n        }\n\n        .close {\n            margin: 0 0 15px 15px;\n        }\n\n        .btn-loader:not([disabled]) svg {\n            display: none;\n        }\n\n        .btn-loader[disabled] {\n            position: relative;\n            padding-right: 2.5rem;\n        }\n\n        .btn-loader[disabled] svg {\n            position: absolute;\n            top: 50%;\n            right: .75rem;\n            animation: svg-button-spin 1000ms infinite ease;\n        }\n\n        @keyframes svg-button-spin {\n            from { transform: translateY(-50%) rotate(0deg); }\n            to { transform: translateY(-50%) rotate(360deg); }\n        }\n    </style>\n</head>\n<body>\n    <h4>COVID-19 – Générateur d'attestation de déplacement</h4>\n\n    <div class=\"alert alert-success\" role=\"alert\" id=\"alert-official\">\n        <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n        </button>\n\n        <p><small>\n            <a href=\"https://media.interieur.gouv.fr/deplacement-covid-19/\">\n                🇫🇷 Le gouvernement a publié son propre générateur !\n            </a>\n            Il a été développé à partir de mon code (🥳), la confidentialité de vos données reste donc identique, et\n            il vous permettra de présenter votre attestation sur smartphone.\n        </small></p>\n\n        <small>\n            Mon outil restera en place mais je ne continuerai pas à le maintenir, je l'avais créé afin de faciliter le\n            remplissage des attestations, maintenant il ne me semble plus nécessaire.\n            <br>Merci pour votre soutien à tous.&nbsp;🙏\n        </small>\n    </div>\n\n    <form id=\"form-profile\" style=\"display: none\">\n        <div class=\"alert alert-primary\" role=\"alert\">\n            <small>\n                <p>\n                    Ce générateur est là pour faciliter l'usage des attestations. Les données sont stockées\n                    <u>exclusivement</u> sur votre téléphone et le code peut être consulté\n                    <a href=\"https://github.com/nesk/covid-19-certificate\">sur Github</a>.\n                </p>\n                <a href=\"https://www.interieur.gouv.fr/Actualites/L-actu-du-Ministere/Attestation-de-deplacement-derogatoire-et-justificatif-de-deplacement-professionnel\">\n                    Plus d'informations sur le site officiel du gouvernement.\n                </a>\n            </small>\n        </div>\n\n        <h5>Remplissez votre profil</h5>\n\n        <div class=\"form-group\">\n            <label for=\"field-name\">Nom et prénom</label>\n            <input type=\"text\" class=\"form-control\" id=\"field-name\" name=\"name\" autofocus>\n        </div>\n\n        <div class=\"form-group\">\n            <label for=\"field-birthday\">Date de naissance</label>\n            <div class=\"input-group\">\n                <input type=\"text\" class=\"form-control\" id=\"field-birthday\" name=\"birthday\">\n                <div class=\"input-group-append\" id=\"date-selector-group\">\n                    <input type=\"date\" id=\"date-selector\">\n                    <span class=\"input-group-text text-primary\">\n                        <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"calendar-alt\" class=\"svg-inline--fa fa-calendar-alt fa-w-14\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path fill=\"currentColor\" d=\"M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z\"></path></svg>\n                    </span>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"form-group\">\n            <label for=\"field-birthplace\">Lieu de naissance</label>\n            <input type=\"text\" class=\"form-control\" id=\"field-birthplace\" name=\"birthplace\">\n        </div>\n\n        <div class=\"form-group\">\n            <label for=\"field-address\">Adresse</label>\n            <input type=\"text\" class=\"form-control\" id=\"field-address\" name=\"address\">\n        </div>\n\n        <div class=\"form-group\">\n            <label for=\"field-town\">Ville</label>\n            <input type=\"text\" class=\"form-control\" id=\"field-town\" name=\"town\">\n        </div>\n\n        <div class=\"form-group\">\n            <label for=\"field-zipcode\">Code Postal</label>\n            <input type=\"text\" class=\"form-control\" id=\"field-zipcode\" name=\"zipcode\">\n        </div>\n\n        <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"checkbox\" id=\"check-same-town\" checked>\n            <label class=\"form-check-label\" for=\"check-same-town\">Je réside actuellement à cette adresse</label>\n        </div>\n\n        <div class=\"form-group\" id=\"group-done-at\" style=\"display: none\">\n            <label for=\"field-done-at\">Fait à</label>\n            <input type=\"text\" class=\"form-control\" id=\"field-done-at\" name=\"done-at\" disabled>\n        </div>\n\n        <div class=\"form-group\">\n            <label>Signature</label>\n            <small id=\"help-signature\" class=\"form-text text-muted\">Dessinez votre signature dans la case ci-dessous.</small>\n            <canvas id=\"field-signature\" width=360 height=240 aria-describedby=\"help-signature\"></canvas>\n            <button id=\"reset-signature\" type=\"button\" class=\"btn btn-link btn-sm float-right\">Effacer la signature</button>\n            <br><br>\n        </div>\n\n        <button type=\"submit\" class=\"btn btn-primary\">Enregistrer mon profil</button>\n    </form>\n\n    <form id=\"form-generate\" style=\"display: none\">\n        <div class=\"alert alert-warning\" role=\"alert\">\n            <small>\n                Si vous n'avez pas besoin de sortir, <u>restez chez vous</u> ! Ce générateur est là pour faciliter les\n                sorties <u>justifiées</u>. Veillez à prendre soin de vous et des autres en limitant la\n                propagation du virus. 🦠 😷\n            </small>\n        </div>\n\n        <h5>Choisissez un motif de sortie</h5>\n\n        <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"field-reason\" id=\"radio-work\" value=\"work\" checked>\n            <label class=\"form-check-label\" for=\"radio-work\">Travail</label>\n        </div>\n\n        <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"field-reason\" id=\"radio-groceries\" value=\"groceries\">\n            <label class=\"form-check-label\" for=\"radio-groceries\">Courses</label>\n        </div>\n\n        <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"field-reason\" id=\"radio-health\" value=\"health\">\n            <label class=\"form-check-label\" for=\"radio-health\">Santé</label>\n        </div>\n\n        <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"field-reason\" id=\"radio-family\" value=\"family\">\n            <label class=\"form-check-label\" for=\"radio-family\">Famille</label>\n        </div>\n\n        <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"field-reason\" id=\"radio-sport\" value=\"sport\">\n            <label class=\"form-check-label\" for=\"radio-sport\">Sport &amp; animaux</label>\n        </div>\n\n        <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"field-reason\" id=\"radio-notification\" value=\"notification\">\n            <label class=\"form-check-label\" for=\"radio-notification\">Convocation Judiciaire</label>\n        </div>\n\n        <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"field-reason\" id=\"radio-mission\" value=\"mission\">\n            <label class=\"form-check-label\" for=\"radio-mission\">Mission d'intérêt général</label>\n        </div>\n\n        <hr>\n\n        <div class=\"form-check\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"field-reason\" id=\"radio-none\" value=\"\">\n            <label class=\"form-check-label\" for=\"radio-none\">Aucun (remplissage manuel)</label>\n        </div>\n\n        <br><br>\n        <button type=\"submit\" class=\"btn btn-primary btn-loader\">\n            Imprimer mon attestation\n            <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"circle-notch\" class=\"svg-inline--fa fa-circle-notch fa-w-16\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z\"></path></svg>\n        </button>\n\n        <br><br>\n        <button type=\"button\" class=\"btn btn-link btn-sm\" onclick=\"localStorage.clear(); location.reload()\">\n            Effacer mon profil\n        </button>\n    </form>\n\n    <footer class=\"footer text-center\">\n        <small>\n            <a href=\"https://github.com/nesk/covid-19-certificate\">Github</a>\n            -\n            <a href=\"https://nesk.dev\">nesk.dev</a>\n            -\n            <a href=\"https://twitter.com/johannpardanaud\">@johannpardanaud</a>\n        </small>\n    </footer>\n\n    <div class=\"alert alert-danger\" role=\"alert\" style=\"display: none\" id=\"alert-facebook\">\n        ATTENTION !! Vous utilisez actuellement le navigateur Facebook, ce générateur ne fonctionne pas correctement au\n        sein de ce navigateur ! Merci d'ouvrir Chrome sur Android ou bien Safari sur iOS.\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/pdf-lib@1.4.1/dist/pdf-lib.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js\"></script>\n    <script src=\"certificate.js?v=183293d064f4724dacd086cb5cfeee72d758ad3d\"></script>\n</body>\n</html>\n"
  }
]