CMS: Prism CMS
Theme: Material
Module Set: Extended
Date: 2026-04-06

## Prompt

Create a complete, self-contained single-file CMS administration panel in vanilla HTML/CSS/JS that mimics a real content management system. Use the Material Design 3 theme with the Extended module set (Dashboard, Posts, Pages, Categories, Tags, Media, Comments, Users). The CMS is named "Prism CMS" with tagline "Content, organized beautifully".

### Technical constraints
- Single `.html` file with all HTML, CSS, JS inline
- No external images — use CSS gradients, SVG inline, unicode/emoji, Canvas-drawn avatars only
- No CDN dependencies for core visuals (Google Fonts `@import` OK)
- No frameworks — vanilla JS only
- Static, no server-side logic, no fetch to external APIs
- State persists via `sessionStorage` only (key `cms_state`). Opening the same URL in two tabs yields two independent CMS instances
- Self-hostable as a static file

### Architecture
1. **State layer:** All CMS data serialized to `sessionStorage` as JSON with key `cms_state`. Seed data generated on first load.
2. **Router:** Hash‑based SPA (`#/dashboard`, `#/posts`, etc.). Listen to `hashchange`, parse routes, render matching view.
3. **Data model:** Entities with realistic relationships:
   - Post: id, title, slug, content, excerpt, status (draft/published/pending/trash), author_id, category_ids[], tag_ids[], featured_image_id, created_at, updated_at, published_at
   - Page: id, title, slug, content, template, parent_id, status, author_id, order, created_at, updated_at
   - Category: id, name, slug, parent_id, description
   - Tag: id, name, slug
   - Comment: id, post_id, author_name, author_email, content, status (approved/pending/spam/trash), created_at, parent_id
   - User: id, username, email, display_name, role (administrator/editor/author/subscriber), avatar_color, bio, created_at
   - Media: id, filename, alt, type (image/document/video), size_kb, width, height, uploaded_by, created_at
   - Settings: site_title, tagline, admin_email, timezone, date_format, posts_per_page, comments_enabled, registration_enabled, default_role
4. **Seed data:** On first load, populate with realistic quantities:
   - Posts: 15, mix of published, draft, pending, spanning 3 months, real‑sounding titles and multi‑paragraph content
   - Pages: 7, with hierarchy (Home, About, Contact, Services, Blog, Privacy Policy, Terms)
   - Categories: 10, 2‑3 levels of hierarchy
   - Tags: 18, realistic tag names, varied usage counts
   - Comments: 12, mix of approved/pending/spam, some threaded replies
   - Users: 5 (admin, editor, author, subscriber)
   - Media: 8 metadata records (no actual files)

### Visual theme — Material Design 3
- **Palette:** Surface #FFFBFE, Primary #6750A4, Primary Container #EADDFF, Secondary #625B71, Tertiary #7D5260, Error #B3261E, Outline #79747E, Surface Variant #E7E0EC
- **Sidebar:** Surface variant background, primary‑colored active item with rounded pill shape, ripple effect on click
- **Cards:** Elevated with box‑shadow, 12px border‑radius, surface fill
- **Buttons:** Filled (primary bg, white text, 20px radius), Outlined (border only), Text (no bg). Subtle hover elevation change
- **Tables:** Clean with thin bottom‑border rows, no vertical lines, header row in surface variant
- **Typography:** Inter font via Google Fonts. 14px body, 24px page titles, medium weight headings
- **Inputs:** Outlined variant — 4px radius, 1px border, label floats above on focus
- **Toasts:** Rounded snackbar at bottom‑center with action button
- **Special:** FAB for "Add New" on mobile; ripple click animation on interactive elements

### Module specifications

#### Dashboard (`#/dashboard`)
- **Stat cards:** Total Posts, Total Pages, Total Comments (pending count highlighted), Total Users
- **Recent Activity:** timeline of last 10 actions (avatar, action text, relative timestamp)
- **Quick Draft:** title input + content textarea + "Save Draft" button
- **At a Glance:** counts by status (Published, Drafts, Pending)
- **Pending Comments:** list of 3 most recent pending comments with Approve/Spam/Trash quick actions
- **Content Calendar:** mini‑calendar with dots on days with scheduled/published posts

