164 lines
7.6 KiB
HTML
164 lines
7.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; }
|
||
.form-card { max-width: 640px; margin: 0 auto; }
|
||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-4); }
|
||
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
|
||
.form-msg { margin-top: var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); }
|
||
.form-msg.err { color: var(--kt-ai-danger); }
|
||
.form-msg.ok { color: var(--kt-ai-primary); }
|
||
</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="#about">О хакатоне</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#register">Зарегистрироваться</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Хакатон АО «Казахтелеком»</h1>
|
||
<p class="kt-ai-hero-sub">48 часов, чтобы создать продукт будущего в сфере телекома и ИИ. Собери команду, покажи идею — победи!</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#register">Зарегистрироваться</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#about">Подробнее</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" 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)">
|
||
<article class="kt-ai-tile"><h3>💻 Кто может участвовать</h3><p>Разработчики, дизайнеры, аналитики и все, кто горит идеями. Можно одному или командой до 5 человек.</p></article>
|
||
<article class="kt-ai-tile"><h3>🏆 Призовой фонд</h3><p>Денежные призы, стажировка и возможность внедрить свой проект в продуктовую линейку Казахтелеком.</p></article>
|
||
<article class="kt-ai-tile"><h3>🚀 Тематика</h3><p>ИИ и телеком: умные сервисы, автоматизация, аналитика данных, IoT и цифровые продукты для миллионов абонентов.</p></article>
|
||
</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-card form-card" style="margin-top:var(--kt-ai-space-9)">
|
||
<form id="regForm">
|
||
<div class="form-grid">
|
||
<div class="kt-ai-field">
|
||
<label for="name">Имя и фамилия *</label>
|
||
<input class="kt-ai-input" id="name" name="name" required placeholder="Ержан Асанов">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="email">Email *</label>
|
||
<input class="kt-ai-input" id="email" name="email" type="email" required placeholder="you@example.kz">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="phone">Телефон</label>
|
||
<input class="kt-ai-input" id="phone" name="phone" placeholder="+7 (___) ___-__-__">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="city">Город</label>
|
||
<input class="kt-ai-input" id="city" name="city" placeholder="Астана">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="role">Роль в команде</label>
|
||
<select class="kt-ai-select" id="role" name="role">
|
||
<option value="">Выберите роль</option>
|
||
<option>Разработчик</option>
|
||
<option>Дизайнер</option>
|
||
<option>Аналитик</option>
|
||
<option>Тимлид</option>
|
||
<option>Другое</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label for="team">Название команды (если есть)</label>
|
||
<input class="kt-ai-input" id="team" name="team" placeholder="Например: Digital Steppe">
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-top:var(--kt-ai-space-4)">
|
||
<label for="idea">Кратко о твоей идее</label>
|
||
<textarea class="kt-ai-textarea" id="idea" name="idea" rows="4" placeholder="Какой продукт хочешь сделать на хакатоне?"></textarea>
|
||
</div>
|
||
<div style="margin-top:var(--kt-ai-space-6)">
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" id="submitBtn">Отправить заявку</button>
|
||
</div>
|
||
<p class="form-msg" id="msg"></p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Хакатон АО «Казахтелеком»</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Сохраним вашу идею — изменим телеком</span>
|
||
</footer>
|
||
|
||
<script>
|
||
var form = document.getElementById("regForm");
|
||
var msg = document.getElementById("msg");
|
||
var btn = document.getElementById("submitBtn");
|
||
|
||
form.addEventListener("submit", async function (e) {
|
||
e.preventDefault();
|
||
msg.textContent = "";
|
||
msg.className = "form-msg";
|
||
btn.disabled = true;
|
||
btn.textContent = "Отправляем…";
|
||
var payload = {
|
||
name: form.name.value.trim(),
|
||
email: form.email.value.trim(),
|
||
phone: form.phone.value.trim(),
|
||
city: form.city.value.trim(),
|
||
role: form.role.value,
|
||
team: form.team.value.trim(),
|
||
idea: form.idea.value.trim()
|
||
};
|
||
try {
|
||
var r = await fetch("api/register", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
var j = await r.json();
|
||
if (r.ok && j.ok) {
|
||
form.reset();
|
||
msg.textContent = "✅ Заявка отправлена! Мы свяжемся с вами по указанному email.";
|
||
msg.className = "form-msg ok";
|
||
} else {
|
||
msg.textContent = j.error || "Не удалось отправить заявку. Попробуйте ещё раз.";
|
||
msg.className = "form-msg err";
|
||
}
|
||
} catch (err) {
|
||
msg.textContent = "Сервер недоступен. Попробуйте позже.";
|
||
msg.className = "form-msg err";
|
||
}
|
||
btn.disabled = false;
|
||
btn.textContent = "Отправить заявку";
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|