`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Time Grid</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
height: 100vh; /* Ensure it fills the screen */
}
.column {
flex: 1;
display: flex;
flex-direction: column;
}
ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
li {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
opacity: 0.3;
}
.highlight {
background-color: yellow;
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="column months">
<ul>
<!-- Months will be generated by JavaScript -->
</ul>
</div>
<div class="column weeks">
<ul>
<!-- Weeks will be generated by JavaScript -->
</ul>
</div>
<div class="column days">
<ul>
<!-- Days will be generated by JavaScript -->
</ul>
</div>
<div class="column hours">
<ul>
<!-- Hours will be generated by JavaScript -->
</ul>
</div>
</div>
<script>
function highlightTime() {
const now = new Date();
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const days = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
// Months
const monthList = document.querySelector('.months ul');
months.forEach((month, index) => {
const li = document.createElement('li');
li.textContent = month;
if (index === now.getMonth()) {
li.classList.add('highlight');
}
monthList.appendChild(li);
});
// Weeks
const weekList = document.querySelector('.weeks ul');
const currentWeekNumber = Math.ceil((now - new Date(now.getFullYear(), 0, 1)) / (7 * 24 * 60 * 60 * 1000));
for (let i = 1; i <= 52; i++) {
const li = document.createElement('li');
li.textContent = 'Week ' + i;
if (i === currentWeekNumber) {
li.classList.add('highlight');
}
weekList.appendChild(li);
}
// Days
const dayList = document.querySelector('.days ul');
days.forEach(day => {
const li = document.createElement('li');
li.textContent = day;
if (day === days[now.getDay()]) {
li.classList.add('highlight');
}
dayList.appendChild(li);
});
// Hours
const hourList = document.querySelector('.hours ul');
for (let i = 4; i <= 27; i++) {
const li = document.createElement('li');
li.textContent = ((i % 24 === 0 ? 24 : i % 24) - 1) + ':00';
if (i % 24 === (now.getHours() + 1) % 24) {
li.classList.add('highlight');
}
hourList.appendChild(li);
}
}
document.addEventListener('DOMContentLoaded', highlightTime);
</script>
</body>
</html>
`