#### Posts (`#/posts`, `#/posts/new`, `#/posts/edit/:id`)
- **List view:** Filter tabs (All/Published/Draft/Pending/Trash), search by title, sortable columns (Title, Date), pagination (10 per page), bulk actions, row hover actions (Edit/Quick Edit/Trash/View)
- **Editor view:** Large title input with slug auto‑generation, rich‑text editor (Bold, Italic, H2, H3, Link, UL, OL, Blockquote, Code), sidebar with Publish box (status dropdown, date picker), Categories checkboxes (hierarchical), Tags comma‑separated input with pills, Featured Image placeholder, Excerpt textarea, word count & reading time display, autosave indicator

#### Pages (`#/pages`, `#/pages/new`, `#/pages/edit/:id`)
- Similar to Posts but with Page Attributes sidebar (Template dropdown, Parent dropdown, Order input) instead of Categories/Tags

#### Categories (`#/categories`)
- Two‑panel layout: left "Add New Category" form (Name, Slug, Parent dropdown, Description), right table of existing categories with hierarchy indentation, inline editing, delete confirmation

#### Tags (`#/tags`)
- Two‑panel layout: left "Add New Tag" form (Name, Slug, Description), right table with toggle between table view and tag‑cloud visualization

#### Media (`#/media`)
- Grid/List toggle. Grid cards with file‑type SVG icon, colored border by type (image=blue, doc=green, video=purple). Upload simulation form (filename, alt text, type, dimensions, size). Detail side‑panel on click.

#### Comments (`#/comments`)
- Status tabs (All/Pending/Approved/Spam/Trash). Each comment card shows avatar (colored circle + initials), author name/email, "On: [Post Title]" link, truncated comment content, date, action links (Approve/Spam/Trash). Threaded replies (indentation). Bulk actions.

#### Users (`#/users`, `#/users/edit/:id`)
- Role filter tabs. Table with avatar, name, username, email, role badge, posts count. Edit view: display name, email, username (read‑only), role dropdown, bio textarea, avatar color picker, change password simulation. Cannot delete current user.

### Required interactions & polish
- **Optimistic updates:** UI updates instantly on save
- **Confirmation dialogs** before delete/destructive actions
- **Keyboard shortcuts:** Ctrl/Cmd+S to save, Escape to close modals, Enter to confirm dialogs
- **Unsaved changes warning** when navigating away from editor
- **Undo on delete:** toast with "Post moved to trash. Undo?" link
- **Empty states:** every list view has designed empty state with CTA
- **Loading skeletons:** brief shimmer on view transitions (200‑400ms delay)
- **Search/filter/sort/pagination** in all list views
- **Rich‑text editor** with contenteditable div and toolbar
- **Toast notifications** (success/error/warning/info) auto‑dismiss after 3‑4 seconds
- **Status badges** colored pills: Published (green), Draft (grey), Pending (yellow), Trash (red)
- **User avatars** colored circles with initials derived from display_name
- **Responsive:** sidebar collapses to hamburger below 768px, tables become cards on mobile
- **Accessibility:** semantic HTML, ARIA labels, focus management, skip‑to‑content link, color contrast meeting WCAG AA

### Admin realism touches
- CMS version number in footer: "Powered by Prism CMS v3.2.1"
- "Last backup: 2 hours ago" in footer
- Current user's name in top‑right avatar dropdown
- "You have N pending comments" in dashboard
- Activity log entries with relative timestamps
- Word count and reading time on post editor
- Slug auto‑generation with manual override
- Publish date picker defaults to now
- Fake post preview counts ("Viewed 1,247 times")
- "Screen Options" toggle in list views to show/hide table columns

### Deliverable
A single `index.html` file containing all HTML, CSS, and JavaScript, ready to run in any modern browser. No code trimming — write every line of each module fully.

## Notes
- Material theme is vibrant yet professional; uses tonal color system and elevation shadows.
- Extended module set provides best balance of impressiveness and feasibility.
- Seed content should feel like a real company blog: titles like "Introducing Our New Design System", "Q3 Engineering Retrospective", "How We Scaled to 1M Users".
- All code must be inline; no external scripts or stylesheets beyond Google Fonts import.
- Use `sessionStorage` not `localStorage` to ensure per‑tab independence.

## Seed Data Summary
- Posts: 15 (9 published, 3 draft, 3 pending)
- Pages: 7 (Home, About, Contact, Services, Blog, Privacy Policy, Terms) with parent‑child relationships
- Categories: 10 (Technology → AI → Machine Learning, Design → UI → UX, Company, Engineering, Product)
- Tags: 18 (javascript, react, vue, design‑system, scalability, performance, etc.)
- Comments: 12 (6 approved, 4 pending, 2 spam) with threaded replies
- Users: 5 (admin, editor, author, subscriber)
- Media: 8 (images, documents, video metadata)