Modern Styled 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 Styled Toast Notifications</title>
    <style>
        body {
            font-family: 'Helvetica Neue', sans-serif;
            background-color: #fafafa;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        .toast {
            display: flex;
            align-items: center;
            background-color: #2196F3;
            color: #fff;
            padding: 20px;
            margin-bottom: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            animation: slideInRight 0.5s, slideOut 0.5s 3.5s forwards;
            opacity: 0;
        }
        .toast-icon {
            margin-right: 15px;
            font-size: 24px;
        }
        .toast-message {
            flex-grow: 1;
        }
        .toast-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        @keyframes slideOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div class="toast-container" id="toastContainer"></div>
<script>
    function showToast(type, message) {
        const icons = {
            success: '✅',
            error: '❌',
            info: 'ℹ️',
            warning: '⚠️'
        };
        const toastContainer = document.getElementById('toastContainer');
        const toast = document.createElement('div');
        toast.className = 'toast';
        const icon = document.createElement('div');
        icon.className = 'toast-icon';
        icon.innerHTML = icons[type] || 'ℹ️';
        const msg = document.createElement('div');
        msg.className = 'toast-message';
        msg.innerText = message;
        const closeBtn = document.createElement('button');
        closeBtn.className = 'toast-close';
        closeBtn.innerHTML = '&times;';
        closeBtn.onclick = () => toast.remove();
        toast.appendChild(icon);
        toast.appendChild(msg);
        toast.appendChild(closeBtn);
        toastContainer.appendChild(toast);
        setTimeout(() => {
            toast.style.opacity = '1';
        }, 100);
        setTimeout(() => {
            toast.remove();
        }, 4000);
    }
    // Example usage:
    showToast('success', 'Modern success message!');
    showToast('error', 'Modern error message!');
    showToast('info', 'Modern info message!');
    showToast('warning', 'Modern warning message!');
</script>
</body>
</html>

Modern Styled Toast Notifications - MeggiTools