feat: redesign UI to Hetzner Cloud style with light theme
This commit is contained in:
@@ -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);
|
||||
});
|
||||
|
||||
@@ -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;">×</button>
|
||||
<button onclick="closeAlertsModal()" aria-label="Закрыть" class="modal-close-btn">×</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;">
|
||||
|
||||
@@ -132,7 +132,7 @@ function renderHistory(history) {
|
||||
const actionColors = {
|
||||
'allocate': '#22c55e',
|
||||
'release': '#ef4444',
|
||||
'reserve': '#4f46e5',
|
||||
'reserve': '#0ea5e9',
|
||||
'update': '#3b82f6',
|
||||
'create': '#22c55e',
|
||||
'delete': '#ef4444'
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -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';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user