49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
|
/**
|
|||
|
|
* Terminal-style toast notification system
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
function showToast(message, type = 'info', duration = 3000) {
|
|||
|
|
// Remove any existing toasts
|
|||
|
|
const existingToast = document.querySelector('.terminal-toast');
|
|||
|
|
if (existingToast) {
|
|||
|
|
existingToast.remove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Create toast element
|
|||
|
|
const toast = document.createElement('div');
|
|||
|
|
toast.className = `terminal-toast toast-${type}`;
|
|||
|
|
|
|||
|
|
// Icon based on type
|
|||
|
|
const icons = {
|
|||
|
|
success: '✓',
|
|||
|
|
error: '✗',
|
|||
|
|
info: 'ℹ',
|
|||
|
|
warning: '⚠'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
toast.innerHTML = `
|
|||
|
|
<span class="toast-icon">[${icons[type] || 'ℹ'}]</span>
|
|||
|
|
<span class="toast-message">${message}</span>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// Add to document
|
|||
|
|
document.body.appendChild(toast);
|
|||
|
|
|
|||
|
|
// Trigger animation
|
|||
|
|
setTimeout(() => toast.classList.add('show'), 10);
|
|||
|
|
|
|||
|
|
// Auto-remove after duration
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toast.classList.remove('show');
|
|||
|
|
setTimeout(() => toast.remove(), 300);
|
|||
|
|
}, duration);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Convenience functions
|
|||
|
|
window.toast = {
|
|||
|
|
success: (msg, duration) => showToast(msg, 'success', duration),
|
|||
|
|
error: (msg, duration) => showToast(msg, 'error', duration),
|
|||
|
|
info: (msg, duration) => showToast(msg, 'info', duration),
|
|||
|
|
warning: (msg, duration) => showToast(msg, 'warning', duration)
|
|||
|
|
};
|