Announcement Bar For Web

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Promo Bar</title>
    <style>
        /* Wrapper to isolate the promo bar */
        .mmdc_promo_wrapper {
            position: relative;
            z-index: 9999;
        }

        /* Promo Bar Styling */
        .mmdc_promo_bar {
            background-color: #CEB57E;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: relative;
        }

        .mmdc_promo_bar a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
        }

        /* Divider Styling */
        .mmdc_divider {
            width: 1px;
            height: 20px;
            background-color: white;
            margin: 0 15px;
        }

        /* Coupon Box */
        .mmdc_code_box {
            display: flex;
            align-items: center;
            border: 1px solid white;
            padding: 5px 20px;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            position: relative;
            gap: 10px;
            min-width: 150px;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .mmdc_code_text {
            background: rgba(255, 255, 255, 0.2);
            padding: 5px 12px;
            border-radius: 4px;
            font-weight: bold;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mmdc_copy_button {
            border: none;
            color: white;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            background: none;
        }

        .mmdc_copy_icon {
            width: 16px;
            height: 16px;
            fill: white;
        }

        /* Changing Text Animation */
        .mmdc_dynamic_text {
            min-width: 220px;
            text-align: center;
            transition: opacity 0.5s ease-in-out;
            display: flex;
            justify-content: center;
        }

        /* Mobile Responsive Styles */
        @media (max-width: 768px) {
            .mmdc_promo_bar {
                flex-direction: column;   /* Stack items vertically */
                padding: 15px;
                text-align: center;
                gap: 10px;
            }

            .mmdc_code_box {
                width: 100%;
                max-width: 300px;   /* Center the coupon box */
                justify-content: center;
            }

            .mmdc_dynamic_text {
                width: 100%;
                text-align: center;
            }

            .mmdc_divider {
                display: none;   /* Hide dividers on mobile */
            }

            .mmdc_promo_bar a, 
            .mmdc_dynamic_text {
                font-size: 16px;   /* Increase font size for readability */
            }
        }
    </style>
</head>

<body>

<div class="mmdc_promo_wrapper">
    <div class="mmdc_promo_bar">
        
        <!-- Get 10% Off Text -->
        <a href="#">Get 10% Off →</a>
        
        <div class="mmdc_divider"></div>

        <!-- Coupon Box -->
        <div class="mmdc_code_box" onclick="mmdcCopyCode()">
            <span class="mmdc_code_text" id="mmdc_code_text">MMDC10</span>
            <a href="#" class="mmdc_copy_button">
                Get It
                <svg class="mmdc_copy_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M9 2H4a2 2 0 0 0-2 2v13h2V4h5V2zm11 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 16H8V8h12v14z"/>
                </svg>
            </a>
        </div>

        <div class="mmdc_divider"></div>

        <!-- Changing Text -->
        <a href="#" class="mmdc_dynamic_text" id="mmdc_dynamic_text">Official Site</a>

    </div>
</div>

<script>
    // Function to copy the coupon code
    function mmdcCopyCode() {
        let codeText = document.getElementById("mmdc_code_text");
        navigator.clipboard.writeText(codeText.innerText).then(() => {
            codeText.innerText = "Copied!";
            setTimeout(() => {
                codeText.innerText = "MMDC10";
            }, 1500);
        });
    }

    // Changing text every 3 seconds
    const textArray = ["Official Site", "Instant Access", "Lifetime Updates & Support"];
    let currentIndex = 0;

    function changeDynamicText() {
        const dynamicText = document.getElementById("mmdc_dynamic_text");
        dynamicText.style.opacity = "0";  // Fade out
        setTimeout(() => {
            currentIndex = (currentIndex + 1) % textArray.length;
            dynamicText.innerText = textArray[currentIndex];
            dynamicText.style.opacity = "1";  // Fade in
        }, 500);
    }

    setInterval(changeDynamicText, 3000);
</script>

</body>
</html>