153 lines
6.4 KiB
HTML
153 lines
6.4 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">
|
||
<!-- LOGIN SCREEN -->
|
||
<div id="login-screen" class="min-h-screen flex items-center justify-center p-4">
|
||
<div class="card w-full max-w-md">
|
||
<h1 class="text-2xl font-bold mb-2">Помощник по ТБ</h1>
|
||
<p class="text-gray-500 mb-6">Войдите через корпоративные данные</p>
|
||
<div class="mb-4">
|
||
<label class="block text-sm font-semibold mb-2">Табельный номер или логин</label>
|
||
<input type="text" id="login-id" class="input" placeholder="Например: 12345">
|
||
</div>
|
||
<div class="mb-6">
|
||
<label class="block text-sm font-semibold mb-2">Пароль</label>
|
||
<input type="password" id="login-pass" class="input" placeholder="••••••••">
|
||
</div>
|
||
<button onclick="doLogin()" class="btn w-full">Войти</button>
|
||
<p class="text-sm text-gray-500 mt-4">Демо: admin / 12345 (админ) или 1001 / пароль (сотрудник)</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MAIN APP -->
|
||
<div id="main-app" class="hidden">
|
||
<!-- 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">🛡️ ТБ Ассистент</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<span id="user-info" class="text-sm text-gray-400"></span>
|
||
<button onclick="doLogout()" class="btn btn-outline text-sm text-white border-gray-600 hover:bg-gray-800">Выйти</button>
|
||
</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="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">Моё обучение по ТБ</h2>
|
||
<div id="emp-courses"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|