Update web/index.html

web/index.html

@@ -9,7 +9,7 @@
     <title>Dashboard</title>
     <link rel="stylesheet" href="css/simplebar.css">
     <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/feather.css">
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <link rel="stylesheet" href="css/select2.css">
     <link rel="stylesheet" href="css/dropzone.css">
     <link rel="stylesheet" href="css/uppy.min.css">
@@ -24,7 +24,7 @@
 <div class="wrapper">
     <nav class="topnav navbar navbar-light">
         <button type="button" class="navbar-toggler text-muted mt-2 p-0 mr-3 collapseSidebar">
-            <i class="fe fe-menu navbar-toggler-icon"></i>
+            <i data-feather="menu" class="navbar-toggler-icon"></i>
         </button>
 
         <ul class="nav">
@@ -44,7 +44,7 @@
     </nav>
     <aside class="sidebar-left border-right bg-white shadow" id="leftSidebar" data-simplebar>
         <a href="#" class="btn collapseSidebar toggle-btn d-lg-none text-muted ml-2 mt-3" data-toggle="toggle">
-            <i class="fe fe-x"><span class="sr-only"></span></i>
+            <i data-feather="x"><span class="sr-only"></span></i>
         </a>
         <nav class="vertnav navbar navbar-light">
             <!-- nav bar -->
@@ -57,31 +57,31 @@
             <ul class="navbar-nav flex-fill w-100 mb-2">
                 <li class="nav-item active">
                     <a class="nav-link" href="./index.html">
-                        <i class="fe fe-home fe-16"></i>
+                        <i data-feather="home" class="fe-16"></i>
                         <span class="ml-3 item-text">Dashboard</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./diagnosis.html">
-                        <i class="fe fe-eye fe-16"></i>
+                        <i data-feather="eye" class="fe-16"></i>
                         <span class="ml-3 item-text">Diagnóstico</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./patients.html">
-                        <i class="fe fe-users fe-16"></i>
+                        <i data-feather="users" class="fe-16"></i>
                         <span class="ml-3 item-text">Pacientes</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./historial-consultas.html">
-                        <i class="fe fe-file-text fe-16"></i>
+                        <i data-feather="file-text" class="fe-16"></i>
                         <span class="ml-3 item-text">Consultas</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./users.html">
-                        <i class="fe fe-user fe-16"></i>
+                        <i data-feather="user" class="fe-16"></i>
                         <span class="ml-3 item-text">Usuarios</span>
                     </a>
                 </li>
@@ -99,7 +99,7 @@
                                     <div class="row align-items-center">
                                         <div class="col-3 text-center">
                                             <span class="circle circle-sm bg-primary">
-                                                <i class="fe fe-users fe-16 text-white"></i>
+                                                <i data-feather="users" class="fe-16 text-white"></i>
                                             </span>
                                         </div>
                                         <div class="col pr-0">
@@ -116,7 +116,7 @@
                                     <div class="row align-items-center">
                                         <div class="col-3 text-center">
                                             <span class="circle circle-sm bg-warning">
-                                                <i class="fe fe-alert-triangle fe-16 text-white"></i>
+                                                <i data-feather="alert-triangle" class="fe-16 text-white"></i>
                                             </span>
                                         </div>
                                         <div class="col pr-0">
@@ -133,7 +133,7 @@
                                     <div class="row align-items-center">
                                         <div class="col-3 text-center">
                                             <span class="circle circle-sm bg-success">
-                                                <i class="fe fe-check fe-16 text-white"></i>
+                                                <i data-feather="check" class="fe-16 text-white"></i>
                                             </span>
                                         </div>
                                         <div class="col pr-0">
@@ -150,7 +150,7 @@
                                     <div class="row align-items-center">
                                         <div class="col-3 text-center">
                                             <span class="circle circle-sm bg-info">
-                                                <i class="fe fe-percent fe-16 text-white"></i>
+                                                <i data-feather="percent" class="fe-16 text-white"></i>
                                             </span>
                                         </div>
                                         <div class="col pr-0">
@@ -182,7 +182,7 @@
                             <div class="card shadow h-100 mb-4">
                                 <div class="card-header">
                                     <h6 class="card-title mb-0">
-                                        <i class="fe fe-pie-chart mr-2"></i>
+                                        <i data-feather="pie-chart" class="mr-2"></i>
                                         Rangos de Edad con Retinopatía
                                     </h6>
                                 </div>
@@ -229,7 +229,7 @@
                                         <tbody id="recentConsultationsBody">
                                         <tr>
                                             <td colspan="5" class="text-center text-muted">
