v2: тёмная тема по умолчанию + страница участников с KPI и таблицей
This commit is contained in:
parent
fd02b50300
commit
a82044da1c
11
index.html
11
index.html
@ -1,6 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- Проект «Регистрация на тим-билдинг АО "Казахтелеком"». Фронт на дизайн-системе KT AI; формы отдают в API (server.js). -->
|
||||
<html lang="ru" data-theme="auto">
|
||||
<html lang="ru" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
@ -32,9 +32,12 @@
|
||||
|
||||
<header class="kt-ai-pagehead">
|
||||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||||
<img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком" height="22">
|
||||
<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-white.png" alt="Казахтелеком" height="22">
|
||||
</a>
|
||||
<span class="kt-ai-spacer"></span>
|
||||
<span style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">HR-портал</span>
|
||||
<a class="kt-ai-btn" data-variant="ghost" href="#reg">Регистрация</a>
|
||||
<a class="kt-ai-btn" href="participants.html">Участники</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -59,7 +62,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Форма регистрации -->
|
||||
<section class="kt-ai-card tb-form-card">
|
||||
<section id="reg" class="kt-ai-card tb-form-card">
|
||||
<h2 style="font-size:var(--kt-ai-text-lg)">Заявка на участие</h2>
|
||||
<form id="tb-form" novalidate>
|
||||
<div id="tb-msg" class="tb-msg" role="status"></div>
|
||||
|
||||
131
participants.html
Normal file
131
participants.html
Normal file
@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" data-theme="dark">
|
||||
<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-white.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>
|
||||
@ -15,7 +15,7 @@ async function loadCount() {
|
||||
const el = document.getElementById("tb-count");
|
||||
if (n > 0) {
|
||||
el.hidden = false;
|
||||
el.textContent = "Заявило участие: " + n + " чел. из 150";
|
||||
el.innerHTML = "Заявило участие: " + n + " чел. из 150 · <a class=\"kt-ai-link\" href=\"participants.html\">смотреть лист участников</a>";
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user