Header Announcement #announcement #hook

si_announcement.php

function si_announce_functions() {
    if (!isset($_COOKIE['announcement_closed']) && !is_user_logged_in()) {
        ?>
        <div id="si-ann-main-" class="si-announce-main-div">
            <div class="si-announce-main si-container">
                <p class="cookie-announce-para">
					Become a local news contributor! <a class="si-announcement-link" href="/login/" target="_blank">Sign up for free</a> and start posting your events and news today.
                </p>
                <span class="close-btn-announce" onclick="hideAnnouncement()">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3184_7)">
<path d="M11.8323 10.0165L19.6199 2.22871C20.1267 1.72214 20.1267 0.903093 19.6199 0.396527C19.1133 -0.11004 18.2943 -0.11004 17.7877 0.396527L9.99989 8.18437L2.21228 0.396527C1.70548 -0.11004 0.88667 -0.11004 0.380103 0.396527C-0.126701 0.903093 -0.126701 1.72214 0.380103 2.22871L8.16771 10.0165L0.380103 17.8044C-0.126701 18.311 -0.126701 19.13 0.380103 19.6366C0.632556 19.8893 0.964493 20.0162 1.29619 20.0162C1.62789 20.0162 1.95959 19.8893 2.21228 19.6366L9.99989 11.8487L17.7877 19.6366C18.0404 19.8893 18.3721 20.0162 18.7038 20.0162C19.0355 20.0162 19.3672 19.8893 19.6199 19.6366C20.1267 19.13 20.1267 18.311 19.6199 17.8044L11.8323 10.0165Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3184_7">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
				</span>
            </div>
        </div>
   <style>
	#si-ann-main- {
		position: absolute;
		z-index: 99999;
		background-color: #111F46;
		width: 100%;
        box-sizing: border-box;
        animation: slideDown 0.5s ease-in-out;
	}
	.si-announce-main {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    z-index: 99999;
}
.cookie-announce-para {
    color: #fff;
   font-weight: 500;
	font-size:1.25rem;
    margin: 1.125rem 0;

}
 .si-announcement-link {
    color:#FED571;
	 text-decoration:none;
    font-weight: 500;
	font-size:1.25rem;
}
	   
@keyframes slideUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}   
  </style>
    <script>
function hideAnnouncement() {
    var announcement = document.getElementById('si-ann-main-');
    if (announcement) {
        announcement.style.animation = 'slideUp 0.5s forwards';

        announcement.addEventListener('animationend', function() {
            announcement.remove();
            document.cookie = 'announcement_closed=true; expires=0; path=/';
        });
    }
}

</script>
        <?php
    }
}
add_action('si_before_header_action', 'si_announce_functions');