From a20f80453bf89e9b1d99dc3104a5dcffb309d89f 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?= <y.chernenko@tvstart.ru>
Date: Tue, 21 Apr 2026 12:37:22 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?=
 =?UTF-8?q?=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BE=D0=BA=20=D1=8D?=
 =?UTF-8?q?=D1=84=D1=84=D0=B5=D0=BA=D1=82=20=D0=BC=D0=B0=D1=82=D1=80=D0=B8?=
 =?UTF-8?q?=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.py                         |  70 ++++-
 static/styles.css              |  66 +++++
 templates/login.html           | 491 +++++++++++++++++++++++++++------
 templates/match_workspace.html | 160 ++++++++++-
 templates/matches.html         | 208 +++++++++++++-
 5 files changed, 885 insertions(+), 110 deletions(-)

diff --git a/app.py b/app.py
index 1e5dd2e..5ada940 100644
--- a/app.py
+++ b/app.py
@@ -628,33 +628,73 @@ def session_workspace(
 
 
 @app.post("/admin/session/{session_token}/load-match-data")
-def load_match_data(session_token: str):
+def load_match_data(request: Request, session_token: str):
     session_row = get_match_session_by_token(session_token)
     if not session_row:
+        if request.headers.get("x-requested-with") == "XMLHttpRequest":
+            return JSONResponse(
+                {
+                    "success": False,
+                    "error": "Сессия не найдена",
+                    "redirect_url": "/admin/matches",
+                },
+                status_code=404,
+            )
         return RedirectResponse(url="/admin/matches", status_code=303)
 
     match_id = session_row[1]
     match_external_id = session_row[8]
 
-    run_parser_game(str(match_external_id))
-
-    # сброс ручного состава и тренеров, чтобы подтянулись свежие данные парсера
-    from db import get_connection
-
-    conn = get_connection()
     try:
-        with conn.cursor() as cur:
-            cur.execute(
-                "DELETE FROM match_lineup_players WHERE match_id = %s", (match_id,)
+        run_parser_game(str(match_external_id))
+
+        # сброс ручного состава и тренеров, чтобы подтянулись свежие данные парсера
+        from db import get_connection
+
+        conn = get_connection()
+        try:
+            with conn.cursor() as cur:
+                cur.execute(
+                    "DELETE FROM match_lineup_players WHERE match_id = %s", (match_id,)
+                )
+                cur.execute("DELETE FROM match_coaches WHERE match_id = %s", (match_id,))
+            conn.commit()
+        finally:
+            conn.close()
+
+    except Exception as e:
+        error_text = str(e) or "Ошибка загрузки данных с сайта"
+
+        if request.headers.get("x-requested-with") == "XMLHttpRequest":
+            return JSONResponse(
+                {
+                    "success": False,
+                    "error": error_text,
+                    "redirect_url": f"/admin/session/{session_token}?tab=game",
+                },
+                status_code=500,
             )
-            cur.execute("DELETE FROM match_coaches WHERE match_id = %s", (match_id,))
-        conn.commit()
-    finally:
-        conn.close()
 
-    return RedirectResponse(url=f"/admin/session/{session_token}", status_code=303)
+        return RedirectResponse(
+            url=f"/admin/session/{session_token}?tab=game",
+            status_code=303,
+        )
 
+    if request.headers.get("x-requested-with") == "XMLHttpRequest":
+        return JSONResponse(
+            {
+                "success": True,
+                "message": "Данные успешно загружены",
+                "redirect_url": f"/admin/session/{session_token}?tab=game",
+            }
+        )
 
+    return RedirectResponse(
+        url=f"/admin/session/{session_token}?tab=game",
+        status_code=303,
+    )
+    
+    
 @app.post("/admin/session/{session_token}/close")
 def close_session(session_token: str):
     deactivate_match_session(session_token)
diff --git a/static/styles.css b/static/styles.css
index ace8e2b..1ddf767 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -2174,4 +2174,70 @@ body:not(.edit-mode-on) .referee-search {
     background: var(--accent-hover);
     border-color: var(--accent-hover);
     transform: translateY(-1px);
+}
+
+.matrix-loader {
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.93);
+    overflow: hidden;
+}
+
+.matrix-loader.active {
+    display: flex;
+}
+
+.matrix-canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.matrix-content {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+    padding: 24px 28px;
+    border-radius: 16px;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(0, 255, 120, 0.25);
+    box-shadow: 0 0 30px rgba(0, 255, 120, 0.12);
+    backdrop-filter: blur(4px);
+}
+
+.matrix-title {
+    margin-bottom: 10px;
+    font-size: 28px;
+    font-weight: 700;
+    color: #9dffb2;
+    text-shadow: 0 0 10px rgba(0, 255, 120, 0.35);
+}
+
+.matrix-status {
+    font-size: 15px;
+    color: #d7ffe1;
+    opacity: 0.95;
+}
+
+.matrix-loader.is-error .matrix-content {
+    border-color: rgba(255, 90, 90, 0.35);
+    box-shadow: 0 0 30px rgba(255, 90, 90, 0.12);
+}
+
+.matrix-loader.is-error .matrix-title {
+    color: #ff9c9c;
+    text-shadow: 0 0 10px rgba(255, 90, 90, 0.25);
+}
+
+.matrix-loader.is-error .matrix-status {
+    color: #ffd4d4;
+}
+
+.matrix-loader.is-success .matrix-title {
+    color: #9dffb2;
 }
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index 4582cfb..4848b57 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -2,109 +2,434 @@
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <title>WFL Admin Login</title>
+    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>Вход</title>
     <style>
         :root {
-            --bg: #0f1115;
-            --panel: #171a21;
-            --panel-2: #1d222b;
-            --border: #2b3240;
-            --text: #e8ecf3;
-            --muted: #9aa4b2;
-            --accent: #4f8cff;
-            --accent-hover: #3e78e6;
-            --danger-bg: rgba(220, 53, 69, 0.14);
-            --danger-border: rgba(220, 53, 69, 0.45);
-            --info-bg: rgba(79, 140, 255, 0.14);
-            --info-border: rgba(79, 140, 255, 0.4);
-            --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
-            --radius: 16px;
+            --bg: #000000;
+            --green: #00ff66;
+            --green-soft: #00cc55;
+            --green-dim: rgba(0, 255, 102, 0.7);
+            --panel: rgba(0, 20, 0, 0.22);
+            --border: rgba(0, 255, 102, 0.22);
+            --danger: #ff5f56;
         }
-        * { box-sizing: border-box; }
-        body {
+
+        * {
+            box-sizing: border-box;
+        }
+
+        html, body {
             margin: 0;
-            min-height: 100vh;
-            display: grid;
-            place-items: center;
-            padding: 24px;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
             background: var(--bg);
-            color: var(--text);
-            font-family: Arial, sans-serif;
+            color: var(--green);
+            font-family: "Courier New", monospace;
         }
-        .card {
+
+        body {
+            position: relative;
+        }
+
+        #matrixCanvas {
+            position: fixed;
+            inset: 0;
             width: 100%;
-            max-width: 420px;
-            background: var(--panel);
-            border: 1px solid var(--border);
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
-            padding: 28px;
+            height: 100%;
+            z-index: 0;
+            opacity: 0.22;
         }
-        h1 { margin: 0 0 8px; font-size: 28px; }
-        .subtitle { color: var(--muted); margin-bottom: 22px; }
-        .alert {
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 12px 14px;
-            margin-bottom: 16px;
-            font-size: 14px;
-        }
-        .alert-error { background: var(--danger-bg); border-color: var(--danger-border); }
-        .alert-info { background: var(--info-bg); border-color: var(--info-border); }
-        label { display: block; font-size: 14px; margin-bottom: 8px; }
-        input {
+
+        .screen {
+            position: relative;
+            z-index: 1;
             width: 100%;
-            min-height: 44px;
-            margin-bottom: 14px;
-            padding: 0 12px;
-            border-radius: 10px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 24px;
+        }
+
+        .terminal {
+            width: min(900px, 100%);
+            min-height: 420px;
+            padding: 32px;
             border: 1px solid var(--border);
-            background: var(--panel-2);
-            color: var(--text);
-            outline: none;
+            background: linear-gradient(
+                180deg,
+                rgba(0, 18, 0, 0.35) 0%,
+                rgba(0, 0, 0, 0.72) 100%
+            );
+            box-shadow:
+                0 0 24px rgba(0, 255, 102, 0.08),
+                inset 0 0 30px rgba(0, 255, 102, 0.04);
+            backdrop-filter: blur(2px);
         }
-        input:focus {
-            border-color: var(--accent);
-            box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
+
+        .terminal-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 24px;
         }
-        button {
-            width: 100%;
-            min-height: 46px;
-            border: none;
-            border-radius: 10px;
-            background: var(--accent);
-            color: white;
-            font-weight: 700;
-            cursor: pointer;
+
+        .dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 999px;
+            background: var(--green);
+            box-shadow: 0 0 8px rgba(0, 255, 102, 0.5);
+        }
+
+        .terminal-title {
+            margin-left: 8px;
+            font-size: 13px;
+            color: var(--green-dim);
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+        }
+
+.terminal-body {
+    font-size: 28px;
+    line-height: 1.8;
+    text-shadow: 0 0 10px rgba(0, 255, 102, 0.18);
+}
+
+.term-line {
+    display: block;
+    min-height: 1.8em;
+}
+
+        .prompt-line {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+.prompt {
+    color: var(--green);
+    margin-right: 10px;
+}
+
+        .input-wrap {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            min-width: 220px;
+        }
+
+.fake-input {
+    position: absolute;
+    left: -9999px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.typed-value {
+    color: var(--green);
+}
+
+.caret {
+    display: inline-block;
+    width: 12px;
+    margin-left: 2px;
+    color: var(--green);
+    animation: blink 1s steps(1, end) infinite;
+}
+
+.hidden {
+    display: none;
+}
+
+        .sys-message {
+            margin-top: 18px;
+            font-size: 16px;
+            color: var(--green-dim);
+            line-height: 1.5;
+        }
+
+        .sys-error {
+            color: var(--danger);
+            text-shadow: 0 0 8px rgba(255, 95, 86, 0.25);
+        }
+
+        .subtle {
+            opacity: 0.8;
+        }
+
+        .scanline::before {
+            content: "";
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            z-index: 2;
+            background: linear-gradient(
+                to bottom,
+                rgba(255, 255, 255, 0.02),
+                rgba(255, 255, 255, 0.00) 3px
+            );
+            background-size: 100% 4px;
+            opacity: 0.08;
+        }
+
+        @keyframes blink {
+            0%, 49% { opacity: 1; }
+            50%, 100% { opacity: 0; }
+        }
+
+        @media (max-width: 700px) {
+            .terminal {
+                padding: 22px;
+                min-height: 360px;
+            }
+
+            .terminal-body {
+                font-size: 20px;
+                line-height: 1.9;
+            }
+
+            .sys-message {
+                font-size: 14px;
+            }
         }
-        button:hover { background: var(--accent-hover); }
-        .hint { color: var(--muted); font-size: 13px; margin-top: 12px; }
     </style>
 </head>
-<body>
-    <div class="card">
-        <h1>WFL Admin</h1>
-        <div class="subtitle">Вход в административный интерфейс</div>
+<body class="scanline">
+    <canvas id="matrixCanvas"></canvas>
 
-        {% if message %}
-            <div class="alert alert-info">{{ message }}</div>
-        {% endif %}
+    <div class="screen">
+        <div class="terminal">
+            <div class="terminal-header">
+                <span class="dot"></span>
+                <span class="dot" style="opacity: 0.7;"></span>
+                <span class="dot" style="opacity: 0.45;"></span>
+                <div class="terminal-title">wfl access terminal</div>
+            </div>
 
-        {% if error %}
-            <div class="alert alert-error">{{ error }}</div>
-        {% endif %}
+            <div class="terminal-body" id="terminalBody">
+                <div class="term-line" id="welcomeLine"></div>
 
-        <form method="post" action="/login">
-            <label for="username">Логин</label>
-            <input id="username" name="username" type="text" autocomplete="username" required>
+                <div class="term-line hidden" id="loginLine">
+                    <span class="prompt">login:</span>
+                    <span id="usernameText" class="typed-value"></span>
+                    <span id="usernameCaret" class="caret">█</span>
+                    <input id="usernameInput" class="fake-input" type="text" autocomplete="username" spellcheck="false">
+                </div>
 
-            <label for="password">Пароль</label>
-            <input id="password" name="password" type="password" autocomplete="current-password" required>
+                <div class="term-line hidden" id="passwordLine">
+                    <span class="prompt">password:</span>
+                    <span id="passwordText" class="typed-value"></span>
+                    <span id="passwordCaret" class="caret hidden">█</span>
+                    <input id="passwordInput" class="fake-input" type="password" autocomplete="current-password" spellcheck="false">
+                </div>
 
-            <button type="submit">Войти</button>
-        </form>
+                <div class="term-line hidden subtle" id="submitLine">
+                    authorizing...
+                </div>
 
-        <div class="hint">Сессия автоматически завершится после 2 часов без активности.</div>
+                {% if message %}
+                    <div class="sys-message">{{ message }}</div>
+                {% endif %}
+
+                {% if error %}
+                    <div class="sys-message sys-error">{{ error }}</div>
+                {% endif %}
+            </div>
+        </div>
     </div>
+
+    <form id="realLoginForm" method="post" action="/login" class="hidden">
+        <input type="hidden" name="username" id="realUsername">
+        <input type="hidden" name="password" id="realPassword">
+    </form>
+
+    <script>
+        (function () {
+            const canvas = document.getElementById("matrixCanvas");
+            const ctx = canvas.getContext("2d");
+
+            let matrixAnimationId = null;
+            let drops = [];
+            const fontSize = 18;
+            const chars = "アイウエオカキクケコサシスセソ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZЖФЛ<>+*#";
+            let columns = 0;
+            let lastTime = 0;
+            const fps = 18;
+            const interval = 1000 / fps;
+
+            function resizeCanvas() {
+                canvas.width = window.innerWidth;
+                canvas.height = window.innerHeight;
+                columns = Math.floor(canvas.width / fontSize);
+                drops = Array(columns).fill(1);
+            }
+
+            function drawMatrix(time = 0) {
+                if (time - lastTime < interval) {
+                    matrixAnimationId = requestAnimationFrame(drawMatrix);
+                    return;
+                }
+
+                lastTime = time;
+
+                ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                ctx.fillStyle = "#00ff66";
+                ctx.font = fontSize + "px monospace";
+
+                for (let i = 0; i < drops.length; i++) {
+                    const text = chars[Math.floor(Math.random() * chars.length)];
+                    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+                    if (drops[i] * fontSize > canvas.height && Math.random() > 0.985) {
+                        drops[i] = 0;
+                    }
+
+                    drops[i] += 0.65;
+                }
+
+                matrixAnimationId = requestAnimationFrame(drawMatrix);
+            }
+
+            resizeCanvas();
+            drawMatrix();
+            window.addEventListener("resize", resizeCanvas);
+
+            const welcomeText = "добро пожаловать в ЖФЛ";
+            const typingSpeed = 75;
+
+            const welcomeLine = document.getElementById("welcomeLine");
+            const loginLine = document.getElementById("loginLine");
+            const passwordLine = document.getElementById("passwordLine");
+            const submitLine = document.getElementById("submitLine");
+
+            const usernameInput = document.getElementById("usernameInput");
+            const passwordInput = document.getElementById("passwordInput");
+
+            const usernameText = document.getElementById("usernameText");
+            const passwordText = document.getElementById("passwordText");
+
+            const usernameCaret = document.getElementById("usernameCaret");
+            const passwordCaret = document.getElementById("passwordCaret");
+
+            const realLoginForm = document.getElementById("realLoginForm");
+            const realUsername = document.getElementById("realUsername");
+            const realPassword = document.getElementById("realPassword");
+
+            let phase = "typing_welcome";
+
+            function focusCurrentInput() {
+                if (phase === "login") {
+                    usernameInput.focus();
+                } else if (phase === "password") {
+                    passwordInput.focus();
+                }
+            }
+
+            function showLoginStep() {
+                phase = "login";
+                loginLine.classList.remove("hidden");
+                usernameCaret.classList.remove("hidden");
+                passwordCaret.classList.add("hidden");
+                setTimeout(() => usernameInput.focus(), 30);
+            }
+
+            function showPasswordStep() {
+                phase = "password";
+                passwordLine.classList.remove("hidden");
+                usernameCaret.classList.add("hidden");
+                passwordCaret.classList.remove("hidden");
+                setTimeout(() => passwordInput.focus(), 30);
+            }
+
+            function submitLogin() {
+                phase = "submitting";
+                passwordCaret.classList.add("hidden");
+                submitLine.classList.remove("hidden");
+
+                realUsername.value = usernameInput.value.trim();
+                realPassword.value = passwordInput.value;
+
+                setTimeout(() => {
+                    realLoginForm.submit();
+                }, 350);
+            }
+
+            function typeWelcome(index = 0) {
+                if (index < welcomeText.length) {
+                    welcomeLine.textContent += welcomeText[index];
+                    setTimeout(() => typeWelcome(index + 1), typingSpeed);
+                    return;
+                }
+
+                setTimeout(showLoginStep, 220);
+            }
+
+            usernameInput.addEventListener("input", function () {
+                usernameText.textContent = usernameInput.value;
+            });
+
+            passwordInput.addEventListener("input", function () {
+                passwordText.textContent = "*".repeat(passwordInput.value.length);
+            });
+
+            usernameInput.addEventListener("keydown", function (event) {
+                if (event.key === "Enter") {
+                    event.preventDefault();
+
+                    if (!usernameInput.value.trim()) {
+                        return;
+                    }
+
+                    showPasswordStep();
+                }
+            });
+
+            passwordInput.addEventListener("keydown", function (event) {
+                if (event.key === "Enter") {
+                    event.preventDefault();
+
+                    if (!usernameInput.value.trim() || !passwordInput.value) {
+                        return;
+                    }
+
+                    submitLogin();
+                }
+            });
+
+            document.addEventListener("click", function () {
+                focusCurrentInput();
+            });
+
+            document.addEventListener("keydown", function (event) {
+                if (phase === "typing_welcome" || phase === "submitting") {
+                    return;
+                }
+
+                if (document.activeElement === usernameInput || document.activeElement === passwordInput) {
+                    return;
+                }
+
+                if (event.key === "Tab") {
+                    event.preventDefault();
+                    focusCurrentInput();
+                    return;
+                }
+
+                if (event.key.length === 1 || event.key === "Backspace") {
+                    focusCurrentInput();
+                }
+            });
+
+            typeWelcome();
+        })();
+    </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/templates/match_workspace.html b/templates/match_workspace.html
index c0e2236..51e82db 100644
--- a/templates/match_workspace.html
+++ b/templates/match_workspace.html
@@ -53,10 +53,11 @@
               {% endif %}
             </div>
             <div class="header-actions compact">
-              <form
-                method="post"
-                action="/admin/session/{{ session[3] }}/load-match-data"
-              >
+<form
+  method="post"
+  action="/admin/session/{{ session[3] }}/load-match-data"
+  id="loadMatchDataForm"
+>
                 <button
                   type="submit"
                   class="icon-btn header-icon"
@@ -1173,5 +1174,156 @@
       })();
     </script>
     <script src="/static/script.js"></script>
+    <div id="matrixLoader" class="matrix-loader" aria-hidden="true">
+  <canvas id="matrixCanvas" class="matrix-canvas"></canvas>
+
+  <div class="matrix-content">
+    <div class="matrix-title">Загрузка данных матча</div>
+    <div class="matrix-status" id="matrixStatusText">
+      Подключение к сайту...
+    </div>
+  </div>
+</div>
+<script>
+  (function () {
+    const loadForm = document.getElementById("loadMatchDataForm");
+    const loader = document.getElementById("matrixLoader");
+    const titleEl = document.getElementById("matrixTitle");
+    const statusText = document.getElementById("matrixStatusText");
+    const canvas = document.getElementById("matrixCanvas");
+    const ctx = canvas ? canvas.getContext("2d") : null;
+
+    let matrixAnimationId = null;
+    let drops = [];
+    const fontSize = 18;
+    const chars = "アイウエオカキクケコサシスセソ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZЖФЛ<>+*#";
+    let columns = 0;
+    let lastTime = 0;
+    const fps = 18;
+    const interval = 1000 / fps;
+
+    function resizeCanvas() {
+      if (!canvas || !ctx) return;
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      columns = Math.floor(canvas.width / fontSize);
+      drops = Array(columns).fill(1);
+    }
+
+    function drawMatrix(time = 0) {
+      if (!canvas || !ctx) return;
+
+      if (time - lastTime < interval) {
+        matrixAnimationId = requestAnimationFrame(drawMatrix);
+        return;
+      }
+
+      lastTime = time;
+
+      ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.fillStyle = "#00ff66";
+      ctx.font = fontSize + "px monospace";
+
+      for (let i = 0; i < drops.length; i++) {
+        const text = chars[Math.floor(Math.random() * chars.length)];
+        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+        if (drops[i] * fontSize > canvas.height && Math.random() > 0.985) {
+          drops[i] = 0;
+        }
+
+        drops[i] += 0.65;
+      }
+
+      matrixAnimationId = requestAnimationFrame(drawMatrix);
+    }
+
+    function startLoader(title, message) {
+      if (!loader) return;
+      loader.classList.add("active");
+      loader.classList.remove("is-error", "is-success");
+      if (titleEl) titleEl.textContent = title || "Загрузка данных матча";
+      if (statusText) statusText.textContent = message || "Подключение к сайту...";
+      document.body.style.overflow = "hidden";
+      resizeCanvas();
+
+      if (!matrixAnimationId) {
+        drawMatrix();
+      }
+    }
+
+    function setLoaderState(state, title, message) {
+      if (!loader) return;
+      loader.classList.remove("is-error", "is-success");
+      if (state) {
+        loader.classList.add(state);
+      }
+      if (titleEl) titleEl.textContent = title || "";
+      if (statusText) statusText.textContent = message || "";
+    }
+
+    window.addEventListener("resize", resizeCanvas);
+
+    if (!loadForm) return;
+
+    loadForm.addEventListener("submit", async function (event) {
+      event.preventDefault();
+
+      const submitButton = loadForm.querySelector('button[type="submit"]');
+      if (submitButton) {
+        submitButton.disabled = true;
+      }
+
+      startLoader("Загрузка данных матча", "Подключение к сайту...");
+
+      try {
+        const response = await fetch(loadForm.action, {
+          method: "POST",
+          headers: {
+            "X-Requested-With": "XMLHttpRequest",
+            "Accept": "application/json"
+          },
+          credentials: "same-origin"
+        });
+
+        let data = {};
+        try {
+          data = await response.json();
+        } catch (_) {}
+
+        if (!response.ok || !data.success) {
+          throw new Error(data.error || "Не удалось загрузить данные с сайта");
+        }
+
+        setLoaderState(
+          "is-success",
+          "Загрузка завершена",
+          (data.message || "Данные успешно загружены") + "\nПереход во вкладку «Игра»..."
+        );
+
+        setTimeout(() => {
+          window.location.href = data.redirect_url || "{{ '/admin/session/' ~ session[3] ~ '?tab=game' }}";
+        }, 1200);
+
+      } catch (error) {
+        setLoaderState(
+          "is-error",
+          "Ошибка загрузки",
+          (error.message || "Не удалось загрузить данные с сайта") + "\nВозврат во вкладку «Игра» через 3 секунды..."
+        );
+
+        setTimeout(() => {
+          window.location.href = "{{ '/admin/session/' ~ session[3] ~ '?tab=game' }}";
+        }, 3000);
+      } finally {
+        if (submitButton) {
+          submitButton.disabled = false;
+        }
+      }
+    });
+  })();
+</script>
   </body>
 </html>
diff --git a/templates/matches.html b/templates/matches.html
index f84d070..45858fd 100644
--- a/templates/matches.html
+++ b/templates/matches.html
@@ -298,6 +298,70 @@
             color: var(--text);
         }
 
+        /* ===== MATRIX LOADER ===== */
+        .matrix-loader {
+            position: fixed;
+            inset: 0;
+            z-index: 9999;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            background: rgba(0, 0, 0, 0.92);
+        }
+
+        .matrix-loader.active {
+            display: flex;
+        }
+
+        .matrix-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        .matrix-content {
+            position: relative;
+            z-index: 2;
+            text-align: center;
+            padding: 24px 28px;
+            border-radius: 16px;
+            background: rgba(0, 0, 0, 0.35);
+            border: 1px solid rgba(0, 255, 120, 0.25);
+        }
+
+        .matrix-title {
+            font-size: 26px;
+            color: #9dffb2;
+        }
+
+        .matrix-status {
+            font-size: 14px;
+            color: #d7ffe1;
+        }
+.matrix-loader.is-error .matrix-content {
+    border-color: rgba(255, 90, 90, 0.35);
+    box-shadow: 0 0 30px rgba(255, 90, 90, 0.12);
+}
+
+.matrix-loader.is-error .matrix-title {
+    color: #ff9c9c;
+    text-shadow: 0 0 10px rgba(255, 90, 90, 0.25);
+}
+
+.matrix-loader.is-error .matrix-status {
+    color: #ffd4d4;
+}
+
+.matrix-loader.is-success .matrix-title {
+    color: #9dffb2;
+}
+
+.matrix-status {
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
     </style>
 </head>
 <body>
@@ -414,8 +478,94 @@
             {% endif %}
         </div>
     </div>
-    <script>
+    <div id="matrixLoader" class="matrix-loader" aria-hidden="true">
+    <canvas id="matrixCanvas" class="matrix-canvas"></canvas>
+    <div class="matrix-content">
+        <div class="matrix-title">Подготовка матча</div>
+        <div class="matrix-status" id="matrixStatusText">Инициализация...</div>
+    </div>
+</div>
+<script>
 (function () {
+    const loader = document.getElementById("matrixLoader");
+    const titleEl = document.getElementById("matrixTitle");
+    const statusText = document.getElementById("matrixStatusText");
+    const canvas = document.getElementById("matrixCanvas");
+    const ctx = canvas ? canvas.getContext("2d") : null;
+
+    let matrixAnimationId = null;
+    let drops = [];
+    let fontSize = 16;
+    let columns = 0;
+    let lastTime = 0;
+    const fps = 18;
+    const interval = 1000 / fps;
+    const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ@$%#*+=<>";
+
+    function resizeCanvas() {
+        if (!canvas || !ctx) return;
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        columns = Math.floor(canvas.width / fontSize);
+        drops = Array(columns).fill(1);
+    }
+
+    function drawMatrix(time = 0) {
+        if (!canvas || !ctx) return;
+
+        if (time - lastTime < interval) {
+            matrixAnimationId = requestAnimationFrame(drawMatrix);
+            return;
+        }
+
+        lastTime = time;
+
+        ctx.fillStyle = "rgba(0, 0, 0, 0.08)";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        ctx.fillStyle = "#00ff66";
+        ctx.font = `${fontSize}px monospace`;
+
+        for (let i = 0; i < drops.length; i++) {
+            const text = chars[Math.floor(Math.random() * chars.length)];
+            ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+            if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                drops[i] = 0;
+            }
+
+            drops[i] += 0.65;
+        }
+
+        matrixAnimationId = requestAnimationFrame(drawMatrix);
+    }
+
+    function startLoader(title, message) {
+        if (loader) {
+            loader.classList.add("active");
+            loader.classList.remove("is-error", "is-success");
+        }
+        if (titleEl) titleEl.textContent = title || "Подготовка матча";
+        if (statusText) statusText.textContent = message || "Инициализация...";
+        document.body.style.overflow = "hidden";
+
+        resizeCanvas();
+        if (!matrixAnimationId) {
+            drawMatrix();
+        }
+    }
+
+    function setLoaderState(state, title, message) {
+        if (loader) {
+            loader.classList.remove("is-error", "is-success");
+            if (state) loader.classList.add(state);
+        }
+        if (titleEl) titleEl.textContent = title || "";
+        if (statusText) statusText.textContent = message || "";
+    }
+
+    window.addEventListener("resize", resizeCanvas);
+
     async function handleSelectSubmit(event) {
         const form = event.target;
         if (!form.classList.contains("js-select-form")) return;
@@ -423,17 +573,16 @@
         event.preventDefault();
 
         const submitButton = form.querySelector('button[type="submit"]');
-        const operatorInput = form.querySelector('input[name="operator_name"]');
-        const operatorName = operatorInput ? operatorInput.value : "";
 
         if (submitButton) {
             submitButton.disabled = true;
             submitButton.textContent = "Подготовка...";
         }
 
+        startLoader("Подготовка матча", "Создание игровой сессии...");
+
         try {
             const url = new URL(form.action, window.location.origin);
-            url.searchParams.set("operator_name", operatorName);
 
             const response = await fetch(url.toString(), {
                 method: "GET",
@@ -444,13 +593,21 @@
                 credentials: "same-origin"
             });
 
-            const data = await response.json();
+            let data = {};
+            try {
+                data = await response.json();
+            } catch (_) {}
 
             if (!response.ok || !data.success) {
                 throw new Error(data.error || data.vmix_error || "Не удалось выбрать матч");
             }
 
             if (data.download_url) {
+                setLoaderState("",
+                    "Подготовка матча",
+                    "Формирование проекта vMix..."
+                );
+
                 const downloadResponse = await fetch(data.download_url, {
                     method: "GET",
                     credentials: "same-origin"
@@ -465,6 +622,11 @@
                     throw new Error(errText);
                 }
 
+                setLoaderState("",
+                    "Подготовка матча",
+                    "Скачивание проекта vMix..."
+                );
+
                 const blob = await downloadResponse.blob();
 
                 let filename = "project.vmix";
@@ -489,13 +651,42 @@
                 document.body.appendChild(a);
                 a.click();
                 a.remove();
-                window.URL.revokeObjectURL(blobUrl);
+
+                setLoaderState(
+                    "is-success",
+                    "Загрузка завершена",
+                    "Проект vMix успешно подготовлен.\nПереход во вкладку «Игра»..."
+                );
+
+                setTimeout(() => {
+                    window.URL.revokeObjectURL(blobUrl);
+                    window.location.href = data.session_url + "?tab=game";
+                }, 1200);
+
+                return;
             }
 
-            window.location.href = data.session_url;
+            setLoaderState(
+                "is-success",
+                "Загрузка завершена",
+                "Матч подготовлен.\nПереход во вкладку «Игра»..."
+            );
+
+            setTimeout(() => {
+                window.location.href = data.session_url + "?tab=game";
+            }, 1200);
 
         } catch (error) {
-            alert(error.message || "Ошибка при подготовке матча");
+            setLoaderState(
+                "is-error",
+                "Ошибка подготовки",
+                (error.message || "Ошибка при подготовке матча") + "\nВозврат к списку матчей через 3 секунды..."
+            );
+
+            setTimeout(() => {
+                window.location.href = "/admin/matches";
+            }, 3000);
+        } finally {
             if (submitButton) {
                 submitButton.disabled = false;
                 submitButton.textContent = "Выбрать матч";
@@ -505,6 +696,7 @@
 
     document.addEventListener("submit", handleSelectSubmit);
 })();
+
         (function () {
             const LOGIN_URL = "/login";
             const IDLE_LIMIT_MS = 2 * 60 * 60 * 1000;