bootstrap 5 toast notification example with auto hide

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.js"></script>
  
    <!-- Toast Container -->
    <div class="toast-container top-right" id="toastContainer"></div>

    <!-- Demo Content -->
    <div class="demo-container">
        <div class="demo-header">
            <h1>Toast Notifications</h1>
            <p>Beautiful, customizable toast notifications with auto-hide</p>
        </div>

        <div class="demo-card">
            <!-- Basic Toasts -->
            <div class="demo-section">
                <h3>Basic Toast Notifications</h3>
                <div class="demo-buttons">
                    <button class="demo-btn btn-success-demo" onclick="showToast('success')">
                        <ion-icon name="checkmark-circle"></ion-icon>
                        Success Toast
                    </button>
                    <button class="demo-btn btn-info-demo" onclick="showToast('info')">
                        <ion-icon name="information-circle"></ion-icon>
                        Info Toast
                    </button>
                    <button class="demo-btn btn-warning-demo" onclick="showToast('warning')">
                        <ion-icon name="warning"></ion-icon>
                        Warning Toast
                    </button>
                    <button class="demo-btn btn-danger-demo" onclick="showToast('danger')">
                        <ion-icon name="alert-circle"></ion-icon>
                        Danger Toast
                    </button>
                    <button class="demo-btn btn-dark-demo" onclick="showToast('dark')">
                        <ion-icon name="moon"></ion-icon>
                        Dark Toast
                    </button>
                </div>
            </div>

            <!-- Toast with Actions -->
            <div class="demo-section">
                <h3>Toast with Action Buttons</h3>
                <div class="demo-buttons">
                    <button class="demo-btn btn-info-demo" onclick="showToastWithAction()">
                        <ion-icon name="mail"></ion-icon>
                        New Message
                    </button>
                    <button class="demo-btn btn-warning-demo" onclick="showConfirmToast()">
                        <ion-icon name="help-circle"></ion-icon>
                        Confirmation
                    </button>
                </div>
            </div>

            <!-- Position Selection -->
            <div class="demo-section">
                <h3>Toast Position</h3>
                <select class="position-select" id="positionSelect" onchange="changePosition()">
                    <option value="top-right" selected>Top Right</option>
                    <option value="top-left">Top Left</option>
                    <option value="top-center">Top Center</option>
                    <option value="bottom-right">Bottom Right</option>
                    <option value="bottom-left">Bottom Left</option>
                    <option value="bottom-center">Bottom Center</option>
                </select>
            </div>

            <!-- Multiple Toasts -->
            <div class="demo-section">
                <h3>Multiple Toasts</h3>
                <div class="demo-buttons">
                    <button class="demo-btn btn-info-demo" onclick="showMultipleToasts()">
                        <ion-icon name="notifications"></ion-icon>
                        Show Multiple Toasts
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

  * {
            font-family: 'Roboto', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 60px 20px;
        }

        /* Toast Container */
        .toast-container {
            position: fixed;
            z-index: 9999;
        }

        .toast-container.top-right {
            top: 20px;
            right: 20px;
        }

        .toast-container.top-left {
            top: 20px;
            left: 20px;
        }

        .toast-container.bottom-right {
            bottom: 20px;
            right: 20px;
        }

        .toast-container.bottom-left {
            bottom: 20px;
            left: 20px;
        }

        .toast-container.top-center {
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        .toast-container.bottom-center {
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Custom Toast Styles */
        .custom-toast {
            min-width: 300px;
            max-width: 400px;
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            margin-bottom: 15px;
            overflow: hidden;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .custom-toast.hiding {
            animation: slideOut 0.3s ease;
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }

        .toast-header {
            border-bottom: none;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 500;
        }

        .toast-icon {
            font-size: 24px;
            flex-shrink: 0;
        }

        .toast-title {
            font-weight: 700;
            font-size: 15px;
            flex: 1;
            margin: 0;
        }

        .toast-time {
            font-size: 12px;
            opacity: 0.8;
            font-weight: 400;
        }

        .toast-body {
            padding: 0 20px 15px 20px;
            font-size: 14px;
            line-height: 1.6;
        }

        .btn-close {
            padding: 0;
            margin: 0;
            width: 20px;
            height: 20px;
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .btn-close:hover {
            opacity: 1;
            transform: rotate(90deg);
        }

        /* Progress Bar */
        .toast-progress {
            height: 4px;
            background: rgba(0,0,0,0.2);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .toast-progress-bar {
            height: 100%;
            background: rgba(255,255,255,0.8);
            width: 100%;
            animation: progressBar 5s linear;
        }

        @keyframes progressBar {
            from {
                width: 100%;
            }
            to {
                width: 0%;
            }
        }

        /* Toast Types */
        .toast-success {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            color: white;
        }

        .toast-info {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .toast-warning {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: #333;
        }

        .toast-danger {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .toast-dark {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
        }

        /* Demo Content */
        .demo-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .demo-header {
            text-align: center;
            color: white;
            margin-bottom: 50px;
        }

        .demo-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .demo-header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .demo-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        .demo-section {
            margin-bottom: 40px;
        }

        .demo-section h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 20px;
        }

        .demo-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .demo-btn {
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .demo-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .demo-btn ion-icon {
            font-size: 20px;
        }

        .btn-success-demo { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
        .btn-info-demo { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .btn-warning-demo { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: #333; }
        .btn-danger-demo { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .btn-dark-demo { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); }

        .position-select {
            margin-top: 20px;
            padding: 12px 20px;
            border-radius: 10px;
            border: 2px solid #e0e0e0;
            font-weight: 500;
            cursor: pointer;
            font-family: 'Roboto', sans-serif;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .custom-toast {
                min-width: 280px;
                max-width: calc(100vw - 40px);
            }

            .toast-container.top-right,
            .toast-container.bottom-right {
                right: 10px;
            }

            .toast-container.top-left,
            .toast-container.bottom-left {
                left: 10px;
            }

            .demo-card {
                padding: 30px 20px;
            }

            .demo-header h1 {
                font-size: 2rem;
            }
        }

        /* Action Buttons in Toast */
        .toast-actions {
            margin-top: 12px;
            display: flex;
            gap: 10px;
        }

        .toast-action-btn {
            padding: 6px 16px;
            border-radius: 20px;
            border: 2px solid currentColor;
            background: transparent;
            color: inherit;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .toast-action-btn:hover {
            background: rgba(255,255,255,0.2);
        }
    

        // Toast templates
        const toastTemplates = {
            success: {
                icon: 'checkmark-circle',
                title: 'Success!',
                message: 'Your action was completed successfully.',
                time: 'Just now'
            },
            info: {
                icon: 'information-circle',
                title: 'Information',
                message: 'Here is some important information for you.',
                time: 'Just now'
            },
            warning: {
                icon: 'warning',
                title: 'Warning',
                message: 'Please review this important warning message.',
                time: 'Just now'
            },
            danger: {
                icon: 'alert-circle',
                title: 'Error!',
                message: 'Something went wrong. Please try again.',
                time: 'Just now'
            },
            dark: {
                icon: 'moon',
                title: 'Dark Mode',
                message: 'Dark mode theme has been activated.',
                time: 'Just now'
            }
        };

        let toastCounter = 0;

        function showToast(type, customOptions = {}) {
            const template = toastTemplates[type];
            const options = { ...template, ...customOptions };
            
            const toastId = `toast-${++toastCounter}`;
            const toastHTML = `
                <div class="toast custom-toast toast-${type} show" id="${toastId}" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <ion-icon name="${options.icon}" class="toast-icon"></ion-icon>
                        <strong class="toast-title">${options.title}</strong>
                        <small class="toast-time">${options.time}</small>
                        <button type="button" class="btn-close btn-close-white ms-2" onclick="closeToast('${toastId}')"></button>
                    </div>
                    <div class="toast-body">
                        ${options.message}
                        ${options.actions ? `<div class="toast-actions">${options.actions}</div>` : ''}
                    </div>
                    <div class="toast-progress">
                        <div class="toast-progress-bar"></div>
                    </div>
                </div>
            `;

            const container = document.getElementById('toastContainer');
            container.insertAdjacentHTML('beforeend', toastHTML);

            // Auto hide after 5 seconds
            setTimeout(() => {
                closeToast(toastId);
            }, 5000);
        }

        function closeToast(toastId) {
            const toast = document.getElementById(toastId);
            if (toast) {
                toast.classList.add('hiding');
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }
        }

        function showToastWithAction() {
            const actions = `
                <button class="toast-action-btn" onclick="handleToastAction('view')">View</button>
                <button class="toast-action-btn" onclick="handleToastAction('dismiss')">Dismiss</button>
            `;
            
            showToast('info', {
                title: 'New Message',
                message: 'You have a new message from Sarah Johnson.',
                actions: actions
            });
        }

        function showConfirmToast() {
            const actions = `
                <button class="toast-action-btn" onclick="handleToastAction('confirm')">Confirm</button>
                <button class="toast-action-btn" onclick="handleToastAction('cancel')">Cancel</button>
            `;
            
            showToast('warning', {
                title: 'Confirm Action',
                message: 'Are you sure you want to delete this item?',
                actions: actions
            });
        }

        function handleToastAction(action) {
            console.log(`Action clicked: ${action}`);
            alert(`You clicked: ${action}`);
        }

        function changePosition() {
            const select = document.getElementById('positionSelect');
            const container = document.getElementById('toastContainer');
            
            // Remove all position classes
            container.className = 'toast-container';
            
            // Add selected position class
            container.classList.add(select.value);
        }

        function showMultipleToasts() {
            const types = ['success', 'info', 'warning', 'danger', 'dark'];
            types.forEach((type, index) => {
                setTimeout(() => {
                    showToast(type);
                }, index * 500);
            });
        }

        // Show welcome toast on page load
        window.addEventListener('load', () => {
            showToast('info', {
                title: 'Welcome!',
                message: 'Click the buttons below to see different toast notifications.',
                icon: 'hand-right'
            });
        });