feat: polished appointment booking UI for LinkedIn CTA

### Lineage `plan-pal-e-posts` → Phase 1 (gcal-scheduler Booking UI) ### Repo `forgejo_admin/gcal-scheduler` ### User Story As a LinkedIn visitor clicking the CTA link I want a polished, professional booking page at `gcal-scheduler.tail5b443a.ts.net` So that I can schedule an appointment with Lucas Draney without friction ### Context This is the CTA endpoint for LinkedIn posts by the DORA Elite AI Enterprise. The current `static/index.html` is a bare placeholder that just lists API endpoints. It needs to be replaced with a production-grade booking UI that: - Fetches available time slots from `GET /api/availability?start=...&end=...` - Lets visitors select a slot and submit their info via `POST /api/book` - Looks professional — this is the first impression for potential clients - Works great on mobile (LinkedIn traffic is mostly mobile) The API is already fully functional and deployed. This is frontend-only work. **API Details:** - `GET /api/availability?start={iso}&end={iso}` → `{slots: [{start, end}], timezone}` - `POST /api/book` body: `{visitor_name: str, visitor_email: str(email), start: str(iso), end: str(iso), note: str|null}` - `POST /api/book` response: `{event_id, summary, start, end, html_link}` - Max query range: 30 days. Max appointment duration: 1 hour. Must be in future. - Business hours and busy times are handled server-side. **Branding:** Pal-E Agency — DORA Elite AI Enterprise. Professional consulting aesthetic. ### File Targets Files to modify: - `static/index.html` — replace placeholder with polished booking UI (single-file HTML/CSS/JS or split into separate files) Files NOT to touch: - `src/gcal_scheduler/main.py` — no backend changes - `src/gcal_scheduler/calendar_service.py` — no backend changes - `k8s/` — no infrastructure changes - `Dockerfile` — no build changes ### Acceptance Criteria - [ ] Visit `https://gcal-scheduler.tail5b443a.ts.net` → see polished booking page (not placeholder) - [ ] Page fetches and displays available time slots for the next 7 days - [ ] Visitor can select a slot, enter name + email + optional note, and submit - [ ] On successful booking, visitor sees confirmation with appointment details - [ ] Page is responsive and looks great on mobile (375px), tablet (768px), and desktop (1280px) - [ ] Design passes the AI slop test — does NOT look like generic AI output - [ ] Error states handled gracefully (no slots available, booking conflict, API error) ### Test Expectations - [ ] Manual: open page in browser, verify slots load - [ ] Manual: test booking flow end-to-end (creates Google Calendar event) - [ ] Manual: test mobile viewport (375px width) - [ ] Manual: test error handling (what happens when no slots available) ### Constraints - Static HTML/CSS/JS only — no SvelteKit, no build tools, no npm - FastAPI serves `static/index.html` at `/` — file must stay at that path - Use Google Fonts for typography (loaded via CDN) - No external JS frameworks (vanilla JS or minimal library) - Must work without JavaScript disabled (progressive enhancement ideal but not required) - Use `/frontend-design` skill for design direction, `/audit` before PR, `/polish` after audit ### Checklist - [ ] PR opened - [ ] Design passes `/audit` check - [ ] Design passes `/polish` check - [ ] No backend changes - [ ] No unrelated changes ### Related - `pal-e-posts` — project this affects - `plan-pal-e-posts` — Phase 1

forgejo_admin commented

2026-03-14 22:38:28 +00:00

Contributor

Lineage

plan-pal-e-posts → Phase 1 (gcal-scheduler Booking UI)

Repo

forgejo_admin/gcal-scheduler

User Story

As a LinkedIn visitor clicking the CTA link
I want a polished, professional booking page at gcal-scheduler.tail5b443a.ts.net
So that I can schedule an appointment with Lucas Draney without friction

Context

This is the CTA endpoint for LinkedIn posts by the DORA Elite AI Enterprise. The current static/index.html is a bare placeholder that just lists API endpoints. It needs to be replaced with a production-grade booking UI that:

Fetches available time slots from GET /api/availability?start=...&end=...
Lets visitors select a slot and submit their info via POST /api/book
Looks professional — this is the first impression for potential clients
Works great on mobile (LinkedIn traffic is mostly mobile)

The API is already fully functional and deployed. This is frontend-only work.

API Details:

GET /api/availability?start={iso}&end={iso} → {slots: [{start, end}], timezone}
POST /api/book body: {visitor_name: str, visitor_email: str(email), start: str(iso), end: str(iso), note: str|null}
POST /api/book response: {event_id, summary, start, end, html_link}
Max query range: 30 days. Max appointment duration: 1 hour. Must be in future.
Business hours and busy times are handled server-side.

Branding: Pal-E Agency — DORA Elite AI Enterprise. Professional consulting aesthetic.

File Targets

Files to modify:

static/index.html — replace placeholder with polished booking UI (single-file HTML/CSS/JS or split into separate files)

Files NOT to touch:

src/gcal_scheduler/main.py — no backend changes
src/gcal_scheduler/calendar_service.py — no backend changes
k8s/ — no infrastructure changes
Dockerfile — no build changes

Acceptance Criteria

Visit https://gcal-scheduler.tail5b443a.ts.net → see polished booking page (not placeholder)
Page fetches and displays available time slots for the next 7 days
Visitor can select a slot, enter name + email + optional note, and submit
On successful booking, visitor sees confirmation with appointment details
Page is responsive and looks great on mobile (375px), tablet (768px), and desktop (1280px)
Design passes the AI slop test — does NOT look like generic AI output
Error states handled gracefully (no slots available, booking conflict, API error)

Test Expectations

Manual: open page in browser, verify slots load
Manual: test booking flow end-to-end (creates Google Calendar event)
Manual: test mobile viewport (375px width)
Manual: test error handling (what happens when no slots available)

Constraints

Static HTML/CSS/JS only — no SvelteKit, no build tools, no npm
FastAPI serves static/index.html at / — file must stay at that path
Use Google Fonts for typography (loaded via CDN)
No external JS frameworks (vanilla JS or minimal library)
Must work without JavaScript disabled (progressive enhancement ideal but not required)
Use /frontend-design skill for design direction, /audit before PR, /polish after audit