bootstrap 5 alert message bar snippet for top of page

<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>
      
    <!-- Alert Bars (Hidden by default) -->
    <div id="alertContainer"></div>

    <!-- Demo Content -->
    <div class="demo-content">
        <div class="container">
            <div class="demo-header">
                <h1>Alert Message Bar Demo</h1>
                <p>Click the buttons below to show different alert styles</p>
            </div>

            <div class="demo-buttons">
                <button class="demo-btn btn-info" onclick="showAlert('info')">
                    Show Info Alert
                </button>
                <button class="demo-btn btn-success" onclick="showAlert('success')">
                    Show Success Alert
                </button>
                <button class="demo-btn btn-warning" onclick="showAlert('warning')">
                    Show Warning Alert
                </button>
                <button class="demo-btn btn-danger" onclick="showAlert('danger')">
                    Show Danger Alert
                </button>
                <button class="demo-btn btn-dark" onclick="showAlert('dark')">
                    Show Dark Alert
                </button>
            </div>

            <!-- Example Content -->
            <div class="row mt-5">
                <div class="col-md-6 mx-auto">
                    <div class="card shadow-sm">
                        <div class="card-body p-4">
                            <h3>How to Use</h3>
                            <p>The alert bars appear at the top of the page with smooth animations. Each alert includes:</p>
                            <ul>
                                <li>Icon indicator (using Ionicons)</li>
                                <li>Message text with optional bold emphasis</li>
                                <li>Action button(s)</li>
                                <li>Close button with hover effect</li>
                            </ul>
                            <p class="mb-0">Click any button above to see the different alert styles in action!</p>
                        </div>
                    </div>
                </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 {
            margin: 0;
            padding: 0;
        }

        /* Alert Bar Styles */
        .alert-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            padding: 0;
            margin: 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            animation: slideDown 0.5s ease;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .alert-bar.alert-dismissing {
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from {
                transform: translateY(0);
                opacity: 1;
            }
            to {
                transform: translateY(-100%);
                opacity: 0;
            }
        }

        .alert-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            gap: 15px;
        }

        .alert-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

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

        .alert-message {
            font-size: 15px;
            font-weight: 400;
            line-height: 1.4;
            margin: 0;
        }

        .alert-message strong {
            font-weight: 700;
        }

        .alert-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .alert-btn {
            padding: 6px 18px;
            border-radius: 20px;
            font-weight: 500;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            white-space: nowrap;
        }

        .alert-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .alert-close {
            background: transparent;
            border: none;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .alert-close:hover {
            background: rgba(0,0,0,0.1);
            transform: rotate(90deg);
        }

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

        .alert-info .alert-btn {
            background: white;
            color: #667eea;
        }

        .alert-info .alert-btn:hover {
            background: #f8f9fa;
        }

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

        .alert-success .alert-btn {
            background: white;
            color: #43e97b;
        }

        .alert-success .alert-btn:hover {
            background: #f8f9fa;
        }

        /* Warning Alert */
        .alert-warning {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: #333;
        }

        .alert-warning .alert-btn {
            background: #333;
            color: white;
        }

        .alert-warning .alert-btn:hover {
            background: #222;
        }

        /* Danger Alert */
        .alert-danger {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .alert-danger .alert-btn {
            background: white;
            color: #f5576c;
        }

        .alert-danger .alert-btn:hover {
            background: #f8f9fa;
        }

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

        .alert-dark .alert-btn {
            background: white;
            color: #2c3e50;
        }

        .alert-dark .alert-btn:hover {
            background: #f8f9fa;
        }

        /* Demo Content */
        .demo-content {
            margin-top: 80px;
            padding: 40px 20px;
            min-height: 100vh;
            background: #f8f9fa;
        }

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

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

        .demo-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-top: 30px;
        }

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

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

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

        /* Responsive */
        @media (max-width: 768px) {
            .alert-content {
                flex-direction: column;
                align-items: flex-start;
                padding: 15px;
            }

            .alert-actions {
                width: 100%;
                justify-content: space-between;
            }

            .alert-message {
                font-size: 14px;
            }

            .alert-close {
                position: absolute;
                top: 10px;
                right: 10px;
            }
        }

    // Alert templates
        const alerts = {
            info: {
                icon: 'information-circle',
                message: '<strong>New Update Available!</strong> Check out our latest features and improvements.',
                button: 'Learn More',
                buttonIcon: 'arrow-forward'
            },
            success: {
                icon: 'checkmark-circle',
                message: '<strong>Success!</strong> Your changes have been saved successfully.',
                button: 'View Details',
                buttonIcon: 'eye'
            },
            warning: {
                icon: 'warning',
                message: '<strong>Scheduled Maintenance:</strong> System will be down for maintenance on Nov 5, 2025 from 2-4 AM.',
                button: 'More Info',
                buttonIcon: 'time'
            },
            danger: {
                icon: 'alert-circle',
                message: '<strong>Security Alert:</strong> We detected unusual activity on your account. Please verify your identity.',
                button: 'Verify Now',
                buttonIcon: 'shield-checkmark'
            },
            dark: {
                icon: 'megaphone',
                message: '<strong>Limited Time Offer!</strong> Get 50% off on all premium plans. Offer ends soon!',
                button: 'Claim Now',
                buttonIcon: 'gift'
            }
        };

        function showAlert(type) {
            // Remove existing alert if any
            const existingAlert = document.querySelector('.alert-bar');
            if (existingAlert) {
                closeAlert(existingAlert);
                setTimeout(() => createAlert(type), 300);
            } else {
                createAlert(type);
            }
        }

        function createAlert(type) {
            const alert = alerts[type];
            const alertHTML = `
                <div class="alert-bar alert-${type}" id="topAlert">
                    <div class="container">
                        <div class="alert-content">
                            <div class="alert-left">
                                <ion-icon name="${alert.icon}" class="alert-icon"></ion-icon>
                                <p class="alert-message">${alert.message}</p>
                            </div>
                            <div class="alert-actions">
                                <button class="alert-btn" onclick="handleAlertAction('${type}')">
                                    ${alert.button}
                                    <ion-icon name="${alert.buttonIcon}"></ion-icon>
                                </button>
                                <button class="alert-close" onclick="closeAlert(this.closest('.alert-bar'))" aria-label="Close">
                                    <ion-icon name="close"></ion-icon>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            document.getElementById('alertContainer').innerHTML = alertHTML;
        }

        function closeAlert(alertElement) {
            alertElement.classList.add('alert-dismissing');
            setTimeout(() => {
                alertElement.remove();
            }, 300);
        }

        function handleAlertAction(type) {
            alert(`Action button clicked for ${type} alert!`);
            // Add your custom action here
        }

        // Auto-dismiss after 10 seconds (optional)
        function autoDismiss() {
            const alertBar = document.querySelector('.alert-bar');
            if (alertBar) {
                setTimeout(() => {
                    closeAlert(alertBar);
                }, 10000);
            }
        }

        // Show initial info alert on page load
        window.addEventListener('load', () => {
            showAlert('info');
            autoDismiss();
        });