ychernenko/WFL
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

обновил создание аккаунтов

Browse Source
This commit is contained in:
Юрий Черненко
2026-04-23 11:59:52 +03:00
parent 6974e3cd1a
commit 42ce3587aa
1 changed files with 201 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
templates/admin_db_index.html
View File

@@ -11,8 +11,8 @@
--border: #2b3240;
--text: #e8ecf3;
--muted: #9aa4b2;
--accent: #00c773;
--accent-hover: #00a861;
--accent: #00ff88;
--accent-hover: #00d976;
--success-bg: rgba(46, 204, 113, 0.12);
--success-border: rgba(46, 204, 113, 0.35);
--danger-bg: rgba(255, 99, 99, 0.12);
@@ -51,20 +51,25 @@
}
.tabs,
.parser-actions {
.parser-actions,
.account-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.parser-actions {
.parser-actions,
.account-actions {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.tab-link,
.action-btn {
.action-btn,
.account-toggle-btn,
.submit-btn,
.cancel-btn {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -78,16 +83,25 @@
font-weight: 600;
cursor: pointer;
font-size: 14px;
transition: 0.2s ease;
}
.tab-link:hover,
.action-btn:hover {
.action-btn:hover,
.account-toggle-btn:hover,
.submit-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: white;
color: #04110b;
}
.action-form {
.cancel-btn:hover {
background: #293140;
border-color: #3b4658;
}
.action-form,
.account-create-form {
margin: 0;
}
@@ -134,6 +148,82 @@
pointer-events: none;
}
.account-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(3, 8, 15, 0.84);
z-index: 9998;
padding: 20px;
}
.account-modal.active {
display: flex;
}
.account-modal-card {
width: min(100%, 460px);
background: rgba(12, 17, 26, 0.98);
border: 1px solid rgba(0, 255, 136, 0.28);
border-radius: 18px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
padding: 24px;
}
.account-modal-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
}
.account-modal-subtitle {
color: var(--muted);
margin-bottom: 18px;
line-height: 1.5;
}
.form-grid {
display: grid;
gap: 14px;
}
.field-label {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--muted);
margin-bottom: 6px;
}
.field-input,
.field-select {
width: 100%;
min-height: 44px;
border-radius: 12px;
border: 1px solid var(--border);
background: #0f141d;
color: var(--text);
padding: 0 14px;
font-size: 14px;
outline: none;
}
.field-input:focus,
.field-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.12);
}
.modal-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 18px;
flex-wrap: wrap;
}
.matrix-loader {
position: fixed;
inset: 0;
@@ -162,7 +252,7 @@
width: min(90vw, 560px);
padding: 28px 24px;
border-radius: 18px;
border: 1px solid rgba(0, 255, 136, 0.30);
border: 1px solid rgba(0, 255, 136, 0.35);
background: rgba(12, 17, 26, 0.88);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
text-align: center;
@@ -172,16 +262,15 @@
.matrix-title {
font-size: 28px;
font-weight: 700;
color: #dfffee;
color: #dcffef;
margin-bottom: 12px;
}
.matrix-status {
font-size: 16px;
color: #9ff5c8;
color: #9cf3c8;
line-height: 1.6;
}
</style>
</head>
<body>
@@ -215,32 +304,25 @@
</form>
</div>
<div class="section-card">
<div class="section-title">Создать аккаунт</div>
<form method="post" action="/admin/db/create-account" autocomplete="off">
<div class="account-form-grid">
<div>
<label class="field-label" for="username">Логин</label>
<input class="field-input" id="username" name="username" type="text" placeholder="Введите логин" required>
</div>
<div>
<label class="field-label" for="password">Пароль</label>
<input class="field-input" id="password" name="password" type="password" placeholder="Введите пароль" required>
</div>
<div>
<label class="field-label" for="role">Роль</label>
<select class="field-select" id="role" name="role">
<option value="operator">operator</option>
<option value="admin">admin</option>
</select>
</div>
</div>
<div class="account-actions">
<button type="submit" class="action-btn">➕ Создать аккаунт</button>
</div>
</form>
<div class="account-actions">
<button type="button" class="account-toggle-btn" id="openCreateAccountBtn">➕ Создать аккаунт</button>
</div>
{% if account_message %}
<div class="log-block {% if account_success %}success{% else %}error{% endif %}">
<div class="log-title">Создание аккаунта</div>
<div class="log-status">
Статус:
{% if account_success %}
успешно
{% else %}
ошибка
{% endif %}
</div>
<pre class="log-output">{{ account_message }}</pre>
</div>
{% endif %}
{% if parser_output %}
<div class="log-block {% if parser_success %}success{% else %}error{% endif %}">
<div class="log-title">Итог парсинга{% if parser_name %}: {{ parser_name }}{% endif %}</div>
@@ -255,21 +337,40 @@
<pre class="log-output">{{ parser_output }}</pre>
</div>
{% endif %}
</div>
</div>
{% if account_output %}
<div class="log-block {% if account_success %}success{% else %}error{% endif %}">
<div class="log-title">Создание аккаунта</div>
<div class="log-status">
Статус:
{% if account_success %}
успешно
{% else %}
ошибка
{% endif %}
<div id="accountModal" class="account-modal" aria-hidden="true">
<div class="account-modal-card">
<div class="account-modal-title">Создать аккаунт</div>
<div class="account-modal-subtitle">Заполните данные нового пользователя и выберите роль.</div>
<form method="post" action="/admin/db/create-account" class="account-create-form" id="createAccountForm">
<div class="form-grid">
<div>
<label class="field-label" for="accountLogin">Логин</label>
<input class="field-input" id="accountLogin" type="text" name="login" required>
</div>
<div>
<label class="field-label" for="accountPassword">Пароль</label>
<input class="field-input" id="accountPassword" type="password" name="password" required>
</div>
<div>
<label class="field-label" for="accountRole">Роль</label>
<select class="field-select" id="accountRole" name="role" required>
<option value="admin">admin</option>
<option value="operator">operator</option>
</select>
</div>
</div>
<pre class="log-output">{{ account_output }}</pre>
</div>
{% endif %}
<div class="modal-actions">
<button type="button" class="cancel-btn" id="closeCreateAccountBtn">Отмена</button>
<button type="submit" class="submit-btn">Создать</button>
</div>
</form>
</div>
</div>
@@ -288,13 +389,15 @@
const canvas = document.getElementById("matrixCanvas");
const ctx = canvas ? canvas.getContext("2d") : null;
const parserForms = document.querySelectorAll(".action-form");
const openCreateAccountBtn = document.getElementById("openCreateAccountBtn");
const closeCreateAccountBtn = document.getElementById("closeCreateAccountBtn");
const accountModal = document.getElementById("accountModal");
let drops = [];
let speeds = [];
let fontSize = 18;
let columns = 0;
let matrixAnimationId = null;
let lastFrameAt = 0;
const frameDelay = 75;
let lastFrameTime = 0;
const frameInterval = 70;
const chars = "01アイウエオカキクケコサシスセソタチツテトABCDEFGHIJKLMNOPQRSTUVWXYZ";
function resizeCanvas() {
@@ -303,11 +406,17 @@
canvas.height = window.innerHeight;
columns = Math.max(1, Math.floor(canvas.width / fontSize));
drops = Array.from({ length: columns }, () => Math.random() * canvas.height / fontSize);
speeds = Array.from({ length: columns }, () => 0.45 + Math.random() * 0.35);
}
function drawMatrixFrame() {
function drawMatrix(timestamp = 0) {
if (!canvas || !ctx) return;
if (timestamp - lastFrameTime < frameInterval) {
matrixAnimationId = requestAnimationFrame(drawMatrix);
return;
}
lastFrameTime = timestamp;
ctx.fillStyle = "rgba(3, 8, 15, 0.08)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00ff88";
@@ -320,19 +429,11 @@
ctx.fillText(text, x, y);
if (y > canvas.height && Math.random() > 0.985) {
drops[i] = 0;
speeds[i] = 0.45 + Math.random() * 0.35;
}
drops[i] += speeds[i];
drops[i] += 0.65;
}
}
function animateMatrix(timestamp = 0) {
if (!matrixAnimationId) return;
if (!lastFrameAt || timestamp - lastFrameAt >= frameDelay) {
drawMatrixFrame();
lastFrameAt = timestamp;
}
matrixAnimationId = requestAnimationFrame(animateMatrix);
matrixAnimationId = requestAnimationFrame(drawMatrix);
}
function startLoader(title, message) {
@@ -343,11 +444,23 @@
loader.setAttribute("aria-hidden", "false");
if (!matrixAnimationId) {
resizeCanvas();
lastFrameAt = 0;
matrixAnimationId = requestAnimationFrame(animateMatrix);
lastFrameTime = 0;
drawMatrix();
}
}
function openAccountModal() {
if (!accountModal) return;
accountModal.classList.add("active");
accountModal.setAttribute("aria-hidden", "false");
}
function closeAccountModal() {
if (!accountModal) return;
accountModal.classList.remove("active");
accountModal.setAttribute("aria-hidden", "true");
}
parserForms.forEach((form) => {
form.addEventListener("submit", () => {
const parserTitle = form.dataset.parserTitle || "Запуск парсера";
@@ -361,6 +474,28 @@
});
});
if (openCreateAccountBtn) {
openCreateAccountBtn.addEventListener("click", openAccountModal);
}
if (closeCreateAccountBtn) {
closeCreateAccountBtn.addEventListener("click", closeAccountModal);
}
if (accountModal) {
accountModal.addEventListener("click", (event) => {
if (event.target === accountModal) {
closeAccountModal();
}
});
}
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
closeAccountModal();
}
});
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
</script>