sozday-mne-formu-registratsi-3/index.html

122 lines
5.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="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; }
.kt-ai-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-4); }
@media (max-width: 640px) { .kt-ai-form-grid { grid-template-columns: 1fr; } }
#form-msg { margin-top: var(--kt-ai-space-4); }
</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="#event">О мероприятии</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">
<span class="kt-ai-chip">Регистрация открыта</span>
<h1>Корпоративное мероприятие АО «Казахтелеком»</h1>
<p class="kt-ai-hero-sub">Заполните короткую форму — и мы закрепим за вами место. Подтверждение придёт на указанную почту.</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="#event">Программа</a>
</div>
</div>
</section>
<section id="event" 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>20 октября 2026, 18:00</p></article>
<article class="kt-ai-tile"><h3>📍 Место</h3><p>г. Астана, БЦ «Казахтелеком», конференц-зал</p></article>
<article class="kt-ai-tile"><h3>🎯 Программа</h3><p>Доклады, награждение, ужин и живая музыка</p></article>
<article class="kt-ai-tile"><h3>📝 Дресс-код</h3><p>Smart casual</p></article>
</div>
</div>
</section>
<section id="register" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="narrow">
<div class="kt-ai-section-head">
<h2>Форма регистрации</h2>
<p>Заполните поля — это займёт меньше минуты.</p>
</div>
<form id="reg-form" class="kt-ai-card" style="margin-top:var(--kt-ai-space-7);display:grid;gap:var(--kt-ai-space-4)">
<div class="kt-ai-field">
<label for="f-name">ФИО *</label>
<input class="kt-ai-input" id="f-name" name="name" placeholder="Иванов Иван Иванович" required>
</div>
<div class="kt-ai-form-grid">
<div class="kt-ai-field">
<label for="f-dept">Подразделение / филиал</label>
<input class="kt-ai-input" id="f-dept" name="department" placeholder="Например: Филиал Астана">
</div>
<div class="kt-ai-field">
<label for="f-position">Должность</label>
<input class="kt-ai-input" id="f-position" name="position" placeholder="Например: инженер">
</div>
</div>
<div class="kt-ai-form-grid">
<div class="kt-ai-field">
<label for="f-phone">Телефон *</label>
<input class="kt-ai-input" id="f-phone" name="phone" type="tel" placeholder="+7 (___) ___-__-__" required>
</div>
<div class="kt-ai-field">
<label for="f-email">Рабочая почта</label>
<input class="kt-ai-input" id="f-email" name="email" type="email" placeholder="name@telecom.kz">
</div>
</div>
<div class="kt-ai-field">
<label for="f-guests">Сопровождающие (кол-во гостей)</label>
<select class="kt-ai-select" id="f-guests" name="guests">
<option value="0">Приду один(одна)</option>
<option value="1">+1 гость</option>
<option value="2">+2 гостя</option>
</select>
</div>
<div class="kt-ai-field">
<label for="f-comment">Комментарий</label>
<textarea class="kt-ai-textarea" id="f-comment" name="comment" placeholder="Особые пожелания, вопросы…"></textarea>
</div>
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" id="f-submit">Отправить регистрацию</button>
<p id="form-msg" hidden></p>
</form>
</div>
</section>
<section class="kt-ai-cta">
<div class="kt-ai-wrap">
<h2>Остались вопросы?</h2>
<p>Напишите организаторам — ответим в течение рабочего дня.</p>
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="mailto:event@telecom.kz">event@telecom.kz</a>
</div>
</section>
<footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 АО «Казахтелеком»</span>
<span class="kt-ai-spacer"></span>
<span>Внутреннее мероприятие</span>
</footer>
<script src="script.js"></script>
</body>
</html>