|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Gestion Oraux STI2D</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> |
|
|
|
@keyframes slideIn { |
|
from { transform: translateX(100%); } |
|
to { transform: translateX(0); } |
|
} |
|
|
|
.notification { |
|
animation: slideIn 0.3s ease-out; |
|
} |
|
|
|
|
|
.timeline-step { |
|
position: relative; |
|
padding-left: 2.5rem; |
|
} |
|
|
|
.timeline-step:before { |
|
content: ''; |
|
position: absolute; |
|
left: 0.75rem; |
|
top: 0; |
|
height: 100%; |
|
width: 2px; |
|
background: #e5e7eb; |
|
} |
|
|
|
.timeline-step:last-child:before { |
|
height: 50%; |
|
} |
|
|
|
.timeline-dot { |
|
position: absolute; |
|
left: 0.5rem; |
|
top: 0.25rem; |
|
width: 1rem; |
|
height: 1rem; |
|
border-radius: 50%; |
|
background: #3b82f6; |
|
z-index: 10; |
|
} |
|
|
|
|
|
.card-hover { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.card-hover:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
} |
|
|
|
|
|
.rating-star { |
|
cursor: pointer; |
|
transition: all 0.2s; |
|
} |
|
|
|
.rating-star:hover { |
|
transform: scale(1.2); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 font-sans"> |
|
|
|
<nav class="bg-blue-600 text-white shadow-lg"> |
|
<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 flex items-center"> |
|
<i class="fas fa-microphone-alt text-2xl mr-2"></i> |
|
<span class="text-xl font-bold">OralsTracker</span> |
|
</div> |
|
<div class="hidden md:ml-10 md:flex md:space-x-8"> |
|
<a href="#" class="border-blue-500 text-white px-3 py-2 rounded-md text-sm font-medium border-b-2">Tableau de bord</a> |
|
<a href="#" class="border-transparent text-blue-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Élèves</a> |
|
<a href="#" class="border-transparent text-blue-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Jurys</a> |
|
<a href="#" class="border-transparent text-blue-200 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Planning</a> |
|
</div> |
|
</div> |
|
<div class="hidden md:flex items-center"> |
|
<div class="ml-4 flex items-center md:ml-6"> |
|
<button class="bg-blue-700 p-1 rounded-full text-blue-200 hover:text-white focus:outline-none"> |
|
<i class="fas fa-bell h-6 w-6"></i> |
|
</button> |
|
<div class="ml-3 relative"> |
|
<div class="flex items-center"> |
|
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
<span class="ml-2 text-sm font-medium">Prof. Dupont</span> |
|
<i class="fas fa-chevron-down ml-1 text-xs"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="-mr-2 flex items-center md:hidden"> |
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-200 hover:text-white hover:bg-blue-700 focus:outline-none"> |
|
<i class="fas fa-bars h-6 w-6"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> |
|
<div> |
|
<h1 class="text-3xl font-bold text-gray-900">Gestion des oraux STI2D</h1> |
|
<p class="mt-2 text-sm text-gray-600">Suivi des épreuves orales pour les élèves de première</p> |
|
</div> |
|
<div class="mt-4 md:mt-0 flex space-x-3"> |
|
<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"> |
|
<i class="fas fa-plus mr-2"></i> Nouvel oral |
|
</button> |
|
<button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"> |
|
<i class="fas fa-download mr-2"></i> Exporter |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
|
<div class="bg-white overflow-hidden shadow rounded-lg card-hover"> |
|
<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-users text-white"></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">24</div> |
|
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> |
|
<i class="fas fa-arrow-up mr-1 text-xs"></i> 12% |
|
</div> |
|
</dd> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg card-hover"> |
|
<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-check-circle text-white"></i> |
|
</div> |
|
<div class="ml-5 w-0 flex-1"> |
|
<dt class="text-sm font-medium text-gray-500 truncate">Oraux terminés</dt> |
|
<dd class="flex items-baseline"> |
|
<div class="text-2xl font-semibold text-gray-900">8</div> |
|
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> |
|
<i class="fas fa-arrow-up mr-1 text-xs"></i> 33% |
|
</div> |
|
</dd> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg card-hover"> |
|
<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-clock text-white"></i> |
|
</div> |
|
<div class="ml-5 w-0 flex-1"> |
|
<dt class="text-sm font-medium text-gray-500 truncate">En attente</dt> |
|
<dd class="flex items-baseline"> |
|
<div class="text-2xl font-semibold text-gray-900">12</div> |
|
<div class="ml-2 flex items-baseline text-sm font-semibold text-red-600"> |
|
<i class="fas fa-arrow-down mr-1 text-xs"></i> 8% |
|
</div> |
|
</dd> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg card-hover"> |
|
<div class="px-4 py-5 sm:p-6"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> |
|
<i class="fas fa-chart-line text-white"></i> |
|
</div> |
|
<div class="ml-5 w-0 flex-1"> |
|
<dt class="text-sm font-medium text-gray-500 truncate">Moyenne générale</dt> |
|
<dd class="flex items-baseline"> |
|
<div class="text-2xl font-semibold text-gray-900">13.2</div> |
|
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600"> |
|
<i class="fas fa-arrow-up mr-1 text-xs"></i> 2.5% |
|
</div> |
|
</dd> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
<div class="lg:col-span-2"> |
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg"> |
|
<div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Liste des élèves</h3> |
|
<p class="mt-1 text-sm text-gray-500">Cliquez sur un élève pour voir les détails et évaluer</p> |
|
</div> |
|
<div class="bg-white overflow-y-auto" style="max-height: 500px;"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50 sticky top-0"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spécialité</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Note</th> |
|
<th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
|
<tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(1)"> |
|
<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/1.jpg" alt=""> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Martin Dubois</div> |
|
<div class="text-sm text-gray-500">1ère STI2D</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">ITEC</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Terminé</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<span class="font-bold text-gray-900">15</span>/20 |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button> |
|
</td> |
|
</tr> |
|
|
|
|
|
<tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(2)"> |
|
<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/2.jpg" alt=""> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Sophie Lambert</div> |
|
<div class="text-sm text-gray-500">1ère STI2D</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">SIN</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En cours</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<span class="font-bold text-gray-900">-</span>/20 |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button> |
|
</td> |
|
</tr> |
|
|
|
|
|
<tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(3)"> |
|
<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/3.jpg" alt=""> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Thomas Moreau</div> |
|
<div class="text-sm text-gray-500">1ère STI2D</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">EE</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">À programmer</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<span class="font-bold text-gray-900">-</span>/20 |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button> |
|
</td> |
|
</tr> |
|
|
|
|
|
<tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(4)"> |
|
<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/4.jpg" alt=""> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Emma Rousseau</div> |
|
<div class="text-sm text-gray-500">1ère STI2D</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">AC</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Terminé</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<span class="font-bold text-gray-900">12</span>/20 |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button> |
|
</td> |
|
</tr> |
|
|
|
|
|
<tr class="hover:bg-gray-50 cursor-pointer" onclick="showStudentDetails(5)"> |
|
<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/5.jpg" alt=""> |
|
</div> |
|
<div class="ml-4"> |
|
<div class="text-sm font-medium text-gray-900">Lucas Bernard</div> |
|
<div class="text-sm text-gray-500">1ère STI2D</div> |
|
</div> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="text-sm text-gray-900">ITEC</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Programmé</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
<span class="font-bold text-gray-900">-</span>/20 |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
<button class="text-yellow-600 hover:text-yellow-900"><i class="fas fa-edit"></i></button> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> |
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Précédent</a> |
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Suivant</a> |
|
</div> |
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
<div> |
|
<p class="text-sm text-gray-700"> |
|
Affichage de |
|
<span class="font-medium">1</span> |
|
à |
|
<span class="font-medium">5</span> |
|
sur |
|
<span class="font-medium">24</span> |
|
élèves |
|
</p> |
|
</div> |
|
<div> |
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
<span class="sr-only">Précédent</span> |
|
<i class="fas fa-chevron-left"></i> |
|
</a> |
|
<a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a> |
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a> |
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a> |
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
<span class="sr-only">Suivant</span> |
|
<i class="fas fa-chevron-right"></i> |
|
</a> |
|
</nav> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="studentDetails" class="hidden lg:block"> |
|
<div class="bg-white shadow rounded-lg sticky top-4"> |
|
<div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Détails de l'élève</h3> |
|
<p class="mt-1 text-sm text-gray-500">Sélectionnez un élève pour voir ses informations</p> |
|
</div> |
|
<div class="px-4 py-5 sm:p-6"> |
|
<div class="text-center"> |
|
<img class="mx-auto h-24 w-24 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""> |
|
<h3 class="mt-4 text-lg font-medium text-gray-900">Martin Dubois</h3> |
|
<p class="text-sm text-gray-500">1ère STI2D - Spécialité ITEC</p> |
|
</div> |
|
|
|
<div class="mt-6"> |
|
<h4 class="text-sm font-medium text-gray-500 mb-2">Informations</h4> |
|
<ul class="space-y-2"> |
|
<li class="flex items-center"> |
|
<i class="fas fa-envelope text-gray-400 mr-2"></i> |
|
<span class="text-sm text-gray-600">martin.dubois@lycee.fr</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-phone text-gray-400 mr-2"></i> |
|
<span class="text-sm text-gray-600">06 12 34 56 78</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-calendar-alt text-gray-400 mr-2"></i> |
|
<span class="text-sm text-gray-600">Né le 15/03/2006</span> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="mt-6"> |
|
<h4 class="text-sm font-medium text-gray-500 mb-2">Détails de l'oral</h4> |
|
<div class="space-y-4"> |
|
<div> |
|
<p class="text-xs text-gray-500">Date</p> |
|
<p class="text-sm font-medium">12/05/2023 - 14h30</p> |
|
</div> |
|
<div> |
|
<p class="text-xs text-gray-500">Salle</p> |
|
<p class="text-sm font-medium">Bâtiment B - Salle 203</p> |
|
</div> |
|
<div> |
|
<p class="text-xs text-gray-500">Jury</p> |
|
<p class="text-sm font-medium">M. Durand, Mme. Leroy</p> |
|
</div> |
|
<div> |
|
<p class="text-xs text-gray-500">Thème</p> |
|
<p class="text-sm font-medium">Projet robotique autonome</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6"> |
|
<h4 class="text-sm font-medium text-gray-500 mb-2">Évaluation</h4> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-xs text-gray-500">Note finale</p> |
|
<p class="text-2xl font-bold text-blue-600">15/20</p> |
|
</div> |
|
<div class="w-24 h-24"> |
|
<canvas id="noteChart"></canvas> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg"> |
|
<div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Grille d'évaluation</h3> |
|
<p class="mt-1 text-sm text-gray-500">Évaluez les compétences de l'élève selon les critères suivants</p> |
|
</div> |
|
<div class="px-4 py-5 sm:p-6"> |
|
<div class="overflow-x-auto"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Critères</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pondération</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Évaluation</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Note</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">Expression orale</td> |
|
<td class="px-6 py-4 text-sm text-gray-500">Clarté, fluidité, vocabulaire technique</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20%</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex rating-stars" data-criteria="expression"> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="1"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="2"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="3"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="4"></i> |
|
<i class="fas fa-star rating-star text-gray-300" data-value="5"></i> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4/5</td> |
|
</tr> |
|
|
|
|
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Maîtrise technique</td> |
|
<td class="px-6 py-4 text-sm text-gray-500">Connaissances, précision des explications</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30%</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex rating-stars" data-criteria="technique"> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="1"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="2"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="3"></i> |
|
<i class="fas fa-star rating-star text-gray-300" data-value="4"></i> |
|
<i class="fas fa-star rating-star text-gray-300" data-value="5"></i> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3/5</td> |
|
</tr> |
|
|
|
|
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Réponses aux questions</td> |
|
<td class="px-6 py-4 text-sm text-gray-500">Pertinence, rapidité, argumentation</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25%</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex rating-stars" data-criteria="reponses"> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="1"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="2"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="3"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="4"></i> |
|
<i class="fas fa-star rating-star text-gray-300" data-value="5"></i> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4/5</td> |
|
</tr> |
|
|
|
|
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Structure de la présentation</td> |
|
<td class="px-6 py-4 text-sm text-gray-500">Organisation, progression logique</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15%</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex rating-stars" data-criteria="structure"> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="1"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="2"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="3"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="4"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="5"></i> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">5/5</td> |
|
</tr> |
|
|
|
|
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Support visuel</td> |
|
<td class="px-6 py-4 text-sm text-gray-500">Qualité, pertinence, originalité</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10%</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="flex rating-stars" data-criteria="support"> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="1"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="2"></i> |
|
<i class="fas fa-star rating-star text-yellow-400" data-value="3"></i> |
|
<i class="fas fa-star rating-star text-gray-300" data-value="4"></i> |
|
<i class="fas fa-star rating-star text-gray-300" data-value="5"></i> |
|
</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3/5</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
|
|
<div class="mt-6"> |
|
<label for="commentaires" class="block text-sm font-medium text-gray-700">Commentaires généraux</label> |
|
<div class="mt-1"> |
|
<textarea id="commentaires" name="commentaires" rows="3" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="Ajoutez vos commentaires sur la prestation..."></textarea> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 flex justify-between items-center"> |
|
<div> |
|
<p class="text-sm text-gray-500">Note finale calculée</p> |
|
<p class="text-2xl font-bold text-blue-600">16.5/20</p> |
|
</div> |
|
<div class="flex space-x-3"> |
|
<button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"> |
|
<i class="fas fa-save mr-2"></i> Enregistrer le brouillon |
|
</button> |
|
<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"> |
|
<i class="fas fa-check mr-2"></i> Valider l'évaluation |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
|
|
|
|
<footer class="bg-white mt-12 border-t border-gray-200"> |
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> |
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-microphone-alt text-blue-600 text-xl mr-2"></i> |
|
<span class="text-lg font-bold text-gray-900">OralsTracker</span> |
|
</div> |
|
<div class="mt-4 md:mt-0"> |
|
<p class="text-center text-sm text-gray-500"> |
|
© 2023 Lycée STI2D - Tous droits réservés. |
|
</p> |
|
</div> |
|
<div class="mt-4 md:mt-0 flex space-x-6"> |
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
<i class="fab fa-twitter"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
<i class="fab fa-facebook"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
<i class="fab fa-instagram"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
<i class="fab fa-github"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<script> |
|
|
|
function showStudentDetails(studentId) { |
|
document.getElementById('studentDetails').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
|
|
|
updateNoteChart(); |
|
|
|
|
|
showNotification('Détails de l\'élève chargés avec succès', 'success'); |
|
} |
|
|
|
|
|
function updateNoteChart() { |
|
const ctx = document.getElementById('noteChart').getContext('2d'); |
|
|
|
if (window.noteChart) { |
|
window.noteChart.destroy(); |
|
} |
|
|
|
window.noteChart = new Chart(ctx, { |
|
type: 'doughnut', |
|
data: { |
|
labels: ['Expression', 'Technique', 'Réponses', 'Structure', 'Support'], |
|
datasets: [{ |
|
data: [4, 3, 4, 5, 3], |
|
backgroundColor: [ |
|
'#10B981', |
|
'#3B82F6', |
|
'#F59E0B', |
|
'#8B5CF6', |
|
'#EC4899' |
|
], |
|
borderWidth: 0 |
|
}] |
|
}, |
|
options: { |
|
cutout: '70%', |
|
plugins: { |
|
legend: { |
|
display: false |
|
} |
|
} |
|
} |
|
}); |
|
} |
|
|
|
|
|
function showNotification(message, type) { |
|
const types = { |
|
'success': 'bg-green-100 border-green-500 text-green-700', |
|
'error': 'bg-red-100 border-red-500 text-red-700', |
|
'warning': 'bg-yellow-100 border-yellow-500 text-yellow-700', |
|
'info': 'bg-blue-100 border-blue-500 text-blue-700' |
|
}; |
|
|
|
const notification = document.createElement('div'); |
|
notification.className = `notification fixed bottom-4 right-4 border-l-4 p-4 max-w-sm rounded-md shadow-md ${types[type]}`; |
|
notification.innerHTML = ` |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0"> |
|
${type === 'success' ? '<i class="fas fa-check-circle text-green-500"></i>' : ''} |
|
${type === 'error' ? '<i class="fas fa-exclamation-circle text-red-500"></i>' : ''} |
|
${type === 'warning' ? '<i class="fas fa-exclamation-triangle text-yellow-500"></i>' : ''} |
|
${type === 'info' ? '<i class="fas fa-info-circle text-blue-500"></i>' : ''} |
|
</div> |
|
<div class="ml-3"> |
|
<p class="text-sm font-medium">${message}</p> |
|
</div> |
|
<div class="ml-auto pl-3"> |
|
<button onclick="this.parentElement.parentElement.parentElement.remove()" class="focus:outline-none"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
</div> |
|
`; |
|
|
|
document.body.appendChild(notification); |
|
|
|
setTimeout(() => { |
|
notification.remove(); |
|
}, 5000); |
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
updateNoteChart(); |
|
|
|
|
|
setTimeout(() => { |
|
showStudentDetails(1); |
|
}, 500); |
|
|
|
|
|
document.querySelectorAll('.rating-star').forEach(star => { |
|
star.addEventListener('click', function() { |
|
const value = parseInt(this.getAttribute('data-value')); |
|
const container = this.closest('.rating-stars'); |
|
const criteria = container.getAttribute('data-criteria'); |
|
|
|
|
|
const stars = container.querySelectorAll('.rating-star'); |
|
stars.forEach((s, index) => { |
|
if (index < value) { |
|
s.classList.remove('text-gray-300'); |
|
s.classList.add('text-yellow-400'); |
|
} else { |
|
s.classList.remove('text-yellow-400'); |
|
s.classList.add('text-gray-300'); |
|
} |
|
}); |
|
|
|
|
|
const noteCell = this.closest('tr').querySelector('td:last-child'); |
|
noteCell.textContent = `${value}/5`; |
|
|
|
|
|
const notes = Array.from(document.querySelectorAll('tbody tr td:last-child')).map(td => { |
|
return parseInt(td.textContent); |
|
}); |
|
const moyenne = (notes.reduce((a, b) => a + b, 0) / notes.length) * 4; |
|
document.querySelector('div.justify-between p.text-2xl').textContent = `${moyenne.toFixed(1)}/20`; |
|
|
|
|
|
updateNoteChart(); |
|
|
|
showNotification('Évaluation mise à jour', 'success'); |
|
}); |
|
}); |
|
}); |
|
</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=Cremet/appli-oro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
