feat: redesign UI to Hetzner Cloud style with light theme

This commit is contained in:
markmorado
2026-03-15 03:25:15 +01:00
parent ed7f1f779e
commit 284c3dfce0
10 changed files with 363 additions and 313 deletions

View File

@@ -1,5 +1,5 @@
<!doctype html>
<html lang="{{ lang }}" data-theme="dark">
<html lang="{{ lang }}" data-theme="light">
<head>
<meta charset="utf-8">
<title>{{ title or t('app_name') }}</title>
@@ -374,7 +374,7 @@
}
.custom-dialog-icon.question {
background: linear-gradient(135deg, #667eea 0%, #4f46e5 100%);
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}
.custom-dialog-title {
@@ -446,14 +446,15 @@
}
.custom-dialog-btn.primary {
background: linear-gradient(135deg, #667eea 0%, #4f46e5 100%);
background: #0ea5e9;
color: #ffffff !important;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}
.custom-dialog-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
transform: translateY(-1px);
background: #0284c7;
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}
.custom-dialog-btn.secondary {
@@ -601,7 +602,7 @@ body.update-in-progress .layout {
<div class="sidebar-workspace-section" id="sidebarWorkspaceSection">
<div class="sidebar-workspace-label">Workspace</div>
<button class="workspace-selector-btn" id="sidebarWorkspaceBtn" title="Active workspace" onclick="toggleWorkspaceDropdown(event)">
<span class="workspace-color-dot" id="sidebarWorkspaceColorDot" style="background:#667eea;"></span>
<span class="workspace-color-dot" id="sidebarWorkspaceColorDot" style="background:#0ea5e9;"></span>
<span class="workspace-name-text" id="sidebarWorkspaceName">—</span>
<i class="fa-solid fa-chevron-down" id="sidebarWorkspaceChevron" style="font-size:0.65rem; opacity:0.6; transition:transform 0.2s;"></i>
</button>
@@ -647,7 +648,7 @@ body.update-in-progress .layout {
<li><a href="/tasks" class="{{ 'active' if request.path.startswith('/tasks') else '' }}" title="Менеджер задач">
<svg class="material-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"></path><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
<span>Задачи</span>
<span id="sidebarTasksBadge" style="display:none; background:#667eea; color:#fff; font-size:.62rem; font-weight:700; border-radius:9999px; padding:1px 6px; margin-left:auto; line-height:1.5;"></span>
<span id="sidebarTasksBadge" style="display:none; background:#0ea5e9; color:#fff; font-size:.62rem; font-weight:700; border-radius:9999px; padding:1px 6px; margin-left:auto; line-height:1.5;"></span>
</a></li>
<li><a href="/settings" class="{{ 'active' if request.path.startswith('/settings') else '' }}" title="{{ t('nav_settings') }}">
<svg class="material-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
@@ -772,7 +773,7 @@ body.update-in-progress .layout {
<!-- Task Drawer -->
<div id="taskDrawer" class="task-drawer" style="display:none;">
<div class="task-drawer-header">
<h3><i class="fa-solid fa-list-check" style="color:#667eea; margin-right:.5rem;"></i> Задачи</h3>
<h3><i class="fa-solid fa-list-check" style="color:var(--primary); margin-right:.5rem;"></i> Задачи</h3>
<button class="task-drawer-close" onclick="toggleTaskDrawer()">
<i class="fa-solid fa-xmark"></i>
</button>
@@ -1039,10 +1040,10 @@ body.update-in-progress .layout {
if (!nameEl) return;
if (!ws) {
nameEl.textContent = 'Все';
if (dotEl) { dotEl.style.background = '#667eea'; dotEl.style.opacity = '0.4'; }
if (dotEl) { dotEl.style.background = '#0ea5e9'; dotEl.style.opacity = '0.4'; }
} else {
nameEl.textContent = ws.name;
if (dotEl) { dotEl.style.background = ws.color || '#667eea'; dotEl.style.opacity = '1'; }
if (dotEl) { dotEl.style.background = ws.color || '#0ea5e9'; dotEl.style.opacity = '1'; }
}
}
@@ -1055,7 +1056,7 @@ body.update-in-progress .layout {
if (isAdmin) {
const allItem = document.createElement('div');
allItem.className = 'workspace-dropdown-item' + (_activeWorkspaceId === null ? ' active' : '');
allItem.innerHTML = `<span class="workspace-dropdown-dot" style="background:#667eea;opacity:0.4;"></span><span>Все</span>`;
allItem.innerHTML = `<span class="workspace-dropdown-dot" style="background:#0ea5e9;opacity:0.4;"></span><span>Все</span>`;
allItem.onclick = (e) => { e.stopPropagation(); _wsSelect(null, null, isAdmin); };
container.appendChild(allItem);
}
@@ -1063,7 +1064,7 @@ body.update-in-progress .layout {
workspaces.forEach(ws => {
const item = document.createElement('div');
item.className = 'workspace-dropdown-item' + (_activeWorkspaceId === ws.id ? ' active' : '');
item.innerHTML = `<span class="workspace-dropdown-dot" style="background:${ws.color || '#667eea'};"></span><span>${ws.name}</span><small>${ws.server_count} серв.</small>`;
item.innerHTML = `<span class="workspace-dropdown-dot" style="background:${ws.color || '#0ea5e9'};"></span><span>${ws.name}</span><small>${ws.server_count} серв.</small>`;
item.onclick = (e) => { e.stopPropagation(); _wsSelect(ws.id, ws, isAdmin); };
container.appendChild(item);
});

View File

@@ -45,12 +45,12 @@
</div>
<div class="stat-card-v2">
<div class="stat-card-lbl">{{ t('vms') }}</div>
<div class="stat-card-val" id="statVmCount">—</div>
<div class="stat-card-val skeleton" id="statVmCount">—</div>
<div class="stat-card-sub" id="statVmSub">{{ t('loading') }}…</div>
</div>
<div class="stat-card-v2">
<div class="stat-card-lbl">{{ t('containers') }}</div>
<div class="stat-card-val" id="statCtCount">—</div>
<div class="stat-card-val skeleton" id="statCtCount">—</div>
<div class="stat-card-sub" id="statCtSub">{{ t('loading') }}…</div>
</div>
<div class="stat-card-v2">
@@ -87,7 +87,7 @@
<div class="resource-card">
<div class="resource-card-header">
<span class="resource-card-title">{{ t('cpu_usage') }}</span>
<span class="resource-pct-badge" id="cpuPct">—</span>
<span class="resource-pct-badge skeleton" id="cpuPct">—</span>
</div>
<div class="resource-mini-chart">
<canvas id="cpuMiniChart"></canvas>
@@ -99,7 +99,7 @@
<div class="resource-card">
<div class="resource-card-header">
<span class="resource-card-title">{{ t('ram_usage') }}</span>
<span class="resource-pct-badge" id="ramPct">—</span>
<span class="resource-pct-badge skeleton" id="ramPct">—</span>
</div>
<div class="resource-mini-chart">
<canvas id="ramMiniChart"></canvas>
@@ -111,7 +111,7 @@
<div class="resource-card">
<div class="resource-card-header">
<span class="resource-card-title">{{ t('storage') }}</span>
<span class="resource-pct-badge" id="diskPct">—</span>
<span class="resource-pct-badge skeleton" id="diskPct">—</span>
</div>
<div class="resource-mini-chart">
<canvas id="diskMiniChart"></canvas>
@@ -397,9 +397,9 @@ async function _refreshNodeStats(onlineServers) {
const cpuPctEl = document.getElementById('cpuPct');
const ramPctEl = document.getElementById('ramPct');
const diskPctEl = document.getElementById('diskPct');
if (cpuPctEl) { cpuPctEl.textContent = avgCpu + '%'; setPctBadgeColor(cpuPctEl, avgCpu); document.getElementById('cpuBar').style.width = avgCpu + '%'; }
if (ramPctEl) { ramPctEl.textContent = avgRam + '%'; setPctBadgeColor(ramPctEl, avgRam); document.getElementById('ramBar').style.width = avgRam + '%'; }
if (diskPctEl) { diskPctEl.textContent = avgDisk + '%'; setPctBadgeColor(diskPctEl, avgDisk); document.getElementById('diskBar').style.width = avgDisk + '%'; }
if (cpuPctEl) { cpuPctEl.classList.remove('skeleton'); cpuPctEl.textContent = avgCpu + '%'; setPctBadgeColor(cpuPctEl, avgCpu); document.getElementById('cpuBar').style.width = avgCpu + '%'; }
if (ramPctEl) { ramPctEl.classList.remove('skeleton'); ramPctEl.textContent = avgRam + '%'; setPctBadgeColor(ramPctEl, avgRam); document.getElementById('ramBar').style.width = avgRam + '%'; }
if (diskPctEl) { diskPctEl.classList.remove('skeleton'); diskPctEl.textContent = avgDisk + '%'; setPctBadgeColor(diskPctEl, avgDisk); document.getElementById('diskBar').style.width = avgDisk + '%'; }
}
// Mini charts
@@ -509,9 +509,9 @@ function renderDashboardData(data) {
const vmSub = document.getElementById('statVmSub');
const ctCount = document.getElementById('statCtCount');
const ctSub = document.getElementById('statCtSub');
if (vmCount) vmCount.textContent = totalVms;
if (vmCount) { vmCount.classList.remove('skeleton'); vmCount.textContent = totalVms; }
if (vmSub) vmSub.textContent = runningVms + ' ' + t('running').toLowerCase();
if (ctCount) ctCount.textContent = totalCt;
if (ctCount) { ctCount.classList.remove('skeleton'); ctCount.textContent = totalCt; }
if (ctSub) ctSub.textContent = runningCt + ' ' + t('running').toLowerCase();
const tbody = document.getElementById('vmTableBody');
@@ -524,7 +524,7 @@ function renderDashboardData(data) {
});
const shown = allVms.slice(0, 8);
if (shown.length === 0) {
tbody.innerHTML = `<tr><td colspan="5" style="text-align:center; color:var(--text-muted); padding:2rem 1.25rem;">${t('no_vms_found')}</td></tr>`;
tbody.innerHTML = `<tr><td colspan="5"><div style="text-align:center;padding:3rem 1.25rem;color:var(--text-muted);"><i class="fa-solid fa-server" style="font-size:2rem;margin-bottom:.75rem;display:block;opacity:.3;"></i><div style="font-size:.875rem;">${t('no_vms_found')}</div></div></td></tr>`;
} else {
tbody.innerHTML = shown.map(vm => {
const cpuPct = vm.cpu != null ? (vm.cpu * 100).toFixed(0) + '%' : '—';
@@ -557,9 +557,9 @@ function renderDashboardData(data) {
const cpuPctEl = document.getElementById('cpuPct');
const ramPctEl = document.getElementById('ramPct');
const diskPctEl = document.getElementById('diskPct');
if (cpuPctEl) { cpuPctEl.textContent = avgCpu + '%'; setPctBadgeColor(cpuPctEl, avgCpu); document.getElementById('cpuBar').style.width = avgCpu + '%'; }
if (ramPctEl) { ramPctEl.textContent = avgRam + '%'; setPctBadgeColor(ramPctEl, avgRam); document.getElementById('ramBar').style.width = avgRam + '%'; }
if (diskPctEl) { diskPctEl.textContent = avgDisk + '%'; setPctBadgeColor(diskPctEl, avgDisk); document.getElementById('diskBar').style.width = avgDisk + '%'; }
if (cpuPctEl) { cpuPctEl.classList.remove('skeleton'); cpuPctEl.textContent = avgCpu + '%'; setPctBadgeColor(cpuPctEl, avgCpu); document.getElementById('cpuBar').style.width = avgCpu + '%'; }
if (ramPctEl) { ramPctEl.classList.remove('skeleton'); ramPctEl.textContent = avgRam + '%'; setPctBadgeColor(ramPctEl, avgRam); document.getElementById('ramBar').style.width = avgRam + '%'; }
if (diskPctEl) { diskPctEl.classList.remove('skeleton'); diskPctEl.textContent = avgDisk + '%'; setPctBadgeColor(diskPctEl, avgDisk); document.getElementById('diskBar').style.width = avgDisk + '%'; }
// Mini charts from WS-provided RRD slices
const cpuHistoryAll = [], ramHistoryAll = [], diskHistoryAll = [];
@@ -716,7 +716,7 @@ async function openAlertsModal() {
<i class="fa-solid fa-triangle-exclamation" style="color:var(--warning,#f59e0b);margin-right:.5rem;"></i>
{{ t('alerts_label') }} — {{ t('last_24h') }}
</h3>
<button onclick="closeAlertsModal()" style="background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;line-height:1;">&times;</button>
<button onclick="closeAlertsModal()" aria-label="Закрыть" class="modal-close-btn">&times;</button>
</div>
<div id="alertsModalBody" style="overflow-y:auto;flex:1;min-height:80px;"></div>
<div style="margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border, rgba(255,255,255,.06));text-align:right;">

View File

@@ -132,7 +132,7 @@ function renderHistory(history) {
const actionColors = {
'allocate': '#22c55e',
'release': '#ef4444',
'reserve': '#4f46e5',
'reserve': '#0ea5e9',
'update': '#3b82f6',
'create': '#22c55e',
'delete': '#ef4444'

View File

@@ -7,18 +7,20 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#0f172a">
<meta name="theme-color" content="#f4f5f7">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
<style>
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e5e7eb;
background: #f4f5f7;
color: #1a1d23;
min-height: 100vh;
min-height: -webkit-fill-available;
display: flex;
@@ -35,10 +37,11 @@
padding: 1.5rem;
}
.login-card {
background: #020617;
border-radius: 1rem;
padding: 2rem;
border: 1px solid #1e293b;
background: #ffffff;
border-radius: 6px;
padding: 2.25rem 2rem;
border: 1px solid #dde1e9;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.login-header {
text-align: center;
@@ -46,72 +49,80 @@
}
.login-header h1 {
margin: 0 0 0.5rem 0;
font-size: 1.75rem;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.5rem;
font-weight: 700;
color: #1a1d23;
}
.login-header p {
margin: 0;
color: #9ca3af;
color: #6b7280;
font-size: 0.875rem;
}
.form-group {
margin-bottom: 1.5rem;
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #e5e7eb;
margin-bottom: 0.375rem;
color: #374151;
font-weight: 500;
font-size: 0.875rem;
}
.form-group input {
width: 100%;
padding: 0.75rem 1rem;
background: #1e293b;
border: 1px solid #334155;
border-radius: 0.5rem;
color: #e5e7eb;
font-size: 16px; /* Предотвращает зум на iOS */
transition: all 0.2s;
padding: 0.625rem 0.875rem;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 4px;
color: #1a1d23;
font-size: 16px;
font-family: inherit;
transition: all 0.15s;
-webkit-appearance: none;
appearance: none;
}
.form-group input::placeholder {
color: #9ca3af;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
border-color: #0ea5e9;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.btn {
width: 100%;
padding: 0.875rem 1rem;
background: linear-gradient(135deg, #667eea, #764ba2);
padding: 0.75rem 1rem;
background: #0ea5e9;
color: #fff;
border: none;
border-radius: 0.5rem;
font-size: 1rem;
border-radius: 4px;
font-size: 0.9375rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s;
min-height: 48px;
transition: all 0.15s;
min-height: 44px;
touch-action: manipulation;
margin-top: 0.25rem;
}
.btn:hover {
background: linear-gradient(135deg, #5a6fd6, #6a3f96);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
background: #0284c7;
}
.btn:active {
background: #0369a1;
}
.btn:disabled {
opacity: 0.5;
opacity: 0.6;
cursor: not-allowed;
}
.error-message {
background: var(--danger-light, #7f1d1d);
border: 1px solid var(--danger, #991b1b);
color: #fca5a5;
background: #fef2f2;
border: 1px solid #fca5a5;
color: #b91c1c;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
border-radius: 4px;
margin-bottom: 1rem;
font-size: 0.875rem;
display: none;
}
.error-message.show {
@@ -119,21 +130,22 @@
}
.loading {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #020617;
width: 15px;
height: 15px;
border: 2px solid rgba(255,255,255,0.4);
border-radius: 50%;
border-top-color: transparent;
border-top-color: #fff;
animation: spin 0.6s linear infinite;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.footer {
text-align: center;
margin-top: 2rem;
color: #6b7280;
font-size: 0.875rem;
margin-top: 1.5rem;
color: #9ca3af;
font-size: 0.8125rem;
}
</style>
</head>

View File

@@ -508,9 +508,10 @@ input, select, textarea {
font-size: 0.875rem;
}
input:focus, select:focus, textarea:focus {
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}
small {

View File

@@ -429,7 +429,7 @@
.tab-btn.active {
color: var(--text-on-primary);
background: var(--gradient-primary);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35);
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.tab-btn i {
@@ -628,12 +628,12 @@
.settings-section .btn-primary {
background: var(--gradient-primary);
color: var(--text-on-primary);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.settings-section .btn-primary:hover {
filter: brightness(1.1);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}
.settings-section .btn-warning {
@@ -999,7 +999,7 @@
}
.notification-info {
background: linear-gradient(135deg, #667eea 0%, #4f46e5 100%);
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}
/* Responsive */

View File

@@ -435,8 +435,8 @@ const TaskManager = (() => {
['tabResultsBtn','tabLogBtn'].forEach(id => {
const btn = document.getElementById(id);
const isActive = btn.classList.contains('active');
btn.style.color = isActive ? '#667eea' : 'var(--text-muted)';
btn.style.borderBottom = isActive ? '2px solid #667eea' : '2px solid transparent';
btn.style.color = isActive ? 'var(--primary)' : 'var(--text-muted)';
btn.style.borderBottom = isActive ? '2px solid var(--primary)' : '2px solid transparent';
});
}

View File

@@ -46,9 +46,9 @@
<div class="form-group">
<label>Цвет</label>
<div style="display:flex;align-items:center;gap:10px;">
<input type="color" id="wsColor" value="#667eea" style="width:48px;height:36px;border:none;background:none;cursor:pointer;padding:0;">
<input type="color" id="wsColor" value="#0ea5e9" style="width:48px;height:36px;border:none;background:none;cursor:pointer;padding:0;">
<div class="ws-color-presets">
<button class="ws-color-preset" style="background:#667eea;" onclick="document.getElementById('wsColor').value='#667eea'"></button>
<button class="ws-color-preset" style="background:#0ea5e9;" onclick="document.getElementById('wsColor').value='#0ea5e9'"></button>
<button class="ws-color-preset" style="background:#10b981;" onclick="document.getElementById('wsColor').value='#10b981'"></button>
<button class="ws-color-preset" style="background:#f59e0b;" onclick="document.getElementById('wsColor').value='#f59e0b'"></button>
<button class="ws-color-preset" style="background:#ef4444;" onclick="document.getElementById('wsColor').value='#ef4444'"></button>
@@ -333,9 +333,9 @@ async function loadWorkspaces() {
grid.innerHTML = workspaces.map(ws => `
<div class="ws-card" id="wsCard_${ws.id}">
<div class="ws-card-accent" style="background:${ws.color || '#667eea'};"></div>
<div class="ws-card-accent" style="background:${ws.color || '#0ea5e9'};"></div>
<div class="ws-card-header">
<span class="ws-card-dot" style="background:${ws.color || '#667eea'};"></span>
<span class="ws-card-dot" style="background:${ws.color || '#0ea5e9'};"></span>
<span class="ws-card-name">${escapeHtml(ws.name)}</span>
${ws.is_default ? '<span class="ws-card-badge">Default</span>' : ''}
</div>
@@ -418,7 +418,7 @@ async function showCreateModal() {
document.getElementById('wsModalTitle').textContent = 'Создать Workspace';
document.getElementById('wsName').value = '';
document.getElementById('wsDescription').value = '';
document.getElementById('wsColor').value = '#667eea';
document.getElementById('wsColor').value = '#0ea5e9';
await loadAssignLists();
renderServerCheckboxes([]);
@@ -441,7 +441,7 @@ async function showEditModal(id) {
document.getElementById('wsName').value = ws.name;
document.getElementById('wsDescription').value = ws.description || '';
document.getElementById('wsColor').value = ws.color || '#667eea';
document.getElementById('wsColor').value = ws.color || '#0ea5e9';
await loadAssignLists();
const selServerIds = (ws.servers || []).map(s => s.id);
@@ -470,7 +470,7 @@ async function saveWorkspace() {
return;
}
const color = document.getElementById('wsColor').value || '#667eea';
const color = document.getElementById('wsColor').value || '#0ea5e9';
const description = document.getElementById('wsDescription').value.trim() || null;
const serverIds = [...document.querySelectorAll('#wsServersList input[type=checkbox]:checked')].map(el => parseInt(el.value));