| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Système de Gestion Scolaire - RDC</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); |
| | } |
| | .sidebar-item:hover { |
| | background-color: rgba(255, 255, 255, 0.1); |
| | transform: translateX(5px); |
| | transition: all 0.3s ease; |
| | } |
| | .dashboard-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| | transition: all 0.3s ease; |
| | } |
| | .chart-container { |
| | height: 300px; |
| | } |
| | .notification-badge { |
| | position: absolute; |
| | top: -5px; |
| | right: -5px; |
| | } |
| | .active-tab { |
| | border-bottom: 3px solid #3b82f6; |
| | font-weight: 600; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-100 font-sans"> |
| | <div class="flex h-screen overflow-hidden"> |
| | |
| | <div class="hidden md:flex md:flex-shrink-0"> |
| | <div class="flex flex-col w-64 gradient-bg text-white"> |
| | <div class="flex items-center justify-center h-16 px-4 border-b border-blue-800"> |
| | <div class="flex items-center"> |
| | <i class="fas fa-graduation-cap text-2xl mr-2 text-blue-300"></i> |
| | <span class="text-xl font-bold">EduRDC</span> |
| | </div> |
| | </div> |
| | <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> |
| | |
| | <div class="flex items-center mb-8 p-2 rounded-lg bg-blue-900 bg-opacity-50"> |
| | <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Admin"> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium">Marie Kabasele</p> |
| | <p class="text-xs text-blue-200">Administrateur</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <nav class="flex-1 space-y-2"> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white bg-blue-900 bg-opacity-30"> |
| | <i class="fas fa-tachometer-alt mr-3 text-blue-300"></i> |
| | Tableau de bord |
| | </a> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white"> |
| | <i class="fas fa-user-graduate mr-3 text-blue-300"></i> |
| | Élèves |
| | </a> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white"> |
| | <i class="fas fa-chalkboard-teacher mr-3 text-blue-300"></i> |
| | Enseignants |
| | </a> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white"> |
| | <i class="fas fa-book mr-3 text-blue-300"></i> |
| | Notes & Bilans |
| | </a> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white"> |
| | <i class="fas fa-money-bill-wave mr-3 text-blue-300"></i> |
| | Finances |
| | </a> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white"> |
| | <i class="fas fa-chart-bar mr-3 text-blue-300"></i> |
| | Statistiques |
| | </a> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white"> |
| | <i class="fas fa-envelope mr-3 text-blue-300"></i> |
| | Messagerie |
| | </a> |
| | <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-item text-white"> |
| | <i class="fas fa-cog mr-3 text-blue-300"></i> |
| | Paramètres |
| | </a> |
| | </nav> |
| | </div> |
| | <div class="p-4 border-t border-blue-800"> |
| | <button class="flex items-center justify-center w-full px-4 py-2 text-sm text-white bg-blue-900 rounded-lg hover:bg-blue-800"> |
| | <i class="fas fa-sign-out-alt mr-2"></i> |
| | Déconnexion |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="flex flex-col flex-1 overflow-hidden"> |
| | |
| | <header class="bg-white shadow-sm z-10"> |
| | <div class="flex items-center justify-between px-4 py-3 sm:px-6"> |
| | |
| | <div class="md:hidden"> |
| | <button class="text-gray-500 hover:text-gray-600 focus:outline-none"> |
| | <i class="fas fa-bars text-xl"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="flex-1 max-w-md mx-4"> |
| | <div class="relative"> |
| | <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> |
| | <i class="fas fa-search text-gray-400"></i> |
| | </div> |
| | <input class="block w-full py-2 pl-10 pr-3 text-sm bg-gray-100 border border-transparent rounded-md focus:bg-white focus:border-blue-500 focus:ring-blue-500" placeholder="Rechercher..."> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex items-center space-x-4"> |
| | <button class="p-1 text-gray-500 rounded-full hover:text-gray-600 hover:bg-gray-100 focus:outline-none relative"> |
| | <i class="fas fa-bell text-xl"></i> |
| | <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> |
| | </button> |
| | <button class="p-1 text-gray-500 rounded-full hover:text-gray-600 hover:bg-gray-100 focus:outline-none"> |
| | <i class="fas fa-question-circle text-xl"></i> |
| | </button> |
| | <div class="relative"> |
| | <button class="flex items-center text-sm text-gray-700 rounded-full focus:outline-none"> |
| | <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Admin"> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="flex-1 overflow-y-auto p-4 sm:p-6 bg-gray-50"> |
| | <div class="max-w-7xl mx-auto"> |
| | |
| | <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6"> |
| | <div> |
| | <h1 class="text-2xl font-bold text-gray-900">Tableau de bord</h1> |
| | <p class="text-sm text-gray-500">Bienvenue dans le système de gestion scolaire EduRDC</p> |
| | </div> |
| | <div class="mt-4 sm:mt-0"> |
| | <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
| | <i class="fas fa-plus mr-2"></i> |
| | Nouvelle inscription |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6"> |
| | <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg"> |
| | <div class="px-4 py-5 sm:p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
| | <i class="fas fa-user-graduate text-white text-xl"></i> |
| | </div> |
| | <div class="ml-5 w-0 flex-1"> |
| | <dt class="text-sm font-medium text-gray-500 truncate"> |
| | Élèves inscrits |
| | </dt> |
| | <dd class="flex items-baseline"> |
| | <div class="text-2xl font-semibold text-gray-900"> |
| | 1,248 |
| | </div> |
| | <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> |
| | <i class="fas fa-arrow-up text-xs"></i> |
| | <span class="sr-only">Increased by</span> |
| | 12% |
| | </div> |
| | </dd> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg"> |
| | <div class="px-4 py-5 sm:p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> |
| | <i class="fas fa-chalkboard-teacher text-white text-xl"></i> |
| | </div> |
| | <div class="ml-5 w-0 flex-1"> |
| | <dt class="text-sm font-medium text-gray-500 truncate"> |
| | Enseignants |
| | </dt> |
| | <dd class="flex items-baseline"> |
| | <div class="text-2xl font-semibold text-gray-900"> |
| | 58 |
| | </div> |
| | <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> |
| | <i class="fas fa-arrow-up text-xs"></i> |
| | <span class="sr-only">Increased by</span> |
| | 5% |
| | </div> |
| | </dd> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg"> |
| | <div class="px-4 py-5 sm:p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> |
| | <i class="fas fa-money-bill-wave text-white text-xl"></i> |
| | </div> |
| | <div class="ml-5 w-0 flex-1"> |
| | <dt class="text-sm font-medium text-gray-500 truncate"> |
| | Recettes mensuelles |
| | </dt> |
| | <dd class="flex items-baseline"> |
| | <div class="text-2xl font-semibold text-gray-900"> |
| | 24,750,000 FCFA |
| | </div> |
| | </dd> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="dashboard-card bg-white overflow-hidden shadow rounded-lg"> |
| | <div class="px-4 py-5 sm:p-6"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> |
| | <i class="fas fa-user-times text-white text-xl"></i> |
| | </div> |
| | <div class="ml-5 w-0 flex-1"> |
| | <dt class="text-sm font-medium text-gray-500 truncate"> |
| | Taux d'absentéisme |
| | </dt> |
| | <dd class="flex items-baseline"> |
| | <div class="text-2xl font-semibold text-gray-900"> |
| | 8.2% |
| | </div> |
| | <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600"> |
| | <i class="fas fa-arrow-up text-xs"></i> |
| | <span class="sr-only">Increased by</span> |
| | 2.1% |
| | </div> |
| | </dd> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| | |
| | <div class="bg-white shadow rounded-lg p-6 lg:col-span-2"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <h3 class="text-lg font-medium text-gray-900">Répartition des élèves par niveau</h3> |
| | <div class="relative"> |
| | <select class="appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:bg-white focus:border-blue-500 text-sm"> |
| | <option>Année scolaire 2023-2024</option> |
| | <option>Année scolaire 2022-2023</option> |
| | </select> |
| | <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
| | <i class="fas fa-chevron-down text-xs"></i> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="chart-container"> |
| | <canvas id="studentDistributionChart"></canvas> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white shadow rounded-lg overflow-hidden"> |
| | <div class="px-6 py-5 border-b border-gray-200"> |
| | <h3 class="text-lg font-medium text-gray-900">Activités récentes</h3> |
| | </div> |
| | <div class="divide-y divide-gray-200"> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-user-plus text-blue-500"></i> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium text-gray-900">Nouvelle inscription</p> |
| | <p class="text-sm text-gray-500">Jean Kabasele en 6ème A</p> |
| | <p class="text-xs text-gray-400 mt-1">Il y a 2 heures</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-money-bill-wave text-green-500"></i> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium text-gray-900">Paiement effectué</p> |
| | <p class="text-sm text-gray-500">Famille Mbayo - 150,000 FCFA</p> |
| | <p class="text-xs text-gray-400 mt-1">Il y a 5 heures</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-book text-purple-500"></i> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium text-gray-900">Notes mises à jour</p> |
| | <p class="text-sm text-gray-500">Mathématiques Terminale C</p> |
| | <p class="text-xs text-gray-400 mt-1">Hier à 14:30</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-start"> |
| | <div class="flex-shrink-0"> |
| | <i class="fas fa-user-tie text-yellow-500"></i> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium text-gray-900">Nouvel enseignant</p> |
| | <p class="text-sm text-gray-500">M. Tshibangu - Physique-Chimie</p> |
| | <p class="text-xs text-gray-400 mt-1">Hier à 10:15</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Voir toutes les activités</a> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| | |
| | <div class="bg-white shadow rounded-lg overflow-hidden lg:col-span-2"> |
| | <div class="px-6 py-5 border-b border-gray-200"> |
| | <h3 class="text-lg font-medium text-gray-900">Aperçu financier</h3> |
| | </div> |
| | <div class="px-6 py-4"> |
| | <div class="flex justify-between mb-4"> |
| | <div> |
| | <p class="text-sm text-gray-500">Recettes totales</p> |
| | <p class="text-xl font-semibold text-gray-900">74,250,000 FCFA</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500">Dépenses totales</p> |
| | <p class="text-xl font-semibold text-gray-900">52,800,000 FCFA</p> |
| | </div> |
| | <div> |
| | <p class="text-sm text-gray-500">Solde</p> |
| | <p class="text-xl font-semibold text-green-600">+21,450,000 FCFA</p> |
| | </div> |
| | </div> |
| | <div class="chart-container"> |
| | <canvas id="financialChart"></canvas> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <div class="flex justify-between items-center"> |
| | <div> |
| | <p class="text-sm text-gray-500">Modes de paiement</p> |
| | <div class="flex space-x-2 mt-2"> |
| | <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| | <i class="fas fa-money-bill-wave mr-1"></i> Espèces 45% |
| | </span> |
| | <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> |
| | <i class="fas fa-mobile-alt mr-1"></i> Mobile Money 30% |
| | </span> |
| | <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> |
| | <i class="fas fa-university mr-1"></i> Virement 20% |
| | </span> |
| | <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> |
| | <i class="fas fa-money-check-alt mr-1"></i> Chèque 5% |
| | </span> |
| | </div> |
| | </div> |
| | <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Voir détails</a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white shadow rounded-lg overflow-hidden"> |
| | <div class="px-6 py-5 border-b border-gray-200"> |
| | <h3 class="text-lg font-medium text-gray-900">Meilleurs élèves</h3> |
| | </div> |
| | <div class="divide-y divide-gray-200"> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| | <span class="text-blue-800 font-bold">1</span> |
| | </div> |
| | <div class="ml-4"> |
| | <p class="text-sm font-medium text-gray-900">Sarah Mbuyi</p> |
| | <p class="text-sm text-gray-500">Terminale D - Moyenne: 18.7/20</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> |
| | <span class="text-green-800 font-bold">2</span> |
| | </div> |
| | <div class="ml-4"> |
| | <p class="text-sm font-medium text-gray-900">David Kanku</p> |
| | <p class="text-sm text-gray-500">Terminale C - Moyenne: 17.9/20</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center"> |
| | <span class="text-yellow-800 font-bold">3</span> |
| | </div> |
| | <div class="ml-4"> |
| | <p class="text-sm font-medium text-gray-900">Grace Tshibangu</p> |
| | <p class="text-sm text-gray-500">4ème - Moyenne: 17.5/20</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center"> |
| | <span class="text-gray-800 font-bold">4</span> |
| | </div> |
| | <div class="ml-4"> |
| | <p class="text-sm font-medium text-gray-900">Jonathan Ilunga</p> |
| | <p class="text-sm text-gray-500">CM2 - Moyenne: 9.2/10</p> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="px-6 py-4"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center"> |
| | <span class="text-gray-800 font-bold">5</span> |
| | </div> |
| | <div class="ml-4"> |
| | <p class="text-sm font-medium text-gray-900">Ruth Mukendi</p> |
| | <p class="text-sm text-gray-500">CE2 - Moyenne: 9.0/10</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="bg-gray-50 px-6 py-4"> |
| | <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Voir tous les résultats</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="md:hidden fixed inset-0 z-40 hidden"> |
| | <div class="fixed inset-0"> |
| | <div class="absolute inset-0 bg-gray-600 opacity-75"></div> |
| | </div> |
| | <div class="relative flex-1 flex flex-col max-w-xs w-full gradient-bg"> |
| | <div class="absolute top-0 right-0 -mr-14 p-1"> |
| | <button class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"> |
| | <i class="fas fa-times text-white"></i> |
| | </button> |
| | </div> |
| | <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto"> |
| | <div class="flex-shrink-0 flex items-center px-4"> |
| | <i class="fas fa-graduation-cap text-2xl mr-2 text-blue-300"></i> |
| | <span class="text-xl font-bold text-white">EduRDC</span> |
| | </div> |
| | <nav class="mt-5 px-2 space-y-1"> |
| | <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-blue-900 focus:outline-none focus:bg-blue-800 transition ease-in-out duration-150"> |
| | <i class="fas fa-tachometer-alt mr-4 text-blue-300"></i> |
| | Tableau de bord |
| | </a> |
| | <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-white hover:bg-blue-800 focus:outline-none focus:bg-blue-700 transition ease-in-out duration-150"> |
| | <i class="fas fa-user-graduate mr-4 text-blue-300"></i> |
| | Élèves |
| | </a> |
| | <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-white hover:bg-blue-800 focus:outline-none focus:bg-blue-700 transition ease-in-out duration-150"> |
| | <i class="fas fa-chalkboard-teacher mr-4 text-blue-300"></i> |
| | Enseignants |
| | </a> |
| | <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-white hover:bg-blue-800 focus:outline-none focus:bg-blue-700 transition ease-in-out duration-150"> |
| | <i class="fas fa-book mr-4 text-blue-300"></i> |
| | Notes & Bilans |
| | </a> |
| | <a href="#" class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-white hover:bg-blue-800 focus:outline-none focus:bg-blue-700 transition ease-in-out duration-150"> |
| | <i class="fas fa-money-bill-wave mr-4 text-blue-300"></i> |
| | Finances |
| | </a> |
| | </nav> |
| | </div> |
| | <div class="flex-shrink-0 flex border-t border-blue-800 p-4"> |
| | <button class="flex-shrink-0 w-full group block"> |
| | <div class="flex items-center"> |
| | <div> |
| | <img class="inline-block h-9 w-9 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Admin"> |
| | </div> |
| | <div class="ml-3"> |
| | <p class="text-sm font-medium text-white">Marie Kabasele</p> |
| | <p class="text-xs font-medium text-blue-200 group-hover:text-white">Voir profil</p> |
| | </div> |
| | </div> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| | <script> |
| | |
| | const studentCtx = document.getElementById('studentDistributionChart').getContext('2d'); |
| | const studentChart = new Chart(studentCtx, { |
| | type: 'bar', |
| | data: { |
| | labels: ['Primaire', 'Collège', 'Lycée'], |
| | datasets: [ |
| | { |
| | label: 'Garçons', |
| | data: [320, 280, 180], |
| | backgroundColor: '#3b82f6', |
| | borderColor: '#3b82f6', |
| | borderWidth: 1 |
| | }, |
| | { |
| | label: 'Filles', |
| | data: [290, 260, 150], |
| | backgroundColor: '#8b5cf6', |
| | borderColor: '#8b5cf6', |
| | borderWidth: 1 |
| | } |
| | ] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | scales: { |
| | y: { |
| | beginAtZero: true, |
| | ticks: { |
| | callback: function(value) { |
| | return value; |
| | } |
| | } |
| | } |
| | }, |
| | plugins: { |
| | legend: { |
| | position: 'top', |
| | }, |
| | tooltip: { |
| | callbacks: { |
| | label: function(context) { |
| | return context.dataset.label + ': ' + context.raw + ' élèves'; |
| | } |
| | } |
| | } |
| | } |
| | } |
| | }); |
| | |
| | |
| | const financialCtx = document.getElementById('financialChart').getContext('2d'); |
| | const financialChart = new Chart(financialCtx, { |
| | type: 'line', |
| | data: { |
| | labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'], |
| | datasets: [ |
| | { |
| | label: 'Recettes', |
| | data: [5.2, 6.0, 6.8, 7.5, 8.2, 6.5, 5.8, 6.2, 7.8, 8.5, 7.2, 6.8], |
| | borderColor: '#10b981', |
| | backgroundColor: 'rgba(16, 185, 129, 0.1)', |
| | borderWidth: 2, |
| | fill: true, |
| | tension: 0.4 |
| | }, |
| | { |
| | label: 'Dépenses', |
| | data: [4.0, 4.5, 5.0, 5.5, 6.0, 5.8, 5.2, 4.8, 5.5, 6.2, 5.8, 5.5], |
| | borderColor: '#ef4444', |
| | backgroundColor: 'rgba(239, 68, 68, 0.1)', |
| | borderWidth: 2, |
| | fill: true, |
| | tension: 0.4 |
| | } |
| | ] |
| | }, |
| | options: { |
| | responsive: true, |
| | maintainAspectRatio: false, |
| | scales: { |
| | y: { |
| | beginAtZero: true, |
| | ticks: { |
| | callback: function(value) { |
| | return value + 'M'; |
| | } |
| | } |
| | } |
| | }, |
| | plugins: { |
| | legend: { |
| | position: 'top', |
| | }, |
| | tooltip: { |
| | callbacks: { |
| | label: function(context) { |
| | return context.dataset.label + ': ' + context.raw + 'M FCFA'; |
| | } |
| | } |
| | } |
| | } |
| | } |
| | }); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const mobileMenuButton = document.querySelector('.md\\:hidden button'); |
| | const mobileMenu = document.querySelector('.md\\:hidden.fixed'); |
| | |
| | mobileMenuButton.addEventListener('click', function() { |
| | mobileMenu.classList.toggle('hidden'); |
| | }); |
| | |
| | |
| | document.addEventListener('click', function(event) { |
| | if (!mobileMenu.contains(event.target) && event.target !== mobileMenuButton) { |
| | mobileMenu.classList.add('hidden'); |
| | } |
| | }); |
| | }); |
| | </script> |
| | <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=elsecond/gesco" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
