CMS: Umbra
Theme: Night Owl (dark-first, developer-native, syntax-highlighting-inspired accent palette)
Module Set: Full (Dashboard, Posts, Pages, Categories, Tags, Media, Comments, Users, Settings, Appearance, Menu Builder, Analytics)
Date: 2026-04-24

## Prompt

Create a single-file HTML CMS admin panel named **Umbra** — tagline "Publish after dark" — using the Night Owl visual theme. All HTML, CSS, and JavaScript must be inline in one file. No external images. The CMS must feel like a real, production-grade backend for managing content.

**Visual Theme — Night Owl:**

Dark-first design language. Every element lives on a dark background.

Palette:
- Void (#011627) — deepest background
- Panel (#0B2942) — card/panel backgrounds
- Surface (#112B45) — elevated surfaces, hover states
- Border (#1E3A5F) — borders, dividers
- Text (#D6DEEB) — primary body text
- Accent Cyan (#7FDBCA) — primary actions, published status, links
- Accent Purple (#C792EA) — secondary, draft status
- Accent Orange (#F78C6C) — pending status, warnings
- Accent Yellow (#FFCB6B) — highlighted elements
- Error (#EF5350) — destructive actions, error states, spam

Typography: Inter for UI (body 15px, headings variable). JetBrains Mono for slugs, IDs, metadata, code blocks. Larger body size for light-on-dark legibility.

Layout:
- Fixed left sidebar (Void bg, no border) with nav items. Active item gets Surface bg + cyan left border. Hover fades to Surface.
- Top bar: CMS name/logo in cyan, global search input (Surface bg, Border border), notification bell with badge count, user avatar dropdown.
- Content area: breadcrumbs at top, page title, action buttons, main content below.
- Sidebar collapses to hamburger below 768px. Tables become card-based on mobile.

Component styling:
- Cards: Panel bg, 1px Border border, 8px radius. Subtle inner shadow.
- Buttons — Primary: cyan bg with void text. Secondary: Surface bg with Text color. Danger: error bg. All with subtle glow on hover (box-shadow with color alpha). 8px radius.
- Tables: Panel rows on Void bg. Hover: Surface. Header uppercase in small muted letter-spacing. Alternating subtle row shading.
- Inputs: Surface bg, Border border, 8px radius. Focus: cyan border + subtle cyan glow (0 0 0 3px rgba cyan).
- Status badges: published = cyan pill, draft = purple pill, pending = orange pill, trash = red pill.
- User avatars: colored circles (from 8 preset colors) with initials derived from display_name. No images.
- Toasts: Panel bg with left color accent bar, slide up from bottom-right. Types: success (cyan bar), error (red bar), warning (orange bar), info (purple bar). Auto-dismiss after 3.5 seconds.

Special: Code blocks, slugs, meta data, and IDs render in JetBrains Mono with accent color. CTRL+S saves in editors. Focus management on modals. prefers-reduced-motion respected.

**Architecture:**

1. **State Layer:** All data in `sessionStorage` under key `"cms_state"`. JSON object with arrays: posts, pages, categories, tags, comments, users, media, settings, menus. Plus `_meta` with initialized flag, version, lastActivity timestamp. On first load: detect empty/missing state → generate seed data → persist. Every mutation immediately persists.

2. **Router:** Hash-based SPA. Listen to `hashchange`. Parse routes. Render matching view into content area. Update sidebar active state and breadcrumbs. Unrecognized routes redirect to `#/dashboard`.

3. **Data Model:**
   - Post: id, title, slug, content (HTML), 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 (default|full-width|sidebar|landing-page), 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, permalink_structure, default_category, comment_moderation, nested_comments_depth, search_engine_visibility, writing_default_category, writing_default_format
   - Menu Item: id, title, type (page|category|custom), ref_id, parent_id, order, menu_location (primary|footer)
   Relationships are ID-based. Resolve at render time.

4. **Seed Data:**
   - 15 Posts: Mix of published, draft, pending. Varied dates spanning 3 months. Real-sounding titles like "Introducing Umbra's New Design System", "Q3 Engineering Retrospective", "How We Scaled to 1M Users". Multi-paragraph HTML content. Realistic word counts (200-800 words).
   - 8 Pages: Home, About, Contact, Services, Blog, Privacy Policy, Terms, Careers. Some with parent-child hierarchy.
   - 12 Categories: 3-level hierarchy. Technology → AI → Machine Learning. Business → Strategy. Design → UI → Typography. etc.
   - 20 Tags: Realistic tag names with varying post counts.
   - 12 Comments: Mix of approved, pending, spam. Threaded replies. On various posts. Real-sounding author names and content.
   - 5 Users: admin (Administrator), sarah (Editor), marcus (Author), elena (Author), subscriber (Subscriber). Distinct display names and avatar colors.
   - 10 Media items: Described files like "hero-banner.jpg 1920x1080 245KB image".
   - Settings: Pre-populated with realistic values. Site title "Umbra CMS".
   - Menus: Pre-built primary navigation with Home, About, Blog, Contact pages; footer with Privacy, Terms.

**Modules — All must be fully implemented:**

### Dashboard (`#/dashboard`):
- Top row: 4 stat cards (Posts, Pages, Comments with pending count, Users) with trend indicators.
- Main column: Recent Activity timeline (last 10 actions with avatar, text, relative timestamp). Quick Draft form (title input + content textarea + Save Draft button).
- Side column: At a Glance (status breakdown counts). Pending Comments list (3 most recent with Approve/Spam/Trash quick actions). Content Calendar mini-calendar with dots on active days.
- Activity log entries generated on CRUD operations.

### Posts (`#/posts`, `#/posts/new`, `#/posts/edit/:id`):
- List: status filter tabs (All|Published|Draft|Pending|Trash) with counts. Search by title. Table with checkbox, title, author, categories, tags, comments count, date, status badge. Sortable title and date columns. Row hover reveals Edit|Quick Edit|Trash|View actions. Quick Edit expands row inline. Bulk actions dropdown. Pagination 10/page.
- Editor: Title input → auto-generates slug on blur. Slug editable input. Rich text contenteditable div with toolbar: Bold, Italic, H2, H3, Link, UL, OL, Blockquote, Code. Word count + reading time live counter. Right sidebar: Publish box (status dropdown, date picker, Publish/Update/Save Draft buttons), Categories checkboxes with hierarchy, Tags comma-input with pill display and suggestions, Featured Image placeholder, Excerpt textarea. Autosave indicator every 30s. Unsaved changes prompt on navigate-away.

### Pages (`#/pages`, `#/pages/new`, `#/pages/edit/:id`):
- List: same table structure as Posts. Hierarchical display with indent for child pages. Columns: checkbox, title, author, template, status, date.
- Editor: same rich text editor. Sidebar differences: Page Attributes (template dropdown, parent dropdown, order number). No categories/tags/featured image.

### Categories (`#/categories`):
- Two-panel: Left 40% Add New form (name, slug, parent, description). Right 60% table with hierarchy indentation, name, description, slug, count. Inline editing. Delete with confirmation.

### Tags (`#/tags`):
- Two-panel: Left Add New form (name, slug, description). Right table (name, description, slug, count). Inline editing. Toggle between table and tag cloud view (font-size proportional to usage count).

### Media (`#/media`):
- Grid/List toggle. Grid: cards with file type SVG icon, filename, dimensions, size, colored border by type. List: table. Upload simulation form. Detail side panel. Type filter tabs.

### Comments (`#/comments`):
- Status tabs: All|Pending (badge)|Approved|Spam|Trash. Comment cards with avatar, author, email, linked post title, content (expandable), date, action links (Approve|Spam|Trash or Unapprove|Not Spam|Restore). Reply inline. Threaded display. Bulk actions.

### Users (`#/users`, `#/users/edit/:id`):
- Role filter tabs. Table: checkbox, avatar+name, username, email, role badge, posts count. Add New and Edit forms with display name, email, read-only username, role dropdown, bio, avatar color picker (8 presets), simulated change password. Cannot change own role.

### Settings (`#/settings`, `#/settings/:tab`):
- Horizontal tabs: General, Reading, Writing, Discussion, Permalinks. Each tab has its own form with Save Changes button. Toast on save.

### Appearance (`#/appearance`):
- Theme grid (4-6 cards) with CSS-generated swatches. Active theme highlighted. Activate button. Customize panel with site title/tagline inputs, primary color picker, header layout radio, footer text textarea.

### Menu Builder (`#/menus`):
- Left: Add Menu Items (page/category checkboxes + Add to Menu). Right: Menu Structure sortable list with up/down buttons, indent/outdent buttons, editable title, remove. Menu locations checkboxes (Primary, Footer). Save Menu.

### Analytics (`#/analytics`):
- Date range selector. 4 stat cards (fake realistic numbers). Canvas-drawn line chart of pageviews. Top Posts table sorted by views. Traffic Sources horizontal bar chart. Data randomly generated from seed with weekday peaks and weekend dips.

**Interaction Requirements:**
- Toast notifications for all CRUD operations with undo link on delete.
- Confirmation modals for destructive actions.
- Keyboard shortcuts: Ctrl/Cmd+S save, Escape close modals, Enter confirm.
- Optimistic UI updates.
- Empty states with styled messages and CTAs for all list views.
- Unsaved changes warning on editor navigate-away.
- Autosave every 30 seconds of inactivity in editors.
- Bulk operations on Posts, Pages, Comments.
- Global search in top bar filters current view.
- Loading skeletons with shimmer on view transitions (200-400ms delay).
- Responsive: sidebar collapses to hamburger below 768px, tables become cards, forms stack.
- Accessibility: semantic HTML, ARIA labels, focus management, skip-to-content link, prefers-reduced-motion.
- Footer with "Umbra v3.2.1" and "Last backup: 2 hours ago".

All code must be inline in a single index.html file. No truncation, no placeholders, no `// ... rest of code`. Every module, every route handler, every UI component written in full. Start with `<!DOCTYPE html>`, end with `</html>`.

## Notes

Creative decisions:
- Chose Night Owl theme for maximum visual impact — dark UIs feel more like real developer/admin tools
- Full module set to demonstrate the complete CMS surface area
- CMS named "Umbra" (Latin for "shadow") with tagline "Publish after dark"
- JetBrains Mono via CDN link in CSS (Google Fonts) for code/slugs/metadata
- Inter font via CDN for UI text
- Canvas-based charts for Analytics module using built-in Canvas API
- Rich text uses contenteditable with execCommand for formatting operations
- Reliance on CDN for fonts is acceptable per skill guidance — they materially improve the CMS

Theme adaptations for Night Owl:
- Sidebar: Void bg, Surface on active, cyan left-border accent
- Cards: Panel bg with subtle inner glow for depth
- Inputs: Surface bg with focus glow in cyan
- Status badges use the accent palette directly: cyan=published, purple=draft, orange=pending, red=trash
- Code elements (slugs, IDs, metadata) rendered in JetBrains Mono with accent color
- Toasts slide up from bottom-right with left-side color accent bar
- Stat cards glow faintly on hover
- Scanline effect omitted as it can hurt readability — opted for clean dark surfaces instead

## Seed Data Summary

- Posts: 15 total. 8 published, 3 draft, 2 pending, 2 trash. Content styled like a tech company blog. Titles include "Introducing Umbra's New Design System", "Q3 Engineering Retrospective", "How We Scaled to 1M Users", "The Future of Content Management", "Building Accessible Admin Interfaces", "Our Migration to Microservices", "Why We Chose TypeScript", "Developer Experience at Scale", "The Art of API Design", "Security Best Practices for 2026", "Content Strategy for Growing Teams", "Measuring What Matters", "Remote Work: One Year In", "Design Tokens: A Practical Guide", "Performance Optimization Deep Dive".
- Pages: 8 total. Home, About, Contact, Services, Blog, Privacy Policy, Terms of Service, Careers. Services parent of two sub-pages (Web Development, Digital Strategy).
- Categories: 12 across 3 levels. Root: Technology, Business, Design, Culture. Technology→AI→Machine Learning, Technology→Web Development, Technology→DevOps. Business→Strategy, Business→Marketing. Design→UI, Design→Typography. Culture→Remote Work.
- Tags: 20. javascript, typescript, react, nodejs, python, design-systems, accessibility, performance, security, api, database, testing, devops, cloud, docker, kubernetes, css, html, ux, writing.
- Comments: 12. 7 approved, 3 pending, 2 spam. Some threaded replies. On various posts. Author names: "Alex Chen", "Maria Rodriguez", "James Wilson", "Priya Patel", "Thomas Mueller", "Yuki Tanaka", "SpamBot 3000", "BuyCheapMeds".
- Users: 5. Administrator "Jordan Pierce" (cyan avatar), Editor "Sarah Chen" (purple), Author "Marcus Webb" (orange), Author "Elena Vasquez" (green), Subscriber "Reader Account" (grey).
- Media: 10 items. Mix of images, documents, and video. Realistic filenames and dimensions.
- Settings: Pre-populated. Site title "Umbra CMS", tagline "Publish after dark", timezone "Pacific/Auckland", date_format "F j, Y", posts_per_page 10, comments_enabled true, default_role "subscriber", permalink_structure "post-name".
- Menus: Primary navigation (Home, About, Blog, Contact pages). Footer navigation (Privacy Policy, Terms of Service).