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 active">
                     <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>
@@ -365,36 +365,6 @@
             </div>
         </div>
     </main> <!-- main -->
-
-    <!-- Modal de Bienvenida -->
-    <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="true" data-keyboard="true">
-        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 420px;">
-            <div class="modal-content" style="border-radius: 16px; overflow: hidden; border: none; box-shadow: 0 20px 60px rgba(0,0,0,0.15);">
-                <!-- Header con gradiente -->
-                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; text-align: center;">
-                    <div style="width: 72px; height: 72px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;">
-                        <i class="fe fe-user" style="font-size: 2rem; color: white;"></i>
-                    </div>
-                    <h4 style="color: white; margin: 0; font-weight: 700;">¡Bienvenido de vuelta!</h4>
-                </div>
-                <!-- Cuerpo -->
-                <div class="modal-body text-center py-4 px-4">
-                    <h5 class="mb-1" style="font-weight: 600; color: #2d3748;">
-                        Hola, <span id="welcomeUsername" style="color: #667eea;"></span> 👋
-                    </h5>
-                    <p class="text-muted mb-0" style="font-size: 0.9rem;">
-                        Has iniciado sesión correctamente en el sistema de diagnóstico de Retinopatía Diabética.
-                    </p>
-                </div>
-                <!-- Footer -->
-                <div class="modal-footer justify-content-center border-0 pt-0 pb-4">
-                    <button type="button" class="btn btn-primary px-5" data-dismiss="modal" style="border-radius: 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
-                        Continuar al Dashboard
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
     <script src="js/jquery.min.js"></script>
     <script src="js/popper.min.js"></script>
     <script src="js/moment.min.js"></script>
@@ -415,22 +385,6 @@
         api.getSession().catch(() => { window.location.href = 'auth-login.html'; })
            .then(r => { if (r && !r.success) window.location.href = 'auth-login.html'; });
     </script>
-    <script>
-        // Mostrar modal de bienvenida si viene de un login reciente
-        $(document).ready(function() {
-            if (sessionStorage.getItem('justLoggedIn') === 'true') {
-                sessionStorage.removeItem('justLoggedIn');
-                api.getSession().then(function(response) {
-                    if (response && response.success && response.user) {
-                        $('#welcomeUsername').text(response.user.username);
-                        setTimeout(function() {
-                            $('#welcomeModal').modal('show');
-                        }, 400);
-                    }
-                });
-            }
-        });
-    </script>
     <script src="js/gauge.min.js"></script>
     <script src="js/jquery.sparkline.min.js"></script>
     <script src="js/apexcharts.min.js"></script>
@@ -928,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>
                 `);
@@ -950,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>
@@ -1051,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>
@@ -1318,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>
@@ -1342,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>
@@ -1364,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>
@@ -1384,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>
@@ -1460,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);
@@ -1508,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 {
@@ -1823,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>
@@ -2009,5 +1963,23 @@
             }, 200);
         });
     </script>
+<script>
+    // Feather Icons: reemplaza <i data-feather="X"> con SVG inline
+    // Inmune a problemas de fuentes locales
+    function _initFeather() {
+        if (typeof feather !== 'undefined') feather.replace({ 'stroke-width': 1.8 });
+    }
+    document.addEventListener('DOMContentLoaded', _initFeather);
+    // Re-render al inyectar HTML dinámico (modals, cards, tablas)
+    var _fObserver = new MutationObserver(function(mutations) {
+        var needsRefresh = mutations.some(function(m) {
+            return m.addedNodes.length > 0;
+        });
+        if (needsRefresh) _initFeather();
+    });
+    document.addEventListener('DOMContentLoaded', function() {
+        _fObserver.observe(document.body, { childList: true, subtree: true });
+    });
+</script>
 </body>
 </html>