создание учетки в базе данных

templates/admin_db_index.html

@@ -11,8 +11,8 @@
             --border: #2b3240;
             --text: #e8ecf3;
             --muted: #9aa4b2;
-            --accent: #28c76f;
-            --accent-hover: #20b15f;
+            --accent: #00c773;
+            --accent-hover: #00a861;
             --success-bg: rgba(46, 204, 113, 0.12);
             --success-border: rgba(46, 204, 113, 0.35);
             --danger-bg: rgba(255, 99, 99, 0.12);
@@ -162,7 +162,7 @@
             width: min(90vw, 560px);
             padding: 28px 24px;
             border-radius: 18px;
-            border: 1px solid rgba(0, 255, 136, 0.35);
+            border: 1px solid rgba(0, 255, 136, 0.30);
             background: rgba(12, 17, 26, 0.88);
             box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
             text-align: center;
@@ -172,7 +172,7 @@
         .matrix-title {
             font-size: 28px;
             font-weight: 700;
-            color: #d8ffe9;
+            color: #dfffee;
             margin-bottom: 12px;
         }
 
@@ -215,6 +215,32 @@
                 </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>
+
             {% 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>
@@ -229,6 +255,21 @@
                 <pre class="log-output">{{ parser_output }}</pre>
             </div>
             {% endif %}
+
+            {% 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>
+                <pre class="log-output">{{ account_output }}</pre>
+            </div>
+            {% endif %}
         </div>
     </div>
 
@@ -248,9 +289,12 @@
         const ctx = canvas ? canvas.getContext("2d") : null;
         const parserForms = document.querySelectorAll(".action-form");
         let drops = [];
+        let speeds = [];
         let fontSize = 18;
         let columns = 0;
         let matrixAnimationId = null;
+        let lastFrameAt = 0;
+        const frameDelay = 75;
         const chars = "01アイウエオカキクケコサシスセソタチツテトABCDEFGHIJKLMNOPQRSTUVWXYZ";
 
         function resizeCanvas() {
@@ -259,13 +303,10 @@
             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);
         }
 
-        let lastFrameTime = 0;
-        const matrixFps = 15;
-        const matrixFrameInterval = 1000 / matrixFps;
-
-        function drawMatrix() {
+        function drawMatrixFrame() {
             if (!canvas || !ctx) return;
             ctx.fillStyle = "rgba(3, 8, 15, 0.08)";
             ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -279,16 +320,17 @@
                 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] += 0.65;
+                drops[i] += speeds[i];
             }
         }
 
-        function animateMatrix(timestamp) {
+        function animateMatrix(timestamp = 0) {
             if (!matrixAnimationId) return;
-            if (!lastFrameTime || timestamp - lastFrameTime >= matrixFrameInterval) {
-                drawMatrix();
-                lastFrameTime = timestamp;
+            if (!lastFrameAt || timestamp - lastFrameAt >= frameDelay) {
+                drawMatrixFrame();
+                lastFrameAt = timestamp;
             }
             matrixAnimationId = requestAnimationFrame(animateMatrix);
         }
@@ -301,7 +343,7 @@
             loader.setAttribute("aria-hidden", "false");
             if (!matrixAnimationId) {
                 resizeCanvas();
-                lastFrameTime = 0;
+                lastFrameAt = 0;
                 matrixAnimationId = requestAnimationFrame(animateMatrix);
             }
         }