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

templates/admin_db_index.html

@@ -11,8 +11,8 @@
             --border: #2b3240;
             --text: #e8ecf3;
             --muted: #9aa4b2;
-            --accent: #00c773;
+            --accent: #00ff88;
-            --accent-hover: #00a861;
+            --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,31 +304,24 @@
                 </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>
+                <button type="button" class="account-toggle-btn" id="openCreateAccountBtn">➕ Создать аккаунт</button>
             </div>
-                </form>
+
+            {% 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 %}">
@@ -255,21 +337,40 @@
                 <pre class="log-output">{{ parser_output }}</pre>
             </div>
             {% endif %}
+        </div>
+    </div>
 
-            {% if account_output %}
+    <div id="accountModal" class="account-modal" aria-hidden="true">
-            <div class="log-block {% if account_success %}success{% else %}error{% endif %}">
+        <div class="account-modal-card">
-                <div class="log-title">Создание аккаунта</div>
+            <div class="account-modal-title">Создать аккаунт</div>
-                <div class="log-status">
+            <div class="account-modal-subtitle">Заполните данные нового пользователя и выберите роль.</div>
-                    Статус:
+
-                    {% if account_success %}
+            <form method="post" action="/admin/db/create-account" class="account-create-form" id="createAccountForm">
-                        успешно
+                <div class="form-grid">
-                    {% else %}
+                    <div>
-                        ошибка
+                        <label class="field-label" for="accountLogin">Логин</label>
-                    {% endif %}
+                        <input class="field-input" id="accountLogin" type="text" name="login" required>
                     </div>
-                <pre class="log-output">{{ account_output }}</pre>
+
+                    <div>
+                        <label class="field-label" for="accountPassword">Пароль</label>
+                        <input class="field-input" id="accountPassword" type="password" name="password" required>
                     </div>
-            {% endif %}
+
+                    <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>
+
+                <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;
+        let lastFrameTime = 0;
-        const frameDelay = 75;
+        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) {
+            matrixAnimationId = requestAnimationFrame(drawMatrix);
-            if (!matrixAnimationId) return;
-            if (!lastFrameAt || timestamp - lastFrameAt >= frameDelay) {
-                drawMatrixFrame();
-                lastFrameAt = timestamp;
-            }
-            matrixAnimationId = requestAnimationFrame(animateMatrix);
         }
 
         function startLoader(title, message) {
@@ -343,11 +444,23 @@
             loader.setAttribute("aria-hidden", "false");
             if (!matrixAnimationId) {
                 resizeCanvas();
-                lastFrameAt = 0;
+                lastFrameTime = 0;
-                matrixAnimationId = requestAnimationFrame(animateMatrix);
+                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>