mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-04-30 01:29:07 -05:00
545 lines
19 KiB
HTML
545 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tiny Torch Events</title>
|
|
<link rel="icon" href="assets/flame.svg" type="image/svg+xml">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
background-color: #f0f4f8;
|
|
/* Graph Paper Grid Logic */
|
|
background-image:
|
|
linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
|
|
linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
color: #333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
margin-top: 100px; /* Space for menu button */
|
|
margin-bottom: 50px;
|
|
width: 95%;
|
|
max-width: 1200px;
|
|
background: #fff; /* Solid white background */
|
|
border: 1px solid #333;
|
|
box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
|
|
padding: 40px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
border-bottom: 2px dashed #333;
|
|
padding-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #ff6600;
|
|
font-weight: bold;
|
|
margin-bottom: 30px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Calendar Styles */
|
|
.calendar {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 1px;
|
|
background: #ccc; /* Grid lines */
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.calendar-header {
|
|
grid-column: span 7;
|
|
background: #333;
|
|
color: #fff;
|
|
padding: 15px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
letter-spacing: 1px;
|
|
display: flex; /* For buttons */
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-button {
|
|
background: none;
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 1.5em;
|
|
cursor: pointer;
|
|
padding: 0 10px;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-button:hover {
|
|
color: #ff6600;
|
|
}
|
|
|
|
.day-name {
|
|
background: #eee;
|
|
padding: 10px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.day {
|
|
background: #fff;
|
|
min-height: 100px;
|
|
padding: 5px;
|
|
position: relative;
|
|
transition: background 0.2s;
|
|
overflow: hidden; /* To prevent event text from spilling */
|
|
}
|
|
|
|
.day:hover {
|
|
background: #fffcf5;
|
|
}
|
|
|
|
.day-number {
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
margin-bottom: 5px;
|
|
color: #555;
|
|
}
|
|
|
|
.event-marker {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: 0.75rem;
|
|
background: #ffe0b2;
|
|
border-left: 3px solid #ff6600;
|
|
padding: 4px 6px;
|
|
cursor: pointer;
|
|
margin-bottom: 2px;
|
|
font-family: 'Verdana', sans-serif;
|
|
line-height: 1.2;
|
|
white-space: nowrap; /* Prevent wrapping in marker */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.event-marker.historical {
|
|
background: #e0f7fa;
|
|
border-left-color: #00bcd4;
|
|
}
|
|
|
|
.event-marker.community {
|
|
background: #dcedc8;
|
|
border-left-color: #8bc34a;
|
|
}
|
|
|
|
.other-month {
|
|
background-color: #f9f9f9;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Legend */
|
|
.legend {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
font-size: 0.8rem;
|
|
font-family: 'Verdana', sans-serif;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 2000;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal-content {
|
|
background: #fff;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
border: 2px solid #333;
|
|
box-shadow: 10px 10px 0px #ff6600;
|
|
padding: 30px;
|
|
position: relative;
|
|
animation: modalSlide 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes modalSlide {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 15px;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 15px;
|
|
color: #ff6600;
|
|
border-bottom: 2px dashed #eee;
|
|
padding-bottom: 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.modal-details {
|
|
font-family: 'Verdana', sans-serif;
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.modal-row {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.modal-label {
|
|
font-weight: bold;
|
|
color: #555;
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.show-more {
|
|
font-size: 0.7rem;
|
|
color: #ff6600;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
display: block;
|
|
margin-top: 2px;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.btn-google {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
background: #ff6600;
|
|
color: white !important;
|
|
padding: 12px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
margin-top: 25px;
|
|
border: 2px solid #333;
|
|
box-shadow: 4px 4px 0px #333;
|
|
transition: all 0.1s;
|
|
}
|
|
|
|
.btn-google:hover {
|
|
transform: translate(-2px, -2px);
|
|
box-shadow: 6px 6px 0px #333;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 700px) {
|
|
.day { min-height: 60px; }
|
|
.event-marker { font-size: 0.6rem; padding: 2px; }
|
|
.day-name { font-size: 0.6rem; padding: 5px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>Events Schedule</h1>
|
|
<div class="subtitle">COMMUNITY GATHERINGS & AI MILESTONES</div>
|
|
|
|
<div class="calendar">
|
|
<div class="calendar-header">
|
|
<button id="prevMonth" class="nav-button"><</button>
|
|
<span id="currentMonthYear"></span>
|
|
<button id="nextMonth" class="nav-button">></button>
|
|
</div>
|
|
|
|
<div class="day-name">SUN</div>
|
|
<div class="day-name">MON</div>
|
|
<div class="day-name">TUE</div>
|
|
<div class="day-name">WED</div>
|
|
<div class="day-name">THU</div>
|
|
<div class="day-name">FRI</div>
|
|
<div class="day-name">SAT</div>
|
|
|
|
<div id="calendar-body" style="display: contents;">
|
|
<!-- Days will be generated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div style="display: flex; gap: 20px;">
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #ff6600;"></div>
|
|
<span>General Events</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #00bcd4;"></div>
|
|
<span>Historical Dates</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #8bc34a;"></div>
|
|
<span>Community</span>
|
|
</div>
|
|
</div>
|
|
<a href="https://calendar.google.com/calendar/embed?src=a6a109f7e2da7b66503ca3cd8ed1bc18c9755c0cecb99897a3761731f5663852%40group.calendar.google.com&ctz=America%2FNew_York" target="_blank" class="btn-google" style="margin-top: 20px; width: auto; display: inline-block; padding: 10px 20px;">
|
|
VIEW FULL CALENDAR IN GOOGLE
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Event Detail Modal -->
|
|
<div id="eventModal" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<span class="modal-close" id="modalClose">×</span>
|
|
<div id="modalTitle" class="modal-title">Event Title</div>
|
|
<div class="modal-details">
|
|
<div class="modal-row">
|
|
<span class="modal-label">When</span>
|
|
<span id="modalWhen"></span>
|
|
</div>
|
|
<div class="modal-row" id="locationRow">
|
|
<span class="modal-label">Where</span>
|
|
<span id="modalWhere"></span>
|
|
</div>
|
|
<div class="modal-row" id="descriptionRow">
|
|
<span class="modal-label">Description</span>
|
|
<div id="modalDescription"></div>
|
|
</div>
|
|
<a id="modalLink" href="#" target="_blank" class="btn-google">OPEN IN GOOGLE CALENDAR</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
<script>
|
|
const monthNames = ["January", "February", "March", "April", "May", "June",
|
|
"July", "August", "September", "October", "November", "December"];
|
|
|
|
// Static historical or community events
|
|
const staticEvents = [
|
|
{ date: new Date(2025, 11, 1), description: 'Tiny Torch Community is born', type: 'community' },
|
|
{ date: new Date(2025, 11, 4), description: 'NeuralIPS 2025 Kickoff', type: 'general' },
|
|
{ date: new Date(2025, 11, 8), description: 'Tiny Torch merged with MLSYSBOOK.ai', type: 'community' },
|
|
{ date: new Date(2025, 11, 9), description: 'Tiny Torch official launch', type: 'community' },
|
|
{ date: new Date(2025, 11, 10), description: 'Ada Lovelace Birthday (1815)', type: 'historical' },
|
|
{ date: new Date(2025, 11, 17), description: 'MLSYSBOOK 10k GitHub Stars', type: 'community' },
|
|
{ date: new Date(2025, 11, 25), description: 'AI Winter Solstice', type: 'general' },
|
|
{ date: new Date(2022, 10, 30), description: 'ChatGPT Launched', type: 'historical' },
|
|
{ date: new Date(1956, 7, 1), description: 'Dartmouth Conference', type: 'historical' },
|
|
{ date: new Date(1997, 4, 11), description: 'Deep Blue vs Kasparov', type: 'historical' },
|
|
{ date: new Date(2016, 2, 9), description: 'AlphaGo vs Lee Sedol', type: 'historical' }
|
|
];
|
|
|
|
let fetchedEvents = [];
|
|
|
|
let today = new Date();
|
|
if (today.getFullYear() < 2026) {
|
|
today = new Date(2026, 1, 27);
|
|
}
|
|
|
|
let currentYear = today.getFullYear();
|
|
let currentMonth = today.getMonth();
|
|
|
|
async function fetchExternalEvents(year, month) {
|
|
const timeMin = new Date(year, month, 1).toISOString();
|
|
const timeMax = new Date(year, month + 1, 1).toISOString();
|
|
const url = `https://ai-engineering-home.vercel.app/api/calendar?timeMin=${timeMin}&timeMax=${timeMax}`;
|
|
|
|
try {
|
|
const response = await fetch(url);
|
|
if (!response.ok) throw new Error('API request failed');
|
|
const data = await response.json();
|
|
return (data.events || []).map(event => ({
|
|
date: new Date(event.start),
|
|
endDate: new Date(event.end),
|
|
description: event.summary,
|
|
fullDescription: event.description,
|
|
location: event.location,
|
|
type: 'general',
|
|
link: event.htmlLink
|
|
}));
|
|
} catch (error) {
|
|
console.error('Error fetching calendar events:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function openEventModal(event) {
|
|
const modal = document.getElementById('eventModal');
|
|
document.getElementById('modalTitle').textContent = event.description;
|
|
|
|
const startStr = event.date.toLocaleString([], { dateStyle: 'long', timeStyle: 'short' });
|
|
const endStr = event.endDate ? ' to ' + event.endDate.toLocaleTimeString([], { timeStyle: 'short' }) : '';
|
|
document.getElementById('modalWhen').textContent = startStr + endStr;
|
|
|
|
const locRow = document.getElementById('locationRow');
|
|
if (event.location) {
|
|
locRow.style.display = 'block';
|
|
document.getElementById('modalWhere').textContent = event.location;
|
|
} else {
|
|
locRow.style.display = 'none';
|
|
}
|
|
|
|
const descRow = document.getElementById('descriptionRow');
|
|
if (event.fullDescription) {
|
|
descRow.style.display = 'block';
|
|
document.getElementById('modalDescription').innerHTML = event.fullDescription.replace(/\n/g, '<br>');
|
|
} else {
|
|
descRow.style.display = 'none';
|
|
}
|
|
|
|
const linkBtn = document.getElementById('modalLink');
|
|
if (event.link) {
|
|
linkBtn.style.display = 'inline-block';
|
|
linkBtn.href = event.link;
|
|
} else {
|
|
linkBtn.style.display = 'none';
|
|
}
|
|
|
|
modal.style.display = 'flex';
|
|
}
|
|
|
|
function getDaysInMonth(year, month) {
|
|
return new Date(year, month + 1, 0).getDate();
|
|
}
|
|
|
|
function getFirstDayOfMonth(year, month) {
|
|
return new Date(year, month, 1).getDay();
|
|
}
|
|
|
|
async function renderCalendar() {
|
|
const currentMonthYearSpan = document.getElementById('currentMonthYear');
|
|
const calendarBody = document.getElementById('calendar-body');
|
|
|
|
currentMonthYearSpan.textContent = `${monthNames[currentMonth]} ${currentYear}`;
|
|
|
|
fetchedEvents = await fetchExternalEvents(currentYear, currentMonth);
|
|
|
|
calendarBody.innerHTML = '';
|
|
|
|
const daysInMonth = getDaysInMonth(currentYear, currentMonth);
|
|
const firstDay = getFirstDayOfMonth(currentYear, currentMonth);
|
|
|
|
const prevMonthDays = getDaysInMonth(currentYear, currentMonth - 1);
|
|
for (let i = 0; i < firstDay; i++) {
|
|
const dayDiv = document.createElement('div');
|
|
dayDiv.classList.add('day', 'other-month');
|
|
dayDiv.innerHTML = `<div class="day-number">${prevMonthDays - firstDay + i + 1}</div>`;
|
|
calendarBody.appendChild(dayDiv);
|
|
}
|
|
|
|
for (let i = 1; i <= daysInMonth; i++) {
|
|
const dayDiv = document.createElement('div');
|
|
dayDiv.classList.add('day');
|
|
dayDiv.innerHTML = `<div class="day-number">${i}</div>`;
|
|
|
|
const combinedEvents = [...staticEvents, ...fetchedEvents];
|
|
const dayEvents = combinedEvents.filter(event =>
|
|
event.date.getFullYear() === currentYear &&
|
|
event.date.getMonth() === currentMonth &&
|
|
event.date.getDate() === i
|
|
);
|
|
|
|
const maxVisible = 2;
|
|
dayEvents.slice(0, maxVisible).forEach(event => {
|
|
const eventMarker = document.createElement('div');
|
|
eventMarker.classList.add('event-marker');
|
|
eventMarker.textContent = event.description;
|
|
if (event.type) eventMarker.classList.add(event.type);
|
|
eventMarker.onclick = (e) => {
|
|
e.stopPropagation();
|
|
openEventModal(event);
|
|
};
|
|
dayDiv.appendChild(eventMarker);
|
|
});
|
|
|
|
if (dayEvents.length > maxVisible) {
|
|
const more = document.createElement('div');
|
|
more.classList.add('show-more');
|
|
more.textContent = `+ ${dayEvents.length - maxVisible} more`;
|
|
more.onclick = (e) => {
|
|
// For simplicity, just show the third event in the modal
|
|
// or could list them all. Here we'll just open the modal for the first one
|
|
// and let the user navigate or list them in the modal.
|
|
// Better: open the modal with a list if clicked "more".
|
|
// For now, let's just make the whole day clickable if there's more.
|
|
openEventModal(dayEvents[maxVisible]);
|
|
};
|
|
dayDiv.appendChild(more);
|
|
}
|
|
|
|
calendarBody.appendChild(dayDiv);
|
|
}
|
|
|
|
const totalDaysRendered = firstDay + daysInMonth;
|
|
const remainingCells = 42 - totalDaysRendered;
|
|
for (let i = 1; i <= remainingCells; i++) {
|
|
const dayDiv = document.createElement('div');
|
|
dayDiv.classList.add('day', 'other-month');
|
|
dayDiv.innerHTML = `<div class="day-number">${i}</div>`;
|
|
calendarBody.appendChild(dayDiv);
|
|
}
|
|
}
|
|
|
|
async function changeMonth(delta) {
|
|
currentMonth += delta;
|
|
if (currentMonth < 0) {
|
|
currentMonth = 11;
|
|
currentYear--;
|
|
} else if (currentMonth > 11) {
|
|
currentMonth = 0;
|
|
currentYear++;
|
|
}
|
|
await renderCalendar();
|
|
}
|
|
|
|
renderCalendar();
|
|
|
|
document.getElementById('prevMonth').addEventListener('click', () => changeMonth(-1));
|
|
document.getElementById('nextMonth').addEventListener('click', () => changeMonth(1));
|
|
document.getElementById('modalClose').addEventListener('click', () => {
|
|
document.getElementById('eventModal').style.display = 'none';
|
|
});
|
|
window.addEventListener('click', (e) => {
|
|
const modal = document.getElementById('eventModal');
|
|
if (e.target === modal) modal.style.display = 'none';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|