From 42ce3587aa0d89f5dfcc0d9bf141bbc3625a68b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=AE=D1=80=D0=B8=D0=B9=20=D0=A7=D0=B5=D1=80=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D0=BA=D0=BE?= Date: Thu, 23 Apr 2026 11:59:52 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B0=D0=BA?= =?UTF-8?q?=D0=BA=D0=B0=D1=83=D0=BD=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/admin_db_index.html | 267 +++++++++++++++++++++++++--------- 1 file changed, 201 insertions(+), 66 deletions(-) diff --git a/templates/admin_db_index.html b/templates/admin_db_index.html index 63b56a1..f322e45 100644 --- a/templates/admin_db_index.html +++ b/templates/admin_db_index.html @@ -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; } - @@ -215,32 +304,25 @@ -
-
Создать аккаунт
-
- - -
+ + {% if account_message %} + + {% endif %} + {% if parser_output %}
Итог парсинга{% if parser_name %}: {{ parser_name }}{% endif %}
@@ -255,21 +337,40 @@ 
{{ parser_output }}
{% endif %} +
+ - {% if account_output %} -
-
Создание аккаунта
-
- Статус: - {% if account_success %} - успешно - {% else %} - ошибка - {% endif %} +
@@ -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);