PortalShell - Backend-Agnostic Client Portal

Most portal templates on marketplaces are really just another admin dashboard with the word "client" added to the title, and assume you'll hand-wire a specific backend or SaaS tool into every page before it's usable. PortalShell is built for the actual client-facing use case instead: project status, shared files, an invoice list, and a message thread, with one deliberate seam for real data instead of placeholders scattered across the markup.

The pack includes eight complete pages: Dashboard, Projects, Project detail (with milestones and files), Files (with real downloads), Messages, Invoices (with expandable itemized breakdowns), Settings, and Login. Every page's demo content is pulled from a single file, `assets/js/portalshell-data.js`, rather than copy-pasted across pages - each section is commented with the real API call it stands in for, so wiring in your own backend means editing one file, not hunting through markup.

Visually, PortalShell uses a calm, warm forest-teal and terracotta "Harbor" style on a textured parchment background, built specifically for showing to clients rather than for running your own internal ops - a deliberate departure from the typical dark, dense admin dashboard look. Data-backed stat rows on Project Detail and Invoices, plus a file-count-and-size summary on Files, mean pages summarize records instead of just listing them, and every status badge (paid, due, overdue, in progress, complete, blocked) pairs color with a text label so state is never color-only.

Features

- 8 complete pages: Dashboard, Projects, Project detail (milestones and files), Files (real downloads), Messages, Invoices (expandable itemized breakdowns), Settings, and Login - Every page's demo content comes from one file, `assets/js/portalshell-data.js`, each section commented with the real API call it stands in for - Calm, warm forest-teal and terracotta "Harbor" visual style on a textured parchment background, built for client-facing use rather than internal ops - Real data-backed stat rows on Project Detail (progress, milestones, files shared) and Invoices (total invoiced, paid, outstanding), plus a file summary on Files - Status badges (paid, due, overdue, in progress, complete, blocked) always pair color with a text label - Plain HTML, CSS, and JavaScript - no Node, no npm, no build step; fonts bundled locally, no live Google Fonts call - Built on Tailwind CSS and Alpine.js, both MIT licensed

Requirements

None beyond a modern browser. No PHP, no database, no framework.

Instructions

1. Unzip the download. 2. Open `src/index.html` in a browser, or deploy the `src/` folder to any static host (Netlify, Vercel, S3, your own server). Every page uses relative paths, so it works as-is, including opened directly from disk. 3. To wire in real data: edit `assets/js/portalshell-data.js` - replace the demo entries (projects, files, messages, invoices, recent activity) with your own, or connect each section to a real API call where the file's comments show one (e.g. `// replace with: GET /api/projects`). 4. To recolor: the "Harbor" palette ships pre-compiled in `assets/css/portalshell.css`. Find and replace the palette's hex values directly in that file (search by hex code, not class name). 5. To change nav: each HTML file repeats the shared sidebar and topbar markup directly (no templating layer), so add or remove nav items in that block on every page you want it to appear on. 6. Project detail is reached via `project-detail.html?id=p1` (etc.) - an invalid or missing `id` shows a "not found" state rather than a blank page. 7. Login goes straight to the dashboard on submit since there's no real authentication to demo - swap the one-line `onsubmit` handler (or add a real `action`/`method`) to wire up your own backend.