271 lines
10 KiB
HTML
271 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>AI Аналитика — Английский язык</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="header">
|
||
<div class="container header-inner">
|
||
<div class="logo">📊 AI Analytics</div>
|
||
<nav class="nav">
|
||
<a href="#overview" class="nav-link active">Обзор</a>
|
||
<a href="#groups" class="nav-link">Группы</a>
|
||
<a href="#students" class="nav-link">Студенты</a>
|
||
</nav>
|
||
<div class="badge">Q2 2026</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container">
|
||
|
||
<!-- KPI Cards -->
|
||
<section id="overview" class="kpi-grid">
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">📋</div>
|
||
<div class="kpi-body">
|
||
<div class="kpi-value">87%</div>
|
||
<div class="kpi-label">Посещаемость</div>
|
||
<div class="kpi-trend up">↑ +3% к прошлому мес.</div>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">📝</div>
|
||
<div class="kpi-body">
|
||
<div class="kpi-value">72 из 100</div>
|
||
<div class="kpi-label">Средний балл тестов</div>
|
||
<div class="kpi-trend up">↑ +5 баллов</div>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">📈</div>
|
||
<div class="kpi-body">
|
||
<div class="kpi-value">+18%</div>
|
||
<div class="kpi-label">Прогресс за квартал</div>
|
||
<div class="kpi-trend up">↑ стабильный рост</div>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-card danger">
|
||
<div class="kpi-icon">⚠️</div>
|
||
<div class="kpi-body">
|
||
<div class="kpi-value">4</div>
|
||
<div class="kpi-label">Риски отсева</div>
|
||
<div class="kpi-trend down">↓ 2 студента в зоне риска</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Charts Row -->
|
||
<section class="charts-row">
|
||
<div class="chart-card">
|
||
<h3>Посещаемость по месяцам</h3>
|
||
<canvas id="attendanceChart"></canvas>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Динамика тестовых баллов</h3>
|
||
<canvas id="scoresChart"></canvas>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Groups Table -->
|
||
<section id="groups" class="section">
|
||
<h2>Группы</h2>
|
||
<div class="table-wrap">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Группа</th>
|
||
<th>Студентов</th>
|
||
<th>Посещаемость</th>
|
||
<th>Ср. балл</th>
|
||
<th>Прогресс</th>
|
||
<th>Риск отсева</th>
|
||
<th>AI-рекомендация</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Английский A1-1</strong></td>
|
||
<td>12</td>
|
||
<td><span class="tag green">92%</span></td>
|
||
<td>78</td>
|
||
<td><div class="progress-bar"><div class="fill" style="width:78%"></div></div></td>
|
||
<td><span class="tag green">Низкий</span></td>
|
||
<td class="ai-rec">Продолжать текущий темп</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Английский A1-2</strong></td>
|
||
<td>10</td>
|
||
<td><span class="tag yellow">76%</span></td>
|
||
<td>64</td>
|
||
<td><div class="progress-bar"><div class="fill warn" style="width:64%"></div></div></td>
|
||
<td><span class="tag yellow">Средний</span></td>
|
||
<td class="ai-rec">Доп. задания для отстающих, парные занятия</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Английский B1-1</strong></td>
|
||
<td>15</td>
|
||
<td><span class="tag green">89%</span></td>
|
||
<td>81</td>
|
||
<td><div class="progress-bar"><div class="fill" style="width:81%"></div></div></td>
|
||
<td><span class="tag green">Низкий</span></td>
|
||
<td class="ai-rec">Готовы к переходу на B2</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Английский B1-2</strong></td>
|
||
<td>8</td>
|
||
<td><span class="tag red">61%</span></td>
|
||
<td>52</td>
|
||
<td><div class="progress-bar"><div class="fill danger" style="width:52%"></div></div></td>
|
||
<td><span class="tag red">Высокий</span></td>
|
||
<td class="ai-rec">Срочно: индивидуальные встречи, мотивационные сообщения</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Students at Risk -->
|
||
<section class="section">
|
||
<h2>Студенты в зоне риска</h2>
|
||
<div class="risk-grid">
|
||
<div class="risk-card">
|
||
<div class="risk-avatar">А</div>
|
||
<div class="risk-info">
|
||
<div class="risk-name">Абдуллаев Н.</div>
|
||
<div class="risk-group">B1-2 · Посещаемость 48%</div>
|
||
<div class="risk-reason">Не посещал 3 занятия подряд. Балл тестов упал с 65 до 38.</div>
|
||
<div class="risk-action">
|
||
<strong>AI:</strong> Написать в мессенджер, предложить补课, связаться с руководителем
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="risk-card">
|
||
<div class="risk-avatar">К</div>
|
||
<div class="risk-info">
|
||
<div class="risk-name">Ким А.</div>
|
||
<div class="risk-group">A1-2 · Посещаемость 55%</div>
|
||
<div class="risk-reason">Пропустил 4 из 8 занятий. Не сдавал тесты.</div>
|
||
<div class="risk-action">
|
||
<strong>AI:</strong> Личная встреча, выяснить причины, предложить гибкий график
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="risk-card">
|
||
<div class="risk-avatar">М</div>
|
||
<div class="risk-info">
|
||
<div class="risk-name">Молдагалиева Д.</div>
|
||
<div class="risk-group">B1-2 · Посещаемость 68%</div>
|
||
<div class="risk-reason">Посещает, но баллы ниже 50. Возможна перегрузка на работе.</div>
|
||
<div class="risk-action">
|
||
<strong>AI:</strong> Предложить вечернюю группу, упрощённые задания на первое время
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="risk-card">
|
||
<div class="risk-avatar">С</div>
|
||
<div class="risk-info">
|
||
<div class="risk-name">Сатпаев Е.</div>
|
||
<div class="risk-group">A1-2 · Посещаемость 62%</div>
|
||
<div class="risk-reason">Стабильно низкая мотивация, не выполняет домашние задания.</div>
|
||
<div class="risk-action">
|
||
<strong>AI:</strong> Gamification — предложить челлендж, бейджи за посещение
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Employee Progress -->
|
||
<section id="students" class="section">
|
||
<h2>Прогресс сотрудников (топ-10)</h2>
|
||
<div class="table-wrap">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Сотрудник</th>
|
||
<th>Группа</th>
|
||
<th>Уровень</th>
|
||
<th>Баллы</th>
|
||
<th>Прогресс</th>
|
||
<th>Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Иванов П.</td>
|
||
<td>B1-1</td>
|
||
<td>B1</td>
|
||
<td>92</td>
|
||
<td><div class="progress-bar"><div class="fill" style="width:92%"></div></div></td>
|
||
<td><span class="tag green">Отлично</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Петрова М.</td>
|
||
<td>B1-1</td>
|
||
<td>B1</td>
|
||
<td>87</td>
|
||
<td><div class="progress-bar"><div class="fill" style="width:87%"></div></div></td>
|
||
<td><span class="tag green">Отлично</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Нурланов К.</td>
|
||
<td>A1-1</td>
|
||
<td>A2</td>
|
||
<td>84</td>
|
||
<td><div class="progress-bar"><div class="fill" style="width:84%"></div></div></td>
|
||
<td><span class="tag green">Хорошо</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Смирнова О.</td>
|
||
<td>B1-1</td>
|
||
<td>B1</td>
|
||
<td>81</td>
|
||
<td><div class="progress-bar"><div class="fill" style="width:81%"></div></div></td>
|
||
<td><span class="tag green">Хорошо</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Турсунов А.</td>
|
||
<td>A1-1</td>
|
||
<td>A1</td>
|
||
<td>75</td>
|
||
<td><div class="progress-bar"><div class="fill" style="width:75%"></div></div></td>
|
||
<td><span class="tag yellow">Норма</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Ким А.</td>
|
||
<td>A1-2</td>
|
||
<td>A1</td>
|
||
<td>58</td>
|
||
<td><div class="progress-bar"><div class="fill warn" style="width:58%"></div></div></td>
|
||
<td><span class="tag red">Риск</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Абдуллаев Н.</td>
|
||
<td>B1-2</td>
|
||
<td>A2</td>
|
||
<td>42</td>
|
||
<td><div class="progress-bar"><div class="fill danger" style="width:42%"></div></div></td>
|
||
<td><span class="tag red">Риск</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<p>AI Analytics · English Training · 2026</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|