mirror of
https://github.com/olehomelchenko/bi-detective.git
synced 2026-06-23 21:27:47 +00:00
128 lines
6.2 KiB
HTML
128 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="uk">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BI-детектив: Розслідування дашборду</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<h1>BI-детектив: Розслідування дашборду</h1>
|
|
<div class="header-right">
|
|
<span class="views-tag" id="viewsTag"></span>
|
|
<button class="restart-btn" onclick="restart()">Спочатку</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app">
|
|
|
|
<!-- LEFT PANEL: VP message + insights + submit -->
|
|
<div class="left-panel">
|
|
<div class="vp-section">
|
|
<div class="vp-msg">
|
|
<div class="vp-avatar">КЛ</div>
|
|
<div class="vp-content">
|
|
<div class="vp-name">Командир логістики</div>
|
|
<div class="vp-title">Брифінг — завтра вранці</div>
|
|
<div class="vp-text">За жовтень → листопад рейсів менше на ~30%. До завтрашнього брифінгу: що сталося?</div>
|
|
</div>
|
|
</div>
|
|
<div class="disclaimer-box">
|
|
<strong>Зверни увагу.</strong> Дані синтетичні й абстрактні. Завдання — шукати закономірності у самих даних, а не виводити їх із реального світу. Тут працюють лише докази на основі цифр.
|
|
</div>
|
|
<div class="alert-metrics">
|
|
<div class="alert-metric">
|
|
<div class="am-label">Усього рейсів (лист.)</div>
|
|
<div class="am-val" id="amRides"></div>
|
|
<div class="am-delta" id="amRidesDelta"></div>
|
|
</div>
|
|
<div class="alert-metric">
|
|
<div class="am-label">Сер. час обороту (лист.)</div>
|
|
<div class="am-val" id="amDur"></div>
|
|
<div class="am-delta" id="amDurDelta"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="insights-section" id="insightsSection">
|
|
<div class="insights-heading">Спостереження</div>
|
|
<div id="observationCards"></div>
|
|
<div class="insights-heading" style="margin-top: 12px;">Висновки для командира</div>
|
|
<div id="connectionCard"></div>
|
|
<div id="conclusionCards"></div>
|
|
</div>
|
|
|
|
<div class="submit-section">
|
|
<button class="submit-btn" id="submitBtn" disabled onclick="submitAnswer()">Надіслати аналіз командиру</button>
|
|
<div class="submit-hint" id="submitHint">Дослідь дашборд і відповідай на питання, щоб зібрати докази</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT PANEL: dashboard tabs -->
|
|
<div class="right-panel">
|
|
<div class="tab-bar">
|
|
<button class="tab-btn active" data-tab="overview" onclick="switchTab('overview')">Огляд</button>
|
|
<button class="tab-btn" data-tab="breakdowns" onclick="switchTab('breakdowns')">Розрізи</button>
|
|
<button class="tab-btn" data-tab="riders" onclick="switchTab('riders')">Замовники</button>
|
|
<button class="tab-btn" data-tab="duration" onclick="switchTab('duration')">Час обороту</button>
|
|
</div>
|
|
<div class="tab-content">
|
|
|
|
<div class="tab-pane active" id="pane-overview">
|
|
<div class="toggle-row">
|
|
<span class="toggle-label">Гранулярність:</span>
|
|
<button class="toggle-btn active" onclick="toggleOverview('monthly')">Місячна</button>
|
|
<button class="toggle-btn" onclick="toggleOverview('daily')">Денна</button>
|
|
</div>
|
|
<div class="chart-card"><h3>Усього рейсів</h3><canvas id="chartOverviewRides"></canvas></div>
|
|
<div class="chart-card"><h3>Середній час обороту (хв)</h3><canvas id="chartOverviewDuration"></canvas></div>
|
|
<div id="quiz-overview-spot"></div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="pane-breakdowns">
|
|
<div class="sub-tab-bar">
|
|
<button class="sub-tab-btn active" data-subtab="dayofweek" onclick="switchSubTab('dayofweek')">День тижня</button>
|
|
<button class="sub-tab-btn" data-subtab="hourly" onclick="switchSubTab('hourly')">Погодинно</button>
|
|
<button class="sub-tab-btn" data-subtab="vehicletypes" onclick="switchSubTab('vehicletypes')">Клас техніки</button>
|
|
<button class="sub-tab-btn" data-subtab="duration_buckets" onclick="switchSubTab('duration_buckets')">Тривалість</button>
|
|
<button class="sub-tab-btn" data-subtab="stations" onclick="switchSubTab('stations')">Вузли</button>
|
|
</div>
|
|
<div id="breakdowns-content"></div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="pane-riders">
|
|
<div class="toggle-row">
|
|
<span class="toggle-label">Гранулярність:</span>
|
|
<button class="toggle-btn active" onclick="toggleRiders('monthly')">Місячна</button>
|
|
<button class="toggle-btn" onclick="toggleRiders('daily')">Денна</button>
|
|
</div>
|
|
<div class="chart-card"><h3>Рейси за типом замовника</h3><canvas id="chartRiderRides"></canvas></div>
|
|
<div class="chart-card"><h3>Частка передових від усіх рейсів</h3><canvas id="chartRiderMix"></canvas></div>
|
|
<div id="quiz-riders-spot"></div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="pane-duration">
|
|
<div class="chart-card"><h3>Сер. час обороту за групою (Жов → Лис)</h3><canvas id="chartDurChange"></canvas></div>
|
|
<div class="chart-card"><h3>Сер. час обороту в часі за групою</h3><canvas id="chartDurTime"></canvas></div>
|
|
<div id="quiz-duration-spot"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="summary-overlay" id="summaryOverlay">
|
|
<div class="summary-box" id="summaryBox"></div>
|
|
</div>
|
|
|
|
<script src="game_data.js"></script>
|
|
<script src="quizzes.js"></script>
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html>
|