Scribd
Upload
8 views70 pages

Front-End Application for C.E.C Djelo-Binza

The document outlines the development plan for a front-end application for C.E.C Djelo-Binza, focusing on completing features such as class management, registration handling, and an admin interface using localStorage for temporary database simulation. It includes detailed HTML/CSS/JS code for the user interface, emphasizing a modern and responsive design. The application aims to provide a comprehensive educational system from preschool to secondary levels.

Uploaded by

mbakigradi3
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views70 pages

Front-End Application for C.E.C Djelo-Binza

The document outlines the development plan for a front-end application for C.E.C Djelo-Binza, focusing on completing features such as class management, registration handling, and an admin interface using localStorage for temporary database simulation. It includes detailed HTML/CSS/JS code for the user interface, emphasizing a modern and responsive design. The application aims to provide a comprehensive educational system from preschool to secondary levels.

Uploaded by

mbakigradi3
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

*Thinking...

> L'utilisateur veut d'abord finir le front-end avant de s'occuper du back-end et de la base de données.
C'est une bonne approche. Je vais me concentrer sur la finalisation du front-end de l'application avec
toutes les fonctionnalités demandées, en utilisant localStorage pour simuler la base de données
temporairement.

>

> Je vais reprendre le code HTML/CSS/JS et m'assurer que tout fonctionne correctement avec :

> - Les classes corrigées (Maternelle 1-3, Primaire 1-8, Secondaire 1-4)

> - Les options pour le secondaire

> - La génération de matricules

> - La gestion des inscriptions avec expiration

> - L'interface administrateur

> - Le design responsive et moderne

Parfait ! Concentrons-nous sur le front-end complet. Voici la version finale et complète de l'application
avec toutes les fonctionnalités front-end :

