Files
AIRegulation-DocAnalysis/Prototype/cc29bcb0-df2d-4d50-9428-7caa406ecb29/upload-modal.html

583 lines
18 KiB
HTML
Raw Normal View History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AI + Compliance Hub - Upload Documents</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;
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;
min-height: 100vh;
background:
linear-gradient(180deg, color-mix(in oklab, var(--bg), var(--fg) 4%), var(--bg)),
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;
display: grid;
place-items: center;
padding: 24px;
}
h1, h2, h3 {
margin: 0;
font-family: var(--font-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
}
p { margin: 0; text-wrap: pretty; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fg); text-decoration: underline; }
.od-theme-toggle {
cursor: pointer;
transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.od-theme-toggle:hover {
color: var(--fg);
border-color: var(--fg);
text-decoration: none;
}
.od-theme-toggle:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.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%);
}
.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%);
}
.frame {
width: min(1160px, 100%);
display: grid;
gap: 18px;
}
.topline {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.back {
color: var(--muted);
font-size: var(--text-sm);
}
.modal {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 0;
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
background: var(--surface);
box-shadow: var(--elev-raised);
}
.panel {
padding: 28px;
min-width: 0;
}
.panel + .panel {
border-left: 1px solid var(--border);
background: color-mix(in oklab, var(--surface), var(--bg) 24%);
}
.eyebrow {
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.lead {
color: var(--muted);
margin-top: 12px;
max-width: 56ch;
}
.dropzone {
margin-top: 24px;
border: 1px dashed color-mix(in oklab, var(--accent), white 54%);
border-radius: var(--radius-lg);
background: color-mix(in oklab, var(--accent), white 94%);
padding: 30px;
display: grid;
gap: 14px;
min-height: 220px;
align-content: center;
justify-items: center;
text-align: center;
}
.drop-visual {
width: 56px;
height: 56px;
border-radius: 18px;
border: 1px solid color-mix(in oklab, var(--accent), white 48%);
background: var(--surface);
display: grid;
place-items: center;
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--text-sm);
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
}
.btn {
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);
}
.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); }
.theme-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 40px;
padding: 0 12px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--surface);
color: var(--muted);
font-size: var(--text-sm);
cursor: pointer;
transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.theme-toggle:hover {
color: var(--fg);
border-color: var(--fg);
text-decoration: none;
}
.theme-toggle:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.selected-files {
margin-top: 22px;
display: grid;
gap: 12px;
}
.file-row,
.queue-row {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
padding: 14px 16px;
display: grid;
gap: 10px;
}
.file-top,
.queue-top {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}
.meta,
.hint {
color: var(--muted);
font-size: var(--text-sm);
}
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 22px;
}
.field {
display: grid;
gap: 6px;
}
.field label {
color: var(--muted);
font-size: var(--text-sm);
}
.field input,
.field select,
.field textarea {
min-height: 44px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
padding: 0 12px;
color: var(--fg);
}
.field textarea {
min-height: 104px;
padding: 12px;
resize: vertical;
}
.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); }
.progress {
height: 8px;
border-radius: 999px;
background: color-mix(in oklab, var(--fg), transparent 95%);
overflow: hidden;
}
.progress > span {
display: block;
height: 100%;
background: color-mix(in oklab, var(--accent), white 26%);
border-radius: inherit;
}
.queue {
margin-top: 18px;
display: grid;
gap: 12px;
}
.summary {
display: grid;
gap: 12px;
margin-top: 22px;
}
.summary-card {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in oklab, var(--surface), var(--bg) 12%);
padding: 14px 16px;
}
@media (max-width: 980px) {
.modal,
.grid { grid-template-columns: 1fr; }
.panel + .panel { border-left: 0; border-top: 1px solid var(--border); }
}
</style>
</head>
<body data-page="upload">
<div class="frame">
<div class="topline">
<a class="back" href="document-management.html">← Back to document management</a>
<span class="hint">Modal review surface for intake, metadata, and queue behavior</span>
</div>
<main class="modal">
<section class="panel" data-od-id="upload-form">
<div class="eyebrow">Upload documents</div>
<h1>Stage files for parsing and indexing.</h1>
<p class="lead">This intake flow supports PDF, DOCX, and supplier evidence bundles. Metadata is captured up front so the downstream parser and retrieval pipeline stay normalized.</p>
<div class="dropzone">
<div class="drop-visual">PDF</div>
<h2 style="font-size:28px;">Drop files here or browse your local archive.</h2>
<p class="hint">Recommended per batch: up to 20 files, 200 MB combined, one regulation family per batch.</p>
<div class="btn-row">
<button class="btn btn-primary">Choose files</button>
<button class="btn">Paste object storage link</button>
</div>
</div>
<div class="selected-files">
<div class="file-row">
<div class="file-top">
<div>
<strong>GBT31484_revision_notes.pdf</strong>
<div class="meta mono">size pending validation · scanned appendix included</div>
</div>
<span class="status ok">Ready</span>
</div>
<div class="progress"><span style="width:100%"></span></div>
</div>
<div class="file-row">
<div class="file-top">
<div>
<strong>supplier_thermal_test_report.docx</strong>
<div class="meta mono">size pending validation · confidential evidence supplement</div>
</div>
<span class="status warn">Metadata</span>
</div>
<div class="progress"><span style="width:58%"></span></div>
</div>
</div>
<div class="grid">
<div class="field">
<label for="regulation-type">Regulation type</label>
<select id="regulation-type">
<option selected>Battery safety</option>
<option>Vehicle safety</option>
<option>Cybersecurity</option>
<option>Charging</option>
</select>
</div>
<div class="field">
<label for="version">Version / release</label>
<input id="version" type="text" value="current revision" />
</div>
<div class="field">
<label for="owner">Owning team</label>
<select id="owner">
<option selected>Battery Safety Team</option>
<option>Connected Fleet</option>
<option>Homologation Office</option>
</select>
</div>
<div class="field">
<label for="parser">Parser backend</label>
<select id="parser">
<option selected>Aliyun parser</option>
<option>Legacy local parser</option>
</select>
</div>
<div class="field" style="grid-column:1 / -1;">
<label for="notes">Reviewer note</label>
<textarea id="notes">Re-run this batch against the latest battery energy density requirements and keep supplier evidence attached to the same review thread.</textarea>
</div>
</div>
<div class="btn-row" style="margin-top:24px;">
<button class="btn">Save draft batch</button>
<button class="btn btn-primary">Start import queue</button>
</div>
</section>
<aside class="panel" data-od-id="upload-queue">
<div class="eyebrow">Import queue</div>
<h2 style="font-size:28px;">Batch progress and validation feedback</h2>
<p class="lead" style="font-size:16px;">Reviewers can monitor preflight checks before the parser job is submitted, then watch queue depth and failure mode without leaving the modal.</p>
<div class="summary">
<div class="summary-card">
<strong class="mono">2 files validated</strong>
<div class="hint">Files already validated for metadata completeness</div>
</div>
<div class="summary-card">
<strong class="mono">live queue</strong>
<div class="hint">Current Aliyun parser queue depth populates here</div>
</div>
<div class="summary-card">
<strong class="mono">text-embedding-v3</strong>
<div class="hint">Embedding target applied after semantic block extraction</div>
</div>
</div>
<div class="queue">
<div class="queue-row">
<div class="queue-top">
<div>
<strong>Preflight validation</strong>
<div class="meta">Duplicate ID scan, file-type validation, metadata completeness</div>
</div>
<span class="status ok">Passed</span>
</div>
<div class="progress"><span style="width:100%"></span></div>
</div>
<div class="queue-row">
<div class="queue-top">
<div>
<strong>Object storage upload</strong>
<div class="meta">Bucket `upload-files` · transient object names attached to batch</div>
</div>
<span class="status ok">Completed</span>
</div>
<div class="progress"><span style="width:100%"></span></div>
</div>
<div class="queue-row">
<div class="queue-top">
<div>
<strong>Aliyun parse submission</strong>
<div class="meta">Polling every <span class="mono">5s</span> · timeout <span class="mono">900s</span></div>
</div>
<span class="status warn">Queued</span>
</div>
<div class="progress"><span style="width:42%"></span></div>
</div>
<div class="queue-row">
<div class="queue-top">
<div>
<strong>Chunking + embedding</strong>
<div class="meta">Build semantic blocks, overlapping vector chunks, then 1024-d embeddings</div>
</div>
<span class="status warn">Waiting</span>
</div>
<div class="progress"><span style="width:12%"></span></div>
</div>
</div>
<div class="summary-card" style="margin-top:18px;">
<strong>Potential issue to resolve</strong>
<p class="hint" style="margin-top:8px;">`supplier_thermal_test_report.docx` lacks a formal standard number. The batch can continue, but retrieval quality improves if you assign an evidence relationship before submit.</p>
</div>
</aside>
</main>
</div>
<script src="ui-preferences.js"></script>
</body>
</html>