227 lines
8.4 KiB
HTML
227 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Kazakhtelecom — Цифровое будущее Казахстана</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="nav" id="nav">
|
||
<div class="nav-container">
|
||
<div class="logo">
|
||
<span class="logo-icon">📡</span>
|
||
<span class="logo-text">Kazakhtelecom</span>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#services">Услуги</a>
|
||
<a href="#tariffs">Тарифы</a>
|
||
<a href="#bundles">Пакеты</a>
|
||
<a href="#news">Новости</a>
|
||
<a href="#faq">FAQ</a>
|
||
<a href="#contacts">Контакты</a>
|
||
</div>
|
||
<button class="btn-personal" onclick="openPersonal()">Личный кабинет</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-bg">
|
||
<div class="gradient-orb orb-1"></div>
|
||
<div class="gradient-orb orb-2"></div>
|
||
<div class="gradient-orb orb-3"></div>
|
||
</div>
|
||
<div class="hero-content">
|
||
<div class="glass-card hero-card">
|
||
<h1 id="heroTitle"></h1>
|
||
<p id="heroSubtitle" class="hero-subtitle"></p>
|
||
<p id="heroDescription" class="hero-description"></p>
|
||
<div class="hero-buttons">
|
||
<button class="btn-primary" onclick="scrollToSection('tariffs')">Выбрать тариф</button>
|
||
<button class="btn-secondary" onclick="scrollToSection('services')">Узнать больше</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-scroll">
|
||
<div class="mouse">
|
||
<div class="wheel"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services -->
|
||
<section class="services" id="services">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Наши услуги</h2>
|
||
<p class="section-subtitle">Полный спектр цифровых услуг для вашего комфорта</p>
|
||
</div>
|
||
<div class="services-grid" id="servicesGrid">
|
||
<!-- Services rendered by JS -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tariffs -->
|
||
<section class="tariffs" id="tariffs">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Тарифные планы</h2>
|
||
<p class="section-subtitle">Выберите подходящий тариф</p>
|
||
<div class="tariff-tabs" id="tariffTabs">
|
||
<button class="tab active" data-category="internet">Интернет</button>
|
||
<button class="tab" data-category="tv">ТВ</button>
|
||
<button class="tab" data-category="mobile">Мобильная связь</button>
|
||
<button class="tab" data-category="smart">Умный дом</button>
|
||
</div>
|
||
</div>
|
||
<div class="tariffs-grid" id="tariffsGrid">
|
||
<!-- Tariffs rendered by JS -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Bundles -->
|
||
<section class="bundles" id="bundles">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Выгодные пакеты</h2>
|
||
<p class="section-subtitle">Экономьте до 30% при подключении нескольких услуг</p>
|
||
</div>
|
||
<div class="bundles-grid" id="bundlesGrid">
|
||
<!-- Bundles rendered by JS -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats -->
|
||
<section class="stats">
|
||
<div class="stats-container">
|
||
<div class="stat-item">
|
||
<div class="stat-number" data-target="5000000">0</div>
|
||
<div class="stat-label">Абонентов по всему Казахстану</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number" data-target="25">0</div>
|
||
<div class="stat-label">Лет на рынке</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number" data-target="100">0</div>
|
||
<div class="stat-label">Городов покрытия</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number" data-target="24">0</div>
|
||
<div class="stat-label">Поддержка 24/7</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- News -->
|
||
<section class="news" id="news">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Новости и события</h2>
|
||
<p class="section-subtitle">Будьте в курсе последних событий</p>
|
||
</div>
|
||
<div class="news-grid" id="newsGrid">
|
||
<!-- News rendered by JS -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section class="faq" id="faq">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Частые вопросы</h2>
|
||
<p class="section-subtitle">Ответы на популярные вопросы</p>
|
||
</div>
|
||
<div class="faq-container" id="faqContainer">
|
||
<!-- FAQ rendered by JS -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Form -->
|
||
<section class="contact-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Оставить заявку</h2>
|
||
<p class="section-subtitle">Мы перезвоним вам в течение 15 минут</p>
|
||
</div>
|
||
<div class="contact-form-container">
|
||
<form class="contact-form" id="contactForm" onsubmit="submitContact(event)">
|
||
<div class="form-group">
|
||
<label>Ваше имя</label>
|
||
<input type="text" id="contactName" required placeholder="Иван Иванов">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Телефон</label>
|
||
<input type="tel" id="contactPhone" required placeholder="+7 (___) ___-__-__">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Интересующая услуга</label>
|
||
<select id="contactService">
|
||
<option value="">Выберите услугу</option>
|
||
<option value="internet">Домашний интернет</option>
|
||
<option value="tv">Цифровое ТВ</option>
|
||
<option value="mobile">Мобильная связь</option>
|
||
<option value="smart">Умный дом</option>
|
||
<option value="bundle">Пакетное подключение</option>
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn-submit">Отправить заявку</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer" id="contacts">
|
||
<div class="footer-container">
|
||
<div class="footer-column">
|
||
<div class="footer-logo">
|
||
<span class="logo-icon">📡</span>
|
||
<span class="logo-text">Kazakhtelecom</span>
|
||
</div>
|
||
<p class="footer-description">Цифровое будущее Казахстана</p>
|
||
<div class="social-links">
|
||
<a href="#" class="social-link">Instagram</a>
|
||
<a href="#" class="social-link">Facebook</a>
|
||
<a href="#" class="social-link">Telegram</a>
|
||
<a href="#" class="social-link">YouTube</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h4>Услуги</h4>
|
||
<a href="#tariffs">Домашний интернет</a>
|
||
<a href="#tariffs">Цифровое ТВ</a>
|
||
<a href="#tariffs">Мобильная связь</a>
|
||
<a href="#tariffs">Умный дом</a>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h4>Компания</h4>
|
||
<a href="#">О нас</a>
|
||
<a href="#news">Новости</a>
|
||
<a href="#">Карьера</a>
|
||
<a href="#faq">Помощь</a>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h4>Контакты</h4>
|
||
<div class="contact-info">
|
||
<span class="contact-label">Телефон:</span>
|
||
<a href="tel:123" class="contact-value">123</a>
|
||
</div>
|
||
<div class="contact-info">
|
||
<span class="contact-label">Мобильный:</span>
|
||
<a href="tel:+77771234567" class="contact-value">+7 (777) 123-45-67</a>
|
||
</div>
|
||
<div class="contact-info">
|
||
<span class="contact-label">Email:</span>
|
||
<a href="mailto:info@kazakhtelecom.kz" class="contact-value">info@kazakhtelecom.kz</a>
|
||
</div>
|
||
<div class="contact-info">
|
||
<span class="contact-label">Адрес:</span>
|
||
<span class="contact-value">г. Алматы, ул. Байтурсынова, 112Б</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2026 Kazakhtelecom. Все права защищены.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|