theme: add configurable button colors

assets: change buttons in all templates to use theme assets: use theme title var in main, cleanup about.html assets: add custom button colors to css assets: make bg variable in js/modal_func.js src/ui/show.php: use new theme option for btn color in show.php
silv3rr · Feb 8, 2025 · 42d21af · 42d21af
1 parent 7ec6542
commit 42d21af
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -103,6 +103,7 @@ Cutting-edge tech used:
 - Sitewho: [pywho](https://github.com/silv3rr/pywho), [ansi-escapes-to-html](https://github.com/neilime/ansi-escapes-to-html)
 - Markdown: [parsedown](https://github.com/erusev/parsedown)
 - Auth: [ip-lib](https://github.com/mlocati/ip-lib), _[apr1-md5](https://github.com/whitehat101/apr1-md5)_, _[PHP-Htpasswd](https://github.com/ozanhazer/PHP-Htpasswd)_
+- Graphs: [svg-chart-builder](https://github.com/xanpena/svg-chart-builder)
 
 # Screenshots 
 

diff --git a/assets/css/dark.css b/assets/css/dark.css
@@ -15,6 +15,7 @@
     background-color: lightgray;
 }
 [data-theme='dark'] button,
+[data-theme='dark'] button a,
 [data-theme='dark'] button.btn {  
     color: #ccc;
     background-color: #6c757d;
@@ -47,6 +48,9 @@
     border-color: whitesmoke;
     color: black;
 }
+[data-theme='dark'] .modal-content {
+    background-color: lightgray;
+}
 [data-theme='dark'] .modal-footer {
     background-color: lightgray;
     border-color: whitesmoke;

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -45,15 +45,15 @@ pre.out {
 }
 
 #spy_api_result {
-    /* display: inline-block */
+    display: none;
     margin-left: 16px;
     width: auto;
     border: solid 1px;
     border-color: gray;
     margin: 10px;
     padding: 5px;
     background-color: whitesmoke;
-    box-shadow: 3px 2px 2px lightgray;
+    box-shadow: 10px 5px 5px lightgray;
 }
 #spy_api_result a {
     font-weight: bolder;
@@ -98,8 +98,8 @@ body.show_txt {
 }
 
 .title.show_txt {
-    font-size: 20px;
     width: auto;
+    font-size: 20px;
     margin-bottom: 0px !important;
     margin-left: 16px;
     padding-left: 6px;
@@ -109,10 +109,10 @@ body.show_txt {
 }
 
 pre.show_txt {
+    width: auto;
     display: inline-block;
     background: black;
     color: lightgreen;
-    width: auto;
     margin-left: 16px;
     padding-left: 8px;
 }
@@ -126,21 +126,48 @@ textarea {
 }
 
 .btn-custom {
+    color: #000;
+    background-color: #eee;
+    border-color: #666;
+}
+
+.btn-custom:hover {
+    color: #ddd;
+    background-color: #999;
+    border-color: #666;
+}
+
+.btn-gray {
     color: #fff;
     background-color: #9b9b9b;
     border-color: #9b9b9b;
 }
 
-.btn-custom:hover {
+.btn-gray:hover {
     color: #ccc;
     background-color: #6c757d;
     border-color: #6f757d;
 }
 
+.btn-purple {
+    color: #fff;
+    background-color: #9063bd;
+    border-color: #5c4c6b;
+}
+
+.btn-purple:hover {
+    color: #fff;
+    background-color: #48137c;
+    border-color: #5c4c6b;
+}
+
+
 .btn-back,
 .btn-top,
+.btn-reload,
 .btn-end {
-    left: 85%;
+    left: 70%;
+    width: fit-content;
     font-size: 1.2em;
     background-color: #eaeaeacc;
     padding-top: 3px;
@@ -152,7 +179,11 @@ textarea {
 }
 
 .btn-back {
-    top: 5%;
+    top: 6%;
+}
+
+.btn-reload {
+    top: 1%;
 }
 
 .btn-top {
@@ -483,6 +514,10 @@ a:focus {
     background-color: var(--bg-color);
 }
 
+.modal-content {
+    background-color: white;
+}
+
 /* THEME SWITCH */
 
 .theme-switch {
@@ -514,7 +549,7 @@ a:focus {
     bottom: 0px;
     content: "";
     height: 16px;
-    left: 4px;
+    left: 3px;
     position: absolute;
     transition: .4s;
     width: 16px;

diff --git a/assets/js/modal_func.js b/assets/js/modal_func.js
@@ -30,7 +30,7 @@ function showModal(title, html) {
         $('iframe').hide();
         $('#bsModalLabel').text(title);
         $('.modal-body p').show();
-        $('.modal-body p').attr("style", "background-color:black");
+        $('.modal-body p').attr("class", "modal-content");
         $('.modal-body p').html($(parsed_html).text());
         //$('.modal-body p').html(parsed_html);
     }, 100);

diff --git a/src/ui/show.php b/src/ui/show.php
@@ -60,7 +60,7 @@ function show_notifications(...$args) {
         // show cmd results from controller
         if (!empty(($_SESSION['results']))) {
             foreach(($_SESSION['results']) as $result) {
-                print "  <div id='notification_results' class='alert alert-primary' role='alert'>{$result}</div>" . PHP_EOL;
+                print "  <div id='notification_results' class='alert alert-<?= cfg::get('theme')['btn-color-1'] ?>' role='alert'>{$result}</div>" . PHP_EOL;
                 print '  <p></p>' . PHP_EOL;
             }
         } else {
@@ -80,7 +80,7 @@ function show_notifications(...$args) {
                 print "  <form id='form' action='?user={$user}' method='POST'>" . PHP_EOL;
             }
             if (isset($args['reload']) && $args['reload'] === "button") {
-                print '    <button type="submit" class="btn btn-primary"><em class="fa-solid fa-retweet"></em>Reload</button>' . PHP_EOL;
+                print '    <button type="submit" class="btn btn-<?= cfg::get("theme")["btn-color-1"] ?>"><em class="fa-solid fa-retweet"></em>Reload</button>' . PHP_EOL;
             }
             print '    <p></p>' . PHP_EOL;
             print '  </form>' . PHP_EOL;

diff --git a/templates/about.html b/templates/about.html
@@ -34,15 +34,11 @@
                     and can be used to view logs, edit config files and browse site. Also has a browser terminal
                     that displays tools like gl_spy, useredit and bot partyline (using websockets).
 
-                    Additional tools and libs used:
+                    Additional tools and libs used: see README.md
 
-                      Tiny File Manager offline mode (filemanager.github.io)
-                      GoTTY web terminal (github.com/sorenisanerd/gotty)
-                      gltool.sh bash (github.com/silv3rr/scripts)
-                      pyspy flask mode (github.com/silv3rr/pyspy)
-                      pywho (github.com/silv3rr/pywho)
 
 
+                                                                                    [<span style="color:blue"><strong>G</strong></span>] Goodbye   ..NO CARRIER
 
 </pre>
 </span>
diff --git a/templates/change.html.php b/templates/change.html.php
@@ -34,7 +34,7 @@
             </div>
             <div class="col-amt-4">
               <span class=" col-form-label-sm text-muted">
-                <button type="button" id="ip_reset" onclick="document.getElementById('ip_add').value='';" value="Clear" class="btn btn-outline-secondary btn-sm" />
+                <button type="button" id="ip_reset" onclick="document.getElementById('ip_add').value='';" value="Clear" class="btn btn-outline-<?= cfg::get('theme')['btn-color-2'] ?> btn-sm" />
                   <em class="fa-solid fa-eraser"></em>Clear
                 </button>
               </span>
@@ -71,7 +71,7 @@
       <?php if (count($user_groups['current']) > 0): ?>
         <div class="col-9 bg-white align-items-center border rounded text-break ml-2 mb-2 pt-2 pb-2">
           <?php foreach ($user_groups['current'] as $group => $gadmin): ?>
-            <span class="badge badge-pill badge-secondary pt-0 pb-0">
+            <span class="badge badge-pill badge-<?= cfg::get('theme')['btn-color-2'] ?> pt-0 pb-0">
               <?= $group ?>
               <?php if ($gadmin): ?>
                 <em title="User is Group Admin" class='fa-solid fa-circle-user'></em>
@@ -83,7 +83,7 @@
           <?php endforeach ?>
         <?php $user_pgroups = $data->get_user_pgroup(); if (!empty($user_pgroups)): ?>
         <?php foreach ($user_pgroups as $pgroup): ?>
-          <span title="Private Group" class="badge badge-pill badge-secondary  pt-0 pb-0"">
+          <span title="Private Group" class="badge badge-pill badge-<?= cfg::get('theme')['btn-color-2'] ?>  pt-0 pb-0"">
             *<?= $pgroup ?>
             <em class='fa-solid fa-shield-halved text-light'></em>
             <button title="Remove pgroup from user" type='submit' id='del_user_pgroup' name='userGrpCmd[]' value='del_user_pgroup|<?= $pgroup ?>' class='btn btn-sm btn-txt text-dark align-text-center mb-1'>
@@ -98,8 +98,8 @@
         <div class="form-row ml-1 pb-2">
           <div class="col-2"></div>
           <div class="col-amt-4">
-            <span title="Check to remove all groups from user" class='border border-secondary rounded p-2'>
-              <em class="fa-solid fa-eraser"></em>Remove <strong>all</strong> groups
+            <span title="Check to remove all groups from user" class='border border-<?= cfg::get('theme')['btn-color-2'] ?> rounded p-2'>
+              <em class="fa-solid fa-eraser"></em> Remove <strong>all</strong> groups
               <input type='checkbox' id='del_user_group_all' name='userGrpCmd[]' value='del_user_group_all|<?= implode(PHP_EOL, array_keys($user_groups["current"])) ?>'/>
             </span>
           </div>

diff --git a/templates/change_more.html.php b/templates/change_more.html.php
@@ -18,7 +18,7 @@
       </div>
       <div class="col-amt-4">
         <span class=" col-form-label-sm text-muted">
-          <button type="button" id="ip_reset" onclick="document.getElementById('flag_add').value='';" value="Clear" class="btn btn-outline-secondary btn-sm" />
+          <button type="button" id="ip_reset" onclick="document.getElementById('flag_add').value='';" value="Clear" class="btn btn-outline-<?= cfg::get('theme')['btn-color-2'] ?> btn-sm" />
             <em class="fa-solid fa-eraser"></em>Clear
           </button>
         </span>
@@ -77,7 +77,7 @@
       <label for='reset_userstats' class='col-form-label'>Stats:</label>
     </div>
     <div class="col-auto">
-      <button type="submit" name="gltoolCmd" value="show_user_stats" class="btn btn-outline-primary mr-2 mb-1">
+      <button type="submit" name="gltoolCmd" value="show_userstats" class="btn btn-outline-<?= cfg::get('theme')['btn-color-1'] ?> mr-2 mb-1">
         <em class='fa-solid fa-chart-simple'></em> Show
       </button>
       <span class='border border-warning rounded p-2' style='border-color:#ff8c00!important'>
@@ -110,15 +110,15 @@
 <div class="form-row mb-4">
   <div class="col-auto">
     <a class='btn btn-link color-custom' data-toggle="collapse" href="#colMoreOpts" role="button" aria-expanded="false" aria-controls="colMoreOpts">
-      <em class="border border-primary rounded ml-3 p-2 fa-solid fa-arrows-up-down"></em>
+      <em class="border border-<?= cfg::get('theme')['btn-color-1'] ?> rounded ml-3 p-2 fa-solid fa-arrows-up-down"></em>
       Show/hide more options
     </a>
   </div>
   <div class="col-5"></div>
-  <button type='button' id='cancel' name='cancelBtn' onclick='window.location = "?user="' class='btn btn-secondary ml-4 <?= ($data->check_user() ? "" : "disabled") ?>'>
+    <button type='button' id='cancel' name='cancelBtn' onclick='window.location = "?user="' class="btn btn-<?= cfg::get('theme')['btn-color-2'] ?> ml-4 <?= ($data->check_user() ? '' : 'disabled') ?>">
     <em class="fa-solid fa-circle-xmark"></em> Cancel
   </button>
-  <button type='submit' id='apply' name='applyBtn' class='btn btn-primary btn ml-3 <?= ($data->check_user() ? "" : "disabled") ?>'>
+  <button type='submit' id='apply' name='applyBtn' class="btn btn-<?= cfg::get('theme')['btn-color-1'] ?> ml-3 <?= ($data->check_user() ? '' : 'disabled') ?>">
     <em class="fa-solid fa-circle-check"></em> Apply
   </button>
 </div>

diff --git a/templates/groups.html.php b/templates/groups.html.php
@@ -7,18 +7,22 @@
       <div class="form-row align-items-center border rounded p-2">
         <div class="col-auto">
           <a class="btn btn-link color-custom" data-toggle="collapse" href="#colGroups" role="button" aria-expanded="false" aria-controls="colGroups">
-            <em class="border border-primary rounded p-2 fa-solid fa-arrows-up-down"></em>
+            <em class="border border-<?= cfg::get('theme')['btn-color-1'] ?> rounded p-2 fa-solid fa-arrows-up-down"></em>
             Show/hide <strong><?= count($_SESSION['groups']) ?></strong> groups...
           </a>
         </div>
         <div class="col-auto">
           <span class=" col-form-label-sm text-muted">
-            <button type="submit" name="sortList" value="sort_groups|a-z" class="btn btn-outline-secondary btn-sm"><em class="fa-solid fa-arrow-down-a-z"></em></button>
+            <button type="submit" name="sortList" value="sort_groups|a-z" class="btn btn-outline-<?= cfg::get('theme')['btn-color-2'] ?> btn-sm">
+              <em class="fa-solid fa-arrow-down-a-z"></em>
+            </button>
           </span>
         </div>
         <div class="col-auto">
           <span class=" col-form-label-sm text-muted">
-            <button type="submit" name="sortList" value="sort_groups|z-a" class="btn btn-outline-secondary btn-sm"><em class="fa-solid fa-arrow-up-a-z"></em></button>
+            <button type="submit" name="sortList" value="sort_groups|z-a" class="btn btn-outline-<?= cfg::get('theme')['btn-color-2'] ?> btn-sm">
+              <em class="fa-solid fa-arrow-up-a-z"></em>
+            </button>
           </span>
         </div>
       </div>
@@ -48,7 +52,9 @@
       <input type="text" id="new_group" name="group_add" placeholder="mygroup" class="form-control">
     </div>
     <div class="col-auto ml-2">
-      <button type="submit" id="add_group" name="grpCmd" value="group_add" class="btn btn-primary"><em class='fa-solid fa-circle-plus'></em> Add</button>
+      <button type="submit" id="add_group" name="grpCmd" value="group_add" class="btn btn-<?= cfg::get('theme')['btn-color-1'] ?>">
+        <em class='fa-solid fa-circle-plus'></em> Add
+      </button>
     </div>
   </div>
 </div>