From 707d05c83f665b924a0857d1abe2ec073e7c6927 Mon Sep 17 00:00:00 2001
From: Roy Francis <royfrancis@users.noreply.github.com>
Date: Mon, 3 Apr 2023 13:37:03 +0200
Subject: [PATCH] allow color customization of template (#172)

---
 cli/helpers.js             | 12 +++++++++++-
 cli/index.js               |  2 ++
 lib/password_template.html | 11 ++++-------
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/cli/helpers.js b/cli/helpers.js
index c3f15c0..3f10c0d 100644
--- a/cli/helpers.js
+++ b/cli/helpers.js
@@ -374,6 +374,16 @@ function parseCommandLineArguments() {
             type: "string",
             describe: "Title for the output HTML page.",
             default: "Protected Page",
-        });
+        })
+        .option("template-color-primary", {
+            type: "string",
+            describe: "Button color.",
+            default: "#4CAF50",
+        })
+        .option("template-color-secondary", {
+            type: "string",
+            describe: "Background color of the page.",
+            default: "#76b852",
+        })
 }
 exports.parseCommandLineArguments = parseCommandLineArguments;
diff --git a/cli/index.js b/cli/index.js
index a33445b..b5915be 100755
--- a/cli/index.js
+++ b/cli/index.js
@@ -100,6 +100,8 @@ async function runStatiCrypt() {
         template_placeholder: namedArgs.templatePlaceholder,
         template_remember: namedArgs.templateRemember,
         template_title: namedArgs.templateTitle,
+        template_color_primary: namedArgs.templateColorPrimary,
+        template_color_secondary: namedArgs.templateColorSecondary,
     };
 
     const outputFilepath = namedArgs.directory.replace(/\/+$/, '') + "/" + inputFilepath;
diff --git a/lib/password_template.html b/lib/password_template.html
index e3e6d7f..66a24fe 100644
--- a/lib/password_template.html
+++ b/lib/password_template.html
@@ -52,7 +52,7 @@
         .staticrypt-form .staticrypt-decrypt-button {
             text-transform: uppercase;
             outline: 0;
-            background: #4CAF50;
+            background: /*[|template_color_primary|]*/0;
             width: 100%;
             border: 0;
             padding: 15px;
@@ -62,7 +62,8 @@
         }
 
         .staticrypt-form .staticrypt-decrypt-button:hover, .staticrypt-form .staticrypt-decrypt-button:active, .staticrypt-form .staticrypt-decrypt-button:focus {
-            background: #43A047;
+            background: /*[|template_color_primary|]*/0;
+            filter: brightness(95%);
         }
 
         .staticrypt-html {
@@ -77,11 +78,7 @@
         .staticrypt-content {
             height: 100%;
             margin-bottom: 1em;
-            background: #76b852; /* fallback for old browsers */
-            background: -webkit-linear-gradient(right, #76b852, #8DC26F);
-            background: -moz-linear-gradient(right, #76b852, #8DC26F);
-            background: -o-linear-gradient(right, #76b852, #8DC26F);
-            background: linear-gradient(to left, #76b852, #8DC26F);
+            background: /*[|template_color_secondary|]*/0;
             font-family: "Arial", sans-serif;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;