*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: linear-gradient(135deg, #1e1b4b, #312e81);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px 20px;
}
.calendar-scene {
display: flex;
align-items: center;
gap: 40px;
perspective: 1200px;
width: 100%;
max-width: 1000px;
}
.calendar-board {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 30px;
flex-grow: 1;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
transform: rotateY(15deg) rotateX(5deg);
transition: transform 0.5s ease;
}
.calendar-board:hover {
transform: rotateY(0deg) rotateX(0deg);
}
.board-header h2 {
color: #ffffff;
margin: 0 0 20px 0;
font-size: 2rem;
letter-spacing: 1px;
}
.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
color: #818cf8;
font-weight: 600;
margin-bottom: 16px;
}
.days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
}
.cal-day {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
aspect-ratio: 1 / 1;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cal-day:hover {
background: rgba(99, 102, 241, 0.8);
transform: scale(1.1) translateZ(20px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.cal-day.active {
background: #ffffff;
color: #312e81;
font-weight: 800;
transform: scale(1.1) translateZ(20px);
}
.event-panel {
width: 320px;
background: #ffffff;
border-radius: 24px;
padding: 30px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}
.event-panel h3 {
margin: 0 0 5px 0;
color: #1e1b4b;
font-size: 1.5rem;
}
#selected-date-text {
color: #6366f1;
font-weight: 600;
margin-top: 0;
margin-bottom: 30px;
}
.event-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 16px;
border-radius: 12px;
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
transition: transform 0.2s;
}
.event-card:hover {
transform: translateX(5px);
border-color: #cbd5e1;
}
.event-dot {
width: 12px;
height: 12px;
background: #6366f1;
border-radius: 50%;
margin-top: 4px;
}
.event-dot.green {
background: #10b981;
}
.event-card h4 {
margin: 0 0 4px 0;
color: #1e293b;
font-size: 1.05rem;
}
.time {
margin: 0;
color: #64748b;
font-size: 0.85rem;
}
@media (max-width: 900px) {
.calendar-scene {
flex-direction: column;
perspective: none;
}
.calendar-board {
transform: none;
}
.calendar-board:hover {
transform: none;
}
.event-panel {
width: 100%;
}
}
const grid = document.getElementById("days-grid");
const dateText = document.getElementById("selected-date-text");
/* Total days to generate */
const daysInMonth = 31;
/* Create an active tracking variable to manage state safely */
let currentlyActive = null;
for (let i = 1; i <= daysInMonth; i++) {
const dayBtn = document.createElement("div");
dayBtn.className = "cal-day";
dayBtn.innerText = i;
dayBtn.addEventListener("click", function() {
/* Clear previously active class */
if (currentlyActive !== null) {
currentlyActive.classList.remove("active");
}
/* Set new active class */
dayBtn.classList.add("active");
currentlyActive = dayBtn;
/* Update Panel Text */
dateText.innerText = "October " + i + ", 2026";
});
grid.appendChild(dayBtn);
}
/* Simulate clicking the 15th to show initial state */
setTimeout(function() {
const day15 = grid.children.item(14);
if (day15) {
day15.click();
}
}, 500);
