<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>ILIMBA</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div id="app">
<div id="admin-page" class="page">
<h2>Admin Login</h2>
<input type="email" id="admin-email" placeholder="Email">
<input type="password" id="admin-password"
placeholder="Password">
<button id="admin-login">Login</button>
<div class="buttons">
<a href="#enregistrement-page"
class="button">Enregistrement</a>
<a href="#extrait-de-naissance-page" class="button">Extrait
de Naissance</a>
</div>
</div>
<div id="enregistrement-page" class="page">
<h2>Enregistrement d'Extrait de Naissance</h2>
<form id="enregistrement-form">
<div class="field">
<label for="numero-unique">Numéro Unique:</label>
<input type="text" id="numero-unique" name="numero-
unique" required>
</div>
<div class="field">
<label for="declaration">Déclaration:</label>
<input type="text" id="declaration" name="declaration"
required>
</div>
<div class="field">
<label for="etablissement">Etablissement:</label>
<input type="text" id="etablissement"
name="etablissement" required>
</div>
<div class="field">
<label for="ville">Ville:</label>
<input type="text" id="ville" name="ville" required>
</div>
<div class="field">
<label for="naissance-heure">Naissance et heure:</label>
<input type="datetime-local" id="naissance-heure"
name="naissance-heure" required>
</div>
<div class="field">
<label for="sexe">Sexe:</label>
<select id="sexe" name="sexe" required>
<option value="Masculin">Masculin</option>
<option value="Féminin">Féminin</option>
</select>
</div>
<div class="field">
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom" required>
</div>
<div class="field">
<label for="nom-pere">Nom du père:</label>
<input type="text" id="nom-pere" name="nom-pere"
required>
</div>
<div class="field">
<label for="profession-pere">Profession:</label>
<input type="text" id="profession-pere" name="profession-
pere" required>
</div>
<div class="field">
<label for="nationalite-pere">Nationalité:</label>
<input type="text" id="nationalite-pere" name="nationalite-
pere" required>
</div>
<div class="field">
<label for="coutume-pere">Coutume:</label>
<input type="text" id="coutume-pere" name="coutume-
pere" required>
</div>
<div class="field">
<label for="domicile-pere">Domiciliée à:</label>
<input type="text" id="domicile-pere" name="domicile-pere"
required>
</div>
<div class="field">
<label for="nom-mere">Nom de la mère:</label>
<input type="text" id="nom-mere" name="nom-mere"
required>
</div>
<div class="field">
<label for="profession-mere">Profession:</label>
<input type="text" id="profession-mere" name="profession-
mere" required>
</div>
<div class="field">
<label for="nationalite-mere">Nationalité:</label>
<input type="text" id="nationalite-mere" name="nationalite-
mere" required>
</div>
<div class="field">
<label for="coutume-mere">Coutume:</label>
<input type="text" id="coutume-mere" name="coutume-
mere" required>
</div>
<div class="field">
<label for="domicile-mere">Domiciliée à:</label>
<input type="text" id="domicile-mere" name="domicile-
mere" required>
</div>
<button type="submit"
id="enregistrer-extrait">Enregistrer</button>
<a href="#admin-page" class="button">Retour</a>
</form>
</div>
<div id="extrait-de-naissance-page" class="page">
<h2>Extraits de Naissance</h2>
<ul id="extrait-list"></ul>
<button id="voir-extrait">Voir Extrait</button>
<a href="#admin-page" class="button">Retour</a>
</div>
<div id="impression-page" class="page">
<h2>Impression d'Extrait de Naissance</h2>
<div id="extrait-details"></div>
<button id="imprimer-extrait">Imprimer</button>
<a href="#extrait-de-naissance-page"
class="button">Retour</a>
</div>
</div>
<script src="[Link]"></script>
</body>
</html>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
.page {
display: none;
padding: 20px;
margin: 20px auto;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
max-width: 800px;
.field {
margin-bottom: 10px;
.field label {
display: block;
margin-bottom: 5px;
.field input,
.field select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
.buttons {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
text-decoration: none;
.button:hover {
background-color: #0056b3;
#extrait-list {
list-style: none;
padding: 0;
#extrait-list li {
padding: 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
#extrait-list li:last-child {
border-bottom: none;
}
#extrait-details {
margin-top: 20px;