Netsyms/IPENtool
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Add color themes

Browse Source
This commit is contained in:
Skylar Ittner 2021-07-15 17:11:05 -06:00
parent 20f46d04df
commit ca9afce43c
3 changed files with 73 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/css/main.css
View File

@ -97,4 +97,40 @@ 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%);
}

22
src/index.html
View File

@ -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">

19
src/js/main.js
View File

@ -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(),
@ -133,4 +138,14 @@ $("body").on("input change paste", "#settingsModal input", function () {
}, function (svg) {
$("#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"));