{"id":263,"date":"2025-12-15T21:27:25","date_gmt":"2025-12-15T21:27:25","guid":{"rendered":"https:\/\/arusystems.com\/?page_id=263"},"modified":"2025-12-15T21:27:25","modified_gmt":"2025-12-15T21:27:25","slug":"wordpress-plugin-mug-editor","status":"publish","type":"page","link":"https:\/\/arusystems.com\/index.php\/wordpress-plugin-mug-editor\/","title":{"rendered":"WordPress Plugin &#8211; Mug editor"},"content":{"rendered":"\r\n<div class=\"mte-wrapper\">\r\n    <h2 class=\"mte-title\">Editor de Plantilla para Mugs<\/h2>\r\n\r\n    <!-- Pesta\u00f1as -->\r\n    <div class=\"mte-tabs\">\r\n        <button type=\"button\" class=\"mte-tab-btn mte-tab-active\" data-mte-tab=\"images\">\r\n            1. Im\u00e1genes\r\n        <\/button>\r\n        <button type=\"button\" class=\"mte-tab-btn\" data-mte-tab=\"text\">\r\n            2. Texto\r\n        <\/button>\r\n        <button type=\"button\" class=\"mte-tab-btn\" data-mte-tab=\"send\">\r\n            3. Aplicar y enviar\r\n        <\/button>\r\n    <\/div>\r\n\r\n    <!-- Contenido de pesta\u00f1as -->\r\n    <div class=\"mte-tabs-content\">\r\n\r\n        <!-- TAB 1: Im\u00e1genes -->\r\n        <div class=\"mte-tab-panel mte-tab-panel-active\" data-mte-tab-panel=\"images\">\r\n            <div class=\"mte-controls\">\r\n                <label class=\"mte-label\">\r\n                    Selecciona una o varias im\u00e1genes:\r\n                    <input type=\"file\" id=\"mte-image-input\" multiple accept=\"image\/*\">\r\n                <\/label>\r\n\r\n                <button type=\"button\" id=\"mte-upload-btn\" class=\"mte-btn\">\r\n                    Subir im\u00e1genes\r\n                <\/button>\r\n\r\n                <!-- seleccionar desde la galer\u00eda interna -->\r\n                <button type=\"button\" id=\"mte-plugin-gallery-btn\" class=\"mte-btn\">\r\n                    Galer\u00eda del plugin\r\n                <\/button>\r\n\r\n                <label class=\"mte-label\">\r\n                    Zoom:\r\n                    <input type=\"range\" id=\"mte-zoom-range\" min=\"0.2\" max=\"3\" step=\"0.05\" value=\"1\">\r\n                <\/label>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- TAB 2: Texto -->\r\n        <div class=\"mte-tab-panel\" data-mte-tab-panel=\"text\">\r\n            <div class=\"mte-controls\">\r\n                <p class=\"mte-help\">\r\n                    Usa este paso para agregar textos sobre la plantilla actual.\r\n                <\/p>\r\n\r\n                <label class=\"mte-label\">\r\n                    Fuente:\r\n                    <select id=\"mte-font-family\">\r\n                        <option value=\"Arial\">Arial<\/option>\r\n                        <option value=\"Georgia\">Georgia<\/option>\r\n                        <option value=\"Times New Roman\">Times New Roman<\/option>\r\n                        <option value=\"Courier New\">Courier New<\/option>\r\n                        <option value=\"Verdana\">Verdana<\/option>\r\n                        <option value=\"Trebuchet MS\">Trebuchet MS<\/option>\r\n                        <option value=\"Impact\">Impact<\/option>\r\n                    <\/select>\r\n                <\/label>\r\n\r\n                <label class=\"mte-label\">\r\n                    Tama\u00f1o:\r\n                    <input type=\"number\" id=\"mte-font-size\" value=\"24\" min=\"8\" max=\"120\" step=\"1\" style=\"width:80px;\">\r\n                <\/label>\r\n\r\n                <button type=\"button\" id=\"mte-add-text-btn\" class=\"mte-btn mte-btn-secondary\">\r\n                    Agregar texto centrado\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- TAB 3: Aplicar y enviar -->\r\n        <div class=\"mte-tab-panel\" data-mte-tab-panel=\"send\">\r\n            <div class=\"mte-controls\">\r\n                <label class=\"mte-label\">\r\n                    Nombre del creador:\r\n                    <input type=\"text\" id=\"mte-creator-name\" placeholder=\"Tu nombre\">\r\n                <\/label>\r\n\r\n                <label class=\"mte-label\">\r\n                    Correo del creador:\r\n                    <input type=\"email\" id=\"mte-creator-email\" placeholder=\"tucorreo@ejemplo.com\">\r\n                <\/label>\r\n\r\n                <button type=\"button\" id=\"mte-apply-3d-btn\" class=\"mte-btn mte-btn-secondary\">\r\n                    Aplicar plantilla al 3D\r\n                <\/button>\r\n                \r\n                <button type=\"button\" id=\"mte-send-email-btn\" class=\"mte-btn\">\r\n                    Enviar por correo\r\n                <\/button>\r\n\r\n                <p class=\"mte-help\">\r\n                    Primero aplica la plantilla al 3D para revisar el resultado, luego env\u00eda por correo.\r\n                <\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Layout canvas 2D + 3D (siempre visible) -->\r\n    <div class=\"mte-layout\">\r\n        <div class=\"mte-canvas2d-container\">\r\n            <h3 class=\"mte-subtitle\">Editor 2D (plantilla)<\/h3>\r\n            <canvas id=\"mte-canvas2d\"><\/canvas>\r\n            <p class=\"mte-help\">\r\n                - Arrastra las im\u00e1genes con el rat\u00f3n para moverlas.<br>\r\n                - Usa la rueda del mouse o el control de zoom para cambiar el tama\u00f1o de la imagen seleccionada.<br>\r\n                - A\u00f1ade textos y arr\u00e1stralos para posicionarlos; elige la fuente y tama\u00f1o.\r\n            <\/p>\r\n            <button type=\"button\" id=\"mte-clear-btn\" class=\"mte-btn mte-btn-secondary\">\r\n                Borrar plantilla\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <div class=\"mte-canvas3d-container\">\r\n            <h3 class=\"mte-subtitle\">Vista 3D del mug<\/h3>\r\n            <div id=\"mte-3d-container\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Modal de galer\u00eda -->\r\n<div id=\"mte-gallery-modal\" class=\"mte-modal\" hidden>\r\n    <div class=\"mte-modal-backdrop\"><\/div>\r\n    <div class=\"mte-modal-content\">\r\n        <div class=\"mte-modal-header\">\r\n            <h3>Galer\u00eda del plugin<\/h3>\r\n            <button type=\"button\" id=\"mte-gallery-close\" class=\"mte-btn mte-btn-secondary\">Cerrar<\/button>\r\n        <\/div>\r\n        <div id=\"mte-gallery-grid\" class=\"mte-gallery-grid\">\r\n            <p class=\"mte-help\">Cargando im\u00e1genes...<\/p>\r\n        <\/div>\r\n    <\/div>\r\n    <\/div>\r\n\r\n<!-- JS simple para pesta\u00f1as -->\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    const tabButtons = document.querySelectorAll('.mte-tab-btn');\r\n    const tabPanels  = document.querySelectorAll('.mte-tab-panel');\r\n\r\n    tabButtons.forEach(function (btn) {\r\n        btn.addEventListener('click', function () {\r\n            const target = btn.getAttribute('data-mte-tab');\r\n            if (!target) return;\r\n\r\n            \/\/ Activar bot\u00f3n\r\n            tabButtons.forEach(b => b.classList.remove('mte-tab-active'));\r\n            btn.classList.add('mte-tab-active');\r\n\r\n            \/\/ Mostrar panel correspondiente\r\n            tabPanels.forEach(panel => {\r\n                if (panel.getAttribute('data-mte-tab-panel') === target) {\r\n                    panel.classList.add('mte-tab-panel-active');\r\n                } else {\r\n                    panel.classList.remove('mte-tab-panel-active');\r\n                }\r\n            });\r\n        });\r\n    });\r\n});\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","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":"set","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-263","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arusystems.com\/index.php\/wp-json\/wp\/v2\/pages\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arusystems.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arusystems.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arusystems.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arusystems.com\/index.php\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":2,"href":"https:\/\/arusystems.com\/index.php\/wp-json\/wp\/v2\/pages\/263\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/arusystems.com\/index.php\/wp-json\/wp\/v2\/pages\/263\/revisions\/276"}],"wp:attachment":[{"href":"https:\/\/arusystems.com\/index.php\/wp-json\/wp\/v2\/media?parent=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}