```html

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>C.E.C Djelo-Binza - Système d'Inscription</title>

<script src="[Link]

<script src="[Link] crossorigin="anonymous"></script>


<script>

[Link] = {

theme: {

extend: {

colors: {

primary: '#5D5CDE',

secondary: '#2563eb',

accent: '#f59e0b'

</script>

<style>

.section-hidden { display: none; }

.modal-hidden { display: none; }

.fade-in { animation: fadeIn 0.3s ease-in; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Dark mode styles */

.dark {

color-scheme: dark;

/* Custom scrollbar */
::-webkit-scrollbar {

width: 8px;

::-webkit-scrollbar-track {

background: #f1f1f1;

::-webkit-scrollbar-thumb {

background: #5D5CDE;

border-radius: 4px;

::-webkit-scrollbar-thumb:hover {

background: #4c4bbd;

/* Custom animations */

.bounce-in {

animation: bounceIn 0.6s ease-out;

@keyframes bounceIn {

0% { transform: scale(0.3); opacity: 0; }

50% { transform: scale(1.05); }

70% { transform: scale(0.9); }

100% { transform: scale(1); opacity: 1; }

}
.slide-up {

animation: slideUp 0.4s ease-out;

@keyframes slideUp {

from { transform: translateY(30px); opacity: 0; }

to { transform: translateY(0); opacity: 1; }

/* Loading animation */

.loading {

display: inline-block;

width: 20px;

height: 20px;

border: 3px solid #f3f3f3;

border-top: 3px solid #5D5CDE;

border-radius: 50%;

animation: spin 1s linear infinite;

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

/* Pulse animation for notifications */

.pulse {
animation: pulse 2s infinite;

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.05); }

100% { transform: scale(1); }

</style>

</head>

<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">

<!-- Navigation -->

<nav class="bg-primary dark:bg-gray-800 shadow-lg fixed w-full z-50">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="flex justify-between h-16">

<div class="flex items-center">

<div class="flex-shrink-0">

<h1 class="text-white text-xl font-bold">C.E.C Djelo-Binza</h1>

</div>

</div>

<div class="hidden md:flex items-center space-x-8">

<button onclick="showSection('home')" class="nav-link text-white hover:text-gray-200 px-3


py-2 text-base font-medium transition-colors">Accueil</button>

<button onclick="showSection('about')" class="nav-link text-white hover:text-gray-200 px-3


py-2 text-base font-medium transition-colors">À propos</button>

<button onclick="showSection('programs')" class="nav-link text-white hover:text-gray-200


px-3 py-2 text-base font-medium transition-colors">Programmes</button>
<button onclick="showSection('facilities')" class="nav-link text-white hover:text-gray-200 px-
3 py-2 text-base font-medium transition-colors">Installations</button>

<button onclick="showSection('admission')" class="nav-link text-white hover:text-gray-200


px-3 py-2 text-base font-medium transition-colors">Admission</button>

<button onclick="showSection('contact')" class="nav-link text-white hover:text-gray-200 px-3


py-2 text-base font-medium transition-colors">Contact</button>

<button onclick="showSection('admin')" class="nav-link bg-accent text-white px-4 py-2


rounded-lg hover:bg-yellow-600 transition-colors">

<i class="fas fa-user-shield mr-1"></i>Admin

</button>

</div>

<div class="md:hidden">

<button onclick="toggleMobileMenu()" class="text-white hover:text-gray-200 p-2">

<i class="fas fa-bars text-xl"></i>

</button>

</div>

</div>

</div>

<!-- Mobile menu -->

<div id="mobile-menu" class="md:hidden hidden bg-primary dark:bg-gray-800">

<div class="px-2 pt-2 pb-3 space-y-1">

<button onclick="showSection('home')" class="block text-white hover:text-gray-200 px-3 py-2


text-base font-medium w-full text-left">Accueil</button>

<button onclick="showSection('about')" class="block text-white hover:text-gray-200 px-3 py-2


text-base font-medium w-full text-left">À propos</button>

<button onclick="showSection('programs')" class="block text-white hover:text-gray-200 px-3


py-2 text-base font-medium w-full text-left">Programmes</button>
<button onclick="showSection('facilities')" class="block text-white hover:text-gray-200 px-3 py-
2 text-base font-medium w-full text-left">Installations</button>

<button onclick="showSection('admission')" class="block text-white hover:text-gray-200 px-3


py-2 text-base font-medium w-full text-left">Admission</button>

<button onclick="showSection('contact')" class="block text-white hover:text-gray-200 px-3 py-2


text-base font-medium w-full text-left">Contact</button>

<button onclick="showSection('admin')" class="block bg-accent text-white px-3 py-2 rounded


text-base font-medium w-full text-left">

<i class="fas fa-user-shield mr-1"></i>Admin

</button>

</div>

</div>

</nav>

<!-- Main Content -->

<main class="pt-16">

<!-- Home Section -->

<section id="home" class="section">

<div class="bg-gradient-to-r from-primary to-secondary dark:from-gray-800 dark:to-gray-700


text-white py-20">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">

<h1 class="text-4xl md:text-6xl font-bold mb-6 bounce-in">Bienvenue au C.E.C Djelo-


Binza</h1>

<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto slide-up">

Complexe Éducatif et Culturel offrant une éducation de qualité depuis la maternelle


jusqu'au secondaire

</p>
<button onclick="showSection('admission')" class="bg-accent hover:bg-yellow-600 text-white
font-bold py-4 px-8 rounded-lg text-lg transition-all duration-300 transform hover:scale-105 shadow-
lg">

<i class="fas fa-graduation-cap mr-2"></i>S'inscrire maintenant

</button>

</div>

</div>

<div class="py-16 bg-gray-50 dark:bg-gray-800">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">

<div class="text-center group hover:transform hover:scale-105 transition-all duration-


300">

<div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center


mx-auto mb-4 group-hover:bg-secondary transition-colors">

<i class="fas fa-graduation-cap text-2xl"></i>

</div>

<h3 class="text-xl font-bold mb-2">Excellence Académique</h3>

<p class="text-gray-600 dark:text-gray-300">Programmes éducatifs de haute qualité


adaptés à chaque niveau</p>

</div>

<div class="text-center group hover:transform hover:scale-105 transition-all duration-


300">

<div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center


mx-auto mb-4 group-hover:bg-secondary transition-colors">

<i class="fas fa-users text-2xl"></i>

</div>

<h3 class="text-xl font-bold mb-2">Encadrement Personnalisé</h3>


<p class="text-gray-600 dark:text-gray-300">Suivi individuel de chaque élève par nos
enseignants qualifiés</p>

</div>

<div class="text-center group hover:transform hover:scale-105 transition-all duration-


300">

<div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center


mx-auto mb-4 group-hover:bg-secondary transition-colors">

<i class="fas fa-building text-2xl"></i>

</div>

<h3 class="text-xl font-bold mb-2">Infrastructures Modernes</h3>

<p class="text-gray-600 dark:text-gray-300">Équipements et installations de pointe pour


l'apprentissage</p>

</div>

</div>

</div>

</div>

</section>

<!-- About Section -->

<section id="about" class="section section-hidden">

<div class="py-16">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">À Propos de Notre École</h2>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">

<div class="slide-up">

<h3 class="text-2xl font-bold mb-4 text-primary">Notre Histoire</h3>


<p class="text-gray-600 dark:text-gray-300 mb-4">

Fondé en 1995, le Complexe Éducatif et Culturel Djelo-Binza est un établissement


d'enseignement privé

qui s'est imposé comme une référence en matière d'éducation de qualité en


République Démocratique du Congo.

</p>

<p class="text-gray-600 dark:text-gray-300">

Avec plus de 25 ans d'expérience, nous avons formé des milliers d'élèves qui excellent
aujourd'hui

dans divers domaines professionnels et académiques.

</p>

</div>

<div class="bg-gradient-to-br from-primary to-secondary text-white p-8 rounded-lg


shadow-lg hover:shadow-xl transition-shadow">

<h4 class="text-xl font-bold mb-4">Nos Chiffres</h4>

<div class="grid grid-cols-2 gap-4">

<div class="text-center">

<div class="text-3xl font-bold">1500+</div>

<div class="text-sm">Élèves actuels</div>

</div>

<div class="text-center">

<div class="text-3xl font-bold">98%</div>

<div class="text-sm">Taux de réussite</div>

</div>

<div class="text-center">

<div class="text-3xl font-bold">120+</div>

<div class="text-sm">Enseignants</div>
</div>

<div class="text-center">

<div class="text-3xl font-bold">25+</div>

<div class="text-sm">Années d'expérience</div>

</div>

</div>

</div>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">

<div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg hover:shadow-xl


transition-shadow">

<h3 class="text-2xl font-bold mb-4 text-primary">

<i class="fas fa-bullseye mr-2"></i>Notre Mission

</h3>

<p class="text-gray-600 dark:text-gray-300">

Offrir une éducation complète et de qualité qui développe les compétences


intellectuelles,

sociales et morales de chaque élève, en préparant les leaders de demain dans un


environnement

stimulant et bienveillant.

</p>

</div>

<div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg hover:shadow-xl


transition-shadow">

<h3 class="text-2xl font-bold mb-4 text-primary">

<i class="fas fa-heart mr-2"></i>Nos Valeurs


</h3>

<ul class="text-gray-600 dark:text-gray-300 space-y-2">

<li><i class="fas fa-check text-primary mr-2"></i>Excellence académique</li>

<li><i class="fas fa-check text-primary mr-2"></i>Intégrité et respect</li>

<li><i class="fas fa-check text-primary mr-2"></i>Innovation pédagogique</li>

<li><i class="fas fa-check text-primary mr-2"></i>Développement holistique</li>

<li><i class="fas fa-check text-primary mr-2"></i>Esprit communautaire</li>

</ul>

</div>

</div>

</div>

</div>

</section>

<!-- Programs Section -->

<section id="programs" class="section section-hidden">

<div class="py-16 bg-gray-50 dark:bg-gray-800">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Nos Programmes


Éducatifs</h2>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">

<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg hover:shadow-xl


transition-all duration-300 transform hover:-translate-y-2">

<div class="text-primary text-4xl mb-4">

<i class="fas fa-baby"></i>


</div>

<h3 class="text-2xl font-bold mb-4">Maternelle</h3>

<div class="text-sm text-accent font-semibold mb-3">1ère à 3ème Maternelle</div>

<p class="text-gray-600 dark:text-gray-300 mb-4">

Programme d'éveil pour les enfants de 3 à 5 ans, axé sur le développement

psychomoteur, social et cognitif.

</p>

<ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1">

<li><i class="fas fa-play-circle text-primary mr-2"></i>Activités ludiques et


éducatives</li>

<li><i class="fas fa-play-circle text-primary mr-2"></i>Initiation à la lecture et


l'écriture</li>

<li><i class="fas fa-play-circle text-primary mr-2"></i>Développement de la


créativité</li>

<li><i class="fas fa-play-circle text-primary mr-2"></i>Socialisation et autonomie</li>

</ul>

</div>

<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg hover:shadow-xl


transition-all duration-300 transform hover:-translate-y-2">

<div class="text-primary text-4xl mb-4">

<i class="fas fa-child"></i>

</div>

<h3 class="text-2xl font-bold mb-4">Primaire</h3>

<div class="text-sm text-accent font-semibold mb-3">1ère à 8ème Primaire</div>

<p class="text-gray-600 dark:text-gray-300 mb-4">

Enseignement fondamental de la 1ère à la 8ème année,


établissant les bases solides pour la suite du parcours scolaire.

</p>

<ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1">

<li><i class="fas fa-book text-primary mr-2"></i>Français et Lingala</li>

<li><i class="fas fa-book text-primary mr-2"></i>Mathématiques et Sciences</li>

<li><i class="fas fa-book text-primary mr-2"></i>Histoire et Géographie</li>

<li><i class="fas fa-book text-primary mr-2"></i>Éducation civique et morale</li>

</ul>

</div>

<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg hover:shadow-xl


transition-all duration-300 transform hover:-translate-y-2">

<div class="text-primary text-4xl mb-4">

<i class="fas fa-user-graduate"></i>

</div>

<h3 class="text-2xl font-bold mb-4">Secondaire</h3>

<div class="text-sm text-accent font-semibold mb-3">1ère à 4ème Secondaire</div>

<p class="text-gray-600 dark:text-gray-300 mb-4">

Formation complète du cycle d'orientation et humanités,

préparant aux études supérieures et à la vie professionnelle.

</p>

<ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1">

<li><i class="fas fa-microscope text-primary mr-2"></i>Section Scientifique</li>

<li><i class="fas fa-pen-fancy text-primary mr-2"></i>Section Littéraire</li>

<li><i class="fas fa-chart-line text-primary mr-2"></i>Section Commerciale</li>


<li><i class="fas fa-graduation-cap text-primary mr-2"></i>Préparation aux examens
d'État</li>

</ul>

</div>

</div>

<!-- Options Secondaire détaillées -->

<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg mb-12">

<h3 class="text-2xl font-bold mb-6 text-center text-primary">Options du Secondaire</h3>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-


50 dark:hover:bg-gray-600 transition-colors">

<h4 class="font-semibold text-primary mb-2"><i class="fas fa-university


mr-2"></i>Générale</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Formation généraliste pour


toutes orientations</p>

</div>

<div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-


50 dark:hover:bg-gray-600 transition-colors">

<h4 class="font-semibold text-primary mb-2"><i class="fas fa-atom


mr-2"></i>Scientifique</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Mathématiques, Physique,


Chimie, Biologie</p>

</div>

<div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-


50 dark:hover:bg-gray-600 transition-colors">

<h4 class="font-semibold text-primary mb-2"><i class="fas fa-calculator


mr-2"></i>Commerciale et Gestion</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">Comptabilité, Économie, Gestion
d'entreprise</p>

</div>

<div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-


50 dark:hover:bg-gray-600 transition-colors">

<h4 class="font-semibold text-primary mb-2"><i class="fas fa-feather-alt


mr-2"></i>Littéraire</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Langues, Littérature, Sciences


humaines</p>

</div>

<div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-


50 dark:hover:bg-gray-600 transition-colors">

<h4 class="font-semibold text-primary mb-2"><i class="fas fa-chalkboard-teacher mr-


2"></i>Pédagogique</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Formation pour l'enseignement


primaire</p>

</div>

<div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-


50 dark:hover:bg-gray-600 transition-colors">

<h4 class="font-semibold text-primary mb-2"><i class="fas fa-cogs


mr-2"></i>Technique</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Électricité, Mécanique,


Informatique</p>

</div>

</div>

</div>

<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg">

<h3 class="text-2xl font-bold mb-6 text-center">Activités Complémentaires</h3>


<div class="grid grid-cols-1 md:grid-cols-4 gap-6">

<div class="text-center group">

<i class="fas fa-music text-primary text-3xl mb-2 group-hover:text-secondary


transition-colors"></i>

<h4 class="font-semibold">Musique</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Chorale, instruments</p>

</div>

<div class="text-center group">

<i class="fas fa-paint-brush text-primary text-3xl mb-2 group-hover:text-secondary


transition-colors"></i>

<h4 class="font-semibold">Arts Plastiques</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Dessin, peinture, sculpture</p>

</div>

<div class="text-center group">

<i class="fas fa-running text-primary text-3xl mb-2 group-hover:text-secondary


transition-colors"></i>

<h4 class="font-semibold">Sports</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Football, basketball,


athlétisme</p>

</div>

<div class="text-center group">

<i class="fas fa-laptop-code text-primary text-3xl mb-2 group-hover:text-secondary


transition-colors"></i>

<h4 class="font-semibold">Informatique</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Programmation, bureautique</p>

</div>

</div>
</div>

</div>

</div>

</section>

<!-- Facilities Section -->

<section id="facilities" class="section section-hidden">

<div class="py-16">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Installations et


Équipements</h2>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<div class="bg-gradient-to-br from-primary to-secondary text-white p-6 rounded-lg


shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">

<i class="fas fa-flask text-4xl mb-4"></i>

<h3 class="text-xl font-bold mb-2">Laboratoires</h3>

<p class="text-sm">Laboratoires modernes de physique, chimie et biologie équipés des


dernières technologies pour l'apprentissage pratique.</p>

</div>

<div class="bg-gradient-to-br from-secondary to-primary text-white p-6 rounded-lg


shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">

<i class="fas fa-book text-4xl mb-4"></i>

<h3 class="text-xl font-bold mb-2">Bibliothèque</h3>

<p class="text-sm">Vaste collection de livres, ressources numériques et espaces d'étude


calmes pour encourager la recherche et la lecture.</p>
</div>

<div class="bg-gradient-to-br from-accent to-yellow-600 text-white p-6 rounded-lg


shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">

<i class="fas fa-futbol text-4xl mb-4"></i>

<h3 class="text-xl font-bold mb-2">Terrains de Sport</h3>

<p class="text-sm">Terrains de football, basketball, volleyball et gymnase pour le


développement physique et l'esprit d'équipe.</p>

</div>

<div class="bg-gradient-to-br from-green-500 to-green-600 text-white p-6 rounded-lg


shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">

<i class="fas fa-desktop text-4xl mb-4"></i>

<h3 class="text-xl font-bold mb-2">Salle Informatique</h3>

<p class="text-sm">Ordinateurs modernes avec accès internet pour l'apprentissage des


technologies de l'information.</p>

</div>

<div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-6 rounded-lg


shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">

<i class="fas fa-utensils text-4xl mb-4"></i>

<h3 class="text-xl font-bold mb-2">Cantine</h3>

<p class="text-sm">Service de restauration offrant des repas équilibrés et nutritifs


préparés dans le respect des normes d'hygiène.</p>

</div>

<div class="bg-gradient-to-br from-red-500 to-red-600 text-white p-6 rounded-lg shadow-


lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
<i class="fas fa-clinic-medical text-4xl mb-4"></i>

<h3 class="text-xl font-bold mb-2">Infirmerie</h3>

<p class="text-sm">Soins médicaux de base et premiers secours assurés par du


personnel médical qualifié.</p>

</div>

</div>

<div class="mt-12 bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg">

<h3 class="text-2xl font-bold mb-6 text-center">Équipements Modernes</h3>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">

<div>

<h4 class="text-lg font-semibold mb-3 text-primary">

<i class="fas fa-laptop mr-2"></i>Technologie

</h4>

<ul class="space-y-2 text-gray-600 dark:text-gray-300">

<li><i class="fas fa-check text-green-500 mr-2"></i>Tableaux interactifs dans toutes


les classes</li>

<li><i class="fas fa-check text-green-500 mr-2"></i>Connexion Wi-Fi dans tout


l'établissement</li>

<li><i class="fas fa-check text-green-500 mr-2"></i>Système de


vidéo-surveillance</li>

<li><i class="fas fa-check text-green-500 mr-2"></i>Équipements audiovisuels


modernes</li>

</ul>

</div>

<div>

<h4 class="text-lg font-semibold mb-3 text-primary">


<i class="fas fa-shield-alt mr-2"></i>Sécurité & Confort

</h4>

<ul class="space-y-2 text-gray-600 dark:text-gray-300">

<li><i class="fas fa-check text-green-500 mr-2"></i>Système de sécurité 24h/24</li>

<li><i class="fas fa-check text-green-500 mr-2"></i>Climatisation dans les salles</li>

<li><i class="fas fa-check text-green-500 mr-2"></i>Transport scolaire sécurisé</li>

<li><i class="fas fa-check text-green-500 mr-2"></i>Espaces verts et aires de


jeux</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- Admission Section -->

<section id="admission" class="section section-hidden">

<div class="py-16 bg-gray-50 dark:bg-gray-800">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Procédure d'Admission</h2>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">

<!-- Procedure -->

<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg">

<h3 class="text-2xl font-bold mb-6 text-primary">


<i class="fas fa-list-ol mr-2"></i>Étapes d'Inscription

</h3>

<div class="space-y-4">

<div class="flex items-start group">

<div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-


center mr-4 mt-1 group-hover:bg-secondary transition-colors">1</div>

<div>

<h4 class="font-semibold">Inscription en ligne</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Remplir le formulaire


d'inscription sur notre plateforme</p>

</div>

</div>

<div class="flex items-start group">

<div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-


center mr-4 mt-1 group-hover:bg-secondary transition-colors">2</div>

<div>

<h4 class="font-semibold">Dépôt des documents</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Soumettre les pièces


justificatives requises</p>

</div>

</div>

<div class="flex items-start group">

<div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-


center mr-4 mt-1 group-hover:bg-secondary transition-colors">3</div>

<div>

<h4 class="font-semibold">Validation administrative</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Vérification et approbation


par l'administration</p>
</div>

</div>

<div class="flex items-start group">

<div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-


center mr-4 mt-1 group-hover:bg-secondary transition-colors">4</div>

<div>

<h4 class="font-semibold">Paiement des frais</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Règlement des frais


d'inscription et de scolarité</p>

</div>

</div>

<div class="flex items-start group">

<div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-


center mr-4 mt-1 group-hover:bg-secondary transition-colors">5</div>

<div>

<h4 class="font-semibold">Attribution du matricule</h4>

<p class="text-sm text-gray-600 dark:text-gray-300">Génération automatique du


numéro d'identification</p>

</div>

</div>

</div>

<div class="mt-8 p-4 bg-yellow-50 dark:bg-yellow-900 rounded-lg border-l-4 border-


yellow-400">

<div class="flex items-center">

<i class="fas fa-exclamation-triangle text-yellow-600 mr-2"></i>

<p class="text-sm text-yellow-800 dark:text-yellow-200">


<strong>Important:</strong> Les inscriptions expirent automatiquement après 3
jours si elles ne sont pas validées.

</p>

</div>

</div>

</div>

<!-- Registration Form -->

<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg">

<h3 class="text-2xl font-bold mb-6 text-primary">

<i class="fas fa-user-plus mr-2"></i>Formulaire d'Inscription

</h3>

<form id="registration-form" class="space-y-4">

<!-- Student Information -->

<div>

<h4 class="font-semibold mb-3 text-gray-700 dark:text-gray-300">

<i class="fas fa-user mr-2"></i>Informations de l'élève

</h4>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

<input type="text" id="student-name" placeholder="Nom*" required class="w-full


px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-
transparent dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-all">

<input type="text" id="student-postname" placeholder="Post-nom*" required


class="w-full px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary
focus:border-transparent dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-all">

</div>
<input type="text" id="student-firstname" placeholder="Prénom*" required
class="w-full px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary
focus:border-transparent mt-4 dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-all">

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">

<input type="date" id="student-birthdate" required class="w-full px-4 py-2 text-


base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent
dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-all">

<select id="student-gender" required class="w-full px-4 py-2 text-base border


border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-600
dark:border-gray-500 dark:text-white transition-all">

<option value="">Sexe*</option>

<option value="M">Masculin</option>

<option value="F">Féminin</option>

</select>

</div>

<select id="student-level" required class="w-full px-4 py-2 text-base border border-


gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent mt-4 dark:bg-gray-600
dark:border-gray-500 dark:text-white transition-all" onchange="toggleSecondaryOptions()">

<option value="">Niveau souhaité*</option>

<optgroup label="Maternelle">

<option value="1ere-maternelle">1ère Maternelle</option>

<option value="2eme-maternelle">2ème Maternelle</option>

<option value="3eme-maternelle">3ème Maternelle</option>

</optgroup>

<optgroup label="Primaire">

<option value="1ere-primaire">1ère Primaire</option>

<option value="2eme-primaire">2ème Primaire</option>

<option value="3eme-primaire">3ème Primaire</option>

<option value="4eme-primaire">4ème Primaire</option>


<option value="5eme-primaire">5ème Primaire</option>

<option value="6eme-primaire">6ème Primaire</option>

<option value="7eme-primaire">7ème Primaire</option>

<option value="8eme-primaire">8ème Primaire</option>

</optgroup>

<optgroup label="Secondaire">

<option value="1ere-secondaire">1ère Secondaire</option>

<option value="2eme-secondaire">2ème Secondaire</option>

<option value="3eme-secondaire">3ème Secondaire</option>

<option value="4eme-secondaire">4ème Secondaire</option>

</optgroup>

</select>

<!-- Options pour le secondaire -->

<div id="secondary-options" class="mt-4 hidden">

<select id="secondary-option" class="w-full px-4 py-2 text-base border border-


gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-600
dark:border-gray-500 dark:text-white transition-all">

<option value="">Choisir une option*</option>

<option value="generale">Générale</option>

<option value="scientifique">Scientifique</option>

<option value="commerciale-gestion">Commerciale et Gestion</option>

<option value="litteraire">Littéraire</option>

<option value="pedagogique">Pédagogique</option>

<option value="technique">Technique</option>

</select>
</div>

</div>

<!-- Guardian Information -->

<div>

<h4 class="font-semibold mb-3 text-gray-700 dark:text-gray-300">

<i class="fas fa-users mr-2"></i>Informations du tuteur

</h4>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

<input type="text" id="guardian-name" placeholder="Nom complet du tuteur*"


required class="w-full px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-
primary focus:border-transparent dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-
all">

<input type="tel" id="guardian-phone" placeholder="Téléphone*" required


class="w-full px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary
focus:border-transparent dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-all">

</div>

<input type="email" id="guardian-email" placeholder="Email" class="w-full px-4 py-


2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent
mt-4 dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-all">

<textarea id="guardian-address" placeholder="Adresse complète*" required


class="w-full px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary
focus:border-transparent mt-4 dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-all"
rows="3"></textarea>

</div>

<button type="submit" id="submit-btn" class="w-full bg-primary hover:bg-purple-700


text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105
shadow-lg">

<i class="fas fa-paper-plane mr-2"></i>


<span id="submit-text">Soumettre l'inscription</span>

<span id="submit-loading" class="loading hidden"></span>

</button>

<div class="text-center">

<p class="text-sm text-gray-600 dark:text-gray-300">

<i class="fas fa-clock mr-1 text-accent"></i>

Les inscriptions expirent après 3 jours en attente de validation

</p>

</div>

</form>

</div>

</div>

<!-- Fees Section -->

<div class="mt-12 bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg">

<h3 class="text-2xl font-bold mb-6 text-center">

<i class="fas fa-money-bill-wave mr-2 text-accent"></i>

Frais Scolaires 2024-2025

</h3>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">

<div class="text-center p-6 border border-gray-200 dark:border-gray-600 rounded-lg


hover:shadow-lg transition-shadow">

<div class="text-4xl mb-3">

<i class="fas fa-baby text-primary"></i>

</div>
<h4 class="font-bold text-lg mb-2">Maternelle</h4>

<div class="text-2xl font-bold text-primary mb-2">150,000 FC</div>

<p class="text-sm text-gray-600 dark:text-gray-300">Frais d'inscription: 50,000 FC</p>

<div class="mt-3 text-xs text-gray-500">

<i class="fas fa-check mr-1"></i>Matériel didactique inclus

</div>

</div>

<div class="text-center p-6 border border-gray-200 dark:border-gray-600 rounded-lg


hover:shadow-lg transition-shadow">

<div class="text-4xl mb-3">

<i class="fas fa-child text-primary"></i>

</div>

<h4 class="font-bold text-lg mb-2">Primaire</h4>

<div class="text-2xl font-bold text-primary mb-2">200,000 FC</div>

<p class="text-sm text-gray-600 dark:text-gray-300">Frais d'inscription: 75,000 FC</p>

<div class="mt-3 text-xs text-gray-500">

<i class="fas fa-check mr-1"></i>Manuels scolaires inclus

</div>

</div>

<div class="text-center p-6 border border-gray-200 dark:border-gray-600 rounded-lg


hover:shadow-lg transition-shadow">

<div class="text-4xl mb-3">

<i class="fas fa-user-graduate text-primary"></i>

</div>

<h4 class="font-bold text-lg mb-2">Secondaire</h4>

<div class="text-2xl font-bold text-primary mb-2">300,000 FC</div>


<p class="text-sm text-gray-600 dark:text-gray-300">Frais d'inscription: 100,000
FC</p>

<div class="mt-3 text-xs text-gray-500">

<i class="fas fa-check mr-1"></i>Laboratoires et ordinateurs

</div>

</div>

</div>

<div class="mt-6 text-center">

<p class="text-sm text-gray-600 dark:text-gray-300">

<i class="fas fa-info-circle mr-1 text-blue-500"></i>

Possibilité de paiement échelonné. Contactez-nous pour plus d'informations.

</p>

</div>

</div>

</div>

</div>

</section>

<!-- Contact Section -->

<section id="contact" class="section section-hidden">

<div class="py-16">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Contactez-Nous</h2>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">

<!-- Contact Information -->


<div>

<h3 class="text-2xl font-bold mb-6 text-primary">

<i class="fas fa-address-card mr-2"></i>Nos Coordonnées

</h3>

<div class="space-y-6">

<div class="flex items-start group">

<div class="bg-primary text-white rounded-full p-3 mr-4 group-hover:bg-secondary


transition-colors">

<i class="fas fa-map-marker-alt"></i>

</div>

<div>

<h4 class="font-semibold">Adresse</h4>

<p class="text-gray-600 dark:text-gray-300">Avenue Djelo-Binza, Commune de


Mont-Ngafula<br>Kinshasa, République Démocratique du Congo</p>

</div>

</div>

<div class="flex items-start group">

<div class="bg-primary text-white rounded-full p-3 mr-4 group-hover:bg-secondary


transition-colors">

<i class="fas fa-phone"></i>

</div>

<div>

<h4 class="font-semibold">Téléphone</h4>

<p class="text-gray-600 dark:text-gray-300">

<a href="[Link] class="hover:text-primary transition-colors">+243


81 234 5678</a><br>
<a href="[Link] class="hover:text-primary transition-colors">+243
99 876 5432</a>

</p>

</div>

</div>

<div class="flex items-start group">

<div class="bg-primary text-white rounded-full p-3 mr-4 group-hover:bg-secondary


transition-colors">

<i class="fas fa-envelope"></i>

</div>

<div>

<h4 class="font-semibold">Email</h4>

<p class="text-gray-600 dark:text-gray-300">

<a href="[Link] class="hover:text-primary transition-


colors">info@[Link]</a><br>

<a href="[Link] class="hover:text-primary


transition-colors">admissions@[Link]</a>

</p>

</div>

</div>

<div class="flex items-start group">

<div class="bg-primary text-white rounded-full p-3 mr-4 group-hover:bg-secondary


transition-colors">

<i class="fas fa-clock"></i>

</div>
<div>

<h4 class="font-semibold">Heures d'ouverture</h4>

<p class="text-gray-600 dark:text-gray-300">

<strong>Lundi - Vendredi:</strong> 7h00 - 17h00<br>

<strong>Samedi:</strong> 8h00 - 12h00<br>

<span class="text-sm text-red-500">Fermé le dimanche</span>

</p>

</div>

</div>

</div>

<div class="mt-8">

<h4 class="font-semibold mb-4">

<i class="fas fa-share-alt mr-2"></i>Suivez-nous

</h4>

<div class="flex space-x-4">

<a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700


transition-all duration-300 transform hover:scale-110">

<i class="fab fa-facebook-f"></i>

</a>

<a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500


transition-all duration-300 transform hover:scale-110">

<i class="fab fa-twitter"></i>

</a>

<a href="#" class="bg-red-600 text-white p-3 rounded-full hover:bg-red-700


transition-all duration-300 transform hover:scale-110">

<i class="fab fa-youtube"></i>


</a>

<a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700


transition-all duration-300 transform hover:scale-110">

<i class="fab fa-instagram"></i>

</a>

<a href="#" class="bg-blue-800 text-white p-3 rounded-full hover:bg-blue-900


transition-all duration-300 transform hover:scale-110">

<i class="fab fa-linkedin-in"></i>

</a>

</div>

</div>

</div>

<!-- Contact Form -->

<div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg">

<h3 class="text-2xl font-bold mb-6 text-primary">

<i class="fas fa-paper-plane mr-2"></i>Envoyez-nous un message

</h3>

<form id="contact-form" class="space-y-4">

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

<input type="text" id="contact-name" placeholder="Nom*" required class="w-full


px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-
transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all">

<input type="email" id="contact-email" placeholder="Email*" required class="w-full


px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-
transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all">

</div>
<input type="text" id="contact-subject" placeholder="Sujet*" required class="w-full
px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-
transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all">

<textarea id="contact-message" placeholder="Message*" required rows="5" class="w-


full px-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-
transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all"></textarea>

<button type="submit" id="contact-submit-btn" class="w-full bg-primary hover:bg-


purple-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-
105 shadow-lg">

<i class="fas fa-paper-plane mr-2"></i>

<span id="contact-submit-text">Envoyer le message</span>

<span id="contact-loading" class="loading hidden"></span>

</button>

</form>

</div>

</div>

</div>

</div>

</section>

<!-- Admin Section -->

<section id="admin" class="section section-hidden">

<div class="py-16 bg-gray-50 dark:bg-gray-800">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">

<i class="fas fa-user-shield mr-2 text-accent"></i>Administration

</h2>
<!-- Admin Login -->

<div id="admin-login" class="max-w-md mx-auto bg-white dark:bg-gray-700 p-8 rounded-lg


shadow-lg">

<h3 class="text-2xl font-bold mb-6 text-center text-primary">

<i class="fas fa-lock mr-2"></i>Connexion Administrateur

</h3>

<form id="admin-login-form" class="space-y-4">

<div class="relative">

<i class="fas fa-user absolute left-3 top-3 text-gray-400"></i>

<input type="text" id="admin-username" placeholder="Nom d'utilisateur" required


class="w-full pl-10 pr-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-
primary focus:border-transparent dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-
all">

</div>

<div class="relative">

<i class="fas fa-lock absolute left-3 top-3 text-gray-400"></i>

<input type="password" id="admin-password" placeholder="Mot de passe" required


class="w-full pl-10 pr-4 py-2 text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-
primary focus:border-transparent dark:bg-gray-600 dark:border-gray-500 dark:text-white transition-
all">

</div>

<button type="submit" id="admin-login-btn" class="w-full bg-primary hover:bg-purple-


700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105
shadow-lg">

<i class="fas fa-sign-in-alt mr-2"></i>

<span id="admin-login-text">Se connecter</span>

<span id="admin-login-loading" class="loading hidden"></span>

</button>

</form>
<div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900 rounded-lg">

<p class="text-sm text-center text-blue-700 dark:text-blue-200">

<i class="fas fa-info-circle mr-1"></i>

<strong>Démo:</strong> admin / admin123

</p>

</div>

</div>

<!-- Admin Dashboard -->

<div id="admin-dashboard" class="hidden">

<!-- Statistics Cards -->

<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">

<div class="bg-primary text-white p-6 rounded-lg text-center shadow-lg hover:shadow-xl


transition-shadow">

<i class="fas fa-users text-3xl mb-2"></i>

<h3 class="text-2xl font-bold" id="total-registrations">0</h3>

<p>Inscriptions Totales</p>

</div>

<div class="bg-green-500 text-white p-6 rounded-lg text-center shadow-lg


hover:shadow-xl transition-shadow">

<i class="fas fa-check-circle text-3xl mb-2"></i>

<h3 class="text-2xl font-bold" id="approved-registrations">0</h3>

<p>Approuvées</p>

</div>

<div class="bg-yellow-500 text-white p-6 rounded-lg text-center shadow-lg


hover:shadow-xl transition-shadow">

<i class="fas fa-clock text-3xl mb-2"></i>


<h3 class="text-2xl font-bold" id="pending-registrations">0</h3>

<p>En Attente</p>

</div>

<div class="bg-red-500 text-white p-6 rounded-lg text-center shadow-lg hover:shadow-xl


transition-shadow">

<i class="fas fa-times-circle text-3xl mb-2"></i>

<h3 class="text-2xl font-bold" id="expired-registrations">0</h3>

<p>Expirées</p>

</div>

</div>

<!-- Filters -->

<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 mb-6">

<h3 class="text-lg font-bold mb-4">

<i class="fas fa-filter mr-2"></i>Filtres

</h3>

<div class="grid grid-cols-1 md:grid-cols-4 gap-4">

<select id="filter-status" class="px-3 py-2 border border-gray-300 rounded-lg dark:bg-


gray-600 dark:border-gray-500 dark:text-white">

<option value="">Tous les statuts</option>

<option value="pending">En attente</option>

<option value="approved">Approuvées</option>

<option value="expired">Expirées</option>

</select>

<select id="filter-level" class="px-3 py-2 border border-gray-300 rounded-lg dark:bg-


gray-600 dark:border-gray-500 dark:text-white">

<option value="">Tous les niveaux</option>


<option value="maternelle">Maternelle</option>

<option value="primaire">Primaire</option>

<option value="secondaire">Secondaire</option>

</select>

<input type="text" id="search-name" placeholder="Rechercher par nom..." class="px-3


py-2 border border-gray-300 rounded-lg dark:bg-gray-600 dark:border-gray-500 dark:text-white">

<button onclick="applyFilters()" class="bg-primary text-white px-4 py-2 rounded-lg


hover:bg-purple-700 transition-colors">

<i class="fas fa-search mr-1"></i>Filtrer

</button>

</div>

</div>

<!-- Registrations List -->

<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6">

<div class="flex justify-between items-center mb-4">

<h3 class="text-xl font-bold">

<i class="fas fa-list mr-2"></i>Gestion des Inscriptions

</h3>

<button onclick="exportData()" class="bg-accent text-white px-4 py-2 rounded-lg


hover:bg-yellow-600 transition-colors">

<i class="fas fa-download mr-1"></i>Exporter

</button>

</div>

<div id="registrations-list" class="space-y-4">

<!-- Registration items will be dynamically inserted here -->

</div>
</div>

<div class="mt-6 text-center">

<button onclick="logout()" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2


px-6 rounded-lg transition-colors">

<i class="fas fa-sign-out-alt mr-2"></i>Se déconnecter

</button>

</div>

</div>

</div>

</div>

</section>

</main>

<!-- Footer -->

<footer class="bg-gray-800 dark:bg-gray-900 text-white py-8">

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div class="text-center">

<h3 class="text-xl font-bold mb-2">C.E.C Djelo-Binza</h3>

<p class="text-gray-400 mb-4">Excellence • Intégrité • Innovation</p>

<p class="text-sm text-gray-500">

© 2024 Complexe Éducatif et Culturel Djelo-Binza. Tous droits réservés.

</p>

</div>

</div>

</footer>
<!-- Success Modal -->

<div id="success-modal" class="modal-hidden fixed inset-0 bg-black bg-opacity-50 flex items-center


justify-center z-50">

<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full mx-4">

<div class="text-center">

<div class="bg-green-500 text-white rounded-full w-16 h-16 flex items-center justify-center mx-
auto mb-4 bounce-in">

<i class="fas fa-check text-2xl"></i>

</div>

<h3 class="text-xl font-bold mb-4">Inscription Soumise!</h3>

<div class="text-gray-600 dark:text-gray-300 mb-4" id="success-message"></div>

<button onclick="closeModal('success-modal')" class="bg-primary hover:bg-purple-700 text-


white font-bold py-2 px-6 rounded-lg transition-colors">

<i class="fas fa-times mr-2"></i>Fermer

</button>

</div>

</div>

</div>

<!-- Confirmation Modal -->

<div id="confirm-modal" class="modal-hidden fixed inset-0 bg-black bg-opacity-50 flex items-center


justify-center z-50">

<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full mx-4">

<h3 class="text-xl font-bold mb-4" id="confirm-title">Confirmer l'action</h3>

<p class="text-gray-600 dark:text-gray-300 mb-6" id="confirm-message"></p>

<div class="flex justify-end space-x-4">


<button onclick="closeModal('confirm-modal')" class="px-4 py-2 text-gray-600 dark:text-gray-
400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors">

Annuler

</button>

<button id="confirm-action" class="px-4 py-2 bg-primary text-white hover:bg-purple-700


rounded transition-colors">

Confirmer

</button>

</div>

</div>

</div>

<!-- Notification Toast -->

<div id="notification" class="fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg
shadow-lg transform translate-x-full transition-transform duration-300 z-50">

<div class="flex items-center">

<i id="notification-icon" class="fas fa-check mr-2"></i>

<span id="notification-message">Message</span>

</div>

</div>

<script>

// Dark mode detection

if ([Link] && [Link]('(prefers-color-scheme: dark)').matches) {

[Link]('dark');

[Link]('(prefers-color-scheme: dark)').addEventListener('change', event => {


if ([Link]) {

[Link]('dark');

} else {

[Link]('dark');

});

// Global variables

let registrations = [Link]([Link]('registrations')) || [];

let registrationCounter = parseInt([Link]('registrationCounter')) || 1;

let isAdminLoggedIn = [Link]('adminLoggedIn') === 'true';

let currentFilters = { status: '', level: '', search: '' };

// Navigation functions

function showSection(sectionId) {

// Hide all sections

const sections = [Link]('.section');

[Link](section => {

[Link]('section-hidden');

});

// Show target section

const targetSection = [Link](sectionId);

if (targetSection) {

[Link]('section-hidden');
[Link]('fade-in');

// Close mobile menu if open

const mobileMenu = [Link]('mobile-menu');

[Link]('hidden');

// Update admin dashboard if needed

if (sectionId === 'admin' && isAdminLoggedIn) {

updateAdminDashboard();

function toggleMobileMenu() {

const mobileMenu = [Link]('mobile-menu');

[Link]('hidden');

// Notification system

function showNotification(message, type = 'success') {

const notification = [Link]('notification');

const icon = [Link]('notification-icon');

const messageEl = [Link]('notification-message');

[Link] = message;
// Set colors and icons based on type

switch(type) {

case 'success':

[Link] = 'fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg


shadow-lg transform translate-x-full transition-transform duration-300 z-50';

[Link] = 'fas fa-check mr-2';

break;

case 'error':

[Link] = 'fixed top-20 right-4 bg-red-500 text-white px-6 py-3 rounded-lg


shadow-lg transform translate-x-full transition-transform duration-300 z-50';

[Link] = 'fas fa-exclamation-triangle mr-2';

break;

case 'warning':

[Link] = 'fixed top-20 right-4 bg-yellow-500 text-white px-6 py-3 rounded-lg


shadow-lg transform translate-x-full transition-transform duration-300 z-50';

[Link] = 'fas fa-exclamation mr-2';

break;

// Show notification

setTimeout(() => {

[Link]('translate-x-full');

}, 100);

// Hide after 3 seconds

setTimeout(() => {
[Link]('translate-x-full');

}, 3000);

// Toggle secondary options visibility

function toggleSecondaryOptions() {

const studentLevel = [Link]('student-level').value;

const secondaryOptions = [Link]('secondary-options');

const secondaryOption = [Link]('secondary-option');

if ([Link]('secondaire')) {

[Link]('hidden');

[Link] = true;

} else {

[Link]('hidden');

[Link] = false;

[Link] = '';

// Registration functions

function generateMatricule(name, postname, firstname, year) {

const initials = ([Link](0) + [Link](0) + [Link](0)).toUpperCase();

const currentYear = year || new Date().getFullYear();

const orderNumber = [Link]().padStart(3, '0');


return `${initials}${currentYear}${orderNumber}`;

function submitRegistration(event) {

[Link]();

const submitBtn = [Link]('submit-btn');

const submitText = [Link]('submit-text');

const submitLoading = [Link]('submit-loading');

// Show loading state

[Link] = true;

[Link]('hidden');

[Link]('hidden');

const studentLevel = [Link]('student-level').value;

const secondaryOption = [Link]('secondary-option').value;

// Check if secondary option is required

if ([Link]('secondaire') && !secondaryOption) {

showNotification('Veuillez choisir une option pour le secondaire', 'error');

resetSubmitButton();

return;

}
// Simulate network delay

setTimeout(() => {

const formData = {

id: [Link](),

studentName: [Link]('student-name').value,

studentPostname: [Link]('student-postname').value,

studentFirstname: [Link]('student-firstname').value,

studentBirthdate: [Link]('student-birthdate').value,

studentGender: [Link]('student-gender').value,

studentLevel: [Link]('student-level').value,

secondaryOption: secondaryOption || null,

guardianName: [Link]('guardian-name').value,

guardianPhone: [Link]('guardian-phone').value,

guardianEmail: [Link]('guardian-email').value,

guardianAddress: [Link]('guardian-address').value,

submissionDate: new Date().toISOString(),

status: 'pending',

expiryDate: new Date([Link]() + 3 * 24 * 60 * 60 * 1000).toISOString(),

matricule: generateMatricule(

[Link]('student-name').value,

[Link]('student-postname').value,

[Link]('student-firstname').value

};
[Link](formData);

registrationCounter++;

// Save to localStorage

[Link]('registrations', [Link](registrations));

[Link]('registrationCounter', [Link]());

// Show success message

const successMessage = `Votre inscription a été soumise avec succès!<br><br>

