<!DOCTYPE html>
<html class="light" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Suivi des Inscriptions de Noël 2024</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<link rel="stylesheet" href="<?= base_url('css/style.css') ?>">
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#d9534f",
                        "background-light": "#f8f6f6",
                        "background-dark": "#221010",
                        "success": "#28A745",
                        "warning": "#FFC107",
                        "text-light": "#343A40",
                        "text-dark": "#f8f6f6",
                        "text-subtle-light": "#6c757d",
                        "text-subtle-dark": "#adb5bd",
                        "border-light": "#dee2e6",
                        "border-dark": "#495057",
                        "card-light": "#ffffff",
                        "card-dark": "#343a40",
                    },
                    fontFamily: {
                        "display": ["Public Sans", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-text-light dark:text-text-dark">
<div class="relative flex min-h-screen w-full flex-col">
<div class="layout-container flex h-full grow flex-col">
<div class="flex flex-1 justify-center py-5 sm:px-6 lg:px-8">
<div class="layout-content-container flex flex-col w-full max-w-7xl flex-1">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-border-light dark:border-border-dark px-4 py-3 sm:px-6">
<div class="flex items-center gap-4">
<img alt="Logo MEN" class="h-12 w-12" src="<?=base_url()?>assets/img/MEN.jpg"/>
<div class="flex flex-col">
<h2 class="text-sm font-bold leading-tight tracking-[-0.015em]">Ministère de l'Éducation Nationale</h2>
<p class="text-xs font-normal leading-normal text-text-subtle-light dark:text-text-subtle-dark">République du Sénégal</p>
</div>
</div>
<div class="flex items-center gap-2 sm:gap-4">
<nav class="hidden md:flex items-center gap-4">
<a class="text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark hover:text-text-light dark:hover:text-text-dark" href="ArbreNoel/">Accueil</a>
<a class="text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark hover:text-text-light dark:hover:text-text-dark" href="ArbreNoel/statistique">Statistiques des inscrits</a>
<a class="text-sm font-bold text-primary dark:text-primary" href="enfant">Enfants Inscrits</a>
</nav>
<button class="md:hidden flex cursor-pointer items-center justify-center rounded-lg h-10 w-10 bg-background-light dark:bg-background-dark/50 hover:bg-black/5 dark:hover:bg-white/5">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" data-alt="Avatar de l'utilisateur" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDyswPqPkqtu2dCWf-bOTpiqRBbWYIlQ66Cgk_UkBK6uX0gKC1vMBxt1e1y_oCsU180__1mZ9vFK0ByBrC3pjckRomocIrdHlLRcZN8ingD6OeKqPHElOZXSHTUFb1UZ3Y5xi-UY43Un5wYLyVee3pCqqGLkCkrBvkSl7HJ_wfk0MjpVFCQ6fRylXR2k6HlW1yvYgq6z-V0kJSJBMndqD7GcBkAfL9XgkNAtJhxtm04vQf1wVmNIaa2Wct9n4Mw9LaXLzGw7zf1A3c");'></div>
</div>
</header>
<main class="flex flex-col gap-6 p-4 sm:p-6">
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex flex-col gap-2">
<p class="text-4xl font-black leading-tight tracking-[-0.033em]">Suivi des Inscriptions de Noël</p>
<p class="text-base font-normal leading-normal text-text-subtle-light dark:text-text-subtle-dark">Tableau de bord récapitulatif des enfants inscrits pour la distribution de cadeaux.</p>
</div>
<button class="flex items-center justify-center gap-2 rounded-lg bg-primary h-12 px-6 text-base font-bold text-white shadow-sm hover:bg-primary/90">
<span class="material-symbols-outlined">add</span>
<span>Ajouter un enfant</span>
</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="flex flex-1 flex-col gap-2 rounded-xl p-6 border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark shadow-sm">
<p class="text-base font-medium leading-normal text-text-subtle-light dark:text-text-subtle-dark">Total d'inscrits</p>
<p class="tracking-light text-3xl font-bold leading-tight">152</p>
</div>
<div class="flex flex-1 flex-col gap-2 rounded-xl p-6 border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark shadow-sm">
<p class="text-base font-medium leading-normal text-text-subtle-light dark:text-text-subtle-dark">Inscrits par tranche d'âge</p>
<p class="tracking-light text-base sm:text-lg lg:text-xl font-bold leading-tight">0-3: 45 | 4-6: 67 | 7-10: 40</p>
</div>
<div class="flex flex-1 flex-col gap-2 rounded-xl p-6 border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark shadow-sm">
<p class="text-base font-medium leading-normal text-text-subtle-light dark:text-text-subtle-dark">Cadeaux à préparer</p>
<p class="tracking-light text-3xl font-bold leading-tight">89</p>
</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark shadow-sm">
<div class="flex flex-wrap items-center justify-between gap-4 px-6 pt-4">
<div class="relative w-full sm:max-w-xs">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="material-symbols-outlined text-text-subtle-light dark:text-text-subtle-dark">search</span>
</div>
<input class="block w-full rounded-lg border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark py-2 pl-10 pr-4 focus:border-primary focus:ring-primary dark:focus:border-primary dark:focus:ring-primary" placeholder="Rechercher un enfant..." type="text"/>
</div>
<div class="flex items-center gap-2">
<button class="flex items-center justify-center gap-2 rounded-lg h-10 px-4 text-sm font-medium border border-border-light dark:border-border-dark hover:bg-black/5 dark:hover:bg-white/5">
<span class="material-symbols-outlined text-base">filter_list</span>
<span>Filtrer</span>
</button>
</div>
</div>
<div class="w-full overflow-x-auto">
<table class="min-w-full text-left">
<thead class="border-b border-border-light dark:border-border-dark">
<tr>
<th class="px-6 py-3 text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark">Nom de l'enfant</th>
<th class="px-6 py-3 text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark">Âge</th>
<th class="px-6 py-3 text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark hidden md:table-cell">Service du Parent</th>
<th class="px-6 py-3 text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark hidden lg:table-cell">Cadeau</th>
<th class="px-6 py-3 text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark">Statut</th>
<th class="px-6 py-3 text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark">Actions</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-light dark:border-border-dark hover:bg-black/5 dark:hover:bg-white/5">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">Léa Martin</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark">5 ans</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden md:table-cell">Ressources Humaines</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden lg:table-cell">Poupée</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="inline-flex items-center rounded-full bg-success/20 px-3 py-1 text-xs font-medium text-success">Confirmé</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="flex items-center justify-center h-8 w-8 rounded-lg hover:bg-black/10 dark:hover:bg-white/10"><span class="material-symbols-outlined text-lg">visibility</span></button>
</td>
</tr>
<tr class="border-b border-border-light dark:border-border-dark hover:bg-black/5 dark:hover:bg-white/5">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">Hugo Bernard</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark">8 ans</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden md:table-cell">Direction Technique</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden lg:table-cell">Jeu de construction</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="inline-flex items-center rounded-full bg-success/20 px-3 py-1 text-xs font-medium text-success">Confirmé</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="flex items-center justify-center h-8 w-8 rounded-lg hover:bg-black/10 dark:hover:bg-white/10"><span class="material-symbols-outlined text-lg">visibility</span></button>
</td>
</tr>
<tr class="border-b border-border-light dark:border-border-dark hover:bg-black/5 dark:hover:bg-white/5">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">Chloé Petit</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark">2 ans</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden md:table-cell">Communication</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden lg:table-cell">Livre d'éveil</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="inline-flex items-center rounded-full bg-warning/20 px-3 py-1 text-xs font-medium text-warning">En attente</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="flex items-center justify-center h-8 w-8 rounded-lg hover:bg-black/10 dark:hover:bg-white/10"><span class="material-symbols-outlined text-lg">visibility</span></button>
</td>
</tr>
<tr class="border-b border-border-light dark:border-border-dark hover:bg-black/5 dark:hover:bg-white/5">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">Arthur Dubois</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark">10 ans</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden md:table-cell">Services Généraux</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden lg:table-cell">Jeu de société</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="inline-flex items-center rounded-full bg-success/20 px-3 py-1 text-xs font-medium text-success">Confirmé</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="flex items-center justify-center h-8 w-8 rounded-lg hover:bg-black/10 dark:hover:bg-white/10"><span class="material-symbols-outlined text-lg">visibility</span></button>
</td>
</tr>
<tr class="hover:bg-black/5 dark:hover:bg-white/5">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">Manon Leroy</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark">6 ans</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden md:table-cell">Ressources Humaines</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-text-subtle-light dark:text-text-subtle-dark hidden lg:table-cell">Kit de dessin</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="inline-flex items-center rounded-full bg-success/20 px-3 py-1 text-xs font-medium text-success">Confirmé</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="flex items-center justify-center h-8 w-8 rounded-lg hover:bg-black/10 dark:hover:bg-white/10"><span class="material-symbols-outlined text-lg">visibility</span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between px-6 py-3 border-t border-border-light dark:border-border-dark">
<p class="text-sm text-text-subtle-light dark:text-text-subtle-dark">
                                    Affichage de <span class="font-medium">1</span> à <span class="font-medium">5</span> sur <span class="font-medium">152</span> résultats
                                </p>
<div class="flex items-center gap-2">
<button class="inline-flex items-center justify-center h-8 w-8 rounded-lg border border-border-light dark:border-border-dark text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark hover:bg-black/5 dark:hover:bg-white/5">
<span class="material-symbols-outlined text-lg">chevron_left</span>
</button>
<button class="inline-flex items-center justify-center h-8 w-8 rounded-lg border border-border-light dark:border-border-dark text-sm font-medium text-text-subtle-light dark:text-text-subtle-dark hover:bg-black/5 dark:hover:bg-white/5">
<span class="material-symbols-outlined text-lg">chevron_right</span>
</button>
</div>
</div>
</div>
</main>
<footer class="mt-auto w-full border-t border-border-light dark:border-border-dark py-8 px-4 sm:px-6 lg:px-8">
<div class="text-center text-text-subtle-light dark:text-text-subtle-dark text-sm">
<p class="font-medium text-text-light dark:text-text-dark">Ministère de l'Éducation Nationale - République du Sénégal</p>
<p>AFMEN - Association des Femmes du Ministère de l'Éducation Nationale</p>
<p class="mt-4 text-xs">© 2025 - Tous droits réservés</p>
</div>
</footer>
</div>
</div>
</div>
</div>

</body></html>