JoAnns
/
Design
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Кастомные темы #1

New Issue
Open
opened 2026-03-25 14:56:43 +03:00 by yosya · 2 comments
yosya commented 2026-03-25 14:56:43 +03:00
Copy Link

Молодец

Молодец
yosya commented 2026-03-25 15:26:36 +03:00
Author
Copy Link
<!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>
  • Добавить систему кастомных тем, их создание, загрузку и переключение
``` <!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> ``` - [ ] Добавить систему кастомных тем, их создание, загрузку и переключение
yosya changed title from Good job to Кастомные темы 2026-03-25 15:27:09 +03:00
yosya commented 2026-03-25 15:27:54 +03:00
Author
Copy Link
<!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>
``` <!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> ```
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
main
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: JoAnns/Design#1
No description provided.
Delete Branch "%!s(<nil>)"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?