Hugging Face's logo

Spaces:
dibakidi
/
olivier
Running

App Files Community
olivier / index.html
dibakidi's picture
dibakidi
Add 3 files
a796605 verified
raw
history blame contribute delete
50.8 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Système LMD - Gestion des Étudiants</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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.sidebar-item:hover .sidebar-icon {
transform: translateX(5px);
}
.sidebar-icon {
transition: transform 0.2s ease-in-out;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.grade-A { background-color: #10b981; }
.grade-B { background-color: #3b82f6; }
.grade-C { background-color: #f59e0b; }
.grade-D { background-color: #ef4444; }
.grade-F { background-color: #64748b; }
.dropzone {
border: 2px dashed #cbd5e0;
border-radius: 0.5rem;
transition: all 0.3s;
}
.dropzone.active {
border-color: #4f46e5;
background-color: #eef2ff;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<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-indigo-400">
<div class="flex items-center">
<i class="fas fa-graduation-cap text-2xl mr-2"></i>
<span class="text-xl font-bold">LMD System</span>
</div>
</div>
<div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
<nav class="flex-1 space-y-2">
<a href="#" id="dashboard-tab" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md bg-indigo-700 text-white">
<i class="sidebar-icon fas fa-tachometer-alt mr-3"></i>
Tableau de bord
</a>
<a href="#" id="students-tab" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white hover:bg-indigo-600">
<i class="sidebar-icon fas fa-users mr-3"></i>
Étudiants
</a>
<a href="#" id="courses-tab" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white hover:bg-indigo-600">
<i class="sidebar-icon fas fa-book mr-3"></i>
Unités d'enseignement
</a>
<a href="#" id="grades-tab" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white hover:bg-indigo-600">
<i class="sidebar-icon fas fa-edit mr-3"></i>
Saisie des cotes
</a>
<a href="#" id="calculate-tab" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white hover:bg-indigo-600">
<i class="sidebar-icon fas fa-calculator mr-3"></i>
Calcul des résultats
</a>
<a href="#" id="publish-tab" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white hover:bg-indigo-600">
<i class="sidebar-icon fas fa-bullhorn mr-3"></i>
Publication
</a>
</nav>
<div class="mt-auto mb-4 px-4">
<div class="flex items-center p-2 text-sm text-indigo-200 rounded-md hover:bg-indigo-600 hover:text-white cursor-pointer">
<i class="fas fa-cog mr-3"></i>
Paramètres
</div>
<div class="flex items-center p-2 text-sm text-indigo-200 rounded-md hover:bg-indigo-600 hover:text-white cursor-pointer">
<i class="fas fa-sign-out-alt mr-3"></i>
Déconnexion
</div>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- Top navbar -->
<div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
<div class="flex items-center md:hidden">
<button class="text-gray-500 focus:outline-none">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="flex items-center space-x-2">
<div class="relative">
<i class="fas fa-bell text-gray-500 cursor-pointer"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="h-8 w-8 rounded-full">
<span class="ml-2 text-sm font-medium">Prof. Diallo</span>
</div>
</div>
</div>
</div>
<!-- Content area -->
<div class="flex-1 overflow-auto p-4">
<!-- Dashboard Content -->
<div id="dashboard-content" class="fade-in">
<h1 class="text-2xl font-bold text-gray-800 mb-6">Tableau de bord</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Étudiants inscrits</p>
<h3 class="text-2xl font-bold">248</h3>
</div>
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
<i class="fas fa-users text-xl"></i>
</div>
</div>
<div class="mt-4 text-sm text-green-500">
<i class="fas fa-arrow-up mr-1"></i> 12% depuis le dernier semestre
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Unités d'enseignement</p>
<h3 class="text-2xl font-bold">18</h3>
</div>
<div class="p-3 rounded-full bg-green-100 text-green-600">
<i class="fas fa-book text-xl"></i>
</div>
</div>
<div class="mt-4 text-sm text-gray-500">
<i class="fas fa-equals mr-1"></i> Stable
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Cotes à saisir</p>
<h3 class="text-2xl font-bold">5</h3>
</div>
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
<i class="fas fa-edit text-xl"></i>
</div>
</div>
<div class="mt-4 text-sm text-red-500">
<i class="fas fa-exclamation-circle mr-1"></i> Délai: 3 jours
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Taux de réussite</p>
<h3 class="text-2xl font-bold">78%</h3>
</div>
<div class="p-3 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-chart-line text-xl"></i>
</div>
</div>
<div class="mt-4 text-sm text-green-500">
<i class="fas fa-arrow-up mr-1"></i> 5% vs. dernier semestre
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold">Dernières cotes saisies</h2>
<a href="#" class="text-sm text-indigo-600 hover:underline">Voir tout</a>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Étudiant</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">UE</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Cote</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 whitespace-nowrap">Moussa Camara</td>
<td class="px-4 py-2 whitespace-nowrap">INF301</td>
<td class="px-4 py-2 whitespace-nowrap font-bold">16/20</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">12/05/2023</td>
</tr>
<tr>
<td class="px-4 py-2 whitespace-nowrap">Aminata Diallo</td>
<td class="px-4 py-2 whitespace-nowrap">MAT205</td>
<td class="px-4 py-2 whitespace-nowrap font-bold">14/20</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">11/05/2023</td>
</tr>
<tr>
<td class="px-4 py-2 whitespace-nowrap">Ibrahima Sarr</td>
<td class="px-4 py-2 whitespace-nowrap">PHY102</td>
<td class="px-4 py-2 whitespace-nowrap font-bold">18/20</td>
<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">10/05/2023</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold">Statistiques des cotes</h2>
<div class="flex space-x-2">
<select class="text-sm border rounded px-2 py-1 focus:outline-none">
<option>L1</option>
<option>L2</option>
<option>L3</option>
</select>
<select class="text-sm border rounded px-2 py-1 focus:outline-none">
<option>Semestre 1</option>
<option>Semestre 2</option>
</select>
</div>
</div>
<div class="h-64 flex items-center justify-center">
<div class="text-center">
<div class="w-64 h-64 relative">
<canvas id="gradesChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold">Calendrier académique</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-md text-sm">Mai 2023</button>
<button class="px-3 py-1 border rounded-md text-sm">Aujourd'hui</button>
</div>
</div>
<div class="grid grid-cols-7 gap-1 mb-2">
<div class="text-center font-medium text-sm py-2 text-gray-500">Lun</div>
<div class="text-center font-medium text-sm py-2 text-gray-500">Mar</div>
<div class="text-center font-medium text-sm py-2 text-gray-500">Mer</div>
<div class="text-center font-medium text-sm py-2 text-gray-500">Jeu</div>
<div class="text-center font-medium text-sm py-2 text-gray-500">Ven</div>
<div class="text-center font-medium text-sm py-2 text-gray-500">Sam</div>
<div class="text-center font-medium text-sm py-2 text-gray-500">Dim</div>
</div>
<div class="grid grid-cols-7 gap-1">
<!-- Calendar days would go here -->
<div class="h-16 border rounded-md p-1 text-sm">1</div>
<div class="h-16 border rounded-md p-1 text-sm">2</div>
<div class="h-16 border rounded-md p-1 text-sm">3</div>
<div class="h-16 border rounded-md p-1 text-sm">4</div>
<div class="h-16 border rounded-md p-1 text-sm">5</div>
<div class="h-16 border rounded-md p-1 text-sm">6</div>
<div class="h-16 border rounded-md p-1 text-sm">7</div>
<!-- More days... -->
</div>
</div>
</div>
<!-- Students Content -->
<div id="students-content" class="fade-in hidden">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">Gestion des Étudiants</h1>
<div class="flex space-x-3">
<button id="import-excel-btn" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 flex items-center">
<i class="fas fa-file-import mr-2"></i> Importer Excel
</button>
<button id="add-student-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 flex items-center">
<i class="fas fa-plus mr-2"></i> Ajouter un étudiant
</button>
</div>
</div>
<!-- Excel Import Modal -->
<div id="excel-import-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Importer des étudiants depuis Excel</h3>
<button id="close-import-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-6">
<div class="dropzone p-8 text-center cursor-pointer" id="excel-dropzone">
<div class="flex flex-col items-center justify-center">
<i class="fas fa-file-excel text-4xl text-green-600 mb-3"></i>
<p class="text-lg font-medium">Glissez-déposez votre fichier Excel ici</p>
<p class="text-gray-500 mt-1">ou cliquez pour sélectionner</p>
<input type="file" id="excel-file-input" class="hidden" accept=".xlsx, .xls, .csv">
<button id="select-file-btn" class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
Sélectionner un fichier
</button>
</div>
</div>
<div id="file-info" class="mt-3 text-sm text-gray-600 hidden">
<i class="fas fa-file-excel text-green-500 mr-1"></i>
<span id="file-name">fichier.xlsx</span>
<span id="file-size" class="text-gray-500 ml-2">(2.4 MB)</span>
</div>
</div>
<div class="mb-6">
<h4 class="text-sm font-medium text-gray-700 mb-2">Options d'importation</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Niveau</label>
<select class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>L1</option>
<option>L2</option>
<option>L3</option>
<option>M1</option>
<option>M2</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Parcours</label>
<select class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>Informatique</option>
<option>Mathématiques</option>
<option>Physique</option>
<option>Chimie</option>
<option>Biologie</option>
</select>
</div>
</div>
</div>
<div class="flex justify-end space-x-3">
<button id="cancel-import-btn" class="px-4 py-2 border rounded-md text-gray-700 hover:bg-gray-50">Annuler</button>
<button id="confirm-import-btn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center">
<i class="fas fa-file-import mr-2"></i> Importer
</button>
</div>
</div>
</div>
</div>
<!-- Add Student Modal -->
<div id="add-student-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Ajouter un nouvel étudiant</h3>
<button id="close-add-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form id="student-form">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Matricule</label>
<input type="text" class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="ETD2023001" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Niveau</label>
<select class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
<option value="">Sélectionner</option>
<option>L1</option>
<option>L2</option>
<option>L3</option>
<option>M1</option>
<option>M2</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
<input type="text" class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
<input type="text" class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Date de naissance</label>
<input type="date" class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Genre</label>
<select class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>Masculin</option>
<option>Féminin</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
<input type="tel" class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Parcours</label>
<select class="w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
<option value="">Sélectionner</option>
<option>Informatique</option>
<option>Mathématiques</option>
<option>Physique</option>
<option>Chimie</option>
<option>Biologie</option>
</select>
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Photo</label>
<div class="flex items-center">
<div class="flex-shrink-0 h-16 w-16 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
<i class="fas fa-user text-gray-400 text-2xl"></i>
</div>
<div class="ml-4">
<input type="file" id="student-photo" class="hidden" accept="image/*">
<button type="button" id="upload-photo-btn" class="px-3 py-1 border rounded-md text-sm text-gray-700 hover:bg-gray-50">
Choisir une photo
</button>
<p class="text-xs text-gray-500 mt-1">JPEG ou PNG, max 2MB</p>
</div>
</div>
</div>
</div>
<div class="flex justify-end space-x-3">
<button type="button" id="cancel-add-btn" class="px-4 py-2 border rounded-md text-gray-700 hover:bg-gray-50">Annuler</button>
<button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center">
<i class="fas fa-save mr-2"></i> Enregistrer
</button>
</div>
</form>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden mb-6">
<div class="p-4 border-b flex justify-between items-center">
<div class="flex items-center space-x-4">
<div class="relative w-64">
<input type="text" placeholder="Rechercher un étudiant..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<select class="border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>Tous les niveaux</option>
<option>L1</option>
<option>L2</option>
<option>L3</option>
<option>M1</option>
<option>M2</option>
</select>
</div>
<button class="text-gray-500 hover:text-gray-700">
<i class="fas fa-filter"></i> Filtres
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Matricule</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom & Prénom</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Niveau</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parcours</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Moyenne</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Crédits</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">ETD2023001</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Aïssatou Diallo</div>
<div class="text-sm text-gray-500">aissatou.diallo@univ.edu</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">L3</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Informatique</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">14.75</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">120/180</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></a>
<a href="#" class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">ETD2023002</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Mamadou Keita</div>
<div class="text-sm text-gray-500">mamadou.keita@univ.edu</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">L2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mathématiques</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600">12.30</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">60/120</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></a>
<a href="#" class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">ETD2023003</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/63.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Fatoumata Bamba</div>
<div class="text-sm text-gray-500">fatoumata.bamba@univ.edu</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">M1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Physique</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-yellow-600">10.45</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30/60</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></a>
<a href="#" class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t flex items-center justify-between">
<div class="text-sm text-gray-500">
Affichage de <span class="font-medium">1</span> à <span class="font-medium">3</span> sur <span class="font-medium">248</span> étudiants
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border rounded-md text-sm disabled:opacity-50" disabled>Précédent</button>
<button class="px-3 py-1 border rounded-md text-sm bg-indigo-600 text-white">1</button>
<button class="px-3 py-1 border rounded-md text-sm">2</button>
<button class="px-3 py-1 border rounded-md text-sm">3</button>
<button class="px-3 py-1 border rounded-md text-sm">...</button>
<button class="px-3 py-1 border rounded-md text-sm">10</button>
<button class="px-3 py-1 border rounded-md text-sm">Suivant</button>
</div>
</div>
</div>
</div>
<!-- Courses Content -->
<div id="courses-content" class="fade-in hidden">
<!-- Contenu des Unités d'enseignement -->
</div>
<!-- Grades Content -->
<div id="grades-content" class="fade-in hidden">
<!-- Contenu de Saisie des cotes -->
</div>
<!-- Calculate Content -->
<div id="calculate-content" class="fade-in hidden">
<!-- Contenu de Calcul des résultats -->
</div>
<!-- Publish Content -->
<div id="publish-content" class="fade-in hidden">
<!-- Contenu de Publication -->
</div>
</div>
</div>
</div>
<script>
// Gestion des onglets
document.querySelectorAll('[id$="-tab"]').forEach(tab => {
tab.addEventListener('click', function(e) {
e.preventDefault();
const target = this.id.replace('-tab', '-content');
// Masquer tous les contenus
document.querySelectorAll('[id$="-content"]').forEach(content => {
content.classList.add('hidden');
});
// Afficher le contenu cible
document.getElementById(target).classList.remove('hidden');
// Mettre à jour l'onglet actif
document.querySelectorAll('[id$="-tab"]').forEach(t => {
t.classList.remove('bg-indigo-700', 'text-white');
t.classList.add('text-indigo-200', 'hover:text-white', 'hover:bg-indigo-600');
});
this.classList.remove('text-indigo-200', 'hover:text-white', 'hover:bg-indigo-600');
this.classList.add('bg-indigo-700', 'text-white');
});
});
// Gestion des modals pour les étudiants
const importExcelBtn = document.getElementById('import-excel-btn');
const addStudentBtn = document.getElementById('add-student-btn');
const excelImportModal = document.getElementById('excel-import-modal');
const addStudentModal = document.getElementById('add-student-modal');
const closeImportModal = document.getElementById('close-import-modal');
const closeAddModal = document.getElementById('close-add-modal');
const cancelImportBtn = document.getElementById('cancel-import-btn');
const cancelAddBtn = document.getElementById('cancel-add-btn');
const selectFileBtn = document.getElementById('select-file-btn');
const excelFileInput = document.getElementById('excel-file-input');
const excelDropzone = document.getElementById('excel-dropzone');
const fileInfo = document.getElementById('file-info');
const fileName = document.getElementById('file-name');
const fileSize = document.getElementById('file-size');
// Ouvrir modals
importExcelBtn.addEventListener('click', () => {
excelImportModal.classList.remove('hidden');
});
addStudentBtn.addEventListener('click', () => {
addStudentModal.classList.remove('hidden');
});
// Fermer modals
closeImportModal.addEventListener('click', () => {
excelImportModal.classList.add('hidden');
});
closeAddModal.addEventListener('click', () => {
addStudentModal.classList.add('hidden');
});
cancelImportBtn.addEventListener('click', () => {
excelImportModal.classList.add('hidden');
});
cancelAddBtn.addEventListener('click', () => {
addStudentModal.classList.add('hidden');
});
// Gestion du drag and drop pour Excel
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
excelDropzone.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
excelDropzone.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
excelDropzone.addEventListener(eventName, unhighlight, false);
});
function highlight() {
excelDropzone.classList.add('active');
}
function unhighlight() {
excelDropzone.classList.remove('active');
}
excelDropzone.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles(files);
}
selectFileBtn.addEventListener('click', () => {
excelFileInput.click();
});
excelFileInput.addEventListener('change', function() {
handleFiles(this.files);
});
function handleFiles(files) {
if (files.length) {
const file = files[0];
displayFileInfo(file);
// Lire le fichier Excel
const reader = new FileReader();
reader.onload = function(e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, {type: 'array'});
// Afficher un aperçu des données (première feuille)
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet);
console.log('Données Excel:', jsonData);
// Ici vous pourriez afficher un aperçu des données dans le modal
};
reader.readAsArrayBuffer(file);
}
}
function displayFileInfo(file) {
fileName.textContent = file.name;
fileSize.textContent = `(${(file.size / (1024 * 1024)).toFixed(2)} MB)`;
fileInfo.classList.remove('hidden');
}
// Gestion du formulaire d'ajout d'étudiant
const studentForm = document.getElementById('student-form');
const uploadPhotoBtn = document.getElementById('upload-photo-btn');
const studentPhotoInput = document.getElementById('student-photo');
uploadPhotoBtn.addEventListener('click', () => {
studentPhotoInput.click();
});
studentPhotoInput.addEventListener('change', function() {
if (this.files && this.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
const preview = document.querySelector('.flex-shrink-0.h-16.w-16');
preview.innerHTML = ''; // Effacer l'icône
const img = document.createElement('img');
img.src = e.target.result;
img.className = 'h-16 w-16 rounded-full object-cover';
preview.appendChild(img);
};
reader.readAsDataURL(this.files[0]);
}
});
studentForm.addEventListener('submit', function(e) {
e.preventDefault();
// Ici vous enverriez les données au serveur
alert('Étudiant enregistré avec succès!');
addStudentModal.classList.add('hidden');
studentForm.reset();
// Réinitialiser la photo
const preview = document.querySelector('.flex-shrink-0.h-16.w-16');
preview.innerHTML = '<i class="fas fa-user text-gray-400 text-2xl"></i>';
});
// Confirmation d'importation Excel
const confirmImportBtn = document.getElementById('confirm-import-btn');
confirmImportBtn.addEventListener('click', function() {
// Ici vous enverriez le fichier Excel au serveur
alert('Importation des étudiants réussie!');
excelImportModal.classList.add('hidden');
fileInfo.classList.add('hidden');
excelFileInput.value = '';
});
</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=dibakidi/olivier" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>