408 lines
23 KiB
HTML
408 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>ИИ-решение для процесса — обработка сканированных документов</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.app { background: var(--kt-ai-bg); min-height: 100vh; }
|
||
.page-head {
|
||
position: sticky; top: 0; z-index: 5;
|
||
background: color-mix(in srgb, var(--kt-ai-bg) 88%, transparent);
|
||
backdrop-filter: blur(8px);
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
padding: var(--kt-ai-space-5) 0;
|
||
}
|
||
.page-head-in { display: flex; align-items: center; gap: var(--kt-ai-space-4); }
|
||
.page-head-in .title { font-size: var(--kt-ai-text-lg); font-weight: 600; }
|
||
.icon-btn {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: var(--kt-ai-space-9); height: var(--kt-ai-space-9);
|
||
border: 1px solid var(--kt-ai-border); background: var(--kt-ai-card-bg);
|
||
border-radius: var(--kt-ai-radius-full); color: var(--kt-ai-fg-muted);
|
||
cursor: pointer; transition: all .15s;
|
||
}
|
||
.icon-btn:hover { background: var(--kt-ai-bg-hover); color: var(--kt-ai-fg); }
|
||
.icon-btn svg { width: 16px; height: 16px; }
|
||
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kt-ai-space-3); }
|
||
.step {
|
||
display: flex; align-items: center; gap: var(--kt-ai-space-3);
|
||
padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
cursor: pointer; transition: all .15s;
|
||
}
|
||
.step:hover { border-color: var(--kt-ai-border-strong); }
|
||
.step.active { border-color: var(--kt-ai-primary); background: var(--kt-ai-bg-soft); }
|
||
.step .num {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: var(--kt-ai-space-7); height: var(--kt-ai-space-7);
|
||
border-radius: var(--kt-ai-radius-full);
|
||
background: var(--kt-ai-bg-sunken);
|
||
font-size: var(--kt-ai-text-xs); font-weight: 600; color: var(--kt-ai-fg-muted);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.step.active .num { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); }
|
||
.step .name { font-size: var(--kt-ai-text-sm); font-weight: 500; }
|
||
.step .cnt { margin-left: auto; font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; }
|
||
.view { display: none; }
|
||
.view.active { display: block; }
|
||
.kpi-strip {
|
||
display: grid; grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--kt-ai-space-5);
|
||
margin: var(--kt-ai-space-7) 0;
|
||
}
|
||
.kpi {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-5) var(--kt-ai-space-6);
|
||
}
|
||
.kpi .label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.kpi .value {
|
||
font-size: var(--kt-ai-text-2xl); font-weight: 600;
|
||
margin-top: var(--kt-ai-space-2);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.kpi .hint { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); margin-top: var(--kt-ai-space-2); }
|
||
.toolbar {
|
||
display: flex; align-items: center; gap: var(--kt-ai-space-3);
|
||
margin: var(--kt-ai-space-6) 0 var(--kt-ai-space-4);
|
||
flex-wrap: wrap;
|
||
}
|
||
.toolbar .count { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); margin-left: auto; font-variant-numeric: tabular-nums; }
|
||
.filters { display: flex; gap: var(--kt-ai-space-2); flex-wrap: wrap; }
|
||
.fchip {
|
||
padding: var(--kt-ai-space-2) var(--kt-ai-space-5);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-full);
|
||
font-size: var(--kt-ai-text-xs); font-weight: 500;
|
||
color: var(--kt-ai-fg-muted); background: var(--kt-ai-card-bg);
|
||
cursor: pointer; transition: all .15s;
|
||
}
|
||
.fchip:hover { border-color: var(--kt-ai-border-strong); color: var(--kt-ai-fg); }
|
||
.fchip.on { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); border-color: var(--kt-ai-primary); }
|
||
.fchip .n { color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; }
|
||
.fchip.on .n { color: color-mix(in srgb, var(--kt-ai-fg-on-fill) 65%, transparent); }
|
||
.doc-list { display: flex; flex-direction: column; gap: var(--kt-ai-space-3); }
|
||
.doc {
|
||
display: grid;
|
||
grid-template-columns: 40px minmax(0,1fr) auto auto;
|
||
gap: var(--kt-ai-space-5);
|
||
align-items: center;
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-4) var(--kt-ai-space-6);
|
||
transition: all .15s;
|
||
}
|
||
.doc:hover { border-color: var(--kt-ai-border-strong); background: var(--kt-ai-bg-soft); }
|
||
.doc .fic {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: var(--kt-ai-space-9); height: var(--kt-ai-space-9);
|
||
border-radius: var(--kt-ai-radius-lg);
|
||
background: var(--kt-ai-bg-sunken);
|
||
color: var(--kt-ai-fg-muted); font-family: var(--kt-ai-font-mono);
|
||
font-size: var(--kt-ai-text-2xs); font-weight: 600;
|
||
}
|
||
.doc .d1 { font-size: var(--kt-ai-text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.doc .d2 { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); margin-top: var(--kt-ai-space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.doc .when { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; }
|
||
.doc .acts { display: flex; gap: var(--kt-ai-space-2); }
|
||
.doc .acts .kt-ai-btn { padding: var(--kt-ai-space-2) var(--kt-ai-space-4); }
|
||
.table-wrap { overflow-x: auto; border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); }
|
||
.tbl { width: 100%; border-collapse: collapse; font-size: var(--kt-ai-text-sm); }
|
||
.tbl th {
|
||
text-align: left; font-weight: 500; font-size: var(--kt-ai-text-xs);
|
||
color: var(--kt-ai-fg-muted); padding: var(--kt-ai-space-3) var(--kt-ai-space-5);
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
background: var(--kt-ai-bg-soft);
|
||
position: sticky; top: 0;
|
||
}
|
||
.tbl td {
|
||
padding: var(--kt-ai-space-3) var(--kt-ai-space-5);
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
vertical-align: middle;
|
||
}
|
||
.tbl tr:last-child td { border-bottom: none; }
|
||
.tbl tr:hover td { background: var(--kt-ai-bg-hover); }
|
||
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||
.fld { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.val { font-size: var(--kt-ai-text-sm); }
|
||
.val.bad { color: var(--kt-ai-status-risk-fg); }
|
||
.conf {
|
||
display: inline-block; min-width: 52px;
|
||
padding: var(--kt-ai-space-1) var(--kt-ai-space-3);
|
||
border-radius: var(--kt-ai-radius-full);
|
||
font-size: var(--kt-ai-text-2xs); font-weight: 600;
|
||
text-align: center; font-variant-numeric: tabular-nums;
|
||
}
|
||
.conf.hi { background: var(--kt-ai-status-ok-bg); color: var(--kt-ai-status-ok-fg); }
|
||
.conf.mid { background: var(--kt-ai-status-warn-bg); color: var(--kt-ai-status-warn-fg); }
|
||
.conf.lo { background: var(--kt-ai-status-risk-bg); color: var(--kt-ai-status-risk-fg); }
|
||
.row-ok { cursor: default; }
|
||
.drawer {
|
||
position: fixed; top: 0; right: 0; bottom: 0;
|
||
width: min(440px, 92vw);
|
||
background: var(--kt-ai-card-bg);
|
||
border-left: 1px solid var(--kt-ai-border);
|
||
box-shadow: -12px 0 40px var(--kt-ai-black-a08);
|
||
transform: translateX(100%);
|
||
transition: transform .22s ease;
|
||
z-index: 20;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.drawer.open { transform: translateX(0); }
|
||
.drawer-head {
|
||
display: flex; align-items: flex-start; gap: var(--kt-ai-space-4);
|
||
padding: var(--kt-ai-space-6);
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
}
|
||
.drawer-head .title { font-size: var(--kt-ai-text-lg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
|
||
.drawer-head .sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); margin-top: var(--kt-ai-space-1); }
|
||
.drawer-body { padding: var(--kt-ai-space-6); overflow-y: auto; flex: 1; }
|
||
.drawer-foot {
|
||
display: flex; gap: var(--kt-ai-space-3);
|
||
padding: var(--kt-ai-space-5) var(--kt-ai-space-6);
|
||
border-top: 1px solid var(--kt-ai-border);
|
||
}
|
||
.scan {
|
||
background: var(--kt-ai-bg-soft);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-5);
|
||
font-family: var(--kt-ai-font-mono);
|
||
font-size: var(--kt-ai-text-xs);
|
||
line-height: 1.7;
|
||
color: var(--kt-ai-fg-muted);
|
||
white-space: pre-wrap;
|
||
}
|
||
.scan .hl { background: var(--kt-ai-status-warn-bg); color: var(--kt-ai-status-warn-fg); border-radius: var(--kt-ai-radius-xs); padding: 0 3px; }
|
||
.kv { display: grid; grid-template-columns: 140px 1fr; gap: var(--kt-ai-space-2) var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); }
|
||
.kv dt { color: var(--kt-ai-fg-faint); }
|
||
.kv dd { margin: 0; }
|
||
.chart-wrap {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-6);
|
||
}
|
||
.chart-wrap h3 { font-size: var(--kt-ai-text-sm); font-weight: 600; margin: 0 0 var(--kt-ai-space-4); }
|
||
.bars { display: flex; align-items: flex-end; gap: var(--kt-ai-space-3); height: 180px; }
|
||
.bar {
|
||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-2);
|
||
cursor: pointer;
|
||
}
|
||
.bar .col {
|
||
width: 24px; border-radius: var(--kt-ai-radius-xs);
|
||
background: var(--kt-ai-chart-blue);
|
||
transition: all .15s;
|
||
}
|
||
.bar.done .col { background: var(--kt-ai-chart-green); }
|
||
.bar .lbl { font-size: 10px; color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; }
|
||
.bar:hover .col { opacity: .8; }
|
||
.chart-tip {
|
||
font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted);
|
||
text-align: center; min-height: 14px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.passport {
|
||
display: grid; grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--kt-ai-space-4);
|
||
}
|
||
.pp {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-6);
|
||
}
|
||
.pp h3 { font-size: var(--kt-ai-text-sm); font-weight: 600; margin: 0 0 var(--kt-ai-space-4); }
|
||
.pp ol, .pp ul { margin: 0; padding-left: var(--kt-ai-space-6); font-size: var(--kt-ai-text-sm); line-height: 1.8; color: var(--kt-ai-fg-muted); }
|
||
.overlay {
|
||
position: fixed; inset: 0; background: var(--kt-ai-black-a16);
|
||
opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 15;
|
||
}
|
||
.overlay.open { opacity: 1; pointer-events: auto; }
|
||
.toast {
|
||
position: fixed; bottom: var(--kt-ai-space-8); left: 50%;
|
||
transform: translate(-50%, 20px);
|
||
background: var(--kt-ai-ink-900); color: var(--kt-ai-fg-on-fill);
|
||
padding: var(--kt-ai-space-3) var(--kt-ai-space-6);
|
||
border-radius: var(--kt-ai-radius-full);
|
||
font-size: var(--kt-ai-text-sm); font-weight: 500;
|
||
opacity: 0; pointer-events: none; transition: all .25s; z-index: 30;
|
||
}
|
||
.toast.show { opacity: 1; transform: translate(-50%, 0); }
|
||
@media (max-width: 767px) {
|
||
.steps { grid-template-columns: 1fr 1fr; }
|
||
.kpi-strip { grid-template-columns: 1fr 1fr; }
|
||
.doc { grid-template-columns: 36px minmax(0,1fr); }
|
||
.doc .when { display: none; }
|
||
.doc .acts { grid-column: 1 / -1; justify-content: flex-end; }
|
||
.passport { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="app">
|
||
|
||
<!-- иконки: спрайс вlined, чтобы <use href="#..."> работал в file:// и pages -->
|
||
<svg style="display:none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
<symbol id="i-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></symbol>
|
||
<symbol id="i-scan" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" x2="17" y1="12" y2="12"/></symbol>
|
||
<symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></symbol>
|
||
<symbol id="i-upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></symbol>
|
||
<symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></symbol>
|
||
<symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></symbol>
|
||
<symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></symbol>
|
||
<symbol id="i-file-text" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></symbol>
|
||
<symbol id="i-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></symbol>
|
||
<symbol id="i-check-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></symbol>
|
||
<symbol id="i-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></symbol>
|
||
<symbol id="i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></symbol>
|
||
<symbol id="i-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></symbol>
|
||
<symbol id="i-database" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></symbol>
|
||
<symbol id="i-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h4a2 2 0 0 1 2 2v12a2 2 0 0 0-2-2H2z"/><path d="M22 6h-4a2 2 0 0 0-2 2v12a2 2 0 0 1 2-2h4z"/></symbol>
|
||
<symbol id="i-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></symbol>
|
||
<symbol id="i-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></symbol>
|
||
</svg>
|
||
|
||
<header class="page-head">
|
||
<div class="kt-ai-wrap page-head-in">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28" onerror="this.style.display='none'">
|
||
<span class="title">ИИ-решение для процесса</span>
|
||
<span class="kt-ai-chip" data-tone="info">обработка сканированных документов</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="icon-btn" id="btn-reset" title="Сбросить данные к исходным"><svg aria-hidden="true"><use href="#i-refresh"/></svg></button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="kt-ai-wrap" style="padding-bottom: var(--kt-ai-space-12);">
|
||
|
||
<nav class="steps" id="steps" style="margin-top: var(--kt-ai-space-8);" aria-label="Шаги процесса"></nav>
|
||
|
||
<!-- ЭКРАН 1: Входящие -->
|
||
<section class="view" id="view-inbox">
|
||
<div class="kpi-strip" id="kpis-1"></div>
|
||
<div class="toolbar">
|
||
<div class="filters" id="f-inbox"></div>
|
||
<span class="count" id="c-inbox"></span>
|
||
</div>
|
||
<div class="doc-list" id="list-inbox"></div>
|
||
</section>
|
||
|
||
<!-- ЭКРАН 2: Распознавание -->
|
||
<section class="view" id="view-scan">
|
||
<div class="kpi-strip" id="kpis-2"></div>
|
||
<div class="toolbar">
|
||
<div class="filters" id="f-scan"></div>
|
||
<span class="count" id="c-scan"></span>
|
||
</div>
|
||
<div class="doc-list" id="list-scan"></div>
|
||
</section>
|
||
|
||
<!-- ЭКРАН 3: Проверка -->
|
||
<section class="view" id="view-verify">
|
||
<div class="kpi-strip" id="kpis-3"></div>
|
||
<div class="toolbar">
|
||
<div class="filters" id="f-verify"></div>
|
||
<span class="count" id="c-verify"></span>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="tbl">
|
||
<thead>
|
||
<tr>
|
||
<th>Поле</th>
|
||
<th>Значение</th>
|
||
<th>Уверенность</th>
|
||
<th>Статус</th>
|
||
<th class="num">Действие</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tb-verify"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ЭКРАН 4: Загрузка в систему -->
|
||
<section class="view" id="view-loaded">
|
||
<div class="kpi-strip" id="kpis-4"></div>
|
||
<div class="charts" style="display:grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-5); margin: 0 0 var(--kt-ai-space-6);">
|
||
<div class="chart-wrap">
|
||
<h3>Обработано по дням</h3>
|
||
<div class="bars" id="bars"></div>
|
||
<div class="chart-tip" id="chart-tip">наведите на столбец</div>
|
||
</div>
|
||
<div class="chart-wrap">
|
||
<h3>Сводка</h3>
|
||
<dl class="kv" id="loaded-summary"></dl>
|
||
</div>
|
||
</div>
|
||
<div class="doc-list" id="list-loaded"></div>
|
||
</section>
|
||
|
||
<!-- ЭКРАН 5: Паспорт -->
|
||
<section class="view" id="view-passport">
|
||
<h2 style="font-size: var(--kt-ai-text-2xl); font-weight: 600; margin: var(--kt-ai-space-8) 0 var(--kt-ai-space-2);">Паспорт решения</h2>
|
||
<p style="color: var(--kt-ai-fg-muted); margin: 0 0 var(--kt-ai-space-7); font-size: var(--kt-ai-text-sm);">
|
||
Наименование — ИИ-решение для процесса · Исполнитель — владелец процесса, сборка на платформе Vibe AI · Пользователь — владелец процесса
|
||
</p>
|
||
<div class="passport">
|
||
<div class="pp"><h3>Предпосылки</h3><ul>
|
||
<li>Входящие сканированные документы обрабатываются вручную</li>
|
||
<li>Данные переносятся в систему вручную, по одному полю</li>
|
||
<li>Решение вытаскивает контент из сканов и вставляет его в нужные ячейки</li>
|
||
</ul></div>
|
||
<div class="pp"><h3>Входные данные</h3><ul>
|
||
<li>Сканированные файлы присылаются по корпоративной почте</li>
|
||
<li>Получение — периодически, очередями</li>
|
||
<li>Исходный файл сохраняется рядом с результатом</li>
|
||
</ul></div>
|
||
<div class="pp"><h3>Шаги процесса</h3><ol>
|
||
<li>Приём: письма с вложениями оказываются во входящих</li>
|
||
<li>Распознавание: ИИ извлекает текст и поля из сканов</li>
|
||
<li>Проверка: полей с низкой уверенностью — вручную</li>
|
||
<li>Загрузка: подтверждённые данные попадают в систему</li>
|
||
</ol></div>
|
||
<div class="pp"><h3>Результат</h3><ul>
|
||
<li>Данные из сканов — в нужных ячейках системы</li>
|
||
<li>Каждое поле имеет уверенность распознавания</li>
|
||
<li>Проблемные поля помечаются и доводятся вручную</li>
|
||
</ul></div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- DRAWER: детали документа -->
|
||
<div class="overlay" id="overlay"></div>
|
||
<aside class="drawer" id="drawer" aria-hidden="true">
|
||
<div class="drawer-head">
|
||
<svg style="width:20px;height:20px;color:var(--kt-ai-fg-muted)" aria-hidden="true"><use href="#i-file"/></svg>
|
||
<div style="min-width:0;flex:1">
|
||
<div class="title" id="dw-title">Документ</div>
|
||
<div class="sub" id="dw-sub"></div>
|
||
</div>
|
||
<button class="icon-btn" id="dw-close" aria-label="Закрыть"><svg><use href="#i-x"/></svg></button>
|
||
</div>
|
||
<div class="drawer-body">
|
||
<div class="scan" id="dw-scan" style="margin-bottom: var(--kt-ai-space-6);"></div>
|
||
<h3 style="font-size: var(--kt-ai-text-sm); font-weight: 600; margin: 0 0 var(--kt-ai-space-4);">Извлечённые поля</h3>
|
||
<dl class="kv" id="dw-fields"></dl>
|
||
</div>
|
||
<div class="drawer-foot" id="dw-foot"></div>
|
||
</aside>
|
||
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|