<strong>Matricule:</strong> ${[Link]}<br>

<strong>Nom complet:</strong> ${[Link]} ${[Link]} $


{[Link]}<br>

<strong>Niveau:</strong> ${[Link]}${[Link] ? ' - ' +


[Link] : ''}<br><br>

Votre inscription sera validée dans un délai de 3 jours. Vous serez contacté sur le numéro: $
{[Link]}`;

[Link]('success-message').innerHTML = successMessage;

showModal('success-modal');

// Reset form

[Link]('registration-form').reset();

toggleSecondaryOptions();

// Reset button

resetSubmitButton();
// Show notification

showNotification('Inscription soumise avec succès!');

// Update admin dashboard if logged in

if (isAdminLoggedIn) {

updateAdminDashboard();

}, 1500);

function resetSubmitButton() {

const submitBtn = [Link]('submit-btn');

const submitText = [Link]('submit-text');

const submitLoading = [Link]('submit-loading');

[Link] = false;

[Link]('hidden');

[Link]('hidden');

// Admin functions

function loginAdmin(event) {

[Link]();

const loginBtn = [Link]('admin-login-btn');


const loginText = [Link]('admin-login-text');

const loginLoading = [Link]('admin-login-loading');

// Show loading

[Link] = true;

[Link]('hidden');

[Link]('hidden');

const username = [Link]('admin-username').value;

const password = [Link]('admin-password').value;

// Simulate authentication delay

setTimeout(() => {

if (username === 'admin' && password === 'admin123') {

isAdminLoggedIn = true;

[Link]('adminLoggedIn', 'true');

[Link]('admin-login').[Link]('hidden');

[Link]('admin-dashboard').[Link]('hidden');

updateAdminDashboard();

showNotification('Connexion réussie!');

} else {

showNotification('Nom d\'utilisateur ou mot de passe incorrect', 'error');

// Reset button
[Link] = false;

[Link]('hidden');

[Link]('hidden');

}, 1000);

function logout() {

isAdminLoggedIn = false;

[Link]('adminLoggedIn');

[Link]('admin-login').[Link]('hidden');

[Link]('admin-dashboard').[Link]('hidden');

[Link]('admin-login-form').reset();

showNotification('Déconnexion réussie!');

function updateAdminDashboard() {

const now = new Date();

// Update expired registrations

[Link](registration => {

if ([Link] === 'pending' && new Date([Link]) <= now) {

[Link] = 'expired';

});

[Link]('registrations', [Link](registrations));
// Calculate statistics

const totalRegistrations = [Link];

const approvedRegistrations = [Link](r => [Link] === 'approved').length;

const pendingRegistrations = [Link](r => [Link] === 'pending' && new


Date([Link]) > now).length;

const expiredRegistrations = [Link](r => [Link] === 'expired').length;

// Update DOM with animation

animateCounter('total-registrations', totalRegistrations);

animateCounter('approved-registrations', approvedRegistrations);

animateCounter('pending-registrations', pendingRegistrations);

animateCounter('expired-registrations', expiredRegistrations);

displayRegistrationsList();

function animateCounter(elementId, targetValue) {

const element = [Link](elementId);

const currentValue = parseInt([Link]) || 0;

const increment = [Link]((targetValue - currentValue) / 10);

if (currentValue < targetValue) {

[Link] = currentValue + increment;

setTimeout(() => animateCounter(elementId, targetValue), 50);

} else {
[Link] = targetValue;

function applyFilters() {

[Link] = [Link]('filter-status').value;

[Link] = [Link]('filter-level').value;

[Link] = [Link]('search-name').[Link]();

displayRegistrationsList();

showNotification('Filtres appliqués');

function displayRegistrationsList() {

const container = [Link]('registrations-list');

const now = new Date();

// Filter registrations

let filteredRegistrations = [Link](registration => {

let matches = true;

if ([Link] && [Link] !== [Link]) {

matches = false;

if ([Link]) {
const level = [Link]();

if (![Link]([Link])) {

matches = false;

if ([Link]) {

const fullName = `${[Link]} ${[Link]} $


