Add search functionality, domain navigation, and professional redesign with #0D5257 theme

[Copilot]

Implements search filtering, domain-based navigation, and complete UI redesign using #0D5257 as primary color while restoring section headings that clearly separate problem types from error codes.

Changes

Search Implementation

• Real-time client-side search with 300ms debounce filters both problem types and error codes
• Regex-based text highlighting with yellow background for matches
• Clear button (✕) with Escape key support
• "No results" messaging per section

Domain Navigation

• Fixed horizontal navigation bar with 12 API domains (Basket, Checkout, Payment, etc.)
• Active state tracking based on URL parameters
• Horizontal scroll on mobile with sticky positioning

Visual Redesign

• Primary color #0D5257 with complementary neutral tones via CSS custom properties
• Two-section layout with semantic HTML:
  • "Problems" section: RFC 7807 compliant problem types with introduction
  • "Error Codes" section: API-specific error codes with gradient background separator
• Professional typography hierarchy with improved spacing and subtle shadows
• Responsive breakpoints at 768px and 480px

Technical Details

// Search filters both sections independently
function performSearch(query) {
    const normalizedQuery = query.toLowerCase();
    filterList(document.querySelector('#index ul'), normalizedQuery);
    filterList(document.querySelector('#errorCodes ul'), normalizedQuery);
    updateSectionVisibility();
}

/* Visual distinction via gradient background */
.error-codes-section {
    border-top: 3px solid var(--primary-color);
    background: linear-gradient(to bottom, var(--primary-lighter) 0%, var(--bg-white) 100px);
}

Screenshots

Before:

After - Full Page:

Search Active:

Domain Navigation:

Mobile Responsive:

Original prompt

I want to be able to search for a problem type, an error code in side this static app. Can you implement that in the top bar. Also, can you add the domains in a nav bar.

Review this page and restyle it to look humble, professional, and easy to read. Use clear layouts, simple typography, and balanced spacing. The primary color theme should center around #0D5257, complemented by neutral tones where appropriate. Focus on readability, visual calmness, and professional polish.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[mbubnich-bunnings]

@copilot the new layout merges the list of problems and the list of error codes these are separate set's and need to be visually distinct the heading's and supporting text for these sections seems to have been removed. can you restore this content and maintain the visual distinction between the two sets.

[Copilot]

@copilot the new layout merges the list of problems and the list of error codes these are separate set's and need to be visually distinct the heading's and supporting text for these sections seems to ...

The section headings and supporting text have been restored in commit 7d25635. The page now displays:

1. Problems section with the full introduction text explaining RFC 7807 compliance and the Problem Type URL format
2. Error Codes section with its description, visually separated using a gradient background and colored border

Both sections maintain their original content from index.md and errorCodes.md while being clearly distinguished.