feat: add computer control and managed browser
This commit is contained in:
lofyer
@@ -0,0 +1,308 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>GoodBuddy 控制中心 · AI 运维仪表盘</title>
|
||||
<meta name="description" content="GoodBuddy Control Center —— AI 代理运维监控与任务管理仪表盘" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main-content">跳转到主要内容</a>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<div class="brand">
|
||||
<span class="brand-mark" aria-hidden="true">GB</span>
|
||||
<span class="brand-name">GoodBuddy 控制中心</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="navToggleBtn"
|
||||
class="nav-toggle"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="primaryNav"
|
||||
>
|
||||
<span class="visually-hidden">切换导航菜单</span>
|
||||
<span class="nav-toggle-bar" aria-hidden="true"></span>
|
||||
<span class="nav-toggle-bar" aria-hidden="true"></span>
|
||||
<span class="nav-toggle-bar" aria-hidden="true"></span>
|
||||
</button>
|
||||
|
||||
<nav id="primaryNav" class="primary-nav" aria-label="主导航">
|
||||
<ul>
|
||||
<li><a href="#overview">概览</a></li>
|
||||
<li><a href="#agents">代理状态</a></li>
|
||||
<li><a href="#tasks">任务看板</a></li>
|
||||
<li><a href="#activity">活动日志</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<button id="themeToggleBtn" class="theme-toggle" type="button" aria-pressed="false">
|
||||
<span class="theme-toggle-icon" aria-hidden="true">🌙</span>
|
||||
<span class="theme-toggle-label">深色模式</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section id="overview" class="hero" aria-labelledby="overview-heading">
|
||||
<div class="section-inner">
|
||||
<h1 id="overview-heading">今日运维概览</h1>
|
||||
<p class="hero-subtitle">实时掌握 AI 代理集群健康状况与任务执行进度</p>
|
||||
|
||||
<div class="metrics" role="list">
|
||||
<div class="metric-card" role="listitem">
|
||||
<p class="metric-label">总任务数</p>
|
||||
<p class="metric-value">128</p>
|
||||
<p class="metric-delta metric-delta--up">较昨日 +12</p>
|
||||
</div>
|
||||
<div class="metric-card" role="listitem">
|
||||
<p class="metric-label">运行中代理</p>
|
||||
<p class="metric-value">6</p>
|
||||
<p class="metric-delta metric-delta--up">全部在线</p>
|
||||
</div>
|
||||
<div class="metric-card" role="listitem">
|
||||
<p class="metric-label">已完成任务</p>
|
||||
<p class="metric-value">96</p>
|
||||
<p class="metric-delta metric-delta--up">完成率 75%</p>
|
||||
</div>
|
||||
<div class="metric-card" role="listitem">
|
||||
<p class="metric-label">平均响应时间</p>
|
||||
<p class="metric-value">340ms</p>
|
||||
<p class="metric-delta metric-delta--down">较昨日 -18ms</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="agents" class="agents" aria-labelledby="agents-heading">
|
||||
<div class="section-inner">
|
||||
<h2 id="agents-heading">代理状态</h2>
|
||||
<ul class="agent-grid">
|
||||
<li class="agent-card">
|
||||
<div class="agent-card-top">
|
||||
<span class="agent-avatar" aria-hidden="true">A1</span>
|
||||
<span class="status-badge status-running">运行中</span>
|
||||
</div>
|
||||
<h3 class="agent-name">Agent Alpha</h3>
|
||||
<p class="agent-meta">负责：数据同步 & 报表生成</p>
|
||||
<p class="agent-meta">最近活跃：2 分钟前</p>
|
||||
</li>
|
||||
<li class="agent-card">
|
||||
<div class="agent-card-top">
|
||||
<span class="agent-avatar" aria-hidden="true">B2</span>
|
||||
<span class="status-badge status-idle">空闲</span>
|
||||
</div>
|
||||
<h3 class="agent-name">Agent Beta</h3>
|
||||
<p class="agent-meta">负责：客户工单处理</p>
|
||||
<p class="agent-meta">最近活跃：15 分钟前</p>
|
||||
</li>
|
||||
<li class="agent-card">
|
||||
<div class="agent-card-top">
|
||||
<span class="agent-avatar" aria-hidden="true">G3</span>
|
||||
<span class="status-badge status-maintenance">维护中</span>
|
||||
</div>
|
||||
<h3 class="agent-name">Agent Gamma</h3>
|
||||
<p class="agent-meta">负责：库存预警检测</p>
|
||||
<p class="agent-meta">最近活跃：1 小时前</p>
|
||||
</li>
|
||||
<li class="agent-card">
|
||||
<div class="agent-card-top">
|
||||
<span class="agent-avatar" aria-hidden="true">D4</span>
|
||||
<span class="status-badge status-running">运行中</span>
|
||||
</div>
|
||||
<h3 class="agent-name">Agent Delta</h3>
|
||||
<p class="agent-meta">负责：日志汇总分析</p>
|
||||
<p class="agent-meta">最近活跃：刚刚</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tasks" class="tasks" aria-labelledby="tasks-heading">
|
||||
<div class="section-inner">
|
||||
<div class="tasks-header">
|
||||
<h2 id="tasks-heading">任务看板</h2>
|
||||
<button id="addTaskBtn" class="btn btn-primary" type="button">
|
||||
<span aria-hidden="true">+</span> 添加任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-group" role="group" aria-label="按状态筛选任务">
|
||||
<button class="filter-btn is-active" type="button" data-filter="all" aria-pressed="true">
|
||||
全部
|
||||
</button>
|
||||
<button class="filter-btn" type="button" data-filter="running" aria-pressed="false">
|
||||
运行中
|
||||
</button>
|
||||
<button class="filter-btn" type="button" data-filter="completed" aria-pressed="false">
|
||||
已完成
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p id="taskEmptyState" class="empty-state" hidden>没有符合条件的任务。</p>
|
||||
|
||||
<ul id="taskList" class="task-list">
|
||||
<li class="task-card" data-status="running">
|
||||
<div class="task-card-top">
|
||||
<h3 class="task-title">数据同步任务</h3>
|
||||
<span class="status-badge status-running">运行中</span>
|
||||
</div>
|
||||
<p class="task-meta">负责人：Agent Alpha</p>
|
||||
<p class="task-meta">截止时间：今天 18:00</p>
|
||||
</li>
|
||||
<li class="task-card" data-status="completed">
|
||||
<div class="task-card-top">
|
||||
<h3 class="task-title">客户工单自动回复</h3>
|
||||
<span class="status-badge status-completed">已完成</span>
|
||||
</div>
|
||||
<p class="task-meta">负责人：Agent Beta</p>
|
||||
<p class="task-meta">完成时间：今天 09:24</p>
|
||||
</li>
|
||||
<li class="task-card" data-status="running">
|
||||
<div class="task-card-top">
|
||||
<h3 class="task-title">每日日志汇总</h3>
|
||||
<span class="status-badge status-running">运行中</span>
|
||||
</div>
|
||||
<p class="task-meta">负责人：Agent Delta</p>
|
||||
<p class="task-meta">截止时间：今天 23:00</p>
|
||||
</li>
|
||||
<li class="task-card" data-status="completed">
|
||||
<div class="task-card-top">
|
||||
<h3 class="task-title">库存预警检测</h3>
|
||||
<span class="status-badge status-completed">已完成</span>
|
||||
</div>
|
||||
<p class="task-meta">负责人：Agent Gamma</p>
|
||||
<p class="task-meta">完成时间：昨天 21:10</p>
|
||||
</li>
|
||||
<li class="task-card" data-status="running">
|
||||
<div class="task-card-top">
|
||||
<h3 class="task-title">周报生成</h3>
|
||||
<span class="status-badge status-running">运行中</span>
|
||||
</div>
|
||||
<p class="task-meta">负责人：Agent Alpha</p>
|
||||
<p class="task-meta">截止时间：本周五 12:00</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="activity" class="activity" aria-labelledby="activity-heading">
|
||||
<div class="section-inner">
|
||||
<h2 id="activity-heading">活动日志</h2>
|
||||
|
||||
<div class="search-field">
|
||||
<label for="activitySearch" class="visually-hidden">搜索活动日志</label>
|
||||
<input
|
||||
type="search"
|
||||
id="activitySearch"
|
||||
class="search-input"
|
||||
placeholder="搜索活动日志，例如“Agent Alpha”或“同步”"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p id="activityEmptyState" class="empty-state" hidden>没有找到匹配的活动记录。</p>
|
||||
|
||||
<ul id="activityList" class="activity-list">
|
||||
<li class="activity-item">
|
||||
<span class="activity-time">10:42</span>
|
||||
<span class="activity-text">Agent Alpha 完成了「数据同步任务」的第 3 阶段</span>
|
||||
</li>
|
||||
<li class="activity-item">
|
||||
<span class="activity-time">10:31</span>
|
||||
<span class="activity-text">Agent Beta 自动回复了 12 条客户工单</span>
|
||||
</li>
|
||||
<li class="activity-item">
|
||||
<span class="activity-time">09:58</span>
|
||||
<span class="activity-text">Agent Gamma 触发了库存预警检测维护流程</span>
|
||||
</li>
|
||||
<li class="activity-item">
|
||||
<span class="activity-time">09:20</span>
|
||||
<span class="activity-text">Agent Delta 生成了每日日志汇总报告</span>
|
||||
</li>
|
||||
<li class="activity-item">
|
||||
<span class="activity-time">08:47</span>
|
||||
<span class="activity-text">系统检测到 Agent Alpha 响应时间恢复正常</span>
|
||||
</li>
|
||||
<li class="activity-item">
|
||||
<span class="activity-time">08:02</span>
|
||||
<span class="activity-text">Agent Delta 启动，开始监听新任务队列</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="section-inner">
|
||||
<p>© 2026 GoodBuddy Control Center. 保留所有权利。</p>
|
||||
<p class="footer-marker">CONTINUE_WEB_DEMO_OK</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="modal-overlay" id="taskModalOverlay" hidden></div>
|
||||
<div
|
||||
class="modal"
|
||||
id="taskModal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="taskModalTitle"
|
||||
hidden
|
||||
>
|
||||
<form id="taskForm" class="modal-form" novalidate>
|
||||
<div class="modal-header">
|
||||
<h2 id="taskModalTitle">添加新任务</h2>
|
||||
<button type="button" id="modalCloseBtn" class="modal-close" aria-label="关闭对话框">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="form-field">
|
||||
<label for="taskTitleInput">任务名称</label>
|
||||
<input
|
||||
type="text"
|
||||
id="taskTitleInput"
|
||||
name="taskTitle"
|
||||
required
|
||||
maxlength="80"
|
||||
placeholder="例如：生成月度运营报告"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="taskAssigneeSelect">负责人</label>
|
||||
<select id="taskAssigneeSelect" name="taskAssignee">
|
||||
<option value="Agent Alpha">Agent Alpha</option>
|
||||
<option value="Agent Beta">Agent Beta</option>
|
||||
<option value="Agent Gamma">Agent Gamma</option>
|
||||
<option value="Agent Delta">Agent Delta</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="taskStatusSelect">初始状态</label>
|
||||
<select id="taskStatusSelect" name="taskStatus">
|
||||
<option value="running">运行中</option>
|
||||
<option value="completed">已完成</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p id="taskFormError" class="form-error" role="alert" hidden>请填写任务名称。</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-ghost" id="modalCancelBtn">取消</button>
|
||||
<button type="submit" class="btn btn-primary">保存任务</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,382 @@
|
||||
/*!
|
||||
* GoodBuddy Control Center — script.js
|
||||
* Vanilla JS only. No external dependencies.
|
||||
* CONTINUE_WEB_DEMO_OK
|
||||
*/
|
||||
/* global document, window */
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Utilities
|
||||
* ------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Escapes HTML-sensitive characters in a string so that it is
|
||||
* safe to insert as text content inside markup.
|
||||
* @param {string} value
|
||||
* @returns {string}
|
||||
*/
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function qs(selector, scope) {
|
||||
return (scope || document).querySelector(selector);
|
||||
}
|
||||
|
||||
function qsa(selector, scope) {
|
||||
return Array.prototype.slice.call((scope || document).querySelectorAll(selector));
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Theme toggle (persisted via localStorage)
|
||||
* ------------------------------------------------------- */
|
||||
|
||||
var THEME_STORAGE_KEY = "goodbuddy-theme";
|
||||
|
||||
function initTheme() {
|
||||
var themeToggleBtn = qs("#themeToggleBtn");
|
||||
var iconEl = qs(".theme-toggle-icon", themeToggleBtn);
|
||||
var labelEl = qs(".theme-toggle-label", themeToggleBtn);
|
||||
|
||||
function applyTheme(theme) {
|
||||
var label;
|
||||
if (theme === "dark") {
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
themeToggleBtn.setAttribute("aria-pressed", "true");
|
||||
if (iconEl) iconEl.textContent = "☀️";
|
||||
label = "浅色模式";
|
||||
} else {
|
||||
document.documentElement.removeAttribute("data-theme");
|
||||
themeToggleBtn.setAttribute("aria-pressed", "false");
|
||||
if (iconEl) iconEl.textContent = "🌙";
|
||||
label = "深色模式";
|
||||
}
|
||||
if (labelEl) labelEl.textContent = label;
|
||||
// .theme-toggle-label is visually hidden on narrow viewports and the
|
||||
// icon is aria-hidden, so without an explicit aria-label the button
|
||||
// has no accessible name on mobile. Keep it in sync with the visible
|
||||
// desktop label on every theme change.
|
||||
themeToggleBtn.setAttribute("aria-label", label);
|
||||
}
|
||||
|
||||
var stored = null;
|
||||
try {
|
||||
stored = window.localStorage.getItem(THEME_STORAGE_KEY);
|
||||
} catch {
|
||||
/* localStorage unavailable, use the default theme */
|
||||
}
|
||||
|
||||
var prefersDark =
|
||||
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
var initialTheme = stored || (prefersDark ? "dark" : "light");
|
||||
applyTheme(initialTheme);
|
||||
|
||||
themeToggleBtn.addEventListener("click", function () {
|
||||
var isDark = document.documentElement.getAttribute("data-theme") === "dark";
|
||||
var nextTheme = isDark ? "light" : "dark";
|
||||
applyTheme(nextTheme);
|
||||
try {
|
||||
window.localStorage.setItem(THEME_STORAGE_KEY, nextTheme);
|
||||
} catch {
|
||||
/* localStorage unavailable — ignore silently */
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Mobile navigation toggle
|
||||
* ------------------------------------------------------- */
|
||||
|
||||
function initNavToggle() {
|
||||
var navToggleBtn = qs("#navToggleBtn");
|
||||
var primaryNav = qs("#primaryNav");
|
||||
if (!navToggleBtn || !primaryNav) return;
|
||||
|
||||
navToggleBtn.addEventListener("click", function () {
|
||||
var isOpen = primaryNav.classList.toggle("is-open");
|
||||
navToggleBtn.setAttribute("aria-expanded", String(isOpen));
|
||||
});
|
||||
|
||||
qsa("a", primaryNav).forEach(function (link) {
|
||||
link.addEventListener("click", function () {
|
||||
primaryNav.classList.remove("is-open");
|
||||
navToggleBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Task board: filtering + adding tasks
|
||||
* ------------------------------------------------------- */
|
||||
|
||||
var STATUS_LABELS = {
|
||||
running: "运行中",
|
||||
completed: "已完成"
|
||||
};
|
||||
|
||||
var STATUS_BADGE_CLASS = {
|
||||
running: "status-running",
|
||||
completed: "status-completed"
|
||||
};
|
||||
|
||||
function initTaskBoard() {
|
||||
var taskList = qs("#taskList");
|
||||
var filterButtons = qsa(".filter-btn");
|
||||
var emptyState = qs("#taskEmptyState");
|
||||
|
||||
function currentFilter() {
|
||||
var activeBtn = qs(".filter-btn.is-active");
|
||||
return activeBtn ? activeBtn.getAttribute("data-filter") : "all";
|
||||
}
|
||||
|
||||
function applyFilter() {
|
||||
var filter = currentFilter();
|
||||
var cards = qsa(".task-card", taskList);
|
||||
var visibleCount = 0;
|
||||
|
||||
cards.forEach(function (card) {
|
||||
var status = card.getAttribute("data-status");
|
||||
var matches = filter === "all" || status === filter;
|
||||
card.hidden = !matches;
|
||||
if (matches) visibleCount += 1;
|
||||
});
|
||||
|
||||
if (emptyState) {
|
||||
emptyState.hidden = visibleCount !== 0;
|
||||
}
|
||||
}
|
||||
|
||||
filterButtons.forEach(function (btn) {
|
||||
btn.addEventListener("click", function () {
|
||||
filterButtons.forEach(function (b) {
|
||||
b.classList.remove("is-active");
|
||||
b.setAttribute("aria-pressed", "false");
|
||||
});
|
||||
btn.classList.add("is-active");
|
||||
btn.setAttribute("aria-pressed", "true");
|
||||
applyFilter();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Builds a task card list item using safe DOM APIs so that
|
||||
* user-provided text can never be interpreted as markup.
|
||||
*/
|
||||
function createTaskCard(title, assignee, status) {
|
||||
var li = document.createElement("li");
|
||||
li.className = "task-card";
|
||||
li.setAttribute("data-status", status);
|
||||
|
||||
var top = document.createElement("div");
|
||||
top.className = "task-card-top";
|
||||
|
||||
var heading = document.createElement("h3");
|
||||
heading.className = "task-title";
|
||||
// textContent assigns the raw string as plain text — the browser
|
||||
// never parses it as markup, so no HTML-escaping is needed (or
|
||||
// wanted) here. Escaping first would make textContent render the
|
||||
// escaped entities literally (e.g. "<img...") instead of the
|
||||
// user's exact text.
|
||||
heading.textContent = title;
|
||||
|
||||
var badge = document.createElement("span");
|
||||
badge.className = "status-badge " + STATUS_BADGE_CLASS[status];
|
||||
badge.textContent = STATUS_LABELS[status];
|
||||
|
||||
top.appendChild(heading);
|
||||
top.appendChild(badge);
|
||||
|
||||
var meta = document.createElement("p");
|
||||
meta.className = "task-meta";
|
||||
meta.textContent = "负责人：" + assignee;
|
||||
|
||||
var metaTime = document.createElement("p");
|
||||
metaTime.className = "task-meta";
|
||||
var now = new Date();
|
||||
var timeLabel =
|
||||
status === "completed"
|
||||
? "完成时间：刚刚"
|
||||
: "截止时间：" +
|
||||
String(now.getHours()).padStart(2, "0") +
|
||||
":" +
|
||||
String(now.getMinutes()).padStart(2, "0");
|
||||
metaTime.textContent = timeLabel;
|
||||
|
||||
li.appendChild(top);
|
||||
li.appendChild(meta);
|
||||
li.appendChild(metaTime);
|
||||
|
||||
return li;
|
||||
}
|
||||
|
||||
applyFilter();
|
||||
|
||||
return {
|
||||
addTask: function (title, assignee, status) {
|
||||
// Pass the trimmed, un-escaped user text straight through.
|
||||
// createTaskCard assigns it via textContent (never innerHTML),
|
||||
// so it is rendered as inert plain text and can never execute as
|
||||
// markup/script regardless of its contents.
|
||||
var card = createTaskCard(title.trim(), assignee, status);
|
||||
taskList.insertBefore(card, taskList.firstChild);
|
||||
applyFilter();
|
||||
return card;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Activity log search
|
||||
* ------------------------------------------------------- */
|
||||
|
||||
function initActivitySearch() {
|
||||
var searchInput = qs("#activitySearch");
|
||||
var activityList = qs("#activityList");
|
||||
var emptyState = qs("#activityEmptyState");
|
||||
if (!searchInput || !activityList) return;
|
||||
|
||||
function runSearch() {
|
||||
var query = searchInput.value.trim().toLowerCase();
|
||||
var items = qsa(".activity-item", activityList);
|
||||
var visibleCount = 0;
|
||||
|
||||
items.forEach(function (item) {
|
||||
var text = item.textContent.toLowerCase();
|
||||
var matches = query === "" || text.indexOf(query) !== -1;
|
||||
item.hidden = !matches;
|
||||
if (matches) visibleCount += 1;
|
||||
});
|
||||
|
||||
if (emptyState) {
|
||||
emptyState.hidden = visibleCount !== 0;
|
||||
}
|
||||
}
|
||||
|
||||
searchInput.addEventListener("input", runSearch);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Add-task modal (accessible dialog)
|
||||
* ------------------------------------------------------- */
|
||||
|
||||
function initTaskModal(taskBoard) {
|
||||
var overlay = qs("#taskModalOverlay");
|
||||
var modal = qs("#taskModal");
|
||||
var openBtn = qs("#addTaskBtn");
|
||||
var closeBtn = qs("#modalCloseBtn");
|
||||
var cancelBtn = qs("#modalCancelBtn");
|
||||
var form = qs("#taskForm");
|
||||
var titleInput = qs("#taskTitleInput");
|
||||
var assigneeSelect = qs("#taskAssigneeSelect");
|
||||
var statusSelect = qs("#taskStatusSelect");
|
||||
var errorMsg = qs("#taskFormError");
|
||||
|
||||
if (!overlay || !modal || !openBtn || !form) return;
|
||||
|
||||
var lastFocusedElement = null;
|
||||
|
||||
function getFocusableElements() {
|
||||
return qsa(
|
||||
'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])',
|
||||
modal
|
||||
).filter(function (el) {
|
||||
return el.offsetParent !== null;
|
||||
});
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
lastFocusedElement = document.activeElement;
|
||||
overlay.hidden = false;
|
||||
modal.hidden = false;
|
||||
errorMsg.hidden = true;
|
||||
form.reset();
|
||||
document.body.style.overflow = "hidden";
|
||||
titleInput.focus();
|
||||
document.addEventListener("keydown", handleKeydown);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
overlay.hidden = true;
|
||||
modal.hidden = true;
|
||||
document.body.style.overflow = "";
|
||||
document.removeEventListener("keydown", handleKeydown);
|
||||
if (lastFocusedElement && typeof lastFocusedElement.focus === "function") {
|
||||
lastFocusedElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(event) {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
closeModal();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === "Tab") {
|
||||
var focusable = getFocusableElements();
|
||||
if (focusable.length === 0) return;
|
||||
|
||||
var first = focusable[0];
|
||||
var last = focusable[focusable.length - 1];
|
||||
|
||||
if (event.shiftKey && document.activeElement === first) {
|
||||
event.preventDefault();
|
||||
last.focus();
|
||||
} else if (!event.shiftKey && document.activeElement === last) {
|
||||
event.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
openBtn.addEventListener("click", openModal);
|
||||
closeBtn.addEventListener("click", closeModal);
|
||||
cancelBtn.addEventListener("click", closeModal);
|
||||
overlay.addEventListener("click", closeModal);
|
||||
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var title = titleInput.value.trim();
|
||||
if (title === "") {
|
||||
errorMsg.hidden = false;
|
||||
titleInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
errorMsg.hidden = true;
|
||||
taskBoard.addTask(title, assigneeSelect.value, statusSelect.value);
|
||||
closeModal();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Bootstrap
|
||||
* ------------------------------------------------------- */
|
||||
|
||||
function init() {
|
||||
initTheme();
|
||||
initNavToggle();
|
||||
var taskBoard = initTaskBoard();
|
||||
initActivitySearch();
|
||||
initTaskModal(taskBoard);
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
|
||||
// Expose escapeHtml for testability / verification purposes only.
|
||||
window.__goodbuddyEscapeHtml = escapeHtml;
|
||||
})();
|
||||
|
||||
// CONTINUE_WEB_DEMO_OK
|
||||
@@ -0,0 +1,782 @@
|
||||
/* =========================================================
|
||||
GoodBuddy Control Center — styles.css
|
||||
========================================================= */
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
--color-bg: #f4f6fb;
|
||||
--color-bg-elevated: #ffffff;
|
||||
--color-bg-header: rgba(255, 255, 255, 0.92);
|
||||
--color-border: #dde3ee;
|
||||
--color-text: #1c2333;
|
||||
--color-text-muted: #5a6479;
|
||||
--color-primary: #3a5bfd;
|
||||
--color-primary-hover: #2a45d6;
|
||||
--color-primary-contrast: #ffffff;
|
||||
--color-success: #12a454;
|
||||
--color-success-bg: #e4f8ec;
|
||||
--color-warning: #b8860b;
|
||||
--color-warning-bg: #fbf1d9;
|
||||
--color-info: #2a6df4;
|
||||
--color-info-bg: #e6edff;
|
||||
--color-danger: #d43b3b;
|
||||
--color-danger-bg: #fdeaea;
|
||||
--shadow-sm: 0 1px 2px rgba(20, 26, 46, 0.06);
|
||||
--shadow-md: 0 8px 24px rgba(20, 26, 46, 0.08);
|
||||
--shadow-lg: 0 20px 48px rgba(20, 26, 46, 0.16);
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 20px;
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-base: 220ms ease;
|
||||
--focus-ring: 0 0 0 3px rgba(58, 91, 253, 0.35);
|
||||
--max-width: 1180px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
|
||||
--color-bg: #0f1220;
|
||||
--color-bg-elevated: #1a1f33;
|
||||
--color-bg-header: rgba(15, 18, 32, 0.9);
|
||||
--color-border: #2b3150;
|
||||
--color-text: #eef1fb;
|
||||
--color-text-muted: #a3aac4;
|
||||
--color-primary: #7b93ff;
|
||||
--color-primary-hover: #93a7ff;
|
||||
--color-primary-contrast: #0f1220;
|
||||
--color-success: #35d17d;
|
||||
--color-success-bg: rgba(53, 209, 125, 0.14);
|
||||
--color-warning: #e8c15b;
|
||||
--color-warning-bg: rgba(232, 193, 91, 0.14);
|
||||
--color-info: #7ea2ff;
|
||||
--color-info-bg: rgba(126, 162, 255, 0.14);
|
||||
--color-danger: #f27272;
|
||||
--color-danger-bg: rgba(242, 114, 114, 0.14);
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||||
--shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
|
||||
--focus-ring: 0 0 0 3px rgba(123, 147, 255, 0.45);
|
||||
}
|
||||
|
||||
/* ---------- Reset & base ---------- */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui,
|
||||
-apple-system, sans-serif;
|
||||
line-height: 1.6;
|
||||
transition: background-color var(--transition-base), color var(--transition-base);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.section-inner {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* ---------- Accessibility helpers ---------- */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 1rem;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
z-index: 1000;
|
||||
transition: top var(--transition-fast);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ---------- Header ---------- */
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: var(--color-bg-header);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0.85rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, var(--color-primary), #7d5bfd);
|
||||
color: #fff;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.primary-nav {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.primary-nav ul {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.primary-nav a {
|
||||
text-decoration: none;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 600;
|
||||
padding: 0.4rem 0.2rem;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.primary-nav a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: transform var(--transition-fast), background-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 0.5rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-toggle-bar {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: var(--color-text);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ---------- Hero ---------- */
|
||||
.hero {
|
||||
padding: 3rem 0 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 1.05rem;
|
||||
max-width: 46ch;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.metric-delta {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metric-delta--up {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.metric-delta--down {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* ---------- Sections generic ---------- */
|
||||
.agents,
|
||||
.tasks,
|
||||
.activity {
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
.agents h2,
|
||||
.tasks h2,
|
||||
.activity h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* ---------- Agent grid ---------- */
|
||||
.agent-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.agent-card {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.agent-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.agent-card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.agent-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-info-bg);
|
||||
color: var(--color-info);
|
||||
font-weight: 800;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.agent-meta {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.88rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
/* ---------- Status badges ---------- */
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.28rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
background: var(--color-info-bg);
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: var(--color-success-bg);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.status-idle {
|
||||
background: var(--color-warning-bg);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.status-maintenance {
|
||||
background: var(--color-danger-bg);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* ---------- Buttons ---------- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.6rem 1.1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid transparent;
|
||||
font-weight: 700;
|
||||
font-size: 0.92rem;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast), transform var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
/* ---------- Tasks ---------- */
|
||||
.tasks-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
margin: 1.25rem 0 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 700;
|
||||
font-size: 0.88rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.filter-btn.is-active {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary-contrast);
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.1rem 1.25rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.task-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.task-card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 1rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
/* ---------- Activity ---------- */
|
||||
.search-field {
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 0.65rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: baseline;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
min-width: 3.2rem;
|
||||
}
|
||||
|
||||
.activity-text {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ---------- Footer ---------- */
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding: 1.5rem 0 2.5rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.footer-marker {
|
||||
opacity: 0.55;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* ---------- Modal ---------- */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(10, 12, 24, 0.5);
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: min(480px, calc(100vw - 2rem));
|
||||
max-height: calc(100vh - 3rem);
|
||||
overflow-y: auto;
|
||||
background: var(--color-bg-elevated);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 201;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.modal[hidden],
|
||||
.modal-overlay[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 1.15rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.25rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-field input,
|
||||
.form-field select {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: var(--color-danger);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 1.1rem 1.5rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width: 900px) {
|
||||
.metrics {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.agent-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.task-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.nav-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.primary-nav {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-bg-elevated);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-md);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-nav.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.primary-nav ul {
|
||||
flex-direction: column;
|
||||
padding: 1rem 1.5rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.primary-nav a {
|
||||
display: block;
|
||||
padding: 0.6rem 0.2rem;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-toggle-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.agent-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tasks-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Reduced motion ---------- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.001ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user