Public
Likesundays
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v35View latest version
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).