{"id":893,"date":"2025-10-03T23:36:09","date_gmt":"2025-10-03T21:36:09","guid":{"rendered":"https:\/\/webliumhub.com\/?page_id=893"},"modified":"2026-01-15T21:38:14","modified_gmt":"2026-01-15T19:38:14","slug":"cursorium","status":"publish","type":"page","link":"https:\/\/webliumhub.com\/en\/cursorium","title":{"rendered":"Cursor Generator"},"content":{"rendered":"<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.29.0\/themes\/prism-tomorrow.min.css\" rel=\"stylesheet\" \/>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.29.0\/components\/prism-core.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/prism\/1.29.0\/plugins\/autoloader\/prism-autoloader.min.js\"><\/script>\n    \n    <style>\n        .container {\n            max-width: 1290px;\n            margin: 0 auto;\n            display: grid;\n            grid-template-columns: 1fr 400px;\n            gap: 30px;\n        }\n        .preview-section {\n            background: var(--wp--preset--color--palette-color-8) !important;\n            border-radius: 20px;\n            padding: 30px;\n            box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .preview-area {\n            flex: 1;\n            background: var(--theme-palette-color-6, #f2f5f7);\n            border-radius: 15px;\n            padding: 40px;\n            margin-bottom: 20px;\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-direction: column;\n            gap: 20px;\n            cursor: none;\n        }\n\n        .demo-content {\n            text-align: center;\n        }\n\n        .demo-content h1 {\n            font-size: 2.5rem;\n            color: var(--theme-heading-color, var(--theme-heading-1-color, var(--theme-headings-color)));\n            margin-bottom: 20px;\n        }\n\n        .demo-content p {\n            font-size: 1.2rem;\n            color: var(--theme-text-color);\n            margin-bottom: 30px;\n        }\n\n        .demo-button {\n            background: linear-gradient(45deg, #5284f7, #376ce6);\n            color: white;\n            border: none;\n            padding: 11px 30px;\n            border-radius: var(--theme-button-border-radius, 10px);\n            font-size: 1.1rem;\n            cursor: none;\n            transition: transform 0.3s ease;\n        }\n\n        .demo-button:hover {\n            transform: translateY(-2px);\n        }\n\n        .demo-link {\n            color: var(--theme-button-background-initial-color);\n            text-decoration: none;\n            font-weight: 600;\n            cursor: none;\n        }\n\n        .code-section {\n            background: #1e1e1e;\n            border-radius: 15px;\n            padding: 20px;\n            max-height: 500px;\n            overflow-y: auto;\n        }\n\n        .code-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 15px;\n        }\n\n        .code-title {\n            color: #fff;\n            font-size: 1.1rem;\n            font-weight: 600;\n        }\n\n        .copy-button {\n            background: var(--theme-button-background-initial-color);\n            color: white;\n            border: none;\n            padding: 8px 16px;\n            border-radius: 8px;\n            cursor: pointer;\n            font-size: 0.9rem;\n            transition: background 0.3s ease;\n        }\n\n        .copy-button:hover {\n            background: #5a6fd8;\n        }\n\n        .copy-button.copied {\n            background: #28a745;\n        }\n\n        .controls-section {\n            background: var(--wp--preset--color--palette-color-8) !important;\n            border-radius: 20px;\n            padding: 30px;\n            box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n            display: flex;\n            flex-direction: column;\n        }\n\n        .controls-title {\n            font-size: 1.5rem;\n            color: var(--theme-heading-color, var(--theme-heading-1-color, var(--theme-headings-color)));\n            margin-bottom: 20px;\n            text-align: center;\n        }\n\n        #controls-root {\n            flex: 1;\n        }\n\n.control-group:last-child {\n    margin: 0;\n}\n        \/* Custom control styles *\/\n        .control-group {\n            margin-bottom: 18px;\n            padding: 11px 16px;\n            background: var(--theme-palette-color-6, #f2f5f7);\n            border-radius: 12px;\n            border: 1px solid #7e7f850d;\n        }\n\n        .control-group h4 {\n            margin: 0 0 10px 0;\n            color: var(--theme-heading-color, var(--theme-heading-1-color, var(--theme-headings-color)));\n            font-size: 1rem;\n            font-weight: 600;\n        }\n\n        .control-item {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 0px;\n            padding: 6px 0;\n        }\n\n        .control-item:last-child {\n            margin-bottom: 0;\n        }\n\n        .control-label {\n            font-size: 0.85rem;\n            color: #6c757d;\n            font-weight: 500;\n            min-width: 130px;\n            width: 130px;\n            margin: 0;\n            line-height: 1.2;\n        }\n\n        .control-input {\n            flex: 1;\n            max-width: 200px;\n        }\n\n        .control-input input[type=\"range\"] {\n            width: 100%;\n            height: 4px;\n            border-radius: 3px;\n            background: #dee2e6;\n            outline: none;\n            -webkit-appearance: none;\n        }\n\n        .control-input input[type=\"range\"]::-webkit-slider-thumb {\n            -webkit-appearance: none;\n            appearance: none;\n            width: 16px;\n            height: 16px;\n            border-radius: 50%;\n            background: var(--theme-button-background-initial-color);\n            cursor: pointer;\n        }\n\n        .control-input input[type=\"range\"]::-moz-range-thumb {\n            width: 16px;\n            height: 16px;\n            border-radius: 50%;\n            background: var(--theme-button-background-initial-color);\n            cursor: pointer;\n            border: none;\n        }\n\n        .control-input input[type=\"color\"] {\n            width: 100%;\n            height: 30px;\n            border: none;\n            border-radius: 8px;\n            cursor: pointer;\n        }\n\n        .control-input input[type=\"number\"] {\n            width: 80px;\n            padding: 4px 8px;\n            border: 1px solid #ced4da;\n            border-radius: 6px;\n            font-size: 0.85rem;\n        }\n\n        .control-input select {\n            padding: 4px 8px;\n            border: 1px solid #ced4da;\n            border-radius: 6px;\n            font-size: 0.85rem;\n            background: white;\n            cursor: pointer;\n            height: 30px;\n        }\n\n        .control-input input[type=\"checkbox\"] {\n            width: 16px;\n            height: 16px;\n            cursor: pointer;\n        }\n\n        .control-value {\n            min-width: 40px;\n            text-align: right;\n            font-size: 0.8rem;\n            color: #6c757d;\n            font-weight: 500;\n        }\n\n        \/* \u041c\u0435\u0434\u0456\u0430-\u0437\u0430\u043f\u0438\u0442 \u0434\u043b\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457\u0432 *\/\n        @media (max-width: 1200px) {\n            .cursor-dot, .cursor-dot-outline {\n                display: none !important;\n            }\n        }\n\n        \/* Custom cursor styles *\/\n        .cursor-dot {\n            width: 8px;\n            height: 8px;\n            background-color: var(--theme-button-background-initial-color);\n            border-radius: 50%;\n            position: fixed;\n            top: 0;\n            left: 0;\n            pointer-events: none;\n            z-index: 9999;\n            transition: transform 0.1s ease;\n        }\n\n        .cursor-dot-outline {\n            width: 40px;\n            height: 40px;\n            border: 2px solid rgba(102, 126, 234, 0.5);\n            border-radius: 50%;\n            position: fixed;\n            top: 0;\n            left: 0;\n            pointer-events: none;\n            z-index: 9998;\n            transition: all 0.15s ease-out;\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 1200px) {\n            .container {\n                grid-template-columns: 1fr;\n                grid-template-rows: 1fr auto;\n                height: auto;\n                min-height: calc(100vh - 40px);\n            }\n            \n            .controls-section {\n                max-height: 500px;\n                overflow-y: auto;\n            }\n        }\n\n        \/* Prism.js customization *\/\n        pre[class*=\"language-\"] {\n            margin: 0;\n            border-radius: 8px;\n        }\n\n        code[class*=\"language-\"] {\n            font-size: 0.9rem;\n        }\n    <\/style>\n\n    <div class=\"container\">\n        <div class=\"preview-section\">\n            <div class=\"preview-area\" id=\"preview-area\">\n                <div class=\"demo-content\">\n                    <h1>Cursor Generator<\/h1>\n                    <p>The cursor generator helps you change the standard mouse pointer into a unique design element. You can customize the size, color, transparency, and animation to add style and modernity to your website.<\/p>\n                    <button class=\"demo-button\">Test button<\/button>\n                    <br><br>\n                    <a href=\"#\" class=\"demo-link\">Links for testing<\/a>\n                <\/div>\n            <\/div>\n            \n            <div class=\"code-section\">\n                <div class=\"code-header\">\n                    <div class=\"code-title\">Generated code<\/div>\n                    <button class=\"copy-button\" id=\"copy-button\">Copy<\/button>\n                <\/div>\n                <pre><code class=\"language-html\" id=\"generated-code\"><\/code><\/pre>\n            <\/div>\n        <\/div>\n\n        <div class=\"controls-section\">\n            <h3 class=\"controls-title\">Cursor settings<\/h3>\n            <div id=\"controls-root\">\n                <!-- Dot Controls -->\n                <div class=\"control-group\">\n                    <h4>Dot<\/h4>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Size<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"dotSize\" min=\"1\" max=\"50\" value=\"8\" step=\"1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"dotSizeValue\">8<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Color<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"color\" id=\"dotColor\" value=\"#667eea\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Transparency:<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"dotOpacity\" min=\"0\" max=\"1\" value=\"1\" step=\"0.1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"dotOpacityValue\">1<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Hovering scale<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"dotScale\" min=\"0.1\" max=\"3\" value=\"0.7\" step=\"0.1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"dotScaleValue\">0.7<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Frame thickness:<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"dotBorderWidth\" min=\"0\" max=\"10\" value=\"0\" step=\"1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"dotBorderWidthValue\">0<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Frame color<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"color\" id=\"dotBorderColor\" value=\"#ffffff\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Radius (%):<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"dotRadius\" min=\"0\" max=\"50\" value=\"50\" step=\"1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"dotRadiusValue\">50<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Outline Controls -->\n                <div class=\"control-group\">\n                    <h4>Contour<\/h4>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Size<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"outlineSize\" min=\"10\" max=\"100\" value=\"40\" step=\"1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"outlineSizeValue\">40<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Color<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"color\" id=\"outlineColor\" value=\"#667eea\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Transparency:<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"outlineOpacity\" min=\"0\" max=\"1\" value=\"0.5\" step=\"0.1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"outlineOpacityValue\">0.5<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Hovering scale<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"outlineScale\" min=\"0.5\" max=\"3\" value=\"1.5\" step=\"0.1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"outlineScaleValue\">1.5<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Type<\/label>\n                        <div class=\"control-input\">\n                            <select id=\"outlineType\">\n                                <option value=\"border\">Contour<\/option>\n                                <option value=\"fill\">Filling<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Frame thickness:<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"outlineBorderWidth\" min=\"0\" max=\"10\" value=\"2\" step=\"1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"outlineBorderWidthValue\">2<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Radius (%):<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"outlineRadius\" min=\"0\" max=\"50\" value=\"50\" step=\"1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"outlineRadiusValue\">50<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Animation Controls -->\n                <div class=\"control-group\">\n                    <h4>Animation<\/h4>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Animation speed:<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"animationSpeed\" min=\"1\" max=\"20\" value=\"8\" step=\"1\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"animationSpeedValue\">8<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Delay (seconds):<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"range\" id=\"animationDelay\" min=\"0.05\" max=\"1\" value=\"0.15\" step=\"0.05\">\n                        <\/div>\n                        <span class=\"control-value\" id=\"animationDelayValue\">0.15<\/span>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Blend mode<\/label>\n                        <div class=\"control-input\">\n                            <select id=\"blendMode\">\n                                <option value=\"normal\">Normal<\/option>\n                                <option value=\"multiply\">Multiply<\/option>\n                                <option value=\"screen\">Screen<\/option>\n                                <option value=\"overlay\">Overlay<\/option>\n                                <option value=\"soft-light\">Soft Light<\/option>\n                                <option value=\"hard-light\">Hard Light<\/option>\n                                <option value=\"color-dodge\">Color Dodge<\/option>\n                                <option value=\"color-burn\">Color Burn<\/option>\n                                <option value=\"darken\">Darken<\/option>\n                                <option value=\"lighten\">Lighten<\/option>\n                                <option value=\"difference\">Difference<\/option>\n                                <option value=\"exclusion\">Exclusion<\/option>\n                                <option value=\"hue\">Hue<\/option>\n                                <option value=\"saturation\">Saturation<\/option>\n                                <option value=\"color\">Color<\/option>\n                                <option value=\"luminosity\">Luminosity<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                    <div class=\"control-item\">\n                        <label class=\"control-label\">Cursor visibility:<\/label>\n                        <div class=\"control-input\">\n                            <input type=\"checkbox\" id=\"cursorVisible\" checked>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Cursor elements -->\n    <div class=\"cursor-dot\" id=\"cursor-dot\"><\/div>\n    <div class=\"cursor-dot-outline\" id=\"cursor-outline\"><\/div>\n\n    <script>\n        \/\/ Cursor settings\n        let settings = {\n            \/\/ Dot settings\n            dotSize: 8,\n            dotColor: '#667eea',\n            dotOpacity: 1,\n            dotScale: 0.7,\n            dotBorderWidth: 0,\n            dotBorderColor: '#ffffff',\n            dotRadius: 50,\n            \n            \/\/ Outline settings\n            outlineSize: 40,\n            outlineColor: '#667eea',\n            outlineOpacity: 0.5,\n            outlineScale: 1.5,\n            outlineBorderWidth: 2,\n            outlineBorderColor: '#667eea',\n            outlineRadius: 50,\n            \n            \/\/ Animation settings\n            animationSpeed: 8,\n            animationDelay: 0.15,\n            blendMode: 'normal',\n            cursorVisible: true\n        };\n\n        \/\/ Cursor object\n        const cursor = {\n            _x: 0,\n            _y: 0,\n            endX: 0,\n            endY: 0,\n            cursorVisible: true,\n            cursorEnlarged: false,\n            $dot: document.getElementById('cursor-dot'),\n            $outline: document.getElementById('cursor-outline'),\n\n            init() {\n                this.setupEventListeners();\n                this.animateDotOutline();\n            },\n\n            setupEventListeners() {\n                const self = this;\n                \n                \/\/ Mouse events\n                document.addEventListener('mousemove', function(e) {\n                    self.cursorVisible = true;\n                    self.toggleCursorVisibility();\n                    \/\/ \u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u043c\u043e clientX\/clientY \u0434\u043b\u044f position: fixed\n                    self.endX = e.clientX;\n                    self.endY = e.clientY;\n                    self.$dot.style.top = self.endY + 'px';\n                    self.$dot.style.left = self.endX + 'px';\n                });\n\n                document.addEventListener('mouseenter', function() {\n                    self.cursorVisible = true;\n                    self.toggleCursorVisibility();\n                    self.$dot.style.opacity = 1;\n                    self.$outline.style.opacity = 1;\n                });\n\n                document.addEventListener('mouseleave', function() {\n                    self.cursorVisible = true;\n                    self.toggleCursorVisibility();\n                    self.$dot.style.opacity = 0;\n                    self.$outline.style.opacity = 0;\n                });\n\n                document.addEventListener('mousedown', function() {\n                    self.cursorEnlarged = true;\n                    self.toggleCursorSize();\n                });\n\n                document.addEventListener('mouseup', function() {\n                    self.cursorEnlarged = false;\n                    self.toggleCursorSize();\n                });\n\n                \/\/ Hover effects\n                document.querySelectorAll('a, button, [role=\"button\"]').forEach(el => {\n                    el.addEventListener('mouseover', function() {\n                        self.cursorEnlarged = true;\n                        self.toggleCursorSize();\n                    });\n                    \n                    el.addEventListener('mouseout', function() {\n                        self.cursorEnlarged = false;\n                        self.toggleCursorSize();\n                    });\n                });\n            },\n\n            animateDotOutline() {\n                const self = this;\n                \n                self._x += (self.endX - self._x) \/ settings.animationSpeed;\n                self._y += (self.endY - self._y) \/ settings.animationSpeed;\n                self.$outline.style.top = self._y + 'px';\n                self.$outline.style.left = self._x + 'px';\n                \n                requestAnimationFrame(this.animateDotOutline.bind(this));\n            },\n\n            toggleCursorSize() {\n                if (this.cursorEnlarged) {\n                    this.$dot.style.transform = `translate(-50%, -50%) scale(${settings.dotScale})`;\n                    this.$outline.style.transform = `translate(-50%, -50%) scale(${settings.outlineScale})`;\n                } else {\n                    this.$dot.style.transform = 'translate(-50%, -50%) scale(1)';\n                    this.$outline.style.transform = 'translate(-50%, -50%) scale(1)';\n                }\n            },\n\n            toggleCursorVisibility() {\n                if (this.cursorVisible && settings.cursorVisible) {\n                    this.$dot.style.opacity = settings.dotOpacity;\n                    this.$outline.style.opacity = settings.outlineOpacity;\n                } else {\n                    this.$dot.style.opacity = 0;\n                    this.$outline.style.opacity = 0;\n                }\n            }\n        };\n\n        \/\/ Control panel functionality\n        function initControls() {\n            \/\/ Update value displays\n            function updateValueDisplay(id, value) {\n                const display = document.getElementById(id + 'Value');\n                if (display) {\n                    display.textContent = value;\n                }\n            }\n\n            \/\/ Update cursor styles\n            function updateCursorStyles() {\n                const dot = document.getElementById('cursor-dot');\n                const outline = document.getElementById('cursor-outline');\n                \n                \/\/ Update dot styles\n                dot.style.width = settings.dotSize + 'px';\n                dot.style.height = settings.dotSize + 'px';\n                dot.style.backgroundColor = settings.dotColor;\n                dot.style.opacity = settings.dotOpacity;\n                dot.style.borderWidth = settings.dotBorderWidth + 'px';\n                dot.style.borderColor = settings.dotBorderColor;\n                dot.style.borderStyle = settings.dotBorderWidth > 0 ? 'solid' : 'none';\n                dot.style.borderRadius = settings.dotRadius + '%';\n                dot.style.mixBlendMode = settings.blendMode;\n                \n                \/\/ Update outline styles based on type\n                outline.style.width = settings.outlineSize + 'px';\n                outline.style.height = settings.outlineSize + 'px';\n                outline.style.borderRadius = settings.outlineRadius + '%';\n                outline.style.mixBlendMode = settings.blendMode;\n                \n                if (settings.outlineType === 'fill') {\n                    outline.style.backgroundColor = settings.outlineColor;\n                    outline.style.border = 'none';\n                } else {\n                    outline.style.backgroundColor = 'transparent';\n                    outline.style.borderWidth = settings.outlineBorderWidth + 'px';\n                    outline.style.borderColor = settings.outlineColor;\n                    outline.style.borderStyle = 'solid';\n                }\n                \n                \/\/ Update animation\n                outline.style.transition = `all ${settings.animationDelay}s ease-out`;\n                \n                \/\/ Update visibility\n                if (!settings.cursorVisible) {\n                    dot.style.display = 'none';\n                    outline.style.display = 'none';\n                } else {\n                    dot.style.display = 'block';\n                    outline.style.display = 'block';\n                }\n\n                updateGeneratedCode();\n            }\n\n            \/\/ Dot controls\n            document.getElementById('dotSize').addEventListener('input', function(e) {\n                settings.dotSize = parseInt(e.target.value);\n                updateValueDisplay('dotSize', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('dotColor').addEventListener('input', function(e) {\n                settings.dotColor = e.target.value;\n                updateCursorStyles();\n            });\n\n            document.getElementById('dotOpacity').addEventListener('input', function(e) {\n                settings.dotOpacity = parseFloat(e.target.value);\n                updateValueDisplay('dotOpacity', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('dotScale').addEventListener('input', function(e) {\n                settings.dotScale = parseFloat(e.target.value);\n                updateValueDisplay('dotScale', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('dotBorderWidth').addEventListener('input', function(e) {\n                settings.dotBorderWidth = parseInt(e.target.value);\n                updateValueDisplay('dotBorderWidth', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('dotBorderColor').addEventListener('input', function(e) {\n                settings.dotBorderColor = e.target.value;\n                updateCursorStyles();\n            });\n\n            document.getElementById('dotRadius').addEventListener('input', function(e) {\n                settings.dotRadius = parseInt(e.target.value);\n                updateValueDisplay('dotRadius', e.target.value);\n                updateCursorStyles();\n            });\n\n            \/\/ Outline controls\n            document.getElementById('outlineSize').addEventListener('input', function(e) {\n                settings.outlineSize = parseInt(e.target.value);\n                updateValueDisplay('outlineSize', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('outlineColor').addEventListener('input', function(e) {\n                settings.outlineColor = e.target.value;\n                updateCursorStyles();\n            });\n\n            document.getElementById('outlineOpacity').addEventListener('input', function(e) {\n                settings.outlineOpacity = parseFloat(e.target.value);\n                updateValueDisplay('outlineOpacity', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('outlineScale').addEventListener('input', function(e) {\n                settings.outlineScale = parseFloat(e.target.value);\n                updateValueDisplay('outlineScale', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('outlineType').addEventListener('change', function(e) {\n                settings.outlineType = e.target.value;\n                updateCursorStyles();\n            });\n\n            document.getElementById('outlineBorderWidth').addEventListener('input', function(e) {\n                settings.outlineBorderWidth = parseInt(e.target.value);\n                updateValueDisplay('outlineBorderWidth', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('outlineRadius').addEventListener('input', function(e) {\n                settings.outlineRadius = parseInt(e.target.value);\n                updateValueDisplay('outlineRadius', e.target.value);\n                updateCursorStyles();\n            });\n\n            \/\/ Animation controls\n            document.getElementById('animationSpeed').addEventListener('input', function(e) {\n                settings.animationSpeed = parseInt(e.target.value);\n                updateValueDisplay('animationSpeed', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('animationDelay').addEventListener('input', function(e) {\n                settings.animationDelay = parseFloat(e.target.value);\n                updateValueDisplay('animationDelay', e.target.value);\n                updateCursorStyles();\n            });\n\n            document.getElementById('blendMode').addEventListener('change', function(e) {\n                settings.blendMode = e.target.value;\n                updateCursorStyles();\n            });\n\n            document.getElementById('cursorVisible').addEventListener('change', function(e) {\n                settings.cursorVisible = e.target.checked;\n                updateCursorStyles();\n            });\n\n            \/\/ Initial code generation\n            updateGeneratedCode();\n        }\n\n        \/\/ Generate code\n        function updateGeneratedCode() {\n            let outlineStyles;\n            if (settings.outlineType === 'fill') {\n                outlineStyles = `\n    background-color: ${settings.outlineColor};\n    border: none;`;\n            } else {\n                outlineStyles = `\n    background-color: transparent;\n    border: ${settings.outlineBorderWidth}px solid ${settings.outlineColor};`;\n            }\n            \n            const cssCode = `<style>\n* {cursor: none !important}\n\n@media (max-width: 1200px) {\n    .cursor-dot, .cursor-dot-outline {\n        display: none !important;\n    }\n}\n\n.cursor-dot {\n    width: ${settings.dotSize}px;\n    height: ${settings.dotSize}px;\n    background-color: ${settings.dotColor};\n    opacity: ${settings.dotOpacity};\n    border: ${settings.dotBorderWidth}px solid ${settings.dotBorderColor};\n    border-radius: ${settings.dotRadius}%;\n    position: fixed;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    z-index: 9999;\n    mix-blend-mode: ${settings.blendMode};\n    transition: transform 0.1s ease;\n    transform: translate(-50%, -50%);\n}\n\n.cursor-dot-outline {\n    width: ${settings.outlineSize}px;\n    height: ${settings.outlineSize}px;${outlineStyles}\n    border-radius: ${settings.outlineRadius}%;\n    position: fixed;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    z-index: 9998;\n    mix-blend-mode: ${settings.blendMode};\n    transition: all ${settings.animationDelay}s ease-out;\n    transform: translate(-50%, -50%);\n}\n\n.cursor-dot.hover {\n    transform: translate(-50%, -50%) scale(${settings.dotScale});\n}\n\n.cursor-dot-outline.hover {\n    transform: translate(-50%, -50%) scale(${settings.outlineScale});\n}\n<\/style>\n\n<div class=\"cursor-dot\"><\/div>\n<div class=\"cursor-dot-outline\"><\/div>\n\n<script>\nconst cursor = {\n    _x: 0, _y: 0, endX: 0, endY: 0,\n    cursorVisible: true, cursorEnlarged: false,\n    $dot: document.querySelector('.cursor-dot'),\n    $outline: document.querySelector('.cursor-dot-outline'),\n\n    init() {\n        this.setupEventListeners();\n        this.animateDotOutline();\n    },\n\n    setupEventListeners() {\n        const self = this;\n        \n        document.addEventListener('mousemove', function(e) {\n            self.cursorVisible = true;\n            self.toggleCursorVisibility();\n            self.endX = e.clientX;\n            self.endY = e.clientY;\n            self.$dot.style.top = self.endY + 'px';\n            self.$dot.style.left = self.endX + 'px';\n        });\n\n        document.addEventListener('mouseenter', function() {\n            self.cursorVisible = true;\n            self.toggleCursorVisibility();\n        });\n\n        document.addEventListener('mouseleave', function() {\n            self.cursorVisible = false;\n            self.toggleCursorVisibility();\n        });\n\n        document.addEventListener('mousedown', function() {\n            self.cursorEnlarged = true;\n            self.toggleCursorSize();\n        });\n\n        document.addEventListener('mouseup', function() {\n            self.cursorEnlarged = false;\n            self.toggleCursorSize();\n        });\n\n        document.querySelectorAll('a, button, [role=\"button\"]').forEach(el => {\n            el.addEventListener('mouseover', () => {\n                self.cursorEnlarged = true;\n                self.toggleCursorSize();\n            });\n            el.addEventListener('mouseout', () => {\n                self.cursorEnlarged = false;\n                self.toggleCursorSize();\n            });\n        });\n    },\n\n    animateDotOutline() {\n        const self = this;\n        self._x += (self.endX - self._x) \/ ${settings.animationSpeed};\n        self._y += (self.endY - self._y) \/ ${settings.animationSpeed};\n        self.$outline.style.top = self._y + 'px';\n        self.$outline.style.left = self._x + 'px';\n        requestAnimationFrame(this.animateDotOutline.bind(this));\n    },\n\n    toggleCursorSize() {\n        if (this.cursorEnlarged) {\n            this.$dot.classList.add('hover');\n            this.$outline.classList.add('hover');\n        } else {\n            this.$dot.classList.remove('hover');\n            this.$outline.classList.remove('hover');\n        }\n    },\n\n    toggleCursorVisibility() {\n        if (this.cursorVisible) {\n            this.$dot.style.opacity = '${settings.dotOpacity}';\n            this.$outline.style.opacity = '${settings.outlineOpacity}';\n        } else {\n            this.$dot.style.opacity = '0';\n            this.$outline.style.opacity = '0';\n        }\n    }\n};\n\n\/\/ Initialize cursor\ncursor.init();\n<\\\/script>`;\n\n            document.getElementById('generated-code').textContent = cssCode;\n            if (window.Prism) {\n                window.Prism.highlightAll();\n            }\n        }\n\n        \/\/ Copy to clipboard\n        document.getElementById('copy-button').addEventListener('click', function() {\n            const code = document.getElementById('generated-code').textContent;\n            navigator.clipboard.writeText(code).then(() => {\n                const button = this;\n                button.textContent = '\u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043e!';\n                button.classList.add('copied');\n                setTimeout(() => {\n                    button.textContent = '\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c';\n                    button.classList.remove('copied');\n                }, 2000);\n            });\n        });\n\n        \/\/ Initialize everything\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Initialize cursor\n            cursor.init();\n            \n            \/\/ Initialize controls\n            initControls();\n        });\n    <\/script>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center has-small-font-size wp-block-paragraph\">Just customize the design, copy the generated code, and upload it to your website's HEAD.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u041a\u0443\u0440\u0441\u043e\u0440\u0456\u0432 \u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043a\u0443\u0440\u0441\u043e\u0440\u0456\u0432 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454 \u0437\u043c\u0456\u043d\u0438\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u0439 \u0432\u0438\u0433\u043b\u044f\u0434 \u043c\u0438\u0448\u0456 \u043d\u0430 \u0443\u043d\u0456\u043a\u0430\u043b\u044c\u043d\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0441\u044c\u043a\u0438\u0439 \u0435\u043b\u0435\u043c\u0435\u043d\u0442. \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u0442\u0438 \u0440\u043e\u0437\u043c\u0456\u0440, \u043a\u043e\u043b\u0456\u0440, \u043f\u0440\u043e\u0437\u043e\u0440\u0456\u0441\u0442\u044c \u0456 \u0430\u043d\u0456\u043c\u0430\u0446\u0456\u044e, \u0449\u043e\u0431 \u0434\u043e\u0434\u0430\u0442\u0438 \u0432\u0430\u0448\u043e\u043c\u0443 \u0441\u0430\u0439\u0442\u0443 \u0441\u0442\u0438\u043b\u044e \u0442\u0430 \u0441\u0443\u0447\u0430\u0441\u043d\u043e\u0441\u0442\u0456. \u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u041f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0417\u0433\u0435\u043d\u0435\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u043a\u043e\u0434 \u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u041d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0422\u043e\u0447\u043a\u0430 \u0420\u043e\u0437\u043c\u0456\u0440: 8 \u041a\u043e\u043b\u0456\u0440: \u041f\u0440\u043e\u0437\u043e\u0440\u0456\u0441\u0442\u044c: 1 \u041c\u0430\u0441\u0448\u0442\u0430\u0431 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u043d\u0456: 0.7 \u0422\u043e\u0432\u0449\u0438\u043d\u0430 \u0440\u0430\u043c\u043a\u0438: 0 \u041a\u043e\u043b\u0456\u0440 \u0440\u0430\u043c\u043a\u0438: \u0420\u0430\u0434\u0456\u0443\u0441 [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"class_list":["post-893","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","page_structure_type":"type-4","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/pages\/893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/comments?post=893"}],"version-history":[{"count":21,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/pages\/893\/revisions"}],"predecessor-version":[{"id":927,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/pages\/893\/revisions\/927"}],"wp:attachment":[{"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/media?parent=893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}