добавил на страницы загрузок эффект матрицы

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>