Technical Specification: Markdown to Instant Messaging Format Converter

1. Overview

A high-performance, single-file browser utility that converts standard Markdown syntax (like bold, italics, lists, and links) into the specific 'mrkdwn' syntax used by major team communication platforms.

2. Shared Constraint Compliance

• Single File: All HTML, CSS, and Vanilla JavaScript must be contained in one index.html file.
• Storage: Absolutely no localStorage, sessionStorage, or cookies. State is managed entirely in JavaScript variables. This ensures compliance with sandboxed iframe environments.
• No Popups: No alert() or confirm(). All user feedback occurs via non-intrusive UI updates (e.g., status badges, custom tooltips).
• Aesthetics: Vibrant, professional, clean light-mode interface (no dark mode).

3. UI Layout & User Experience

A. Header

• Title: "Markdown to Messaging Formatter"
• Subtitle: "Convert standard Markdown to team messaging syntax instantly."

B. Main Tool Area

• Input Pane: A large, resizable textarea with a clean, borderless style that highlights on focus. Includes a placeholder: "Enter your markdown text here..."
• Action Bar:
  • "Convert" button (Primary: Indigo-600 background, white text, smooth transition on hover).
  • "Clear" button (Ghost style: Slate-500 text, light gray background).
  • "Copy to Clipboard" button (Appears only after successful conversion).
• Output Pane: A read-only display block or secondary textarea showing the converted output, styled with monospaced font for easy reading.

4. Technical Implementation

• Transformation Engine: A lightweight Vanilla JS function using RegEx to swap syntax:
  • Bold: **text** -> *text*
  • Italic: *text* or _text_ -> _text_
  • Links: [text](url) -> <url|text>
  • Blockquotes: > text -> > text (no transformation needed usually, but logic should be extensible).
• Animations:
  • Smooth opacity transitions when the Output Pane appears.
  • Subtle button depression animation on click.
  • "Copied!" toast notification that fades in and out after 2 seconds.

5. Visual Palette

• Background: #F8FAFC (Slate-50)
• Surface: #FFFFFF (White, with slight shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1))
• Primary Accent: #4F46E5 (Indigo-600)
• Text: #1E293B (Slate-800)
• Border: #E2E8F0 (Slate-200)

6. Responsive Design

• Mobile: Single column layout with stacked Input/Output panes.
• Desktop: Side-by-side or stacked layout based on available viewport width, utilizing flexible CSS Grid or Flexbox containers.

7. Developer Instructions

• Use a standard font stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif.
• Ensure high contrast ratios for accessibility (WCAG compliant).
• Use strictly Vanilla JS (ES6+). Do not bundle external dependencies that cannot be accessed via a secure CDN link.