A robust, decent looking, notification system for your website frontend: fading animations - closable popups - controllable time delay - smart queue - 4 types of icons: warning, error, success, info and none (easily add more) - no highlight buttons (user select none) - 1 function, 1 CSS file and 1 line of html code and it's yours.

burgil-notify.css

.notification-container {
    width: 100%;
    max-width: fit-content;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.notification {
    max-width: 300px;
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.notification.warning-msg {
    background-color: #ff9800;
}

.notification.error-msg {
    background-color: #f44336;
}

.notification.success-msg {
    background-color: #4caf50;
}

.notification.info-msg {
    background-color: #2196f3;
}

.notification-icon {
    user-select: none;
    margin-right: 10px;
}

.notification-close-btn {
    user-select: none;
    margin-left: 10px;
    cursor: pointer;
}

burgil-notify.html

<div class="notification-container" id="notification-container"></div>

burgil-notify.js

function notify(message, type, delay = 4500) {
    const container = document.getElementById('notification-container');
    const notification = document.createElement('div');
    notification.className = `notification ${type}-msg`;
    const icon = document.createElement('span');
    icon.className = 'notification-icon';
    switch (type) {
        case 'warning':
            icon.textContent = '⚠️';
            break;
        case 'error':
            icon.textContent = '❌';
            break;
        case 'success':
            icon.textContent = '✅';
            break;
        case 'info':
            icon.textContent = 'ℹ️';
            break;
        default:
            icon.textContent = '';
    }
    const text = document.createElement('span');
    text.innerText = message;
    const closeBtn = document.createElement('span');
    closeBtn.className = 'notification-close-btn';
    closeBtn.setAttribute('role', 'button');
    closeBtn.setAttribute('aria-label', 'Close');
    closeBtn.textContent = 'x';
    closeBtn.onclick = () => {
        container.removeChild(notification);
    };
    notification.appendChild(icon);
    notification.appendChild(text);
    notification.appendChild(closeBtn);
    container.appendChild(notification);
    let fadeOutTimer; // Store the fade-out timer in a variable
    const startFadeOutTimer = () => {
        fadeOutTimer = setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => {
                try {
                    if (container && notification) container.removeChild(notification);
                } catch (e) { }
            }, 500);
        }, delay);
    };
    const stopFadeOutTimer = () => {
        clearTimeout(fadeOutTimer);
    };
    notification.addEventListener('mouseover', () => {
        stopFadeOutTimer();
    });
    notification.addEventListener('mouseout', () => {
        startFadeOutTimer();
    });
    notification.offsetHeight;
    notification.style.opacity = '1';
    startFadeOutTimer(); // Start the fade-out timer
}

example-usage.js

const exampleError = "This error indicates that the notification system is working!";
notify("hi", "warning");
notify(exampleError, 'warning', 3500);
notify('Refresh Required', 'info', 5500);
notify('Try again, You failed the captcha!', 'warning', 3500);
notify(exampleError, 'error', 4000);
notify('Unknown issue, Server maintenance, Try again soon.', 'error', 7500);
notify('Too many requests.', 'error', 7500);
notify('Unknown network issue, Try again soon.', 'error', 7500);
notify('Network error, Check internet availability or server status.', 'error', 20000);
notify('Just a moment! Please wait a bit before trying again.', 'warning', 2000);
notify(`Authentication was successful!`, 'success', 2000);
notify('Just a moment! Please wait a bit before you refresh the captcha.', 'warning', 2000);
notify(`Captcha Failed to load!`, 'error', 5000);
notify('Error: ' + exampleError, 'error', 3500);
notify(exampleError, 'error', 4500);
notify('Just a moment! Please wait before refreshing again.', 'warning', 2000);
notify('Success! Logs have been successfully refreshed.', 'success', 3500);
notify('Success! Your API keys have been successfully refreshed.', 'success', 3500);
notify('Just a moment! Please wait before adding another key.', 'warning', 2000);
notify('Patience, please! The page is still loading...', 'warning', 2000);
notify('Oops! Maximum limit of 10 API keys already reached.', 'error', 3500);
notify('Congratulations! Your API Key is on its way.', 'success', 3500);
notify('Just a moment! Please wait before removing another key.', 'warning', 2000);
notify('No key supplied.', 'error', 2000);
notify('Your API key deletion request is in progress!', 'success', 3500);
notify('Your API key deletion request is in progress! Your API key deletion request is in progress! Your API key deletion request is in progress! Your API key deletion request is in progress! Your API key deletion request is in progress!', 'success', 35000);

Switching the side of the notification to LTR (left to right):

Simply change the CSS of .notification-container to use left instead of right and flex-start instead of flex-end

.notification-container {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

You might want to switch the location of the close button, for that you will need to find these lines:

    notification.appendChild(icon);
    notification.appendChild(text);
    notification.appendChild(closeBtn);

and change their order to be:

    notification.appendChild(closeBtn);
    notification.appendChild(text);
    notification.appendChild(icon);

And for the final touch you will probably need to change the margin-right to margin-left for that .notification-icon:

.notification-icon {
    user-select: none;
    margin-left: 10px;
}