193 lines
8.1 KiB
HTML
193 lines
8.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>
|
||
<link rel="stylesheet" href="style.css">
|
||
<style>
|
||
.login-screen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0f1218; z-index: 1000; align-items: center; justify-content: center; }
|
||
.login-screen.on { display: flex; }
|
||
.login-box { background: #1a1d24; padding: 40px; border-radius: 12px; max-width: 400px; width: 90%; }
|
||
.login-box h2 { margin-bottom: 24px; color: #f4f4f5; }
|
||
.login-box input { width: 100%; padding: 12px; margin-bottom: 16px; background: #252830; border: 1px solid #333; color: #f4f4f5; border-radius: 8px; }
|
||
.login-box button { width: 100%; }
|
||
.app-content { display: none; }
|
||
.app-content.on { display: block; }
|
||
.user-info { position: absolute; top: 20px; right: 20px; color: #8a8a92; font-size: 14px; }
|
||
.user-info button { margin-left: 10px; padding: 6px 12px; font-size: 13px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="login-screen" id="login-screen">
|
||
<div class="login-box">
|
||
<h2>Вход в систему</h2>
|
||
<form id="login-form">
|
||
<input type="text" id="username" placeholder="Логин" required>
|
||
<input type="password" id="password" placeholder="Пароль" required>
|
||
<button type="submit" class="btn btn-primary">Войти</button>
|
||
</form>
|
||
<p style="color: #8a8a92; font-size: 13px; margin-top: 16px;">Обратитесь к администратору за доступом</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-content" id="app-content">
|
||
<nav class="tabs">
|
||
<div class="container">
|
||
<button class="tab active" onclick="switchTab('biot')">БиОТ</button>
|
||
<button class="tab" onclick="switchTab('ctpsr')">ЦТПСР</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<header class="hero">
|
||
<div class="container" style="position: relative;">
|
||
<div class="user-info">
|
||
<span id="user-name"></span>
|
||
<button class="btn btn-secondary" onclick="logout()">Выйти</button>
|
||
<button class="btn btn-secondary" onclick="openAdmin()" id="admin-btn" style="display:none; margin-left:10px;">👥 Админка</button>
|
||
</div>
|
||
<h1 id="page-title">Информация по БиОТ</h1>
|
||
<p class="subtitle">Жамбылский ДЭСД</p>
|
||
<div id="subtabs" class="subtabs" style="display:none;">
|
||
<button class="subtab active" onclick="switchSubtab('ctpsr_main')">Мероприятия</button>
|
||
<button class="subtab" onclick="switchSubtab('gloves')">Диэлектрические перчатки</button>
|
||
</div>
|
||
<button class="btn btn-primary" onclick="addNew()">+ Добавить</button>
|
||
<button class="btn btn-secondary" onclick="testApi()" style="margin-left:10px;">Тест API</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container">
|
||
<div class="filters">
|
||
<input type="text" id="search" placeholder="Поиск..." oninput="render()">
|
||
<div class="chips" id="chips"></div>
|
||
</div>
|
||
|
||
<div class="stats" id="stats"></div>
|
||
|
||
<div class="events-grid" id="events"></div>
|
||
</main>
|
||
|
||
<!-- Админ панель -->
|
||
<div class="modal" id="admin-modal">
|
||
<div class="modal-content" style="max-width: 800px;">
|
||
<h2 id="admin-modal-title">Управление пользователями</h2>
|
||
<div class="stats" id="admin-stats" style="margin-bottom: 20px;"></div>
|
||
|
||
<div style="display: flex; gap: 20px; margin-bottom: 20px;">
|
||
<div style="flex: 1;">
|
||
<h3>Добавить пользователя</h3>
|
||
<form id="add-user-form">
|
||
<div class="form-group">
|
||
<label>ID (латиницей)</label>
|
||
<input type="text" id="new-user-id" placeholder="ivanov" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>ФИО</label>
|
||
<input type="text" id="new-user-name" placeholder="Иванов Иван Иванович" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Пароль</label>
|
||
<input type="text" id="new-user-password" placeholder="пароль123" required>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Добавить</button>
|
||
</form>
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<h3>Существующие пользователи</h3>
|
||
<div id="users-list" style="max-height: 400px; overflow-y: auto;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-secondary" onclick="closeAdmin()">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal" id="modal">
|
||
<div class="modal-content">
|
||
<h2 id="modal-title">Добавить мероприятие</h2>
|
||
<form id="form">
|
||
<input type="hidden" id="eventId">
|
||
|
||
<div id="gloves-fields" style="display:none;">
|
||
<div class="form-group">
|
||
<label>Количество ДЭ перчатки</label>
|
||
<input type="text" id="quantity" placeholder="Например: 2 пары" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Место эксплуатации</label>
|
||
<input type="text" id="location" placeholder="Например: ПС-110 кВ" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Ответственное лицо</label>
|
||
<input type="text" id="responsible" placeholder="ФИО" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Дата последнего испытания</label>
|
||
<input type="date" id="lastTestDate" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Дата следующего испытания</label>
|
||
<input type="date" id="nextTestDate" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Срок эксплуатации (месяцев)</label>
|
||
<input type="number" id="expiryMonths" placeholder="Например: 24" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Примечание</label>
|
||
<textarea id="notes" rows="3"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="event-fields">
|
||
<div class="form-group">
|
||
<label>Название</label>
|
||
<input type="text" id="title" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Дата</label>
|
||
<input type="date" id="date" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Время</label>
|
||
<input type="time" id="time">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Место проведения</label>
|
||
<input type="text" id="eventLocation">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Ответственный</label>
|
||
<input type="text" id="organizer">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Статус</label>
|
||
<select id="status">
|
||
<option value="запланировано">Запланировано</option>
|
||
<option value="в процессе">В процессе</option>
|
||
<option value="завершено">Завершено</option>
|
||
<option value="отменено">Отменено</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Описание</label>
|
||
<textarea id="description" rows="4"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||
<button type="button" class="btn btn-secondary" onclick="closeModal()">Отмена</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</div>
|
||
</body>
|
||
</html>
|