function showNotification(type, title, message) { try { const existingNotification = document.getElementById("notificationContainer"); if (existingNotification) existingNotification.remove(); const notification = document.createElement("div"); notification.id = "notificationContainer"; notification.className = `custom-notification ${type}`; const getIcon = (type) => { const icons = { success: '✅', warning: '⚠️', info: `

`, payment: '💳', default: '🔔' }; return icons[type] || icons.default; }; notification.innerHTML = `

${getIcon(type)}

${title}

${message}

`; document.body.appendChild(notification); requestAnimationFrame(() => { notification.classList.add('show'); }); const close = () => { notification.classList.remove('show'); setTimeout(() => notification.remove(), 300); }; notification.querySelector('.notification-close').addEventListener('click', close); setTimeout(close, 6000); // Auto-close after 6 seconds } catch (error) { console.error('Error showing notification:', error); } } const notificationStyles = document.createElement("style"); notificationStyles.textContent = ` .custom-notification { position: fixed; bottom: 24px; min-width: 340px; max-width: 480px; background: #1c1c1c; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); z-index: 999999; overflow: hidden; opacity: 0; transform: translateY(20px) scale(0.95); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); border-left: 6px solid; } .custom-notification.show { opacity: 1; transform: translateY(0) scale(1); } .custom-notification.success, .custom-notification.payment { left: 24px; right: auto; } .custom-notification.success { border-color: #28a745; background-color: #2a2a2a; } .custom-notification.warning { border-color: #ff751a; background-color: #2a2a2a; } .custom-notification.info { border-color: #3498db; background-color: #2a2a2a; } .custom-notification.payment { border-color: #ff3333; background-color: #2a2a2a; } .custom-notification.default { right: 24px; } .notification-wrapper { display: flex; align-items: center; padding: 20px; gap: 16px; position: relative; } .icon-wrapper { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; background: #333; color: #ff4d4d; animation: pulse 1.5s infinite; } .notification-content { flex-grow: 1; } .notification-content h4 { margin: 0; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.4; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .notification-content p { margin: 6px 0 0; color: #ccc; font-size: 14px; line-height: 1.5; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .notification-close { background: none; border: none; color: #888; padding: 8px; cursor: pointer; border-radius: 8px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .notification-close:hover { background: #444; color: #fff; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @media (max-width: 768px) { .custom-notification { min-width: calc(100% - 32px); margin: 0 16px; left: 0; right: 0; bottom: 16px; } .notification-wrapper { flex-direction: column; align-items: flex-start; padding: 16px; } .icon-wrapper { width: 36px; height: 36px; font-size: 18px; } .notification-content h4 { font-size: 16px; } .notification-content p { font-size: 12px; } } `; if (!document.getElementById('notification-styles')) { notificationStyles.id = 'notification-styles'; document.head.appendChild(notificationStyles); } // Example usage showNotification('payment', 'Payment Attempt', 'Your payment is being processed.'); showNotification('success', 'Payment Successful', 'Your payment was processed successfully.'); showNotification('default', 'Info', 'This is a default notification.'); update this full function make it very proffessional and beautifull looks with animations..

Animated Notification - Copy this Angular, Css Component to your project

About

Tags

Share