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 #0D1BA4; /* Updated color */
border-radius: 5px; /* Rounded corners */
padding: 20px;
max-width: 400px;
box-shadow: 0 0 5px 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: #0D1BA4; /* 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: 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-info-filled"></span>Information</p>
<p>The "<strong>Import-export mobility activities</strong>" section in projects was renamed to "<strong>Import-Export</strong>". The section is now displayed at the bottom of the Content menu. The relevant wiki pages 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('2024-04-04');
var endDate = new Date('2024-08-05');
// 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> |