We are launching a docker version (server version) today so we want to just organize the repo so its easier to navigate.
52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
const NotificationUtils = {
|
|
show(message, type = 'info') {
|
|
const notification = document.createElement('div');
|
|
notification.style.cssText = `
|
|
position: fixed;
|
|
top: 100px;
|
|
right: 20px;
|
|
background: ${type === 'success' ? '#22c55e' : type === 'error' ? '#ef4444' : '#8b5cf6'};
|
|
color: white;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
z-index: 9999;
|
|
font-weight: 600;
|
|
animation: slideInRight 0.3s ease;
|
|
`;
|
|
notification.textContent = message;
|
|
document.body.appendChild(notification);
|
|
|
|
setTimeout(() => {
|
|
notification.style.animation = 'slideOutRight 0.3s ease';
|
|
setTimeout(() => notification.remove(), 300);
|
|
}, 3000);
|
|
},
|
|
|
|
success(message) {
|
|
this.show(message, 'success');
|
|
},
|
|
|
|
error(message) {
|
|
this.show(message, 'error');
|
|
},
|
|
|
|
info(message) {
|
|
this.show(message, 'info');
|
|
}
|
|
};
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes slideInRight {
|
|
from { transform: translateX(400px); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
@keyframes slideOutRight {
|
|
from { transform: translateX(0); opacity: 1; }
|
|
to { transform: translateX(400px); opacity: 0; }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
window.NotificationUtils = NotificationUtils; |