Text Diff Checker and Code Comparison Tool Specification

Overview

A high-performance, single-file browser application designed to compare two versions of text or code side-by-side. The tool highlights additions, deletions, and changes instantly, making it an essential utility for developers and writers.

Feature List

• Real-Time Processing: Diff calculation triggers automatically as text is input.
• Visual Diff Modes: Supports side-by-side view for easy visual comparison and inline view for dense text.
• Granular Control: Toggles for 'Ignore Whitespace', 'Case Sensitivity', and 'Ignore Blank Lines'.
• Line Statistics: Displays line numbers for easy navigation in large code blocks.
• Responsive Design: Adapts automatically to mobile and desktop screen sizes.
• Export/Clear: Copy the diff result to the clipboard or clear input fields with a single click.

UI Layout

• Header: Minimalist title bar with a brief instructional subtitle.
• Input Section: Two large, resizable text areas positioned side-by-side on desktop, stacked on mobile. Each area is clearly labeled 'Original Text' and 'Modified Text'.
• Control Panel: A modern tool strip situated between the inputs containing switches for comparison settings.
• Results Section: A dedicated area below the inputs that presents the visual difference report using a standard diff format (red for deletion, green for addition).

Design Aesthetic (Light Mode)

• Palette: Use a clean, professional light-mode aesthetic. Backgrounds should be stark white (#FFFFFF) with neutral light-grey borders (#E0E0E0).
• Emphasis Colors: Added content uses a soft green background (#D4EDDA) with dark green text (#155724). Removed content uses a soft red background (#F8D7DA) with dark red text (#721C24).
• Typography: Utilize system-default sans-serif fonts for maximum readability and zero load time.

Animations & Transitions

• Micro-interactions: Subtle hover effects on buttons (slight elevation/shadow).
• Smooth Updates: Use CSS opacity transitions when the results area refreshes to provide a polished feel without jarring jumps.

Technical Constraints

• Single File: All CSS, HTML, and Vanilla JavaScript must be contained in one index.html file.
• Self-Contained: No external API calls, frameworks (React/Vue), or build steps allowed.
• Iframe Ready: The tool must be fully functional and responsive when hosted within a sandboxed iframe.
• No Footer/No Dark Mode: The UI must remain a clean, functional light-mode interface without a footer section.