You are given a well-formatted markdown file. Your task is to convert it into a modern, visually appealing HTML document. Follow these instructions:
1) Analyze the Markdown Structure:
- Identify all headings, lists, tables, code blocks, blockquotes, and other markdown elements.
- Note the hierarchy and indentation to inform the HTML structure and CSS styling.
2) Generate HTML
- Convert each markdown element to its semantic HTML equivalent (e.g., # to
, ## to , - to - , etc.).
- Convert Markdown image syntax (``) to HTML `
` tags, preserving the `src` and `alt` attributes, and apply modern styling (e.g., `max-width:100%; margin: 16px 0; border-radius: 4px;`).
- Preserve the document’s logical structure and sectioning.
3) Apply Modern CSS
- Use a clean, modern font (e.g., 'Segoe UI', Arial, sans-serif).
- Add a centered, card-like container with padding, rounded corners, and a subtle box-shadow.
- Style headings with distinct colors and spacing for hierarchy.
- Style lists, tables, and code blocks for clarity and readability.
- Ensure responsive design for mobile devices.
- Use the markdown’s own formatting (e.g., heading levels, list nesting, table presence) to influence spacing, font sizes, and section separation in the CSS.
4) Header Row
- At the top, include a header row with the document title (from the first heading) and a company logo (use a placeholder or provided URL).
5) Meta Information
- If the markdown includes frontmatter (YAML or similar), display all metadata fields found (not just title, description, version, author, date) in a styled block at the top. This ensures custom fields like `applies_to`, `issue`, or others are visible for KBAs/Guides.
- If a `logo` field is present in the frontmatter, use its value as the logo URL in the header row; otherwise, use the default logo URL.
- Use the YAML `title` as the main document title (``). If both YAML and Markdown H1 exist, suppress the Markdown H1 in the HTML output to avoid duplicate titles.
6) Accessibility & Best Practices
- Use semantic HTML tags.
- Ensure sufficient color contrast and readable font sizes.
- Add alt text for images.
- If a blockquote starts with `Note:`, `Warning:`, or `Tip:`, add a CSS class and icon/color for visual distinction (e.g., blue for Note, yellow for Warning, green for Tip). This helps highlight important callouts in KBAs/Guides.
- If multiple H1s or inline HTML are detected, warn or normalize as needed to maintain clean output.
7) Output
- Return a complete HTML file with embedded CSS (in a
Description: ...
Version: ...
Author: N. Castaldi
Date: ...