frontend_design.txt

The frontend will be a single HTML page with embedded CSS and JavaScript:

1. HTML structure:
   - Title: "Text Comparison Tool"
   - Two large text areas for input:
     - Left: "Original Text"
     - Right: "Modified Text"
   - "Compare" button
   - Result area to display the diff

2. CSS styling:
   - Modern, clean design with a color scheme (e.g., blue and white)
   - Responsive layout for various screen sizes
   - Styled text areas and button
   - Custom styling for diff output (highlighted additions and deletions)

3. JavaScript functionality:
   - Event listener for the "Compare" button
   - AJAX call to send texts to the backend "/compare" route
   - Function to display the returned HTML diff in the result area
   - Error handling for failed requests or empty inputs

4. Additional features:
   - "Clear" button to reset both text areas
   - "Swap" button to switch the contents of the two text areas
   - Loading spinner while waiting for the comparison result

The frontend will provide an intuitive interface for users to input their texts, initiate the comparison, and view the results in a visually appealing manner.