Window Seat

Build Window Seat, a standalone world-time hangout planner in window-seat.html with inline HTML/CSS/JavaScript only. No packages, fetched images, maps, accounts, storage, calendars, messaging or external calls. Use native Intl.DateTimeFormat with IANA timezones. Runs in opaque iframe sandbox="allow-scripts"; notify parent with {type:'pls-demo-ready'} after initialization. Add viewport and restrictive inline-only CSP. All interaction is session-only.

DESIGN An optimistic airport window onto the world. Electric cobalt #183ecb, sky blue #c8def7, butter yellow #ffe692, dark navy #142044. Rounded system sans title 'Different places. Same moment.' large friendly type, white pill controls, three tall aircraft-window clock cards in a row on desktop, stacked on mobile. Each window contains a geometric sun/moon scene made with inline CSS/SVG, a 12-hour analog clock face with hands and a readable exact 24-hour digital time. Day scenes pale yellow, night scenes navy; sunrise/sunset shoulders light blue. Clock hands derive from local time. No live ticking or auto-animation. Compact flight-board style strip beneath windows shows the selected UTC moment and whether all three cities fall inside the preferred hours. Show local calendar dates, timezone abbreviations or GMT offsets supplied by Intl, and explicit 'In preferred hours'/'Outside preferred hours' labels; color never carries meaning alone.

INPUTS AND TIME CONTRACT Start date September 10, 2026, 16:00 UTC. A labeled UTC date native date input accepts only real YYYY-MM-DD dates from 2020-01-01 to 2035-12-31. Empty/invalid/out-of-range changes display an error, aria-invalid, retain last committed date and clock/report values; valid change commits and clears error. UTC time is a labeled range input 0..1425 step 15 minutes; initial 960. Provide Earlier (minus 15) and Later (plus 15) buttons, disabled at 0/1425, never wrap to another date. Time actions normalize any invalid pending date field to the committed date and clear its error. Show exact UTC HH:mm beside range. Dates/times are a selected moment, not the current time.

Three labeled city selects (City 1/2/3) use these options: Los Angeles (America/Los_Angeles), New York (America/New_York), London (Europe/London), Paris (Europe/Paris), Tokyo (Asia/Tokyo), Sydney (Australia/Sydney). Initial LA/London/Tokyo. Duplicate selections are allowed. Each select updates only its card plus global preferred-hours summary/report. Convert committed UTC timestamp with Intl.DateTimeFormat('en-GB', {timeZone, hourCycle:'h23', year:'numeric', month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit',timeZoneName:'short'}). Use formatToParts rather than parsing localized strings. Browser timezone must not affect calculation. Use UTC date creation deliberately, validate round trip, and rely on Intl for daylight saving; never hardcode city offsets. Display local date and previous day/next day when different from selected UTC date. Analog hour hand degrees=(hour%12)30+minute/2; minute hand=minute6. Mark 06:00–17:59 as daytime for illustration only, not astronomical sunrise data. Clock illustration aria-hidden; visible digital text gives full information.

Preferred hours are fixed 09:00 inclusive to 18:00 exclusive in each selected city. Show how many of the three are inside this window. Include Find overlap: examine 96 quarter-hour slots on the selected UTC date from 00:00 through 23:45, select the first slot where all three cities qualify. If none, leave selected time unchanged and announce 'No shared 09:00–18:00 slot on this UTC date. Try other cities.' Do not claim a later date or a calendar invitation. Also show buttons Atlantic (LA/New York/London) and Pacific (LA/Tokyo/Sydney) that replace all city selections but retain date/time. Reset trip restores original date/time/LA/London/Tokyo.

SHARE A labeled readonly Meeting note textarea contains Window Seat, selected UTC ISO moment, three city/local date/local 24h time/zone lines and the fixed preferred-hours rule. Copy note tries guarded Clipboard API, then guarded execCommand copy fallback, announces success only if copy succeeded, and restores button focus. Select note gives manual copy access. No sending, calendar integration, download or fake confirmation. Render user-facing dynamic strings as inert text. Footer: 'Session only. Preferred hours: 09:00–18:00. Daylight art is illustrative.'

VERIFY Accessible native controls, 44px targets, 16px inputs, clear focus, polite action feedback, stable focus on updates, no horizontal page overflow at 320/375/768/1440px and 200% root text, and no required motion. Initial Sep 10 16:00 UTC gives LA 09:00 same day, London 17:00 same day, Tokyo 01:00 Sep 11 and 2/3 preferred. At 00:00 UTC LA is Sep 9 17:00. Atlantic overlap first slot Sep 10 is 16:00 UTC. Original three have no overlap that date. Check Jan 15 16:00 UTC LA08/London16/Tokyo01 next day, and March 15 16:00 UTC LA09/London16 (different DST schedules). Check slider endpoints, invalid/empty dates, duplicate zones, presets, reset, export and copy fallback. Deliver working HTML and accurate verification notes.