{"id":351,"date":"2023-11-16T11:15:34","date_gmt":"2023-11-16T11:15:34","guid":{"rendered":"https:\/\/carloszarzalejo.com\/?page_id=351"},"modified":"2023-11-18T21:47:20","modified_gmt":"2023-11-18T21:47:20","slug":"art-e","status":"publish","type":"page","link":"https:\/\/carloszarzalejo.com\/?page_id=351","title":{"rendered":"Art-e"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"351\" class=\"elementor elementor-351\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2f4ae93 e-con-full e-transform e-flex e-con e-parent\" data-id=\"2f4ae93\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;,&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-10,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-core-v316-plus=\"true\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd394e1 elementor-widget elementor-widget-html\" data-id=\"fd394e1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\n<div class=\"custom-container\">\n    <a href=\"https:\/\/carloszarzalejo.com\" class=\"custom-link\">Home<\/a>\n    <a href=\"https:\/\/carloszarzalejo.com\/?page_id=468\" class=\"custom-link\">About<\/a>\n    <a href=\"https:\/\/carloszarzalejo.com\/?page_id=199\" class=\"custom-link\">AI-Edu<\/a>\n    <a href=\"https:\/\/carloszarzalejo.com\/?page_id=351\" class=\"custom-link\">Art-e<\/a>\n    <a href=\"https:\/\/carloszarzalejo.com\/?page_id=194\" class=\"custom-link\">Books<\/a>\n<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0ef1e35 e-con-full e-transform e-flex e-con e-parent\" data-id=\"0ef1e35\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;,&quot;_transform_translateY_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-20,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateX_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_translateY_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-core-v316-plus=\"true\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fba599 elementor-widget elementor-widget-html\" data-id=\"5fba599\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"container\" style=\"position: relative; width: 100%; max-width: 100%; height: auto;\">\n    <img decoding=\"async\" src=\"http:\/\/carloszarzalejo.com\/wp-content\/uploads\/2023\/11\/Carlos-Zarzalejo-Art002.png\" alt=\"Carlos Zarzalejo Art\" style=\"width: 100%; height: auto;\">\n    <div class=\"text-box\">In a realm where digital dragons lurk, a quartet's silence echoes, abstract lines intersect, and luck whispers a number, what single digit reigns?<\/div>\n    <div id=\"box\" style=\"width: 50px; height: 50px; background-color: #08fc04; position: absolute; top: 4%; right: 6%;\"><\/div>\n<\/div>\n\n<style>\n    @keyframes pulse {\n        0%, 100% {\n            box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.9);\n        }\n        50% {\n            box-shadow: 0 0 10px 5px rgba(255, 215, 0, 0.6);\n        }\n    }\n\n    @keyframes dynamicGlow {\n        0%, 100% {\n            background: linear-gradient(45deg, #ffd700, #ffdf00, #ffdd00, #ffdb00, #ffd900, #ffd700, #ffd500);\n        }\n        50% {\n            background: linear-gradient(45deg, #ffd500, #ffd700, #ffd900, #ffdb00, #ffdd00, #ffdf00, #ffd700);\n        }\n    }\n<\/style>\n\n<script>\n    var box = document.getElementById(\"box\");\n    var container = document.querySelector(\".container\");\n    var boxX = container.offsetWidth * 0.94 - 50; \/\/ Posici\u00f3n inicial X (6% desde la derecha)\n    var boxY = container.offsetHeight * 0.04; \/\/ Posici\u00f3n inicial Y (4% desde la parte superior)\n    var isSelected = false; \/\/ Estado de selecci\u00f3n del cuadro\n\n    \/\/ Cambiar el color del cuadro al seleccionarlo\n    box.addEventListener('click', function() {\n        isSelected = !isSelected;\n        if (isSelected) {\n            box.style.animation = 'pulse 1s infinite, dynamicGlow 3s infinite';\n        } else {\n            box.style.background = '#08fc04';\n            box.style.animation = 'none';\n        }\n    });\n\n    document.addEventListener('keydown', function(e) {\n        if (!isSelected) return; \/\/ Solo mover si est\u00e1 seleccionado\n\n        var containerRect = container.getBoundingClientRect();\n\n        switch (e.key) {\n            case 'W':\n            case 'w':\n            case 'ArrowUp':\n                e.preventDefault();\n                if (boxY > 0) boxY -= 10;\n                break;\n            case 'S':\n            case 's':\n            case 'ArrowDown':\n                e.preventDefault();\n                if (boxY < containerRect.height - box.offsetHeight) boxY += 10;\n                break;\n            case 'A':\n            case 'a':\n            case 'ArrowLeft':\n                e.preventDefault();\n                if (boxX > 0) boxX -= 10;\n                break;\n            case 'D':\n            case 'd':\n            case 'ArrowRight':\n                e.preventDefault();\n                if (boxX < containerRect.width - box.offsetWidth) boxX += 10;\n                break;\n        }\n\n        \/\/ Actualizar la posici\u00f3n del cuadro\n        box.style.left = boxX + 'px';\n        box.style.top = boxY + 'px';\n    });\n\n    \/\/ Ajuste de posici\u00f3n para dispositivos m\u00f3viles\n    window.addEventListener('resize', function() {\n        if (window.innerWidth <= 768) {\n            boxY = container.offsetHeight * 0.020; \/\/ Mover 0.5% hacia arriba\n            box.style.top = boxY + 'px';\n        }\n    });\n\n    \/\/ Ajuste inicial para dispositivos m\u00f3viles\n    if (window.innerWidth <= 768) {\n        boxY = container.offsetHeight * 0.020; \/\/ Mover 0.5% hacia arriba\n        box.style.top = boxY + 'px';\n    }\n\n    \/\/ Funci\u00f3n para mover el cuadrado a la posici\u00f3n tocada en dispositivos m\u00f3viles\n    function moveToTouchPosition(event) {\n        if (window.innerWidth <= 768) { \/\/ Solo para dispositivos m\u00f3viles\n            var touch = event.touches[0] || event.changedTouches[0];\n            var touchX = touch.clientX - container.getBoundingClientRect().left - box.offsetWidth \/ 2;\n            var touchY = touch.clientY - container.getBoundingClientRect().top - box.offsetHeight \/ 2;\n\n            \/\/ Asegurarse de que el cuadrado no se salga del contenedor\n            if (touchX < 0) touchX = 0;\n            if (touchX > container.offsetWidth - box.offsetWidth) touchX = container.offsetWidth - box.offsetWidth;\n            if (touchY < 0) touchY = 0;\n            if (touchY > container.offsetHeight - box.offsetHeight) touchY = container.offsetHeight - box.offsetHeight;\n\n            \/\/ Animar el movimiento del cuadrado\n            animateBoxMovement(touchX, touchY);\n        }\n    }\n\n  function animateBoxMovement(targetX, targetY) {\n        var speed = 100; \/\/ Ajusta este valor para controlar la velocidad de la animaci\u00f3n\n        var step = 0;\n\n        var interval = setInterval(function() {\n            step++;\n            var progress = step \/ speed;\n\n            \/\/ Calcular la posici\u00f3n actual\n            boxX = easeInOut(progress) * (targetX - boxX) + boxX;\n            boxY = easeInOut(progress) * (targetY - boxY) + boxY;\n\n            box.style.left = boxX + 'px';\n            box.style.top = boxY + 'px';\n\n            \/\/ Detener la animaci\u00f3n cuando el cuadrado alcance la posici\u00f3n objetivo\n            if (progress >= 1) {\n                clearInterval(interval);\n            }\n        }, 20);\n    }\n\n    \/\/ Funci\u00f3n de suavizado para la animaci\u00f3n\n    function easeInOut(t) {\n        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n    }\n\n\n    \/\/ Agregar el evento de touch al contenedor\n    container.addEventListener('touchstart', moveToTouchPosition);\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home About AI-Edu Art-e Books In a realm where digital dragons lurk, a quartet&#8217;s silence echoes, abstract lines intersect, and luck whispers a number, what single digit reigns?<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"aioseo_notices":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"carloszarzalejo.com","author_link":"https:\/\/carloszarzalejo.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Home About AI-Edu Art-e Books In a realm where digital dragons lurk, a quartet&#8217;s silence echoes, abstract lines intersect, and luck whispers a number, what single digit reigns?","_links":{"self":[{"href":"https:\/\/carloszarzalejo.com\/index.php?rest_route=\/wp\/v2\/pages\/351"}],"collection":[{"href":"https:\/\/carloszarzalejo.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carloszarzalejo.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carloszarzalejo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carloszarzalejo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=351"}],"version-history":[{"count":229,"href":"https:\/\/carloszarzalejo.com\/index.php?rest_route=\/wp\/v2\/pages\/351\/revisions"}],"predecessor-version":[{"id":1117,"href":"https:\/\/carloszarzalejo.com\/index.php?rest_route=\/wp\/v2\/pages\/351\/revisions\/1117"}],"wp:attachment":[{"href":"https:\/\/carloszarzalejo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}