Update TGBeta.ps1

TGBeta.ps1

@@ -380,67 +380,103 @@ 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>
+          :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: #1e1e1e;
+        background-color: var(--background-color);
-            color: #ffffff;
+        color: var(--white-color);
     }
+
     .logo-container {
         text-align: left;
         padding: 20px;
-            background-color: #1e1e1e; /* Matches the background color */
+        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: #1e1e1e;
+        background-color: var(--background-color);
         padding: 10px;
     }
+
     .sidebar button {
         display: block;
         width: 100%;
         margin-bottom: 10px;
         padding: 10px;
-            color: white;
+        color: var(--white-color);
-            background-color: #444;
+        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: #007bff;
+        background-color: var(--btn-sidebar-blue);
     }
+
     .sidebar button:hover {
-            background-color: #0056b3;
+        background-color: var(--btn-hover);
-            transform: scale(1.05);
+        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;
@@ -448,20 +484,23 @@ function GetHtmlContent {
         display: flex;
         align-items: center;
     }
+
     .password-input,
     .dropdown {
         width: 30%;
         padding: 10px;
         margin-bottom: 20px;
         border-radius: 5px;
-            border: 1px solid #555;
+        border: 1px solid var(--gray-color);
-            background-color: #2e2e2e;
+        background-color: var(--background-color);
-            color: white;
+        color: var(--white-color);
     }
+
     .button-group {
         margin-top: 20px;
         text-align: right;
     }
+
     .button-group button {
         padding: 10px 20px;
         margin-left: 10px;
@@ -469,46 +508,51 @@ function GetHtmlContent {
         border-radius: 5px;
         cursor: pointer;
     }
+
     .install-button {
-            background-color: #28a745;
+        background-color: var(--btn-success);
-            color: white;
+        color: var(--white-color);
     }
+
     .install-button:disabled {
-            background-color: #6c757d;
+        background-color: var(--btn-success-disabled);
         cursor: not-allowed;
     }
+
     .exit-button {
-            background-color: #dc3545;
+        background-color: var(--btn-danger);
-            color: white;
+        color: var(--white-color);
     }
+
     .columns-container {
         display: flex;
-            justify-content: center; /* Center the columns */
+        justify-content: center;
-            gap: 20px; /* Reduce the gap to minimal space */
+        gap: 20px;
-            align-items: flex-start; /* Align the columns at the top */
+        align-items: flex-start;
-            padding: 0; /* Remove extra padding around the container */
+        padding: 0;
     }
 
     .column {
-            width: 48%; /* Adjust width to make columns more compact */
+        width: 48%;
-            border: 2px solid #444;
+        border: 2px solid var(--border-color);
         border-radius: 8px;
-            padding: 10px; /* Slightly reduce padding inside the columns */
+        padding: 10px;
-            background-color: #1e1e1e;
+        background-color: var(--background-color);
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
-            margin: 0; /* Remove extra margins */
+        margin: 0;
     }
 
     .log {
         width: 80%;
         margin-top: 20px;
         padding: 10px;
-            background-color: #333;
+        background-color: var(--dark-gray-color);
-            color: #bbb;
+        color: var(--light-gray-color);
         border-radius: 5px;
         max-height: 500px;
         overflow-y: auto;
     }
+
     @media (max-width: 768px) {
         .container {
             flex-direction: column;
@@ -517,6 +561,7 @@ function GetHtmlContent {
             width: 100%;
         }
     }
+
     </style>
 </head>
 <body>