From daa91d94907d7b23f0f7dd6a5a986986762a3d7d Mon Sep 17 00:00:00 2001
From: KingKDot <why_are_you_looking_at_this@stoppeeping.com>
Date: Sat, 18 Apr 2026 00:51:37 -0500
Subject: [PATCH] better UI

---
 Overlord-Server/public/assets/main.css  | 86 ++++++++++---------------
 Overlord-Server/public/assets/render.js |  6 +-
 Overlord-Server/public/index.html       | 38 +++++------
 3 files changed, 56 insertions(+), 74 deletions(-)

diff --git a/Overlord-Server/public/assets/main.css b/Overlord-Server/public/assets/main.css
index 8f731dc..cc66a57 100644
--- a/Overlord-Server/public/assets/main.css
+++ b/Overlord-Server/public/assets/main.css
@@ -212,9 +212,7 @@
 body {
   margin: 0;
   min-height: 100vh;
-  background:
-    radial-gradient(120% 120% at 20% 20%, #102040 0%, transparent 45%),
-    radial-gradient(110% 110% at 80% 0%, #112233 0%, transparent 50%), #05070f;
+  background: #0a0d14;
   background-attachment: fixed;
 }
 
@@ -334,9 +332,9 @@ p {
   font-size: 12px;
 }
 .pill-online {
-  background: rgba(16, 185, 129, 0.16);
-  color: #bbf7d0;
-  border-color: rgba(16, 185, 129, 0.3);
+  background: rgba(16, 185, 129, 0.08);
+  color: #86efac;
+  border-color: rgba(16, 185, 129, 0.2);
 }
 .pill-ghost {
   background: rgba(255, 255, 255, 0.04);
@@ -348,13 +346,9 @@ p {
   border-color: rgba(148, 163, 184, 0.32);
 }
 .pill-win {
-  background: linear-gradient(
-    135deg,
-    rgba(59, 130, 246, 0.18),
-    rgba(14, 165, 233, 0.14)
-  );
+  background: rgba(59, 130, 246, 0.1);
   color: #bfdbfe;
-  border-color: rgba(59, 130, 246, 0.35);
+  border-color: rgba(59, 130, 246, 0.22);
 }
 .pill-mac {
   background: rgba(209, 213, 219, 0.12);
@@ -362,29 +356,29 @@ p {
   border-color: rgba(209, 213, 219, 0.22);
 }
 .pill-ubuntu {
-  background: rgba(249, 115, 22, 0.16);
+  background: rgba(249, 115, 22, 0.08);
   color: #fed7aa;
-  border-color: rgba(249, 115, 22, 0.3);
+  border-color: rgba(249, 115, 22, 0.18);
 }
 .pill-debian {
-  background: rgba(236, 72, 153, 0.16);
+  background: rgba(236, 72, 153, 0.08);
   color: #fbcfe8;
-  border-color: rgba(236, 72, 153, 0.32);
+  border-color: rgba(236, 72, 153, 0.18);
 }
 .pill-arch {
-  background: rgba(34, 211, 238, 0.16);
+  background: rgba(34, 211, 238, 0.08);
   color: #a5f3fc;
-  border-color: rgba(34, 211, 238, 0.32);
+  border-color: rgba(34, 211, 238, 0.18);
 }
 .pill-fedora {
-  background: rgba(59, 130, 246, 0.16);
+  background: rgba(59, 130, 246, 0.08);
   color: #c7d2fe;
-  border-color: rgba(59, 130, 246, 0.32);
+  border-color: rgba(59, 130, 246, 0.18);
 }
 .pill-linux {
-  background: rgba(16, 185, 129, 0.14);
+  background: rgba(16, 185, 129, 0.07);
   color: #bbf7d0;
-  border-color: rgba(16, 185, 129, 0.28);
+  border-color: rgba(16, 185, 129, 0.16);
 }
 .pill-x64 {
   background: rgba(94, 234, 212, 0.14);
@@ -404,25 +398,20 @@ p {
 
 /* .grid removed — was colliding with Tailwind's grid utility (display: grid) */
 .card {
-  background: linear-gradient(
-    145deg,
-    var(--color-surface),
-    var(--color-surface-dark)
-  );
-  border: 1px solid var(--color-border);
+  background: rgba(30, 41, 59, 0.72) !important;
+  border: 1px solid rgba(51, 65, 85, 0.6) !important;
   border-radius: var(--radius-lg);
   padding: 12px 14px;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+  box-shadow: none;
 }
 .card.card-offline {
-  background: linear-gradient(
-    145deg,
-    rgba(10, 14, 24, 0.7),
-    rgba(4, 6, 12, 0.9)
-  );
-  border-color: rgba(71, 85, 105, 0.5);
-  filter: saturate(0.55);
-  opacity: 0.85;
+  background: rgba(15, 23, 40, 0.65) !important;
+  border-color: rgba(51, 65, 85, 0.35) !important;
+  filter: saturate(0.5);
+  opacity: 0.8;
+}
+article.card[data-bookmarked="true"] {
+  border-color: rgba(202, 138, 4, 0.55) !important;
 }
 .pill-offline {
   background: rgba(51, 65, 85, 0.3);
@@ -430,19 +419,19 @@ p {
   border-color: rgba(71, 85, 105, 0.55);
 }
 .pill-admin {
-  background: rgba(234, 179, 8, 0.18);
+  background: rgba(234, 179, 8, 0.08);
   color: #fef08a;
-  border-color: rgba(234, 179, 8, 0.45);
+  border-color: rgba(234, 179, 8, 0.22);
 }
 .pill-system {
-  background: rgba(239, 68, 68, 0.18);
+  background: rgba(239, 68, 68, 0.08);
   color: #fca5a5;
-  border-color: rgba(239, 68, 68, 0.45);
+  border-color: rgba(239, 68, 68, 0.22);
 }
 .pill-ti {
-  background: rgba(168, 85, 247, 0.18);
+  background: rgba(168, 85, 247, 0.08);
   color: #d8b4fe;
-  border-color: rgba(168, 85, 247, 0.45);
+  border-color: rgba(168, 85, 247, 0.22);
 }
 .pill-perm-ok {
   background: rgba(34, 197, 94, 0.15);
@@ -533,15 +522,8 @@ p {
   inset: 0;
   z-index: 0;
   pointer-events: none;
-  background: var(
-    --card-accent,
-    radial-gradient(
-      circle at 20% 20%,
-      rgba(99, 102, 241, 0.08),
-      transparent 45%
-    )
-  );
-  opacity: 1;
+  background: none;
+  opacity: 0;
 }
 .card > * {
   position: relative;
diff --git a/Overlord-Server/public/assets/render.js b/Overlord-Server/public/assets/render.js
index 94ef69c..3f7b54c 100644
--- a/Overlord-Server/public/assets/render.js
+++ b/Overlord-Server/public/assets/render.js
@@ -403,7 +403,7 @@ export function createRenderer({
     };
     const gpuHtml = dedupeGpu(client.gpu);
     const borderClass = client.bookmarked ? "border-yellow-600/60" : "border-slate-800";
-    card.className = `card rounded-xl border ${borderClass} bg-slate-900/70 p-4 shadow-lg ${client.online ? "" : "card-offline"} tone-${os.tone}`;
+    card.className = `card rounded-xl border ${borderClass} p-4 ${client.online ? "" : "card-offline"}`;
     if (!client.bookmarked && groupColor) {
       card.style.setProperty("--group-color", groupColor);
     } else {
@@ -494,8 +494,8 @@ export function createRenderer({
         <div class="flex items-center gap-3">
           <button class="bookmark-btn inline-flex items-center justify-center w-9 h-9 rounded-lg border ${client.bookmarked ? "border-yellow-600 bg-yellow-900/50 text-yellow-300" : "border-slate-700 bg-slate-800/50 text-slate-500 hover:text-yellow-300 hover:border-yellow-700"} transition-colors" data-id="${escapeHtml(client.id)}" title="${client.bookmarked ? "Remove bookmark" : "Bookmark"}"><i class="fa-${client.bookmarked ? "solid" : "regular"} fa-star"></i></button>
           <span class="text-emerald-300 font-mono text-sm inline-flex items-center gap-2"><i class="fa-solid fa-satellite-dish"></i> ${formatPing(client.pingMs)}</span>
-          ${isViewer ? "" : `<button class="command-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-slate-800 bg-slate-800/70 hover:bg-slate-700" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-bars"></i> Commands</button>`}
-          ${isViewer ? "" : `<button class="ban-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-red-800 bg-red-900/60 hover:bg-red-800 text-red-100" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-ban"></i> Ban</button>`}
+          ${isViewer ? "" : `<button class="command-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-slate-700/60 bg-slate-800/70 hover:bg-slate-700/70" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-bars"></i> Commands</button>`}
+          ${isViewer ? "" : `<button class="ban-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-red-900/60 bg-red-950/40 hover:bg-red-900/50 text-red-300" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-ban"></i> Ban</button>`}
         </div>
       </div>
     `;
diff --git a/Overlord-Server/public/index.html b/Overlord-Server/public/index.html
index 7936af3..7e9ada0 100644
--- a/Overlord-Server/public/index.html
+++ b/Overlord-Server/public/index.html
@@ -45,7 +45,7 @@
             </p>
           </div>
           <span
-            class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-blue-900/40 text-blue-100 border border-blue-700/60"
+            class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800/70 text-slate-300 border border-slate-600/60"
             id="total-pill"
             >0 online</span
           >
@@ -53,7 +53,7 @@
         <div class="flex flex-wrap gap-3 items-center">
           <label
             id="search-shell"
-            class="flex items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 w-full sm:w-auto flex-1"
+            class="flex items-center gap-2 bg-slate-800/70 border border-slate-700/60 rounded-lg px-3 py-2 w-full sm:w-auto flex-1"
           >
             <i class="fa-solid fa-magnifying-glass text-slate-500"></i>
             <input
@@ -64,7 +64,7 @@
             />
           </label>
           <label
-            class="inline-flex items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-slate-100"
+            class="inline-flex items-center gap-2 bg-slate-800/70 border border-slate-700/60 rounded-lg px-3 py-2 text-slate-300"
           >
             <input
               id="toggle-offline"
@@ -76,7 +76,7 @@
           </label>
           <select
             id="filter-status"
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-slate-100"
+            class="bg-slate-800/70 border border-slate-700/60 rounded-lg px-3 py-2 text-slate-300"
           >
             <option value="all">All Status</option>
             <option value="online">Online Only</option>
@@ -84,13 +84,13 @@
           </select>
           <select
             id="filter-os"
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-slate-100"
+            class="bg-slate-800/70 border border-slate-700/60 rounded-lg px-3 py-2 text-slate-300"
           >
             <option value="all">All OS</option>
           </select>
           <select
             id="filter-group"
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-slate-100"
+            class="bg-slate-800/70 border border-slate-700/60 rounded-lg px-3 py-2 text-slate-300"
           >
             <option value="all">All Groups</option>
             <option value="none">No Group</option>
@@ -98,7 +98,7 @@
           <div id="country-picker-anchor" class="relative"></div>
           <select
             id="sort"
-            class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-slate-100"
+            class="bg-slate-800/70 border border-slate-700/60 rounded-lg px-3 py-2 text-slate-300"
           >
             <option value="stable">Default</option>
             <option value="last_seen_desc">Newest</option>
@@ -113,13 +113,13 @@
           </select>
           <button
             id="select-all"
-            class="px-3 py-2 rounded-lg bg-slate-800/70 hover:bg-slate-700 text-slate-200 border border-slate-700 transition-colors"
+            class="px-3 py-2 rounded-lg bg-slate-800/70 hover:bg-slate-700/70 text-slate-300 border border-slate-700/60 transition-colors"
           >
             <i class="fa-solid fa-check"></i> Select all
           </button>
           <button
             id="clear-selection"
-            class="px-3 py-2 rounded-lg bg-slate-800/70 hover:bg-slate-700 text-slate-300 border border-slate-700 transition-colors"
+            class="px-3 py-2 rounded-lg bg-slate-800/70 hover:bg-slate-700/70 text-slate-400 border border-slate-700/60 transition-colors"
           >
             Clear selection
           </button>
@@ -127,42 +127,42 @@
         <!-- Bulk Actions Toolbar -->
         <div
           id="bulk-toolbar"
-          class="hidden bg-indigo-900/40 border border-indigo-700/60 rounded-lg p-3 flex flex-wrap items-center justify-between gap-3"
+          class="hidden bg-slate-800/70 border border-slate-700/60 rounded-lg p-3 flex flex-wrap items-center justify-between gap-3"
         >
           <div class="flex items-center gap-2">
-            <i class="fa-solid fa-check-double text-indigo-300"></i>
-            <span class="text-indigo-100"
+            <i class="fa-solid fa-check-double text-slate-400"></i>
+            <span class="text-slate-300"
               ><span id="selected-count">0</span> selected</span
             >
           </div>
           <div class="flex items-center gap-2 flex-wrap">
             <button
               id="bulk-screenshot"
-              class="px-3 py-2 rounded-lg bg-indigo-800/60 hover:bg-indigo-700 text-indigo-100 border border-indigo-600 transition-colors"
+              class="px-3 py-2 rounded-lg bg-slate-800/70 hover:bg-slate-700/70 text-slate-300 border border-slate-600/60 transition-colors"
             >
               <i class="fa-solid fa-camera"></i> Screenshot
             </button>
             <button
               id="bulk-disconnect"
-              class="px-3 py-2 rounded-lg bg-red-800/60 hover:bg-red-700 text-red-100 border border-red-600 transition-colors"
+              class="px-3 py-2 rounded-lg bg-slate-800/70 hover:bg-red-950/60 text-red-300 border border-red-900/60 transition-colors"
             >
               <i class="fa-solid fa-plug-circle-xmark"></i> Disconnect
             </button>
             <button
               id="bulk-uninstall"
-              class="px-3 py-2 rounded-lg bg-rose-900/70 hover:bg-rose-800 text-rose-100 border border-rose-700 transition-colors"
+              class="px-3 py-2 rounded-lg bg-slate-800/70 hover:bg-rose-950/60 text-rose-300 border border-rose-900/60 transition-colors"
             >
               <i class="fa-solid fa-trash"></i> Uninstall
             </button>
             <button
               id="bulk-group"
-              class="px-3 py-2 rounded-lg bg-blue-800/60 hover:bg-blue-700 text-blue-100 border border-blue-600 transition-colors"
+              class="px-3 py-2 rounded-lg bg-slate-800/70 hover:bg-slate-700/70 text-slate-300 border border-slate-600/60 transition-colors"
             >
               <i class="fa-solid fa-layer-group"></i> Set Group
             </button>
             <button
               id="bulk-clear"
-              class="px-3 py-2 rounded-lg bg-slate-800/60 hover:bg-slate-700 text-slate-300 border border-slate-600 transition-colors"
+              class="px-3 py-2 rounded-lg bg-slate-800/70 hover:bg-slate-700/70 text-slate-400 border border-slate-600/60 transition-colors"
             >
               Clear
             </button>
@@ -172,7 +172,7 @@
         <div class="flex items-center justify-center gap-3 py-4">
           <button
             id="prev"
-            class="px-4 py-2 rounded-lg border border-slate-800 bg-slate-800/60 hover:bg-slate-700 disabled:opacity-40"
+            class="px-4 py-2 rounded-lg border border-slate-700/60 bg-slate-800/70 hover:bg-slate-700/70 text-slate-300 disabled:opacity-40"
             disabled
           >
             Prev
@@ -180,7 +180,7 @@
           <span class="text-slate-400" id="page-label"></span>
           <button
             id="next"
-            class="px-4 py-2 rounded-lg border border-slate-800 bg-slate-800/60 hover:bg-slate-700 disabled:opacity-40"
+            class="px-4 py-2 rounded-lg border border-slate-700/60 bg-slate-800/70 hover:bg-slate-700/70 text-slate-300 disabled:opacity-40"
             disabled
           >
             Next