Project Management Dashboard Website Template

Quick Start

Static files, no build step. Serve the folder with any static server and open index.html:

Code snippet omitted: it ships with the download.

Each page loads, in this order:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

• Colour is two token blocks at the top of assets/style.css: dark under :root, :root[data-theme="dark"] and light under :root[data-theme="light"], with the same names. --signal is the section labels, primary button and selection; --green, --amber, --cyan, --violet and --rose are the five work hues, each with an -rgb triple and a -text partner for type.
• The chrome never takes colour. Shell, ground, surface and ink carry the interface; colour is reserved for scopes, projects, statuses and labels. Keep that rule and any palette works.
• Brand: replace the i-mark symbol in the SVG sprite at the top of each page, the favicon in each head, and the workspace name in the sidebar.
• Type: Albert Sans for everything (the project title is weight 900) and Spline Sans Mono for ids, dates and keys. Swap the two @font-face rules and the --font and --mono tokens.
• Theme default: the visitor's system setting (light or dark) until they use the toggle, which is then remembered in localStorage. A system change while the page is open is followed too. To force one theme for everyone, set it in the first head script on each page. Without JavaScript the page shows the dark theme.
• Controls that need JavaScript carry data-js-only and are hidden on a plain document.

Pages and Configuration

Shared shell

