148 lines
6.1 KiB
HTML
148 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Помощник по обучению ТБ</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--gray-100)}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:12px 24px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:15px}
|
||
.btn:hover{opacity:0.9}
|
||
.btn-outline{background:transparent;border:2px solid var(--ink);color:var(--ink)}
|
||
.btn-danger{background:#ef4444;color:white}
|
||
.card{background:white;border-radius:12px;padding:24px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
|
||
.input{width:100%;padding:12px 16px;border:2px solid var(--gray-100);border-radius:8px;font-size:15px;outline:none}
|
||
.input:focus{border-color:var(--cyan)}
|
||
.table{width:100%;border-collapse:collapse;font-size:14px}
|
||
.table th{background:var(--gray-100);padding:12px;text-align:left;font-weight:600}
|
||
.table td{padding:12px;border-bottom:1px solid var(--gray-100)}
|
||
.status-ok{color:#22c55e;font-weight:600}
|
||
.status-warn{color:#f59e0b;font-weight:600}
|
||
.status-danger{color:#ef4444;font-weight:600}
|
||
.progress-bar{height:8px;background:var(--gray-100);border-radius:4px;overflow:hidden}
|
||
.progress-fill{height:100%;background:var(--cyan);transition:width 0.3s}
|
||
.hidden{display:none!important}
|
||
@media(max-width:640px){.table{font-size:12px}.table th,.table td{padding:8px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!-- HEADER -->
|
||
<header class="bg-[#0F1218] text-white p-4 sticky top-0 z-50">
|
||
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-[#00E5FF] text-xl font-bold">🛡️ HSE Assistant</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<span class="text-sm text-gray-400">Открытый доступ</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="max-w-7xl mx-auto p-4">
|
||
<!-- ADMIN TABS -->
|
||
<div id="admin-panel" class="hidden mb-6">
|
||
<div class="flex gap-2 mb-4 flex-wrap">
|
||
<button onclick="showTab('search')" class="btn tab-btn" data-tab="search">🔍 Поиск</button>
|
||
<button onclick="showTab('region')" class="btn btn-outline tab-btn" data-tab="region">🏙️ По регионам</button>
|
||
<button onclick="showTab('dashboard')" class="btn btn-outline tab-btn" data-tab="dashboard">📊 Дашборд</button>
|
||
<button onclick="showTab('export')" class="btn btn-outline tab-btn" data-tab="export">📥 Выгрузка</button>
|
||
</div>
|
||
|
||
<!-- SEARCH TAB -->
|
||
<div id="tab-search" class="tab-content">
|
||
<div class="card">
|
||
<h2 class="text-xl font-bold mb-4">Поиск сотрудника</h2>
|
||
<div class="flex gap-3 flex-wrap">
|
||
<input type="text" id="search-input" class="input flex-1" placeholder="Таб.№ или ФИО">
|
||
<select id="filter-city" class="input" style="max-width:200px">
|
||
<option value="">Все города</option>
|
||
<option>Алматы</option>
|
||
<option>Астана</option>
|
||
<option>Атырау</option>
|
||
<option>Актау</option>
|
||
<option>Караганда</option>
|
||
<option>Шымкент</option>
|
||
</select>
|
||
<button onclick="searchEmployee()" class="btn">Найти</button>
|
||
</div>
|
||
</div>
|
||
<div id="search-results"></div>
|
||
</div>
|
||
|
||
<!-- REGION TAB -->
|
||
<div id="tab-region" class="tab-content hidden">
|
||
<div class="card">
|
||
<h2 class="text-xl font-bold mb-4">Сотрудники по филиалам</h2>
|
||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 mb-4" id="city-stats"></div>
|
||
</div>
|
||
<div id="region-results"></div>
|
||
</div>
|
||
|
||
<!-- DASHBOARD TAB -->
|
||
<div id="tab-dashboard" class="tab-content hidden">
|
||
<div class="card">
|
||
<h2 class="text-xl font-bold mb-4">📊 Дашборд обучения ТБ</h2>
|
||
<div class="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="font-semibold text-blue-800">📤 Загрузка данных</p>
|
||
<p class="text-sm text-blue-600">Загрузите Excel (.xlsx) или CSV файл с данными сотрудников</p>
|
||
</div>
|
||
<label class="cursor-pointer">
|
||
<div class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center gap-2">
|
||
<span>📁 Выбрать файл</span>
|
||
<input type="file" id="file-upload" accept=".csv,.xlsx" class="hidden" onchange="handleFileUpload(event)">
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div id="upload-results" class="mt-3"></div>
|
||
</div>
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6" id="dash-stats"></div>
|
||
<div class="grid md:grid-cols-2 gap-4">
|
||
<div class="card">
|
||
<h3 class="font-bold mb-3">Проблемные филиалы</h3>
|
||
<div id="dash-problems"></div>
|
||
</div>
|
||
<div class="card">
|
||
<h3 class="font-bold mb-3">Самые непройденные курсы</h3>
|
||
<div id="dash-courses"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EXPORT TAB -->
|
||
<div id="tab-export" class="tab-content hidden">
|
||
<div class="card">
|
||
<h2 class="text-xl font-bold mb-4">📥 Выгрузка данных</h2>
|
||
<div class="flex gap-3 flex-wrap mb-4">
|
||
<button onclick="exportData('overdue')" class="btn btn-danger">⏰ Просроченные</button>
|
||
<button onclick="exportData('city')" class="btn">🏙️ По филиалу</button>
|
||
<button onclick="exportData('employee')" class="btn">👤 По сотруднику</button>
|
||
<button onclick="exportData('summary')" class="btn">📋 Сводный отчёт</button>
|
||
<button onclick="exportCSV()" class="btn bg-green-600 text-white">📊 Экспорт CSV</button>
|
||
</div>
|
||
<div id="export-results"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EMPLOYEE VIEW (не-админ) -->
|
||
<div id="employee-panel" class="hidden">
|
||
<div class="card">
|
||
<h2 class="text-xl font-bold mb-4" id="emp-title">Моё HSE обучение</h2>
|
||
<div id="emp-courses"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /app -->
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|