Objective¶

• Implement a responsive customization screen based on the PRD and Figma design.
• Ensure the design is responsive across all devices.
• Ensure compatibility with both dark and light themes.
• Implement all functionalities related to file uploading, file manipulation (rotation, deletion), and compression options.

Task Checklist¶

Core Components¶

• File Display Box

  • Show uploaded PDF file name, size, and total pages.
  • Add Rotate buttons for rotating pages clockwise and counterclockwise.
  • Add a Delete button to remove a file from the page.
  • Add hover functionality to display PDF details (e.g., file size, number of pages).

• Range Sliders

  • Image Enhancement Slider
    • Slider for changing the image enhancement range (-3 to 3) with a value field.
    • Value field updates in real-time when the slider is dragged or manually edited.
    • Changes affect brightness, contrast, sharpness, and color for all uploaded files.
  • Image Resolution Slider
    • Slider for dynamically changing image resolution (72 to 300 DPI) with a value field.
    • Value field updates in real-time as the slider is dragged or manually edited.
    • Changes apply to all uploaded files.

• Color Scope Options

  • Two buttons to select Original or Grayscale color modes.
  • Selecting Grayscale reduces file size by converting images to black & white.

• Image File Options

  • Buttons to either Keep or Remove images from the PDF during compression.
  • If the Remove option is selected, activate the Compression Level box.

• Compression Level Slider

  • Slider to adjust the compression level (0 to 9) with a value field.
  • Value field updates in real-time when the slider is dragged or manually edited.
  • If compression level is selected, disable other customization options (sliders, color scope, image options).

• Add More Files Button

  • Button to upload additional files (max 4 files).
  • Disable the button once the maximum number of files is reached.

• Sort Files

  • Alphabetical Sorting Toggle
    • Toggle button to sort files alphabetically (A-Z or Z-A).
    • Provide visual feedback for the current sorting mode.
  • File Size Sorting Toggle
    • Toggle button to sort files by size (Min-Max or Max-Min).
    • Provide visual feedback for the current sorting mode.
  • Ensure only one sorting option (alphabetical or size) can be selected at a time.

• Start Compression Button

  • Animated button to start the compression process.
  • Display a "File in Progress" loader during the compression process.
  • Process both default and customized settings for compression.

Related Links¶

• Topical Map: Topical Map
• PRD: PRD
• Figma Design: Figma Design

* Estimated implementation time: 1 days.¶

GitHub Issue Link¶

• GitHub Issue #21