357 lines
14 KiB
HTML
357 lines
14 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>Hackathon Open 2026 — Регистрация</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="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>">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.hero-bg {
|
||
background: linear-gradient(135deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 100%);
|
||
border-radius: var(--kt-ai-radius-3xl);
|
||
padding: var(--kt-ai-space-12);
|
||
margin-bottom: var(--kt-ai-space-12);
|
||
}
|
||
.form-card {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-3xl);
|
||
padding: var(--kt-ai-space-10);
|
||
max-width: 520px;
|
||
}
|
||
.participants-list {
|
||
display: grid;
|
||
gap: var(--kt-ai-space-4);
|
||
}
|
||
.participant-item {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-5);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-4);
|
||
}
|
||
.participant-avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: var(--kt-ai-radius-full);
|
||
background: var(--kt-ai-primary);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
font-size: var(--kt-ai-text-lg);
|
||
}
|
||
.participant-info {
|
||
flex: 1;
|
||
}
|
||
.participant-name {
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
color: var(--kt-ai-fg);
|
||
}
|
||
.participant-meta {
|
||
font-size: var(--kt-ai-text-sm);
|
||
color: var(--kt-ai-fg-muted);
|
||
}
|
||
.stats-strip {
|
||
display: flex;
|
||
gap: var(--kt-ai-space-6);
|
||
flex-wrap: wrap;
|
||
margin-bottom: var(--kt-ai-space-8);
|
||
}
|
||
.stat-card {
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-5);
|
||
min-width: 140px;
|
||
text-align: center;
|
||
}
|
||
.stat-value {
|
||
font-size: var(--kt-ai-text-3xl);
|
||
font-weight: var(--kt-ai-weight-bold);
|
||
color: var(--kt-ai-primary);
|
||
}
|
||
.stat-label {
|
||
font-size: var(--kt-ai-text-sm);
|
||
color: var(--kt-ai-fg-muted);
|
||
}
|
||
.checkbox-wrapper {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--kt-ai-space-3);
|
||
margin-top: var(--kt-ai-space-2);
|
||
}
|
||
.checkbox-wrapper input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-top: 2px;
|
||
}
|
||
.checkbox-label {
|
||
font-size: var(--kt-ai-text-sm);
|
||
color: var(--kt-ai-fg-muted);
|
||
line-height: 1.4;
|
||
}
|
||
.success-message {
|
||
background: var(--kt-ai-bg-soft);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
padding: var(--kt-ai-space-6);
|
||
text-align: center;
|
||
margin-top: var(--kt-ai-space-6);
|
||
}
|
||
.success-icon {
|
||
font-size: 48px;
|
||
margin-bottom: var(--kt-ai-space-3);
|
||
}
|
||
</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">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3)">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<strong>Hackathon Open 2026</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<div class="hero-bg">
|
||
<h1 style="margin-bottom:var(--kt-ai-space-4)">Hackathon Open 2026</h1>
|
||
<p class="kt-ai-hero-sub" style="max-width:600px;margin:0 auto var(--kt-ai-space-8)">
|
||
Крупнейший хакатон от Казахтелекома. 48 часов кодинга, менторство от экспертов,
|
||
призовой фонд и реальные кейсы телеком-индустрии.
|
||
</p>
|
||
<div class="kt-ai-hero-actions" style="justify-content:center">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#register">Зарегистрироваться</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#participants">Участники</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Статистика регистрации</h2>
|
||
<p>Актуальные данные о количестве участников</p>
|
||
</div>
|
||
<div class="stats-strip">
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="totalParticipants">0</div>
|
||
<div class="stat-label">Зарегистрировано</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="todayCount">0</div>
|
||
<div class="stat-label">За сегодня</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" style="color:var(--kt-ai-chart-green)">48</div>
|
||
<div class="stat-label">Часов на хакатон</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" style="color:var(--kt-ai-chart-orange)">20</div>
|
||
<div class="stat-label">Команд нужно</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="register" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Регистрация участника</h2>
|
||
<p>Заполните форму для участия в хакатоне</p>
|
||
</div>
|
||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
||
<div>
|
||
<div class="form-card">
|
||
<form id="registrationForm">
|
||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-5)">
|
||
<label style="font-weight:var(--kt-ai-weight-medium);color:var(--kt-ai-fg)">Имя</label>
|
||
<input class="kt-ai-input" id="firstName" name="firstName" placeholder="Ваше имя" required>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-5)">
|
||
<label style="font-weight:var(--kt-ai-weight-medium);color:var(--kt-ai-fg)">Фамилия</label>
|
||
<input class="kt-ai-input" id="lastName" name="lastName" placeholder="Ваша фамилия" required>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-5)">
|
||
<label style="font-weight:var(--kt-ai-weight-medium);color:var(--kt-ai-fg)">Телефон</label>
|
||
<input class="kt-ai-input" id="phone" name="phone" type="tel" placeholder="+7 (777) 777-77-77" required>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-5)">
|
||
<label style="font-weight:var(--kt-ai-weight-medium);color:var(--kt-ai-fg)">Telegram-аккаунт</label>
|
||
<input class="kt-ai-input" id="telegram" name="telegram" type="text" placeholder="@username" required>
|
||
</div>
|
||
<div class="checkbox-wrapper">
|
||
<input type="checkbox" id="consent" name="consent" required>
|
||
<label class="checkbox-label" for="consent">
|
||
Я подтверждаю достоверность указанных данных и даю согласие на их обработку
|
||
в соответствии с политикой конфиденциальности Hackathon Open 2026
|
||
</label>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width:100%;margin-top:var(--kt-ai-space-7)">
|
||
Зарегистрироваться
|
||
</button>
|
||
</form>
|
||
<div id="successMessage" class="success-message" style="display:none">
|
||
<div class="success-icon">✅</div>
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">Регистрация успешна!</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">Добро пожаловать на Hackathon Open 2026!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:var(--kt-ai-space-6)">
|
||
<article class="kt-ai-tile">
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">📅 Когда</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">15-17 ноября 2026, старт в пятницу 18:00</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">📍 Где</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">Алматы, Технопарк Казахтелеком, ул. Байсеитовой 46</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">👥 Кто может участвовать</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">Студенты, выпускники и специалисты IT-сферы от 18 лет</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3 style="margin-bottom:var(--kt-ai-space-2)">🏆 Призовой фонд</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">10 000 000 тенге, стажировки и менторская поддержка</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="participants" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Зарегистрированные участники</h2>
|
||
<p>Посмотрите, кто уже присоединился к хакатону</p>
|
||
</div>
|
||
<div id="participantsList" class="participants-list" style="margin-top:var(--kt-ai-space-9)">
|
||
</div>
|
||
<div id="emptyState" class="kt-ai-empty" style="display:none;margin-top:var(--kt-ai-space-8)">
|
||
<div style="font-size:48px;margin-bottom:var(--kt-ai-space-4)">📝</div>
|
||
<h3>Пока нет участников</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">Будьте первым, кто зарегистрируется!</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Hackathon Open — Казахтелеком</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-link" href="#">Политика конфиденциальности</a>
|
||
<a class="kt-ai-link" href="#">Контакты</a>
|
||
</footer>
|
||
|
||
<script>
|
||
const DEMO_DATA = [
|
||
{ firstName: "Алишер", lastName: "Нурсултанов", phone: "+7 (777) 123-45-67", telegram: "@alisher_ns", registeredAt: new Date(Date.now() - 86400000 * 2).toISOString() },
|
||
{ firstName: "Динара", lastName: "Кенжегулова", phone: "+7 (701) 234-56-78", telegram: "@dinara_kz", registeredAt: new Date(Date.now() - 86400000).toISOString() },
|
||
{ firstName: "Максат", lastName: "Ибрагимов", phone: "+7 (778) 345-67-89", telegram: "@maxat_dev", registeredAt: new Date(Date.now() - 43200000).toISOString() },
|
||
{ firstName: "Сабина", lastName: "Ахметова", phone: "+7 (705) 456-78-90", telegram: "@sabi_akh", registeredAt: new Date(Date.now() - 21600000).toISOString() },
|
||
{ firstName: "Ержан", lastName: "Ассанов", phone: "+7 (776) 567-89-01", telegram: "@yerzhan_a", registeredAt: new Date(Date.now() - 7200000).toISOString() }
|
||
];
|
||
|
||
function getStoredParticipants() {
|
||
const stored = localStorage.getItem('hackathonParticipants');
|
||
if (stored) {
|
||
return JSON.parse(stored);
|
||
}
|
||
localStorage.setItem('hackathonParticipants', JSON.stringify(DEMO_DATA));
|
||
return DEMO_DATA;
|
||
}
|
||
|
||
function saveParticipant(data) {
|
||
const participants = getStoredParticipants();
|
||
participants.push(data);
|
||
localStorage.setItem('hackathonParticipants', JSON.stringify(participants));
|
||
}
|
||
|
||
function updateStats() {
|
||
const participants = getStoredParticipants();
|
||
const today = new Date().toDateString();
|
||
const todayCount = participants.filter(p => new Date(p.registeredAt).toDateString() === today).length;
|
||
document.getElementById('totalParticipants').textContent = participants.length;
|
||
document.getElementById('todayCount').textContent = todayCount;
|
||
}
|
||
|
||
function renderParticipants() {
|
||
const participants = getStoredParticipants();
|
||
const container = document.getElementById('participantsList');
|
||
const emptyState = document.getElementById('emptyState');
|
||
|
||
if (participants.length === 0) {
|
||
container.style.display = 'none';
|
||
emptyState.style.display = 'block';
|
||
return;
|
||
}
|
||
|
||
container.style.display = 'grid';
|
||
emptyState.style.display = 'none';
|
||
container.innerHTML = participants.map(p => {
|
||
const initials = (p.firstName[0] + p.lastName[0]).toUpperCase();
|
||
const time = new Date(p.registeredAt).toLocaleString('ru-RU', {
|
||
day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit'
|
||
});
|
||
return `
|
||
<div class="participant-item">
|
||
<div class="participant-avatar">${initials}</div>
|
||
<div class="participant-info">
|
||
<div class="participant-name">${p.firstName} ${p.lastName}</div>
|
||
<div class="participant-meta">${p.telegram} • ${time}</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
document.getElementById('registrationForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const formData = {
|
||
firstName: document.getElementById('firstName').value.trim(),
|
||
lastName: document.getElementById('lastName').value.trim(),
|
||
phone: document.getElementById('phone').value.trim(),
|
||
telegram: document.getElementById('telegram').value.trim(),
|
||
registeredAt: new Date().toISOString()
|
||
};
|
||
|
||
if (!formData.firstName || !formData.lastName || !formData.phone || !formData.telegram) {
|
||
return;
|
||
}
|
||
|
||
if (!document.getElementById('consent').checked) {
|
||
return;
|
||
}
|
||
|
||
saveParticipant(formData);
|
||
document.getElementById('registrationForm').reset();
|
||
document.getElementById('registrationForm').style.display = 'none';
|
||
document.getElementById('successMessage').style.display = 'block';
|
||
|
||
updateStats();
|
||
renderParticipants();
|
||
});
|
||
|
||
updateStats();
|
||
renderParticipants();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|