deplacement-covid-19/src/index-en.html

379 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-config" content="./favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<meta name="title" content="international travel certificate to mainland France - COVID-19">
<meta name="description" content="Ce service officiel génère une version numérique de lattestation déplacement covid-19 à présenter aux forces de sécurité lors dun contrôle.">
<meta name="keywords" content="covid19, covid-19, certificate, travel, international, official, government">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta property="og:title" content="Generator of international travel certificate to mainland France - COVID-19" />
<meta property="og:locale" content="fr_FR" />
<meta property="og:description" content="Ce service officiel génère une version numérique de lattestation déplacement covid-19 à présenter aux forces de sécurité lors dun contrôle." />
<link rel="canonical" href="https://media.interieur.gouv.fr/deplacement-vers-france-covid-19/" />
<meta property="og:url" content="https://media.interieur.gouv.fr/deplacement-vers-france-covid-19/" />
<meta property="og:site_name" content="Generator of international travel certificate to mainland France - COVID-19" />
<script type='application/ld+json'>{"@context":"http://www.schema.org","@type":"GovernmentOrganization","name":"Générateur d'attestation de déplacement international dérogatoire vers la France métropolitaine - COVID-19","description":"Ce service officiel génère une version numérique de lattestation déplacement covid-19 à présenter aux forces de sécurité lors dun contrôle.","address":{"@type":"PostalAddress","addressCountry":"France"}}</script>
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
<link rel="manifest" href="./favicons/site.webmanifest">
<link rel="mask-icon" href="./favicons/safari-pinned-tab.svg" color="#21bf73">
<title>COVID-19 Generator of international travel certificate to mainland France</title>
</head>
<body>
<header role="banner" class="wrapper">
<ul class="flex-justify">
<img class="logo" src="/MIN_Interieur_RVB.svg" alt="Ministère de l'intérieur. Liberté, égalité, fraternité.">
<fieldset class="form-language">
<legend class="legend-language">Select your language</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-language" id="radio-language-en" value="en" checked>
<label class="form-check-label" for="radio-language-en">ENGLISH</label>
<img class="flags" src="flag EN.svg">
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-language" id="radio-language-fr" value="fr">
<label class="form-check-label" for="radio-language-fr">FRANCAIS</label>
<img class="flags" src="Flag_of_France.svg">
</div>
</fieldset>
</ul>
<div>
<h1 class="flex flex-wrap">
<span class="covid-title">
COVID-19
</span>
<span class="covid-subtitle">
Generator of international travel certificate to mainland France
</span>
</h1>
<p class="text-alert">
Filled in data is exclusively stored on your mobile phone or computer.
No information is collected by the Ministry of the Interior.
The generated pdf certificate has a QR Code.
This visual barcode makes it possible to read the information on your certificate at the time it was entered.
It is readable with all generic QR code readers.
</p>
<p>
This certificate must be presented to transportation companies, before boarding, by passengers travelling to
mainland France. It must also be presented to border control authorities, for any type of border:
<ul>
<li>European external borders of France (air, maritime, land including railway connections).</li>
<li>European internal borders of France.</li>
</ul>
</p>
</div>
</header>
<main role="main">
<p class="alert alert-danger d-none" role="alert" id="alert-facebook"></p>
<div class="wrapper">
<form id="form-profile" accept-charset="UTF-8">
<h2 class="titre-2">Fill online your digital certificate&nbsp;:</h2>
<p class="text-alert">All fields are mandatory.</p>
<div class="form-group">
<label for="field-firstname" id="field-firstname-label">First name</label>
<div class="input-group align-items-center">
<input
type="text"
class="form-control"
id="field-firstname"
name="firstname"
autocomplete="given-name"
placeholder="Jean"
required
aria-invalid="true"
>
<span class="validity" aria-hidden="true"></span>
</div>
<p class="exemple"></p>
</div>
<div class="form-group">
<label for="field-lastname" id="field-lastname-label">Surname</label>
<div class="input-group align-items-center">
<input
type="text"
class="form-control"
id="field-lastname"
name="lastname"
autocomplete="family-name"
placeholder="Dupont"
aria-invalid="true"
required
>
<span class="validity" aria-hidden="true"></span>
</div>
<p class="exemple"></p>
</div>
<div class="form-group">
<label for="field-birthday" id="field-birthday-label">Date of birth (dd/mm/yyyy)</label>
<div class="input-group align-items-center">
<input
type="text"
pattern="^([0][1-9]|[1-2][0-9]|30|31)\/([0][1-9]|10|11|12)\/(19[0-9][0-9]|20[0-1][0-9]|2020)"
inputmode="numeric"
class="form-control"
id="field-birthday"
name="birthday"
aria-invalid="true"
autocomplete="bday"
placeholder="01/01/1970"
maxlength="10"
required
>
<span class="validity" aria-hidden="true"></span>
</div>
<p class="exemple"></p>
</div>
<div class="form-group">
<label for="field-nationality" id="field-nationality-label">Nationality</label>
<div class="input-group align-items-center">
<input
type="text"
class="form-control"
id="field-nationality"
name="nationality"
autocomplete="country-name"
aria-invalid="true"
placeholder="Belgian"
required
>
<span class="validity" aria-hidden="true"></span>
</div>
<p class="exemple"></p>
</div>
<div class="form-group">
<label for="field-address" id="field-address-label">Address</label>
<div class="input-group align-items-center">
<input
type="text"
class="form-control"
id="field-address"
name="address"
aria-invalid="true"
autocomplete="address-line1"
placeholder="999 avenue de Belgique"
required
>
<span class="validity" aria-hidden="true"></span>
</div>
<p class="exemple"></p>
</div>
<div class="form-group">
<label for="field-town" id="field-town-label">City</label>
<div class="input-group align-items-center">
<input
type="text"
class="form-control"
id="field-town"
name="town"
autocomplete="address-level1"
aria-invalid="true"
placeholder="Brussels"
required
>
<span class="validity" aria-hidden="true"></span>
</div>
<p class="exemple"></p>
</div>
<div class="form-group">
<label for="field-zipcode" id="field-zipcode-label" >Zip code</label>
<div class="input-group align-items-center">
<input
type="text"
class="form-control"
id="field-zipcode"
name="zipcode"
aria-invalid="true"
autocomplete="postal-code"
placeholder="1000"
required
>
<span class="validity" aria-hidden="true"></span>
</div>
<p class="exemple"></p>
</div>
<div class="form-group">
<label for="field-country" id="field-country-label">Country</label>
<div class="input-group align-items-center">
<input
type="text"
class="form-control"
id="field-country"
name="country"
autocomplete="country-name"
aria-invalid="true"
placeholder="Belgium"
required
>
<span class="validity" aria-hidden="true"></span>
</div>
<p class="exemple"></p>
</div>
<fieldset class="control">
<legend class="titre-3">You are : </legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-type-nationality" id="radio-tiers" value="tiers">
<label class="form-nationality-label" for="radio-tiers">Third country nationals.</label>
<fieldset class='conditional'>
<legend class="titre-4">Choose the reason :</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-residence-tiers" value="residence">
<label class="form-check-label" for="radio-residence-tiers">Individuals having their primary residence in France or in the European Union or assimilated countries<a href="#footnote1">[1]</a>, who are holders of a French or European residence permit or valid long-stay visa, accompanied by their spouse and
children.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-transit-tiers" value="transit">
<label class="form-check-label" for="radio-transit-tiers">Individuals in transit to reach their country of origin who are holders of a travel document to their country of origin and remaining in the international area with no intention to enter the national territory.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-prof._sante-tiers" value="prof._sante">
<label class="form-check-label" for="radio-prof._sante-tiers">Healthcare workers supporting the fight against Covid-19.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-marchandises-tiers" value="marchandises">
<label class="form-check-label" for="radio-marchandises-tiers">Goods carriers, including seamen.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-equipage-tiers" value="equipage">
<label class="form-check-label" for="radio-equipage-tiers">Flight and cargo crews, or travelling as a passenger to their departure base.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-diplomatique-tiers" value="diplomatique">
<label class="form-check-label" for="radio-diplomatique-tiers">Diplomatic mission staff, or international organisations staff working in headquarters or offices located in France, who are holders of a special residence permit or a type D promae visa.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-frontalier-tiers" value="frontalier">
<label class="form-check-label" for="radio-frontalier-tiers">Cross-border workers at internal land borders.</label>
</div>
</fieldset>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-type-nationality" id="radio-eu" value="eu">
<label class="form-nationality-label" for="radio-eu">European Union or assimilated countries nationals<a href="#footnote2">[2]</a>.</label>
<fieldset class='conditional'>
<legend class="titre-4">Choose the reason :</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-residence-eu" value="residence">
<label class="form-check-label" for="radio-residence-eu">Individuals having their primary residence in France, accompanied by their spouse and children.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-transit-eu" value="transit">
<label class="form-check-label" for="radio-transit-eu">Individuals transiting through France to reach their residence, accompanied by their spouse and children.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-prof._sante-eu" value="prof._sante">
<label class="form-check-label" for="radio-prof._sante-eu">Healthcare workers supporting the fight against Covid-19.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-marchandises-eu" value="marchandises">
<label class="form-check-label" for="radio-marchandises-eu">Goods carriers, including seamen.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-equipage-eu" value="equipage">
<label class="form-check-label" for="radio-equipage-eu">Flight and cargo crews, or travelling as a passenger to their departure base.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-diplomatique-eu" value="diplomatique">
<label class="form-check-label" for="radio-diplomatique-eu">Diplomatic mission staff, or international organisations staff working in headquarters or offices located in France,
who are hold ers of a special residence permit or a type D promae visa.</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-reason" id="radio-frontalier" value="frontalier">
<label class="form-check-label" for="radio-frontalier">Cross-border workers at internal land borders.</label>
</div>
</fieldset>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="field-type-nationality" id="radio-fr" value="fr">
<label class="form-nationality-label" for="radio-fr">French nationals, accompanied by their spouse and children.</label>
</div>
</fieldset>
<p class="text-center mt-5">
<button type="button" id="generate-btn" class="btn btn-primary btn-attestation"><span ><i class="fa fa-file-pdf inline-block mr-1"></i> Generate my certificate</span></button>
</p>
<div class="bg-primary d-none" id="snackbar">
The certificate is downloaded on your terminal.
</div>
</form>
</div>
<div class="">
<p id="footnotes">
<span id="footnote1">[1] United Kingdom, Iceland, Liechtenstein, Norway, Andorra, Monaco, Switzerland, San Marino, Holy See.</span><br>
<span id="footnote2">[2] European Union, United Kingdom, Iceland, Liechtenstein, Norway, Andorra, Monaco, Switzerland, San Marino and Holy See nationals (2004/38/CE directive).</span>
</p>
<p class="github">
The source code of this service is available for consultation on <a href="https://github.com/LAB-MI/deplacement-covid-19" class="github-link">GitHub</a>.
</p>
<p class="label-mi">
Ministry of the Interior - DNUM - SDIT
</p>
<img class="center" src="/logo_dnum.svg" alt="logo dnum">
</div>
</main>
<footer role="contentinfo" class="main-footer">
<div class="footer-links">
<a href="./confidentialite.html" title="Confidentialité - nouvelle page" target="_blank" class="footer-line footer-link">Privacy policy</a>
<a href="https://www.interieur.gouv.fr/Infos-du-site/Mentions-legales" title="Mentions légales - nouvelle page" target="_blank" class="footer-line footer-link">Legal notices</a>
<a href="https://www.gouvernement.fr/info-coronavirus" title="Informations du gouvernement sur le Covid-19 - nouvelle page" target="_blank" class="footer-line footer-link">Government information on COVID-19</a>
<div class="footer-line" >For more information, call <a class="num-08" href="tel:0800130000">0 800 130 000</a></div>
<p class="footer-line" id="version"></p>
</div>
</footer>
<div class="alert alert-info d-none" id="update-alert">
A new version is available. Click on the button to get it.
<p class="text-right">
<button id="reload-btn" class="btn btn-info">Update</button>
</p>
</div>
<script src="./certificate-en.js"></script>
</body>
</html>