Add color themes

src/css/main.css

@@ -98,3 +98,39 @@ html, body {
 select option {
     color: var(--bs-dark);
 }
+
+.theme-purple {
+    background-image: linear-gradient(90deg,#33b7e2,#5e62b0,#dc307c);
+}
+
+.theme-green {
+    background-image: linear-gradient(90deg, #9ebd13 0%, #008552 100%);
+}
+
+.theme-red {
+    background-image: linear-gradient(90deg, #d53369 0%, #daae51 100%);
+}
+
+.theme-aqua {
+    background-image: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
+}
+
+.theme-ocean {
+    background-image: linear-gradient(90deg, #1CB5E0 0%, #000851 100%);
+}
+
+.theme-dusty {
+    background-image: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
+}
+
+.theme-lilac {
+    background-image: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
+}
+
+.theme-spring {
+    background-image: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
+}
+
+.theme-shadow {
+    background-image: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
+}

src/index.html

@@ -22,7 +22,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
             </div>
             <div class="modal-body">
                 <div class="row">
-                    <div class="col-12 col-lg-6">
+                    <div class="col-12 col-md-6 col-lg-4" id="notaryProfileSettings">
                         <h4><i class="fas fa-address-card"></i> Notary Profile</h4>
                         Name: <input class="form-control" type="text" id="notary_name" />
                         Location (county/residing at): <input class="form-control" type="text" id="notary_location" />
@@ -40,7 +40,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                         <img src="" id="signature-preview" /><br>
                         <div class="btn btn-primary m-1" onclick="activateNotarySignaturePad()"><i class="fas fa-signature"></i> Draw Signature</div>
                     </div>
-                    <div class="col-12 col-lg-6">
+                    <div class="col-12 col-md-6 col-lg-4">
                         <h4><i class="fas fa-user-lock"></i> Digital Signature</h4>
                         <p>
                             <b>MUST READ:</b> When you save a PDF with this tool, a cryptographic signature is attached.
@@ -65,6 +65,24 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                         <div class="btn btn-danger m-1" onclick="exportPrivateKey()"><i class="fas fa-download"></i> Back up private key</div>
                         <div class="btn btn-danger m-1" onclick="importPrivateKey()"><i class="fas fa-upload"></i> Restore private key</div>
                     </div>
+                    <div class="col-12 col-md-6 col-lg-4" id="appOptionsSettings">
+                        <h4><i class="fas fa-cog"></i> App Options</h4>
+                        Button size: <select class="form-control" id="button_size">
+                            <option value="lg" selected>Large</option>
+                            <option value="sm">Small</option>
+                        </select>
+                        Color theme: <select class="form-control" id="color_theme">
+                            <option value="purple" selected>Purple</option>
+                            <option value="green">Green</option>
+                            <option value="red">Red</option>
+                            <option value="aqua">Aqua</option>
+                            <option value="ocean">Ocean</option>
+                            <option value="dusty">Dusty</option>
+                            <option value="lilac">Lilac</option>
+                            <option value="spring">Spring</option>
+                            <option value="shadow">Shadow</option>
+                        </select>
+                    </div>
                 </div>
             </div>
             <div class="modal-footer">

src/js/main.js

@@ -26,6 +26,8 @@ function openSettingsModal() {
     $("#settingsModal #notary_idnumber").val(getStorage("notary_idnumber"));
     $("#settingsModal #notary_state").val(getStorage("notary_state"));
 
+    $("#settingsModal #color_theme").val(getStorage("color_theme"));
+    $("#settingsModal #button_size").val(getStorage("button_size"));
     // show preview of stamp
     if (inStorage("notary_state")) {
         getStampSvg(function (svg) {
@@ -58,6 +60,9 @@ function saveSettingsModal() {
     if (inStorage("notary_signature")) {
         $("#settingsModal #signature-preview").attr("src", "data:image/svg+xml;base64," + btoa(getStorage("notary_signature")));
     }
+
+    setStorage("color_theme", $("#appOptionsSettings #color_theme option:selected").val());
+    setAppTheme(getStorage("color_theme"));
 }
 
 function initSignaturePad() {
@@ -123,7 +128,7 @@ function trimAndShrinkSVG(svgstring) {
     return svg.outerHTML;
 }
 
-$("body").on("input change paste", "#settingsModal input", function () {
+$("body").on("input change paste", "#notaryProfileSettings input,#notaryProfileSettings select", function () {
     getStampSvgWithValues({
         name: $("#settingsModal #notary_name").val(),
         location: $("#settingsModal #notary_location").val(),
@@ -134,3 +139,13 @@ $("body").on("input change paste", "#settingsModal input", function () {
         $("#settingsModal #stamp-preview").attr("src", "data:image/svg+xml;base64," + btoa(svg));
     });
 });
+
+$("body").on("input change paste", "#appOptionsSettings select", function () {
+    setAppTheme($("#appOptionsSettings #color_theme option:selected").val());
+});
+
+function setAppTheme(theme) {
+    $("body").removeClass().addClass("theme-" + theme);
+}
+
+setAppTheme(getStorage("color_theme"));