formu-registratsii-dlya-iven/index.html

148 lines
11 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>
<!-- Страница регистрации на корпоративный ивент АО «Казахтелеком». ДС KT AI: только классы kt-ai-* и токены var(--kt-ai-…). -->
<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="design-system/brand/kt-ai-logo.png">
<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>
.reg-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--kt-ai-space-9); align-items: start; margin-top: var(--kt-ai-space-11); }
@media (max-width: 900px) { .reg-layout { grid-template-columns: 1fr; } .reg-info { order: -1; } }
.evt-title { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; line-height: 1.2; margin-bottom: var(--kt-ai-space-4); }
.evt-meta { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-4) var(--kt-ai-space-8); margin-bottom: var(--kt-ai-space-8); }
.evt-meta > div { display: flex; align-items: center; gap: var(--kt-ai-space-3); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); }
.reg-form { border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-3xl); background: var(--kt-ai-card-bg); padding: var(--kt-ai-space-8); margin-top: var(--kt-ai-space-8); }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--kt-ai-space-5); }
@media (max-width: 560px) { .reg-grid { grid-template-columns: 1fr; } }
.reg-success { text-align: center; padding: var(--kt-ai-space-11) var(--kt-ai-space-7); }
.reg-success .icon-spot { width: 64px; height: 64px; margin: 0 auto var(--kt-ai-space-6); display: grid; place-items: center; border-radius: 50%; background: var(--kt-ai-status-ok-bg); color: var(--kt-ai-status-ok-fg); }
</style>
</head>
<body>
<header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in">
<a href="index.html" style="display:flex;align-items:center;gap:var(--kt-ai-space-3);text-decoration:none;color:var(--kt-ai-fg)">
<img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком" style="height:22px;width:auto">
</a>
<span class="kt-ai-spacer"></span>
<nav aria-label="Разделы" style="display:flex;align-items:center;gap:var(--kt-ai-space-5);font-size:var(--kt-ai-text-sm)">
<a class="kt-ai-link" href="#event">Про ивент</a>
<a class="kt-ai-link" style="display:none" href="#event">Программы</a>
</nav>
<a class="kt-ai-btn" data-variant="ghost" href="app.html" style="margin-left:var(--kt-ai-space-5)">Кабинет организатора</a>
</div>
</header>
<section class="kt-ai-hero" id="event" data-align="center">
<div class="kt-ai-wrap" data-width="narrow">
<span class="kt-ai-chip" data-tone="info">Для сотрудников и партнёров</span>
<h1 style="margin-top:var(--kt-ai-space-5)">Корпоративный ивент АО «Казахтелеком»</h1>
<p class="kt-ai-hero-sub">Годовая встреча компании: сессии по цифровым продуктам, демо новой линейки сервисов и нетворкинг с командами всех филиалов.</p>
<div class="evt-meta" style="justify-content:center">
<div><svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#calendar"></use></svg> 30 октября 2026, 10:00</div>
<div><svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#pin"></use></svg> Алматы, ДК «Жибек жолы»</div>
<div><svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#users"></use></svg> 400 мест</div>
</div>
</div>
</section>
<div class="kt-ai-wrap">
<div class="reg-layout">
<div class="reg-info">
<div class="kt-ai-card" style="padding:var(--kt-ai-space-6)">
<h2 class="kt-ai-h2" style="margin-bottom:var(--kt-ai-space-5)">Программа</h2>
<div style="display:flex;flex-direction:column;gap:var(--kt-ai-space-5)">
<div style="display:flex;gap:var(--kt-ai-space-4);align-items:flex-start">
<span class="kt-ai-avatar" style="font-variant-numeric:tabular-nums">10:00</span>
<div><div class="kt-ai-h3">Регистрация и кофе-брейк</div><div style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Зачисление по QR-коду, приветственный сет</div></div>
</div>
<div style="display:flex;gap:var(--kt-ai-space-4);align-items:flex-start">
<span class="kt-ai-avatar" style="font-variant-numeric:tabular-nums">11:00</span>
<div><div class="kt-ai-h3">Выступление руководства</div><div style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Итоги года и планы по цифровой трансформации</div></div>
</div>
<div style="display:flex;gap:var(--kt-ai-space-4);align-items:flex-start">
<span class="kt-ai-avatar" style="font-variant-numeric:tabular-nums">12:30</span>
<div><div class="kt-ai-h3">Сессии по направлениям</div><div style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Связь, ИТ-услуги, корпоративные решения</div></div>
</div>
<div style="display:flex;gap:var(--kt-ai-space-4);align-items:flex-start">
<span class="kt-ai-avatar" style="font-variant-numeric:tabular-nums">15:00</span>
<div><div class="kt-ai-h3">Нетворкинг и церемония наград</div><div style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm)">Лучшие проекты года, общий обед</div></div>
</div>
</div>
</div>
<div class="kt-ai-banner" data-tone="info" style="margin-top:var(--kt-ai-space-5)">
<svg class="kt-icon" aria-hidden="true" style="flex-shrink:0;margin-top:2px"><use href="#info"></use></svg>
<span>После отправки заявка попадёт организаторам. Приглашение с QR-кодом придёт на корпоративную почту после подтверждения.</span>
</div>
</div>
<div>
<div class="reg-form" id="formBlock">
<h2 class="kt-ai-h2" style="margin-bottom:var(--kt-ai-space-6)">Заявка на участие</h2>
<form id="regForm" novalidate>
<div class="kt-ai-field"><label for="fName">ФИО</label><input class="kt-ai-input" id="fName" name="name" autocomplete="name" required placeholder="Иванов Иван Иванович"><div class="error" hidden>Укажите ФИО</div></div>
<div class="reg-grid">
<div class="kt-ai-field"><label for="fDept">Филиал / подразделение</label><input class="kt-ai-input" id="fDept" name="department" required placeholder="Алматы, Связь"></div>
<div class="kt-ai-field"><label for="fPos">Должность</label><input class="kt-ai-input" id="fPos" name="position" required placeholder="Инженер"></div>
</div>
<div class="reg-grid">
<div class="kt-ai-field"><label for="fEmail">Корпоративная почта</label><input class="kt-ai-input" id="fEmail" name="email" type="email" required placeholder="ivanov@kt.kz"><div class="error" hidden>Введите корректную почту</div></div>
<div class="kt-ai-field"><label for="fPhone">Телефон</label><input class="kt-ai-input" id="fPhone" name="phone" type="tel" required placeholder="+7 700 000 00 00"><div class="error" hidden>Укажите телефон</div></div>
</div>
<div class="kt-ai-field"><label for="fRole">Роли в заявке</label>
<span class="kt-ai-select-wrap"><select class="kt-ai-select" id="fRole" name="role">
<option value="Сотрудник">Сотрудник АО «Казахтелеком»</option>
<option value="Партнёр">Представитель партнёра</option>
<option value="Пресса">СМИ и пресса</option>
</select></span>
</div>
<div class="kt-ai-field"><label for="fTrack">Сессия по интересам</label>
<span class="kt-ai-select-wrap"><select class="kt-ai-select" id="fTrack" name="track">
<option value="Связь">Связь и сети</option>
<option value="ИТ-услуги">ИТ-услуги и дата-центры</option>
<option value="Корпоративные решения">Корпоративные решения</option>
<option value="Все сессии">Все сессии</option>
</select></span>
</div>
<div class="kt-ai-field"><label for="fFood">Питание</label>
<span class="kt-ai-select-wrap"><select class="kt-ai-select" id="fFood" name="food">
<option value="Обычное">Обычное</option>
<option value="Вегетарианское">Вегетарианское</option>
<option value="Без глютена">Без глютена</option>
</select></span>
</div>
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" id="regSubmit" style="width:100%;justify-content:center;display:inline-flex">Отправить заявку</button>
</form>
</div>
<div class="kt-ai-card" id="successBlock" hidden style="padding:0">
<div class="reg-success">
<div class="icon-spot"><svg class="kt-icon kt-icon-lg" aria-hidden="true"><use href="#check"></use></svg></div>
<div class="kt-ai-h2" style="margin-bottom:var(--kt-ai-space-3)">Заявка принята</div>
<p style="color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-sm);max-width:36ch;margin:0 auto var(--kt-ai-space-7)">Ожидайте приглашение с QR-кодом на указанный адрес почты. Статус заявки можно посмотреть у организаторов.</p>
<button class="kt-ai-btn" data-size="lg" type="button" id="againBtn" style="justify-content:center;display:inline-flex">Ещё одна заявка</button>
</div>
</div>
</div>
</div>
</div>
<footer class="kt-ai-wrap kt-ai-pagefoot" style="margin-top:var(--kt-ai-space-12)">
<span>© 2026 АО «Казахтелеком»</span>
<span class="kt-ai-spacer"></span>
<span>Отдел по работе с персоналом · +7 7172 59 59 59</span>
</footer>
<script src="design-system/icons/kt-ai-icons.js"></script>
<script src="script.js" data-page="form"></script>
</body>
</html>