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.

1. Navigation commune

Une barre de navigation en haut.

À gauche : un logo + le nom de l’école (dans la barre, pas d’autres liens).

Pas de footer.

2. index.html (consultation des résultats)

Une photo de l’école en haut de la page.

Un champ texte pour entrer un matricule + un bouton Vérifier.

Lorsqu’un élève saisit son matricule :

Si le matricule n’existe pas dans localStorage → afficher un message rouge centré :
Matricule incorrect — veuillez entrer le bon matricule, s'il vous plaît.

Si le matricule existe → rediriger vers result.html pour afficher ses résultats (moyenne ou examen).

3. admin.html (panneau d’administration)

Sur cette page, il y a plusieurs boutons d’action :

Ajouter un élève

Formulaire : Nom, Prénom, Classe, Matricule (unique), Date de naissance.

Enregistrer l’élève dans localStorage. Vérifier que le matricule est unique.

Calcul de moyenne

L’admin saisit un matricule.

Si trouvé → afficher Nom, Prénom, Classe.

L’admin choisit le trimestre (1, 2 ou 3).

Afficher toutes les matières correspondant à la classe de l’élève, avec leurs coefficients.

L’admin entre les notes → bouton Mettre en ligne.

Calcul : moyenne = (somme des notes × coefficients) ÷ somme des coefficients.

La moyenne est enregistrée et l’élève peut la consulter dans result.html.

Note examen

Même procédure que Calcul de moyenne.

Concerne seulement les classes TleA, TleD, TleC et 3ème.

Résultat = total des points.

Conditions d’admission :

Élève de Terminale : admis si total ≥ 200 points.

Élève de 3ème : admis si total ≥ 180 points.

Résultat mis en ligne pour consultation.

Voir la liste des élèves

Liste affichée par classe, triée par ordre alphabétique.

Possibilité de modifier ou supprimer un élève.

Voir toutes les moyennes

Liste par classe et par ordre alphabétique.

Affiche pour chaque élève : Nom, Prénom, Classe, Trimestre, Notes par matière (verticalement), Total, Moyenne, Rang.

Possibilité de modifier ou supprimer.

Voir toutes les notes d’examen

Liste par classe et par ordre alphabétique.

Affiche pour chaque élève : Nom, Prénom, Classe, Matières (vertical), Notes, Total des points, Statut (Admis/Refusé).

Possibilité de modifier ou supprimer.

Réinitialiser les élèves

Option de supprimer uniquement une classe ou tout le localStorage.

4. result.html (affichage des résultats)

Affiche les résultats d’un élève à partir de son matricule :

Si c’est une moyenne (trimestre) :

Message en haut : Félicitations !

Détails : Nom, Prénom, Classe, Trimestre, Moyenne /20, Rang.

Appréciation selon la moyenne :

< 10 : Tu dois te mettre au travail

10–11.9 : Passable

12–13.9 : Bien

14–15.9 : Très bien

≥16 : Excellent

Si c’est un examen :

Message principal : Admis ou Refusé.

Détails : Nom, Prénom, Classe, Total des points.

Règles :

Terminale → Admis si ≥200 pts.

3ème → Admis si ≥180 pts.

5. Matières par niveau scolaire

6ème & 5ème : Maths, Français, EPS, Physique-Chimie.

4ème & 3ème : Maths, Français, Physique-Chimie, Histoire-Géographie, Anglais, EPS.

2ndeA, 1èreA, TleA : Français, Anglais, Espagnol/Allemand (choix à faire), Maths, Physique.

TleD & TleC : Maths, Français, Physique, Philosophie.

⚠️ Les matières doivent s’afficher automatiquement selon la classe choisie.
⚠️ Pour Espagnol/Allemand, l’admin doit choisir une seule langue.

6. Coefficients

Chaque matière a un coefficient par défaut (exemple : Maths 4, Français 3, Physique 3, Langues 2, EPS 1).

L’admin doit pouvoir modifier les coefficients avant d’enregistrer les notes.

7. Rangs et affichage

Le rang est calculé automatiquement par classe et par trimestre, selon la moyenne.

Lors de l’affichage des notes (moyenne ou examen), les matières apparaissent verticalement, suivies du Total et de la Moyenne/Points.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Gradegenius School Notes Wizard
-emoji: 🐢
-colorFrom: gray
-colorTo: purple
+title: GradeGenius - School Notes Wizard ‍♂️
+colorFrom: blue
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

admin.html

@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<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>

index.html

@@ -1,19 +1,114 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="fr" class="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GradeGenius | Accueil</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#10b981'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .school-photo {
+            transition: all 0.3s ease;
+        }
+        .school-photo:hover {
+            transform: scale(1.02);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .input-field:focus {
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+        }
+    </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="hover:text-secondary-300 transition">Administration</a>
+            </div>
+            <button class="md:hidden" id="mobile-menu-button">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- School Photo -->
+        <div class="max-w-4xl mx-auto mb-12 overflow-hidden rounded-lg border-4 border-secondary-500 school-photo">
+            <img src="http://static.photos/education/1200x630/42" alt="Lycée Excellence" class="w-full h-auto">
+        </div>
+
+        <!-- Student ID Check -->
+        <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Consulter vos résultats</h2>
+            
+            <div class="mb-4">
+                <label for="studentId" class="block text-gray-700 text-sm font-bold mb-2">Numéro de matricule</label>
+                <input type="text" id="studentId" class="input-field w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
+            </div>
+            
+            <button id="checkBtn" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-md transition duration-300 flex items-center justify-center">
+                <i data-feather="search" class="mr-2"></i> Vérifier
+            </button>
+            
+            <div id="errorMsg" class="mt-4 text-center text-red-500 hidden">
+                <i data-feather="alert-circle" class="inline mr-2"></i>
+                <span>Matricule non trouvé. Veuillez réessayer.</span>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Initialize localStorage if empty
+        if (!localStorage.getItem('students')) {
+            localStorage.setItem('students', JSON.stringify([]));
+        }
+
+        document.getElementById('checkBtn').addEventListener('click', function() {
+            const studentId = document.getElementById('studentId').value.trim();
+            const students = JSON.parse(localStorage.getItem('students'));
+            const foundStudent = students.find(student => student.id === studentId);
+            
+            if (foundStudent) {
+                localStorage.setItem('currentStudent', JSON.stringify(foundStudent));
+                window.location.href = 'result.html';
+            } else {
+                document.getElementById('errorMsg').classList.remove('hidden');
+                setTimeout(() => {
+                    document.getElementById('errorMsg').classList.add('hidden');
+                }, 3000);
+            }
+        });
+
+        // Mobile menu toggle
+        document.getElementById('mobile-menu-button').addEventListener('click', function() {
+            // Implement mobile menu toggle functionality
+            alert("Menu mobile à implémenter");
+        });
+
+        // Feather icons
+        feather.replace();
+    </script>
+</body>
 </html>