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: v26View 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).