CMS: Prism CMS Theme: Material (Prism CMS) Module Set: Extended Date: 2026-04-18 ## Prompt Create a complete, single-file CMS admin panel in HTML called **Prism CMS** — a make-believe content management system that looks and feels like a real WordPress-like backend. The entire application must be contained in one `.html` file with all CSS and JavaScript inline. ### Visual Theme: Material Design Apply Google Material Design 3 principles throughout: - **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 (12px radius) - **Cards:** Elevated with subtle shadow (0 1px 3px rgba), 12px border-radius, surface color fill - **Buttons:** Filled primary buttons with primary bg (#6750A4), white text, 20px radius; outlined secondary buttons - **Tables:** Clean with thin bottom-border rows, no vertical lines, header row in surface variant - **Inputs:** Outlined variant with 4px radius, 1px border, floating labels on focus - **Typography:** Inter font stack. 14px body, 24px page titles, medium weight headings - **Toasts:** Rounded snackbar at bottom-right with colored accent bar ### Module Set: Extended Include these 8 modules with full functionality: 1. **Dashboard** — Stat cards (Posts, Pages, Comments, Users), Recent Activity timeline, Quick Draft form, At a Glance summary, Pending Comments section 2. **Posts** — Full CRUD with rich text editor, categories, tags, featured image, status management, quick edit, bulk actions, pagination 3. **Pages** — Hierarchical page management with templates, parent pages, full editor 4. **Categories** — Hierarchical taxonomy with two-panel layout (add form + list), inline editing 5. **Tags** — Flat taxonomy with tag cloud view option, inline editing 6. **Media** — Simulated media library with grid/list views, upload simulation, type filters 7. **Comments** — Moderation queue with approve/spam/trash actions, threaded replies 8. **Users** — Role-based user management (administrator, editor, author, subscriber), avatar colors ### Technical Requirements **State Management:** - Use `sessionStorage` only (NOT localStorage) with key "cms_state" - On first load: generate comprehensive seed data for all entities - On refresh: load existing state and resume - On tab close: state naturally evaporates **Seed Data (minimum):** - Posts: 12-15 with varied statuses (published, draft, pending), realistic titles like "Introducing Our New Design System", "Q3 Engineering Retrospective", multi-paragraph content - Pages: 6-8 including Home, About, Contact, Services, Blog, Privacy Policy with parent-child hierarchy - Categories: 8-10 with 2-3 levels (Technology → AI → Machine Learning) - Tags: 15-20 realistic tags with varying usage counts - Comments: 10-12 with mix of approved, pending, spam, threaded replies - Users: 4-5 (1 admin, 1 editor, 1 author, 1-2 subscribers) with distinct display names - Media: 8-10 described files with metadata (dimensions, size, type) **Router:** - Hash-based SPA: `#/dashboard`, `#/posts`, `#/posts/new`, `#/posts/edit/:id`, `#/pages`, etc. - Sidebar navigation with active state highlighting - Breadcrumbs showing current location - Redirect unknown routes to dashboard **Data Models:** ``` Post: { id, title, slug, content, excerpt, status, 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, created_at, parent_id } User: { id, username, email, display_name, role, 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 } ``` **Rich Text Editor:** - contenteditable div with toolbar: Bold, Italic, H2, H3, Link, UL, OL, Blockquote, Code - Document.execCommand for formatting - Word count and reading time display **Key Features:** - Data tables with sortable columns (click header to toggle asc/desc) - Pagination: "Showing 1-10 of 47" with prev/next - Bulk actions: select rows → dropdown → apply - Quick edit: inline row expansion without navigation - Modal confirmations for destructive actions - Toast notifications: success (green), error (red), warning (yellow), info (blue) - Status badges: colored pills for published (green), draft (grey), pending (yellow), trash (red) - User avatars: colored circles with initials derived from display_name - Search filtering in list views - Slug auto-generation from title - Unsaved changes warning when navigating away from editors - Keyboard shortcuts: Ctrl/Cmd+S to save, Escape to close modals - Activity log on dashboard showing realistic actions - WordPress-style footer with version and "Last backup" time **Responsive Design:** - Collapsible sidebar with hamburger menu on mobile (< 768px) - Tables become card-based on mobile - Touch-friendly tap targets (min 44px) **Accessibility:** - Semantic HTML elements - ARIA labels on icon-only buttons - Focus management on modals - Skip-to-content link - Color contrast meeting WCAG AA ### Output Write complete `index.html` starting with `` and ending with ``. Every module, every route handler, every UI component must be written in full. No truncation, no placeholder comments. All CSS in `