Sundays in SF

A beautiful event management web app for Sundays in SF sessions, featuring live San Francisco sky gradient backgrounds and a whimsical Apple HIG-inspired design.

• Pre-Session Screen: Welcome message with WiFi QR code and session schedule
• Timer Screen: Create and run timers with animated sunrise-to-sundown gradient backgrounds
• Closeout Screen: Thank you message with QR codes for next session and Commons Public Hours
• Live Sky Gradients: Real-time San Francisco sky rendering using atmospheric scattering simulation

Configure these in your Val Town environment:

SUNDAYS_WIFI_SSID=your-wifi-network-name
SUNDAYS_WIFI_PASSWORD=your-wifi-password
SUNDAYS_NEXT_SESSION_URL=https://your-rsvp-link
SUNDAYS_COMMONS_URL=https://your-commons-link

Replace the placeholder in shared/types.ts:

export const ALARM_SOUNDS: AlarmSound[] = [
  {
    id: "mr-blue-sky",
    name: "Mr. Blue Sky",
    url: "YOUR_AUDIO_FILE_URL", // Replace PLACEHOLDER_URL with your hosted audio
  },
];

sundays/
├── backend/
│   └── index.http.ts          # Hono server with env var injection
├── frontend/
│   ├── components/
│   │   ├── App.tsx            # Main app shell with navigation
│   │   ├── PreSession.tsx     # Welcome screen
│   │   ├── TimerCreate.tsx    # Timer setup form
│   │   ├── TimerRunning.tsx   # Animated timer with gradient
│   │   └── Closeout.tsx       # Thank you screen
│   ├── hooks.ts               # Shared React hooks
│   ├── index.html             # HTML shell
│   ├── index.tsx              # React entry point
│   └── style.css              # Apple HIG design system
├── shared/
│   ├── gradient.ts            # Atmospheric scattering renderer
│   ├── utils.ts               # Vector math utilities
│   └── types.ts               # Shared TypeScript types
└── deno.json                  # Deno configuration

• Typography: SF Pro system font stack with fluid sizing
• Layout: Glass-morphism cards with generous whitespace
• Animation: Smooth transitions and staggered entrances
• Colors: Translucent white UI over live sky gradients
• Navigation: Floating pill-shaped segment control

Atmospheric rendering derived from "Production Sky Rendering" by Andrew Helmer (MIT License).