<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire d'inscription</title>
<link rel="stylesheet" href="aze.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<img src="téléchargement (1).jpeg" alt="Logo" class="logo"
weight="300px" height="150px">
<ul class="menu">
<li><a href="#" class="active">Inscription</a></li>
</ul>
</div>
<div class="main-content">
<div class="steps">
<span class="step active" id="step1">1</span>
<span class="step" id="step2">2</span>
<span class="step" id="step3">3</span>
<span class="step" id="step4">4</span>
<span class="step" id="step5">5</span>
</div>
<div class="form-section" id="page1">
<h2>Informations personnelles</h2>
<form id="registrationForm">
<!-- Vos champs pour la page 1 -->
<div class="form-group">
<label for="codeMassar">Nom Complet</label>
<input type="text" id="nomcomplet" name="nomcomplet"
required>
</div>
<div class="form-group">
<label for="cnie">Carte Nationale d'Identité
Electronique</label>
<input type="text" id="cnie" name="cnie" required>
</div>
<div class="form-group">
<label for="lastName">Email</label>
<input type="text" id="email" name="email" required>
</div>
<div class="form-group">
<label for="firstName">Telephone</label>
<input type="text" id="telephone" name="telephone"
required>
</div>
<div class="form-group">
<label for="dob">Date de naissance</label>
<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="placeOfBirth">Situation familiale</label>
<input type="text" id="placeOfBirth" name="placeOfBirth"
required>
</div>
<div class="form-group">
<button type="button" class="next-btn"
onclick="nextPage(2)">Suivant</button>
</div>
</form>
</div>
<div class="form-section" id="page2" style="display: none;">
<h2>Page 2 - Emploi</h2>
<!-- Vos champs pour la page 2 -->
<fieldset>
<legend>Information sur l'emploi ou le stage</legend>
<label for="position">Poste ou type de stage:</label>
<select id="position" name="position" required>
<option value="" disabled selected>Choisissez un poste ou un
type de stage</option>
<option value="chauffeur">Chauffeur</option>
<option value="assistant">Assistant</option>
<option value="technicien">Technicien</option>
<option value="stagiaire">Stagiaire</option>
</select>
<label for="availability">Disponibilité:</label>
<select id="availability" name="availability">
<option value="" disabled selected>Choisissez votre
disponibilité</option>
<option value="immediate">Immédiate</option>
<option value="one_month">Dans un mois</option>
<option value="two_months">Dans deux mois</option>
<option value="three_months">Dans trois mois</option>
</select>
</fieldset>
<fieldset>
<legend>Formation académique</legend>
<label for="educationLevel">Niveau d'études actuel:</label>
<select id="educationLevel" name="educationLevel" required>
<option value="" disabled selected>Choisissez votre niveau
d'études</option>
<option value="high_school">Lycée</option>
<option value="bachelor">Licence</option>
<option value="master">Master</option>
<option value="phd">Doctorat</option>
</select>
<label for="lastDegree">Dernier diplôme obtenu:</label>
<select id="lastDegree" name="lastDegree" required>
<option value="" disabled selected>Choisissez votre dernier
diplôme</option>
<option value="none">Aucun</option>
<option value="high_school_diploma">Diplôme de lycée</option>
<option value="bachelor">Licence</option>
<option value="master">Master</option>
<option value="phd">Doctorat</option>
</select>
<label for="studyField">Domaine d'études:</label>
<select id="studyField" name="studyField" required>
<option value="" disabled selected>Choisissez votre domaine
d'études</option>
<option value="science">Sciences</option>
<option value="engineering">Ingénierie</option>
<option value="business">Commerce</option>
<option value="arts">Arts</option>
<option value="other">Autre</option>
</select>
</fieldset>
<div class="form-group">
<button type="button" class="prev-btn"
onclick="prevPage(1)">Précédent</button>
<button type="button" class="next-btn"
onclick="nextPage(3)">Suivant</button>
</div>
</div>
<div class="form-section" id="page3" style="display: none;">
<h2>Page 3 - Informations Secondaires</h2>
<!-- Vos champs pour la page 3 -->
<fieldset>
<legend>Lettre de motivation</legend>
<label for="motivation">Lettre de motivation:</label>
<textarea id="motivation" name="motivation" rows="3"
required></textarea>
</fieldset>
<fieldset>
<legend>CV ou curriculum vitae</legend>
<input type="file" id="cv" name="cv" accept=".pdf,.doc,.docx"
required>
</fieldset>
<fieldset>
<legend>Déclaration de consentement</legend>
<label for="consent">Je consens au traitement de mes données
personnelles dans le cadre de cette candidature:</label>
<input type="checkbox" id="consent" name="consent" required>
</fieldset>
<div class="form-group">
<button type="button" class="prev-btn"
onclick="prevPage(2)">Précédent</button>
<button type="button" class="next-btn"
onclick="nextPage(4)">Suivant</button>
</div>
</div>
<div class="form-section" id="page4" style="display: none;">
<div style="height: 100%; display: flex; flex-direction: column;
justify-content: center; align-items: center;">
<h2>Page 4 - Confirmation</h2>
<div class="confirmation-instructions" style="max-width: 600px;
text-align: center;">
<p>Avant de soumettre votre candidature, veuillez prendre
note des points suivants :</p>
<ul>
<li>Vérifiez attentivement les informations
personnelles fournies pour vous assurer qu'elles sont correctes et complètes.</li>
<li>Assurez-vous que les détails sur l'emploi ou le
stage sélectionné correspondent à vos aspirations et qualifications.</li>
<li>Vérifiez que votre lettre de motivation est claire,
concise et reflète votre intérêt pour le poste.</li>
<li>Assurez-vous que votre CV est à jour et correspond
à l'emploi ou au stage pour lequel vous postulez.</li>
<li>Cochez la case de consentement pour autoriser le
traitement de vos données personnelles.</li>
</ul>
<p>En cliquant sur "Suivant", vous confirmez que vous avez
vérifié et accepté ces conditions, et vous procéderez à la soumission de votre
candidature.</p>
</div>
<div style="flex-grow: 2;"></div> <!-- Pour occuper l'espace
restant -->
<div class="form-group">
<button type="button" class="prev-btn"
onclick="prevPage(3)">Précédent</button>
<button type="button" class="next-btn"
onclick="nextPage(5)">Suivant</button>
</div>
</div>
</div>
<div class="form-section" id="page5" style="display: none;">
<h2>Page 5 - Confirmation</h2>
<p>Votre candidature a été enregistrée avec succès.</p>
<p>Vous pouvez télécharger les informations que vous avez entrées
en cliquant sur le bouton ci-dessous :</p>
<div class="form-group">
<!-- Bouton de téléchargement -->
<a href="#" id="downloadBtn"
download="informations_candidature.txt" onclick="downloadInfo()">Télécharger les
informations</a>
</div>
<div class="form-group">
<button type="button" class="prev-btn"
onclick="prevPage(4)">Précédent</button>
<button type="submit">Soumettre</button>
</div>
</div>
</div>
</div>
</div>
<script src="azea.js"></script>
<!-- Code injected by live-server -->
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets =
[].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length
== 0 || rel.toLowerCase() == "stylesheet") {
var url =
elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ?
'&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' :
'wss://';
var address = protocol + window.location.host +
window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !
sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported
WebSocket for Live-Reloading.');
}
// ]]>
</script>
</body>
</html>