-                                                <i class="fe fe-loader fe-16 spinner"></i> Cargando consultas...
+                                                <i data-feather="loader" class="fe-16 spinner"></i> Cargando consultas...
                                             </td>
                                         </tr>
                                         </tbody>
@@ -255,7 +255,7 @@
                             <div class="list-group-item bg-transparent">
                                 <div class="row align-items-center">
                                     <div class="col-auto">
-                                        <span class="fe fe-box fe-24"></span>
+                                        <span data-feather="box" class="fe-24"></span>
                                     </div>
                                     <div class="col">
                                         <small><strong>Package has uploaded successfull</strong></small>
@@ -267,7 +267,7 @@
                             <div class="list-group-item bg-transparent">
                                 <div class="row align-items-center">
                                     <div class="col-auto">
-                                        <span class="fe fe-download fe-24"></span>
+                                        <span data-feather="download" class="fe-24"></span>
                                     </div>
                                     <div class="col">
                                         <small><strong>Widgets are updated successfull</strong></small>
@@ -279,7 +279,7 @@
                             <div class="list-group-item bg-transparent">
                                 <div class="row align-items-center">
                                     <div class="col-auto">
-                                        <span class="fe fe-inbox fe-24"></span>
+                                        <span data-feather="inbox" class="fe-24"></span>
                                     </div>
                                     <div class="col">
                                         <small><strong>Notifications have been sent</strong></small>
@@ -291,7 +291,7 @@
                             <div class="list-group-item bg-transparent">
                                 <div class="row align-items-center">
                                     <div class="col-auto">
-                                        <span class="fe fe-link fe-24"></span>
+                                        <span data-feather="link" class="fe-24"></span>
                                     </div>
                                     <div class="col">
                                         <small><strong>Link was attached to menu</strong></small>
@@ -321,13 +321,13 @@
                         <div class="row align-items-center">
                             <div class="col-6 text-center">
                                 <div class="squircle bg-success justify-content-center">
-                                    <i class="fe fe-cpu fe-32 align-self-center text-white"></i>
+                                    <i data-feather="cpu" class="fe-32 align-self-center text-white"></i>
                                 </div>
                                 <p>Control area</p>
                             </div>
                             <div class="col-6 text-center">
                                 <div class="squircle bg-primary justify-content-center">
-                                    <i class="fe fe-activity fe-32 align-self-center text-white"></i>
+                                    <i data-feather="activity" class="fe-32 align-self-center text-white"></i>
                                 </div>
                                 <p>Activity</p>
                             </div>
@@ -335,13 +335,13 @@
                         <div class="row align-items-center">
                             <div class="col-6 text-center">
                                 <div class="squircle bg-primary justify-content-center">
-                                    <i class="fe fe-droplet fe-32 align-self-center text-white"></i>
+                                    <i data-feather="droplet" class="fe-32 align-self-center text-white"></i>
                                 </div>
                                 <p>Droplet</p>
                             </div>
                             <div class="col-6 text-center">
                                 <div class="squircle bg-primary justify-content-center">
-                                    <i class="fe fe-upload-cloud fe-32 align-self-center text-white"></i>
+                                    <i data-feather="upload-cloud" class="fe-32 align-self-center text-white"></i>
                                 </div>
                                 <p>Upload</p>
                             </div>
@@ -349,13 +349,13 @@
                         <div class="row align-items-center">
                             <div class="col-6 text-center">
                                 <div class="squircle bg-primary justify-content-center">
-                                    <i class="fe fe-users fe-32 align-self-center text-white"></i>
+                                    <i data-feather="users" class="fe-32 align-self-center text-white"></i>
                                 </div>
                                 <p>Users</p>
                             </div>
                             <div class="col-6 text-center">
                                 <div class="squircle bg-primary justify-content-center">
-                                    <i class="fe fe-settings fe-32 align-self-center text-white"></i>
+                                    <i data-feather="settings" class="fe-32 align-self-center text-white"></i>
                                 </div>
                                 <p>Settings</p>
                             </div>
@@ -882,7 +882,7 @@
                 $('#recentConsultationsBody').html(`
                     <tr>
                         <td colspan="5" class="text-center text-muted">
-                            <i class="fe fe-loader fe-16 spinner"></i> Cargando consultas...
+                            <i data-feather="loader" class="fe-16 spinner"></i> Cargando consultas...
                         </td>
                     </tr>
                 `);
