Noon

Find the hour your whole team shares. A calendar, team availability across timezones, and tasks, in one static app.

Files

• index.html — the shell: sidebar, the four views (Calendar, Team, Tasks, Projects), inbox, event panel, dialogs.
• css/app.css — styles. Dark frame and sidebar, white working panel, pastel event colours; dark theme via data-theme.
• js/tz.js — timezone data and search (cities, countries, codes like CET, offsets like UTC+2).
• js/core.js — time math, state (localStorage key noon.v1), availability (status, free windows, warnings), tasks, inbox, calendar links.
• js/app.js — everything on screen. The calendar week is one row per day with the hours across; overlapping things stack into lanes, the visible hours follow your online block and what is booked (at least 72px an hour, anything outside shows as an "earlier"/"later" marker), the day view is that row plus the day as a list with the free stretches you can book, and the month is a grid. The date strip above the grid is the only navigator (chevrons at its ends, Today caption on today's card, a quiet Today button only when today is off screen).
• js/projects.js — Projects: a project is a stack of versions. Every HTML file you upload is the next version (v1, v2, …), a new version starts with no comments. Open a version at desktop, tablet or phone width and click anywhere on the page to pin a comment to that element (replies, resolve, make a task). Compare with… on any version opens it on one side with the other side empty; pick any version for it, close either side and pick another, in either order. Both sides scroll together, and for each comment on the lower version it tells you how the higher one answers it (text changed with before/after, looks different, unchanged, element gone); click one to jump both frames to that spot, resolve it on the lower version or carry it to the higher one. Comments only ever carry upward, never to a lower version. Files (pages and the images, styles and scripts dropped with them) live in IndexedDB (noon-files); a lone HTML file reuses the previous version's files. The project list and comments ride on the team like tasks do; signed-in teams sync them to Supabase (rows in projects, versions, version_comments, version_replies, files in the private project-files bucket under <team>/<project>/<version>/<path>). Each version can be downloaded again, as the HTML file or as a zip with the files that came with it.
• js/welcome.js — the first run after signing in: name, timezone and hours, then a team and its invite link. Someone who came through an invite skips the team: their account starts in no team, and the invite waits in their inbox until they accept or decline it. It shows once per account (profiles.prefs.onboarded).
• js/sync.js — accounts and sync with Supabase. Noon needs an account: signed out, it shows the sign-in screen (email and password, an emailed link, or Google once that provider is on in Supabase). Teams mirror to the database, projects included, with the client-link fields and the element snapshot on each comment.
• js/share.js — client links, one per version. Share, on a version, turns on a link (?share=<token>). Whoever opens it gets that one version and nothing else: the page, the comments on the link, and their own comments and replies under a name they type, with no account. The app boots in a sandbox for it (nothing saved in that browser's Noon), and every read and write goes through the share_* functions in Supabase, which check the link each time. Comments come in two layers: the team's, in the app, and the client link's. Anyone on the link sees only the link's layer, whoever left it (a teammate who opens the link comments there too); in the app each version's comments have a Team / Client link switch, and posting or replying in Client link is visible on the link. Numbers count per layer. Turning the link off, or making a new one, stops the old link at once.
• js/connector.js — Settings › Claude: personal keys for the Claude connector. A key is shown once; only its SHA-256 is stored (api_tokens).
• supabase/functions/noon-mcp/index.ts — the Claude connector, a remote MCP server deployed as the Supabase Edge Function noon-mcp (https://boielhshrswqdqkxiupz.supabase.co/functions/v1/noon-mcp, JWT check off: it checks the Noon key itself). Tools: list_projects, get_project, get_version (full HTML, files, comments with selector, element snapshot and width, team comments as #1, #2 and client-link comments as C1, C2), get_comments, upload_version (next version, previous files carried over, optional resolve + reply), resolve_comments, reply_to_comment. Optional secret NOON_APP_URL adds links back into the app.
• supabase/schema.sql — the database schema, the migrations folded in. supabase/2026-10-27-event-location-kind.sql (place and kind on a meeting) and supabase/2026-10-27-projects.sql (projects, versions, comments, replies, the project-files bucket) are applied to the Timezoneapp project, and so are supabase/2026-10-27-share-and-connector.sql (client links, guest comment functions, the shared-file read rule, api_tokens) supabase/2026-10-27-comment-layers.sql (version_comments.layer: team or client, and the link functions limited to the client layer) and supabase/2026-10-28-version-links.sql (the link moves to versions.share_on/share_token, the link functions see only that version, and only its files are readable). supabase/2026-10-28-team-requests.sql (an invite link or an email seat becomes a request in team_invites, answered with invite_answer; pasting a link in Settings still joins at once) is applied too. The app checks for the tables at sign-in and works without them.
• legacy/noon-v1.html — the previous single-file build, kept for reference.
• ref/ — the design reference and preview captures.

Run locally

Any static server works, for example:

python -m http.server 4380

Address hooks, handy for screenshots: ?view=team|tasks|projects|calendar, ?proj=first opens the first project (or ?proj=<id>&ver=<n> any project, which is what the link button in a project copies), &ver=first|last a version in the viewer, &mode=compare the side-by-side, ?cal=week|month|day, ?theme=dark, ?pop=new, ?task=first, ?inbox=1, ?dlg=settings|member|auth|invite.