Spaces:

CYV28
/

RetinAI

Sleeping

App Files Files Community

Akira-Kurusu commited on Mar 20

Commit

1570eec

verified ·

1 Parent(s): f2959a6

Update web/diagnosis.html

Browse files

Files changed (1) hide show

web/diagnosis.html +103 -21

web/diagnosis.html CHANGED Viewed

@@ -199,6 +199,69 @@
             opacity: 0;
             pointer-events: none;
         }
     </style>
 </head>
 <body class="vertical light">
@@ -1239,28 +1302,47 @@ if (false) { /* removed */ }
         }
         function showAlert(type, message) {
-            const alertClass = {
-                'success': 'alert-success',
-                'error': 'alert-danger',
-                'warning': 'alert-warning',
-                'info': 'alert-info'
-            }[type] || 'alert-info';
-            const alertHtml = `
-        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
-            ${(function(){var n=type==='error'?'x-circle':type==='success'?'check-circle':type==='warning'?'alert-triangle':'info';return typeof feather!=='undefined'?feather.icons[n].toSvg({'width':16,'height':16,'stroke-width':1.8,'style':'margin-right:6px;vertical-align:middle;'}):'';})()}
-            ${message}
-            <button type="button" class="close" data-dismiss="alert">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
-        `;
-            $('.container-fluid').prepend(alertHtml);
-            setTimeout(() => {
-                $('.alert').first().alert('close');
-            }, 5000);
         }
         // === FUNCIONES GLOBALES ===

             opacity: 0;
             pointer-events: none;
         }
+        /* ── TOAST NOTIFICATIONS ─────────────────────────── */
+        #toast-container {
+            position: fixed;
+            bottom: 1.5rem;
+            right: 1.5rem;
+            z-index: 99999;
+            display: flex;
+            flex-direction: column;
+            gap: 0.6rem;
+            pointer-events: none;
+        }
+        .toast-notify {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            min-width: 300px;
+            max-width: 380px;
+            padding: 14px 16px;
+            border-radius: 10px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+            background: #fff;
+            border-left: 5px solid #ccc;
+            pointer-events: all;
+            opacity: 0;
+            transform: translateX(60px);
+            transition: opacity 0.3s ease, transform 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .toast-notify.show { opacity: 1; transform: translateX(0); }
+        .toast-notify.hide { opacity: 0; transform: translateX(60px); }
+        .toast-notify.toast-success { border-left-color: #28a745; }
+        .toast-notify.toast-error   { border-left-color: #dc3545; }
+        .toast-notify.toast-warning { border-left-color: #ffc107; }
+        .toast-notify.toast-info    { border-left-color: #17a2b8; }
+        .toast-icon { flex-shrink: 0; margin-top: 1px; }
+        .toast-success .toast-icon svg { stroke: #28a745; }
+        .toast-error   .toast-icon svg { stroke: #dc3545; }
+        .toast-warning .toast-icon svg { stroke: #ffc107; }
+        .toast-info    .toast-icon svg { stroke: #17a2b8; }
+        .toast-body { flex: 1; }
+        .toast-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 2px; }
+        .toast-success .toast-title { color: #155724; }
+        .toast-error   .toast-title { color: #721c24; }
+        .toast-warning .toast-title { color: #856404; }
+        .toast-info    .toast-title { color: #0c5460; }
+        .toast-msg { font-size: 0.825rem; color: #555; line-height: 1.4; }
+        .toast-close {
+            background: none; border: none; font-size: 1rem;
+            line-height: 1; color: #aaa; cursor: pointer; padding: 0; flex-shrink: 0;
+        }
+        .toast-close:hover { color: #333; }
+        .toast-progress {
+            position: absolute;
+            bottom: 0; left: 0;
+            height: 3px;
+            border-radius: 0 0 0 10px;
+        }
+        .toast-success .toast-progress { background: #28a745; }
+        .toast-error   .toast-progress { background: #dc3545; }
+        .toast-warning .toast-progress { background: #ffc107; }
+        .toast-info    .toast-progress { background: #17a2b8; }
     </style>
 </head>
 <body class="vertical light">
         }
         function showAlert(type, message) {
+            if (!document.getElementById('toast-container')) {
+                const container = document.createElement('div');
+                container.id = 'toast-container';
+                document.body.appendChild(container);
+            }
+            const container = document.getElementById('toast-container');
+            const icons = {
+                success: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
+                error:   '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+                warning: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+                info:    '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>'
+            };
+            const titles = { success: 'Éxito', error: 'Error', warning: 'Advertencia', info: 'Información' };
+            const duration = type === 'error' ? 6000 : 4000;
+            const toast = document.createElement('div');
+            toast.className = `toast-notify toast-${type}`;
+            toast.innerHTML = `
+                <div class="toast-icon">${icons[type] || icons.info}</div>
+                <div class="toast-body">
+                    <div class="toast-title">${titles[type] || 'Aviso'}</div>
+                    <div class="toast-msg">${message}</div>
+                </div>
+                <button class="toast-close" onclick="this.closest('.toast-notify').remove()">&times;</button>
+                <div class="toast-progress" style="width:100%;transition:width ${duration}ms linear;"></div>
+            `;
+            container.appendChild(toast);
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                toast.classList.add('show');
+                const bar = toast.querySelector('.toast-progress');
+                if (bar) requestAnimationFrame(() => { bar.style.width = '0%'; });
+            }));
+            const timer = setTimeout(() => {
+                toast.classList.add('hide');
+                toast.addEventListener('transitionend', () => toast.remove(), { once: true });
+            }, duration);
+            toast.querySelector('.toast-close').addEventListener('click', () => clearTimeout(timer));
         }
         // === FUNCIONES GLOBALES ===