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

379 lines
21 KiB
HTML
Raw Normal View History

<!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>