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

new builder UI

Browse Source
This commit is contained in:
KingKDot
2026-07-14 10:21:20 -05:00
parent 7dbe61d287
commit cd0775987f
2 changed files with 168 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Overlord-Server/public/build.html
+138 -29
View File
@@ -37,6 +37,112 @@
.accordion-chevron.rotated {
transform: rotate(-180deg);
}
.builder-workspace {
grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr);
align-items: start;
}
.builder-card {
background:
linear-gradient(145deg, rgba(30, 41, 59, 0.3), transparent 42%),
rgba(15, 23, 42, 0.72);
box-shadow: 0 18px 45px rgba(2, 6, 23, 0.16);
}
.builder-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem;
padding: 0.35rem;
border: 1px solid rgba(51, 65, 85, 0.85);
border-radius: 0.75rem;
background: rgba(15, 23, 42, 0.72);
}
.builder-tab {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 0;
padding: 0.65rem 0.55rem;
border-radius: 0.55rem;
color: rgb(148, 163, 184);
font-size: 0.78rem;
font-weight: 600;
transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.builder-tab:hover {
color: rgb(226, 232, 240);
background: rgba(51, 65, 85, 0.45);
}
.builder-tab[aria-selected="true"] {
color: white;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(79, 70, 229, 0.9));
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.22);
}
[data-builder-panel][hidden] { display: none !important; }
.builder-profile-bar {
display: grid;
grid-template-columns: minmax(150px, 1fr) minmax(140px, 0.8fr) auto auto auto;
align-items: center;
}
.builder-profile-overflow { position: relative; }
.builder-profile-overflow > summary { list-style: none; }
.builder-profile-overflow > summary::-webkit-details-marker { display: none; }
.builder-profile-menu,
.builder-action-menu {
position: absolute;
z-index: 30;
right: 0;
top: calc(100% + 0.45rem);
min-width: 190px;
padding: 0.4rem;
border: 1px solid rgb(51, 65, 85);
border-radius: 0.65rem;
background: rgb(15, 23, 42);
box-shadow: 0 18px 38px rgba(2, 6, 23, 0.5);
}
.builder-profile-menu button,
.builder-action-menu button {
width: 100%;
justify-content: flex-start;
padding: 0.6rem 0.7rem;
border-radius: 0.45rem;
font-size: 0.8rem;
}
.builder-profile-menu button:hover,
.builder-action-menu button:hover { background: rgba(51, 65, 85, 0.7); }
.builder-platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.builder-platform-grid label { padding: 0.65rem 0.7rem; font-size: 0.8rem; }
.builder-output-rail { position: sticky; top: 5.25rem; }
.builder-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.builder-summary-card {
min-width: 0;
padding: 0.75rem;
border: 1px solid rgba(51, 65, 85, 0.8);
border-radius: 0.65rem;
background: rgba(30, 41, 59, 0.48);
}
.builder-summary-label { color: rgb(100, 116, 139); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.builder-summary-value { margin-top: 0.25rem; color: rgb(226, 232, 240); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.builder-summary-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
.builder-summary-tag { padding: 0.28rem 0.5rem; border-radius: 999px; background: rgba(30, 64, 175, 0.28); color: rgb(147, 197, 253); font-size: 0.68rem; }
.builder-action-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; position: sticky; bottom: 0.75rem; z-index: 20; padding: 0.55rem; border: 1px solid rgba(51, 65, 85, 0.9); border-radius: 0.75rem; background: rgba(15, 23, 42, 0.94); backdrop-filter: blur(14px); box-shadow: 0 14px 35px rgba(2, 6, 23, 0.4); }
.builder-more-actions { position: relative; }
.builder-more-actions > summary { list-style: none; cursor: pointer; }
.builder-more-actions > summary::-webkit-details-marker { display: none; }
@media (max-width: 1023px) {
.builder-workspace { grid-template-columns: minmax(0, 1fr); }
.builder-output-rail { position: static; }
}
@media (max-width: 680px) {
.builder-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.builder-profile-bar { grid-template-columns: minmax(0, 1fr) auto auto; }
.builder-profile-name { grid-column: 1 / -1; grid-row: 2; }
.builder-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sgn-txt-lockbox {
position: relative;
isolation: isolate;
@@ -205,7 +311,7 @@
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
<main class="px-5 py-6">
<div class="max-w-6xl mx-auto flex flex-col gap-5">
<div class="max-w-[90rem] mx-auto flex flex-col gap-5">
<div class="flex items-center justify-between gap-3 flex-wrap">
<div>
<h1 class="text-2xl font-semibold">Client Builder</h1>
@@ -213,56 +319,59 @@
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
<div class="builder-workspace grid grid-cols-1 gap-5">
<!-- Build Configuration -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-5">
<div id="builder-config-card" class="builder-card border border-slate-800 rounded-xl p-5">
<h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-gear"></i> Build Configuration
</h2>
<form id="build-form" class="flex flex-col gap-3">
<div class="border border-slate-800 rounded-lg p-3 bg-slate-800/40 flex flex-col gap-3">
<div class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-bookmark text-blue-400"></i>
Build Profiles
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
<nav class="builder-tabs" role="tablist" aria-label="Builder sections">
<button type="button" class="builder-tab" role="tab" aria-selected="true" data-builder-tab="target"><i class="fa-solid fa-display"></i><span>Target</span></button>
<button type="button" class="builder-tab" role="tab" aria-selected="false" data-builder-tab="connection"><i class="fa-solid fa-plug"></i><span>Connection</span></button>
<button type="button" class="builder-tab" role="tab" aria-selected="false" data-builder-tab="features"><i class="fa-solid fa-puzzle-piece"></i><span>Features</span></button>
<button type="button" class="builder-tab" role="tab" aria-selected="false" data-builder-tab="packaging"><i class="fa-solid fa-box"></i><span>Packaging</span></button>
</nav>
<div class="builder-profile-bar border border-slate-800 rounded-lg p-2 bg-slate-800/40 gap-2">
<select id="build-profile-select"
class="w-full px-3 py-2 bg-slate-800/70 border border-slate-700 rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors">
<option value="">Select a saved profile...</option>
</select>
<input type="text" id="build-profile-name" maxlength="64" placeholder="Profile name"
class="w-full px-3 py-2 bg-slate-800/70 border border-slate-700 rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors" />
</div>
<div class="grid grid-cols-2 md:grid-cols-5 gap-2">
class="builder-profile-name w-full px-3 py-2 bg-slate-800/70 border border-slate-700 rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors" />
<button type="button" id="profile-save-btn"
class="px-3 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors">
class="px-3 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors" title="Save profile">
<i class="fa-solid fa-floppy-disk mr-1"></i> Save
</button>
<button type="button" id="profile-load-btn"
class="px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium transition-colors">
class="px-3 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium transition-colors" title="Load profile">
<i class="fa-solid fa-folder-open mr-1"></i> Load
</button>
<details class="builder-profile-overflow">
<summary class="w-10 h-10 inline-flex items-center justify-center rounded-lg border border-slate-700 bg-slate-800 text-slate-300 hover:text-white hover:border-slate-600 cursor-pointer" aria-label="More profile actions"><i class="fa-solid fa-ellipsis"></i></summary>
<div class="builder-profile-menu">
<button type="button" id="profile-delete-btn"
class="px-3 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium transition-colors">
class="flex items-center gap-2 text-red-300 transition-colors">
<i class="fa-solid fa-trash mr-1"></i> Delete
</button>
<button type="button" id="profile-export-btn"
class="px-3 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-700 text-white text-sm font-medium transition-colors">
class="flex items-center gap-2 text-slate-200 transition-colors">
<i class="fa-solid fa-file-export mr-1"></i> Export
</button>
<button type="button" id="profile-import-btn"
class="px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium transition-colors">
class="flex items-center gap-2 text-slate-200 transition-colors">
<i class="fa-solid fa-file-import mr-1"></i> Import
</button>
</div>
</details>
</div>
<input type="file" id="profile-import-file" accept="application/json,.json" class="hidden" />
<p class="text-xs text-slate-500">Profiles are saved per user on the server and can be exported/imported as JSON files.</p>
</div>
<!-- == Section 1: Target Platforms (open) == -->
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="true">
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="true" data-builder-panel="target">
<button type="button" class="accordion-header w-full flex items-center justify-between px-4 py-3 bg-slate-800/50 hover:bg-slate-800/80 transition-colors text-left">
<span class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-display text-slate-400"></i> Target Platforms
@@ -271,7 +380,7 @@
</button>
<div class="accordion-body">
<div class="accordion-inner px-4 pb-4 pt-3">
<div class="grid grid-cols-2 gap-2">
<div class="builder-platform-grid grid gap-2">
<label class="flex items-center gap-2 p-3 bg-slate-800/60 border border-slate-700 rounded-lg cursor-pointer hover:border-blue-500 transition-colors">
<input type="checkbox" name="platform" value="windows-amd64" class="w-4 h-4" checked />
<span><i class="fa-brands fa-windows text-blue-400"></i> Windows x64</span>
@@ -338,7 +447,7 @@
</div>
<!-- == Section 2: Connection & Identity (open) == -->
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="true">
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="true" data-builder-panel="connection" hidden>
<button type="button" class="accordion-header w-full flex items-center justify-between px-4 py-3 bg-slate-800/50 hover:bg-slate-800/80 transition-colors text-left">
<span class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-plug text-slate-400"></i> Connection &amp; Identity
@@ -439,7 +548,7 @@
</div>
<!-- == Section 3: Build Options (open) == -->
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="true">
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="false" data-builder-panel="packaging" hidden>
<button type="button" class="accordion-header w-full flex items-center justify-between px-4 py-3 bg-slate-800/50 hover:bg-slate-800/80 transition-colors text-left">
<span class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-sliders text-slate-400"></i> Build Options
@@ -649,7 +758,7 @@
</div>
<!-- == Section 4: Features == -->
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="true">
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="true" data-builder-panel="features" hidden>
<button type="button" class="accordion-header w-full flex items-center justify-between px-4 py-3 bg-slate-800/50 hover:bg-slate-800/80 transition-colors text-left">
<span class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-puzzle-piece text-cyan-400"></i> Features
@@ -728,7 +837,7 @@
</div>
<!-- == Section 5: Persistence (collapsed) == -->
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="false">
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="false" data-builder-panel="packaging" hidden>
<button type="button" class="accordion-header w-full flex items-center justify-between px-4 py-3 bg-slate-800/50 hover:bg-slate-800/80 transition-colors text-left">
<span class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-power-off text-orange-400"></i>
@@ -828,7 +937,7 @@
</div>
<!-- == Section 6: Windows Settings (hidden until a windows-* platform is checked) == -->
<div id="windows-settings-section" class="accordion-section border border-slate-800 rounded-lg overflow-hidden hidden" data-open="false">
<div id="windows-settings-section" class="accordion-section border border-slate-800 rounded-lg overflow-hidden hidden" data-open="false" data-builder-panel="packaging">
<button type="button" class="accordion-header w-full flex items-center justify-between px-4 py-3 bg-slate-800/50 hover:bg-slate-800/80 transition-colors text-left">
<span class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-brands fa-windows text-blue-400"></i>
@@ -930,7 +1039,7 @@
</div>
<!-- == Section 6: Bind Files (collapsed) == -->
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="false">
<div class="accordion-section border border-slate-800 rounded-lg overflow-hidden" data-open="false" data-builder-panel="packaging" hidden>
<button type="button" class="accordion-header w-full flex items-center justify-between px-4 py-3 bg-slate-800/50 hover:bg-slate-800/80 transition-colors text-left">
<span class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-paperclip text-violet-400"></i>
@@ -971,7 +1080,7 @@
</div>
<!-- == Build Plugin Settings (loaded from server-side plugins) == -->
<div id="build-plugins-section" class="accordion-section border border-slate-800 rounded-lg overflow-hidden hidden" data-open="false">
<div id="build-plugins-section" class="accordion-section border border-slate-800 rounded-lg overflow-hidden hidden" data-open="false" data-builder-panel="packaging">
<button type="button" class="accordion-header w-full flex items-center justify-between px-4 py-3 bg-slate-800/50 hover:bg-slate-800/80 transition-colors text-left">
<span class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-puzzle-piece text-fuchsia-400"></i>
@@ -1052,7 +1161,7 @@
</div>
<div id="build-output-container"
class="bg-slate-950 border border-slate-700 rounded-lg p-4 h-96 overflow-y-auto font-mono text-sm">
class="bg-slate-950 border border-slate-700 rounded-lg p-4 min-h-[28rem] max-h-[calc(100vh-20rem)] overflow-y-auto font-mono text-sm">
<div id="build-output" class="text-slate-400">
Ready to build. Select platforms and click "Start Build".
</div>