vxaboveground/overlord
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

better UI

Browse Source
This commit is contained in:
KingKDot
2026-04-18 00:51:37 -05:00
parent ea68b6e7d0
commit daa91d9490
3 changed files with 56 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Overlord-Server/public/assets/main.css
+34 -52
View File
@@ -212,9 +212,7 @@
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
background: background: #0a0d14;
radial-gradient(120% 120% at 20% 20%, #102040 0%, transparent 45%),
radial-gradient(110% 110% at 80% 0%, #112233 0%, transparent 50%), #05070f;
background-attachment: fixed; background-attachment: fixed;
} }
@@ -334,9 +332,9 @@ p {
font-size: 12px; font-size: 12px;
} }
.pill-online { .pill-online {
background: rgba(16, 185, 129, 0.16); background: rgba(16, 185, 129, 0.08);
color: #bbf7d0; color: #86efac;
border-color: rgba(16, 185, 129, 0.3); border-color: rgba(16, 185, 129, 0.2);
} }
.pill-ghost { .pill-ghost {
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04);
@@ -348,13 +346,9 @@ p {
border-color: rgba(148, 163, 184, 0.32); border-color: rgba(148, 163, 184, 0.32);
} }
.pill-win { .pill-win {
background: linear-gradient( background: rgba(59, 130, 246, 0.1);
135deg,
rgba(59, 130, 246, 0.18),
rgba(14, 165, 233, 0.14)
);
color: #bfdbfe; color: #bfdbfe;
border-color: rgba(59, 130, 246, 0.35); border-color: rgba(59, 130, 246, 0.22);
} }
.pill-mac { .pill-mac {
background: rgba(209, 213, 219, 0.12); background: rgba(209, 213, 219, 0.12);
@@ -362,29 +356,29 @@ p {
border-color: rgba(209, 213, 219, 0.22); border-color: rgba(209, 213, 219, 0.22);
} }
.pill-ubuntu { .pill-ubuntu {
background: rgba(249, 115, 22, 0.16); background: rgba(249, 115, 22, 0.08);
color: #fed7aa; color: #fed7aa;
border-color: rgba(249, 115, 22, 0.3); border-color: rgba(249, 115, 22, 0.18);
} }
.pill-debian { .pill-debian {
background: rgba(236, 72, 153, 0.16); background: rgba(236, 72, 153, 0.08);
color: #fbcfe8; color: #fbcfe8;
border-color: rgba(236, 72, 153, 0.32); border-color: rgba(236, 72, 153, 0.18);
} }
.pill-arch { .pill-arch {
background: rgba(34, 211, 238, 0.16); background: rgba(34, 211, 238, 0.08);
color: #a5f3fc; color: #a5f3fc;
border-color: rgba(34, 211, 238, 0.32); border-color: rgba(34, 211, 238, 0.18);
} }
.pill-fedora { .pill-fedora {
background: rgba(59, 130, 246, 0.16); background: rgba(59, 130, 246, 0.08);
color: #c7d2fe; color: #c7d2fe;
border-color: rgba(59, 130, 246, 0.32); border-color: rgba(59, 130, 246, 0.18);
} }
.pill-linux { .pill-linux {
background: rgba(16, 185, 129, 0.14); background: rgba(16, 185, 129, 0.07);
color: #bbf7d0; color: #bbf7d0;
border-color: rgba(16, 185, 129, 0.28); border-color: rgba(16, 185, 129, 0.16);
} }
.pill-x64 { .pill-x64 {
background: rgba(94, 234, 212, 0.14); background: rgba(94, 234, 212, 0.14);
@@ -404,25 +398,20 @@ p {
/* .grid removed — was colliding with Tailwind's grid utility (display: grid) */ /* .grid removed — was colliding with Tailwind's grid utility (display: grid) */
.card { .card {
background: linear-gradient( background: rgba(30, 41, 59, 0.72) !important;
145deg, border: 1px solid rgba(51, 65, 85, 0.6) !important;
var(--color-surface),
var(--color-surface-dark)
);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 12px 14px; padding: 12px 14px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); box-shadow: none;
} }
.card.card-offline { .card.card-offline {
background: linear-gradient( background: rgba(15, 23, 40, 0.65) !important;
145deg, border-color: rgba(51, 65, 85, 0.35) !important;
rgba(10, 14, 24, 0.7), filter: saturate(0.5);
rgba(4, 6, 12, 0.9) opacity: 0.8;
); }
border-color: rgba(71, 85, 105, 0.5); article.card[data-bookmarked="true"] {
filter: saturate(0.55); border-color: rgba(202, 138, 4, 0.55) !important;
opacity: 0.85;
} }
.pill-offline { .pill-offline {
background: rgba(51, 65, 85, 0.3); background: rgba(51, 65, 85, 0.3);
@@ -430,19 +419,19 @@ p {
border-color: rgba(71, 85, 105, 0.55); border-color: rgba(71, 85, 105, 0.55);
} }
.pill-admin { .pill-admin {
background: rgba(234, 179, 8, 0.18); background: rgba(234, 179, 8, 0.08);
color: #fef08a; color: #fef08a;
border-color: rgba(234, 179, 8, 0.45); border-color: rgba(234, 179, 8, 0.22);
} }
.pill-system { .pill-system {
background: rgba(239, 68, 68, 0.18); background: rgba(239, 68, 68, 0.08);
color: #fca5a5; color: #fca5a5;
border-color: rgba(239, 68, 68, 0.45); border-color: rgba(239, 68, 68, 0.22);
} }
.pill-ti { .pill-ti {
background: rgba(168, 85, 247, 0.18); background: rgba(168, 85, 247, 0.08);
color: #d8b4fe; color: #d8b4fe;
border-color: rgba(168, 85, 247, 0.45); border-color: rgba(168, 85, 247, 0.22);
} }
.pill-perm-ok { .pill-perm-ok {
background: rgba(34, 197, 94, 0.15); background: rgba(34, 197, 94, 0.15);
@@ -533,15 +522,8 @@ p {
inset: 0; inset: 0;
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
background: var( background: none;
--card-accent, opacity: 0;
radial-gradient(
circle at 20% 20%,
rgba(99, 102, 241, 0.08),
transparent 45%
)
);
opacity: 1;
} }
.card > * { .card > * {
position: relative; position: relative;
Overlord-Server/public/assets/render.js
+3 -3
View File
@@ -403,7 +403,7 @@ export function createRenderer({
}; };
const gpuHtml = dedupeGpu(client.gpu); const gpuHtml = dedupeGpu(client.gpu);
const borderClass = client.bookmarked ? "border-yellow-600/60" : "border-slate-800"; 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) { if (!client.bookmarked && groupColor) {
card.style.setProperty("--group-color", groupColor); card.style.setProperty("--group-color", groupColor);
} else { } else {
@@ -494,8 +494,8 @@ export function createRenderer({
<div class="flex items-center gap-3"> <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> <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> <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="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-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="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>
</div> </div>
`; `;
Overlord-Server/public/index.html
+19 -19
View File
@@ -45,7 +45,7 @@
</p> </p>
</div> </div>
<span <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" id="total-pill"
>0 online</span >0 online</span
> >
@@ -53,7 +53,7 @@
<div class="flex flex-wrap gap-3 items-center"> <div class="flex flex-wrap gap-3 items-center">
<label <label
id="search-shell" 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> <i class="fa-solid fa-magnifying-glass text-slate-500"></i>
<input <input
@@ -64,7 +64,7 @@
/> />
</label> </label>
<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 <input
id="toggle-offline" id="toggle-offline"
@@ -76,7 +76,7 @@
</label> </label>
<select <select
id="filter-status" 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="all">All Status</option>
<option value="online">Online Only</option> <option value="online">Online Only</option>
@@ -84,13 +84,13 @@
</select> </select>
<select <select
id="filter-os" 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> <option value="all">All OS</option>
</select> </select>
<select <select
id="filter-group" 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="all">All Groups</option>
<option value="none">No Group</option> <option value="none">No Group</option>
@@ -98,7 +98,7 @@
<div id="country-picker-anchor" class="relative"></div> <div id="country-picker-anchor" class="relative"></div>
<select <select
id="sort" 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="stable">Default</option>
<option value="last_seen_desc">Newest</option> <option value="last_seen_desc">Newest</option>
@@ -113,13 +113,13 @@
</select> </select>
<button <button
id="select-all" 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 <i class="fa-solid fa-check"></i> Select all
</button> </button>
<button <button
id="clear-selection" 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 Clear selection
</button> </button>
@@ -127,42 +127,42 @@
<!-- Bulk Actions Toolbar --> <!-- Bulk Actions Toolbar -->
<div <div
id="bulk-toolbar" 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"> <div class="flex items-center gap-2">
<i class="fa-solid fa-check-double text-indigo-300"></i> <i class="fa-solid fa-check-double text-slate-400"></i>
<span class="text-indigo-100" <span class="text-slate-300"
><span id="selected-count">0</span> selected</span ><span id="selected-count">0</span> selected</span
> >
</div> </div>
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-2 flex-wrap">
<button <button
id="bulk-screenshot" 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 <i class="fa-solid fa-camera"></i> Screenshot
</button> </button>
<button <button
id="bulk-disconnect" 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 <i class="fa-solid fa-plug-circle-xmark"></i> Disconnect
</button> </button>
<button <button
id="bulk-uninstall" 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 <i class="fa-solid fa-trash"></i> Uninstall
</button> </button>
<button <button
id="bulk-group" 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 <i class="fa-solid fa-layer-group"></i> Set Group
</button> </button>
<button <button
id="bulk-clear" 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 Clear
</button> </button>
@@ -172,7 +172,7 @@
<div class="flex items-center justify-center gap-3 py-4"> <div class="flex items-center justify-center gap-3 py-4">
<button <button
id="prev" 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 disabled
> >
Prev Prev
@@ -180,7 +180,7 @@
<span class="text-slate-400" id="page-label"></span> <span class="text-slate-400" id="page-label"></span>
<button <button
id="next" 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 disabled
> >
Next Next