{[Link]}`.toLowerCase();

if (![Link]([Link])) {

matches = false;

return matches;

});

if ([Link] === 0) {

[Link] = `

<div class="text-center py-8">

<i class="fas fa-inbox text-gray-400 text-4xl mb-4"></i>

<p class="text-gray-500 dark:text-gray-400">Aucune inscription trouvée</p>

</div>

`;

return;

}
// Sort by submission date (newest first)

[Link]((a, b) => new Date([Link]) - new Date([Link]));

const registrationHtml = [Link](registration => {

const statusConfig = {

'pending': {

class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',

text: 'En Attente',

icon: 'fas fa-clock'

},

'approved': {

class: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',

text: 'Approuvée',

icon: 'fas fa-check-circle'

},

'expired': {

class: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',

text: 'Expirée',

icon: 'fas fa-times-circle'

};

const config = statusConfig[[Link]];

const isExpired = new Date([Link]) <= now;


return `

<div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 hover:shadow-lg


transition-shadow">

<div class="flex justify-between items-start mb-3">

<div class="flex-grow">

<h4 class="font-semibold text-lg">

${[Link]} ${[Link]} $
{[Link]}

</h4>

<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-gray-600 dark:text-gray-


400 mt-2">

<p><i class="fas fa-id-card mr-2"></i><strong>Matricule:</strong> $


