mirror of
https://github.com/MLSysBook/TinyTorch.git
synced 2026-07-19 10:13:01 -05:00
331 lines
12 KiB
HTML
331 lines
12 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>
|
|
<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: rgba(255, 255, 255, 0.95);
|
|
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;
|
|
gap: 20px;
|
|
font-size: 0.8rem;
|
|
font-family: 'Verdana', sans-serif;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* 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 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>
|
|
</div>
|
|
|
|
<script src="layout.js"></script>
|
|
<script>
|
|
const monthNames = ["January", "February", "March", "April", "May", "June",
|
|
"July", "August", "September", "October", "November", "December"];
|
|
|
|
const allEvents = [
|
|
// December 2025 events (based on user's current context)
|
|
{ date: new Date(2025, 11, 1), description: 'TinyTorch CLI v1.2 Launch', type: 'community' },
|
|
{ date: new Date(2025, 11, 4), description: 'NeuralIPS 2025 Kickoff', type: 'general' },
|
|
{ date: new Date(2025, 11, 10), description: 'Ada Lovelace Birthday (1815)', type: 'historical' },
|
|
{ date: new Date(2025, 11, 17), description: 'MLYSYSBOOK.AI 10k Stars', type: 'community' },
|
|
{ date: new Date(2025, 11, 25), description: 'AI Winter Solstice', type: 'general' },
|
|
// Additional AI known dates (historical or general for other months)
|
|
{ date: new Date(2022, 10, 30), description: 'ChatGPT Launched', type: 'historical' }, // November 30, 2022
|
|
{ date: new Date(1956, 7, 1), description: 'Dartmouth Conference (Birth of AI)', type: 'historical' }, // August 1, 1956
|
|
{ date: new Date(1997, 4, 11), description: 'Deep Blue vs Garry Kasparov', type: 'historical' }, // May 11, 1997
|
|
{ date: new Date(2016, 2, 9), description: 'AlphaGo vs Lee Sedol', type: 'historical' }, // March 9, 2016
|
|
{ date: new Date(2025, 0, 15), description: 'Future AI Summit', type: 'general' }, // January 15, 2025
|
|
{ date: new Date(2025, 1, 20), description: 'Quantum AI Workshop', type: 'community' }, // February 20, 2025
|
|
{ date: new Date(2025, 8, 1), description: 'Generative AI Conference', type: 'general' }, // Sep 1, 2025
|
|
{ date: new Date(2025, 9, 26), description: 'AI Ethics Panel', type: 'community' } // Oct 26, 2025
|
|
];
|
|
|
|
let currentYear = 2025; // Initial year (from context: Dec 1, 2025)
|
|
let currentMonth = 11; // Initial month (December is 11)
|
|
|
|
function getDaysInMonth(year, month) {
|
|
return new Date(year, month + 1, 0).getDate();
|
|
}
|
|
|
|
function getFirstDayOfMonth(year, month) {
|
|
// 0 = Sunday, 1 = Monday, etc.
|
|
return new Date(year, month, 1).getDay();
|
|
}
|
|
|
|
function renderCalendar() {
|
|
const currentMonthYearSpan = document.getElementById('currentMonthYear');
|
|
const calendarBody = document.getElementById('calendar-body');
|
|
|
|
currentMonthYearSpan.textContent = `${monthNames[currentMonth]} ${currentYear}`;
|
|
calendarBody.innerHTML = ''; // Clear previous days
|
|
|
|
const daysInMonth = getDaysInMonth(currentYear, currentMonth);
|
|
const firstDay = getFirstDayOfMonth(currentYear, currentMonth); // 0 for Sunday, 1 for Monday
|
|
|
|
// Fill leading empty days (from previous month)
|
|
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);
|
|
}
|
|
|
|
// Fill current month days
|
|
for (let i = 1; i <= daysInMonth; i++) {
|
|
const dayDiv = document.createElement('div');
|
|
dayDiv.classList.add('day');
|
|
dayDiv.innerHTML = `<div class="day-number">${i}</div>`;
|
|
|
|
// Add events for this day
|
|
const dayEvents = allEvents.filter(event =>
|
|
event.date.getFullYear() === currentYear &&
|
|
event.date.getMonth() === currentMonth &&
|
|
event.date.getDate() === i
|
|
);
|
|
|
|
dayEvents.forEach(event => {
|
|
const eventMarker = document.createElement('div');
|
|
eventMarker.classList.add('event-marker');
|
|
eventMarker.textContent = event.description;
|
|
if (event.type) {
|
|
eventMarker.classList.add(event.type);
|
|
}
|
|
dayDiv.appendChild(eventMarker);
|
|
});
|
|
|
|
calendarBody.appendChild(dayDiv);
|
|
}
|
|
|
|
// Fill trailing empty days (from next month)
|
|
const totalDaysRendered = firstDay + daysInMonth;
|
|
const remainingCells = 42 - totalDaysRendered; // Max 6 rows * 7 days = 42 cells
|
|
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);
|
|
}
|
|
}
|
|
|
|
function changeMonth(delta) {
|
|
currentMonth += delta;
|
|
if (currentMonth < 0) {
|
|
currentMonth = 11;
|
|
currentYear--;
|
|
} else if (currentMonth > 11) {
|
|
currentMonth = 0;
|
|
currentYear++;
|
|
}
|
|
renderCalendar();
|
|
}
|
|
|
|
// Initial render
|
|
renderCalendar();
|
|
|
|
// Event listeners for navigation buttons
|
|
document.getElementById('prevMonth').addEventListener('click', () => changeMonth(-1));
|
|
document.getElementById('nextMonth').addEventListener('click', () => changeMonth(1));
|
|
|
|
</script>
|
|
</body>
|
|
</html> |