132 lines
6.6 KiB
HTML
132 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<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="icon" href="design-system/brand/kt-ai-logo.png">
|
||
<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">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.tb-page { max-width: 960px; margin: 0 auto; padding: var(--kt-ai-space-8) var(--kt-ai-space-5); }
|
||
.tb-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-3); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-5); }
|
||
.tb-head > div { flex: 1 1 320px; }
|
||
.tb-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-5); }
|
||
@media (max-width: 600px) { .tb-kpis { grid-template-columns: 1fr; } }
|
||
.tb-kpi { padding: var(--kt-ai-space-4); background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-lg); }
|
||
.tb-kpi b { display: block; font-size: var(--kt-ai-text-xl); }
|
||
.tb-kpi span { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); }
|
||
.tb-table-wrap { overflow-x: auto; border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-xl); }
|
||
.tb-tbl { width: 100%; border-collapse: collapse; font-size: var(--kt-ai-text-sm); min-width: 560px; }
|
||
.tb-tbl th { text-align: left; padding: var(--kt-ai-space-3) var(--kt-ai-space-4); color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-medium); border-bottom: 1px solid var(--kt-ai-divider); white-space: nowrap; }
|
||
.tb-tbl td { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.tb-tbl tr:last-child td { border-bottom: none; }
|
||
.tb-tbl .mono { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.tb-empty { padding: var(--kt-ai-space-8); text-align: center; color: var(--kt-ai-fg-muted); }
|
||
.tb-empty .kt-icon { width: 32px; height: 32px; color: var(--kt-ai-fg-faint); }
|
||
.tb-note { margin-top: var(--kt-ai-space-4); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<a href="index.html" style="display:inline-flex;align-items:center;gap:var(--kt-ai-space-2);text-decoration:none">
|
||
<img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком" height="22">
|
||
</a>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="index.html#reg">Регистрация</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="participants.html">Участники</a>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="tb-page">
|
||
<div class="tb-head">
|
||
<div>
|
||
<h1 style="font-size:var(--kt-ai-text-2xl)">Лист участников</h1>
|
||
<p style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Корпоративный тим-билдинг · 10 октября 2026, 11:00–16:00</p>
|
||
</div>
|
||
<div style="display:flex;gap:var(--kt-ai-space-2)">
|
||
<button class="kt-ai-btn" data-variant="ghost" id="tb-refresh" type="button">Обновить</button>
|
||
<a class="kt-ai-btn" data-variant="primary" href="index.html#reg">Регистрация</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tb-kpis">
|
||
<div class="tb-kpi"><b id="tb-kpi-total">—</b><span>заявок на участие</span></div>
|
||
<div class="tb-kpi"><b id="tb-kpi-depts">—</b><span>отделов представлено</span></div>
|
||
<div class="tb-kpi"><b id="tb-kpi-last">—</b><span>последняя заявка</span></div>
|
||
</div>
|
||
|
||
<div class="tb-table-wrap">
|
||
<table class="tb-tbl">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:48px"></th>
|
||
<th>ФИО</th>
|
||
<th>Отдел</th>
|
||
<th>E-mail</th>
|
||
<th>Телефон</th>
|
||
<th>Заявка</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tb-body"></tbody>
|
||
</table>
|
||
<div class="tb-empty" id="tb-empty" hidden>
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#users"></use></svg>
|
||
<div style="margin-top:var(--kt-ai-space-3)">Пока никто не зарегистрировался</div>
|
||
<p style="margin:var(--kt-ai-space-2) 0 0">Перейдите на <a class="kt-ai-link" href="index.html#reg">форму регистрации</a>, чтобы оставить первую заявку.</p>
|
||
</div>
|
||
</div>
|
||
<p class="tb-note">Список публичный в рамках команды: имена и контакты видят все зарегистрированные сотрудники.</p>
|
||
</main>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot" style="margin-top:var(--kt-ai-space-10)">
|
||
<span>© 2026 АО «Казахтелеком»</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>HR-дирекция</span>
|
||
</footer>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script>
|
||
async function load() {
|
||
const bodyEl = document.getElementById("tb-body");
|
||
const emptyEl = document.getElementById("tb-empty");
|
||
try {
|
||
const r = await fetch("api/registrations?_=" + Date.now());
|
||
const items = await r.json();
|
||
const list = Array.isArray(items) ? items : [];
|
||
list.sort((a, b) => (b.createdAt || "").localeCompare(a.createdAt || ""));
|
||
|
||
document.getElementById("tb-kpi-total").textContent = list.length;
|
||
document.getElementById("tb-kpi-depts").textContent = new Set(list.map((x) => x.dept)).size || "—";
|
||
const last = list[0] ? list[0].createdAt : null;
|
||
document.getElementById("tb-kpi-last").textContent = last ? new Date(last).toLocaleDateString("ru-RU") : "—";
|
||
|
||
emptyEl.hidden = list.length > 0;
|
||
bodyEl.innerHTML = list.map((x, i) => "<tr>" +
|
||
"<td class='mono'>" + (i + 1) + "</td>" +
|
||
"<td>" + esc(x.name) + "</td>" +
|
||
"<td>" + esc(x.dept) + "</td>" +
|
||
"<td>" + esc(x.email) + "</td>" +
|
||
"<td>" + esc(x.phone) + "</td>" +
|
||
"<td class='mono'>" + (x.createdAt ? new Date(x.createdAt).toLocaleDateString("ru-RU") : "") + "</td>" +
|
||
"</tr>").join("");
|
||
} catch (_) {
|
||
emptyEl.hidden = false;
|
||
}
|
||
}
|
||
function esc(s) {
|
||
return String(s == null ? "" : s).replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]));
|
||
}
|
||
document.getElementById("tb-refresh").addEventListener("click", load);
|
||
setInterval(load, 30000);
|
||
load();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|