202 lines
14 KiB
HTML
202 lines
14 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/kt-ai-print.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
|
||
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
|
||
|
||
.doc-banner {
|
||
display: flex; align-items: center; gap: var(--kt-ai-space-5); flex-wrap: wrap;
|
||
padding: var(--kt-ai-space-5) var(--kt-ai-space-7);
|
||
border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl);
|
||
background: var(--kt-ai-bg-soft); margin-bottom: var(--kt-ai-space-8);
|
||
}
|
||
.doc-banner .doc-banner-title { font-weight: var(--kt-ai-weight-semibold); font-size: var(--kt-ai-text-md); display: flex; align-items: center; gap: var(--kt-ai-space-3); }
|
||
.doc-banner .doc-banner-title svg { width: 18px; height: 18px; }
|
||
.doc-banner .meta { display: flex; gap: var(--kt-ai-space-5); flex-wrap: wrap; align-items: center; flex: 1 1 auto; }
|
||
.doc-banner .meta span { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); display: inline-flex; align-items: center; gap: var(--kt-ai-space-2); }
|
||
.doc-banner .verdict { margin-left: auto; white-space: nowrap; }
|
||
|
||
.doc-h2 {
|
||
font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold);
|
||
line-height: var(--kt-ai-leading-tight); letter-spacing: -.01em;
|
||
display: flex; align-items: center; gap: var(--kt-ai-space-3);
|
||
}
|
||
.doc-h2 svg { width: 16px; height: 16px; color: var(--kt-ai-fg-muted); flex-shrink: 0; }
|
||
.doc-hint { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin: var(--kt-ai-space-2) 0 var(--kt-ai-space-5); }
|
||
|
||
.doc-section { margin-top: var(--kt-ai-space-9); }
|
||
.doc-section:first-child { margin-top: 0; }
|
||
.section-toggle { display: flex; align-items: center; gap: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-4); }
|
||
.section-toggle .sec-title { margin: 0; }
|
||
.section-toggle .sec-count { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-family: var(--kt-ai-font-mono); }
|
||
.doc-section.collapsed .sec-cases { display: none; }
|
||
.doc-section.collapsed .sec-toggle .sec-count { display: none; }
|
||
|
||
.doc-table { width: 100%; border-collapse: collapse; font-size: var(--kt-ai-text-sm); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); overflow: hidden; margin-bottom: var(--kt-ai-space-2); }
|
||
.doc-table td { padding: var(--kt-ai-space-3) var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-divider); vertical-align: middle; }
|
||
.doc-table tr:last-child td { border-bottom: none; }
|
||
.doc-table td.lab { width: 210px; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-xs); }
|
||
|
||
.test-block { border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-bg-elevated); overflow: hidden; margin-bottom: var(--kt-ai-space-4); break-inside: avoid; }
|
||
.test-block-head { display: flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-3) var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-divider); background: var(--kt-ai-bg-soft); }
|
||
.test-block-head .num { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); min-width: 20px; }
|
||
.test-block-head .kt-ai-input { flex: 1; font-weight: var(--kt-ai-weight-semibold); }
|
||
.test-block table { width: 100%; border-collapse: collapse; font-size: var(--kt-ai-text-sm); }
|
||
.test-block td { padding: var(--kt-ai-space-3) var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-divider); vertical-align: top; }
|
||
.test-block tr:last-child td { border-bottom: none; }
|
||
.test-block td.lab { width: 150px; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-xs); padding-top: var(--kt-ai-space-4); }
|
||
|
||
.steps-cell { display: flex; flex-direction: column; gap: var(--kt-ai-space-3); }
|
||
.test-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
|
||
.test-steps li { display: flex; gap: var(--kt-ai-space-2); align-items: center; }
|
||
.test-steps li .step-num { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); min-width: 18px; text-align: right; }
|
||
.test-steps li .step-inner { display: flex; gap: var(--kt-ai-space-2); align-items: center; flex: 1; }
|
||
.test-steps li .step-inner .kt-ai-input { flex: 1; }
|
||
|
||
.doc-summary {
|
||
display: flex; align-items: center; gap: var(--kt-ai-space-6); flex-wrap: wrap;
|
||
border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl);
|
||
background: var(--kt-ai-bg-elevated); padding: var(--kt-ai-space-4) var(--kt-ai-space-6); margin: var(--kt-ai-space-4) 0;
|
||
}
|
||
.doc-summary .kv { display: flex; flex-direction: column; gap: 2px; }
|
||
.doc-summary .kv small { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); text-transform: uppercase; letter-spacing: .4px; }
|
||
.doc-summary .kv strong { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }
|
||
.doc-summary .sep { width: 1px; align-self: stretch; background: var(--kt-ai-divider); }
|
||
.doc-summary .act { margin-left: auto; display: flex; gap: var(--kt-ai-space-3); flex-wrap: wrap; }
|
||
|
||
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-6); margin-top: var(--kt-ai-space-5); }
|
||
@media (max-width: 720px) { .doc-sign { grid-template-columns: 1fr; } }
|
||
.doc-sign .sign-line { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-9); }
|
||
|
||
.stat-pill { display: inline-flex; align-items: center; gap: var(--kt-ai-space-2); }
|
||
|
||
@media print {
|
||
header.kt-ai-pagehead { display: none !important; }
|
||
.doc-summary .act { display: none !important; }
|
||
.section-toggle .sec-count, .step-del, .case-del, .step-add, .kt-ai-icon-button { display: none !important; }
|
||
.test-block, .doc-section, .kt-ai-card { break-inside: avoid; }
|
||
span.kt-ai-input, .kt-ai-select { border: none; box-shadow: none; background: transparent; border-radius: 0; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead" data-no-print="true">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>Протокол тестирования — сайт НКТ</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="ghost" data-size="sm" id="btn-add">
|
||
<svg width="14" height="14" aria-hidden="true"><use href="#plus"></use></svg>
|
||
Тест-кейс
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" data-size="sm" id="btn-xlsx">
|
||
<svg width="14" height="14" aria-hidden="true"><use href="#spreadsheet"></use></svg>
|
||
Скачать Excel
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" data-size="sm" id="btn-json">
|
||
<svg width="14" height="14" aria-hidden="true"><use href="#copy"></use></svg>
|
||
JSON
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="sm" id="btn-print">
|
||
<svg width="14" height="14" aria-hidden="true"><use href="#download"></use></svg>
|
||
Печать / PDF
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="kt-ai-wrap" style="padding-top:var(--kt-ai-space-9);padding-bottom:var(--kt-ai-space-11)">
|
||
|
||
<div class="doc-banner">
|
||
<span class="doc-banner-title">
|
||
<svg aria-hidden="true"><use href="#file"></svg>
|
||
Протокол тестирования
|
||
</span>
|
||
<div class="meta" id="banner-meta"></div>
|
||
<span class="kt-ai-chip verdict" id="p-verdict" data-tone="gray">—</span>
|
||
</div>
|
||
|
||
<h2 class="doc-h2" style="margin-bottom:var(--kt-ai-space-4)"><svg aria-hidden="true"><use href="#layers"></use>Основная информация</h2>
|
||
<div id="info-mount"></div>
|
||
|
||
<h2 class="doc-h2" style="margin-top:var(--kt-ai-space-8);margin-bottom:var(--kt-ai-space-4)"><svg aria-hidden="true"><use href="#database"></use>Окружение тестирования</h2>
|
||
<p class="doc-hint">Где и на чём проверялось: адрес, устройство, браузер, тестовые данные.</p>
|
||
<div id="env-mount"></div>
|
||
|
||
<h2 class="doc-h2" style="margin-top:var(--kt-ai-space-9);margin-bottom:var(--kt-ai-space-2)"><svg aria-hidden="true"><use href="#checklist"></use>Тест-кейсы по разделам</h2>
|
||
<p class="doc-hint">Статусы: <b>Пройден</b> — всё как ожидалось, <b>Провален</b> — найдена проблема, <b>Заблокирован</b> — не удалось выполнить. Разделы сворачиваются.</p>
|
||
<div id="content-mount"></div>
|
||
|
||
<h2 class="doc-h2" style="margin-top:var(--kt-ai-space-9);margin-bottom:var(--kt-ai-space-4)"><svg aria-hidden="true"><use href="#alert"></use>Найденные проблемы</h2>
|
||
<div style="overflow:hidden;border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-2xl)">
|
||
<table class="doc-table" style="margin:0;border:none">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:52px;text-align:left">№</th>
|
||
<th style="text-align:left">Описание проблемы</th>
|
||
<th style="width:130px;text-align:left">Приоритет</th>
|
||
<th style="width:120px;text-align:left">Статус</th>
|
||
<th style="width:40px"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="issues-body"></tbody>
|
||
</table>
|
||
</div>
|
||
<div style="margin-top:var(--kt-ai-space-3)">
|
||
<button class="kt-ai-btn issue-add" data-variant="ghost" data-size="sm"><svg width="12" height="12" aria-hidden="true"><use href="#plus"></use></svg> Добавить проблему</button>
|
||
</div>
|
||
|
||
<h2 class="doc-h2" style="margin-top:var(--kt-ai-space-9);margin-bottom:var(--kt-ai-space-4)"><svg aria-hidden="true"><use href="#clipboard"></use>Итог и подписи</h2>
|
||
<div class="doc-summary">
|
||
<span class="kv"><small>Всего кейсов</small><strong id="s-total">0</strong></span>
|
||
<span class="sep"></span>
|
||
<span class="kv"><small>Прошли</small><strong id="s-pass">0</strong></span>
|
||
<span class="sep"></span>
|
||
<span class="kv"><small>Провалены</small><strong id="s-fail">0</strong></span>
|
||
<span class="sep"></span>
|
||
<span class="kv"><small>Заблокировано</small><strong id="s-block">0</strong></span>
|
||
<span class="kv"><small>Выполнено</small><strong id="s-done">0 / 0</strong></span>
|
||
<div class="act">
|
||
<button class="kt-ai-btn" data-variant="ghost" data-size="sm" id="btn-clear">Очистить</button>
|
||
</div>
|
||
</div>
|
||
<table class="doc-table"><tr><td class="lab">Общий вывод</td><td><span class="kt-ai-input" data-k="conclusion" placeholder="Краткий вердикт: готово к выпуску / с оговорками" style="width:100%"></span></td></tr></table>
|
||
<div class="doc-sign">
|
||
<div><div class="sign-line">Подпись исполнителя (тестировщика)</div><span class="kt-ai-input" data-k="sign-exec" placeholder="И.О. Фамилия" style="width:100%"></span></div>
|
||
<div><div class="sign-line">Подпись приёмщика</div><span class="kt-ai-input" data-k="sign-acc" placeholder="И.О. Фамилия" style="width:100%"></span></div>
|
||
</div>
|
||
|
||
<div class="kt-ai-card" style="margin-top:var(--kt-ai-space-9);padding:var(--kt-ai-space-6)">
|
||
<h2 class="doc-h2" style="margin-bottom:var(--kt-ai-space-4)"><svg aria-hidden="true"><use href="#book"></use>Как пользоваться</h2>
|
||
<ol class="doc-steps" style="padding-left:0;list-style:none;margin:0;display:flex;flex-direction:column;gap:var(--kt-ai-space-2);font-size:var(--kt-ai-text-sm)">
|
||
<li><b style="font-family:var(--kt-ai-font-mono);font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-faint);display:inline-block;width:20px">1</b> Все кейсы по ТЗ «Авторизация и регистрация» уже введены — заполняйте «Фактический результат» и ставьте статус.</li>
|
||
<li><b style="font-family:var(--kt-ai-font-mono);font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-faint);display:inline-block;width:20px">2</b> «Скачать Excel» — книга .xlsx: лист «Информация», лист «Тест-кейсы» (все разделы), лист «Проблемы».</li>
|
||
<li><b style="font-family:var(--kt-ai-font-mono);font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-faint);display:inline-block;width:20px">3</b> Черновик сохраняется в браузере — можно вернуться и продолжить заполнение.</li>
|
||
<li><b style="font-family:var(--kt-ai-font-mono);font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-faint);display:inline-block;width:20px">4</b> «Печать / PDF» — протокол с полями без кнопок, готов к подшивке.</li>
|
||
</ol>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="kt-ai-wrap kt-ai-pagefoot" style="margin-top:var(--kt-ai-space-9)">
|
||
<span>© 2026 Сайт НКТ</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Протокол тестирования · № из шапки</span>
|
||
</div>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|