694 lines
27 KiB
HTML
694 lines
27 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>AI + Compliance Hub - Document Management</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--bg: #fafafa;
|
||
|
|
--surface: #ffffff;
|
||
|
|
--surface-warm: var(--surface);
|
||
|
|
--fg: #111111;
|
||
|
|
--fg-2: var(--fg);
|
||
|
|
--muted: #6b6b6b;
|
||
|
|
--meta: var(--muted);
|
||
|
|
--border: #e5e5e5;
|
||
|
|
--border-soft: var(--border);
|
||
|
|
--primary: #e20074;
|
||
|
|
--accent: var(--primary);
|
||
|
|
--accent-on: #ffffff;
|
||
|
|
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||
|
|
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||
|
|
--success: #17a34a;
|
||
|
|
--warn: #eab308;
|
||
|
|
--danger: #dc2626;
|
||
|
|
--font-display: "TeleNeoWeb-Bold", "TeleNeoWeb-Medium", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
|
|
--font-body: "TeleNeoWeb-Regular", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
|
|
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||
|
|
--text-xs: 11px;
|
||
|
|
--text-sm: 13px;
|
||
|
|
--text-base: 15px;
|
||
|
|
--text-lg: 20px;
|
||
|
|
--text-xl: 24px;
|
||
|
|
--text-2xl: 32px;
|
||
|
|
--text-3xl: 48px;
|
||
|
|
--text-4xl: 64px;
|
||
|
|
--leading-body: 1.5;
|
||
|
|
--leading-tight: 1.2;
|
||
|
|
--tracking-display: -0.01em;
|
||
|
|
--space-1: 4px;
|
||
|
|
--space-2: 8px;
|
||
|
|
--space-3: 12px;
|
||
|
|
--space-4: 16px;
|
||
|
|
--space-5: 20px;
|
||
|
|
--space-6: 24px;
|
||
|
|
--space-8: 32px;
|
||
|
|
--space-12: 48px;
|
||
|
|
--space-20: 80px;
|
||
|
|
--section-y-desktop: 80px;
|
||
|
|
--section-y-tablet: 48px;
|
||
|
|
--section-y-phone: 32px;
|
||
|
|
--radius-sm: 8px;
|
||
|
|
--radius-md: 12px;
|
||
|
|
--radius-lg: 16px;
|
||
|
|
--radius-pill: 9999px;
|
||
|
|
--elev-flat: none;
|
||
|
|
--elev-ring: 0 0 0 1px var(--border);
|
||
|
|
--elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
|
||
|
|
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||
|
|
--motion-fast: 150ms;
|
||
|
|
--motion-base: 200ms;
|
||
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||
|
|
--container-max: 1440px;
|
||
|
|
--container-gutter-desktop: 24px;
|
||
|
|
--container-gutter-tablet: 16px;
|
||
|
|
--container-gutter-phone: 12px;
|
||
|
|
--sidebar-w: 240px;
|
||
|
|
color-scheme: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root:not([data-theme="light"]) {
|
||
|
|
--bg: #0f1014;
|
||
|
|
--surface: #17181d;
|
||
|
|
--surface-warm: #1d1f26;
|
||
|
|
--fg: #f5f7fb;
|
||
|
|
--fg-2: #e5e8ef;
|
||
|
|
--muted: #a2a9b8;
|
||
|
|
--meta: #858d9c;
|
||
|
|
--border: #2a2d35;
|
||
|
|
--border-soft: #21242c;
|
||
|
|
--accent-hover: color-mix(in oklab, var(--accent), white 12%);
|
||
|
|
--accent-active: color-mix(in oklab, var(--accent), black 6%);
|
||
|
|
--success: #22c55e;
|
||
|
|
--warn: #facc15;
|
||
|
|
--danger: #f87171;
|
||
|
|
--elev-raised: 0 14px 36px color-mix(in oklab, black, transparent 74%);
|
||
|
|
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 56%);
|
||
|
|
color-scheme: dark;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="dark"] {
|
||
|
|
--bg: #0f1014;
|
||
|
|
--surface: #17181d;
|
||
|
|
--surface-warm: #1d1f26;
|
||
|
|
--fg: #f5f7fb;
|
||
|
|
--fg-2: #e5e8ef;
|
||
|
|
--muted: #a2a9b8;
|
||
|
|
--meta: #858d9c;
|
||
|
|
--border: #2a2d35;
|
||
|
|
--border-soft: #21242c;
|
||
|
|
--accent-hover: color-mix(in oklab, var(--accent), white 12%);
|
||
|
|
--accent-active: color-mix(in oklab, var(--accent), black 6%);
|
||
|
|
--success: #22c55e;
|
||
|
|
--warn: #facc15;
|
||
|
|
--danger: #f87171;
|
||
|
|
--elev-raised: 0 14px 36px color-mix(in oklab, black, transparent 74%);
|
||
|
|
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 56%);
|
||
|
|
color-scheme: dark;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="light"] {
|
||
|
|
color-scheme: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
background: var(--bg);
|
||
|
|
color: var(--fg);
|
||
|
|
font-family: var(--font-body);
|
||
|
|
font-size: var(--text-base);
|
||
|
|
line-height: var(--leading-body);
|
||
|
|
text-rendering: optimizeLegibility;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
}
|
||
|
|
h1, h2, h3 {
|
||
|
|
margin: 0;
|
||
|
|
font-family: var(--font-display);
|
||
|
|
letter-spacing: var(--tracking-display);
|
||
|
|
line-height: var(--leading-tight);
|
||
|
|
}
|
||
|
|
p { margin: 0; text-wrap: pretty; }
|
||
|
|
button, input, select { font: inherit; }
|
||
|
|
a { color: inherit; text-decoration: none; }
|
||
|
|
a:hover { color: var(--fg); text-decoration: underline; }
|
||
|
|
|
||
|
|
/* ── App shell ── */
|
||
|
|
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
|
||
|
|
|
||
|
|
/* ── Sidebar ── */
|
||
|
|
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); z-index: 10; }
|
||
|
|
.sidebar-brand { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
|
||
|
|
.brand-logo { width: 26px; height: 26px; background: var(--accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
|
|
.brand-logo svg { color: #fff; }
|
||
|
|
.sidebar-brand-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1.2; }
|
||
|
|
.sidebar-brand-sub { font-size: 10px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
|
||
|
|
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||
|
|
.nav-group { padding: 0 8px 4px; }
|
||
|
|
.nav-group + .nav-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
|
||
|
|
.nav-group-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 0 8px 6px; display: block; }
|
||
|
|
.nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 6px; color: var(--muted); font-size: 13px; cursor: pointer; transition: background 140ms, color 140ms; position: relative; }
|
||
|
|
.nav-item:hover { background: color-mix(in oklab, var(--fg), transparent 94%); color: var(--fg); text-decoration: none; }
|
||
|
|
.nav-item.active { background: color-mix(in oklab, var(--accent), transparent 90%); color: var(--accent); font-weight: 600; }
|
||
|
|
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
|
||
|
|
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
|
||
|
|
.nav-item.active .nav-icon { opacity: 1; }
|
||
|
|
.nav-badge { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9999px; background: color-mix(in oklab, var(--accent), transparent 84%); color: var(--accent); font-size: 10px; font-family: var(--font-mono); display: flex; align-items: center; justify-content: center; font-weight: 700; }
|
||
|
|
.sidebar-footer { border-top: 1px solid var(--border); padding: 10px 8px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
|
||
|
|
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; }
|
||
|
|
.sidebar-user:hover { background: color-mix(in oklab, var(--fg), transparent 94%); }
|
||
|
|
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
|
|
.sidebar-user-info { min-width: 0; }
|
||
|
|
.sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
|
|
.sidebar-user-role { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
|
||
|
|
.sidebar-action { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 6px; color: var(--muted); font-size: 13px; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; transition: background 140ms, color 140ms; }
|
||
|
|
.sidebar-action:hover { background: color-mix(in oklab, var(--fg), transparent 94%); color: var(--fg); }
|
||
|
|
|
||
|
|
/* ── Content area ── */
|
||
|
|
.content-area { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
|
||
|
|
.content-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--bg), transparent 4%); backdrop-filter: blur(10px); }
|
||
|
|
.topbar-title { font-weight: 600; font-size: 15px; color: var(--fg); flex: 1; }
|
||
|
|
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 0 12px; height: 34px; width: 240px; }
|
||
|
|
.search input { border: 0; outline: none; background: transparent; width: 100%; color: var(--fg); font-size: 13px; }
|
||
|
|
.search input::placeholder { color: var(--muted); }
|
||
|
|
|
||
|
|
/* ── Buttons ── */
|
||
|
|
.btn {
|
||
|
|
min-height: 34px;
|
||
|
|
padding: 0 14px;
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
background: transparent;
|
||
|
|
color: var(--fg);
|
||
|
|
font-size: 13px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
|
||
|
|
}
|
||
|
|
.btn:hover { border-color: var(--fg); }
|
||
|
|
.btn-primary {
|
||
|
|
background: var(--accent);
|
||
|
|
border-color: var(--accent);
|
||
|
|
color: var(--accent-on);
|
||
|
|
}
|
||
|
|
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|
||
|
|
|
||
|
|
.btn:focus-visible,
|
||
|
|
.control:focus-visible,
|
||
|
|
.table-row:focus-within {
|
||
|
|
outline: none;
|
||
|
|
box-shadow: var(--focus-ring);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Page layout ── */
|
||
|
|
.page {
|
||
|
|
padding: 24px;
|
||
|
|
display: grid;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
.page-head {
|
||
|
|
display: flex;
|
||
|
|
align-items: end;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
.eyebrow {
|
||
|
|
color: var(--accent);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: var(--text-xs);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
.page-head h1 { font-size: clamp(30px, 4vw, 44px); }
|
||
|
|
.page-head p { max-width: 70ch; color: var(--muted); }
|
||
|
|
.control-bar {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1.2fr repeat(4, minmax(0, 180px));
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
.control {
|
||
|
|
min-height: 44px;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
background: var(--surface);
|
||
|
|
padding: 0 12px;
|
||
|
|
color: var(--fg);
|
||
|
|
}
|
||
|
|
.control::placeholder { color: var(--muted); }
|
||
|
|
.batch-bar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 16px;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
background: color-mix(in oklab, var(--surface), var(--bg) 16%);
|
||
|
|
padding: 14px 16px;
|
||
|
|
}
|
||
|
|
.batch-actions {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
background: var(--surface);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.table-head,
|
||
|
|
.table-row {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 28px 1.4fr 0.8fr 0.85fr 0.85fr 0.75fr 0.75fr 0.6fr;
|
||
|
|
gap: 12px;
|
||
|
|
align-items: center;
|
||
|
|
padding: 14px 16px;
|
||
|
|
}
|
||
|
|
.table-head {
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
color: var(--muted);
|
||
|
|
font-size: var(--text-xs);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
background: color-mix(in oklab, var(--surface), var(--bg) 24%);
|
||
|
|
}
|
||
|
|
.table-row {
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
background: var(--surface);
|
||
|
|
}
|
||
|
|
.table-row:last-child { border-bottom: 0; }
|
||
|
|
.table-row:hover { background: color-mix(in oklab, var(--fg), transparent 97%); }
|
||
|
|
.footer {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 16px;
|
||
|
|
min-height: 36px;
|
||
|
|
padding: 0 24px;
|
||
|
|
border-top: 1px solid var(--border);
|
||
|
|
color: var(--muted);
|
||
|
|
font-size: var(--text-xs);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
letter-spacing: 0.12em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
background: color-mix(in oklab, var(--bg), var(--surface) 12%);
|
||
|
|
margin-top: auto;
|
||
|
|
}
|
||
|
|
.footer-status {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
.footer-dot {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #19d3a2;
|
||
|
|
box-shadow: 0 0 0 4px color-mix(in oklab, #19d3a2, transparent 84%);
|
||
|
|
}
|
||
|
|
.doc-title {
|
||
|
|
display: grid;
|
||
|
|
gap: 4px;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
.doc-title strong { font-size: var(--text-sm); }
|
||
|
|
.doc-title span,
|
||
|
|
.helper {
|
||
|
|
color: var(--muted);
|
||
|
|
font-size: var(--text-sm);
|
||
|
|
}
|
||
|
|
.mono {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-variant-numeric: tabular-nums;
|
||
|
|
}
|
||
|
|
.status {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
width: fit-content;
|
||
|
|
padding: 4px 10px;
|
||
|
|
border-radius: var(--radius-pill);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: var(--text-xs);
|
||
|
|
}
|
||
|
|
.status::before {
|
||
|
|
content: "";
|
||
|
|
width: 7px;
|
||
|
|
height: 7px;
|
||
|
|
border-radius: 999px;
|
||
|
|
background: currentColor;
|
||
|
|
}
|
||
|
|
.status.ok { color: var(--success); }
|
||
|
|
.status.warn { color: color-mix(in oklab, var(--warn), black 24%); }
|
||
|
|
.status.risk { color: var(--danger); }
|
||
|
|
.link-row {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.text-link {
|
||
|
|
color: var(--muted);
|
||
|
|
font-size: var(--text-sm);
|
||
|
|
}
|
||
|
|
.text-link:hover { color: var(--accent); }
|
||
|
|
.summary {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
.summary-card {
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
background: var(--surface);
|
||
|
|
padding: 16px;
|
||
|
|
}
|
||
|
|
.summary-card strong {
|
||
|
|
display: block;
|
||
|
|
font-size: 28px;
|
||
|
|
line-height: 1;
|
||
|
|
margin: 10px 0 8px;
|
||
|
|
}
|
||
|
|
.summary-card span {
|
||
|
|
color: var(--muted);
|
||
|
|
font-size: var(--text-sm);
|
||
|
|
}
|
||
|
|
.pill {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
min-height: 22px;
|
||
|
|
padding: 0 8px;
|
||
|
|
border-radius: var(--radius-pill);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
color: var(--muted);
|
||
|
|
font-size: var(--text-xs);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Responsive ── */
|
||
|
|
@media (max-width: 700px) {
|
||
|
|
.app-shell { grid-template-columns: 1fr; }
|
||
|
|
.sidebar { display: none; }
|
||
|
|
}
|
||
|
|
@media (max-width: 1280px) {
|
||
|
|
.control-bar,
|
||
|
|
.summary { grid-template-columns: 1fr 1fr; }
|
||
|
|
.table-head,
|
||
|
|
.table-row { grid-template-columns: 28px 1.3fr 0.9fr 0.9fr 0.8fr 0.7fr; }
|
||
|
|
.table-head > :nth-child(7),
|
||
|
|
.table-head > :nth-child(8),
|
||
|
|
.table-row > :nth-child(7),
|
||
|
|
.table-row > :nth-child(8) { display: none; }
|
||
|
|
}
|
||
|
|
@media (max-width: 840px) {
|
||
|
|
.content-topbar,
|
||
|
|
.page { padding-inline: 12px; }
|
||
|
|
.control-bar,
|
||
|
|
.summary,
|
||
|
|
.page-head { grid-template-columns: 1fr; }
|
||
|
|
.page-head { display: grid; align-items: start; }
|
||
|
|
.table-head { display: none; }
|
||
|
|
.table-row {
|
||
|
|
grid-template-columns: 28px 1fr;
|
||
|
|
align-items: start;
|
||
|
|
}
|
||
|
|
.table-row > *:nth-child(n+3) {
|
||
|
|
grid-column: 2;
|
||
|
|
}
|
||
|
|
.batch-bar {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: start;
|
||
|
|
}
|
||
|
|
.footer {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: center;
|
||
|
|
padding-block: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body data-page="documents">
|
||
|
|
<div class="app-shell">
|
||
|
|
<!-- Sidebar -->
|
||
|
|
<aside class="sidebar" aria-label="Primary navigation">
|
||
|
|
<div class="sidebar-brand">
|
||
|
|
<div class="brand-logo">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||
|
|
<path d="M2 3.5h12v1.5H2zm5.25 1.5h1.5v8h-1.5zm-3 2h2.25v1.5H4.25zm5.25 0h2.25v1.5H9.5zm-3 3h2.5v1.5H6.5z" fill="currentColor"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="sidebar-brand-name">T-Systems</div>
|
||
|
|
<div class="sidebar-brand-sub">Regulation Hub</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<nav class="sidebar-nav" aria-label="Primary">
|
||
|
|
<div class="nav-group">
|
||
|
|
<span class="nav-group-label">主导航</span>
|
||
|
|
<a class="nav-item" href="index.html">
|
||
|
|
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M2 2h5v5H2zm7 0h5v5H9zM2 9h5v5H2zm7 0h5v5H9z" fill="currentColor" opacity=".7"/></svg>
|
||
|
|
概览
|
||
|
|
</a>
|
||
|
|
<a class="nav-item" href="dashboard.html">
|
||
|
|
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M1.5 2.5h13v1H1.5zm0 3h13v1H1.5zm0 3h8v1h-8zm0 3h6v1h-6zM12 8.5a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm0 1a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm.5 1v2h1.5v1H11v-3h1.5z" fill="currentColor"/></svg>
|
||
|
|
系统状态
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="nav-group">
|
||
|
|
<span class="nav-group-label">工作台</span>
|
||
|
|
<a class="nav-item active" href="document-management.html">
|
||
|
|
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M3 1h7l3 3v11H3V1zm1 1v12h8V5h-3V2H4zm5 .5V4h1.5L9 1.5zM6 7h4v1H6zm0 2h4v1H6zm0 2h3v1H6z" fill="currentColor"/></svg>
|
||
|
|
文档管理
|
||
|
|
</a>
|
||
|
|
<a class="nav-item" href="compliance-analysis.html">
|
||
|
|
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M8 1l7 3-1 6a7 7 0 01-6 5A7 7 0 011 10L0 4l8-3zm0 1.2L1.3 4.8l.8 5.1A6 6 0 008 14.8a6 6 0 005.9-4.9l.8-5.1L8 2.2zM7.5 5h1v4.5l-1 .5V5zm0 5.5h1v1h-1v-1z" fill="currentColor"/></svg>
|
||
|
|
合规分析
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="nav-group">
|
||
|
|
<span class="nav-group-label">对话</span>
|
||
|
|
<a class="nav-item" href="regulation-chat.html">
|
||
|
|
<svg class="nav-icon" viewBox="0 0 16 16" fill="none"><path d="M2 2h12a1 1 0 011 1v8a1 1 0 01-1 1H5l-3 2.5V3a1 1 0 011-1zm0 1v9.5L4.5 11H14V3H2zm2 2h8v1H4zm0 2h6v1H4z" fill="currentColor"/></svg>
|
||
|
|
法规对话
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<div class="sidebar-footer">
|
||
|
|
<div class="sidebar-user">
|
||
|
|
<div class="avatar">TS</div>
|
||
|
|
<div class="sidebar-user-info">
|
||
|
|
<div class="sidebar-user-name">T-Systems User</div>
|
||
|
|
<div class="sidebar-user-role">Compliance Analyst</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="sidebar-action od-theme-toggle" type="button" data-od-theme aria-label="Toggle theme">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 3a5 5 0 100 10A5 5 0 008 3zM2 8a6 6 0 1112 0A6 6 0 012 8z" fill="currentColor"/></svg>
|
||
|
|
主题
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- Content area -->
|
||
|
|
<div class="content-area">
|
||
|
|
<header class="content-topbar">
|
||
|
|
<div class="topbar-title">文档管理</div>
|
||
|
|
<div class="search">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M6.5 1a5.5 5.5 0 014.23 9.02l3.62 3.62-.7.71-3.63-3.63A5.5 5.5 0 116.5 1zm0 1a4.5 4.5 0 100 9 4.5 4.5 0 000-9z" fill="currentColor" opacity=".5"/></svg>
|
||
|
|
<input type="search" placeholder="Search documents…" aria-label="Search" />
|
||
|
|
</div>
|
||
|
|
<button class="btn">Import history</button>
|
||
|
|
<a class="btn btn-primary" href="upload-modal.html">Upload documents</a>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="page">
|
||
|
|
<section class="page-head" data-od-id="docs-head">
|
||
|
|
<div>
|
||
|
|
<div class="eyebrow">Document management</div>
|
||
|
|
<h1>Library control for ingestion and indexing.</h1>
|
||
|
|
</div>
|
||
|
|
<div style="display:grid; gap:12px; justify-items:start;">
|
||
|
|
<p style="margin:0;">Analysts can triage failed jobs, normalize metadata, and move a document from upload to parse-ready without leaving the operations workspace.</p>
|
||
|
|
<div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
|
||
|
|
<span class="pill">Queue</span>
|
||
|
|
<button class="btn">Import history</button>
|
||
|
|
<a class="btn btn-primary" href="upload-modal.html">Upload documents</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="summary" data-od-id="docs-summary">
|
||
|
|
<div class="summary-card">
|
||
|
|
<div class="helper">Total library</div>
|
||
|
|
<strong class="mono">--</strong>
|
||
|
|
<span>Across GB, GB/T, UNECE, ISO, and enterprise interpretation notes</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-card">
|
||
|
|
<div class="helper">Processing</div>
|
||
|
|
<strong class="mono">--</strong>
|
||
|
|
<span>Waiting on parse, chunking, embedding, or index sync</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-card">
|
||
|
|
<div class="helper">Failed</div>
|
||
|
|
<strong class="mono">--</strong>
|
||
|
|
<span>Timeout, OCR confidence, duplicate ID, or vector schema mismatch</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-card">
|
||
|
|
<div class="helper">Avg summary latency</div>
|
||
|
|
<strong class="mono">--</strong>
|
||
|
|
<span>Document summary generation after artifacts complete</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="control-bar" data-od-id="docs-filters">
|
||
|
|
<input class="control" type="text" value="GB/T" aria-label="Keyword filter" />
|
||
|
|
<select class="control" aria-label="Status filter">
|
||
|
|
<option>All statuses</option>
|
||
|
|
<option selected>Processing + failed</option>
|
||
|
|
<option>Indexed</option>
|
||
|
|
</select>
|
||
|
|
<select class="control" aria-label="Regulation type filter">
|
||
|
|
<option selected>Vehicle safety</option>
|
||
|
|
<option>Cybersecurity</option>
|
||
|
|
<option>Battery</option>
|
||
|
|
</select>
|
||
|
|
<select class="control" aria-label="Parser filter">
|
||
|
|
<option selected>Aliyun parser</option>
|
||
|
|
<option>Legacy local parser</option>
|
||
|
|
</select>
|
||
|
|
<select class="control" aria-label="Owner filter">
|
||
|
|
<option selected>All owners</option>
|
||
|
|
<option>Battery Safety Team</option>
|
||
|
|
<option>Connected Vehicle Team</option>
|
||
|
|
</select>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="batch-bar" data-od-id="docs-batch">
|
||
|
|
<div>
|
||
|
|
<strong>4 selected</strong>
|
||
|
|
<span class="helper">Batch actions apply metadata, retry parse, or archive stale drafts.</span>
|
||
|
|
</div>
|
||
|
|
<div class="batch-actions">
|
||
|
|
<button class="btn">Assign category</button>
|
||
|
|
<button class="btn">Retry parse</button>
|
||
|
|
<button class="btn">Mark superseded</button>
|
||
|
|
<button class="btn">Delete</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="card" data-od-id="docs-table">
|
||
|
|
<div class="table-head">
|
||
|
|
<span></span>
|
||
|
|
<span>Document</span>
|
||
|
|
<span>Type</span>
|
||
|
|
<span>Status</span>
|
||
|
|
<span>Artifacts</span>
|
||
|
|
<span>Updated</span>
|
||
|
|
<span>Owner</span>
|
||
|
|
<span>Actions</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="table-row">
|
||
|
|
<input type="checkbox" checked aria-label="Select document" />
|
||
|
|
<div class="doc-title">
|
||
|
|
<strong>GB/T 31484-2015 battery energy density methods</strong>
|
||
|
|
<span class="mono">doc_id: GBT-31484-2015-r2 · version 2026 addendum</span>
|
||
|
|
</div>
|
||
|
|
<span>Battery</span>
|
||
|
|
<span class="status warn">Embedding</span>
|
||
|
|
<span class="mono">chunk build active</span>
|
||
|
|
<span class="mono">09:42</span>
|
||
|
|
<span>Battery Safety</span>
|
||
|
|
<div class="link-row">
|
||
|
|
<a class="text-link" href="document-detail.html">Inspect</a>
|
||
|
|
<a class="text-link" href="#">Retry</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="table-row">
|
||
|
|
<input type="checkbox" checked aria-label="Select document" />
|
||
|
|
<div class="doc-title">
|
||
|
|
<strong>UNECE R155 cybersecurity management Q&A</strong>
|
||
|
|
<span class="mono">doc_id: UNECE-R155-qa-2026-05 · summary ready</span>
|
||
|
|
</div>
|
||
|
|
<span>Cybersecurity</span>
|
||
|
|
<span class="status ok">Indexed</span>
|
||
|
|
<span class="mono">retrieval-ready</span>
|
||
|
|
<span class="mono">08:18</span>
|
||
|
|
<span>Connected Fleet</span>
|
||
|
|
<div class="link-row">
|
||
|
|
<a class="text-link" href="compliance-analysis.html">Analyze</a>
|
||
|
|
<a class="text-link" href="regulation-chat.html">Chat</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="table-row">
|
||
|
|
<input type="checkbox" aria-label="Select document" />
|
||
|
|
<div class="doc-title">
|
||
|
|
<strong>GB 26112-2010 roof strength scan</strong>
|
||
|
|
<span class="mono">doc_id: GB-26112-scan-ocr · 6 pages low confidence</span>
|
||
|
|
</div>
|
||
|
|
<span>Vehicle safety</span>
|
||
|
|
<span class="status risk">Failed</span>
|
||
|
|
<span class="mono">OCR blocked</span>
|
||
|
|
<span class="mono">Yesterday</span>
|
||
|
|
<span>Body Structure</span>
|
||
|
|
<div class="link-row">
|
||
|
|
<a class="text-link" href="#">View error</a>
|
||
|
|
<a class="text-link" href="#">Re-upload</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="table-row">
|
||
|
|
<input type="checkbox" checked aria-label="Select document" />
|
||
|
|
<div class="doc-title">
|
||
|
|
<strong>GB/T 18487 charging interface interpretation</strong>
|
||
|
|
<span class="mono">doc_id: GBT-18487-note-2026 · duplicate metadata candidate</span>
|
||
|
|
</div>
|
||
|
|
<span>Charging</span>
|
||
|
|
<span class="status warn">Review</span>
|
||
|
|
<span class="mono">Summary only</span>
|
||
|
|
<span class="mono">11:06</span>
|
||
|
|
<span>EV Platform</span>
|
||
|
|
<div class="link-row">
|
||
|
|
<a class="text-link" href="#">Normalize</a>
|
||
|
|
<a class="text-link" href="#">Merge</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="table-row">
|
||
|
|
<input type="checkbox" aria-label="Select document" />
|
||
|
|
<div class="doc-title">
|
||
|
|
<strong>Supplier thermal runaway test report</strong>
|
||
|
|
<span class="mono">doc_id: supplier-pack-773A · confidential appendix attached</span>
|
||
|
|
</div>
|
||
|
|
<span>Evidence</span>
|
||
|
|
<span class="status ok">Indexed</span>
|
||
|
|
<span class="mono">248 chunks</span>
|
||
|
|
<span class="mono">Monday</span>
|
||
|
|
<span>Supplier QA</span>
|
||
|
|
<div class="link-row">
|
||
|
|
<a class="text-link" href="document-detail.html">Inspect</a>
|
||
|
|
<a class="text-link" href="#">Download</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer class="footer">
|
||
|
|
<span>T-Systems Regulation Hub</span>
|
||
|
|
<div class="footer-status">
|
||
|
|
<span class="footer-dot" aria-hidden="true"></span>
|
||
|
|
<span>Online</span>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="ui-preferences.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|