-
Notifications
You must be signed in to change notification settings - Fork 3
/
hajar.html
277 lines (238 loc) · 13.2 KB
/
hajar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above
3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Devenir Français</title>
<!-- Bootstrap -->
<link href="./vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom -->
<link href="./css/personnages.css" rel="stylesheet">
<!-- Custom police Google -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<header> </header>
<main id="hajar" class="container">
<!-- Personnage 2 : Hajar -->
<section id="intro">
<div class="col-xs-12 col-sm-6">
<p class="presentation-text">
<br>Installée dans la banlieue parisienne, Hajar, 32 ans, est arrivée en France il y a sept ans. Après sa licence d’ingénierie statistique à la faculté de Tanger, elle s’est inscrite en master à l’université Diderot à Paris. Depuis deux ans maintenant, elle souhaite se lancer dans l'entrepreunariat.
<br>Sur son temps libre, Hajar travaille à la création d’une application de modélisation prédictive. Son principe est simple : informer les Franciliens sur la situation des transports en commun, les retards et les taux de fréquentations. Afin de financer son projet, elle espère obtenir un prêt bancaire mais aussi postuler à plusieurs concours de start-up.
<br>C’est pour maximiser ses chances, mais aussi parce qu’elle se voit poursuivre sa carrière et sa vie privée en France, qu’elle est déterminée à devenir française.
</p>
</br>
</br>
<a href="#etape1" class="btn btn-default btn-lg">Suivant</a>
</div>
<div class="col-xs-12 col-sm-6">
<img src="./images/hajar_sans_fond.png" class="img-responsive" alt="Responsive image" align="right">
</div>
</section>
<!-- Etape 1 Hajar : Choix du parcours -->
<section id="etape1">
<div class="col-xs-12 col-sm-6">
<p class="presentation-text"> Hajar se rend à la préfecture proche de son domicile. Après trente minutes d’attente, elle accède au guichet. C’est Emma, agent administratif qui l’accueille.</p>
<p align="left" class="messenger"> Bonjour Hajar, je suis Emma. Je suivrai votre dossier tout au long de la procédure.
Il s'agit d'une naturalisation par décret : une faveur qui vous sera accordée ou non sur évaluation de l'administration française. </p>
</br>
</br>
<a href="#etape2" class="btn btn-default btn-lg"> Commençons les démarches ! </a>
</div>
<div class="col-xs-12 col-sm-6">
<img src="./images/guichet.jpg" class="img-responsive" alt="Responsive image" align="right">
</div>
</section>
<!-- Etape 2 Hajar : Constitution du dossier -->
<section id="etape2">
<div class="col-xs-12 col-sm-6">
<p align="left" class="Messenger"> D'abord, vérifions ensemble la liste des pièces à fournir </p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="acte_de_naissance">Acte de naissance
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="casier_judiciaire">Extrait de casier judiciaire
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="justification_vie_france">Justificatif de la vie en France
</label>
</div>
<a href="http://accueil-etrangers.gouv.fr/acces-a-la-nationalite-francaise/vous-souhaitez-demander-la-nationalite-francaise-vous-n-etes-pas-marie-e-a-un-e/article/liste-des-pieces-a-fournir" style="color:black">La liste complète des documents est disponible sur le site "Service public".</a>
<div class="WARNING" value="delai_attente">Le délai moyen pour obtenir depuis le Consulat du maroc l'original de votre extrait de naissance et votre casier judiciaire est de six mois.
</div>
<p align="left" class="Messenger">
Souhaitez-vous franciser votre prénom ? C'est une possiblité que nous suggérons dans chaque dossier de naturalisation. Bien évidemment, ce choix-là est fcaultatif et n'aura pas d'impact sur le traitement de votre dossier. </p>
<a href=#etape2bis class="btn btn-default btn-lg">Changer de prénom</a>
<a href=#etape3 class="btn btn-default btn-lg">Conserver votre prénom</a>
<div class="col-xs-12 col-sm-6">
<img src="guichet.jpg" class="img-responsive" alt="Responsive image" align="right">
</div>
</section>
<!-- Etape 2 bis Hajar : Changement de prénom -->
<section id="etape2bis">
<p align="left" class="Messenger">
Je vais vous proposer une liste de prénoms français, qui faciliteront votre intégration dans la société française.
<br>Vous ne serez bien sûr pas obligée de l’utiliser au quotidien : il figuerera simplement sur votre carte d’identité.
<br>Quel prénom choisissez-vous ?
</p>
<a href=#etape3 class="btn btn-default btn-lg" onclick="globals.name = 'Astrid';"> Astrid</a>
<a href=#etape3 class="btn btn-default btn-lg" onclick="globals.name = 'Amélie';">Amélie</a>
<a href=#etape3 class="btn btn-default btn-lg" onclick="globals.name = 'Jeanne';">Jeanne</a>
<a href="#etape3" class="btn btn-default btn-lg" onclick="globals.name = 'Hajar';">Aucun prénom ne me convient, je préfère garder Aliona.</a>
</section>
<!-- Etape 3 Hajar : Test de Français -->
<section id="etape3">
<p align="left" class="Messenger">
Normalement, vous devez passer un test de connaissance de français. Mais si vous êtes diplômée en France vous en êtes exemptée dès lors que vous nous transmettez la photocopie de votre diplôme obtenu sur le territoire, dans votre dossier. </p>
<a href="#transition1" class="btn btn-default btn-lg">Déposer le dossier</a>
</section>
<!-- Transition 1 Hajar-->
<section id="transition1">
<p> Après six mois, vous obtenez enfin du Consulat marocain votre extrait de naissance et casier judiciaire. Le dossier est complet, bravo ! Vous l'envoyez à la Préfecture qui en accuse la bonne réception. Une enquête de police et de voisinage sera menée, le plus discrètement possible. Pas d’inquiétudes ! Au bout de six longs mois d'attente, vous recevrez une convocation pour un nouvel entretien. </p>
<a href="#etape4" class="btn btn-lg btn-default">Assister à l'entretien</a>
</section>
<!-- Etape 3 Hajar : Entretien de moeurs -->
<section id="etape4">
<img src="entretien.jpg" class="img-responsive" alt="Responsive image" align="right">
<p> A vous de jouer ! L’objectif : prouver votre intégration aux valeurs de la république française.
<br>L'entretien se déroule dans le bureau d'une conseillère à la Préfecture. E
<br>Elle vous pose plusieurs questions. A chaque fois, répondez A, B ou C selon ce qui vous semble le plus approprié.</p>
<h3>Question 1</h3>
<p> Laquelle de ces trois montagnes n’est pas située en France ? </p>
<p> A - Les Alpes </p>
<p> B - L'Oural </p>
<p> C - Les Vosges </p>
<div class="radio">
<label>
<input type="radio" name="quiz_moeurs_1" data-good="0"> A
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_1" data-good="1"> B
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_1" data-good="0"> C
<br>
</label>
</div>
<h3>Question 2</h3>
<p> Combien de présidents la France a t-elle connu depuis 1958 ? </p>
<p> A - 7 </p>
<p> B - 6 </p>
<p> C - 5 </p>
<div class="radio">
<label>
<input type="radio" name="quiz_moeurs_2" data-good="1"> A
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_2" data-good="0"> B
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_2" data-good="0"> C
<br>
</label>
</div>
<h3>Question 3</h3>
<p>Quand la peine de mort a-t-elle été abolie ? </p>
<p> A - 1945 </p>
<p> B - 1978 </p>
<p> C - 1981 </p>
<div class="radio">
<label>
<input type="radio" name="quiz_moeurs_3" data-good="2"> A
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_3" data-good="1"> B
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_3" data-good="0"> C
<br>
</label>
</div>
<h3>Question 5</h3>
<p> Etes-vous pratiquante ? </p>
<p> Oui, je pratiquante ma religion, comme n'importe quel croyant </p>
<p> Non, je ne pratique pas vraiment </p>
<p> Je suis musulmane de culture, pas de croyance </p>
<div class="radio">
<label>
<input type="radio" name="quiz_moeurs_5" data-good="0"> A
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_5" data-good="2"> B
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_5" data-good="1"> C
<br>
</label>
</div>
<h3>Question 6</h3>
<p> Evoluez-vous dans un entourage mixte ? </p>
<P> A - Oui, absolument, je côtois autant d’hommes que de femmes dans mon entreprise </P>
<p> B - En France, tout le monde a la chance de vivre dans un environnement mixte, ce qui est je pense une condition à l’émancipation des femmes </p>
<p> C - La notion est évidemment importante, mais je trouve personnellement que les médias et les politiques en parlent trop, et l’instrumentalisent à leur guise. </p>
<div class="radio">
<label>
<input type="radio" name="quiz_moeurs_6" data-good="1"> A
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_6" data-good="2"> B
<br>
</label>
<label>
<input type="radio" name="quiz_moeurs_6" data-good="0"> C
<br>
</label>
</div>
<div class="hidden see-results">
<p>Vous avez répondu à toutes les questions ? Bravo.</p>
<a href="" class="btn btn-default btn-lg">Terminer l'entretien.</a>
</div>
</section>
<!-- Transition 1 Win_ceremony -->
<section id="win_ceremony">
<p>
Félicitations ! Vous avez été convaincante lors de votre entretien et votre dossier a été accepté par la Préfecture. Ne reste plus qu’à assister à la cérémonie d'accueil dans la citoyenneté française, à la préfecture de Créteil.
</p>
<a href="#etape5" class="btn btn-default btn-lg"> Assister à la cérémonie d'accueil</a>
</section>
<!-- Transition 2 Loose_startagain -->
<section id="loose_startagain">
<p> Pas de chance, votre dossier n'a pas été jugé convaincant et votre dossier a été ajourné de deux ans. Vous recevrez une lettre de la préfecture vous en informant. Attendez deux ans avant de débuter à nouveau les démarches de naturalisation.
</p>
<a href="#intro" class="btn btn-default btn-lg">Recommencer les démarches</a>
</section>
</main>
<footer></footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./vendor/jquery/dist/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="./js/main.js"></script>
</body>
</html>