Highlight color selection for the Compare PDFs page.

[ShawnJohnston]

Description

Added the option to change the colors of the difference highlights using color selector boxes. Like before, the user will click the "Compare" button to parse text into a pair of boxes with differences in text highlighted. The user has to select their colors prior to clicking "Compare", and do so again if they want something different. The color selectors are red and green by default, which were the original colors prior to change.

Issue #1290 is a small collection several related feature enhancements for the Compare PDFs page. Item 6 of the list requested the option to change the color of the highlights that indicate a change between each document.

This page is an HTML file containing internal CSS and JavaScript. As this feature expands, the HTML and JS will need to be separated out, but I didn't opt to do that at this time. I added several selectors to the internal CSS. I only edited the JavaScript code slightly to make coloring dependent on the color input boxes that I added. I only used standard HTML and CSS, with the only reason being that I haven't learned a front-end framework yet. I kept styling basic so that someone more proficient with design can work on it.

HTML:

• A div of class "row" encapsulates a div of class "flex-container".
• Each div within the flex container is classed as "color-selector" and has a label and a color input with a color-box id and a default color value of either red or green.

CSS:

• .flex-container id selector is used to keep the color-selectors along a row.
• .color-selector id selector ensures sub-elements are in a row and aligned. Spacing applied.
• #color-box1 and #color-box2 class selectors remove some of the default styling.
• .spacer1 and .spacer2 id selectors are used to align color-selectors with their result text boxes below. The content uses the same padding from the result boxes, which I found using my browser's inspector.

JavaScript, specifically comparePDFs():

• Variables color1 and color2 added, stores the values from each color selector using their respective color-box classes.
• For all instances within the function where the colors red and green are hard-coded, they are replaced with color1 and color2. Comments updated accordingly.

Closes #(1290 list item 6)

Checklist:

• I have read the Contribution Guidelines
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings

Contributor License Agreement

By submitting this pull request, I acknowledge and agree that my contributions will be included in Stirling-PDF and that they can be relicensed in the future under the MPL 2.0 (Mozilla Public License Version 2.0) license.

(This does not change the general open-source nature of Stirling-PDF, simply moving from one license to another license)

[Frooodle]

must support custom languages like having it as

th:text="#{compare.highlightColor}"

and
compare.highlightColor=Highlight Color 1:

in languages GB file

[ShawnJohnston]

Fixed

[ShawnJohnston]

Commit 5 updated for US message file, just updated the GB one in commit 6.