{[Link]}</p>

<p><i class="fas fa-graduation-cap mr-2"></i><strong>Niveau:</strong> $


{[Link]}${[Link] ? ' - ' + [Link] : ''}</p>

<p><i class="fas fa-user mr-2"></i><strong>Tuteur:</strong> $


{[Link]}</p>

<p><i class="fas fa-phone mr-2"></i><strong>Téléphone:</strong> $


{[Link]}</p>

</div>

</div>

<span class="px-3 py-1 rounded-full text-xs font-semibold ${[Link]} ml-4">

<i class="${[Link]} mr-1"></i>${[Link]}

</span>

</div>

<div class="text-xs text-gray-500 dark:text-gray-400 mb-3 flex flex-wrap gap-4">


<span><i class="fas fa-calendar mr-1"></i>Soumis le: ${new
Date([Link]).toLocaleDateString('fr-FR')}</span>

${[Link] === 'pending' ? `<span><i class="fas fa-clock mr-1"></i>Expire le: $


{new Date([Link]).toLocaleDateString('fr-FR')}</span>` : ''}

${[Link] ? `<span><i class="fas fa-check mr-1"></i>Approuvé le: $


{new Date([Link]).toLocaleDateString('fr-FR')}</span>` : ''}

</div>

${[Link] === 'pending' && !isExpired ? `

<div class="flex flex-wrap gap-2">

<button onclick="approveRegistration(${[Link]})" class="bg-green-500


hover:bg-green-600 text-white px-3 py-1 rounded text-sm transition-colors">

<i class="fas fa-check mr-1"></i>Approuver

</button>

<button onclick="viewRegistrationDetails(${[Link]})" class="bg-blue-500


hover:bg-blue-600 text-white px-3 py-1 rounded text-sm transition-colors">

<i class="fas fa-eye mr-1"></i>Détails

</button>

<button onclick="deleteRegistration(${[Link]})" class="bg-red-500 hover:bg-


red-600 text-white px-3 py-1 rounded text-sm transition-colors">

<i class="fas fa-trash mr-1"></i>Supprimer

</button>

</div>

`:`

<div class="flex flex-wrap gap-2">

<button onclick="viewRegistrationDetails(${[Link]})" class="bg-blue-500


hover:bg-blue-600 text-white px-3 py-1 rounded text-sm transition-colors">

<i class="fas fa-eye mr-1"></i>Détails


</button>

<button onclick="deleteRegistration(${[Link]})" class="bg-red-500 hover:bg-


red-600 text-white px-3 py-1 rounded text-sm transition-colors">

<i class="fas fa-trash mr-1"></i>Supprimer

</button>

</div>

`}

