Update web/index.html

web/index.html

@@ -365,6 +365,36 @@
             </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>
@@ -385,6 +415,22 @@
         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>