sozday-stranitsu-rynok-telek/index.html

104 lines
4.4 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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Рынок телекоммуникаций РК 2022-2025</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dashboard">
<header class="header">
<h1>Рынок телекоммуникаций Республики Казахстан</h1>
<p class="subtitle">Аналитический обзор 2022–2025 гг. | Источник: БНС РК</p>
</header>
<section class="filters">
<div class="filter-group">
<label>Год:</label>
<select id="filterYear">
<option value="all">Все годы</option>
<option value="2025">2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
</select>
</div>
<div class="filter-group">
<label>Сегмент:</label>
<select id="filterSegment">
<option value="all">Все сегменты</option>
<option value="b2c">B2C (население)</option>
<option value="b2b">B2B (юридические лица)</option>
</select>
</div>
<div class="filter-group">
<label>Услуга:</label>
<select id="filterService">
<option value="all">Все услуги</option>
</select>
</div>
<button id="resetFilters" class="btn-reset">Сбросить фильтры</button>
</section>
<section class="kpi-grid" id="kpiGrid"></section>
<section class="chart-section">
<div class="chart-header">
<h2>Динамика рынка телекоммуникаций Казахстана</h2>
<div class="toggle-group">
<button class="toggle-btn active" data-mode="absolute">Абсолютные значения</button>
<button class="toggle-btn" data-mode="growth">Темпы роста</button>
</div>
</div>
<div class="chart-container">
<canvas id="mainChart"></canvas>
</div>
</section>
<section class="services-section">
<h2>Объём рынка по видам услуг</h2>
<div class="service-filters">
<select id="serviceYearFilter">
<option value="2025">2025 год</option>
<option value="2024">2024 год</option>
<option value="2023">2023 год</option>
<option value="2022">2022 год</option>
</select>
</div>
<div class="table-container">
<table id="servicesTable">
<thead>
<tr>
<th>Вид услуги</th>
<th>Общий доход, млрд ₸</th>
<th>B2C, млрд ₸</th>
<th>B2B, млрд ₸</th>
<th>Доля в рынке, %</th>
<th>Рост к пред. году, %</th>
<th>CAGR 4 года, %</th>
</tr>
</thead>
<tbody id="servicesBody"></tbody>
</table>
</div>
<div class="chart-container service-chart">
<canvas id="serviceChart"></canvas>
</div>
</section>
<section class="conclusions" id="conclusions">
<h2>Ключевые выводы</h2>
<div id="conclusionsList" class="conclusions-list"></div>
</section>
<footer class="footer">
<p>Источник данных: Бюро национальной статистики Агентства по стратегическому планированию и реформам РК | Код КСП: 192101</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>