Welcome
HTML |
---|
<style> /* Styles for the message box */ .message-box { position: fixed; top: 70px; /* Adjust the top position based on the height of your banner and search bar */ right: 20px; background-color: #fff; border: 2px solid #FF9F33; border-radius: 5px; /* Rounded corners */ padding: 20px; max-width: 400px; box-shadow: 0 0 epx rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; z-index: 9999; /* Adjust the z-index value */ } .message-box .title { font-weight: bold; font-size: 16px; margin-bottom: 10px; color: #FF9F33; display: flex; align-items: center; /* Center the icon vertically */ } .message-box .title .icon { margin-right: 5px; /* Add some spacing between the icon and the text */ } .message-box .link { color: #007bff; text-decoration: none; } .message-box .link:hover { text-decoration: underline; } .message-box .close-button { position: absolute; top: 10px; right: 10px; cursor: pointer; color: #888; font-size: 12px; font-weight: bold; border: none; background-color: transparent; } .message-box .close-button:focus, .message-box .close-button:hover { color: #1e9615; } /* Tooltip styles */ .message-box .close-button::before { content: "Close this message"; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); background-color: #ddd; color: #444; padding: 3px 6px; font-size: 7pt; border-radius: 3px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .message-box .close-button:hover::before { opacity: 1; visibility: visible; } </style> <div id="message-box" class="message-box"><p class="title"><span class="icon aui-icon aui-icon-small aui-iconfont-warning"></span>Take note</p> <p>This page is applicable for <strong>Erasmus+ Accreditations (KA120, KA150) & European Solidarity Corps (ESC50 - Quality Label)</strong>. The page will be updated shortly.</p> <button class="close-button" onclick="closeMessageBox();" aria-label="Close">×</button> </div> <script> function closeMessageBox() { document.getElementById("message-box").style.display = 'none'; } // Define the start and end dates for displaying the message var startDate = new Date('2023-06-01'); var endDate = new Date('2024-01-0830'); // Get the current date var currentDate = new Date(); // Show or hide the message box based on the current date if (currentDate >= startDate && (endDate === '' || currentDate <= new Date(endDate))) { document.getElementById("message-box").style.display = 'block'; } else { document.getElementById("message-box").style.display = 'none'; } </script> |