<script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-database-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-auth-compat.js"></script>
<div class="panel">
<section class="card" id="adminLogin">
<h2>00 / АВТОРИЗАЦИЯ ОПЕРАТОРА</h2>
<label for="adminEmail" class="small">EMAIL</label>
<input
id="adminEmail"
type="email"
placeholder="Email администратора"
autocomplete="username"
>
<label for="adminPassword" class="small">ПАРОЛЬ</label>
<input
id="adminPassword"
type="password"
placeholder="Пароль"
autocomplete="current-password"
>
<button id="loginBtn" type="button">ВОЙТИ В СИСТЕМУ</button>
<div id="loginMessage" class="small">ТРЕБУЕТСЯ АВТОРИЗАЦИЯ</div>
<button id="logoutBtn" type="button" hidden>ВЫЙТИ</button>
</section>
<header>
<h1>ХОР-9</h1>
<div>ЦЕНТРАЛЬНЫЙ ТЕРМИНАЛ НАБЛЮДЕНИЯ</div>
<div class="small">ШОРФХАЙДЕ · ГЕРМАНИЯ · СЕКТОР 09</div>
<hr>
<div>СИСТЕМА: <span class="status">АКТИВНА</span></div>
<div>ТРЕВОГА: <span id="alarm" class="alert">НОРМА</span></div>
<div class="small">РЕЖИМ: ЛОКАЛЬНАЯ СИМУЛЯЦИЯ</div>
</header>
<section class="card">
<h2>01 / ЭНЕРГОСИСТЕМА</h2>
<div>Мощность: <span id="power">64</span>%</div>
<div class="bar"><div id="powerBar" class="fill"></div></div>
<div>Резерв энергии: <span id="energy">78</span>%</div>
<div class="bar"><div id="energyBar" class="fill energy-fill"></div></div>
<button id="powerBtn">ИЗМЕНИТЬ РЕЖИМ ПИТАНИЯ</button>
</section>
<section class="card">
<h2>02 / КОМАНДНЫЙ ИНТЕРФЕЙС</h2>
<label for="sectorSelect" class="small">ВЫБРАТЬ СЕКТОР</label>
<select id="sectorSelect">
<option value="A-1">A-1 — административный</option>
<option value="B-4" selected>B-4 — лесной периметр</option>
<option value="C-2">C-2 — исследовательский</option>
<option value="N-0">N-0 — северный корпус</option>
</select>
<div class="grid">
<button id="statusBtn">/status — СОСТОЯНИЕ</button>
<button id="scanBtn">/scan — СКАНИРОВАТЬ</button>
<button id="lockBtn" class="danger">/lockdown — БЛОКИРОВКА</button>
<button id="diagnosticsBtn">ДИАГНОСТИКА</button>
<button id="perimeterBtn">ПРОВЕРИТЬ ПЕРИМЕТР</button>
<button id="eventBtn">ГЕНЕРАТОР СОБЫТИЙ</button>
<button id="ackBtn">ПОДТВЕРДИТЬ ТРЕВОГУ</button>
<button id="journalBtn">ОБНОВИТЬ ЖУРНАЛ</button>
<button id="autoBtn">ВКЛЮЧИТЬ АВТОСОБЫТИЯ</button>
</div>
<div class="small">Автособытия: <span id="autoStatus" class="warning">ВЫКЛЮЧЕНЫ</span></div>
<div id="errorBox" class="error" hidden></div>
</section>
<section class="card">
<h2>03 / СОСТОЯНИЕ СЕКТОРОВ</h2>
<div id="sectorList"></div>
</section>
<section class="card">
<h2>04 / ЖУРНАЛ ПРОИСШЕСТВИЙ</h2>
<div id="log"></div>
</section>
<footer class="card small">
ХОР-9 // ВНУТРЕННЯЯ СИСТЕМА МОНИТОРИНГА<br>
Данные и происшествия являются частью ролевой симуляции.
</footer>
</div>