@@ -904,7 +904,7 @@
                     tbody.append(`
                         <tr>
                             <td colspan="5" class="text-center text-muted">
-                                <i class="fe fe-inbox fe-16"></i><br>
+                                <i data-feather="inbox" class="fe-16"></i><br>
                                 No hay consultas recientes
                             </td>
                         </tr>
@@ -1005,7 +1005,7 @@
                 $('#recentConsultationsBody').html(`
                     <tr>
                         <td colspan="5" class="text-center text-danger">
-                            <i class="fe fe-alert-triangle fe-16"></i><br>
+                            <i data-feather="alert-triangle" class="fe-16"></i><br>
                             ${message || 'Error al cargar consultas'}
                         </td>
                     </tr>
@@ -1272,7 +1272,7 @@
                             </table>
                         </div>
                         <small class="text-muted">
-                            <i class="fe fe-info mr-1"></i>
+                            <i data-feather="info" class="mr-1"></i>
                             Vista alternativa - el gráfico principal no se pudo cargar
                         </small>
                     </div>
@@ -1296,11 +1296,11 @@
                     chartElement.innerHTML = `
                         <div class="d-flex justify-content-center align-items-center" style="height: 350px;">
                             <div class="text-center text-muted">
-                                <i class="fe fe-bar-chart-2 fe-48 mb-3"></i>
+                                <i data-feather="bar-chart-2" class="fe-48 mb-3"></i>
                                 <h6>No hay datos disponibles</h6>
                                 <p class="small">Las consultas aparecerán aquí cuando se registren</p>
                                 <button class="btn btn-sm btn-outline-primary" onclick="insertSampleData()">
-                                    <i class="fe fe-plus mr-1"></i>Generar datos de prueba
+                                    <i data-feather="plus" class="mr-1"></i>Generar datos de prueba
                                 </button>
                             </div>
                         </div>
@@ -1318,7 +1318,7 @@
                     tbody.append(`
                         <tr>
                             <td colspan="5" class="text-center text-muted">
-                                <i class="fe fe-inbox fe-24 mb-2"></i><br>
+                                <i data-feather="inbox" class="fe-24 mb-2"></i><br>
                                 No hay análisis recientes
                             </td>
                         </tr>
@@ -1338,7 +1338,7 @@
                             <td>${analysis.prediction.confidence}%</td>
                             <td>
                                 <button class="btn btn-sm btn-outline-primary" onclick="viewAnalysis('${analysis.filename}')">
-                                    <i class="fe fe-eye fe-12"></i>
+                                    <i data-feather="eye" class="fe-12"></i>
                                 </button>
                             </td>
                         </tr>
@@ -1414,7 +1414,7 @@
                 const fileName = $('#imageInput')[0].files[0]?.name || 'imagen_' + Date.now() + '.jpg';
 
                 api.predict(imgSrc, fileName).then(function(result) {
-                    $('#analyzeBtn').prop('disabled', false).html('<i class="fe fe-eye mr-2"></i>Analizar con IA');
+                    $('#analyzeBtn').prop('disabled', false).html('<i data-feather="eye" class="mr-2"></i>Analizar con IA');
 
                     if (result && result.success) {
                         showAnalysisResults(result);
@@ -1462,7 +1462,7 @@
                 $('#systemTestBtn').prop('disabled', true).html('<i class="spinner-border spinner-border-sm mr-2"></i>Probando...');
 
                 api.getModelInfo().then(function(result) {
-                    $('#systemTestBtn').prop('disabled', false).html('<i class="fe fe-refresh-cw fe-16 mr-2"></i>Probar Sistema');
+                    $('#systemTestBtn').prop('disabled', false).html('<i data-feather="refresh-cw" class="fe-16 mr-2"></i>Probar Sistema');
                     if (result && result.loaded) {
                         showAlert('info', '• Modelo IA: SÍ\n• Base de datos: SÍ');
                     } else {
@@ -1777,7 +1777,7 @@
                     chartElement.innerHTML = `
                         <div class="d-flex justify-content-center align-items-center" style="height: 300px;">
                             <div class="text-center text-muted">
-                                <i class="fe fe-users fe-48 mb-3"></i>
+                                <i data-feather="users" class="fe-48 mb-3"></i>
                                 <h6>No hay datos de edad</h6>
                                 <p class="small">Los rangos de edad aparecerán cuando haya<br>pacientes con retinopatía diabética</p>
                             </div>
@@ -1963,5 +1963,17 @@
             }, 200);
         });
     </script>
+<script>
+    function _initFeather() {
+        if (typeof feather !== 'undefined') feather.replace({ 'stroke-width': 1.8 });
+    }
+    document.addEventListener('DOMContentLoaded', _initFeather);
+    var _fObserver = new MutationObserver(function(mutations) {
+        if (mutations.some(function(m){ return m.addedNodes.length > 0; })) _initFeather();
+    });
+    document.addEventListener('DOMContentLoaded', function() {
+        _fObserver.observe(document.body, { childList: true, subtree: true });
+    });
+</script>
 </body>
 </html>