184 lines
8.4 KiB
HTML
184 lines
8.4 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">
|
||
<link rel="stylesheet" href="app.css">
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
|
||
<div id="app" class="kt-ai-shell">
|
||
|
||
<!-- ═══════════════ ЭКРАН ВХОДА ═══════════════ -->
|
||
<section id="scr-entry" class="scr-entry">
|
||
<div class="entry-card kt-ai-card">
|
||
<div class="entry-brand">
|
||
<img src="design-system/brand/kt-ai-logo.png" alt="" width="34">
|
||
<div>
|
||
<div class="entry-title">Проверка знаний специалистов</div>
|
||
<div class="entry-sub">Тарифы · услуги · правила · контракты</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-tabs" id="roleTabs">
|
||
<span class="kt-ai-tab" data-active="true" data-role="spec" role="tab">Специалист</span>
|
||
<span class="kt-ai-tab" data-role="curator" role="tab">Куратор</span>
|
||
</div>
|
||
|
||
<form id="form-spec" class="entry-form">
|
||
<div class="kt-ai-field">
|
||
<label for="spec-fio">ФИО специалиста</label>
|
||
<input id="spec-fio" class="kt-ai-input" type="text" placeholder="Токтарова Айгерим Сериковна" autocomplete="name" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="spec-dept">Подразделение</label>
|
||
<input id="spec-dept" class="kt-ai-input" type="text" placeholder="Филиал Алматы — отдел обслуживания" required>
|
||
</div>
|
||
<div class="entry-hint">Дано 2 попытки. Результат — % правильных ответов. После каждого прохождения разбор ошибок.</div>
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg" style="width:100%;justify-content:center">Начать проверку</button>
|
||
</form>
|
||
|
||
<form id="form-curator" class="entry-form" hidden>
|
||
<div class="kt-ai-field">
|
||
<label for="cur-fio">ФИО куратора</label>
|
||
<input id="cur-fio" class="kt-ai-input" type="text" placeholder="Поленчук Николай Васильевич" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="cur-code">Код куратора</label>
|
||
<input id="cur-code" class="kt-ai-input" type="password" placeholder="••••••" minlength="4" required>
|
||
</div>
|
||
<div class="entry-hint">Куратор управляет вопросами и разбором по специалистам. Код выдаётся владельцем платформы.</div>
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg" style="width:100%;justify-content:center">Войти как куратор</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════ ЭКРАН ТЕСТА ═══════════════ -->
|
||
<section id="scr-test" hidden>
|
||
<header class="test-top">
|
||
<div>
|
||
<div class="test-top-fio" id="test-fio"></div>
|
||
<div class="test-top-dept" id="test-dept"></div>
|
||
</div>
|
||
<div class="test-top-right">
|
||
<span class="kt-ai-chip" id="test-chip-try"></span>
|
||
<span class="test-top-score" id="test-score"></span>
|
||
</div>
|
||
</header>
|
||
|
||
<ol id="test-list" class="test-list"></ol>
|
||
|
||
<footer class="test-foot">
|
||
<span class="test-foot-count" id="test-count"></span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button id="btn-submit-test" class="kt-ai-btn" data-variant="primary" data-size="lg" disabled>Пройти проверку</button>
|
||
</footer>
|
||
</section>
|
||
|
||
<!-- ═══════════════ ЭКРАН РЕЗУЛЬТАТА ═══════════════ -->
|
||
<section id="scr-result" hidden>
|
||
<div class="res-head">
|
||
<div>
|
||
<h1 id="res-title">Результат проверки</h1>
|
||
<div class="res-sub" id="res-sub"></div>
|
||
</div>
|
||
<div class="res-score-card kt-ai-card" id="res-score-card">
|
||
<div class="res-score-val" id="res-score">—</div>
|
||
<div class="res-score-label">правильных ответов</div>
|
||
<span class="kt-ai-status-pill" id="res-pill" data-status="info"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="res-wrong-head">
|
||
<svg class="kt-icon"><use href="#alert-circle"></use></svg>
|
||
<div id="res-wrong-count">—</div>
|
||
<button class="kt-ai-btn" data-size="sm" id="btn-show-all">Показать все вопросы</button>
|
||
</div>
|
||
|
||
<div id="res-list" class="res-list"></div>
|
||
|
||
<div class="res-actions">
|
||
<button class="kt-ai-btn" data-variant="ghost" data-size="lg" id="btn-logout">Выйти</button>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" id="btn-retry" hidden>Пройти снова (2-я попытка)</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════ ЭКРАН КУРАТОРА ═══════════════ -->
|
||
<section id="scr-curator" hidden>
|
||
<div class="kt-ai-shell">
|
||
<aside class="kt-ai-sidebar">
|
||
<div class="sb-top">
|
||
<img src="design-system/brand/kt-ai-logo.png" alt="" width="28">
|
||
<span class="nm">Проверка знаний</span>
|
||
</div>
|
||
<div class="sb-new">
|
||
<button class="kt-ai-btn" data-variant="primary" id="btn-new-q">
|
||
<svg class="kt-icon kt-icon-sm"><use href="#plus"></use></svg>Вопрос
|
||
</button>
|
||
</div>
|
||
<nav>
|
||
<div class="kt-ai-nav-group">
|
||
<a class="kt-ai-nav-item is-active" href="#" data-cur-view="analysis">
|
||
<svg class="kt-icon"><use href="#chart"></use></svg><span class="nav-label">Анализ</span>
|
||
</a>
|
||
<a class="kt-ai-nav-item" href="#" data-cur-view="persons">
|
||
<svg class="kt-icon"><use href="#users"></use></svg><span class="nav-label">Специалисты</span>
|
||
</a>
|
||
<a class="kt-ai-nav-item" href="#" data-cur-view="questions">
|
||
<svg class="kt-icon"><use href="#book"></use></svg><span class="nav-label">Вопросы</span>
|
||
<span class="count" id="nav-count-q">0</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
<div class="sb-bottom">
|
||
<button class="kt-ai-nav-item sb-util" id="btn-cur-logout">
|
||
<svg class="kt-icon"><use href="#logout"></use></svg><span class="nav-label">Выйти</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="cur-main">
|
||
<header class="kt-ai-topbar">
|
||
<div class="topbar-title">
|
||
<span class="t" id="cur-title">Анализ</span>
|
||
<span class="sub" id="cur-sub"></span>
|
||
</div>
|
||
<span class="spacer"></span>
|
||
</header>
|
||
|
||
<div id="cur-view" class="cur-view"></div>
|
||
</main>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════ DRAWER ═══════════════ -->
|
||
<aside id="drawer" class="kt-ai-drawer" hidden>
|
||
<div id="drawer-body" class="drawer-body"></div>
|
||
</aside>
|
||
<div id="drawer-scrim" class="kt-ai-scrim" hidden></div>
|
||
|
||
<!-- ═══════════════ МОДАЛКА ═══════════════ -->
|
||
<div id="modal-wrap" class="kt-ai-modal-overlay" hidden>
|
||
<div id="modal" class="kt-ai-modal">
|
||
<div class="modal-title" id="modal-title"></div>
|
||
<div class="modal-body" id="modal-body"></div>
|
||
<div class="modal-actions" id="modal-actions"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-toast-stack" id="toasts"></div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|