74 lines
3.6 KiB
HTML
74 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="auto">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Заявки — Мероприятие Казахтелеком</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📋</text></svg>">
|
||
<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; }
|
||
.reg-table-wrap { overflow-x: auto; border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); }
|
||
table { width: 100%; border-collapse: collapse; font-size: var(--kt-ai-text-sm); }
|
||
th, td { text-align: left; padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-bottom: 1px solid var(--kt-ai-divider); vertical-align: top; }
|
||
th { color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-semibold); white-space: nowrap; }
|
||
tr:last-child td { border-bottom: none; }
|
||
.kpi-row { display: flex; gap: var(--kt-ai-space-6); flex-wrap: wrap; margin: var(--kt-ai-space-6) 0; }
|
||
.kpi b { display: block; font-size: var(--kt-ai-text-2xl); }
|
||
.kpi span { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>Мероприятие Казахтелеком · Заявки</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="index.html">← К форме</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-section">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Зарегистрировавшиеся участники</h2>
|
||
<p>Список обновляется автоматически после каждой новой заявки.</p>
|
||
</div>
|
||
<div class="kpi-row" id="kpi"></div>
|
||
<div class="reg-table-wrap">
|
||
<table id="regTable">
|
||
<thead>
|
||
<tr><th>ФИО</th><th>Email</th><th>Телефон</th><th>Город</th><th>Формат</th><th>Статус</th><th>Компания</th><th>Дата</th></tr>
|
||
</thead>
|
||
<tbody id="tbody"></tbody>
|
||
</table>
|
||
</div>
|
||
<p id="empty" class="reg-note" hidden style="margin-top:var(--kt-ai-space-5)">Пока никто не зарегистрировался.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
fetch("api/registrations").then(r => r.json()).then(function (items) {
|
||
var tbody = document.getElementById("tbody");
|
||
var kpi = document.getElementById("kpi");
|
||
document.getElementById("empty").hidden = items.length > 0;
|
||
var teams = {};
|
||
items.forEach(function (i) { if (i.team) teams[i.team] = (teams[i.team] || 0) + 1; });
|
||
kpi.innerHTML =
|
||
'<div class="kpi"><b>' + items.length + '</b><span>заявок</span></div>' +
|
||
'<div class="kpi"><b>' + Object.keys(teams).length + '</b><span>компаний</span></div>';
|
||
tbody.innerHTML = items.map(function (i) {
|
||
return "<tr><td>" + esc(i.fio) + "</td><td>" + esc(i.email) + "</td><td>" + esc(i.phone) +
|
||
"</td><td>" + esc(i.city) + "</td><td>" + esc(i.track) + "</td><td>" + esc(i.role) +
|
||
"</td><td>" + (i.team ? esc(i.team) : "—") + "</td><td>" + (i.createdAt || "").slice(0, 10) + "</td></tr>";
|
||
}).join("");
|
||
|
||
function esc(s) { return String(s || "").replace(/[&<>"']/g, function (c) { return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]; }); }
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|