Implement largebtns setting

assets/css/other.css

@@ -10,7 +10,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 #userlist .row {
     overflow-y: auto;
-    
+
     /*
     160px obtained from trial-and-error adjustments, if the login screen
     is changed, this might need to be updated
@@ -25,4 +25,18 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 .nav-tabs {
     border-bottom: 1px solid #ddd;
+}
+
+.btn-huge {
+    height: 100px;
+    text-align: center;
+    font-size: 120%;
+}
+
+.btn-huge .icon {
+    display: block;
+}
+
+#sign-out-btn, #refresh-btn {
+    background-color: rgba(255,255,255,.75);
 }

cards/js/qwikclock_punchinout.js

@@ -4,6 +4,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+if (largebtns) {
+    $(".start_btn").addClass("btn-huge");
+    $(".start_btn .icon svg").addClass("fa-2x");
+    $(".stop_btn").addClass("btn-huge");
+    $(".stop_btn .icon svg").addClass("fa-2x");
+}
+
 $(".card_qwikclock_punchinout").each(function () {
     var card = $(this);
     var url = $(this).data("apiurl");

cards/qwikclock_punchinout.html

@@ -5,6 +5,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <h3 class="card-header" style="background-color: #2196F3; color: white;"><i class="far fa-clock"></i> <span class="card_title">QwikClock</span></h3>
 <div class="card-body">
-    <button class="btn btn-success btn-lg btn-block start_btn"><i class="fas fa-play"></i> Punch In</button>
-    <button class="btn btn-danger btn-lg btn-block stop_btn"><i class="fas fa-stop"></i> Punch Out</button>
+    <button class="btn btn-success btn-lg btn-block start_btn"><span class="icon"><i class="fas fa-play fa-2x"></i></span> Punch In</button>
+    <button class="btn btn-danger btn-lg btn-block stop_btn"><span class="icon"><i class="fas fa-stop"></i></span> Punch Out</button>
 </div>

index.html

@@ -45,7 +45,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         }
     });
 
-    if (kioskmode == "true") {
+    if (kioskmode) {
         nw.Window.get().enterKioskMode();
     }
 </script>

js/home.js

@@ -79,4 +79,9 @@ getApps(function (apps) {
 startSessionTimeout();
 
 $("#sign-out-btn").css("display", "inline-block");
-$("#refresh-btn").css("display", "inline-block");
+$("#refresh-btn").css("display", "inline-block");
+
+if (largebtns) {
+    $("#sign-out-btn").removeClass("btn-sm");
+    $("#refresh-btn").removeClass("btn-sm");
+}

js/settings.js

@@ -7,8 +7,8 @@
 
 var accounthubapi = localStorage.getItem("apiurl");
 var apikey = localStorage.getItem("apikey");
-var kioskmode = localStorage.getItem("kioskmode");
-var largebtns = localStorage.getItem("largebtns");
+var kioskmode = localStorage.getItem("kioskmode") == "true" ? true : false;
+var largebtns = localStorage.getItem("largebtns") == "true" ? true : false;
 
 function getAPIKey() {
     return apikey;