v3: график оценки уровня рисков по секторам
This commit is contained in:
Kadyrbek Igizbayev
parent
c9747ec26c
commit
c47e3afeda
224
index.html
224
index.html
@ -455,6 +455,144 @@ body {
|
||||
@media (max-width: 480px) {
|
||||
.btn-outline { display: block; }
|
||||
}
|
||||
|
||||
/* Chart section */
|
||||
.chart-label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--amber);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #9aa3b2;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.legend-dot.critical { background: var(--red); }
|
||||
.legend-dot.high { background: var(--amber); }
|
||||
.legend-dot.moderate { background: var(--green); }
|
||||
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.bar-row {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr 60px;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bar-track {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
transition: width 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-fill.critical { background: linear-gradient(90deg, var(--red), #ff6b75); }
|
||||
.bar-fill.high { background: linear-gradient(90deg, var(--amber), #ffc448); }
|
||||
.bar-fill.moderate { background: linear-gradient(90deg, var(--green), #5ee6b3); }
|
||||
|
||||
.bar-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0;
|
||||
width: 4px; height: 100%;
|
||||
background: rgba(255,255,255,0.3);
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.bar-value {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.bar-value.critical { color: var(--red); }
|
||||
.bar-value.high { color: var(--amber); }
|
||||
.bar-value.moderate { color: var(--green); }
|
||||
|
||||
.chart-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.summary-card .num {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.summary-card .num.critical { color: var(--red); }
|
||||
.summary-card .num.high { color: var(--amber); }
|
||||
.summary-card .num.moderate { color: var(--green); }
|
||||
|
||||
.summary-card .desc {
|
||||
font-size: 13px;
|
||||
color: #9aa3b2;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bar-row { grid-template-columns: 120px 1fr 44px; gap: 10px; }
|
||||
.bar-label { font-size: 13px; }
|
||||
.chart-header { flex-direction: column; gap: 16px; align-items: flex-start; }
|
||||
.chart-summary { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -468,7 +606,7 @@ body {
|
||||
<p class="subtitle">Полный анализ СМИ, сводок и законодательства. Выявление рисков для принятия превентивных мер.</p>
|
||||
<p class="subtitle" style="font-size:16px;color:#6b7385">Аналитика по всем портфельным компаниям фонда — от нефтегазового сектора до логистики и энергетики.</p>
|
||||
<a class="btn" href="#cta">Оставить заявку</a>
|
||||
<a class="btn-outline" href="#categories">Категории компаний</a>
|
||||
<a class="btn-outline" href="#chart">График рисков</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -587,6 +725,69 @@ body {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Risk Assessment Chart -->
|
||||
<section class="section" id="chart">
|
||||
<div class="container">
|
||||
<div class="chart-label">Оценка уровня рисков</div>
|
||||
<div class="chart-header">
|
||||
<h2>Индекс риска по секторам</h2>
|
||||
<div class="chart-legend">
|
||||
<div class="legend-item"><span class="legend-dot critical"></span> Критический (≥75%)</div>
|
||||
<div class="legend-item"><span class="legend-dot high"></span> Высокий (50–74%)</div>
|
||||
<div class="legend-item"><span class="legend-dot moderate"></span> Умеренный (<50%)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-bars">
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Химия и пром.</div>
|
||||
<div class="bar-track"><div class="bar-fill critical" data-width="85"></div></div>
|
||||
<div class="bar-value critical">85%</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Нефтегазовый</div>
|
||||
<div class="bar-track"><div class="bar-fill critical" data-width="78"></div></div>
|
||||
<div class="bar-value critical">78%</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Горнодобывающая</div>
|
||||
<div class="bar-track"><div class="bar-fill critical" data-width="75"></div></div>
|
||||
<div class="bar-value critical">75%</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Энергетика</div>
|
||||
<div class="bar-track"><div class="bar-fill high" data-width="71"></div></div>
|
||||
<div class="bar-value high">71%</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Транспорт и логистика</div>
|
||||
<div class="bar-track"><div class="bar-fill high" data-width="62"></div></div>
|
||||
<div class="bar-value high">62%</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Телекоммуникации</div>
|
||||
<div class="bar-track"><div class="bar-fill moderate" data-width="45"></div></div>
|
||||
<div class="bar-value moderate">45%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-summary">
|
||||
<div class="summary-card">
|
||||
<div class="num critical">3</div>
|
||||
<div class="desc">Сектора с критическим уровнем</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="num high">2</div>
|
||||
<div class="desc">Сектора с высоким уровнем</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="num moderate">1</div>
|
||||
<div class="desc">Сектор с умеренным уровнем</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How it works -->
|
||||
<section class="section" id="how">
|
||||
<div class="container">
|
||||
@ -635,5 +836,26 @@ body {
|
||||
Сводка © 2026 — мониторинг АО «Самрук-Казына»
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var animated = false;
|
||||
var chart = document.getElementById('chart');
|
||||
var bars = document.querySelectorAll('.bar-fill');
|
||||
|
||||
function animateBars() {
|
||||
if (animated) return;
|
||||
var rect = chart.getBoundingClientRect();
|
||||
if (rect.top < window.innerHeight && rect.bottom > 0) {
|
||||
animated = true;
|
||||
bars.forEach(function(bar) {
|
||||
bar.style.width = bar.getAttribute('data-width') + '%';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', animateBars);
|
||||
window.addEventListener('load', animateBars);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user