A sidebar (workspace menu, search, new issue, Home, Inbox, My issues, projects with coloured glyphs, views) with aria-current="page" on the current link, collapsible to icons with the button at its foot or [; it starts collapsed between 768px and 1099px. A top bar holds breadcrumbs, search and the theme toggle. On phones the sidebar gives way to a bottom tab bar and a More sheet listing every page. A footer links every page so the site works without JavaScript. Copy these blocks between pages and move aria-current.

Re-pointing the data

1. ISSUES at the top of assets/script.js (with PEOPLE, PROJECTS, STATUSES, PRIORITIES): the issue detail page, command menu search and inbox preview read it. Each issue has id, title, status, priority, assignee, project, optional scope, labels, due (ISO date), estimate, desc (paragraphs), subtasks ([text, done]) and activity ({ type: 'event' | 'comment', who, text, when }).
2. Issue rows in issues.html: li[data-issue] with data-id, data-status, data-priority, data-assignee and data-project. Render the same markup from your API; filters, grouping, counts and the board work on whatever rows exist.
3. Hill scopes, timeline bars and inbox notes live in their pages' markup (below).

Front end only

Nothing is sent or saved. New issues, comments, status, priority and assignee changes, board drags, bulk moves, timeline edits, hill positions, inbox archive and snooze all update the page and are gone on reload. Each change passes through one function in the script (moved on the board, commit in the hill chart and the timeline, remove in the inbox, the [data-set] handler on the issue page, the [data-new-form] submit), which is where a call to your backend belongs.

Hill chart

[data-hill] with data-weeks="21 Sep,28 Sep,..." (oldest first, the last is now). Each scope is a button.hill__dot with data-scope (a key), data-hue (one of the five hues), data-history (one position per week, 0 to 100) and a .hill__label holding its name. Past 50 a scope is downhill and its ring fills. Inline left and top on each button are the no-JavaScript positions; the script recalculates them. The compare control is [data-hill-week], a native range input whose max is the number of weeks minus one. The to-do groups in [data-todos] match scopes by data-scope and re-order by hill position after each move. Drag on the curve, or Left and Right (Shift for 10) on a focused dot.

Issues

[data-issues] holds the list. The List and Board buttons are [data-view]; chips are [data-filter] (mine, high, or project:<key>); the group menu items are [data-group-by]. In the board view, cards drag by pointer (touch needs a short hold so swipes still scroll), or with the keyboard on their [data-grip] button: Space lifts, arrows move between columns and positions, Space drops, Escape cancels. Tick rows in the list to bulk move them from the bar at the bottom.

Issue detail

[data-issue-page] with slots ([data-doc-title], [data-doc-desc], [data-subs-list], [data-feed], [data-prop="status"] and so on) filled from ISSUES by ?i=. The previous and next links are real links, so the page also works without JavaScript. J, K and the up and down arrows move between issues; Cmd or Ctrl Enter posts a comment.

Timeline

[data-gantt] with data-start (ISO date) and data-days. Each bar is button[data-task] with --s (start day) and --d (length in days) in its style and data-deps naming the tasks it depends on. Milestones are .gms with --s; the today line is .gtoday with --s. Zoom levels are the ZOOM object in initGantt (pixels per day). Drag the middle of a bar to move it and either end to resize; Left and Right move a day, Shift with them changes the length.

Inbox

[data-inbox] with li[data-note] rows (data-kind is mention, comment, assigned, status or due; data-issue-id links the issue). J and K move, E archives, S snoozes, U toggles unread, Enter opens the issue; archive and snooze offer Undo. Below 900px the preview opens as a sheet.

Account menu and settings

The sidebar foot is a button ([data-menu="account-menu"]) opening #account-menu: name, email and role, Profile, the Appearance radio group, Keyboard shortcuts, Settings and Sign out. Collapsed, it shows the avatar alone; on phones it opens from the More sheet. settings.html is [data-settings]: the profile form ([data-profile-form]) shows [data-savebar] as soon as a field or the photo differs and updates [data-preview-*] as you type; Save writes the name and photo into the shell. Notifications rows are [data-notif-row] with a switch and a channel select. Members are li[data-member] with [data-role-select] and [data-remove-member] (confirmed in #remove-member, with Undo); the invite form [data-invite] validates the address, refuses one already in the list, and adds a pending row with Revoke. Nothing is saved.

Command menu and shortcuts

Cmd K or Ctrl K, or any [data-cmd-open] button. Pages and actions are listed in initCommandMenu; issues come from ISSUES. ? opens the shortcuts dialog, C opens New issue, [ collapses the sidebar.

Components

Every feature returns early when its markup is missing, so any page, tile or section can be removed.

Palette

Measured contrast pairs for both themes are in the token comments at the top of assets/style.css.

Images

Photos are bundled as art-directed WebP derivatives in assets/img/, cropped and graded from the originals listed in assets/img-manifest.json. To replace one, drop a WebP of the same name and size into assets/img/, or edit the manifest and regenerate (bun scripts/build-template-assets.ts project-management-template in the GSAP Vault repository). The booking screen and printed timetable in Docs and files are drawn in HTML and CSS (.art--ui, .art--tt).

Pexels photos are used under the Pexels licence and Unsplash photos under the Unsplash licence; both allow free use and modification. The people pictured are stock models; the names and roles are fictional.

Accessibility

• Every hill scope is a native button with its name, position and phase in its label; arrow keys move it and a live region announces the new position.
• Board cards move by keyboard through their grip buttons, with announcements for each step; timeline bars move and resize with the arrow keys and announce their dates.
• Menus, dialogs, the More sheet, the inbox sheet and the command menu trap focus, close on Escape and return focus to their trigger.
• Focus rings show only for keyboard use. Every text pair is measured at 4.5:1 or better in both themes.
• Reduced motion keeps every interaction and changes values instantly. Without JavaScript, every page reads at rest, the hill chart shows its current positions and the footer reaches every page.

Dependencies

• GSAP core, plus Flip on the project, issues, inbox and components pages. Demo built against 3.15.0; works with 3.12+. Everything still works without GSAP, just without movement.
• Albert Sans and Spline Sans Mono, self-hosted in assets/fonts/ (variable, latin). SIL Open Font License; see assets/fonts/OFL.txt.
• No Lenis: app screens scroll natively, and the board, timeline and to-do list are ordinary nested scrollers.

Teardown

The script records every tween in one GSAP context and every listener in one list. window.rookery.destroy() reverts the tweens and removes the listeners; it also runs on pagehide. window.rookery also exposes toast(message), the overlay layer stack, the hills (each with setWeek(i) and onChange(fn)) and openCommandMenu().