Technical Specification: Browser-Based Adler32 Checksum Generator

1. Overview

A high-performance, single-file utility that calculates the Adler32 checksum of any input text or uploaded file. This tool is designed for developers, data engineers, and QA testers requiring immediate data verification without external dependencies.

2. Core Features

• Real-time Hashing: Instant Adler32 checksum calculation as the user types or updates the input.
• File Processing: Support for drag-and-drop or file-picker upload to generate checksums for binary or text files using the FileReader API.
• Verification Mode: An optional "Expected Hash" input field that changes the UI color (green/red) to signify if the calculated hash matches the user-provided hash.
• One-Click Copy: Copy the resulting checksum to the clipboard with a smooth transition interaction.
• Input Character Count: Real-time feedback on input length.

3. UI/UX Specification

• Aesthetic: Clean, professional "SaaS" aesthetic. Use generous whitespace, rounded corners (8px-12px), and high-contrast typography.
• Layout:
  • Header: Simple, clear title "Adler32 Checksum Generator".
  • Main Area:
    • Input Section: A large, responsive textarea for string input.
    • File Section: A prominent, dashed-border drop zone for file uploads.
    • Output Section: A prominent, selectable code block area displaying the result in hexadecimal format.
  • Controls: Floating action buttons for "Clear", "Copy", and "Toggle Mode" (Text/File).
• Color Palette (Strictly Light Mode):
  • Primary: #2563eb (Blue)
  • Background: #f8fafc (Off-White/Light Gray)
  • Card/Surface: #ffffff (Pure White)
  • Text: #1e293b (Dark Slate)
  • Border/Subtle: #e2e8f0 (Light Gray)
  • Success/Valid: #16a34a (Green)
  • Error/Invalid: #dc2626 (Red)

4. Technical Constraints & Implementation

• Architecture: Single-file HTML/CSS/JS. No external framework dependencies (React, Vue, etc.). CSS frameworks like Tailwind CSS via CDN are permitted.
• Storage: Absolutely NO use of localStorage, sessionStorage, or cookies. The application must be stateless. Every refresh resets the state.
• Performance: Adler32 logic must be implemented in a non-blocking way using standard JavaScript. For large files, utilize FileReader in chunks to prevent UI blocking.
• Modals: Use pure HTML <dialog> or custom div overlays for prompts (e.g., "Copied to clipboard"). Do not use alert() or confirm().
• Responsiveness: Use CSS Grid and Flexbox to ensure the layout collapses gracefully from a desktop side-by-side view to a single-column mobile view.

5. Animation & Micro-interactions

• Transitions: Use transition: all 0.2s ease-in-out for hover states and state changes.
• Feedback: When clicking "Copy", the icon should change to a checkmark for 1.5 seconds, accompanied by a subtle scale-up animation.
• Hover States: Inputs should show a subtle box-shadow lift (0 4px 6px -1px rgb(0 0 0 / 0.1)) on focus to denote interaction.