Crée un site web de gestion de notes scolaires en HTML, CSS et JavaScript uniquement, avec localStorage comme base de données. Le site doit comporter trois pages : index.html, admin.html et result.html.
044eeb7 verified | <html lang="fr" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GradeGenius | Administration</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .subject-row:nth-child(even) { | |
| background-color: #f9fafb; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-primary-500 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="bg-secondary-500 p-2 rounded-lg"> | |
| <i data-feather="book-open" class="text-white"></i> | |
| </div> | |
| <span class="font-bold text-xl">Lycée Excellence</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="hover:text-secondary-300 transition">Accueil</a> | |
| <a href="admin.html" class="font-semibold hover:text-secondary-300 transition">Administration</a> | |
| </div> | |
| <button class="md:hidden" id="mobile-menu-button"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Admin Panel --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">Panneau d'administration</h1> | |
| <!-- Tabs --> | |
| <div class="flex border-b border-gray-200 mb-6"> | |
| <button class="tab-btn py-2 px-4 font-medium text-gray-600 hover:text-primary-500 border-b-2 border-transparent hover:border-primary-500 transition" data-tab="addStudent"> | |
| Ajouter un élève | |
| </button> | |
| <button class="tab-btn py-2 px-4 font-medium text-gray-600 hover:text-primary-500 border-b-2 border-transparent hover:border-primary-500 transition" data-tab="calculateGrades"> | |
| Calcul de moyenne | |
| </button> | |
| <button class="tab-btn py-2 px-4 font-medium text-gray-600 hover:text-primary-500 border-b-2 border-transparent hover:border-primary-500 transition" data-tab="examNotes"> | |
| Notes examen | |
| </button> | |
| </div> | |
| <!-- Add Student Tab --> | |
| <div id="addStudent" class="tab-content active"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Ajouter un nouvel élève</h2> | |
| <form id="studentForm" class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="studentId" class="block text-gray-700 text-sm font-bold mb-2">Matricule*</label> | |
| <input type="text" id="studentId" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div> | |
| <label for="class" class="block text-gray-700 text-sm font-bold mb-2">Classe*</label> | |
| <select id="class" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <option value="">Sélectionner une classe</option> | |
| <option value="3ème">3ème</option> | |
| <option value="TleA">Terminale A</option> | |
| <option value="TleD">Terminale D</option> | |
| <option value="TleC">Terminale C</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="lastName" class="block text-gray-700 text-sm font-bold mb-2">Nom*</label> | |
| <input type="text" id="lastName" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div> | |
| <label for="firstName" class="block text-gray-700 text-sm font-bold mb-2">Prénom*</label> | |
| <input type="text" id="firstName" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="birthDate" class="block text-gray-700 text-sm font-bold mb-2">Date de naissance*</label> | |
| <input type="date" id="birthDate" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button type="submit" class="bg-secondary-500 hover:bg-secondary-600 text-white font-bold py-2 px-6 rounded-md transition duration-300 flex items-center"> | |
| <i data-feather="save" class="mr-2"></i> Enregistrer | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Students List --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Liste des élèves</h2> | |
| <div class="mb-4"> | |
| <input type="text" id="searchStudent" placeholder="Rechercher un élève..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white"> | |
| <thead> | |
| <tr class="bg-gray-100 text-gray-700"> | |
| <th class="py-3 px-4 text-left">Matricule</th> | |
| <th class="py-3 px-4 text-left">Nom & Prénom</th> | |
| <th class="py-3 px-4 text-left">Classe</th> | |
| <th class="py-3 px-4 text-left">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="studentsTableBody"> | |
| <!-- Students will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calculate Grades Tab --> | |
| <div id="calculateGrades" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Calcul des moyennes</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div> | |
| <label for="termSelect" class="block text-gray-700 text-sm font-bold mb-2">Trimestre*</label> | |
| <select id="termSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <option value="1">1er Trimestre</option> | |
| <option value="2">2ème Trimestre</option> | |
| <option value="3">3ème Trimestre</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="classSelect" class="block text-gray-700 text-sm font-bold mb-2">Classe*</label> | |
| <select id="classSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <option value="">Toutes les classes</option> | |
| <option value="3ème">3ème</option> | |
| <option value="TleA">Terminale A</option> | |
| <option value="TleD">Terminale D</option> | |
| <option value="TleC">Terminale C</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button id="calculateBtn" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-6 rounded-md transition duration-300 w-full flex items-center justify-center"> | |
| <i data-feather="calculator" class="mr-2"></i> Calculer | |
| </button> | |
| </div> | |
| </div> | |
| <div id="gradesResults" class="hidden"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-3">Résultats</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white"> | |
| <thead> | |
| <tr class="bg-gray-100 text-gray-700"> | |
| <th class="py-3 px-4 text-left">Rang</th> | |
| <th class="py-3 px-4 text-left">Matricule</th> | |
| <th class="py-3 px-4 text-left">Élève</th> | |
| <th class="py-3 px-4 text-left">Classe</th> | |
| <th class="py-3 px-4 text-left">Moyenne</th> | |
| </tr> | |
| </thead> | |
| <tbody id="gradesTableBody"> | |
| <!-- Grades will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Exam Notes Tab --> | |
| <div id="examNotes" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Gestion des notes d'examen</h2> | |
| <div class="mb-6"> | |
| <label for="examClassSelect" class="block text-gray-700 text-sm font-bold mb-2">Classe*</label> | |
| <select id="examClassSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <option value="">Sélectionner une classe</option> | |
| <option value="3ème">3ème</option> | |
| <option value="TleA">Terminale A</option> | |
| <option value="TleD">Terminale D</option> | |
| <option value="TleC">Terminale C</option> | |
| </select> | |
| </div> | |
| <div id="examSubjectsContainer" class="hidden"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-3">Saisie des notes</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white"> | |
| <thead> | |
| <tr class="bg-gray-100 text-gray-700"> | |
| <th class="py-3 px-4 text-left">Matricule</th> | |
| <th class="py-3 px-4 text-left">Élève</th> | |
| <th id="subjectHeaders" class="py-3 px-4 text-left"> | |
| <!-- Subjects will be loaded here --> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody id="examStudentsTableBody"> | |
| <!-- Students will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="flex justify-end mt-4"> | |
| <button id="saveExamNotesBtn" class="bg-secondary-500 hover:bg-secondary-600 text-white font-bold py-2 px-6 rounded-md transition duration-300 flex items-center"> | |
| <i data-feather="save" class="mr-2"></i> Enregistrer les notes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Confirmation Modal --> | |
| <div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-lg p-6 max-w-md w-full"> | |
| <h3 class="text-xl | |
| </body> | |
| </html> |