sozday-sayt-dlya-provedeniya/index.html

237 lines
12 KiB
HTML
Raw Permalink 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>KAZAKHTELECOM ESPORTS CUP 2026</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">
<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>">
<style>
a.kt-ai-btn { text-decoration: none; }
.game-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--kt-ai-radius-2xl); margin-bottom: var(--kt-ai-space-4); }
.tournament-bracket { background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-2xl); padding: var(--kt-ai-space-6); }
.prize-pool { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-primary); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
</style>
</head>
<body>
<header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in">
<strong>🎮 KT ESPORTS CUP 2026</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="ghost" href="#games">Дисциплины</a>
<a class="kt-ai-btn" data-variant="ghost" href="#reglament">Регламент</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>KAZAKHTELECOM ESPORTS CUP 2026</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 reveal">
<div class="kt-ai-tile-icon">🏆</div>
<h3>Призовой фонд</h3>
<p class="prize-pool">500 000 ₸</p>
<p>Распределяется между победителями всех дисциплин</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon">👥</div>
<h3>Участники</h3>
<p>Только сотрудники компании «Казахтелеком» и их друзья</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon">📅</div>
<h3>Даты проведения</h3>
<p>Регистрация: до 15 октября 2026<br>Игры: 20-30 октября 2026</p>
</article>
<article class="kt-ai-tile reveal">
<div class="kt-ai-tile-icon">🎯</div>
<h3>Цель турнира</h3>
<p>Развитие корпоративной культуры и тимбилдинг через киберспорт</p>
</article>
</div>
</div>
</section>
<section id="games" 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-card reveal" style="padding: var(--kt-ai-space-5)">
<img src="https://loremflickr.com/400/200/dota2" alt="Dota 2" class="game-img">
<h3>Dota 2</h3>
<p><strong>Формат:</strong> 5×5</p>
<p><strong>Карта:</strong> Standard</p>
<p><strong>Режим:</strong> Captains Mode</p>
<span class="kt-ai-chip">Командная</span>
</article>
<article class="kt-ai-card reveal" style="padding: var(--kt-ai-space-5)">
<img src="https://loremflickr.com/400/200/counterstrike" alt="Counter-Strike 2" class="game-img">
<h3>Counter-Strike 2</h3>
<p><strong>Формат:</strong> 5×5</p>
<p><strong>Карта:</strong> Mirage, Inferno, Dust II</p>
<p><strong>Режим:</strong> Competitive</p>
<span class="kt-ai-chip">Командная</span>
</article>
<article class="kt-ai-card reveal" style="padding: var(--kt-ai-space-5)">
<img src="https://loremflickr.com/400/200/mortalkombat" alt="Mortal Kombat 1" class="game-img">
<h3>Mortal Kombat 1</h3>
<p><strong>Формат:</strong> 1×1</p>
<p><strong>Режим:</strong> Best of 3</p>
<p><strong>Персонажи:</strong> Любые</p>
<span class="kt-ai-chip">1 на 1</span>
</article>
<article class="kt-ai-card reveal" style="padding: var(--kt-ai-space-5)">
<img src="https://loremflickr.com/400/200/fifa" alt="FIFA 25" class="game-img">
<h3>FIFA 25</h3>
<p><strong>Формат:</strong> 1×1</p>
<p><strong>Режим:</strong> Ultimate Team</p>
<p><strong>Таймы:</strong> 6 минут</p>
<span class="kt-ai-chip">1 на 1</span>
</article>
</div>
</div>
</section>
<section id="reglament" 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="tournament-bracket reveal">
<h3 style="margin-bottom: var(--kt-ai-space-4)">📊 Этапы турнира</h3>
<ol style="line-height: 2; margin-bottom: var(--kt-ai-space-6)">
<li><strong>Групповой этап</strong> (20-25 октября) — круговая система</li>
<li><strong>Плей-офф</strong> (26-28 октября) — олимпийская система</li>
<li><strong>Финал</strong> (30 октября) — гранд-финал всех дисциплин</li>
</ol>
<h3 style="margin-bottom: var(--kt-ai-space-4)">✅ Требования к участникам</h3>
<ul style="line-height: 2; margin-bottom: var(--kt-ai-space-6)">
<li>Сотрудник «Казахтелеком» (действующий)</li>
<li>Возраст 18+</li>
<li>Наличие аккаунта в соответствующей игре</li>
<li>Соблюдение спортивной этики</li>
</ul>
<h3 style="margin-bottom: var(--kt-ai-space-4)">🎮 Техническая информация</h3>
<ul style="line-height: 2">
<li>Игры проходят онлайн</li>
<li>Трансляции финалов — на корпоративном портале</li>
<li>Скриншоты результатов отправлять организаторам</li>
</ul>
</div>
</div>
</section>
<section id="register" class="kt-ai-cta">
<div class="kt-ai-wrap">
<h2>Регистрация команды</h2>
<p>Заполни форму ниже и отправь заявку на участие</p>
<form action="https://formsubmit.co/esports@kazakhtelecom.kz" method="POST" style="max-width: 520px; margin: var(--kt-ai-space-6) auto">
<input type="hidden" name="_subject" value="Новая заявка на KT ESPORTS CUP 2026">
<input type="hidden" name="_captcha" value="false">
<div class="kt-ai-field" style="margin-bottom: var(--kt-ai-space-4)">
<label>Название команды</label>
<input class="kt-ai-input" name="team_name" placeholder="Например: Cyber Warriors" required>
</div>
<div class="kt-ai-field" style="margin-bottom: var(--kt-ai-space-4)">
<label>ФИО капитана</label>
<input class="kt-ai-input" name="captain_name" placeholder="Иванов Иван Иванович" required>
</div>
<div class="kt-ai-field" style="margin-bottom: var(--kt-ai-space-4)">
<label>Должность капитана</label>
<input class="kt-ai-input" name="captain_position" placeholder="Менеджер проектов" required>
</div>
<div class="kt-ai-field" style="margin-bottom: var(--kt-ai-space-4)">
<label>Департамент/отдел</label>
<input class="kt-ai-input" name="department" placeholder="Департамент цифровизации" required>
</div>
<div class="kt-ai-field" style="margin-bottom: var(--kt-ai-space-4)">
<label>Email</label>
<input class="kt-ai-input" name="email" type="email" placeholder="ivan.ivanov@kazakhtelecom.kz" required>
</div>
<div class="kt-ai-field" style="margin-bottom: var(--kt-ai-space-4)">
<label>Телефон</label>
<input class="kt-ai-input" name="phone" type="tel" placeholder="+7 (777) 123-45-67" required>
</div>
<div class="kt-ai-field" style="margin-bottom: var(--kt-ai-space-4)">
<label>Дисциплина</label>
<select class="kt-ai-select" name="discipline" required>
<option value="">Выберите дисциплину</option>
<option value="Dota 2">Dota 2 (5×5)</option>
<option value="Counter-Strike 2">Counter-Strike 2 (5×5)</option>
<option value="Mortal Kombat 1">Mortal Kombat 1 (1×1)</option>
<option value="FIFA 25">FIFA 25 (1×1)</option>
</select>
</div>
<div class="kt-ai-field" style="margin-bottom: var(--kt-ai-space-6)">
<label>Состав команды (игроки)</label>
<textarea class="kt-ai-textarea" name="players" rows="4" placeholder="1. Иванов Иван — роль/позиция&#10;2. Петров Петр — роль/позиция&#10;3. ...&#10;4. ...&#10;5. ..." required></textarea>
</div>
<button class="kt-ai-btn" data-variant="primary" data-size="lg" type="submit" style="width: 100%">Отправить заявку</button>
<p style="margin-top: var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted)">
После отправки вы получите подтверждение на email в течение 24 часов.
</p>
</form>
</div>
</section>
<footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 Kazakhtelecom Esports Cup</span>
<span class="kt-ai-spacer"></span>
<span>📧 esports@kazakhtelecom.kz</span>
</footer>
<script>
// Плавное появление элементов при скролле
var io = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('in');
}
});
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(function(el) {
io.observe(el);
});
</script>
</body>
</html>