diff --git a/frontend/admin.html b/frontend/admin.html
index 99e387f83..227822796 100644
--- a/frontend/admin.html
+++ b/frontend/admin.html
@@ -3,433 +3,159 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>Tableau de bord - Détection Diabète</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin - Gestion Utilisateurs</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
 
-    <body>
-        <header>
-            <h1>Mon Tableau de Bord</h1>
-            <nav style="display:flex; gap:10px; flex-wrap:wrap;">
-                <button id="btnShowStats" class="btn btn-secondary">📊 Statistiques</button>
-                <button id="darkModeToggle" class="btn btn-dark">🌙 Mode sombre</button>
-                <button onclick="location.href='index.html'" class="btn btn-danger">🚪 Déconnexion</button>
-            </nav>
-        </header>
-
-        <main>
-            <h2>Historique de mes prédictions</h2>
-            <button onclick="location.href='add_patient.html'" class="btn btn-primary">➕ Nouvelle Prédiction</button>
-            <button onclick="exportCSV()" class="btn btn-secondary">📥 Exporter CSV</button>
-            <div style="margin: 15px 0; display: flex; gap: 15px; align-items: center; flex-wrap: wrap;">
-                <!-- Recherche globale -->
-                <input type="text" id="search-input" placeholder="🔍 Rechercher (nom, âge, résultat)...">
-
-                <!-- Filtre par intervalle de date -->
-                <label for="date-min">Du :</label>
-                <input type="date" id="date-min">
-                <label for="date-max">Au :</label>
-                <input type="date" id="date-max">
-
-                <button onclick="applyFilters()">Filtrer</button>
-                <button onclick="resetFilters()">Réinitialiser</button>
-            </div>
-            <table id="history-table">
-                <thead>
-                    <tr>
-                        <th onclick="sortTable('date')">Date ⬍</th>
-                        <th onclick="sortTable('age')">Âge ⬍</th>
-                        <th>FCVC</th>
-                        <th>Résultat</th>
-                        <th>Probabilité</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- rempli par app.js -->
-                </tbody>
-            </table>
-
-            <!-- Section Graphiques -->
-            <section id="charts" class="charts-section" style="display:none; margin-top:20px;">
-                <h2>📊 Statistiques</h2>
-                <canvas id="chartResults" width="400" height="200"></canvas>
-                <canvas id="chartProbabilities" width="400" height="200" style="margin-top:30px;"></canvas>
-            </section>
-        </main>
-        <!-- Styles -->
-        <style>
-            body {
-                font-family: Arial, sans-serif;
-                background: #fafafa;
-                color: #333;
-                transition: background 0.3s, color 0.3s;
-            }
-
-            header {
-                background: #2196F3;
-                color: white;
-                padding: 15px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            }
-
-            header nav a {
-                margin-left: 15px;
-                color: white;
-                text-decoration: none;
-                font-weight: bold;
-            }
-
-            header nav button {
-                padding: 5px 10px;
-                border: none;
-                cursor: pointer;
-                border-radius: 5px;
-            }
-
-            .dashboard {
-                display: flex;
-                gap: 5%;
-                margin-top: 20px;
-                padding: 0 15px;
-            }
-
-            .table-section {
-                flex-basis: 60%;
-            }
-
-            .charts-section {
-                flex-basis: 35%;
-            }
-
-
-            table td,
-            table th {
-                text-align: center;
-            }
-
-            /* Mode sombre */
-            body.dark {
-                background: #121212;
-                color: #201f1f;
-            }
-
-            body.dark header {
-                background: #333;
-            }
-
-            body.dark header nav a {
-                color: #f6f0f0;
-            }
-
-            body.dark table thead {
-                background: #333;
-                color: hsl(0, 0%, 88%);
-            }
-
-            body.dark table,
-            body.dark th,
-            body.dark td {
-                border: 1px solid #444;
-            }
-
-            body.dark .charts-section h2,
-            body.dark .table-section h2 {
-                color: #201f1f;
-            }
-
-            /* Responsive */
-            @media (max-width: 768px) {
-                .dashboard {
-                    flex-direction: column;
-                }
-
-                .table-section,
-                .charts-section {
-                    flex-basis: 100%;
-                }
-            }
-        </style>
-        <style>
-            .btn {
-                padding: 8px 15px;
-                border: none;
-                border-radius: 6px;
-                cursor: pointer;
-                font-weight: bold;
-                transition: 0.3s;
-            }
-
-            .btn-primary {
-                background: #007bff;
-                color: white;
-            }
-
-            .btn-secondary {
-                background: #6c757d;
-                color: white;
-            }
-
-            .btn-dark {
-                background: #343a40;
-                color: white;
-            }
-
-            .btn-danger {
-                background: #dc3545;
-                color: white;
-            }
-
-            .btn:hover {
-                opacity: 0.85;
-            }
-        </style>
-
-        <!-- Chart.js -->
-        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-        <script>
-            // ============================
-            // 1️⃣ Données de prédictions
-            // ============================
-            const predictions = [
-                { date: "2025-01-12", age: 25, fcvc: 2, result: "Sain", probability: 0.85 },
-                { date: "2025-02-18", age: 40, fcvc: 1, result: "Surpoids", probability: 0.67 },
-                { date: "2025-03-03", age: 32, fcvc: 3, result: "Obèse", probability: 0.92 },
-                { date: "2025-03-22", age: 28, fcvc: 2, result: "Sain", probability: 0.78 },
-                { date: "2025-04-10", age: 35, fcvc: 1, result: "Surpoids", probability: 0.59 },
-                { date: "2025-04-25", age: 45, fcvc: 3, result: "Obèse", probability: 0.95 },
-                { date: "2025-05-15", age: 30, fcvc: 2, result: "Sain", probability: 0.88 },
-                { date: "2025-05-30", age: 50, fcvc: 1, result: "Surpoids", probability: 0.70 },
-                { date: "2025-06-05", age: 38, fcvc: 3, result: "Obèse", probability: 0.91 },
-                { date: "2025-06-20", age: 27, fcvc: 2, result: "Sain", probability: 0.82 }
-            ];
-
-            // ============================
-            // 2️⃣ Génération du tableau
-            // ============================
-            const tableBody = document.querySelector("#history-table tbody");
-
-            function renderHistory(data = predictions) {
-                tableBody.innerHTML = "";
-                data.forEach(pred => {
-                    const tr = document.createElement("tr");
-                    tr.innerHTML = `
-            <td>${pred.date}</td>
-            <td>${pred.age}</td>
-            <td>${pred.fcvc}</td>
-            <td class="${pred.result === 'Obèse' ? 'result-1' : 'result-0'}">${pred.result}</td>
-            <td>${(pred.probability * 100).toFixed(1)}%</td>
-        `;
-                    tableBody.appendChild(tr);
-                });
-            }
-
-            // Initialisation du tableau
-            renderHistory();
-
-            // ============================
-            // 3️⃣ Graphiques
-            // ============================
-
-            // 3.1 Répartition des résultats
-            function renderResultsChart() {
-                const counts = predictions.reduce((acc, p) => {
-                    acc[p.result] = (acc[p.result] || 0) + 1;
-                    return acc;
-                }, {});
-
-                new Chart(document.getElementById("chartResults"), {
-                    type: "pie",
-                    data: {
-                        labels: Object.keys(counts),
-                        datasets: [{
-                            data: Object.values(counts),
-                            backgroundColor: ["#4CAF50", "#FF9800", "#F44336"]
-                        }]
-                    },
-                    options: {
-                        plugins: {
-                            title: { display: true, text: "Répartition des Résultats" }
-                        }
-                    }
-                });
-            }
-
-            // 3.2 Probabilités dans le temps
-            function renderProbabilitiesChart() {
-                new Chart(document.getElementById("chartProbabilities"), {
-                    type: "line",
-                    data: {
-                        labels: predictions.map(p => p.date),
-                        datasets: [{
-                            label: "Probabilité prédite",
-                            data: predictions.map(p => (p.probability * 100).toFixed(1)),
-                            borderColor: "#2196F3",
-                            fill: false,
-                            tension: 0.2
-                        }]
-                    },
-                    options: {
-                        plugins: {
-                            title: { display: true, text: "Évolution des Probabilités (%)" }
-                        },
-                        scales: { y: { min: 0, max: 100 } }
-                    }
-                });
-            }
-
-            // Rendu initial des graphiques
-            renderResultsChart();
-            renderProbabilitiesChart();
-
-            // ============================
-            // 4️⃣ Bouton statistiques
-            // ============================
-            const btnShowStats = document.getElementById("btnShowStats");
-            const chartsSection = document.getElementById("charts");
-            const tableSection = document.getElementById("tableSection");
-
-            btnShowStats.addEventListener("click", () => {
-                // Vérifie si les statistiques sont cachées
-                const isChartsHidden = chartsSection.style.display === "none" || chartsSection.style.display === "";
-
-                // Toggle affichage
-                chartsSection.style.display = isChartsHidden ? "block" : "none";
-                tableSection.style.display = isChartsHidden ? "none" : "block";
-
-                // Changer le texte du bouton
-                btnShowStats.textContent = isChartsHidden ? "⬅ Retour au tableau" : "📊 Statistiques";
-
-                // Scroll vers la section visible
-                const targetSection = isChartsHidden ? chartsSection : tableSection;
-                targetSection.scrollIntoView({ behavior: "smooth" });
-            });
-
-
-            // ============================
-            // 5️⃣ Mode sombre
-            // ============================
-            const toggleBtn = document.getElementById("darkModeToggle");
-            toggleBtn.addEventListener("click", () => {
-                document.body.classList.toggle("dark");
-                toggleBtn.textContent = document.body.classList.contains("dark") ? "☀️ Mode clair" : "🌙 Mode sombre";
-            });
-
-        </script>
-        <script>
-            function exportCSV() {
-                let rows = [["Date", "Âge", "FCVC", "Résultat", "Probabilité"]];
-                predictions.forEach(p => {
-                    rows.push([p.date, p.age, p.fcvc, p.result, (p.probability * 100).toFixed(1) + "%"]);
-                });
-                let csvContent = "data:text/csv;charset=utf-8,"
-                    + rows.map(e => e.join(",")).join("\n");
-                const link = document.createElement("a");
-                link.setAttribute("href", csvContent);
-                link.setAttribute("download", "historique_predictions.csv");
-                document.body.appendChild(link);
-                link.click();
-            }
-        </script>
-        <script>
-            // const tableBody = document.querySelector("#history-table tbody"); // Already declared above
-            const searchInput = document.getElementById("search-input");
-            const dateMin = document.getElementById("date-min");
-            const dateMax = document.getElementById("date-max");
-
-            function renderHistory(filteredData = predictions) {
-                tableBody.innerHTML = "";
-                for (const pred of filteredData) {
-                    const tr = document.createElement("tr");
-                    tr.innerHTML = `
-        <td>${pred.date}</td>
-        <td>${pred.age}</td>
-        <td>${pred.fcvc}</td>
-        <td class="${pred.result === 'Obèse' ? 'result-1' : 'result-0'}">${pred.result}</td>
-        <td>${(pred.probability * 100).toFixed(1)}%</td>
+    <header>
+        <h1>Prédiction de l’Obésité - Espace Administrateur</h1>
+        <nav>
+            <a href="dashboard.html">Tableau de bord</a>
+            <a href="index.html" onclick="logout()">Déconnexion</a>
+        </nav>
+    </header>
+
+    <main>
+        <h2>Liste des utilisateurs</h2>
+
+        <!-- Filtre par date -->
+        <label for="filter-date">Filtrer par date de création :</label>
+        <input type="date" id="filter-date">
+
+        <!-- Tableau des utilisateurs -->
+        <table id="users-table">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Nom</th>
+                    <th>Email</th>
+                    <th>Rôle</th>
+                    <th>Date création</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- rempli dynamiquement via app.js -->
+            </tbody>
+        </table>
+
+        <!-- Pagination -->
+        <div style="margin-top: 15px; display: flex; justify-content: space-between; align-items: center;">
+            <button id="prev-page">Précédent</button>
+            <span id="page-info"></span>
+            <button id="next-page">Suivant</button>
+        </div>
+
+    </main>
+    <script>
+        // Exemple de données utilisateurs
+        const users = [
+            { id: 1, name: "Alice", email: "alice@example.com", role: "admin", created_at: "2025-01-12" },
+            { id: 2, name: "Bob", email: "bob@example.com", role: "user", created_at: "2025-03-05" },
+            { id: 3, name: "Charlie", email: "charlie@example.com", role: "user", created_at: "2025-04-18" },
+            { id: 4, name: "David", email: "david@example.com", role: "user", created_at: "2025-06-09" },
+            { id: 5, name: "Eva", email: "eva@example.com", role: "admin", created_at: "2025-02-28" },
+            { id: 6, name: "Frank", email: "frank@example.com", role: "user", created_at: "2025-05-12" },
+            { id: 7, name: "Grace", email: "grace@example.com", role: "user", created_at: "2025-07-01" },
+            { id: 8, name: "Hannah", email: "hannah@example.com", role: "user", created_at: "2025-03-21" },
+            { id: 9, name: "Ian", email: "ian@example.com", role: "user", created_at: "2025-04-10" },
+            { id: 10, name: "Julia", email: "julia@example.com", role: "admin", created_at: "2025-06-25" }
+        ];
+
+        let currentPage = 1;
+        const rowsPerPage = 5;
+
+        const tableBody = document.querySelector("#users-table tbody");
+        const pageInfo = document.getElementById("page-info");
+        const filterDate = document.getElementById("filter-date");
+
+        function renderTable() {
+            tableBody.innerHTML = "";
+            let filteredUsers = users;
+
+            // Filtrer par date si sélectionnée
+            if (filterDate.value) {
+                filteredUsers = users.filter(u => u.created_at === filterDate.value);
+            }
+
+            const start = (currentPage - 1) * rowsPerPage;
+            const end = start + rowsPerPage;
+            const pageUsers = filteredUsers.slice(start, end);
+
+            for (const user of pageUsers) {
+                const tr = document.createElement("tr");
+                tr.innerHTML = `
+        <td>${user.id}</td>
+        <td>${user.name}</td>
+        <td>${user.email}</td>
+        <td>${user.role}</td>
+        <td>${user.created_at}</td>
+        <td>
+          <button onclick="editUser(${user.id})">✏️ Éditer</button>
+          <button onclick="deleteUser(${user.id})">🗑️ Supprimer</button>
+        </td>
       `;
-                    tableBody.appendChild(tr);
+                tableBody.appendChild(tr);
+            }
+
+            // Mise à jour de la pagination
+            const totalPages = Math.ceil(filteredUsers.length / rowsPerPage) || 1;
+            pageInfo.textContent = `Page ${currentPage} / ${totalPages}`;
+        }
+
+        function nextPage() {
+            const totalPages = Math.ceil(users.length / rowsPerPage);
+            if (currentPage < totalPages) {
+                currentPage++;
+                renderTable();
+            }
+        }
+
+        function prevPage() {
+            if (currentPage > 1) {
+                currentPage--;
+                renderTable();
+            }
+        }
+
+        // Boutons pagination
+        document.getElementById("next-page").addEventListener("click", nextPage);
+        document.getElementById("prev-page").addEventListener("click", prevPage);
+
+        // Filtrage dynamique
+        filterDate.addEventListener("change", () => {
+            currentPage = 1; // revenir à la première page
+            renderTable();
+        });
+
+        // Fonctions fictives pour actions
+        function editUser(id) {
+            alert("Éditer l'utilisateur ID " + id);
+        }
+
+        function deleteUser(id) {
+            if (confirm("Voulez-vous vraiment supprimer cet utilisateur ?")) {
+                const index = users.findIndex(u => u.id === id);
+                if (index !== -1) {
+                    users.splice(index, 1);
+                    renderTable();
                 }
             }
+        }
 
-            function applyFilters() {
-                const searchTerm = searchInput.value.toLowerCase();
-                const minDate = dateMin.value ? new Date(dateMin.value) : null;
-                const maxDate = dateMax.value ? new Date(dateMax.value) : null;
-
-                const filtered = predictions.filter(p => {
-                    const matchesSearch =
-                        p.result.toLowerCase().includes(searchTerm) ||
-                        String(p.age).includes(searchTerm) ||
-                        String(p.fcvc).includes(searchTerm);
-
-                    const dateObj = new Date(p.date);
-                    const matchesDate =
-                        (!minDate || dateObj >= minDate) &&
-                        (!maxDate || dateObj <= maxDate);
-
-                    return matchesSearch && matchesDate;
-                });
-
-                renderHistory(filtered);
-            }
-
-            function resetFilters() {
-                searchInput.value = "";
-                dateMin.value = "";
-                dateMax.value = "";
-                renderHistory();
-            }
-
-            // Activer la recherche en temps réel
-            searchInput.addEventListener("input", applyFilters);
-
-            // Initialiser le tableau
-            renderHistory();
-        </script>
-        <script>
-            let currentSort = { key: null, asc: true };
-
-            function sortTable(key) {
-                // Inverser l’ordre si on reclique sur la même colonne
-                if (currentSort.key === key) {
-                    currentSort.asc = !currentSort.asc;
-                } else {
-                    currentSort.key = key;
-                    currentSort.asc = true;
-                }
-
-                const sorted = [...predictions].sort((a, b) => {
-                    let valA = a[key];
-                    let valB = b[key];
-
-                    // Si la clé est "date", convertir en objet Date
-                    if (key === "date") {
-                        valA = new Date(valA);
-                        valB = new Date(valB);
-                    }
-
-                    if (valA < valB) return currentSort.asc ? -1 : 1;
-                    if (valA > valB) return currentSort.asc ? 1 : -1;
-                    return 0;
-                });
-
-                renderHistory(sorted);
-            }
-
-        </script>
-
-
-
-
-    </body>
+        // Initialiser la table
+        renderTable();
+    </script>
 
+    <footer>
+        © 2025 Prédiction de l’Obésité. Tous droits réservés.
+    </footer>
 
     <script src="js/app.js"></script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index 1da64b622..99e387f83 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -2,125 +2,434 @@
 <html lang="fr">
 
 <head>
-  <meta charset="UTF-8">
-  <title>Tableau de bord - Détection Diabète</title>
-  <link rel="stylesheet" href="styles.css">
+    <meta charset="UTF-8">
+    <title>Tableau de bord - Détection Diabète</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
-  <body>
-  <header>
-    <h1>Mon Tableau de Bord</h1>
-    <nav>
-      <a href="add_patient.html">Nouvelle Prédiction</a>
-      <a href="index.html" onclick="logout()">Déconnexion</a>
-    </nav>
-  </header>
-
-  <main>
-    <h2>Historique de mes prédictions</h2>
-    <table id="history-table">
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Âge</th>
-          <th>FCVC</th>
-          <th>Résultat</th>
-          <th>Probabilité</th>
-        </tr>
-      </thead>
-      <tbody>
-        <!-- rempli par app.js -->
-      </tbody>
-    </table>
-
-    <!-- Section Graphiques -->
-    <section style="margin-top:40px;">
-      <h2>📊 Statistiques</h2>
-      <canvas id="chartResults" width="400" height="200"></canvas>
-      <canvas id="chartProbabilities" width="400" height="200" style="margin-top:30px;"></canvas>
-    </section>
-  </main>
-
-  <!-- Chart.js -->
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-  <script>
-    // Exemple de données de prédictions
-    const predictions = [
-      { date: "2025-01-12", age: 25, fcvc: 2, result: "Sain", probability: 0.85 },
-      { date: "2025-02-18", age: 40, fcvc: 1, result: "Surpoids", probability: 0.67 },
-      { date: "2025-03-03", age: 32, fcvc: 3, result: "Obèse", probability: 0.92 },
-      { date: "2025-03-22", age: 28, fcvc: 2, result: "Sain", probability: 0.78 },
-      { date: "2025-04-10", age: 35, fcvc: 1, result: "Surpoids", probability: 0.59 },
-      { date: "2025-04-25", age: 45, fcvc: 3, result: "Obèse", probability: 0.95 },
-      { date: "2025-05-15", age: 30, fcvc: 2, result: "Sain", probability: 0.88 },
-      { date: "2025-05-30", age: 50, fcvc: 1, result: "Surpoids", probability: 0.70 },
-      { date: "2025-06-05", age: 38, fcvc: 3, result: "Obèse", probability: 0.91 },
-      { date: "2025-06-20", age: 27, fcvc: 2, result: "Sain", probability: 0.82 }
-    ];
-
-    const tableBody = document.querySelector("#history-table tbody");
-
-    function renderHistory() {
-      tableBody.innerHTML = "";
-      for (const pred of predictions) {
-        const tr = document.createElement("tr");
-        tr.innerHTML = `
-          <td>${pred.date}</td>
-          <td>${pred.age}</td>
-          <td>${pred.fcvc}</td>
-          <td class="${pred.result === 'Obèse' ? 'result-1' : 'result-0'}">${pred.result}</td>
-          <td>${(pred.probability * 100).toFixed(1)}%</td>
+
+    <body>
+        <header>
+            <h1>Mon Tableau de Bord</h1>
+            <nav style="display:flex; gap:10px; flex-wrap:wrap;">
+                <button id="btnShowStats" class="btn btn-secondary">📊 Statistiques</button>
+                <button id="darkModeToggle" class="btn btn-dark">🌙 Mode sombre</button>
+                <button onclick="location.href='index.html'" class="btn btn-danger">🚪 Déconnexion</button>
+            </nav>
+        </header>
+
+        <main>
+            <h2>Historique de mes prédictions</h2>
+            <button onclick="location.href='add_patient.html'" class="btn btn-primary">➕ Nouvelle Prédiction</button>
+            <button onclick="exportCSV()" class="btn btn-secondary">📥 Exporter CSV</button>
+            <div style="margin: 15px 0; display: flex; gap: 15px; align-items: center; flex-wrap: wrap;">
+                <!-- Recherche globale -->
+                <input type="text" id="search-input" placeholder="🔍 Rechercher (nom, âge, résultat)...">
+
+                <!-- Filtre par intervalle de date -->
+                <label for="date-min">Du :</label>
+                <input type="date" id="date-min">
+                <label for="date-max">Au :</label>
+                <input type="date" id="date-max">
+
+                <button onclick="applyFilters()">Filtrer</button>
+                <button onclick="resetFilters()">Réinitialiser</button>
+            </div>
+            <table id="history-table">
+                <thead>
+                    <tr>
+                        <th onclick="sortTable('date')">Date ⬍</th>
+                        <th onclick="sortTable('age')">Âge ⬍</th>
+                        <th>FCVC</th>
+                        <th>Résultat</th>
+                        <th>Probabilité</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- rempli par app.js -->
+                </tbody>
+            </table>
+
+            <!-- Section Graphiques -->
+            <section id="charts" class="charts-section" style="display:none; margin-top:20px;">
+                <h2>📊 Statistiques</h2>
+                <canvas id="chartResults" width="400" height="200"></canvas>
+                <canvas id="chartProbabilities" width="400" height="200" style="margin-top:30px;"></canvas>
+            </section>
+        </main>
+        <!-- Styles -->
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                background: #fafafa;
+                color: #333;
+                transition: background 0.3s, color 0.3s;
+            }
+
+            header {
+                background: #2196F3;
+                color: white;
+                padding: 15px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            header nav a {
+                margin-left: 15px;
+                color: white;
+                text-decoration: none;
+                font-weight: bold;
+            }
+
+            header nav button {
+                padding: 5px 10px;
+                border: none;
+                cursor: pointer;
+                border-radius: 5px;
+            }
+
+            .dashboard {
+                display: flex;
+                gap: 5%;
+                margin-top: 20px;
+                padding: 0 15px;
+            }
+
+            .table-section {
+                flex-basis: 60%;
+            }
+
+            .charts-section {
+                flex-basis: 35%;
+            }
+
+
+            table td,
+            table th {
+                text-align: center;
+            }
+
+            /* Mode sombre */
+            body.dark {
+                background: #121212;
+                color: #201f1f;
+            }
+
+            body.dark header {
+                background: #333;
+            }
+
+            body.dark header nav a {
+                color: #f6f0f0;
+            }
+
+            body.dark table thead {
+                background: #333;
+                color: hsl(0, 0%, 88%);
+            }
+
+            body.dark table,
+            body.dark th,
+            body.dark td {
+                border: 1px solid #444;
+            }
+
+            body.dark .charts-section h2,
+            body.dark .table-section h2 {
+                color: #201f1f;
+            }
+
+            /* Responsive */
+            @media (max-width: 768px) {
+                .dashboard {
+                    flex-direction: column;
+                }
+
+                .table-section,
+                .charts-section {
+                    flex-basis: 100%;
+                }
+            }
+        </style>
+        <style>
+            .btn {
+                padding: 8px 15px;
+                border: none;
+                border-radius: 6px;
+                cursor: pointer;
+                font-weight: bold;
+                transition: 0.3s;
+            }
+
+            .btn-primary {
+                background: #007bff;
+                color: white;
+            }
+
+            .btn-secondary {
+                background: #6c757d;
+                color: white;
+            }
+
+            .btn-dark {
+                background: #343a40;
+                color: white;
+            }
+
+            .btn-danger {
+                background: #dc3545;
+                color: white;
+            }
+
+            .btn:hover {
+                opacity: 0.85;
+            }
+        </style>
+
+        <!-- Chart.js -->
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+        <script>
+            // ============================
+            // 1️⃣ Données de prédictions
+            // ============================
+            const predictions = [
+                { date: "2025-01-12", age: 25, fcvc: 2, result: "Sain", probability: 0.85 },
+                { date: "2025-02-18", age: 40, fcvc: 1, result: "Surpoids", probability: 0.67 },
+                { date: "2025-03-03", age: 32, fcvc: 3, result: "Obèse", probability: 0.92 },
+                { date: "2025-03-22", age: 28, fcvc: 2, result: "Sain", probability: 0.78 },
+                { date: "2025-04-10", age: 35, fcvc: 1, result: "Surpoids", probability: 0.59 },
+                { date: "2025-04-25", age: 45, fcvc: 3, result: "Obèse", probability: 0.95 },
+                { date: "2025-05-15", age: 30, fcvc: 2, result: "Sain", probability: 0.88 },
+                { date: "2025-05-30", age: 50, fcvc: 1, result: "Surpoids", probability: 0.70 },
+                { date: "2025-06-05", age: 38, fcvc: 3, result: "Obèse", probability: 0.91 },
+                { date: "2025-06-20", age: 27, fcvc: 2, result: "Sain", probability: 0.82 }
+            ];
+
+            // ============================
+            // 2️⃣ Génération du tableau
+            // ============================
+            const tableBody = document.querySelector("#history-table tbody");
+
+            function renderHistory(data = predictions) {
+                tableBody.innerHTML = "";
+                data.forEach(pred => {
+                    const tr = document.createElement("tr");
+                    tr.innerHTML = `
+            <td>${pred.date}</td>
+            <td>${pred.age}</td>
+            <td>${pred.fcvc}</td>
+            <td class="${pred.result === 'Obèse' ? 'result-1' : 'result-0'}">${pred.result}</td>
+            <td>${(pred.probability * 100).toFixed(1)}%</td>
         `;
-        tableBody.appendChild(tr);
-      }
-    }
-    renderHistory();
-
-    // ---- Graphique Résultats (Sain / Surpoids / Obèse) ----
-    const counts = predictions.reduce((acc, p) => {
-      acc[p.result] = (acc[p.result] || 0) + 1;
-      return acc;
-    }, {});
-
-    new Chart(document.getElementById("chartResults"), {
-      type: "pie",
-      data: {
-        labels: Object.keys(counts),
-        datasets: [{
-          data: Object.values(counts),
-          backgroundColor: ["#4CAF50", "#FF9800", "#F44336"]
-        }]
-      },
-      options: {
-        plugins: { title: { display: true, text: "Répartition des Résultats" } }
-      }
-    });
-
-    // ---- Graphique Probabilités (évolution dans le temps) ----
-    new Chart(document.getElementById("chartProbabilities"), {
-      type: "line",
-      data: {
-        labels: predictions.map(p => p.date),
-        datasets: [{
-          label: "Probabilité prédite",
-          data: predictions.map(p => (p.probability * 100).toFixed(1)),
-          borderColor: "#2196F3",
-          fill: false,
-          tension: 0.2
-        }]
-      },
-      options: {
-        plugins: { title: { display: true, text: "Évolution des Probabilités (%)" } },
-        scales: { y: { min: 0, max: 100 } }
-      }
-    });
-  </script>
-</body>
+                    tableBody.appendChild(tr);
+                });
+            }
+
+            // Initialisation du tableau
+            renderHistory();
+
+            // ============================
+            // 3️⃣ Graphiques
+            // ============================
+
+            // 3.1 Répartition des résultats
+            function renderResultsChart() {
+                const counts = predictions.reduce((acc, p) => {
+                    acc[p.result] = (acc[p.result] || 0) + 1;
+                    return acc;
+                }, {});
+
+                new Chart(document.getElementById("chartResults"), {
+                    type: "pie",
+                    data: {
+                        labels: Object.keys(counts),
+                        datasets: [{
+                            data: Object.values(counts),
+                            backgroundColor: ["#4CAF50", "#FF9800", "#F44336"]
+                        }]
+                    },
+                    options: {
+                        plugins: {
+                            title: { display: true, text: "Répartition des Résultats" }
+                        }
+                    }
+                });
+            }
+
+            // 3.2 Probabilités dans le temps
+            function renderProbabilitiesChart() {
+                new Chart(document.getElementById("chartProbabilities"), {
+                    type: "line",
+                    data: {
+                        labels: predictions.map(p => p.date),
+                        datasets: [{
+                            label: "Probabilité prédite",
+                            data: predictions.map(p => (p.probability * 100).toFixed(1)),
+                            borderColor: "#2196F3",
+                            fill: false,
+                            tension: 0.2
+                        }]
+                    },
+                    options: {
+                        plugins: {
+                            title: { display: true, text: "Évolution des Probabilités (%)" }
+                        },
+                        scales: { y: { min: 0, max: 100 } }
+                    }
+                });
+            }
+
+            // Rendu initial des graphiques
+            renderResultsChart();
+            renderProbabilitiesChart();
+
+            // ============================
+            // 4️⃣ Bouton statistiques
+            // ============================
+            const btnShowStats = document.getElementById("btnShowStats");
+            const chartsSection = document.getElementById("charts");
+            const tableSection = document.getElementById("tableSection");
+
+            btnShowStats.addEventListener("click", () => {
+                // Vérifie si les statistiques sont cachées
+                const isChartsHidden = chartsSection.style.display === "none" || chartsSection.style.display === "";
+
+                // Toggle affichage
+                chartsSection.style.display = isChartsHidden ? "block" : "none";
+                tableSection.style.display = isChartsHidden ? "none" : "block";
+
+                // Changer le texte du bouton
+                btnShowStats.textContent = isChartsHidden ? "⬅ Retour au tableau" : "📊 Statistiques";
+
+                // Scroll vers la section visible
+                const targetSection = isChartsHidden ? chartsSection : tableSection;
+                targetSection.scrollIntoView({ behavior: "smooth" });
+            });
+
+
+            // ============================
+            // 5️⃣ Mode sombre
+            // ============================
+            const toggleBtn = document.getElementById("darkModeToggle");
+            toggleBtn.addEventListener("click", () => {
+                document.body.classList.toggle("dark");
+                toggleBtn.textContent = document.body.classList.contains("dark") ? "☀️ Mode clair" : "🌙 Mode sombre";
+            });
+
+        </script>
+        <script>
+            function exportCSV() {
+                let rows = [["Date", "Âge", "FCVC", "Résultat", "Probabilité"]];
+                predictions.forEach(p => {
+                    rows.push([p.date, p.age, p.fcvc, p.result, (p.probability * 100).toFixed(1) + "%"]);
+                });
+                let csvContent = "data:text/csv;charset=utf-8,"
+                    + rows.map(e => e.join(",")).join("\n");
+                const link = document.createElement("a");
+                link.setAttribute("href", csvContent);
+                link.setAttribute("download", "historique_predictions.csv");
+                document.body.appendChild(link);
+                link.click();
+            }
+        </script>
+        <script>
+            // const tableBody = document.querySelector("#history-table tbody"); // Already declared above
+            const searchInput = document.getElementById("search-input");
+            const dateMin = document.getElementById("date-min");
+            const dateMax = document.getElementById("date-max");
+
+            function renderHistory(filteredData = predictions) {
+                tableBody.innerHTML = "";
+                for (const pred of filteredData) {
+                    const tr = document.createElement("tr");
+                    tr.innerHTML = `
+        <td>${pred.date}</td>
+        <td>${pred.age}</td>
+        <td>${pred.fcvc}</td>
+        <td class="${pred.result === 'Obèse' ? 'result-1' : 'result-0'}">${pred.result}</td>
+        <td>${(pred.probability * 100).toFixed(1)}%</td>
+      `;
+                    tableBody.appendChild(tr);
+                }
+            }
+
+            function applyFilters() {
+                const searchTerm = searchInput.value.toLowerCase();
+                const minDate = dateMin.value ? new Date(dateMin.value) : null;
+                const maxDate = dateMax.value ? new Date(dateMax.value) : null;
+
+                const filtered = predictions.filter(p => {
+                    const matchesSearch =
+                        p.result.toLowerCase().includes(searchTerm) ||
+                        String(p.age).includes(searchTerm) ||
+                        String(p.fcvc).includes(searchTerm);
+
+                    const dateObj = new Date(p.date);
+                    const matchesDate =
+                        (!minDate || dateObj >= minDate) &&
+                        (!maxDate || dateObj <= maxDate);
+
+                    return matchesSearch && matchesDate;
+                });
+
+                renderHistory(filtered);
+            }
+
+            function resetFilters() {
+                searchInput.value = "";
+                dateMin.value = "";
+                dateMax.value = "";
+                renderHistory();
+            }
+
+            // Activer la recherche en temps réel
+            searchInput.addEventListener("input", applyFilters);
+
+            // Initialiser le tableau
+            renderHistory();
+        </script>
+        <script>
+            let currentSort = { key: null, asc: true };
+
+            function sortTable(key) {
+                // Inverser l’ordre si on reclique sur la même colonne
+                if (currentSort.key === key) {
+                    currentSort.asc = !currentSort.asc;
+                } else {
+                    currentSort.key = key;
+                    currentSort.asc = true;
+                }
+
+                const sorted = [...predictions].sort((a, b) => {
+                    let valA = a[key];
+                    let valB = b[key];
+
+                    // Si la clé est "date", convertir en objet Date
+                    if (key === "date") {
+                        valA = new Date(valA);
+                        valB = new Date(valB);
+                    }
+
+                    if (valA < valB) return currentSort.asc ? -1 : 1;
+                    if (valA > valB) return currentSort.asc ? 1 : -1;
+                    return 0;
+                });
+
+                renderHistory(sorted);
+            }
+
+        </script>
+
+
+
+
+    </body>
 
 
-  <script src="js/app.js"></script>
+    <script src="js/app.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/frontend/test.html b/frontend/test.html
index 99e387f83..e69de29bb 100644
--- a/frontend/test.html
+++ b/frontend/test.html
@@ -1,435 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Tableau de bord - Détection Diabète</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-
-<body>
-
-    <body>
-        <header>
-            <h1>Mon Tableau de Bord</h1>
-            <nav style="display:flex; gap:10px; flex-wrap:wrap;">
-                <button id="btnShowStats" class="btn btn-secondary">📊 Statistiques</button>
-                <button id="darkModeToggle" class="btn btn-dark">🌙 Mode sombre</button>
-                <button onclick="location.href='index.html'" class="btn btn-danger">🚪 Déconnexion</button>
-            </nav>
-        </header>
-
-        <main>
-            <h2>Historique de mes prédictions</h2>
-            <button onclick="location.href='add_patient.html'" class="btn btn-primary">➕ Nouvelle Prédiction</button>
-            <button onclick="exportCSV()" class="btn btn-secondary">📥 Exporter CSV</button>
-            <div style="margin: 15px 0; display: flex; gap: 15px; align-items: center; flex-wrap: wrap;">
-                <!-- Recherche globale -->
-                <input type="text" id="search-input" placeholder="🔍 Rechercher (nom, âge, résultat)...">
-
-                <!-- Filtre par intervalle de date -->
-                <label for="date-min">Du :</label>
-                <input type="date" id="date-min">
-                <label for="date-max">Au :</label>
-                <input type="date" id="date-max">
-
-                <button onclick="applyFilters()">Filtrer</button>
-                <button onclick="resetFilters()">Réinitialiser</button>
-            </div>
-            <table id="history-table">
-                <thead>
-                    <tr>
-                        <th onclick="sortTable('date')">Date ⬍</th>
-                        <th onclick="sortTable('age')">Âge ⬍</th>
-                        <th>FCVC</th>
-                        <th>Résultat</th>
-                        <th>Probabilité</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- rempli par app.js -->
-                </tbody>
-            </table>
-
-            <!-- Section Graphiques -->
-            <section id="charts" class="charts-section" style="display:none; margin-top:20px;">
-                <h2>📊 Statistiques</h2>
-                <canvas id="chartResults" width="400" height="200"></canvas>
-                <canvas id="chartProbabilities" width="400" height="200" style="margin-top:30px;"></canvas>
-            </section>
-        </main>
-        <!-- Styles -->
-        <style>
-            body {
-                font-family: Arial, sans-serif;
-                background: #fafafa;
-                color: #333;
-                transition: background 0.3s, color 0.3s;
-            }
-
-            header {
-                background: #2196F3;
-                color: white;
-                padding: 15px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-            }
-
-            header nav a {
-                margin-left: 15px;
-                color: white;
-                text-decoration: none;
-                font-weight: bold;
-            }
-
-            header nav button {
-                padding: 5px 10px;
-                border: none;
-                cursor: pointer;
-                border-radius: 5px;
-            }
-
-            .dashboard {
-                display: flex;
-                gap: 5%;
-                margin-top: 20px;
-                padding: 0 15px;
-            }
-
-            .table-section {
-                flex-basis: 60%;
-            }
-
-            .charts-section {
-                flex-basis: 35%;
-            }
-
-
-            table td,
-            table th {
-                text-align: center;
-            }
-
-            /* Mode sombre */
-            body.dark {
-                background: #121212;
-                color: #201f1f;
-            }
-
-            body.dark header {
-                background: #333;
-            }
-
-            body.dark header nav a {
-                color: #f6f0f0;
-            }
-
-            body.dark table thead {
-                background: #333;
-                color: hsl(0, 0%, 88%);
-            }
-
-            body.dark table,
-            body.dark th,
-            body.dark td {
-                border: 1px solid #444;
-            }
-
-            body.dark .charts-section h2,
-            body.dark .table-section h2 {
-                color: #201f1f;
-            }
-
-            /* Responsive */
-            @media (max-width: 768px) {
-                .dashboard {
-                    flex-direction: column;
-                }
-
-                .table-section,
-                .charts-section {
-                    flex-basis: 100%;
-                }
-            }
-        </style>
-        <style>
-            .btn {
-                padding: 8px 15px;
-                border: none;
-                border-radius: 6px;
-                cursor: pointer;
-                font-weight: bold;
-                transition: 0.3s;
-            }
-
-            .btn-primary {
-                background: #007bff;
-                color: white;
-            }
-
-            .btn-secondary {
-                background: #6c757d;
-                color: white;
-            }
-
-            .btn-dark {
-                background: #343a40;
-                color: white;
-            }
-
-            .btn-danger {
-                background: #dc3545;
-                color: white;
-            }
-
-            .btn:hover {
-                opacity: 0.85;
-            }
-        </style>
-
-        <!-- Chart.js -->
-        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-        <script>
-            // ============================
-            // 1️⃣ Données de prédictions
-            // ============================
-            const predictions = [
-                { date: "2025-01-12", age: 25, fcvc: 2, result: "Sain", probability: 0.85 },
-                { date: "2025-02-18", age: 40, fcvc: 1, result: "Surpoids", probability: 0.67 },
-                { date: "2025-03-03", age: 32, fcvc: 3, result: "Obèse", probability: 0.92 },
-                { date: "2025-03-22", age: 28, fcvc: 2, result: "Sain", probability: 0.78 },
-                { date: "2025-04-10", age: 35, fcvc: 1, result: "Surpoids", probability: 0.59 },
-                { date: "2025-04-25", age: 45, fcvc: 3, result: "Obèse", probability: 0.95 },
-                { date: "2025-05-15", age: 30, fcvc: 2, result: "Sain", probability: 0.88 },
-                { date: "2025-05-30", age: 50, fcvc: 1, result: "Surpoids", probability: 0.70 },
-                { date: "2025-06-05", age: 38, fcvc: 3, result: "Obèse", probability: 0.91 },
-                { date: "2025-06-20", age: 27, fcvc: 2, result: "Sain", probability: 0.82 }
-            ];
-
-            // ============================
-            // 2️⃣ Génération du tableau
-            // ============================
-            const tableBody = document.querySelector("#history-table tbody");
-
-            function renderHistory(data = predictions) {
-                tableBody.innerHTML = "";
-                data.forEach(pred => {
-                    const tr = document.createElement("tr");
-                    tr.innerHTML = `
-            <td>${pred.date}</td>
-            <td>${pred.age}</td>
-            <td>${pred.fcvc}</td>
-            <td class="${pred.result === 'Obèse' ? 'result-1' : 'result-0'}">${pred.result}</td>
-            <td>${(pred.probability * 100).toFixed(1)}%</td>
-        `;
-                    tableBody.appendChild(tr);
-                });
-            }
-
-            // Initialisation du tableau
-            renderHistory();
-
-            // ============================
-            // 3️⃣ Graphiques
-            // ============================
-
-            // 3.1 Répartition des résultats
-            function renderResultsChart() {
-                const counts = predictions.reduce((acc, p) => {
-                    acc[p.result] = (acc[p.result] || 0) + 1;
-                    return acc;
-                }, {});
-
-                new Chart(document.getElementById("chartResults"), {
-                    type: "pie",
-                    data: {
-                        labels: Object.keys(counts),
-                        datasets: [{
-                            data: Object.values(counts),
-                            backgroundColor: ["#4CAF50", "#FF9800", "#F44336"]
-                        }]
-                    },
-                    options: {
-                        plugins: {
-                            title: { display: true, text: "Répartition des Résultats" }
-                        }
-                    }
-                });
-            }
-
-            // 3.2 Probabilités dans le temps
-            function renderProbabilitiesChart() {
-                new Chart(document.getElementById("chartProbabilities"), {
-                    type: "line",
-                    data: {
-                        labels: predictions.map(p => p.date),
-                        datasets: [{
-                            label: "Probabilité prédite",
-                            data: predictions.map(p => (p.probability * 100).toFixed(1)),
-                            borderColor: "#2196F3",
-                            fill: false,
-                            tension: 0.2
-                        }]
-                    },
-                    options: {
-                        plugins: {
-                            title: { display: true, text: "Évolution des Probabilités (%)" }
-                        },
-                        scales: { y: { min: 0, max: 100 } }
-                    }
-                });
-            }
-
-            // Rendu initial des graphiques
-            renderResultsChart();
-            renderProbabilitiesChart();
-
-            // ============================
-            // 4️⃣ Bouton statistiques
-            // ============================
-            const btnShowStats = document.getElementById("btnShowStats");
-            const chartsSection = document.getElementById("charts");
-            const tableSection = document.getElementById("tableSection");
-
-            btnShowStats.addEventListener("click", () => {
-                // Vérifie si les statistiques sont cachées
-                const isChartsHidden = chartsSection.style.display === "none" || chartsSection.style.display === "";
-
-                // Toggle affichage
-                chartsSection.style.display = isChartsHidden ? "block" : "none";
-                tableSection.style.display = isChartsHidden ? "none" : "block";
-
-                // Changer le texte du bouton
-                btnShowStats.textContent = isChartsHidden ? "⬅ Retour au tableau" : "📊 Statistiques";
-
-                // Scroll vers la section visible
-                const targetSection = isChartsHidden ? chartsSection : tableSection;
-                targetSection.scrollIntoView({ behavior: "smooth" });
-            });
-
-
-            // ============================
-            // 5️⃣ Mode sombre
-            // ============================
-            const toggleBtn = document.getElementById("darkModeToggle");
-            toggleBtn.addEventListener("click", () => {
-                document.body.classList.toggle("dark");
-                toggleBtn.textContent = document.body.classList.contains("dark") ? "☀️ Mode clair" : "🌙 Mode sombre";
-            });
-
-        </script>
-        <script>
-            function exportCSV() {
-                let rows = [["Date", "Âge", "FCVC", "Résultat", "Probabilité"]];
-                predictions.forEach(p => {
-                    rows.push([p.date, p.age, p.fcvc, p.result, (p.probability * 100).toFixed(1) + "%"]);
-                });
-                let csvContent = "data:text/csv;charset=utf-8,"
-                    + rows.map(e => e.join(",")).join("\n");
-                const link = document.createElement("a");
-                link.setAttribute("href", csvContent);
-                link.setAttribute("download", "historique_predictions.csv");
-                document.body.appendChild(link);
-                link.click();
-            }
-        </script>
-        <script>
-            // const tableBody = document.querySelector("#history-table tbody"); // Already declared above
-            const searchInput = document.getElementById("search-input");
-            const dateMin = document.getElementById("date-min");
-            const dateMax = document.getElementById("date-max");
-
-            function renderHistory(filteredData = predictions) {
-                tableBody.innerHTML = "";
-                for (const pred of filteredData) {
-                    const tr = document.createElement("tr");
-                    tr.innerHTML = `
-        <td>${pred.date}</td>
-        <td>${pred.age}</td>
-        <td>${pred.fcvc}</td>
-        <td class="${pred.result === 'Obèse' ? 'result-1' : 'result-0'}">${pred.result}</td>
-        <td>${(pred.probability * 100).toFixed(1)}%</td>
-      `;
-                    tableBody.appendChild(tr);
-                }
-            }
-
-            function applyFilters() {
-                const searchTerm = searchInput.value.toLowerCase();
-                const minDate = dateMin.value ? new Date(dateMin.value) : null;
-                const maxDate = dateMax.value ? new Date(dateMax.value) : null;
-
-                const filtered = predictions.filter(p => {
-                    const matchesSearch =
-                        p.result.toLowerCase().includes(searchTerm) ||
-                        String(p.age).includes(searchTerm) ||
-                        String(p.fcvc).includes(searchTerm);
-
-                    const dateObj = new Date(p.date);
-                    const matchesDate =
-                        (!minDate || dateObj >= minDate) &&
-                        (!maxDate || dateObj <= maxDate);
-
-                    return matchesSearch && matchesDate;
-                });
-
-                renderHistory(filtered);
-            }
-
-            function resetFilters() {
-                searchInput.value = "";
-                dateMin.value = "";
-                dateMax.value = "";
-                renderHistory();
-            }
-
-            // Activer la recherche en temps réel
-            searchInput.addEventListener("input", applyFilters);
-
-            // Initialiser le tableau
-            renderHistory();
-        </script>
-        <script>
-            let currentSort = { key: null, asc: true };
-
-            function sortTable(key) {
-                // Inverser l’ordre si on reclique sur la même colonne
-                if (currentSort.key === key) {
-                    currentSort.asc = !currentSort.asc;
-                } else {
-                    currentSort.key = key;
-                    currentSort.asc = true;
-                }
-
-                const sorted = [...predictions].sort((a, b) => {
-                    let valA = a[key];
-                    let valB = b[key];
-
-                    // Si la clé est "date", convertir en objet Date
-                    if (key === "date") {
-                        valA = new Date(valA);
-                        valB = new Date(valB);
-                    }
-
-                    if (valA < valB) return currentSort.asc ? -1 : 1;
-                    if (valA > valB) return currentSort.asc ? 1 : -1;
-                    return 0;
-                });
-
-                renderHistory(sorted);
-            }
-
-        </script>
-
-
-
-
-    </body>
-
-
-    <script src="js/app.js"></script>
-</body>
-
-</html>
\ No newline at end of file
