v5: ситуационный центр — новая концепция, dashboard-индикаторы

This commit is contained in:
Kadyrbek Igizbayev 2026-06-01 05:21:00 +00:00
parent 7f68ca2889
commit 5fafa006c8

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Сводка — мониторинг АО «Самрук-Казына»</title>
<title>Ситуационный центр — мониторинг АО «Самрук-Казына»</title>
<style>
:root {
--ink: #0F1218;
@ -136,6 +136,56 @@ body {
.btn-outline:hover { border-color: var(--cyan); }
/* Dashboard status row in hero */
.dash-row {
display: flex;
gap: 32px;
margin-top: 48px;
flex-wrap: wrap;
}
.dash-item {
display: flex;
align-items: center;
gap: 12px;
}
.dash-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 10px rgba(0,229,255,0.6);
animation: dash-pulse 2s infinite;
}
.dash-dot.critical {
background: var(--red);
box-shadow: 0 0 10px rgba(255,77,90,0.6);
}
@keyframes dash-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.dash-val {
font-size: 14px;
font-weight: 700;
color: var(--white);
line-height: 1.3;
}
.dash-sub {
font-size: 12px;
color: #5B6573;
}
@media (max-width: 768px) {
.dash-row { gap: 20px; margin-top: 36px; }
.dash-item { flex: 0 0 auto; }
}
/* Sections */
.section {
border-top: 1px solid rgba(255,255,255,0.06);
@ -826,13 +876,45 @@ body {
<!-- Hero -->
<section class="hero">
<div class="container">
<div class="logo">Сводка</div>
<div class="logo">Ситуационный центр</div>
<div class="group-name">АО «Самрук-Казына»</div>
<h1>Ежедневный <span>мониторинг</span> группы компаний</h1>
<h1>Ситуационный <span>центр</span> мониторинга предприятий</h1>
<p class="subtitle">Круглосуточный анализ и раннее предупреждение рисков по группе компаний. Централизованный пульт контроля.</p>
<p class="subtitle">Особый фокус — <strong style="color:var(--white);border-bottom:2px solid var(--amber)">социально-трудовые отношения</strong>: протесты, забастовки, коллективные споры, условия труда.</p>
<p class="subtitle" style="font-size:16px;color:#6b7385">Аналитика по всем портфельным компаниям фонда — от нефтегазового сектора до логистики и энергетики.</p>
<p class="subtitle" style="font-size:16px;color:#6b7385">Все портфельные компании фонда — от нефтегазового сектора до логистики и энергетики.</p>
<a class="btn" href="#daily">Сводка за сегодня</a>
<a class="btn-outline" href="#chart">График рисков</a>
<div class="dash-row">
<div class="dash-item">
<div class="dash-dot"></div>
<div class="dash-info">
<div class="dash-val">Активен</div>
<div class="dash-sub">Статус мониторинга</div>
</div>
</div>
<div class="dash-item">
<div class="dash-dot" style="animation-delay:0.4s"></div>
<div class="dash-info">
<div class="dash-val">23 сигнала</div>
<div class="dash-sub">За сегодня</div>
</div>
</div>
<div class="dash-item">
<div class="dash-dot" style="animation-delay:0.8s"></div>
<div class="dash-info">
<div class="dash-val">6 секторов</div>
<div class="dash-sub">На контроле</div>
</div>
</div>
<div class="dash-item">
<div class="dash-dot critical" style="animation-delay:1.2s"></div>
<div class="dash-info">
<div class="dash-val" style="color:var(--red)">3 крит.</div>
<div class="dash-sub">Требуют реакции</div>
</div>
</div>
</div>
</div>
</section>
@ -1265,7 +1347,7 @@ body {
</section>
<footer class="footer">
Сводка &copy; 2026 — мониторинг АО «Самрук-Казына»
Ситуационный центр &copy; 2026 — мониторинг АО «Самрук-Казына»
</footer>
<script>