Objective¶

• Implement the customization screen according to the Figma design and PRD.
• Ensure the design is responsive.
• Support both dark and light themes.

Core Components¶

• Range Slider (Full / Center)
• Label
• Combo Button (For adding more files)
• Button Group
• PDF on Hover (Rotate/Delete - Page/Size)
• Start Compressing Button

Blocks¶

• PDF View (Scrollable block)
• Customize Block

Customization Options¶

• File Information Display

  • Display uploaded files with their name, size, and total pages in individual boxes.

• Rotate Buttons

  • Add two rotate buttons (clockwise and anticlockwise) at the bottom of each file's box.
  • Enable unlimited rotation of PDF pages in either direction.

• Delete Button

  • Implement a delete button for each file.
  • Show a popup when clicked, indicating the file's availability timer and a "Delete Now" option.
  • If the user deletes the last file, redirect to the home page.
  • Tooltip: "Delete File"

• Image Enhancement Slider

  • A slider to adjust the image enhancement range (-3 to 3).
  • Display the value on the right side of the slider.
  • The value field should reflect changes when the slider is adjusted and vice versa.
  • Changes apply to all uploaded files.
  • Tooltip: "Adjusts brightness, contrast, sharpness, and color to make an image clearer and more appealing."

• Image Resolution Slider

  • A slider to control the image resolution (72 to 300).
  • Display the current value on the right side of the slider.
  • Adjusting the slider or editing the value field should update both accordingly.
  • Changes apply to all uploaded files.
  • Tooltip: "Controls detail in pixels: higher means clearer, lower means more pixelated."

• Color Scope Buttons

  • Two options: Original and Grayscale.
  • Selectable to change image color scope across all uploaded files.
  • Tooltip: "Sets the color mode: 'Original' for original color and 'Grayscale' for black & white only."

• Image File Options

  • Two buttons: Keep and Remove.
  • Control whether to keep or remove images while compressing PDFs.
  • Tooltip: "Removes image files to get a smaller file size or keeps images in the PDF."
  • Activate the compression level box if "Remove" is selected.

• Compression Level Slider

  • A slider ranging from 0 to 9 to adjust compression level.
  • Display the current value on the right side of the slider.
  • Adjusting the slider should update the value field and vice versa.
  • Changes apply to all uploaded files.
  • If a user selects a compression level, disable the other four customization options.

• Add More Files Button

  • Allows users to upload additional files.
  • Disable if the maximum limit (currently 4 files) is reached.

• File Sorting Toggle Buttons

  • Alphabetical Sorting: Toggle between A-Z and Z-A.
  • Size Sorting: Toggle between Max-Min and Min-Max.
  • Update the file list in real-time without a page refresh.
  • Allow only one sorting option at a time; selecting one disables the other.

• Compression Button

  • An animated button to initiate the compression process.
  • Show a "File in progress" loader while processing.
  • Handle the compression using either customized or default settings.

Additional Notes¶

• Ensure all tooltips display correctly for each button and option.
• Ensure real-time updates in the file availability timer.
• Implement QR code generation for sharing files, and verify dynamic updates.
• Make the print button trigger the browser's print dialog and handle potential errors.
• Implement a start-over button to reset the process while retaining settings.
• Show a post-download popup asking users to rate the service with a close button for exit.

Resource Links¶

• Topical Map
• PRD
• Figma Design

Timeline¶

• Estimated implementation time: 2 days.

GitHub Issue Link¶

• GitHub Issue #20