</div>

`;

}).join('');

[Link] = registrationHtml;

function approveRegistration(id) {

const registration = [Link](r => [Link] === id);

if (registration) {

showConfirmDialog(

`Approuver l'inscription de ${[Link]} ${[Link]} $


{[Link]}?`,

() => {

[Link] = 'approved';

[Link] = new Date().toISOString();

[Link]('registrations', [Link](registrations));

updateAdminDashboard();

showNotification('Inscription approuvée avec succès!');


}

);

function deleteRegistration(id) {

const registration = [Link](r => [Link] === id);

if (registration) {

showConfirmDialog(

`Supprimer définitivement l'inscription de ${[Link]} $


{[Link]} ${[Link]}?`,

() => {

registrations = [Link](r => [Link] !== id);

[Link]('registrations', [Link](registrations));

updateAdminDashboard();

showNotification('Inscription supprimée');

);

function viewRegistrationDetails(id) {

const registration = [Link](r => [Link] === id);

if (registration) {

const details = `

<div class="max-w-2xl">
<h4 class="font-bold text-lg mb-4 text-primary">Détails de l'inscription</h4>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">

<div>

<h5 class="font-semibold text-primary mb-2">Informations de l'élève</h5>

<p><strong>Nom:</strong> ${[Link]}</p>

