Conference Schedule
/* Reset and base */
* {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
background: #fdfdfd;
color: #333;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
background: linear-gradient(90deg, #3a8ee6, #36d1dc);
color: white;
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 4px 8px rgba(54, 209, 220, 0.3);
}
header h1 {
margin: 0;
font-weight: 700;
font-size: 2.5rem;
letter-spacing: 1px;
text-shadow: 1px 1px 4px rgba(0,0,0,0.15);
}
main {
max-width: 1000px;
margin: 2rem auto 4rem;
padding: 0 1.5rem;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 0.75rem;
}
.tab {
background: #e1eaff;
border-radius: 6px;
padding: 0.75rem 1.5rem;
cursor: pointer;
font-weight: 600;
color: #2e4a8e;
box-shadow: 0 2px 6px rgba(46, 74, 142, 0.15);
user-select: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.tab:hover {
background: #cddbff;
}
.tab.active {
background: #3a8ee6;
color: white;
box-shadow: 0 4px 12px rgba(58, 142, 230, 0.7);
}
table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-radius: 12px;
overflow: hidden;
background: white;
}
thead {
background: linear-gradient(90deg, #3a8ee6, #36d1dc);
color: white;
}
th, td {
padding: 1rem 1.25rem;
text-align: left;
}
tbody tr {
border-bottom: 1px solid #eaeaea;
transition: background-color 0.2s ease;
}
tbody tr:nth-child(even) {
background: #f9faff;
}
tbody tr:hover {
background: #d7e3ff;
}
caption {
caption-side: top;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #2e4a8e;
user-select: none;
text-align: center;
}
@media (max-width: 650px) {
th, td {
padding: 0.75rem 0.5rem;
font-size: 0.9rem;
}
.tab {
flex: 1 1 100%;
text-align: center;
}
}
Day 1
Day 2
Day 3
Day 4
(function() {
const scheduleData = {
day1: {
caption: "Day 1: Opening Day",
date: "2024-09-01",
sessions: [
{time: "09:00 - 09:30", title: "Registration & Welcome Coffee", speaker: "N/A", location: "Lobby"},
{time: "09:30 - 10:00", title: "Opening Keynote", speaker: "Dr. Jane Smith", location: "Main Hall"},
{time: "10:00 - 11:00", title: "Panel Discussion: Future Trends", speaker: "Various Experts", location: "Main Hall"},
{time: "11:00 - 11:15", title: "Coffee Break", speaker: "N/A", location: "Lobby"},
{time: "11:15 - 12:30", title: "Workshop: Innovation in Tech", speaker: "Mr. John Doe", location: "Room A"},
{time: "12:30 - 13:30", title: "Lunch", speaker: "N/A", location: "Dining Hall"},
{time: "13:30 - 15:00", title: "Breakout Sessions", speaker: "Various Speakers", location: "Room A, B, C"},
{time: "15:00 - 15:15", title: "Afternoon Break", speaker: "N/A", location: "Lobby"},
{time: "15:15 - 16:30", title: "Closing Session", speaker: "Dr. Emily Johnson", location: "Main Hall"},
{time: "16:30 - 18:00", title: "Networking Reception", speaker: "N/A", location: "Rooftop Garden"},
]
},
day2: {
caption: "Day 2: Workshops and Panels",
date: "2024-09-02",
sessions: [
{time: "09:00 - 10:30", title: "Workshop: Data Science", speaker: "Dr. Alan Turing", location: "Room A"},
{time: "10:30 - 10:45", title: "Coffee Break", speaker: "N/A", location: "Lobby"},
{time: "10:45 - 12:00", title: "Panel: Ethics in AI", speaker: "Various Experts", location: "Main Hall"},
{time: "12:00 - 13:00", title: "Lunch", speaker: "N/A", location: "Dining Hall"},
{time: "13:00 - 14:30", title: "Workshop: Cybersecurity", speaker: "Ms. Ada Lovelace", location: "Room B"},
{time: "14:30 - 15:00", title: "Break", speaker: "N/A", location: "Lobby"},
{time: "15:00 - 16:30", title: "Keynote: The Future of Work", speaker: "Mr. Elon Musk", location: "Main Hall"},
{time: "16:30 - 18:00", title: "Evening Social", speaker: "N/A", location: "Local Venue"},
]
},
day3: {
caption: "Day 3: Research Presentations",
date: "2024-09-03",
sessions: [
{time: "09:00 - 10:30", title: "Research Presentations", speaker: "Various Researchers", location: "Main Hall"},
{time: "10:30 - 10:45", title: "Coffee Break", speaker: "N/A", location: "Lobby"},
{time: "10:45 - 12:00", title: "Workshop: Machine Learning", speaker: "Dr. Grace Hopper", location: "Room C"},
{time: "12:00 - 13:00", title: "Lunch", speaker: "N/A", location: "Dining Hall"},
{time: "13:00 - 14:30", title: "Panel: Women in Tech", speaker: "Various Experts", location: "Main Hall"},
{time: "14:30 - 15:00", title: "Break", speaker: "N/A", location: "Lobby"},
{time: "15:00 - 16:30", title: "Closing Keynote", speaker: "Dr. Neil deGrasse Tyson", location: "Main Hall"},
{time: "16:30 - 18:00", title: "Networking Event", speaker: "N/A", location: "Rooftop Garden"},
]
},
day4: {
caption: "Day 4: Closing Day",
date: "2024-09-04",
sessions: [
{time: "09:00 - 10:30", title: "Workshop: Blockchain", speaker: "Mr. Vitalik Buterin", location: "Room A"},
{time: "10:30 - 10:45", title: "Coffee Break", speaker: "N/A", location: "Lobby"},
{time: "10:45 - 12:00", title: "Panel: The Impact of Technology", speaker: "Various Experts", location: "Main Hall"},
{time: "12:00 - 13:00", title: "Lunch", speaker: "N/A", location: "Dining Hall"},
{time: "13:00 - 14:30", title: "Final Thoughts & Reflections", speaker: "Dr. Jane Smith", location: "Main Hall"},
{time: "14:30 - 15:00", title: "Closing Remarks", speaker: "Conference Chair", location: "Main Hall"},
{time: "15:00 - 16:00", title: "Farewell Networking", speaker: "N/A", location: "Lobby"},
]
}
};
const tabs = document.querySelectorAll('.tab');
const scheduleContainer = document.getElementById('schedule-container');
function renderSchedule(dayKey) {
const day = scheduleData[dayKey];
if (!day) return;
const table = document.createElement('table');
const caption = document.createElement('caption');
caption.textContent = day.caption;
table.appendChild(caption);
const thead = document.createElement('thead');
thead.innerHTML = `
Time
Session Title
Speaker(s)
Location
`;
table.appendChild(thead);
const tbody = document.createElement('tbody');
day.sessions.forEach(session => {
const tr = document.createElement('tr');
tr.innerHTML = `
${session.time}
${session.title}
${session.speaker}
${session.location}
`;
tbody.appendChild(tr);
});
table.appendChild(tbody);
// Clear old content and insert new table
scheduleContainer.innerHTML = "";
scheduleContainer.appendChild(table);
}
function setActiveTab(selectedTab) {
tabs.forEach(tab => {
const isSelected = tab === selectedTab;
tab.classList.toggle('active', isSelected);
tab.setAttribute('aria-selected', isSelected ? 'true' : 'false');
tab.tabIndex = isSelected ? 0 : -1;
});
}
// Initialize with day1 schedule
renderSchedule('day1');
// Event listeners
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const dayKey = tab.id.replace('tab', 'day');
setActiveTab(tab);
renderSchedule(dayKey);
});
tab.addEventListener('keydown', e => {
const currentIndex = Array.from(tabs).indexOf(e.target);
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
e.preventDefault();
const nextIndex = (currentIndex + 1) % tabs.length;
tabs[nextIndex].focus();
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
tabs[prevIndex].focus();
} else if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
tabs[currentIndex].click();
}
});
});
})();
