Modern Toast Notifications

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Toast Notifications</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
        }
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 300px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .toast {
            display: flex;
            align-items: center;
            background: linear-gradient(145deg, #ff9a9e 0%, #fad0c4 100%);
            color: #fff;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: slideInRight 0.5s ease-out;
            opacity: 0;
            animation-fill-mode: forwards;
        }
        .toast-icon {
            font-size: 24px;
            margin-right: 10px;
        }
        .toast-message {
            flex-grow: 1;
            font-size: 16px;
        }
        .toast-close {
            cursor: pointer;
            font-size: 20px;
            background: none;
            border: none;
            color: #fff;
        }
        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div class="toast-container" id="toastContainer"></div>
<script>
    function showToast(message, icon) {
        const toastContainer = document.getElementById('toastContainer');
        const toast = document.createElement('div');
        toast.classList.add('toast');
        const toastIcon = document.createElement('span');
        toastIcon.classList.add('toast-icon');
        toastIcon.innerHTML = icon;
        const toastMessage = document.createElement('span');
        toastMessage.classList.add('toast-message');
        toastMessage.textContent = message;
        const toastClose = document.createElement('button');
        toastClose.classList.add('toast-close');
        toastClose.innerHTML = '&times;';
        toastClose.onclick = () => {
            toast.style.animation = 'fadeOut 0.5s ease-out';
            toast.addEventListener('animationend', () => toast.remove());
        };
        toast.appendChild(toastIcon);
        toast.appendChild(toastMessage);
        toast.appendChild(toastClose);
        toastContainer.appendChild(toast);
        setTimeout(() => {
            toast.style.animation = 'fadeOut 0.5s ease-out';
            toast.addEventListener('animationend', () => toast.remove());
        }, 5000);
    }
    // Example usage:
    showToast('Success! Your action was completed successfully. 😊', '✔️');
    showToast('Warning! There was an issue with your request. ⚠️', '⚠️');
    showToast('Error! Something went wrong. 😞', '❌');
    showToast('Information! Please read the details. 📄', 'ℹ️');
    showToast('Update! New features are available. 🚀', '🚀');
    showToast('Reminder! Don\'t forget your task. ⏰', '⏰');
    showToast('Achievement unlocked! Great job! 🏆', '🏆');
    showToast('Friend request received. 🤝', '🤝');
    showToast('Message sent successfully. ✉️', '✉️');
    showToast('Battery low! Please charge. 🔋', '🔋');
    showToast('Connection lost. Please reconnect. 📡', '📡');
    showToast('Weather update: It\'s sunny outside. 🌞', '🌞');
</script>
</body>
</html>

Modern Toast Notifications - MeggiTools