A stunning, responsive web application that displays calendar events in a beautiful list format with smooth animations and interactions. Built with a static-site approach using modern web technologies.

• 🎨 Beautiful Design: Clean, modern interface with smooth animations and transitions
• 📱 Responsive: Works perfectly on desktop, tablet, and mobile devices
• ⚡ Fast Loading: Events are pre-loaded and cached for instant display
• 🔄 Auto-Sync: Calendar data is automatically synced 3 times daily
• 🎭 Smooth Interactions: Expandable event details with beautiful animations
• 📅 Smart Formatting: Intelligent date/time formatting for all-day and timed events
• 🌐 Offline-First: Initial data is embedded for instant loading

1. /calendar-sync.ts - Cron job that fetches and parses ICS calendar data

   • Runs 3 times daily to keep events up-to-date
   • Parses Google Calendar ICS format
   • Stores events in blob storage
   • Filters out past events

2. /backend/index.ts - Hono-based API server

   • Serves the main HTML page with embedded event data
   • Provides /api/events endpoint for dynamic updates
   • Handles static file serving

3. /frontend/index.html - Main HTML template

   • Beautiful responsive design with Tailwind CSS
   • Custom animations and transitions
   • Loading, empty, and error states

4. /frontend/app.js - Frontend JavaScript application

   • Event rendering and interaction handling
   • Smooth expand/collapse animations
   • Smart date/time formatting
   • Responsive design adaptations

1. Sync Process: Cron job fetches ICS → Parses events → Stores in blob storage
2. Page Load: Backend embeds latest events → Frontend renders immediately
3. Interactions: JavaScript handles event expansion and animations
4. Updates: API endpoint provides fresh data when needed

interface CalendarEvent {
  id: string;           // Unique event identifier
  title: string;        // Event title/summary
  description: string;  // Event description (supports multi-line)
  startDate: string;    // ISO date string
  endDate: string;      // ISO date string
  location?: string;    // Event location (optional)
  url?: string;         // Event URL (optional)
}

• Framework: Tailwind CSS via CDN
• Fonts: Inter font family for clean typography
• Animations: Custom CSS transitions and keyframes
• Effects: Glass morphism, gradient backgrounds, hover effects
• Responsive: Mobile-first design with breakpoint adaptations

The site automatically syncs with a Google Calendar via ICS feed:

• Format: Standard ICS (iCalendar) format
• Frequency: 3 times daily via cron job
• Parsing: Custom ICS parser handles various date formats
• Filtering: Only shows upcoming events (today onwards)

• Instant Loading: Events embedded in initial HTML
• Smooth Animations: Hardware-accelerated CSS transitions
• Efficient Rendering: Minimal DOM manipulation
• Caching: Events cached in blob storage
• Error Handling: Graceful fallbacks for network issues

• Modern browsers with ES6+ support
• CSS Grid and Flexbox support
• Fetch API support
• CSS custom properties support

The site is automatically deployed on Val Town with:

• HTTP trigger for the main backend
• Cron trigger for calendar synchronization
• Blob storage for event data persistence

To customize the calendar source, update the calendarUrl in /calendar-sync.ts. The site supports any standard ICS calendar feed.