skywodd · April 7, 2020 13:35
diff --git a/attestation.html b/attestation.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>ATTESTATION DE DÉPLACEMENT DÉROGATOIRE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    
    <style>
      @font-face {
        font-family: 'Marianne';
        src: 
 	        url('fonts/Marianne.ttf') 
 	        format('truetype');
      }
      
      @font-face {
        font-family: 'Inter';
        src: 
 	        url('fonts/Inter.otf') 
 	        format('opentype');
      }
      
      @page {
        size: A4;
        margin: 0;
      }
      
      .container {
        margin: auto;
        width: 17cm;
        padding: 1cm 2cm 1cm 2cm;
      }
      
      h1 {
        font-family: 'Marianne', sans-serif;
        font-size: 16pt;
        text-align: center;
      }
      
      p {
        font-family: 'Inter', sans-serif;
        font-size: 10pt;
        margin-top: 9px;
        margin-bottom: 9px;
      }
      
      p.small {
        font-size: 8pt;
      }
      
      p.very-small {
        font-size: 6pt;
      }
      
      .text-center {
        text-align: center;
      }
      
      .text-right {
        text-align: right;
      }
      
      .tick-box {
        height: 25px;
        width: 25px;
        border: 2px solid #000;
        
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .tick-tick {
        font-size: 16pt;
        font-weight: bold;
      }
      
      .hidden {
        visibility: hidden;
      }
      
      .row {
        display: flex;
      }

      .row-left {
        flex: 1;
        padding: 1rem;
      }

      .row-right {
        flex: 1;
        padding: 1rem;
      }
      
      .row-right > img {
        float: right;
        width: 3cm;
        height: 3cm;
        background-color: gray;
      }
      
      .row-right > p {
        clear: right
      }
      
    </style>
  </head>
  <body>
    <div class="container">
      <h1>ATTESTATION DE DÉPLACEMENT DÉROGATOIRE</h1>
      
      <p class="text-center">En application de l’article 3 du décret du 23 mars 2020 prescrivant les mesures générales <br>
      nécessaires pour faire face à l’épidémie de Covid19 dans le cadre de l’état d’urgence sanitaire<p>
      
      <p>Je soussigné(e),</p>
      
      <p>Mme/M. : {PRENOM} {NOM}</p>
      
      <p>Né(e) le : {DATE_DE_NAISSANCE}</p>
      
      <p>À : {LIEU_DE_NAISSANCE}</p>
      
      <p>Demeurant : {ADRESSE_POSTALE} {CODE_POSTAL} {VILLE_DE_RESIDENCE}</p>
      
      <p>certifie que mon déplacement est lié au motif suivant (cocher la case) autorisé par l’article 3 du <br>
      décret du 23 mars 2020 prescrivant les mesures générales nécessaires pour faire face à <br>
      l’épidémie de Covid19 dans le cadre de l’état d’urgence sanitaire<sup>1</sup> :</p>
      
      <!-- Remplacer {RAISON_xxx} par hidden pour cacher la coche -->
      
      <table>
      <tr>
        <td><div class="tick-box"><span class="tick-tick {RAISON_TRAVAIL}">✓</span></div><td>
        <td>
          <p>Déplacements entre le domicile et le lieu d’exercice de l’activité professionnelle, <br>
          lorsqu’ils sont indispensables à l’exercice d’activités ne pouvant être organisées sous <br>
          forme de télétravail ou déplacements professionnels ne pouvant être différés<sup>2</sup>.</p>
        <td>
      </tr>
      
      <tr>
        <td><div class="tick-box"><span class="tick-tick {RAISON_COURSES}">✓</span></div><td>
        <td>
          <p>Déplacements pour effectuer des achats de fournitures nécessaires à l’activité <br>
          professionnelle et des achats de première nécessité<sup>3</sup> dans des établissements dont les <br>
          activités demeurent autorisées (liste sur gouvernement.fr).</p>
        <td>
      </tr>
      
      <tr>
        <td><div class="tick-box"><span class="tick-tick {RAISON_SANTE}">✓</span></div><td>
        <td>
          <p>Consultations et soins ne pouvant être assurés à distance et ne pouvant être différés ; <br>
          consultations et soins des patients atteints d'une affection de longue durée.</p>
        <td>
      </tr>
      
      <tr>
        <td><div class="tick-box"><span class="tick-tick {RAISON_FAMILLE}">✓</span></div><td>
        <td>
          <p>Déplacements pour motif familial impérieux, pour l’assistance aux personne <br>
          vulnérables ou la garde d’enfants.</p>
        <td>
      </tr>
      
      <tr>
        <td><div class="tick-box"><span class="tick-tick {RAISON_SPORT}">✓</span></div><td>
        <td>
          <p>Déplacements brefs, dans la limite d'une heure quotidienne et dans un rayon maximal <br>
          d'un kilomètre autour du domicile, liés soit à l'activité physique individuelle des <br>
          personnes, à l'exclusion de toute pratique sportive collective et de toute proximité avec <br>
          d'autres personnes, soit à la promenade avec les seules personnes regroupées dans un <br>
          même domicile, soit aux besoins des animaux de compagnie.</p>
        <td>
      </tr>
      
      <tr>
        <td><div class="tick-box"><span class="tick-tick {RAISON_JUDICIAIRE}">✓</span></div><td>
        <td>
          <p>Convocation judiciaire ou administrative.</p>
        <td>
      </tr>
      
      <tr>
        <td><div class="tick-box"><span class="tick-tick {RAISON_MISSIONS}">✓</span></div><td>
        <td>
          <p>Participation à des missions d’intérêt général sur demande de l’autorité administrative.</p>
        <td>
      </tr>
      
      </table>
      
      <div class="row">
        <div class="row-left">
          <p>Fait à : {VILLE_DE_RESIDENCE}</p>
          
          <!-- Date au format jj/mm/aaaa et Heure au format hh "h" mm -->
          <p>Le : {DATE_SORTIE} à {HEURE_SORTIE}<br>
          (Date et heure de début de sortie)</p>
     
          <!-- Remplacer {SIGNATURE} par hidden pour cacher le texte -->
          <p class="{SIGNATURE}">Signature :</p>
        </div>
        
        <div class="row-right">
          <img src="qrcode.png"></img>
        
          <!-- Date au format jj/mm/aaaa et Heure au format hh "h" mm -->
          <p class="very-small text-right">Date de création :<br>
          {DATE_CREATION} à {HEURE_CREATION}</p>
        </div>
      </div>
      
      <p class="small"><sup>1</sup> Les personnes souhaitant bénéficier de l'une de ces exceptions doivent se munir s’il y a lieu, lors de leurs <br>
      déplacements hors de leur domicile, d'un document leur permettant de justifier que le déplacement considéré entre <br>
      dans le champ de l'une de ces exceptions</p>
     
      <p class="small"><sup>2</sup> A utiliser par les travailleurs non-salariés, lorsqu’ils ne peuvent disposer d’un justificatif de déplacement établi par leur <br>
      employeur.</p>
      
      <p class="small"><sup>3</sup> Y compris les acquisitions à titre gratuit (distribution de denrées alimentaires…) et les déplacements liés à la <br>
      perception de prestations sociales et au retrait d’espèces.</p>
    
    </div>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>ATTESTATION DE DÉPLACEMENT DÉROGATOIRE</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">

	<style>
	@font-face {
	font-family: 'Marianne';
	src:
	url('fonts/Marianne.ttf')
	format('truetype');
	}

	@font-face {
	font-family: 'Inter';
	src:
	url('fonts/Inter.otf')
	format('opentype');
	}

	@page {
	size: A4;
	margin: 0;
	}

	.container {
	margin: auto;
	width: 17cm;
	padding: 1cm 2cm 1cm 2cm;
	}

	h1 {
	font-family: 'Marianne', sans-serif;
	font-size: 16pt;
	text-align: center;
	}

	p {
	font-family: 'Inter', sans-serif;
	font-size: 10pt;
	margin-top: 9px;
	margin-bottom: 9px;
	}

	p.small {
	font-size: 8pt;
	}

	p.very-small {
	font-size: 6pt;
	}

	.text-center {
	text-align: center;
	}

	.text-right {
	text-align: right;
	}

	.tick-box {
	height: 25px;
	width: 25px;
	border: 2px solid #000;

	display: flex;
	justify-content: center;
	align-items: center;
	}

	.tick-tick {
	font-size: 16pt;
	font-weight: bold;
	}

	.hidden {
	visibility: hidden;
	}

	.row {
	display: flex;
	}

	.row-left {
	flex: 1;
	padding: 1rem;
	}

	.row-right {
	flex: 1;
	padding: 1rem;
	}

	.row-right > img {
	float: right;
	width: 3cm;
	height: 3cm;
	background-color: gray;
	}

	.row-right > p {
	clear: right
	}

	</style>
	</head>
	<body>
	<div class="container">
	<h1>ATTESTATION DE DÉPLACEMENT DÉROGATOIRE</h1>

	<p class="text-center">En application de l’article 3 du décret du 23 mars 2020 prescrivant les mesures générales <br>
	nécessaires pour faire face à l’épidémie de Covid19 dans le cadre de l’état d’urgence sanitaire<p>

	<p>Je soussigné(e),</p>

	<p>Mme/M. : {PRENOM} {NOM}</p>

	<p>Né(e) le : {DATE_DE_NAISSANCE}</p>

	<p>À : {LIEU_DE_NAISSANCE}</p>

	<p>Demeurant : {ADRESSE_POSTALE} {CODE_POSTAL} {VILLE_DE_RESIDENCE}</p>

	<p>certifie que mon déplacement est lié au motif suivant (cocher la case) autorisé par l’article 3 du <br>
	décret du 23 mars 2020 prescrivant les mesures générales nécessaires pour faire face à <br>
	l’épidémie de Covid19 dans le cadre de l’état d’urgence sanitaire<sup>1</sup> :</p>

	<!-- Remplacer {RAISON_xxx} par hidden pour cacher la coche -->

	<table>
	<tr>
	<td><div class="tick-box"><span class="tick-tick {RAISON_TRAVAIL}">✓</span></div><td>
	<td>
	<p>Déplacements entre le domicile et le lieu d’exercice de l’activité professionnelle, <br>
	lorsqu’ils sont indispensables à l’exercice d’activités ne pouvant être organisées sous <br>
	forme de télétravail ou déplacements professionnels ne pouvant être différés<sup>2</sup>.</p>
	<td>
	</tr>

	<tr>
	<td><div class="tick-box"><span class="tick-tick {RAISON_COURSES}">✓</span></div><td>
	<td>
	<p>Déplacements pour effectuer des achats de fournitures nécessaires à l’activité <br>
	professionnelle et des achats de première nécessité<sup>3</sup> dans des établissements dont les <br>
	activités demeurent autorisées (liste sur gouvernement.fr).</p>
	<td>
	</tr>

	<tr>
	<td><div class="tick-box"><span class="tick-tick {RAISON_SANTE}">✓</span></div><td>
	<td>
	<p>Consultations et soins ne pouvant être assurés à distance et ne pouvant être différés ; <br>
	consultations et soins des patients atteints d'une affection de longue durée.</p>
	<td>
	</tr>

	<tr>
	<td><div class="tick-box"><span class="tick-tick {RAISON_FAMILLE}">✓</span></div><td>
	<td>
	<p>Déplacements pour motif familial impérieux, pour l’assistance aux personne <br>
	vulnérables ou la garde d’enfants.</p>
	<td>
	</tr>

	<tr>
	<td><div class="tick-box"><span class="tick-tick {RAISON_SPORT}">✓</span></div><td>
	<td>
	<p>Déplacements brefs, dans la limite d'une heure quotidienne et dans un rayon maximal <br>
	d'un kilomètre autour du domicile, liés soit à l'activité physique individuelle des <br>
	personnes, à l'exclusion de toute pratique sportive collective et de toute proximité avec <br>
	d'autres personnes, soit à la promenade avec les seules personnes regroupées dans un <br>
	même domicile, soit aux besoins des animaux de compagnie.</p>
	<td>
	</tr>

	<tr>
	<td><div class="tick-box"><span class="tick-tick {RAISON_JUDICIAIRE}">✓</span></div><td>
	<td>
	<p>Convocation judiciaire ou administrative.</p>
	<td>
	</tr>

	<tr>
	<td><div class="tick-box"><span class="tick-tick {RAISON_MISSIONS}">✓</span></div><td>
	<td>
	<p>Participation à des missions d’intérêt général sur demande de l’autorité administrative.</p>
	<td>
	</tr>

	</table>

	<div class="row">
	<div class="row-left">
	<p>Fait à : {VILLE_DE_RESIDENCE}</p>

	<!-- Date au format jj/mm/aaaa et Heure au format hh "h" mm -->
	<p>Le : {DATE_SORTIE} à {HEURE_SORTIE}<br>
	(Date et heure de début de sortie)</p>

	<!-- Remplacer {SIGNATURE} par hidden pour cacher le texte -->
	<p class="{SIGNATURE}">Signature :</p>
	</div>

	<div class="row-right">
	<img src="qrcode.png"></img>

	<!-- Date au format jj/mm/aaaa et Heure au format hh "h" mm -->
	<p class="very-small text-right">Date de création :<br>
	{DATE_CREATION} à {HEURE_CREATION}</p>
	</div>
	</div>

	<p class="small"><sup>1</sup> Les personnes souhaitant bénéficier de l'une de ces exceptions doivent se munir s’il y a lieu, lors de leurs <br>
	déplacements hors de leur domicile, d'un document leur permettant de justifier que le déplacement considéré entre <br>
	dans le champ de l'une de ces exceptions</p>

	<p class="small"><sup>2</sup> A utiliser par les travailleurs non-salariés, lorsqu’ils ne peuvent disposer d’un justificatif de déplacement établi par leur <br>
	employeur.</p>

	<p class="small"><sup>3</sup> Y compris les acquisitions à titre gratuit (distribution de denrées alimentaires…) et les déplacements liés à la <br>
	perception de prestations sociales et au retrait d’espèces.</p>

	</div>
	</body>
	</html>