Spaces:

CYV28
/

RetinAI

Sleeping

App Files Files Community

Akira-Kurusu commited on Mar 20

Commit

deeb3ee

verified ·

1 Parent(s): 1570eec

Update web/users.html

Browse files

Files changed (1) hide show

web/users.html +101 -17

web/users.html CHANGED Viewed

@@ -20,6 +20,70 @@
         );
       })();
     </script>
 </head>
 <body class="vertical light">
@@ -392,27 +456,47 @@
     }
     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">
-                ${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);
     }
 </script>

         );
       })();
     </script>
+    <style>
+        /* ── 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));
     }
 </script>