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

121 lines
6.0 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="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-form { max-width: 560px; margin: 0 auto; }
.reg-ok { text-align: center; padding: var(--kt-ai-space-8) var(--kt-ai-space-6); }
.reg-ok h2 { margin-bottom: var(--kt-ai-space-3); }
.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-fg-muted); }
</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">
<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="#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>20 октября 2026, 10:00. Сбор участников с 09:30.</p></article>
<article class="kt-ai-tile"><h3>📍 Место проведения</h3><p>г. Астана, БЦ «Телеком», конференц-зал на 1 этаже.</p></article>
<article class="kt-ai-tile"><h3>🎯 Программа</h3><p>Приветствие руководства, презентации, нетворкинг и фуршет.</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 reg-form" style="margin-top:var(--kt-ai-space-8)">
<form id="regForm" novalidate>
<div class="kt-ai-field">
<label for="fio">ФИО *</label>
<input class="kt-ai-input" id="fio" name="fio" placeholder="Иванов Иван Иванович" required>
</div>
<div class="kt-ai-field">
<label for="dept">Подразделение / филиал</label>
<input class="kt-ai-input" id="dept" name="dept" placeholder="Например: Дирекция по маркетингу">
</div>
<div class="kt-ai-field">
<label for="position">Должность</label>
<input class="kt-ai-input" id="position" name="position" placeholder="Например: ведущий специалист">
</div>
<div class="kt-ai-field">
<label for="phone">Телефон *</label>
<input class="kt-ai-input" id="phone" name="phone" type="tel" placeholder="+7 (___) ___-__-__" required>
</div>
<div class="kt-ai-field">
<label for="email">Рабочий email *</label>
<input class="kt-ai-input" id="email" name="email" type="email" placeholder="name@telecom.kz" required>
</div>
<div class="kt-ai-field">
<label for="guests">Количество гостей</label>
<select class="kt-ai-select" id="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="comment">Комментарий</label>
<textarea class="kt-ai-textarea" id="comment" name="comment" placeholder="Особые пожелания, вопросы организаторам"></textarea>
</div>
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" id="submitBtn" style="width:100%">Зарегистрироваться</button>
<p class="form-msg" id="formMsg" hidden></p>
</form>
<div class="reg-ok" id="regOk" hidden>
<h2>✅ Вы зарегистрированы!</h2>
<p>Спасибо! Мы отправим подтверждение на указанный email.<br>До встречи на мероприятии!</p>
</div>
</div>
</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>