Announcement bar For Mobile

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Promo Bar</title>
    <style>
        /* Mobil versiyon için genel stil */
        .mmdc_mobile_promo_wrapper {
            position: relative;
            z-index: 9999;
            text-align: center;
            background-color: #CEB57E;
            color: white;
            padding: 12px;
            font-size: 14px;
            text-transform: uppercase;
            font-weight: bold;
        }

        .mmdc_mobile_promo_wrapper a {
            color: white;
            text-decoration: none;
            cursor: pointer;
        }

        /* Kupon kutusu ilk başta gizli */
        .mmdc_mobile_coupon_box {
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            background: rgba(0, 0, 0, 0.8);
            padding: 12px;
            border-radius: 6px;
            width: 90%;
            max-width: 250px;
            position: absolute;
            left: 50%;
            top: 50px;
            transform: translateX(-50%);
            z-index: 10000;
        }

        /* Kupon kodu */
        .mmdc_mobile_code {
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 15px;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
        }

        /* "Get It" butonu */
        .mmdc_mobile_getit_button {
            border: none;
            background: white;
            color: #CEB57E;
            padding: 8px 15px;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* Yeni kopyalama ikonu sağda */
        .mmdc_mobile_copy_icon {
            width: 16px;
            height: 16px;
            fill: #CEB57E;
        }
    </style>
</head>
<body>

    <!-- Mobil için promo bar -->
    <div class="mmdc_mobile_promo_wrapper">
        <a href="#" id="mmdc_mobile_trigger">Get 10% Off →</a>
    </div>

    <!-- Kupon Kutusu (İlk başta gizli) -->
    <div class="mmdc_mobile_coupon_box" id="mmdc_mobile_coupon">
        <span class="mmdc_mobile_code" id="mmdc_mobile_code_text" onclick="mmdcMobileCopyCode()">MMDC10</span>
        <button class="mmdc_mobile_getit_button" onclick="mmdcMobileCopyCode()">
            Get It
            <svg class="mmdc_mobile_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>
        </button>
    </div>

    <script>
        function mmdcMobileCopyCode() {
            let codeText = document.getElementById("mmdc_mobile_code_text");
            navigator.clipboard.writeText(codeText.innerText).then(() => {
                codeText.innerText = "Copied!";
                setTimeout(() => {
                    codeText.innerText = "MMDC10";
                }, 1500);
            });
        }

        // Kupon kutusunu aç/kapat
        document.getElementById("mmdc_mobile_trigger").addEventListener("click", function(event) {
            event.preventDefault();
            let couponBox = document.getElementById("mmdc_mobile_coupon");
            if (couponBox.style.display === "none" || couponBox.style.display === "") {
                couponBox.style.display = "flex";
            } else {
                couponBox.style.display = "none";
            }
        });
    </script>

</body>
</html>