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: 2px1px solid red; /* Updated color */ border-radius: 5px; /* Rounded corners */ padding: 20px; max-width: 400px; box-shadow: 0 0 3px 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: red; /* Updated color */ 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: 7px; 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-error"></span>Mobility Import Export in KA1-YOU Limitations</p> <p>The <strong>import and export of mobility activities in KA151, KA152, KA153 and KA154 projects is now available for call years 2021, 2022 and 2023</strong>, but with limitations. Click <a class="link" href="https://wikis.ec.europa.eu/x/bwPtBQ"><strong>here</strong></a> to access the details.</p> <button class="close-button" onclick="closeMessageBox();" aria-label="Close">×<>X</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('2023-08-30'); // 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> |