From 50999d1e73e85e9e18668d4c94618bc1a4584f49 Mon Sep 17 00:00:00 2001
From: JoAnns <joanns@noreply.localhost>
Date: Wed, 25 Mar 2026 15:29:07 +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=202.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 2.html | 508 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 508 insertions(+)
 create mode 100644 2.html
diff --git a/2.html b/2.html
new file mode 100644
index 0000000..6f94a57
--- /dev/null
+++ b/2.html
@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Abstract Design</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            overflow: hidden;
+            font-family: 'Arial', sans-serif;
+        }
+
+        .container {
+            width: 100vw;
+            height: 100vh;
+            background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 50%, #a7f3d0 100%);
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Organic Blob Shapes */
+        .blob {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(40px);
+            opacity: 0.6;
+            animation: float 20s infinite ease-in-out;
+        }
+
+        .blob-1 {
+            width: 500px;
+            height: 500px;
+            background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
+            top: -100px;
+            left: -100px;
+            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+            animation-delay: 0s;
+        }
+
+        .blob-2 {
+            width: 400px;
+            height: 400px;
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            bottom: -50px;
+            right: -50px;
+            border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
+            animation-delay: -5s;
+        }
+
+        .blob-3 {
+            width: 350px;
+            height: 350px;
+            background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
+            animation-delay: -10s;
+        }
+
+        .blob-4 {
+            width: 300px;
+            height: 300px;
+            background: linear-gradient(135deg, #059669 0%, #047857 100%);
+            top: 20%;
+            right: 20%;
+            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.1);
+            }
+            66% {
+                transform: translate(-20px, 30px) rotate(240deg) scale(0.9);
+            }
+        }
+
+        /* SVG Container for lines and geometric shapes */
+        .svg-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        /* Wavy Lines */
+        .wavy-line {
+            fill: none;
+            stroke: white;
+            stroke-width: 3;
+            stroke-linecap: round;
+            opacity: 0.9;
+            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
+        }
+
+        /* Nodes/Dots */
+        .node {
+            fill: white;
+            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
+            animation: pulse 3s infinite ease-in-out;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.7; transform: scale(1.2); }
+        }
+
+        /* Grid Patterns */
+        .grid-cube {
+            position: absolute;
+            width: 150px;
+            height: 150px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            animation: rotate3d 20s infinite linear;
+        }
+
+        .grid-cube::before,
+        .grid-cube::after {
+            content: '';
+            position: absolute;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .grid-cube::before {
+            width: 100%;
+            height: 100%;
+            transform: rotateX(60deg) rotateY(45deg);
+        }
+
+        .grid-cube::after {
+            width: 100%;
+            height: 100%;
+            transform: rotateX(60deg) rotateY(-45deg);
+        }
+
+        .cube-1 {
+            top: 10%;
+            left: 10%;
+            animation-delay: 0s;
+        }
+
+        .cube-2 {
+            top: 60%;
+            left: 70%;
+            animation-delay: -7s;
+        }
+
+        .cube-3 {
+            top: 70%;
+            left: 15%;
+            animation-delay: -14s;
+        }
+
+        @keyframes rotate3d {
+            0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+            100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
+        }
+
+        /* Circular Rings */
+        .ring {
+            position: absolute;
+            border: 3px solid rgba(255, 255, 255, 0.4);
+            border-radius: 50%;
+            animation: expand 8s infinite ease-out;
+        }
+
+        .ring-1 {
+            width: 100px;
+            height: 100px;
+            top: 30%;
+            left: 40%;
+            animation-delay: 0s;
+        }
+
+        .ring-2 {
+            width: 80px;
+            height: 80px;
+            top: 15%;
+            right: 30%;
+            animation-delay: -2s;
+        }
+
+        .ring-3 {
+            width: 120px;
+            height: 120px;
+            bottom: 40%;
+            right: 15%;
+            animation-delay: -4s;
+        }
+
+        @keyframes expand {
+            0% {
+                transform: scale(0.5);
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.6;
+            }
+            100% {
+                transform: scale(1.5);
+                opacity: 0;
+            }
+        }
+
+        /* Small decorative circles */
+        .small-circle {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.6);
+            border-radius: 50%;
+            animation: float-small 10s infinite ease-in-out;
+        }
+
+        .circle-1 {
+            width: 20px;
+            height: 20px;
+            top: 25%;
+            left: 20%;
+            animation-delay: 0s;
+        }
+
+        .circle-2 {
+            width: 15px;
+            height: 15px;
+            top: 45%;
+            left: 35%;
+            animation-delay: -3s;
+        }
+
+        .circle-3 {
+            width: 25px;
+            height: 25px;
+            bottom: 25%;
+            right: 40%;
+            animation-delay: -6s;
+        }
+
+        @keyframes float-small {
+            0%, 100% { transform: translateY(0) translateX(0); }
+            25% { transform: translateY(-20px) translateX(10px); }
+            50% { transform: translateY(10px) translateX(-10px); }
+            75% { transform: translateY(-10px) translateX(5px); }
+        }
+
+        /* Grid Lines Pattern */
+        .grid-pattern {
+            position: absolute;
+            background-image: 
+                linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+            background-size: 50px 50px;
+            animation: grid-move 20s infinite linear;
+        }
+
+        .grid-1 {
+            width: 300px;
+            height: 300px;
+            top: 5%;
+            right: 5%;
+        }
+
+        .grid-2 {
+            width: 250px;
+            height: 250px;
+            bottom: 10%;
+            left: 5%;
+            animation-direction: reverse;
+        }
+
+        @keyframes grid-move {
+            0% { transform: translate(0, 0); }
+            100% { transform: translate(50px, 50px); }
+        }
+
+        /* Interactive cursor effect */
+        .cursor-glow {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
+            border-radius: 50%;
+            pointer-events: none;
+            transform: translate(-50%, -50%);
+            transition: opacity 0.3s;
+            opacity: 0;
+        }
+
+        .container:hover .cursor-glow {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="container" id="container">
+        <!-- Organic 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-pattern grid-1"></div>
+        <div class="grid-pattern grid-2"></div>
+
+        <!-- 3D Grid Cubes -->
+        <div class="grid-cube cube-1"></div>
+        <div class="grid-cube cube-2"></div>
+        <div class="grid-cube cube-3"></div>
+
+        <!-- Expanding Rings -->
+        <div class="ring ring-1"></div>
+        <div class="ring ring-2"></div>
+        <div class="ring ring-3"></div>
+
+        <!-- Small Floating Circles -->
+        <div class="small-circle circle-1"></div>
+        <div class="small-circle circle-2"></div>
+        <div class="small-circle circle-3"></div>
+
+        <!-- SVG for wavy lines and connections -->
+        <svg class="svg-container" id="svgContainer" preserveAspectRatio="xMidYMid slice">
+            <defs>
+                <filter id="glow">
+                    <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                    <feMerge>
+                        <feMergeNode in="coloredBlur"/>
+                        <feMergeNode in="SourceGraphic"/>
+                    </feMerge>
+                </filter>
+            </defs>
+            <!-- Paths will be generated by JavaScript -->
+            <g id="pathsGroup"></g>
+            <g id="nodesGroup"></g>
+        </svg>
+
+        <!-- Cursor Glow Effect -->
+        <div class="cursor-glow" id="cursorGlow"></div>
+    </div>
+
+    <script>
+        // Configuration for wavy lines and nodes
+        const config = {
+            numPaths: 5,
+            nodeRadius: 8,
+            pathColor: '#ffffff',
+            pathWidth: 3
+        };
+
+        // Generate random control points for bezier curves
+        function generateWavyPath(startX, startY, endX, endY, numControlPoints = 3) {
+            let pathData = `M ${startX} ${startY}`;
+            const segmentLength = (endX - startX) / numControlPoints;
+            
+            for (let i = 0; i < numControlPoints; i++) {
+                const cp1x = startX + (i * segmentLength) + (segmentLength / 3);
+                const cp1y = startY + Math.sin(i * 2) * 100 + Math.random() * 50;
+                const cp2x = startX + (i * segmentLength) + (2 * segmentLength / 3);
+                const cp2y = startY + Math.sin((i + 1) * 2) * 100 + Math.random() * 50;
+                const endX_point = startX + (i + 1) * segmentLength;
+                const endY_point = i === numControlPoints - 1 ? endY : startY + Math.sin((i + 1) * 2) * 80;
+                
+                pathData += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX_point} ${endY_point}`;
+            }
+            
+            return pathData;
+        }
+
+        // Create paths and nodes
+        function createPathsAndNodes() {
+            const container = document.getElementById('container');
+            const pathsGroup = document.getElementById('pathsGroup');
+            const nodesGroup = document.getElementById('nodesGroup');
+            const width = window.innerWidth;
+            const height = window.innerHeight;
+
+            // Define node positions
+            const nodes = [
+                { x: width * 0.15, y: height * 0.35 },
+                { x: width * 0.35, y: height * 0.55 },
+                { x: width * 0.55, y: height * 0.25 },
+                { x: width * 0.75, y: height * 0.65 },
+                { x: width * 0.85, y: height * 0.45 },
+                { x: width * 0.25, y: height * 0.75 },
+                { x: width * 0.65, y: height * 0.85 }
+            ];
+
+            // Define connections between nodes
+            const connections = [
+                [0, 1],
+                [1, 2],
+                [2, 3],
+                [3, 4],
+                [1, 5],
+                [5, 6],
+                [6, 3]
+            ];
+
+            // Create paths
+            connections.forEach((conn, index) => {
+                const startNode = nodes[conn[0]];
+                const endNode = nodes[conn[1]];
+                
+                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                const pathData = generateWavyPath(
+                    startNode.x, startNode.y,
+                    endNode.x, endNode.y,
+                    2 + Math.floor(Math.random() * 2)
+                );
+                
+                path.setAttribute('d', pathData);
+                path.setAttribute('class', 'wavy-line');
+                path.setAttribute('filter', 'url(#glow)');
+                path.style.opacity = 0.6 + Math.random() * 0.4;
+                path.style.animationDelay = `${index * 0.5}s`;
+                
+                pathsGroup.appendChild(path);
+            });
+
+            // Create nodes
+            nodes.forEach((node, index) => {
+                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                circle.setAttribute('cx', node.x);
+                circle.setAttribute('cy', node.y);
+                circle.setAttribute('r', config.nodeRadius);
+                circle.setAttribute('class', 'node');
+                circle.style.animationDelay = `${index * 0.3}s`;
+                
+                nodesGroup.appendChild(circle);
+            });
+        }
+
+        // Mouse interaction
+        function initMouseInteraction() {
+            const container = document.getElementById('container');
+            const cursorGlow = document.getElementById('cursorGlow');
+
+            container.addEventListener('mousemove', (e) => {
+                const rect = container.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                
+                cursorGlow.style.left = x + 'px';
+                cursorGlow.style.top = y + 'px';
+            });
+        }
+
+        // Animate paths on load
+        function animatePaths() {
+            const paths = document.querySelectorAll('.wavy-line');
+            paths.forEach((path, index) => {
+                const length = path.getTotalLength();
+                path.style.strokeDasharray = length;
+                path.style.strokeDashoffset = length;
+                
+                setTimeout(() => {
+                    path.style.transition = 'stroke-dashoffset 2s ease-in-out';
+                    path.style.strokeDashoffset = '0';
+                }, index * 200);
+            });
+        }
+
+        // Regenerate on resize
+        let resizeTimeout;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                document.getElementById('pathsGroup').innerHTML = '';
+                document.getElementById('nodesGroup').innerHTML = '';
+                createPathsAndNodes();
+                setTimeout(animatePaths, 100);
+            }, 250);
+        });
+
+        // Initialize
+        window.addEventListener('load', () => {
+            createPathsAndNodes();
+            initMouseInteraction();
+            setTimeout(animatePaths, 500);
+        });
+
+        // Add parallax effect to blobs
+        document.addEventListener('mousemove', (e) => {
+            const blobs = document.querySelectorAll('.blob');
+            const x = e.clientX / window.innerWidth;
+            const y = e.clientY / window.innerHeight;
+            
+            blobs.forEach((blob, index) => {
+                const speed = (index + 1) * 20;
+                const xOffset = (0.5 - x) * speed;
+                const yOffset = (0.5 - y) * speed;
+                blob.style.transform += ` translate(${xOffset}px, ${yOffset}px)`;
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
