From 6171d08b08199e1e95090085d6cbb1cca24d9042 Mon Sep 17 00:00:00 2001
From: JoAnns <joanns@noreply.localhost>
Date: Wed, 25 Mar 2026 15:29:44 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=201.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 1.html | 395 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 395 insertions(+)
 create mode 100644 1.html
diff --git a/1.html b/1.html
new file mode 100644
index 0000000..7345a4d
--- /dev/null
+++ b/1.html
@@ -0,0 +1,395 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dark Abstract Design</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            overflow: hidden;
+            background: #0a0e27;
+        }
+
+        .container {
+            width: 100vw;
+            height: 100vh;
+            background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0d1520 100%);
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Green Blob Shapes */
+        .blob {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.7;
+            animation: float 20s infinite ease-in-out;
+        }
+
+        .blob-1 {
+            width: 600px;
+            height: 600px;
+            background: radial-gradient(circle, #10b981 0%, #059669 50%, #047857 100%);
+            top: -150px;
+            left: -150px;
+            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+            animation-delay: 0s;
+        }
+
+        .blob-2 {
+            width: 500px;
+            height: 500px;
+            background: radial-gradient(circle, #059669 0%, #047857 50%, #065f46 100%);
+            bottom: -100px;
+            right: -100px;
+            border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
+            animation-delay: -5s;
+        }
+
+        .blob-3 {
+            width: 400px;
+            height: 400px;
+            background: radial-gradient(circle, #34d399 0%, #10b981 100%);
+            bottom: 20%;
+            right: 15%;
+            border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
+            animation-delay: -10s;
+        }
+
+        .blob-4 {
+            width: 350px;
+            height: 350px;
+            background: radial-gradient(circle, #047857 0%, #065f46 100%);
+            top: 40%;
+            left: 10%;
+            border-radius: 50% 50% 40% 60% / 50% 40% 60% 50%;
+            animation-delay: -15s;
+        }
+
+        @keyframes float {
+            0%, 100% {
+                transform: translate(0, 0) rotate(0deg) scale(1);
+            }
+            33% {
+                transform: translate(30px, -50px) rotate(120deg) scale(1.05);
+            }
+            66% {
+                transform: translate(-20px, 30px) rotate(240deg) scale(0.95);
+            }
+        }
+
+        /* Grid Patterns */
+        .grid {
+            position: absolute;
+            background-image: 
+                linear-gradient(rgba(16, 185, 129, 0.15) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(16, 185, 129, 0.15) 1px, transparent 1px);
+            background-size: 60px 60px;
+            border: 1px solid rgba(16, 185, 129, 0.2);
+            animation: pulse-grid 8s infinite ease-in-out;
+        }
+
+        .grid-1 {
+            width: 300px;
+            height: 300px;
+            top: 10%;
+            left: 5%;
+        }
+
+        .grid-2 {
+            width: 250px;
+            height: 250px;
+            top: 60%;
+            left: 20%;
+            animation-delay: -2s;
+        }
+
+        .grid-3 {
+            width: 280px;
+            height: 280px;
+            top: 15%;
+            right: 10%;
+            animation-delay: -4s;
+        }
+
+        .grid-4 {
+            width: 200px;
+            height: 200px;
+            bottom: 25%;
+            right: 20%;
+            animation-delay: -6s;
+        }
+
+        @keyframes pulse-grid {
+            0%, 100% { opacity: 0.3; transform: scale(1); }
+            50% { opacity: 0.6; transform: scale(1.02); }
+        }
+
+        /* White Dots */
+        .dot {
+            position: absolute;
+            background: white;
+            border-radius: 50%;
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
+                        0 0 40px rgba(255, 255, 255, 0.4),
+                        0 0 60px rgba(255, 255, 255, 0.2);
+            animation: twinkle 4s infinite ease-in-out;
+        }
+
+        .dot-1 {
+            width: 8px;
+            height: 8px;
+            top: 20%;
+            left: 15%;
+            animation-delay: 0s;
+        }
+
+        .dot-2 {
+            width: 12px;
+            height: 12px;
+            top: 35%;
+            left: 50%;
+            animation-delay: -1s;
+        }
+
+        .dot-3 {
+            width: 6px;
+            height: 6px;
+            top: 60%;
+            left: 35%;
+            animation-delay: -2s;
+        }
+
+        .dot-4 {
+            width: 10px;
+            height: 10px;
+            top: 70%;
+            left: 70%;
+            animation-delay: -3s;
+        }
+
+        .dot-5 {
+            width: 7px;
+            height: 7px;
+            top: 45%;
+            right: 25%;
+            animation-delay: -1.5s;
+        }
+
+        .dot-6 {
+            width: 9px;
+            height: 9px;
+            bottom: 30%;
+            right: 35%;
+            animation-delay: -2.5s;
+        }
+
+        .dot-7 {
+            width: 5px;
+            height: 5px;
+            top: 25%;
+            right: 15%;
+            animation-delay: -0.5s;
+        }
+
+        .dot-8 {
+            width: 11px;
+            height: 11px;
+            bottom: 40%;
+            left: 40%;
+            animation-delay: -3.5s;
+        }
+
+        @keyframes twinkle {
+            0%, 100% { 
+                opacity: 1; 
+                transform: scale(1);
+                box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
+                            0 0 40px rgba(255, 255, 255, 0.4);
+            }
+            50% { 
+                opacity: 0.6; 
+                transform: scale(0.9);
+                box-shadow: 0 0 10px rgba(255, 255, 255, 0.5),
+                            0 0 20px rgba(255, 255, 255, 0.2);
+            }
+        }
+
+        /* Sparkles/Stars */
+        .sparkle {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            animation: sparkle-animation 3s infinite ease-in-out;
+        }
+
+        .sparkle::before,
+        .sparkle::after {
+            content: '';
+            position: absolute;
+            background: white;
+            border-radius: 50%;
+        }
+
+        .sparkle::before {
+            width: 2px;
+            height: 20px;
+            left: 50%;
+            top: 0;
+            transform: translateX(-50%);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
+        }
+
+        .sparkle::after {
+            width: 20px;
+            height: 2px;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
+        }
+
+        .sparkle-1 {
+            top: 15%;
+            left: 25%;
+            animation-delay: 0s;
+        }
+
+        .sparkle-2 {
+            top: 55%;
+            left: 10%;
+            animation-delay: -1s;
+        }
+
+        .sparkle-3 {
+            bottom: 20%;
+            left: 30%;
+            animation-delay: -2s;
+        }
+
+        .sparkle-4 {
+            top: 30%;
+            right: 20%;
+            animation-delay: -1.5s;
+        }
+
+        @keyframes sparkle-animation {
+            0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
+            50% { opacity: 1; transform: scale(1) rotate(45deg); }
+        }
+
+        /* Glow Circles */
+        .glow-circle {
+            position: absolute;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
+            animation: glow-pulse 5s infinite ease-in-out;
+        }
+
+        .glow-1 {
+            width: 150px;
+            height: 150px;
+            top: 25%;
+            left: 40%;
+            animation-delay: 0s;
+        }
+
+        .glow-2 {
+            width: 100px;
+            height: 100px;
+            top: 50%;
+            right: 30%;
+            animation-delay: -2s;
+        }
+
+        .glow-3 {
+            width: 120px;
+            height: 120px;
+            bottom: 35%;
+            left: 25%;
+            animation-delay: -3s;
+        }
+
+        @keyframes glow-pulse {
+            0%, 100% { opacity: 0.3; transform: scale(1); }
+            50% { opacity: 0.6; transform: scale(1.1); }
+        }
+
+        /* Small decorative circles */
+        .small-circle {
+            position: absolute;
+            border: 2px solid rgba(16, 185, 129, 0.3);
+            border-radius: 50%;
+            animation: rotate-circle 15s infinite linear;
+        }
+
+        .circle-1 {
+            width: 80px;
+            height: 80px;
+            top: 30%;
+            left: 60%;
+        }
+
+        .circle-2 {
+            width: 60px;
+            height: 60px;
+            bottom: 25%;
+            right: 15%;
+            animation-direction: reverse;
+            animation-delay: -5s;
+        }
+
+        @keyframes rotate-circle {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Green Blobs -->
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+        <div class="blob blob-3"></div>
+        <div class="blob blob-4"></div>
+
+        <!-- Grid Patterns -->
+        <div class="grid grid-1"></div>
+        <div class="grid grid-2"></div>
+        <div class="grid grid-3"></div>
+        <div class="grid grid-4"></div>
+
+        <!-- White Dots -->
+        <div class="dot dot-1"></div>
+        <div class="dot dot-2"></div>
+        <div class="dot dot-3"></div>
+        <div class="dot dot-4"></div>
+        <div class="dot dot-5"></div>
+        <div class="dot dot-6"></div>
+        <div class="dot dot-7"></div>
+        <div class="dot dot-8"></div>
+
+        <!-- Sparkles -->
+        <div class="sparkle sparkle-1"></div>
+        <div class="sparkle sparkle-2"></div>
+        <div class="sparkle sparkle-3"></div>
+        <div class="sparkle sparkle-4"></div>
+
+        <!-- Glow Circles -->
+        <div class="glow-circle glow-1"></div>
+        <div class="glow-circle glow-2"></div>
+        <div class="glow-circle glow-3"></div>
+
+        <!-- Small Circles -->
+        <div class="small-circle circle-1"></div>
+        <div class="small-circle circle-2"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
