121 lines
5.4 KiB
HTML
121 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн (КТ, светлый). Токены и компоненты — из design-system/. -->
|
||
<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="style.css">
|
||
<style>
|
||
/* ДС рисует кнопки для <button>; у ссылки-кнопки браузер добавляет подчёркивание */
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app" data-kt-data-mode="demo">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong class="t-title">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахстантелеком" class="t-logo">
|
||
<span class="t-title-text">Учёт заявок на пропуск</span>
|
||
</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="kt-ai-wrap kt-ai-main t-main">
|
||
|
||
<div class="kt-ai-section-head">
|
||
<h1 class="t-h1">Заявки на пропуск</h1>
|
||
<p>Создайте заявку и следите за её статусом — от подачи до решения.</p>
|
||
</div>
|
||
|
||
<section class="kt-ai-card t-card" id="card-form">
|
||
<h2 class="t-card-title">Новая заявка</h2>
|
||
<form id="request-form" class="t-form" novalidate>
|
||
<div class="kt-ai-field">
|
||
<label for="f-name">ФИО</label>
|
||
<input class="kt-ai-input" type="text" id="f-name" placeholder="Например: Ахметов Ерлан" autocomplete="off">
|
||
<span class="error" hidden>Укажите ФИО</span>
|
||
</div>
|
||
<div class="t-form-row">
|
||
<div class="kt-ai-field">
|
||
<label for="f-purpose">Цель пропуска</label>
|
||
<input class="kt-ai-input" type="text" id="f-purpose" placeholder="Въезд на территорию офиса №2" autocomplete="off">
|
||
<span class="error" hidden>Укажите цель</span>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="f-date">Дата подачи</label>
|
||
<input class="kt-ai-input" type="date" id="f-date">
|
||
<span class="error" hidden>Выберите дату</span>
|
||
</div>
|
||
</div>
|
||
<button class="kt-ai-btn" type="submit" data-variant="primary" data-size="lg">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg>
|
||
Отправить заявку
|
||
</button>
|
||
</form>
|
||
</section>
|
||
|
||
<section class="t-card t-card-stats">
|
||
<div class="kt-ai-kpi-strip" id="kpi-strip"></div>
|
||
<div class="kt-ai-filterbar" role="group" aria-label="Фильтр по статусу">
|
||
<span class="t-filter-caption"><svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#filter"></use></svg>Статус:</span>
|
||
<button type="button" class="kt-ai-filter-chip" data-status="all" data-active="true">Все</button>
|
||
<button type="button" class="kt-ai-filter-chip" data-status="new">Новые</button>
|
||
<button type="button" class="kt-ai-filter-chip" data-status="processing">В обработке</button>
|
||
<button type="button" class="kt-ai-filter-chip" data-status="approved">Одобренные</button>
|
||
<button type="button" class="kt-ai-filter-chip" data-status="rejected">Отклонённые</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-card t-card" id="card-list">
|
||
<h2 class="t-card-title">Список заявок</h2>
|
||
<div class="kt-ai-table-toolbar">
|
||
<span class="kt-ai-spacer" style="margin-left:0"></span>
|
||
<span class="t-total" id="list-total"></span>
|
||
</div>
|
||
<div class="kt-ai-table-wrap t-table-wrap" id="table-wrap">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>ФИО</th>
|
||
<th>Цель</th>
|
||
<th>Дата</th>
|
||
<th>Статус</th>
|
||
<th class="t-col-actions">Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="list-body"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="kt-ai-empty" id="list-empty" hidden>
|
||
<span class="icon-spot"><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#inbox"></use></svg></span>
|
||
<span class="title">Заявок нет</span>
|
||
<span id="list-empty-hint">Под выбранный статус заявки не нашлись.</span>
|
||
<button class="kt-ai-btn" data-variant="ghost" data-size="sm" type="button" id="btn-reset">Сбросить фильтр</button>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Учёт заявок на пропуск</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Демонстрационная версия</span>
|
||
</footer>
|
||
|
||
<div class="kt-ai-toast-stack" id="toast-stack"></div>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|