HTML Guide - Dark Sidebar Layout

Prompt preview

Create a fully self-contained, production-quality HTML guide file for my project. Do not use any external CSS frameworks or JS libraries - everything must be inline in one .html file.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PROJECT DETAILS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Project name: {{project_name}}
Guide subtitle: {{subtitle}}
One-line description: {{description}}
Tech stack tags (shown in header): {{tags}}
Sections to cover: {{sections}}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LAYOUT - DARK SIDEBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Use this exact layout:
- Fixed left sidebar (260px wide) with logo at top and grouped navigation links
- Each nav link has a colored dot (use 5 colors: blue #4f7fff, green #38d9a9, amber #f59e42, purple #c084fc, red #f87171) to indicate section category
- Main content area scrolls independently; sidebar stays fixed
- Page header at top of main with eyebrow text, large title, description paragraph, and technology tag pills
- All content in a max-width 900px column with 64px side padding

Use these CSS variables for the color system:
--bg: #0d0f14 (page background)
--surface: #13161d (sidebar and card background)
--surface2: #1a1e28 (secondary surfaces, code blocks)
--border: rgba(255,255,255,0.07)
--border2: rgba(255,255,255,0.12)
--text: #e8eaf0 (primary text)
--muted: #7a7f96 (secondary text)
--accent: #4f7fff (blue - primary accent)
--accent2: #38d9a9 (green)
--accent3: #f59e42 (amber)
--accent4: #c084fc (purple)
--danger: #f87171 (red)

Typography:
- Display font: 'Syne' (Google Fonts, weights 400 500 600 700) - use for all headings and section titles
- Body font: 'DM Sans' (Google Fonts, weights 300 400 500) - use for body text and cards
- Mono font: 'DM Mono' (Google Fonts, weights 400 500) - use for labels, eyebrows, code, tags, badges

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
COMPONENTS TO USE (pick what fits each section)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SECTION HEADER - every section starts with:
- Small mono eyebrow (e.g. "01 - Overview")
- Syne 24px font-weight 600 title
- Muted 14px description paragraph

METRIC CARDS - use for key stats or choices. Grid of 2 - 4. Each has:
- DM Mono 11px uppercase muted label
- Syne 20px value
- 12px muted subtext
- Background: var(--surface2), border: 1px solid var(--border), border-radius 10px

FEATURE CARDS - for role descriptions, module explanations. Each has:
- 38x38 colored icon box (border-radius 9px, color-tinted background)
- Syne 15px font-weight 600 title
- 12px muted subtitle
- Body content (checklist or paragraphs)
- Background: var(--surface), 1px border, border-radius 12px

BADGES - inline labels. Rounded 4px. Colors: badge-blue, badge-green, badge-amber, badge-purple, badge-red. Each uses colored bg (15% opacity of accent), colored border (25% opacity), and colored text. Font: DM Mono 11px.

CHECKLIST - ul with no bullets. Each li has "✓" in var(--accent2) color, 10px gap. 14px muted text. Bold spans in var(--text) for emphasis.

FLOW ROW - horizontal flow with colored boxes and → arrows. Each box 6px 14px padding, 6px border-radius, DM Mono 12px. Colors: fb-blue (accent bg), fb-gray (surface2 + border), fb-green (accent2 bg), fb-amber (accent3 bg).

CODE BLOCK - background var(--surface2), border 1px var(--border), border-radius 8px, 16px 20px padding. Font: DM Mono 13px, line-height 1.7. Color classes: .kw (keywords, #7fa8ff), .str (strings, #5ed4a5), .cm (comments, #4a5270), .fn (functions, #c084fc), .num (numbers, #f59e42).

STEP LIST - numbered vertical list. Each step has: blue circle with number (30px, rgba(79,127,255,0.15) bg + border), step title in Syne 14px font-weight 600, description in 13px muted. Separated by 1px border lines.

DATA TABLE - full width, border-collapse collapse. th: DM Mono 11px uppercase amber color (#f59e42), border-bottom. td: 13px muted, border-bottom var(--border). Row hover: rgba(255,255,255,0.02) bg. Last row td has no border.

CALLOUT - left-border accent box. border-left: 3px solid [color]. border-radius 0 8px 8px 0. Padding 14px 18px. Font-size 13px. Types: callout-blue (accent), callout-green (accent2), callout-amber (accent3). Use strong tags for emphasis inside.

INLINE TAGS - DM Mono 11px, 2px 7px padding, 4px border-radius, var(--surface2) background, var(--border) border, var(--muted) text.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SIDEBAR NAVIGATION STRUCTURE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Group nav links into 3 - 4 labeled groups (e.g. "Overview", "Architecture", "Implementation").
Each group has a DM Mono 10px uppercase muted label.
Each link: flex row, colored dot (6px circle), 13px text, href="#section-id".
Active link: rgba(79,127,255,0.12) background, var(--accent) color.
Add JavaScript IntersectionObserver at bottom of file to auto-highlight active section on scroll.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CONTENT INSTRUCTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
For each section I listed, write real, detailed technical content. Do not use placeholder lorem ipsum text. Use the components above to structure the content - pick the best component for each type of information:
- Key decisions or stats → metric cards
- Features or capabilities → feature cards with checklists
- Processes or sequences → flow rows or step lists
- Technical specifications → data tables
- Code examples → code blocks with syntax highlighting
- Important notes → callouts
- Technology choices or labels → inline tags or badges

Make the guide genuinely useful. Include specific details, real numbers, real technology names, and actionable guidance. The reader should be able to use this guide to actually build the project.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
At max-width 900px: hide sidebar, remove margin-left, reduce padding to 24px. All grids collapse to 1 column.

Output the complete HTML file, ready to open in a browser. No external dependencies except the three Google Fonts imports.