kin: BATON-005-frontend_dev
This commit is contained in:
Gros Frumos
parent
e547e1ce09
commit
8607a9f981
3 changed files with 725 additions and 0 deletions
379
frontend/admin.html
Normal file
379
frontend/admin.html
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Baton — Admin</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #000000;
|
||||
--bg2: #0d0d0d;
|
||||
--text: #ffffff;
|
||||
--muted: #9ca3af;
|
||||
--input-bg: #1a1a1a;
|
||||
--border: #374151;
|
||||
--border-focus: #6b7280;
|
||||
--btn-bg: #374151;
|
||||
--btn-hover: #4b5563;
|
||||
--danger: #991b1b;
|
||||
--danger-hover: #7f1d1d;
|
||||
--warn: #78350f;
|
||||
--warn-hover: #92400e;
|
||||
--success-bg: #14532d;
|
||||
--blocked-row: #1c1008;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ===== Token screen ===== */
|
||||
|
||||
#screen-token {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 32px 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
/* ===== Panel screen ===== */
|
||||
|
||||
#screen-panel { display: none; flex-direction: column; min-height: 100vh; }
|
||||
#screen-panel.active { display: flex; }
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ===== Table ===== */
|
||||
|
||||
.users-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
background: var(--bg2);
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--muted);
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #1f2937;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
tr.is-blocked td { background: var(--blocked-row); }
|
||||
|
||||
tr:hover td { background: #111827; }
|
||||
tr.is-blocked:hover td { background: #231508; }
|
||||
|
||||
.col-id { width: 50px; color: var(--muted); }
|
||||
.col-uuid { max-width: 120px; font-family: monospace; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.col-date { white-space: nowrap; color: var(--muted); font-size: 12px; }
|
||||
.col-actions { white-space: nowrap; }
|
||||
|
||||
.empty-row td {
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* ===== Badges ===== */
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge--active { background: #14532d; color: #4ade80; }
|
||||
.badge--blocked { background: #7f1d1d; color: #fca5a5; }
|
||||
|
||||
/* ===== Inputs ===== */
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: var(--input-bg);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input::placeholder { color: var(--muted); }
|
||||
input:focus { border-color: var(--border-focus); }
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
|
||||
.btn {
|
||||
padding: 10px 18px;
|
||||
background: var(--btn-bg);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) { background: var(--btn-hover); }
|
||||
.btn:disabled { opacity: 0.4; cursor: default; }
|
||||
.btn--full { width: 100%; }
|
||||
.btn--danger { background: var(--danger); }
|
||||
.btn--danger:hover:not(:disabled) { background: var(--danger-hover); }
|
||||
|
||||
/* Small inline buttons */
|
||||
.btn-sm {
|
||||
padding: 4px 10px;
|
||||
background: var(--btn-bg);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
white-space: nowrap;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.btn-sm:last-child { margin-right: 0; }
|
||||
.btn-sm:hover { background: var(--btn-hover); }
|
||||
.btn-sm--danger { background: var(--danger); }
|
||||
.btn-sm--danger:hover { background: var(--danger-hover); }
|
||||
.btn-sm--warn { background: var(--warn); }
|
||||
.btn-sm--warn:hover { background: var(--warn-hover); }
|
||||
|
||||
/* ===== Error / info messages ===== */
|
||||
|
||||
.msg-error {
|
||||
color: #f87171;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.msg-info {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
/* ===== Modals ===== */
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal-backdrop[hidden] { display: none; }
|
||||
|
||||
.modal-box {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 28px 24px;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.modal-actions .btn { flex: 1; }
|
||||
|
||||
/* ===== Label ===== */
|
||||
|
||||
.field-label {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ===== Token screen ===== -->
|
||||
<div id="screen-token">
|
||||
<div class="login-card">
|
||||
<h1 class="login-title">Baton Admin</h1>
|
||||
<p class="login-subtitle">Введите токен для доступа</p>
|
||||
<input type="password" id="token-input" placeholder="Admin token" autocomplete="current-password">
|
||||
<button type="button" id="btn-login" class="btn btn--full">Войти</button>
|
||||
<p id="login-error" class="msg-error" hidden></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Admin panel screen ===== -->
|
||||
<div id="screen-panel">
|
||||
<header class="panel-header">
|
||||
<h1 class="panel-title">Пользователи</h1>
|
||||
<button type="button" id="btn-create" class="btn">+ Создать</button>
|
||||
<button type="button" id="btn-logout" class="btn">Выйти</button>
|
||||
</header>
|
||||
|
||||
<div class="panel-body">
|
||||
<p id="panel-error" class="msg-error" hidden></p>
|
||||
|
||||
<div class="users-wrap">
|
||||
<table id="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-id">#</th>
|
||||
<th>Имя</th>
|
||||
<th class="col-uuid">UUID</th>
|
||||
<th>Статус</th>
|
||||
<th class="col-date">Создан</th>
|
||||
<th class="col-actions">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-tbody">
|
||||
<tr class="empty-row"><td colspan="6">Загрузка…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Modal: change password ===== -->
|
||||
<div id="modal-password" class="modal-backdrop" hidden>
|
||||
<div class="modal-box">
|
||||
<h2 class="modal-title">Сменить пароль</h2>
|
||||
<p id="modal-pw-subtitle" class="modal-subtitle"></p>
|
||||
<input type="hidden" id="modal-pw-user-id">
|
||||
<div class="field">
|
||||
<div class="field-label">Новый пароль</div>
|
||||
<input type="password" id="new-password" placeholder="Минимум 1 символ" autocomplete="new-password">
|
||||
</div>
|
||||
<p id="modal-pw-error" class="msg-error" hidden></p>
|
||||
<div class="modal-actions">
|
||||
<button type="button" id="btn-pw-cancel" class="btn">Отмена</button>
|
||||
<button type="button" id="btn-pw-save" class="btn">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Modal: create user ===== -->
|
||||
<div id="modal-create" class="modal-backdrop" hidden>
|
||||
<div class="modal-box">
|
||||
<h2 class="modal-title">Создать пользователя</h2>
|
||||
<div class="field">
|
||||
<div class="field-label">UUID</div>
|
||||
<input type="text" id="create-uuid" autocomplete="off" spellcheck="false">
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field-label">Имя</div>
|
||||
<input type="text" id="create-name" placeholder="Имя пользователя" autocomplete="off">
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field-label">Пароль (необязательно)</div>
|
||||
<input type="password" id="create-password" placeholder="Оставьте пустым если не нужен" autocomplete="new-password">
|
||||
</div>
|
||||
<p id="create-error" class="msg-error" hidden></p>
|
||||
<div class="modal-actions">
|
||||
<button type="button" id="btn-create-cancel" class="btn">Отмена</button>
|
||||
<button type="button" id="btn-create-submit" class="btn">Создать</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue