145 lines
6.1 KiB
HTML
145 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>HSE Assistant — Обучение ТБ</title>
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1a1a2e;background:#f0f2f5}
|
||
header{background:#1a1a2e;color:#fff;padding:12px 20px;position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center}
|
||
header .logo{color:#00d4ff;font-weight:700;font-size:18px}
|
||
.container{max-width:1200px;margin:0 auto;padding:16px}
|
||
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
|
||
.tab-btn{padding:10px 18px;border:2px solid #1a1a2e;background:transparent;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s}
|
||
.tab-btn.active{background:#00d4ff;color:#1a1a2e;border-color:#00d4ff}
|
||
.card{background:#fff;border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
|
||
.btn{display:inline-block;background:#00d4ff;color:#1a1a2e;padding:10px 20px;border-radius:8px;font-weight:700;border:none;cursor:pointer;font-size:14px;text-decoration:none}
|
||
.btn:hover{opacity:.85}
|
||
.btn-danger{background:#ef4444;color:#fff}
|
||
.btn-green{background:#22c55e;color:#fff}
|
||
.input{padding:10px 14px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;outline:none;width:100%}
|
||
.input:focus{border-color:#00d4ff}
|
||
select.input{max-width:200px}
|
||
table{width:100%;border-collapse:collapse;font-size:13px}
|
||
th{background:#f8fafc;padding:10px 12px;text-align:left;font-weight:600;border-bottom:2px solid #e2e8f0}
|
||
td{padding:10px 12px;border-bottom:1px solid #f1f5f9}
|
||
.progress{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}
|
||
.progress-fill{height:100%;background:#00d4ff;border-radius:4px}
|
||
.ok{color:#22c55e;font-weight:600}
|
||
.warn{color:#f59e0b;font-weight:600}
|
||
.danger{color:#ef4444;font-weight:600}
|
||
.grid{display:grid;gap:12px}
|
||
.grid-2{grid-template-columns:repeat(2,1fr)}
|
||
.grid-3{grid-template-columns:repeat(3,1fr)}
|
||
.grid-4{grid-template-columns:repeat(4,1fr)}
|
||
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.tabs{gap:4px}.tab-btn{padding:8px 12px;font-size:12px}}
|
||
.stat-card{text-align:center;padding:16px}
|
||
.stat-num{font-size:28px;font-weight:700}
|
||
.stat-label{font-size:12px;color:#64748b;margin-top:4px}
|
||
.upload-area{background:#eff6ff;border:2px dashed #3b82f6;border-radius:12px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
|
||
.flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
|
||
.hidden{display:none!important}
|
||
.msg{padding:10px 14px;border-radius:8px;font-size:13px;margin-top:8px}
|
||
.msg-ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
|
||
.msg-err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
|
||
.city-card{cursor:pointer;padding:16px;border:2px solid transparent;transition:all .2s}
|
||
.city-card:hover{border-color:#00d4ff}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="logo">🛡️ HSE Assistant</div>
|
||
<div style="font-size:12px;color:#94a3b8">Система учёта обучения ТБ</div>
|
||
</header>
|
||
|
||
<div class="container">
|
||
<!-- TABS -->
|
||
<div class="tabs" id="tabs">
|
||
<button class="tab-btn active" onclick="showTab('dashboard')">📊 Дашборд</button>
|
||
<button class="tab-btn" onclick="showTab('search')">🔍 Поиск</button>
|
||
<button class="tab-btn" onclick="showTab('region')">🏙️ По регионам</button>
|
||
<button class="tab-btn" onclick="showTab('export')">📥 Выгрузка</button>
|
||
</div>
|
||
|
||
<!-- DASHBOARD TAB -->
|
||
<div id="tab-dashboard">
|
||
<div class="card">
|
||
<div class="upload-area">
|
||
<div>
|
||
<div style="font-weight:700;font-size:15px">📤 Загрузка данных</div>
|
||
<div style="font-size:13px;color:#64748b">Загрузите Excel (.xlsx) или CSV файл</div>
|
||
</div>
|
||
<label style="cursor:pointer">
|
||
<div class="btn">📁 Выбрать файл</div>
|
||
<input type="file" id="file-upload" accept=".csv,.xlsx" style="display:none" onchange="handleFileUpload(event)">
|
||
</label>
|
||
</div>
|
||
<div id="upload-results"></div>
|
||
</div>
|
||
|
||
<div class="grid grid-4" id="dash-stats"></div>
|
||
|
||
<div class="grid grid-2">
|
||
<div class="card">
|
||
<h3 style="margin-bottom:12px">Проблемные филиалы</h3>
|
||
<div id="dash-problems"></div>
|
||
</div>
|
||
<div class="card">
|
||
<h3 style="margin-bottom:12px">Самые непройденные курсы</h3>
|
||
<div id="dash-courses"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SEARCH TAB -->
|
||
<div id="tab-search" class="hidden">
|
||
<div class="card">
|
||
<h2 style="margin-bottom:14px">Поиск сотрудника</h2>
|
||
<div class="flex">
|
||
<input type="text" id="search-input" class="input" placeholder="Таб.№ или ФИО" style="max-width:400px">
|
||
<select id="filter-city" class="input">
|
||
<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="hidden">
|
||
<div class="card">
|
||
<h2 style="margin-bottom:14px">Сотрудники по филиалам</h2>
|
||
<div class="grid grid-3" id="city-stats"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EXPORT TAB -->
|
||
<div id="tab-export" class="hidden">
|
||
<div class="card">
|
||
<h2 style="margin-bottom:14px">📥 Выгрузка данных</h2>
|
||
<div class="flex" style="margin-bottom:12px">
|
||
<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 btn-green">📊 Экспорт CSV</button>
|
||
</div>
|
||
<div id="export-results"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
|
||
<script src="script.js?v=3"></script>
|
||
</body>
|
||
</html>
|