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: 1px solid #ff0000; border-radius: 5px; /* Rounded corners */ padding: 20px; max-width: 400px; box-shadow: 0 0 10px 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: 14px; margin-bottom: 10px; color: #ff0000; display: flex; align-items: center; /* Center the icon vertically */ justify-content: space-between; /* Add space between the title and the close button */ } .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 { cursor: pointer; color: #888; font-size: 12px; font-weight: bold; border: none; background-color: transparent; } .message-box .close-button::before { content: "Close this message"; /* Add tooltip text */ visibility: hidden; opacity: 0; background-color: #000; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; top: -30px; /* Adjust the distance of the tooltip from the close button */ right: 0; white-space: nowrap; font-size: 12px; } .message-box .close-button:hover::before { visibility: visible; opacity: 1; } </style> <div id="message-box" class="message-box"> <p class="title"><span class="icon aui-icon aui-icon-small aui-iconfont-notification-all"></span>Data dictionaries and import export files <button class="close-button" onclick="closeMessageBox();" aria-label="Close">X</button> </p> <p>New <strong>Data dictionaries & templates for ESC51</strong> have been published on <strong>24/05/2024</strong>. Click <a class="link" href="https://wikis.ec.europa.eu/x/UINYAg">here</a> to access the latest files. </p> </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('2024-05-24');/* YYYY-MM-DD */ var endDate = new Date('2026-06-14');/* YYYY-MM-DD */ // 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> |