privet-mozhesh-mne-sozdat-fo/index.html

138 lines
7.3 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: 640px; margin: 0 auto; display: grid; gap: var(--kt-ai-space-5); }
.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-4); }
@media (max-width: 640px) { .reg-row { grid-template-columns: 1fr; } }
.reg-note { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); }
.form-msg { border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-5); }
.form-msg.ok { background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border); color: var(--kt-ai-fg); }
.form-msg.err { background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-danger); color: var(--kt-ai-danger); }
.kt-ai-tile-icon { font-size: 28px; }
</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="cabinet.html">Мой кабинет</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"><div class="kt-ai-tile-icon">🎤</div><h3>Интересная программа</h3><p>Доклады, панельные дискуссии и ответы на вопросы от команд компании.</p></article>
<article class="kt-ai-tile"><div class="kt-ai-tile-icon">🤝</div><h3>Нетворкинг</h3><p>Эксперты Казахтелекома, партнёры и коллеги — все в одном месте.</p></article>
<article class="kt-ai-tile"><div class="kt-ai-tile-icon">✨</div><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>
<form id="regForm" class="reg-form" style="margin-top:var(--kt-ai-space-8)" novalidate>
<div class="kt-ai-field">
<label for="fio">ФИО *</label>
<input class="kt-ai-input" id="fio" name="fio" placeholder="Иванов Иван Иванович" required>
</div>
<div class="reg-row">
<div class="kt-ai-field">
<label for="email">Email *</label>
<input class="kt-ai-input" id="email" name="email" type="email" placeholder="you@example.kz" required>
</div>
<div class="kt-ai-field">
<label for="phone">Телефон *</label>
<input class="kt-ai-input" id="phone" name="phone" placeholder="+7 7XX XXX XX XX" required>
</div>
</div>
<div class="reg-row">
<div class="kt-ai-field">
<label for="city">Город *</label>
<input class="kt-ai-input" id="city" name="city" placeholder="Алматы" required>
</div>
<div class="kt-ai-field">
<label for="track">Формат участия *</label>
<select class="kt-ai-select" id="track" name="track" required>
<option value="">Выберите формат</option>
<option>Участник</option>
<option>Спикер</option>
<option>Волонтёр</option>
<option>Гость</option>
<option>Другое</option>
</select>
</div>
</div>
<div class="reg-row">
<div class="kt-ai-field">
<label for="role">Статус *</label>
<select class="kt-ai-select" id="role" name="role" required>
<option value="">Выберите статус</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="Если применимо">
</div>
</div>
<div class="kt-ai-field">
<label for="experience">О себе *</label>
<textarea class="kt-ai-textarea" id="experience" name="experience" rows="4" placeholder="Расскажи коротко: чем занимаешься и почему хочешь прийти" required></textarea>
</div>
<div>
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" id="submitBtn">Отправить заявку</button>
<p class="reg-note" style="margin-top:var(--kt-ai-space-3)">* — обязательные поля. Отправляя форму, ты соглашаешься на обработку персональных данных.</p>
</div>
<div id="formMsg" class="form-msg" hidden></div>
</form>
</div>
</section>
<footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 АО «Казахтелеком» · Мероприятие</span>
<span class="kt-ai-spacer"></span>
<a class="kt-ai-link" href="cabinet.html">Мой кабинет</a>
<a class="kt-ai-link" href="admin.html">Список участников</a>
</footer>
<script src="script.js"></script>
</body>
</html>