From 566e6c4a06431d27143576081b38b0c120ea7e8f Mon Sep 17 00:00:00 2001
From: Stephan Yelle <syelle@silicon-valley.ca>
Date: Sat, 25 Jan 2025 17:37:19 -0500
Subject: [PATCH] Update TGBeta.ps1

---
 TGBeta.ps1 | 305 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 175 insertions(+), 130 deletions(-)
diff --git a/TGBeta.ps1 b/TGBeta.ps1
index 34fa55c..f18b496 100644
--- a/TGBeta.ps1
+++ b/TGBeta.ps1
@@ -371,7 +371,7 @@ function Get-N8nWebhookData {
 
 # Define the HTML Content with an Off-Boarding Tab
 function GetHtmlContent {
-    @"
+    @" 
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -380,143 +380,188 @@ function GetHtmlContent {
     <title>SVS TaskGate</title>
     <link rel="icon" href="https://git.svstools.com/syelle/Logo/raw/branch/main/SVS_Favicon.ico" type="image/x-icon">
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #1e1e1e;
-            color: #ffffff;
-        }
-        .logo-container {
-            text-align: left;
-            padding: 20px;
-            background-color: #1e1e1e; /* Matches the background color */
-        }
-        .logo-container img {
-            max-width: 300px; /* Adjust size as needed */
-            height: auto;
-        }
-        .subtitle {
+          :root {
+        /* Cool Palette */
+        --background-color: rgba(18, 18, 18, 1);
+        --border-color: rgba(255,  127, 0, 0.25);
+        
+        /* Neutral Colors */
+        --white-color: rgba(255, 255, 255);
+        --gray-color: rgba(102, 102, 102);
+        --dark-gray-color: rgba(51, 51, 51);
+        --light-gray-color: rgba(187, 187, 187);
+
+        /* Sidebar Button Colors */
+        --btn-sidebar-light-gray: rgba(68, 68, 68); /* Sidebar button background */
+        --btn-sidebar-blue: rgba(30, 144, 255, 1);
+        --btn-hover: rgba(0, 86, 179, 1); /* Hover state for buttons */
+        --btn-hover-scale: 1.05; /* Scale effect for button hover */
+
+        /* Button Colors */
+        --btn-success: rgba(40, 167, 69); /* Green button background */
+        --btn-success-disabled: rgba(108, 117, 125); /* Disabled success button */
+        --btn-danger: rgba(220, 53, 69); /* Red button background */
+               
+    }
+
+    body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        background-color: var(--background-color);
+        color: var(--white-color);
+    }
+
+    .logo-container {
+        text-align: left;
+        padding: 20px;
+        background-color: var(--background-color); /* Matches the background color */
+    }
+
+    .logo-container img {
+        max-width: 300px; /* Adjust size as needed */
+        height: auto;
+    }
+
+    .subtitle {
         font-size: 1.2rem;
-        color: #666;
+        color: var(--gray-color);
         margin-top: 0.5em;
-        }
+    }
+
+    .container {
+        display: flex;
+        height: 100vh;
+    }
+
+    .sidebar {
+        width: 200px;
+        background-color: var(--background-color);
+        padding: 10px;
+    }
+
+    .sidebar button {
+        display: block;
+        width: 100%;
+        margin-bottom: 10px;
+        padding: 10px;
+        color: var(--white-color);
+        background-color: var(--btn-sidebar-light-gray);
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        text-align: left;
+        transition: background-color 0.3s ease, transform 0.2s ease;
+    }
+
+    .sidebar button.active {
+        background-color: var(--btn-sidebar-blue);
+    }
+
+    .sidebar button:hover {
+        background-color: var(--btn-hover);
+        transform: scale(var(--btn-hover-scale));
+    }
+
+    .content {
+        flex: 1;
+        padding: 20px;
+        overflow-y: auto;
+    }
+
+    .tab-content {
+        display: none;
+    }
+
+    .tab-content.active {
+        display: block;
+    }
+
+    .checkbox-group label {
+        margin: 0;
+        padding: 0;
+        line-height: 1.5;
+        display: flex;
+        align-items: center;
+    }
+
+    .password-input,
+    .dropdown {
+        width: 30%;
+        padding: 10px;
+        margin-bottom: 20px;
+        border-radius: 5px;
+        border: 1px solid var(--gray-color);
+        background-color: var(--background-color);
+        color: var(--white-color);
+    }
+
+    .button-group {
+        margin-top: 20px;
+        text-align: right;
+    }
+
+    .button-group button {
+        padding: 10px 20px;
+        margin-left: 10px;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+
+    .install-button {
+        background-color: var(--btn-success);
+        color: var(--white-color);
+    }
+
+    .install-button:disabled {
+        background-color: var(--btn-success-disabled);
+        cursor: not-allowed;
+    }
+
+    .exit-button {
+        background-color: var(--btn-danger);
+        color: var(--white-color);
+    }
+
+    .columns-container {
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+        align-items: flex-start;
+        padding: 0;
+    }
+
+    .column {
+        width: 48%;
+        border: 2px solid var(--border-color);
+        border-radius: 8px;
+        padding: 10px;
+        background-color: var(--background-color);
+        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
+        margin: 0;
+    }
+
+    .log {
+        width: 80%;
+        margin-top: 20px;
+        padding: 10px;
+        background-color: var(--dark-gray-color);
+        color: var(--light-gray-color);
+        border-radius: 5px;
+        max-height: 500px;
+        overflow-y: auto;
+    }
+
+    @media (max-width: 768px) {
         .container {
-            display: flex;
-            height: 100vh;
+            flex-direction: column;
         }
         .sidebar {
-            width: 200px;
-            background-color: #1e1e1e;
-            padding: 10px;
-        }
-        .sidebar button {
-            display: block;
             width: 100%;
-            margin-bottom: 10px;
-            padding: 10px;
-            color: white;
-            background-color: #444;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            text-align: left;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-        }
-        .sidebar button.active {
-            background-color: #007bff;
-        }
-        .sidebar button:hover {
-            background-color: #0056b3;
-            transform: scale(1.05);
-        }
-        .content {
-            flex: 1;
-            padding: 20px;
-            overflow-y: auto;
-        }
-        .tab-content {
-            display: none;
-        }
-        .tab-content.active {
-            display: block;
-        }
-        .checkbox-group label {
-            margin: 0;
-            padding: 0;
-            line-height: 1.5;
-            display: flex;
-            align-items: center;
-        }
-        .password-input,
-        .dropdown {
-            width: 30%;
-            padding: 10px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            border: 1px solid #555;
-            background-color: #2e2e2e;
-            color: white;
-        }
-        .button-group {
-            margin-top: 20px;
-            text-align: right;
-        }
-        .button-group button {
-            padding: 10px 20px;
-            margin-left: 10px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .install-button {
-            background-color: #28a745;
-            color: white;
-        }
-        .install-button:disabled {
-            background-color: #6c757d;
-            cursor: not-allowed;
-        }
-        .exit-button {
-            background-color: #dc3545;
-            color: white;
-        }
-      .columns-container {
-            display: flex;
-            justify-content: center; /* Center the columns */
-            gap: 20px; /* Reduce the gap to minimal space */
-            align-items: flex-start; /* Align the columns at the top */
-            padding: 0; /* Remove extra padding around the container */
         }
+    }
 
-        .column {
-            width: 48%; /* Adjust width to make columns more compact */
-            border: 2px solid #444;
-            border-radius: 8px;
-            padding: 10px; /* Slightly reduce padding inside the columns */
-            background-color: #1e1e1e;
-            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
-            margin: 0; /* Remove extra margins */
-        }
-
-        .log {
-            width: 80%;
-            margin-top: 20px;
-            padding: 10px;
-            background-color: #333;
-            color: #bbb;
-            border-radius: 5px;
-            max-height: 500px;
-            overflow-y: auto;
-        }
-        @media (max-width: 768px) {
-            .container {
-                flex-direction: column;
-            }
-            .sidebar {
-                width: 100%;
-            }
-        }
     </style>
 </head>
 <body>
