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

## Prompt

Create a make-believe WordPress-like CMS admin panel called "Prism CMS" in a single HTML file. Material design theme with a clean blue-grey palette, subtle shadows, and smooth transitions.

Module set: Extended (Dashboard, Posts, Pages, Categories, Tags, Media, Comments, Users).

Technical constraints:
- Single `.html` file with all HTML, CSS, JS inline
- No external images — CSS gradients, inline SVG, unicode/emoji, Canvas-drawn avatars only
- No CDN dependencies for core visuals (Google Fonts @import OK)
- No frameworks — vanilla JS only
- sessionStorage only for state persistence
- Hash-based SPA routing

Data model:
- 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, 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

Seed data: 12 posts (mixed statuses, spanning 3 months), 6 pages (hierarchical), 10 categories (2-3 levels), 15 tags, 10 comments (threaded), 4 users (admin/editor/author/subscriber), 8 media items. Content should feel like a real tech company blog.

UI requirements:
- Collapsible sidebar with icons and labels, fixed top bar with search, notification bell, user avatar dropdown
- Dashboard with stat cards (posts, pages, comments, users) with trend indicators, recent activity log, quick draft widget
- Data tables with sortable columns, row hover, checkbox bulk select, pagination, empty states
- Rich text editor (contenteditable) with toolbar: Bold, Italic, H2, H3, Link, UL, OL, Blockquote, Code
- Toast notifications (success/error/warning/info), confirmation modals, status badges
- User avatars as colored circles with initials
- Slug auto-generation from title, word count, reading time in editor
- Loading skeleton shimmer on view transitions
- Keyboard shortcuts: Ctrl/Cmd+S to save, Escape to close modals
- Responsive: sidebar collapses below 768px, tables become cards on mobile
- Accessibility: semantic HTML, ARIA labels, focus management, prefers-reduced-motion
- Footer: "Powered by Prism CMS v3.2.1" and "Last backup: 2 hours ago"

## Notes

- Material theme: #1976D2 primary, #424242 sidebar, #FAFAFA background, elevation shadows
- Extended module set chosen for balanced demo coverage
- All CRUD operations optimistic with undo on delete
- Inline editing for categories and tags

## Seed Data Summary

| Entity     | Count | Notes                                         |
|------------|-------|-----------------------------------------------|
| Posts      | 12    | 8 published, 2 draft, 1 pending, 1 trash      |
| Pages      | 6     | Home, About, Services, Blog, Privacy, Terms    |
| Categories | 10    | 3-level hierarchy (Tech > AI > ML)             |
| Tags       | 15    | Realistic tech blog tags                       |
| Comments   | 10    | Mix of approved, pending, spam; some threaded  |
| Users      | 4     | 1 admin, 1 editor, 1 author, 1 subscriber     |
| Media      | 8     | Described image/doc files with realistic sizes |