From 3bfe86abb9c4bb3c3c0e1215dea1aeb274352da1 Mon Sep 17 00:00:00 2001
From: sysadminix <sa@a3-global.com>
Date: Mon, 2 Feb 2026 12:37:11 +0300
Subject: [PATCH] first2

---
 frontend/app/(protected)/alerts/page.tsx      |  2 +-
 frontend/components/ui/AnimatedBackground.tsx | 62 +++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/ui/AnimatedBackground.tsx

diff --git a/frontend/app/(protected)/alerts/page.tsx b/frontend/app/(protected)/alerts/page.tsx
index 1912ae8..b7fad82 100644
--- a/frontend/app/(protected)/alerts/page.tsx
+++ b/frontend/app/(protected)/alerts/page.tsx
@@ -209,4 +209,4 @@ const AlertsPage: React.FC = () => {
   )
 }
 
-export default AlertsPage
\ No newline at end of file
+export default AlertsPage
diff --git a/frontend/components/ui/AnimatedBackground.tsx b/frontend/components/ui/AnimatedBackground.tsx
new file mode 100644
index 0000000..7dca8b6
--- /dev/null
+++ b/frontend/components/ui/AnimatedBackground.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+
+const AnimatedBackground: React.FC = () => {
+  return (
+    <>
+      <style>{`
+        @keyframes float {
+          0%, 100% { transform: translateY(0px) rotate(0deg); }
+          50% { transform: translateY(-20px) rotate(180deg); }
+        }
+        @keyframes glow {
+          0%, 100% { opacity: 0.3; }
+          50% { opacity: 0.8; }
+        }
+        .float-animation {
+          animation: float 6s ease-in-out infinite;
+        }
+        .glow-animation {
+          animation: glow 3s ease-in-out infinite;
+        }
+      `}</style>
+
+      {/* Фоновый градиент - многоуровневый */}
+      <div className="absolute inset-0 bg-gradient-to-br from-[#050810] via-[#0f1729] to-[#1a1f28] z-0"></div>
+      
+      {/* Второй слой градиента */}
+      <div className="absolute inset-0 bg-gradient-to-tr from-transparent via-[#1a3a52]/20 to-transparent z-0"></div>
+
+      {/* Основные светящиеся орбиты */}
+      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-br from-blue-600/20 to-cyan-500/10 rounded-full blur-3xl glow-animation" style={{ animationDelay: '0s' }}></div>
+      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-tl from-blue-500/20 to-cyan-500/10 rounded-full blur-3xl glow-animation" style={{ animationDelay: '1s' }}></div>
+      <div className="absolute top-1/2 right-1/3 w-80 h-80 bg-gradient-to-bl from-cyan-500/15 to-blue-400/10 rounded-full blur-3xl glow-animation" style={{ animationDelay: '2s' }}></div>
+
+      {/* Дополнительные акцентные элементы */}
+      <div className="absolute top-0 right-0 w-72 h-72 bg-blue-500/5 rounded-full blur-2xl float-animation"></div>
+      <div className="absolute bottom-0 left-0 w-72 h-72 bg-cyan-500/5 rounded-full blur-2xl float-animation" style={{ animationDelay: '3s' }}></div>
+
+      {/* Сетка с градиентом */}
+      <div className="absolute inset-0 opacity-5 z-0" style={{
+        backgroundImage: `
+          linear-gradient(0deg, transparent 24%, rgba(59, 147, 245, 0.08) 25%, rgba(59, 147, 245, 0.08) 26%, transparent 27%, transparent 74%, rgba(59, 147, 245, 0.08) 75%, rgba(59, 147, 245, 0.08) 76%, transparent 77%, transparent),
+          linear-gradient(90deg, transparent 24%, rgba(59, 147, 245, 0.08) 25%, rgba(59, 147, 245, 0.08) 26%, transparent 27%, transparent 74%, rgba(59, 147, 245, 0.08) 75%, rgba(59, 147, 245, 0.08) 76%, transparent 77%, transparent)
+        `,
+        backgroundSize: '60px 60px'
+      }}></div>
+
+      {/* Диагональные линии */}
+      <div className="absolute inset-0 opacity-3 z-0" style={{
+        backgroundImage: `
+          repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(59, 147, 245, 0.1) 35px, rgba(59, 147, 245, 0.1) 70px)
+        `
+      }}></div>
+
+      {/* Центральный светящийся элемент */}
+      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-1 bg-cyan-400 rounded-full shadow-2xl" style={{
+        boxShadow: '0 0 60px 20px rgba(34, 211, 238, 0.15), 0 0 100px 40px rgba(59, 147, 245, 0.08)'
+      }}></div>
+    </>
+  )
+}
+
+export default AnimatedBackground