<!DOCTYPE html>
<html class="light" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Connexion - Arbre de Noël du Ministère</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"/>


<script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": {
                            DEFAULT: "#B32E37",
                            "light": "#f8f0f0"
                        },
                        "secondary": "#003366",
                        "accent": "#D4AF37",
                        "background-light": "#F8F8F8",
                        "background-dark": "#1a1a2e",
                        "text-light": "#003366",
                        "text-dark": "#F8F8F8",
                        "text-muted-light": "#A9A9A9",
                        "text-muted-dark": "#A9A9A9",
                        "border-light": "#e0e0e0",
                        "border-dark": "#4a4a6a"
                    },
                    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 bg-cover bg-center bg-no-repeat" data-alt="Soft-focus background of Christmas lights and ornaments creating a festive bokeh effect." style='background-image: linear-gradient(rgba(248, 248, 248, 0.8) 0%, rgba(248, 248, 248, 0.95) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuBvghBniI6158YXRXWGvjsWDd2mQWtxD81tuvZxtTqjBIY8Al8GK2zCWi1TaP9s8BKKBDXHCC5OuI7wY_0tJ5qaiwI-ireBYfB62xqSXl4mXrjiEntsAly4ujeN6CNVnbzXM8yMrbJwkU9t7FOe3b6Vc7TnpAA_cbrn9_4xxQUV4tqPO9BIX9Q3dO53dqFODPwewW2P3X3l_krw0VpaU1Lc_XcHWxrubFZrWQf9lvGadKDCUq16tpY_US0YqnlyIEPZS2odkCPhd-o");'>
<main class="flex-grow flex items-center justify-center p-4">
<div class="w-full max-w-md rounded-xl bg-background-light/90 dark:bg-background-dark/90 shadow-2xl backdrop-blur-sm">
<div class="flex flex-col gap-8 p-6 sm:p-10">
<div class="flex flex-col items-center gap-4 text-center">
<img alt="Logo du Ministère" class="h-20 w-20" data-alt="Official logo of the French Ministry of the Interior." src="<?=base_url()?>assets/img/MEN.jpg"/>
<h1 class="text-2xl font-bold text-secondary dark:text-white sm:text-3xl">Espace Agents - Arbre de Noël</h1>
<p class="text-text-muted-light dark:text-text-muted-dark">Veuillez vous identifier pour inscrire vos enfants.</p>
 <?php if (session()->getFlashdata('error')): ?>
        <p style="color:red"><?= session()->getFlashdata('error') ?></p>
    <?php endif; ?>
</div>
<form class="flex flex-col gap-6" action="<?= base_url('ArbreNoel/connection') ?>" method="post">
<div class="flex flex-col gap-4">
<label class="flex flex-col">
<p class="pb-2 text-base font-medium text-secondary dark:text-white">Adresse e-mail professionnelle</p>
<div class="group flex w-full flex-1 items-stretch rounded-lg border border-border-light dark:border-border-dark focus-within:ring-2 focus-within:ring-primary dark:focus-within:ring-accent">
<div class="flex items-center justify-center pl-4 text-text-muted-light dark:text-text-muted-dark">
<span class="material-symbols-outlined">alternate_email</span>
</div>
<input class="form-input h-14 min-w-0 flex-1 resize-none overflow-hidden border-0 bg-transparent px-3 text-base font-normal leading-normal text-text-light dark:text-text-dark placeholder:text-text-muted-light dark:placeholder:text-text-muted-dark focus:outline-0 focus:ring-0" placeholder="exemple@education.sn" type="email"  name="email"/>
</div>
</label>
<label class="flex flex-col">
<p class="pb-2 text-base font-medium text-secondary dark:text-white">Mot de passe</p>
<div class="group flex w-full flex-1 items-stretch rounded-lg border border-border-light dark:border-border-dark focus-within:ring-2 focus-within:ring-primary dark:focus-within:ring-accent">
<div class="flex items-center justify-center pl-4 text-text-muted-light dark:text-text-muted-dark">
<span class="material-symbols-outlined">lock</span>
</div>
<input id="mot_de_passe" class="form-input h-14 min-w-0 flex-1 resize-none overflow-hidden border-0 bg-transparent px-3 text-base font-normal leading-normal text-text-light dark:text-text-dark placeholder:text-text-muted-light dark:placeholder:text-text-muted-dark focus:outline-0 focus:ring-0" placeholder="Entrez votre mot de passe" type="password" name="mot_de_passe"/>
<button id="togglePassword" aria-label="Afficher le mot de passe" class="flex cursor-pointer items-center justify-center pr-4 text-text-muted-light dark:text-text-muted-dark" type="button">
<span  id="iconEye" class="material-symbols-outlined">visibility</span>
</button>
</div>
</label>
</div>
<div class="flex flex-col items-center gap-4">
<button class="flex h-12 w-full min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-primary px-5 text-base font-bold leading-normal text-white transition-transform duration-200 hover:scale-105 active:scale-100 dark:bg-accent dark:text-secondary" type="submit">
<span class="truncate">Se Connecter</span>
</button>
<a class="text-sm font-normal leading-normal text-text-muted-light underline hover:text-primary dark:text-text-muted-dark dark:hover:text-accent" href="#">Mot de passe oublié ?</a>
</div>
</form>
</div>
</div>
<script>
    document.getElementById("togglePassword").addEventListener("click", function() {
       const passwordField = document.getElementById("mot_de_passe");
       const icon = document.getElementById("iconEye");

       if (passwordField.type === "password") {
           // Afficher le mot de passe
           passwordField.type = "text";
           icon.textContent = "visibility_off"; // Change l'icône
       } else {
           // Masquer le mot de passe
           passwordField.type = "password";
           icon.textContent = "visibility"; // Remet l'icône normale
       }
    });
</script>
</main>
<footer class="w-full bg-red-200 mt-auto">
  <div class="w-full px-4 sm:px-6 md:px-8 lg:px-12 py-8">
    <div class="flex flex-col items-center justify-center gap-4 text-center">
      <p class="text-sm text-red-900">Ministère de l'Éducation Nationale - République du Sénégal</p>
      <p class="text-sm text-red-900">AFMEN - Association des Femmes du Ministère de l'Éducation Nationale</p>
      <p class="text-xs text-red-800">© 2025 - Tous droits réservés</p>
    </div>
  </div>
</footer>
</div>
</body></html>