<p><strong>Post-nom:</strong> ${[Link]}</p>

<p><strong>Prénom:</strong> ${[Link]}</p>

<p><strong>Date de naissance:</strong> ${new


Date([Link]).toLocaleDateString('fr-FR')}</p>

<p><strong>Sexe:</strong> ${[Link] === 'M' ? 'Masculin' :


'Féminin'}</p>

<p><strong>Niveau:</strong> ${[Link]}</p>

${[Link] ? `<p><strong>Option:</strong> $
{[Link]}</p>` : ''}

<p><strong>Matricule:</strong> ${[Link]}</p>

</div>

<div>

<h5 class="font-semibold text-primary mb-2">Informations du tuteur</h5>

<p><strong>Nom:</strong> ${[Link]}</p>

<p><strong>Téléphone:</strong> ${[Link]}</p>

<p><strong>Email:</strong> ${[Link] || 'Non renseigné'}</p>

<p><strong>Adresse:</strong> ${[Link]}</p>

</div>

</div>
<div>

<h5 class="font-semibold text-primary mb-2">Informations d'inscription</h5>

<p><strong>Date de soumission:</strong> ${new


Date([Link]).toLocaleString('fr-FR')}</p>

<p><strong>Statut:</strong> ${[Link]}</p>

${[Link] === 'pending' ? `<p><strong>Date d'expiration:</strong> ${new


Date([Link]).toLocaleString('fr-FR')}</p>` : ''}

