697 lines
27 KiB
HTML
697 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 Prototype Suite</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: 12px;
|
|
--text-sm: 14px;
|
|
--text-base: 16px;
|
|
--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: 1200px;
|
|
--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; }
|
|
html { -webkit-text-size-adjust: 100%; }
|
|
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;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: color var(--motion-fast) var(--ease-standard);
|
|
}
|
|
a:hover { color: var(--fg); text-decoration: underline; }
|
|
button, input, select { font: inherit; }
|
|
p { text-wrap: pretty; }
|
|
h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); margin: 0; text-wrap: balance; }
|
|
|
|
/* ── Sidebar shell ── */
|
|
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
|
|
.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; }
|
|
.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; 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 { 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; }
|
|
.footer-dot { width: 7px; height: 7px; border-radius: 50%; background: #19d3a2; box-shadow: 0 0 0 3px color-mix(in oklab, #19d3a2, transparent 82%); }
|
|
.footer-status { display: inline-flex; align-items: center; gap: 8px; }
|
|
@media (max-width: 700px) { .app-shell { grid-template-columns: 1fr; } .sidebar { display: none; } }
|
|
|
|
/* ── Page-specific styles ── */
|
|
.container {
|
|
max-width: var(--container-max);
|
|
margin: 0 auto;
|
|
padding: 0 var(--container-gutter-desktop);
|
|
}
|
|
.meta {
|
|
color: var(--muted);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.hero {
|
|
padding: 72px 0 36px;
|
|
display: grid;
|
|
grid-template-columns: 1.3fr 0.9fr;
|
|
gap: var(--space-12);
|
|
align-items: start;
|
|
}
|
|
.eyebrow {
|
|
color: var(--accent);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
margin: 0 0 var(--space-4);
|
|
}
|
|
.hero h1 {
|
|
font-size: clamp(40px, 6vw, 64px);
|
|
max-width: 11ch;
|
|
}
|
|
.hero-copy {
|
|
margin-top: var(--space-5);
|
|
max-width: 58ch;
|
|
color: var(--muted);
|
|
font-size: var(--text-lg);
|
|
}
|
|
.hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-6);
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
min-height: 44px;
|
|
padding: 0 16px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border);
|
|
background: transparent;
|
|
color: var(--fg);
|
|
transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
|
|
}
|
|
.btn:focus-visible,
|
|
.screen-card a:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--accent-on);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
text-decoration: none;
|
|
}
|
|
.btn-secondary:hover {
|
|
border-color: var(--fg);
|
|
text-decoration: none;
|
|
}
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-5);
|
|
box-shadow: var(--elev-flat);
|
|
}
|
|
.summary-grid,
|
|
.screen-grid {
|
|
display: grid;
|
|
gap: var(--space-4);
|
|
}
|
|
.summary-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
margin-bottom: 44px;
|
|
}
|
|
.screen-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
margin-bottom: 64px;
|
|
}
|
|
.screen-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
min-height: 280px;
|
|
}
|
|
.screen-card a {
|
|
color: inherit;
|
|
display: block;
|
|
border-radius: inherit;
|
|
}
|
|
.screen-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
}
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid var(--border);
|
|
padding: 4px 10px;
|
|
color: var(--muted);
|
|
font-size: var(--text-xs);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.mini-shot {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background:
|
|
linear-gradient(180deg, color-mix(in oklab, var(--accent), white 94%), transparent),
|
|
var(--surface);
|
|
padding: var(--space-4);
|
|
min-height: 148px;
|
|
}
|
|
.mini-toolbar {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.mini-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: var(--border);
|
|
}
|
|
.mini-layout {
|
|
display: grid;
|
|
grid-template-columns: 140px 1fr;
|
|
gap: var(--space-3);
|
|
min-height: 94px;
|
|
}
|
|
.mini-nav,
|
|
.mini-body,
|
|
.mini-row,
|
|
.mini-block {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in oklab, var(--surface), var(--bg) 24%);
|
|
}
|
|
.mini-nav { padding: var(--space-3); }
|
|
.mini-body { padding: var(--space-3); display: grid; gap: var(--space-2); }
|
|
.mini-row {
|
|
height: 12px;
|
|
background: color-mix(in oklab, var(--fg), transparent 96%);
|
|
}
|
|
.mini-row.accent {
|
|
width: 42%;
|
|
background: color-mix(in oklab, var(--accent), white 76%);
|
|
border-color: color-mix(in oklab, var(--accent), white 70%);
|
|
}
|
|
.mini-block { height: 56px; }
|
|
.section-title {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
.section-title h2 { font-size: var(--text-2xl); }
|
|
.section-title p { margin: 0; max-width: 58ch; color: var(--muted); }
|
|
.flow {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: var(--space-3);
|
|
margin-bottom: 80px;
|
|
}
|
|
.flow-step {
|
|
position: relative;
|
|
padding: var(--space-4);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
.flow-step strong {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: var(--text-sm);
|
|
}
|
|
.flow-step span {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.flow-step::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -13px;
|
|
width: 10px;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
.flow-step:last-child::after { display: none; }
|
|
.footer {
|
|
padding: 24px 0 48px;
|
|
border-top: 1px solid var(--border);
|
|
color: var(--muted);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.hero,
|
|
.summary-grid,
|
|
.screen-grid,
|
|
.flow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.container { padding: 0 var(--container-gutter-tablet); }
|
|
.flow-step::after { display: none; }
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.container { padding: 0 var(--container-gutter-phone); }
|
|
.hero { padding-top: 48px; }
|
|
.hero-copy { font-size: var(--text-base); }
|
|
.screen-head { align-items: start; flex-direction: column; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-page="index">
|
|
<div class="app-shell">
|
|
<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 active" 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-6z" fill="currentColor"/></svg>
|
|
系统状态
|
|
</a>
|
|
</div>
|
|
<div class="nav-group">
|
|
<span class="nav-group-label">工作台</span>
|
|
<a class="nav-item" 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>
|
|
|
|
<div class="content-area">
|
|
<header class="content-topbar">
|
|
<span class="topbar-title">概览</span>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<section class="hero" data-od-id="hero">
|
|
<div>
|
|
<p class="eyebrow">Prototype suite</p>
|
|
<h1>Operational screens for AI document compliance work.</h1>
|
|
<p class="hero-copy">
|
|
This launcher maps the full desktop workflow: intake, parsing, embeddings, retrieval-led analysis, and citation-backed chat.
|
|
Each screen is isolated as its own product surface so reviewers can inspect decisions without switching fake demo controls.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a class="btn btn-primary" href="dashboard.html">Open dashboard</a>
|
|
<a class="btn btn-secondary" href="regulation-chat.html">Jump to regulation chat</a>
|
|
</div>
|
|
</div>
|
|
<aside class="card">
|
|
<p class="eyebrow">Scope</p>
|
|
<div class="summary-grid" style="grid-template-columns: 1fr; margin: 0; gap: 14px;">
|
|
<div>
|
|
<strong>6 product screens</strong>
|
|
<div class="meta">Launcher, operations overview, doc management, upload, parse detail, analysis, chat</div>
|
|
</div>
|
|
<div>
|
|
<strong>Backend-aware flows</strong>
|
|
<div class="meta">Aliyun parsing, chunk generation, text-embedding-v3, dense vector collection, citation retrieval</div>
|
|
</div>
|
|
<div>
|
|
<strong>Review posture</strong>
|
|
<div class="meta">Quiet utility chrome, clear status states, one accent reserved for action and escalation</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<section data-od-id="workflow">
|
|
<div class="section-title">
|
|
<div>
|
|
<p class="eyebrow">Interaction rhythm</p>
|
|
<h2>One sequence, six focused stops.</h2>
|
|
</div>
|
|
<p>The product cadence moves from portfolio awareness to precise intervention. Each screen hands off to the next likely action instead of collapsing everything into a single dense page.</p>
|
|
</div>
|
|
<div class="flow">
|
|
<div class="flow-step">
|
|
<strong>01 Dashboard</strong>
|
|
<span>Watch ingestion health, queue pressure, policy risk, and active investigations.</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<strong>02 Library</strong>
|
|
<span>Filter standards, inspect states, trigger retry, delete, and batch assign metadata.</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<strong>03 Upload</strong>
|
|
<span>Stage files, assign regulation type and version, and monitor import queue progress.</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<strong>04 Parse detail</strong>
|
|
<span>Follow document parsing, semantic blocks, vector chunks, and embedding/index milestones.</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<strong>05 Analysis</strong>
|
|
<span>Compare source passages with retrieved regulations, findings, and conclusion-ready actions.</span>
|
|
</div>
|
|
<div class="flow-step">
|
|
<strong>06 Chat</strong>
|
|
<span>Interrogate a clause with citations, trace history, and export reasoning with sources.</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section data-od-id="screens">
|
|
<div class="section-title">
|
|
<div>
|
|
<p class="eyebrow">Screens</p>
|
|
<h2>Open any surface directly.</h2>
|
|
</div>
|
|
<p>Each tile previews its UI structure and primary job. These are entry points into a realistic desktop workflow, not storyboards.</p>
|
|
</div>
|
|
<div class="screen-grid">
|
|
<article class="screen-card card">
|
|
<div class="screen-head">
|
|
<div>
|
|
<h3>Dashboard</h3>
|
|
<div class="meta">Overview of system health, backlog, and current compliance programs</div>
|
|
</div>
|
|
<span class="chip">Operations</span>
|
|
</div>
|
|
<a href="dashboard.html">
|
|
<div class="mini-shot" aria-hidden="true">
|
|
<div class="mini-toolbar"><span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span></div>
|
|
<div class="mini-layout">
|
|
<div class="mini-nav"></div>
|
|
<div class="mini-body">
|
|
<div class="mini-row accent"></div>
|
|
<div class="mini-block"></div>
|
|
<div class="mini-row"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="screen-card card">
|
|
<div class="screen-head">
|
|
<div>
|
|
<h3>Document management</h3>
|
|
<div class="meta">Library, filters, batch actions, and ingestion state control</div>
|
|
</div>
|
|
<span class="chip">Library</span>
|
|
</div>
|
|
<a href="document-management.html">
|
|
<div class="mini-shot" aria-hidden="true">
|
|
<div class="mini-toolbar"><span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span></div>
|
|
<div class="mini-layout">
|
|
<div class="mini-nav"></div>
|
|
<div class="mini-body">
|
|
<div class="mini-row accent"></div>
|
|
<div class="mini-row"></div>
|
|
<div class="mini-block"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="screen-card card">
|
|
<div class="screen-head">
|
|
<div>
|
|
<h3>Upload modal</h3>
|
|
<div class="meta">Drag-drop intake, metadata assignment, and import queue feedback</div>
|
|
</div>
|
|
<span class="chip">Intake</span>
|
|
</div>
|
|
<a href="upload-modal.html">
|
|
<div class="mini-shot" aria-hidden="true">
|
|
<div class="mini-toolbar"><span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span></div>
|
|
<div class="mini-layout" style="grid-template-columns: 1fr;">
|
|
<div class="mini-body">
|
|
<div class="mini-block"></div>
|
|
<div class="mini-row accent"></div>
|
|
<div class="mini-row"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="screen-card card">
|
|
<div class="screen-head">
|
|
<div>
|
|
<h3>Document detail</h3>
|
|
<div class="meta">Parsing, chunking, embedding, and vector store progress by artifact stage</div>
|
|
</div>
|
|
<span class="chip">Pipeline</span>
|
|
</div>
|
|
<a href="document-detail.html">
|
|
<div class="mini-shot" aria-hidden="true">
|
|
<div class="mini-toolbar"><span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span></div>
|
|
<div class="mini-layout">
|
|
<div class="mini-nav"></div>
|
|
<div class="mini-body">
|
|
<div class="mini-row accent"></div>
|
|
<div class="mini-block"></div>
|
|
<div class="mini-block"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="screen-card card">
|
|
<div class="screen-head">
|
|
<div>
|
|
<h3>Compliance analysis</h3>
|
|
<div class="meta">Retrieval to reasoning to conclusion workspace with tracked evidence</div>
|
|
</div>
|
|
<span class="chip">Analysis</span>
|
|
</div>
|
|
<a href="compliance-analysis.html">
|
|
<div class="mini-shot" aria-hidden="true">
|
|
<div class="mini-toolbar"><span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span></div>
|
|
<div class="mini-layout">
|
|
<div class="mini-nav"></div>
|
|
<div class="mini-body">
|
|
<div class="mini-row accent"></div>
|
|
<div class="mini-row"></div>
|
|
<div class="mini-block"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<article class="screen-card card">
|
|
<div class="screen-head">
|
|
<div>
|
|
<h3>Regulation chat</h3>
|
|
<div class="meta">Source-backed question answering with history, quick prompts, and citation rail</div>
|
|
</div>
|
|
<span class="chip">Copilot</span>
|
|
</div>
|
|
<a href="regulation-chat.html">
|
|
<div class="mini-shot" aria-hidden="true">
|
|
<div class="mini-toolbar"><span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span></div>
|
|
<div class="mini-layout">
|
|
<div class="mini-nav"></div>
|
|
<div class="mini-body">
|
|
<div class="mini-row accent"></div>
|
|
<div class="mini-row"></div>
|
|
<div class="mini-row"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">Prototype prepared for product evaluators reviewing document ingestion, AI parsing, and compliance reasoning workflows.</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<script src="ui-preferences.js"></script>
|
|
|
|
|
|
</body></html>
|