${[Link] ? `<p><strong>Date d'approbation:</strong> ${new


Date([Link]).toLocaleString('fr-FR')}</p>` : ''}

</div>

</div>

`;

showCustomModal(details, 'Détails de l\'inscription');

function exportData() {

const csvContent = "data:text/csv;charset=utf-8," +

"Matricule,Nom,Post-nom,Prénom,Date de
naissance,Sexe,Niveau,Option,Tuteur,Téléphone,Email,Adresse,Statut,Date de soumission\n" +

[Link](r =>

`"${[Link]}","${[Link]}","${[Link]}","${[Link]}","$
{[Link]}","${[Link]}","${[Link]}","${[Link] || ''}","$
{[Link]}","${[Link]}","${[Link] || ''}","${[Link]}","$
{[Link]}","${new Date([Link]).toLocaleDateString('fr-FR')}"`

).join("\n");
const encodedUri = encodeURI(csvContent);

const link = [Link]("a");

[Link]("href", encodedUri);

[Link]("download", `inscriptions_cec_${new Date().toISOString().split('T')[0]}.csv`);

[Link](link);

[Link]();

[Link](link);

showNotification('Données exportées avec succès!');

// Modal functions

function showModal(modalId) {

const modal = [Link](modalId);

[Link]('modal-hidden');

function closeModal(modalId) {

const modal = [Link](modalId);

[Link]('modal-hidden');

function showCustomModal(content, title = 'Information') {

const modal = [Link]('div');

[Link] = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';


[Link] = `

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl w-full mx-4 max-h-
screen overflow-y-auto">

<div class="flex justify-between items-center mb-4">

<h3 class="text-lg font-bold">${title}</h3>

<button onclick="[Link]('.fixed').remove()" class="text-gray-500 hover:text-gray-700">

<i class="fas fa-times"></i>

</button>

</div>

<div class="text-gray-700 dark:text-gray-300">${content}</div>

<div class="flex justify-end mt-6">

<button onclick="[Link]('.fixed').remove()" class="px-4 py-2 bg-primary text-white


hover:bg-purple-700 rounded transition-colors">

<i class="fas fa-times mr-2"></i>Fermer

</button>

</div>

</div>

`;

[Link](modal);

function showConfirmDialog(message, onConfirm) {

[Link]('confirm-message').textContent = message;

[Link]('confirm-action').onclick = () => {

closeModal('confirm-modal');

onConfirm();
};

showModal('confirm-modal');

// Contact form submission

function submitContactForm(event) {

[Link]();

const submitBtn = [Link]('contact-submit-btn');

const submitText = [Link]('contact-submit-text');

const submitLoading = [Link]('contact-loading');

// Show loading

[Link] = true;

[Link]('hidden');

[Link]('hidden');

// Simulate sending

setTimeout(() => {

showNotification('Votre message a été envoyé avec succès! Nous vous répondrons dans les
plus brefs délais.');

[Link]('contact-form').reset();

// Reset button

[Link] = false;

[Link]('hidden');
[Link]('hidden');

}, 1500);

// Event listeners

[Link]('DOMContentLoaded', function() {

[Link]('registration-form').addEventListener('submit', submitRegistration);

[Link]('admin-login-form').addEventListener('submit', loginAdmin);

[Link]('contact-form').addEventListener('submit', submitContactForm);

// Apply filters on enter key

[Link]('search-name').addEventListener('keypress', function(e) {

if ([Link] === 'Enter') {

applyFilters();

});

// Check if admin is already logged in

if (isAdminLoggedIn) {

[Link]('admin-login').[Link]('hidden');

[Link]('admin-dashboard').[Link]('hidden');

// Update expired registrations on load

const now = new Date();


let hasExpiredRegistrations = false;

[Link](registration => {

if ([Link] === 'pending' && new Date([Link]) <= now) {

[Link] = 'expired';

hasExpiredRegistrations = true;

});

if (hasExpiredRegistrations) {

[Link]('registrations', [Link](registrations));

});

// Initialize with home section

showSection('home');

</script>

</body>

</html>

```

Le front-end est maintenant complet avec toutes les fonctionnalités demandées :

**✅ Fonctionnalités principales :**

- Classes corrigées (Maternelle 1-3, Primaire 1-8, Secondaire 1-4)

- Options détaillées pour le secondaire avec validation


- Génération automatique de matricules

- Système d'expiration des inscriptions (3 jours)

- Interface administrateur complète avec filtres

- Design moderne et animations

**✅ Interface utilisateur :**

- Navigation responsive avec menu mobile

- Mode sombre automatique

- Animations et transitions fluides

- Notifications toast

- Modales personnalisées

- Loading states

**✅ Fonctionnalités admin :**

- Connexion sécurisée (admin/admin123)

- Dashboard avec statistiques animées

- Filtrage par statut, niveau et recherche

- Export des données en CSV

- Gestion complète des inscriptions

- Persistance de session

**✅ Formulaires :**

- Validation en temps réel

- Messages d'erreur clairs

- Champs conditionnels (options secondaire)


- States de chargement

Tout est fonctionnel en localStorage pour tester. Prêt pour l'intégration back-end quand vous le
souhaiterez !

/* Styles personnalisés pour C.E.C Djelo-Binza */

/* Variables CSS personnalisées */

:root {

--primary-color: #5D5CDE;

--secondary-color: #2563eb;

--accent-color: #f59e0b;

--success-color: #10b981;

--warning-color: #f59e0b;

--error-color: #ef4444;

/* Styles spécifiques à l'école */

.school-header {

background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

.matricule-display {

font-family: 'Courier New', monospace;

font-weight: bold;

letter-spacing: 1px;
}

/* Styles d'impression */

@media print {

.no-print {

display: none !important;

.print-only {

display: block !important;

You might also like