{"id":315,"date":"2026-08-19T05:33:24","date_gmt":"2026-08-19T05:33:24","guid":{"rendered":"https:\/\/plennox.com\/inicio\/?page_id=315"},"modified":"2026-08-19T05:33:27","modified_gmt":"2026-08-19T05:33:27","slug":"mensajes-%e2%9d%a4%ef%b8%8f","status":"publish","type":"page","link":"https:\/\/plennox.com\/inicio\/mensajes-%e2%9d%a4%ef%b8%8f\/","title":{"rendered":"Mensajes \u2764\ufe0f"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"315\" class=\"elementor elementor-315\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0db7caa e-flex e-con-boxed e-con e-parent\" data-id=\"0db7caa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-30aeb9c elementor-widget elementor-widget-shortcode\" data-id=\"30aeb9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\r\n<div id=\"html-amor-app\">\r\n\r\n    <div class=\"amor-contenedor\">\r\n\r\n        <div class=\"amor-titulo\">\r\n\r\n            <div class=\"amor-emoji\">\r\n                \ud83d\udc96\r\n            <\/div>\r\n\r\n            <h2>\r\n                Crea tu p\u00e1gina de amor\r\n            <\/h2>\r\n\r\n            <p>\r\n                Personaliza tu mensaje, elige un dise\u00f1o\r\n                y descarga tu propia p\u00e1gina rom\u00e1ntica.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- DISE\u00d1OS -->\r\n\r\n        <div class=\"amor-disenos\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"amor-diseno activo\"\r\n                data-diseno=\"carta\"\r\n            >\r\n                \ud83d\udc8c Carta\r\n                <span>\r\n                    Elegante y rom\u00e1ntica\r\n                <\/span>\r\n            <\/button>\r\n\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"amor-diseno\"\r\n                data-diseno=\"corazones\"\r\n            >\r\n                \u2764\ufe0f Corazones\r\n                <span>\r\n                    Corazones flotantes\r\n                <\/span>\r\n            <\/button>\r\n\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"amor-diseno\"\r\n                data-diseno=\"rosa\"\r\n            >\r\n                \ud83c\udf39 Rosa\r\n                <span>\r\n                    Estilo rom\u00e1ntico\r\n                <\/span>\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- FORMULARIO -->\r\n\r\n        <div class=\"amor-formulario\">\r\n\r\n            <label for=\"amor_nombre\">\r\n                \ud83d\udc95 Nombre\r\n            <\/label>\r\n\r\n            <input\r\n                type=\"text\"\r\n                id=\"amor_nombre\"\r\n                maxlength=\"80\"\r\n                placeholder=\"Ej: Mar\u00eda\"\r\n            >\r\n\r\n\r\n            <label for=\"amor_mensaje\">\r\n                \ud83d\udc8c Mensaje\r\n            <\/label>\r\n\r\n            <textarea\r\n                id=\"amor_mensaje\"\r\n                maxlength=\"2000\"\r\n                placeholder=\"Escribe aqu\u00ed tu mensaje de amor...\"\r\n            ><\/textarea>\r\n\r\n\r\n            <div class=\"amor-contador\">\r\n                M\u00e1ximo 2000 caracteres\r\n            <\/div>\r\n\r\n\r\n            <div class=\"amor-botones\">\r\n\r\n                <button\r\n                    type=\"button\"\r\n                    id=\"amor_preview\"\r\n                    class=\"amor-btn amor-btn-preview\"\r\n                >\r\n                    \ud83d\udc40 Previsualizar\r\n                <\/button>\r\n\r\n\r\n                <button\r\n                    type=\"button\"\r\n                    id=\"amor_download\"\r\n                    class=\"amor-btn amor-btn-download\"\r\n                >\r\n                    \u2b07\ufe0f Descargar HTML\r\n                <\/button>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- RESULTADO -->\r\n\r\n        <div id=\"amor_resultado\"><\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n<style>\r\n\r\n#html-amor-app {\r\n    width: 100%;\r\n    max-width: 950px;\r\n    margin: 30px auto;\r\n    padding: 15px;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n#html-amor-app * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.amor-contenedor {\r\n    padding: 35px;\r\n    border-radius: 30px;\r\n    background: linear-gradient(\r\n        135deg,\r\n        #fff5f8,\r\n        #ffe7ef\r\n    );\r\n    border: 1px solid #ffd0df;\r\n    box-shadow: 0 20px 60px rgba(196,43,96,.16);\r\n}\r\n\r\n.amor-titulo {\r\n    text-align: center;\r\n    margin-bottom: 28px;\r\n}\r\n\r\n.amor-emoji {\r\n    font-size: 55px;\r\n    animation: amorLatido 1.5s infinite;\r\n}\r\n\r\n.amor-titulo h2 {\r\n    margin: 10px 0;\r\n    color: #c2185b;\r\n    font-size: 32px;\r\n}\r\n\r\n.amor-titulo p {\r\n    margin: 0 auto;\r\n    max-width: 650px;\r\n    color: #744052;\r\n    line-height: 1.6;\r\n}\r\n\r\n\r\n\/* =========================\r\n   DISE\u00d1OS\r\n   ========================= *\/\r\n\r\n.amor-disenos {\r\n    display: flex;\r\n    gap: 12px;\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.amor-diseno {\r\n    flex: 1;\r\n    padding: 18px 12px;\r\n    border: 2px solid #f2bfd0;\r\n    border-radius: 16px;\r\n    background: #fff;\r\n    color: #7a2945;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    transition: .25s;\r\n}\r\n\r\n.amor-diseno span {\r\n    display: block;\r\n    margin-top: 6px;\r\n    font-size: 12px;\r\n    font-weight: normal;\r\n}\r\n\r\n.amor-diseno:hover {\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.amor-diseno.activo {\r\n    color: #fff;\r\n    background: linear-gradient(\r\n        135deg,\r\n        #d6336c,\r\n        #b51754\r\n    );\r\n    border-color: #d6336c;\r\n}\r\n\r\n\r\n\/* =========================\r\n   FORMULARIO\r\n   ========================= *\/\r\n\r\n.amor-formulario {\r\n    padding: 25px;\r\n    border-radius: 20px;\r\n    background: rgba(255,255,255,.85);\r\n    border: 1px solid #f5c6d5;\r\n}\r\n\r\n.amor-formulario label {\r\n    display: block;\r\n    margin: 15px 0 8px;\r\n    color: #7a2945;\r\n    font-weight: bold;\r\n}\r\n\r\n.amor-formulario input,\r\n.amor-formulario textarea {\r\n    display: block;\r\n    width: 100%;\r\n    padding: 14px 16px;\r\n    border: 2px solid #f2bfd0;\r\n    border-radius: 14px;\r\n    background: #fff;\r\n    color: #542435;\r\n    font-size: 16px;\r\n    font-family: inherit;\r\n    outline: none;\r\n}\r\n\r\n.amor-formulario input:focus,\r\n.amor-formulario textarea:focus {\r\n    border-color: #d6336c;\r\n    box-shadow: 0 0 0 4px rgba(214,51,108,.10);\r\n}\r\n\r\n.amor-formulario textarea {\r\n    min-height: 140px;\r\n    resize: vertical;\r\n}\r\n\r\n.amor-contador {\r\n    margin-top: 6px;\r\n    color: #9b6577;\r\n    font-size: 12px;\r\n    text-align: right;\r\n}\r\n\r\n\r\n\/* =========================\r\n   BOTONES\r\n   ========================= *\/\r\n\r\n.amor-botones {\r\n    display: flex;\r\n    gap: 12px;\r\n    margin-top: 22px;\r\n}\r\n\r\n.amor-btn {\r\n    flex: 1;\r\n    padding: 15px 20px;\r\n    border-radius: 14px;\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    font-family: inherit;\r\n    cursor: pointer;\r\n    transition: .25s;\r\n}\r\n\r\n.amor-btn:hover {\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.amor-btn-preview {\r\n    color: #c2185b;\r\n    background: #fff;\r\n    border: 2px solid #d6336c;\r\n}\r\n\r\n.amor-btn-download {\r\n    color: #fff;\r\n    background: linear-gradient(\r\n        135deg,\r\n        #d6336c,\r\n        #b51754\r\n    );\r\n    border: 0;\r\n}\r\n\r\n\r\n\/* =========================\r\n   CARTA\r\n   ========================= *\/\r\n\r\n.amor-carta {\r\n    position: relative;\r\n    overflow: hidden;\r\n    min-height: 400px;\r\n    margin-top: 30px;\r\n    padding: 55px 30px;\r\n    border-radius: 25px;\r\n    text-align: center;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 10% 20%,\r\n            rgba(255,255,255,.9) 0 6px,\r\n            transparent 7px\r\n        ),\r\n        radial-gradient(\r\n            circle at 90% 75%,\r\n            rgba(255,255,255,.9) 0 7px,\r\n            transparent 8px\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #fffafd,\r\n            #ffe1ec\r\n        );\r\n\r\n    border: 3px solid #f4bfd0;\r\n\r\n    box-shadow:\r\n        0 15px 45px rgba(180,30,80,.12);\r\n\r\n    animation: amorAparecer .5s ease;\r\n}\r\n\r\n.amor-carta h1 {\r\n    color: #c2185b;\r\n    font-size: 45px;\r\n    margin: 15px 0;\r\n}\r\n\r\n.amor-carta h2 {\r\n    color: #8e294b;\r\n}\r\n\r\n.amor-carta p {\r\n    max-width: 650px;\r\n    margin: 25px auto;\r\n    color: #5c2638;\r\n    font-size: 19px;\r\n    line-height: 1.8;\r\n    white-space: pre-wrap;\r\n}\r\n\r\n.amor-corazones {\r\n    font-size: 32px;\r\n    animation: amorLatido 1.4s infinite;\r\n}\r\n\r\n.amor-linea {\r\n    width: 90px;\r\n    height: 3px;\r\n    margin: 12px auto 20px;\r\n    border-radius: 5px;\r\n    background: #e91e63;\r\n}\r\n\r\n.amor-firma {\r\n    margin-top: 30px;\r\n    color: #c2185b;\r\n    font-weight: bold;\r\n}\r\n\r\n\r\n\/* =========================\r\n   CORAZONES\r\n   ========================= *\/\r\n\r\n.diseno-corazones {\r\n    position: relative;\r\n    overflow: hidden;\r\n    min-height: 430px;\r\n    margin-top: 30px;\r\n    padding: 30px 20px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 25px;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at center,\r\n            #ff477e,\r\n            #8d1745\r\n        );\r\n}\r\n\r\n.corazones-centro {\r\n    position: relative;\r\n    z-index: 5;\r\n    width: 100%;\r\n    max-width: 650px;\r\n    padding: 40px 25px;\r\n    border-radius: 25px;\r\n\r\n    text-align: center;\r\n    color: #fff;\r\n\r\n    background: rgba(255,255,255,.12);\r\n    border: 1px solid rgba(255,255,255,.3);\r\n\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n.corazones-centro h1 {\r\n    font-size: 48px;\r\n    margin: 15px 0;\r\n}\r\n\r\n.corazones-centro h2 {\r\n    color: #ffe5ef;\r\n}\r\n\r\n.corazones-centro p {\r\n    color: #fff;\r\n    font-size: 19px;\r\n    line-height: 1.8;\r\n    white-space: pre-wrap;\r\n}\r\n\r\n.corazon-flotante {\r\n    position: absolute;\r\n    bottom: -60px;\r\n    z-index: 2;\r\n    animation: subirCorazon 8s linear infinite;\r\n}\r\n\r\n\r\n\/* =========================\r\n   ROSA\r\n   ========================= *\/\r\n\r\n.diseno-rosa {\r\n    position: relative;\r\n    overflow: hidden;\r\n    min-height: 430px;\r\n    margin-top: 30px;\r\n    padding: 30px 20px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 25px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #3b0718,\r\n            #7b1238,\r\n            #21030e\r\n        );\r\n}\r\n\r\n.rosa-centro {\r\n    position: relative;\r\n    z-index: 5;\r\n    width: 100%;\r\n    max-width: 650px;\r\n    padding: 40px 25px;\r\n\r\n    text-align: center;\r\n    color: white;\r\n\r\n    background: rgba(0,0,0,.22);\r\n    border: 1px solid rgba(255,255,255,.25);\r\n    border-radius: 25px;\r\n\r\n    backdrop-filter: blur(8px);\r\n}\r\n\r\n.rosa-icono {\r\n    font-size: 70px;\r\n    animation: amorLatido 2s infinite;\r\n}\r\n\r\n.rosa-centro h1 {\r\n    color: #ffd5df;\r\n    font-size: 46px;\r\n    margin: 15px 0;\r\n}\r\n\r\n.rosa-centro h2 {\r\n    color: #fff0f4;\r\n}\r\n\r\n.rosa-centro p {\r\n    color: #ffe8ee;\r\n    font-size: 19px;\r\n    line-height: 1.8;\r\n    white-space: pre-wrap;\r\n}\r\n\r\n.rosa-firma {\r\n    margin-top: 30px;\r\n    color: #ffb6c8;\r\n    font-weight: bold;\r\n}\r\n\r\n.rosa-petalo {\r\n    position: absolute;\r\n    top: -50px;\r\n    z-index: 2;\r\n    animation: caerRosa 9s linear infinite;\r\n}\r\n\r\n\r\n\/* =========================\r\n   ANIMACIONES\r\n   ========================= *\/\r\n\r\n@keyframes amorLatido {\r\n\r\n    0%,100% {\r\n        transform: scale(1);\r\n    }\r\n\r\n    50% {\r\n        transform: scale(1.12);\r\n    }\r\n\r\n}\r\n\r\n@keyframes amorAparecer {\r\n\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(15px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n}\r\n\r\n@keyframes subirCorazon {\r\n\r\n    0% {\r\n        transform:\r\n            translateY(0)\r\n            rotate(0deg);\r\n        opacity: 0;\r\n    }\r\n\r\n    10% {\r\n        opacity: .7;\r\n    }\r\n\r\n    90% {\r\n        opacity: .7;\r\n    }\r\n\r\n    100% {\r\n        transform:\r\n            translateY(-600px)\r\n            rotate(360deg);\r\n        opacity: 0;\r\n    }\r\n\r\n}\r\n\r\n@keyframes caerRosa {\r\n\r\n    0% {\r\n        transform:\r\n            translateY(-50px)\r\n            rotate(0deg);\r\n        opacity: 0;\r\n    }\r\n\r\n    10% {\r\n        opacity: .7;\r\n    }\r\n\r\n    90% {\r\n        opacity: .7;\r\n    }\r\n\r\n    100% {\r\n        transform:\r\n            translateY(600px)\r\n            rotate(360deg);\r\n        opacity: 0;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n   M\u00d3VIL\r\n   ========================= *\/\r\n\r\n@media (max-width: 650px) {\r\n\r\n    #html-amor-app {\r\n        padding: 5px;\r\n    }\r\n\r\n    .amor-contenedor {\r\n        padding: 20px 15px;\r\n        border-radius: 20px;\r\n    }\r\n\r\n    .amor-titulo h2 {\r\n        font-size: 25px;\r\n    }\r\n\r\n    .amor-disenos {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .amor-botones {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .amor-btn {\r\n        width: 100%;\r\n    }\r\n\r\n    .amor-carta h1 {\r\n        font-size: 34px;\r\n    }\r\n\r\n    .amor-carta p {\r\n        font-size: 17px;\r\n    }\r\n\r\n    .corazones-centro h1,\r\n    .rosa-centro h1 {\r\n        font-size: 35px;\r\n    }\r\n\r\n    .corazones-centro p,\r\n    .rosa-centro p {\r\n        font-size: 17px;\r\n    }\r\n\r\n    .rosa-icono {\r\n        font-size: 55px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n<script>\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n    const app =\r\n        document.getElementById(\"html-amor-app\");\r\n\r\n    if (!app) {\r\n        return;\r\n    }\r\n\r\n\r\n    const nombre =\r\n        document.getElementById(\"amor_nombre\");\r\n\r\n    const mensaje =\r\n        document.getElementById(\"amor_mensaje\");\r\n\r\n    const resultado =\r\n        document.getElementById(\"amor_resultado\");\r\n\r\n    const botones =\r\n        app.querySelectorAll(\".amor-diseno\");\r\n\r\n    const botonPreview =\r\n        document.getElementById(\"amor_preview\");\r\n\r\n    const botonDownload =\r\n        document.getElementById(\"amor_download\");\r\n\r\n\r\n    let disenoActual = \"carta\";\r\n\r\n\r\n    \/* =========================\r\n       SEGURIDAD\r\n       ========================= *\/\r\n\r\n    function escapeHtml(text) {\r\n\r\n        const div =\r\n            document.createElement(\"div\");\r\n\r\n        div.textContent = text;\r\n\r\n        return div.innerHTML;\r\n    }\r\n\r\n\r\n    \/* =========================\r\n       OBTENER DATOS\r\n       ========================= *\/\r\n\r\n    function obtenerNombre() {\r\n\r\n        return nombre.value.trim() ||\r\n            \"Tu persona especial\";\r\n    }\r\n\r\n\r\n    function obtenerMensaje() {\r\n\r\n        return mensaje.value.trim() ||\r\n            \"Aqu\u00ed aparecer\u00e1 tu mensaje de amor...\";\r\n    }\r\n\r\n\r\n    \/* =========================\r\n       CAMBIAR DISE\u00d1O\r\n       ========================= *\/\r\n\r\n    botones.forEach(function (boton) {\r\n\r\n        boton.addEventListener(\r\n            \"click\",\r\n            function () {\r\n\r\n                botones.forEach(\r\n                    function (item) {\r\n\r\n                        item.classList.remove(\r\n                            \"activo\"\r\n                        );\r\n\r\n                    }\r\n                );\r\n\r\n\r\n                boton.classList.add(\r\n                    \"activo\"\r\n                );\r\n\r\n\r\n                disenoActual =\r\n                    boton.dataset.diseno;\r\n\r\n\r\n                mostrarPreview();\r\n\r\n            }\r\n        );\r\n\r\n    });\r\n\r\n\r\n    \/* =========================\r\n       PREVISUALIZAR\r\n       ========================= *\/\r\n\r\n    function mostrarPreview() {\r\n\r\n        const nombreActual =\r\n            escapeHtml(\r\n                obtenerNombre()\r\n            );\r\n\r\n        const mensajeActual =\r\n            escapeHtml(\r\n                obtenerMensaje()\r\n            );\r\n\r\n\r\n        \/*\r\n         * CARTA\r\n         *\/\r\n\r\n        if (disenoActual === \"carta\") {\r\n\r\n            resultado.innerHTML = `\r\n\r\n                <div class=\"amor-carta\">\r\n\r\n                    <div class=\"amor-corazones\">\r\n                        \u2764\ufe0f \ud83d\udc95 \u2764\ufe0f\r\n                    <\/div>\r\n\r\n                    <h1>\r\n                        Para ti\r\n                    <\/h1>\r\n\r\n                    <div class=\"amor-linea\"><\/div>\r\n\r\n                    <h2>\r\n                        ${nombreActual}\r\n                    <\/h2>\r\n\r\n                    <p>\r\n                        ${mensajeActual}\r\n                    <\/p>\r\n\r\n                    <div class=\"amor-firma\">\r\n                        Con todo mi amor \u2764\ufe0f\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            `;\r\n\r\n            return;\r\n        }\r\n\r\n\r\n        \/*\r\n         * CORAZONES\r\n         *\/\r\n\r\n        if (disenoActual === \"corazones\") {\r\n\r\n            resultado.innerHTML = `\r\n\r\n                <div class=\"diseno-corazones\">\r\n\r\n                    <span\r\n                        class=\"corazon-flotante\"\r\n                        style=\"\r\n                            left:5%;\r\n                            font-size:25px;\r\n                            animation-delay:0s;\r\n                        \"\r\n                    >\r\n                        \u2764\ufe0f\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"corazon-flotante\"\r\n                        style=\"\r\n                            left:20%;\r\n                            font-size:40px;\r\n                            animation-delay:2s;\r\n                        \"\r\n                    >\r\n                        \ud83d\udc95\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"corazon-flotante\"\r\n                        style=\"\r\n                            left:40%;\r\n                            font-size:25px;\r\n                            animation-delay:4s;\r\n                        \"\r\n                    >\r\n                        \u2764\ufe0f\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"corazon-flotante\"\r\n                        style=\"\r\n                            left:60%;\r\n                            font-size:45px;\r\n                            animation-delay:1s;\r\n                        \"\r\n                    >\r\n                        \ud83d\udc97\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"corazon-flotante\"\r\n                        style=\"\r\n                            left:80%;\r\n                            font-size:30px;\r\n                            animation-delay:3s;\r\n                        \"\r\n                    >\r\n                        \u2764\ufe0f\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"corazon-flotante\"\r\n                        style=\"\r\n                            left:92%;\r\n                            font-size:25px;\r\n                            animation-delay:5s;\r\n                        \"\r\n                    >\r\n                        \ud83d\udc95\r\n                    <\/span>\r\n\r\n\r\n                    <div class=\"corazones-centro\">\r\n\r\n                        <div style=\"font-size:40px;\">\r\n                            \u2764\ufe0f\r\n                        <\/div>\r\n\r\n                        <h1>\r\n                            Te Amo\r\n                        <\/h1>\r\n\r\n                        <div\r\n                            class=\"amor-linea\"\r\n                            style=\"background:white;\"\r\n                        ><\/div>\r\n\r\n                        <h2>\r\n                            ${nombreActual}\r\n                        <\/h2>\r\n\r\n                        <p>\r\n                            ${mensajeActual}\r\n                        <\/p>\r\n\r\n                        <div>\r\n                            Con todo mi coraz\u00f3n \u2764\ufe0f\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            `;\r\n\r\n            return;\r\n        }\r\n\r\n\r\n        \/*\r\n         * ROSA\r\n         *\/\r\n\r\n        if (disenoActual === \"rosa\") {\r\n\r\n            resultado.innerHTML = `\r\n\r\n                <div class=\"diseno-rosa\">\r\n\r\n                    <span\r\n                        class=\"rosa-petalo\"\r\n                        style=\"\r\n                            left:5%;\r\n                            animation-delay:0s;\r\n                        \"\r\n                    >\r\n                        \ud83c\udf39\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"rosa-petalo\"\r\n                        style=\"\r\n                            left:20%;\r\n                            animation-delay:2s;\r\n                        \"\r\n                    >\r\n                        \ud83c\udf39\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"rosa-petalo\"\r\n                        style=\"\r\n                            left:40%;\r\n                            animation-delay:4s;\r\n                        \"\r\n                    >\r\n                        \ud83c\udf38\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"rosa-petalo\"\r\n                        style=\"\r\n                            left:60%;\r\n                            animation-delay:1s;\r\n                        \"\r\n                    >\r\n                        \ud83c\udf39\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"rosa-petalo\"\r\n                        style=\"\r\n                            left:80%;\r\n                            animation-delay:3s;\r\n                        \"\r\n                    >\r\n                        \ud83c\udf39\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"rosa-petalo\"\r\n                        style=\"\r\n                            left:92%;\r\n                            animation-delay:5s;\r\n                        \"\r\n                    >\r\n                        \ud83c\udf38\r\n                    <\/span>\r\n\r\n\r\n                    <div class=\"rosa-centro\">\r\n\r\n                        <div class=\"rosa-icono\">\r\n                            \ud83c\udf39\r\n                        <\/div>\r\n\r\n                        <h1>\r\n                            Para ti\r\n                        <\/h1>\r\n\r\n                        <div\r\n                            class=\"amor-linea\"\r\n                            style=\"background:#ff8fab;\"\r\n                        ><\/div>\r\n\r\n                        <h2>\r\n                            ${nombreActual}\r\n                        <\/h2>\r\n\r\n                        <p>\r\n                            ${mensajeActual}\r\n                        <\/p>\r\n\r\n                        <div class=\"rosa-firma\">\r\n                            Una rosa para alguien especial \u2764\ufe0f\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            `;\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    \/* =========================\r\n       ACTUALIZAR AL ESCRIBIR\r\n       ========================= *\/\r\n\r\n    nombre.addEventListener(\r\n        \"input\",\r\n        mostrarPreview\r\n    );\r\n\r\n    mensaje.addEventListener(\r\n        \"input\",\r\n        mostrarPreview\r\n    );\r\n\r\n\r\n    \/* =========================\r\n       BOT\u00d3N PREVISUALIZAR\r\n       ========================= *\/\r\n\r\n    botonPreview.addEventListener(\r\n        \"click\",\r\n        function () {\r\n\r\n            mostrarPreview();\r\n\r\n            resultado.scrollIntoView({\r\n                behavior: \"smooth\",\r\n                block: \"center\"\r\n            });\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =========================\r\n       CONTADOR\r\n       ========================= *\/\r\n\r\n    mensaje.addEventListener(\r\n        \"input\",\r\n        function () {\r\n\r\n            const contador =\r\n                app.querySelector(\r\n                    \".amor-contador\"\r\n                );\r\n\r\n            contador.textContent =\r\n                mensaje.value.length +\r\n                \" \/ 2000 caracteres\";\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =========================\r\n       PREVIEW INICIAL\r\n       ========================= *\/\r\n\r\n    mostrarPreview();\r\n\r\n});\r\n\r\n<\/script>\r\n<script>\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n    const app =\r\n        document.getElementById(\"html-amor-app\");\r\n\r\n    if (!app) {\r\n        return;\r\n    }\r\n\r\n    const nombre =\r\n        document.getElementById(\"amor_nombre\");\r\n\r\n    const mensaje =\r\n        document.getElementById(\"amor_mensaje\");\r\n\r\n    const botonDownload =\r\n        document.getElementById(\"amor_download\");\r\n\r\n\r\n    let disenoActual = \"carta\";\r\n\r\n\r\n    \/*\r\n     * Detectar dise\u00f1o seleccionado\r\n     *\/\r\n\r\n    app.querySelectorAll(\".amor-diseno\").forEach(\r\n        function (boton) {\r\n\r\n            boton.addEventListener(\r\n                \"click\",\r\n                function () {\r\n\r\n                    disenoActual =\r\n                        boton.dataset.diseno;\r\n\r\n                }\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n     * Descargar HTML\r\n     *\/\r\n\r\n    botonDownload.addEventListener(\r\n        \"click\",\r\n        function () {\r\n\r\n            const nombreTexto =\r\n                nombre.value.trim() ||\r\n                \"Tu persona especial\";\r\n\r\n            const mensajeTexto =\r\n                mensaje.value.trim() ||\r\n                \"Te quiero much\u00edsimo \u2764\ufe0f\";\r\n\r\n\r\n            let html = \"\";\r\n\r\n            let archivo =\r\n                \"carta-de-amor.html\";\r\n\r\n\r\n            if (disenoActual === \"carta\") {\r\n\r\n                html =\r\n                    crearCarta(\r\n                        nombreTexto,\r\n                        mensajeTexto\r\n                    );\r\n\r\n                archivo =\r\n                    \"carta-de-amor.html\";\r\n\r\n            }\r\n\r\n\r\n            if (disenoActual === \"corazones\") {\r\n\r\n                html =\r\n                    crearCorazones(\r\n                        nombreTexto,\r\n                        mensajeTexto\r\n                    );\r\n\r\n                archivo =\r\n                    \"corazones-flotantes.html\";\r\n\r\n            }\r\n\r\n\r\n            if (disenoActual === \"rosa\") {\r\n\r\n                html =\r\n                    crearRosa(\r\n                        nombreTexto,\r\n                        mensajeTexto\r\n                    );\r\n\r\n                archivo =\r\n                    \"rosa-romantica.html\";\r\n\r\n            }\r\n\r\n\r\n            const blob =\r\n                new Blob(\r\n                    [html],\r\n                    {\r\n                        type:\r\n                            \"text\/html;charset=utf-8\"\r\n                    }\r\n                );\r\n\r\n\r\n            const url =\r\n                URL.createObjectURL(blob);\r\n\r\n\r\n            const enlace =\r\n                document.createElement(\"a\");\r\n\r\n            enlace.href = url;\r\n\r\n            enlace.download = archivo;\r\n\r\n            document.body.appendChild(\r\n                enlace\r\n            );\r\n\r\n            enlace.click();\r\n\r\n            enlace.remove();\r\n\r\n\r\n            setTimeout(\r\n                function () {\r\n\r\n                    URL.revokeObjectURL(\r\n                        url\r\n                    );\r\n\r\n                },\r\n                1000\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/*\r\n     * Seguridad\r\n     *\/\r\n\r\n    function seguro(texto) {\r\n\r\n        const div =\r\n            document.createElement(\"div\");\r\n\r\n        div.textContent = texto;\r\n\r\n        return div.innerHTML;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * DISE\u00d1O CARTA\r\n     *\/\r\n\r\n    function crearCarta(\r\n        nombre,\r\n        mensaje\r\n    ) {\r\n\r\n        return `<!DOCTYPE html>\r\n\r\n<html lang=\"es\">\r\n\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n\r\n<meta name=\"viewport\"\r\ncontent=\"width=device-width,initial-scale=1.0\">\r\n\r\n<title>Carta de amor<\/title>\r\n\r\n<style>\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n\r\n    margin: 0;\r\n\r\n    min-height: 100vh;\r\n\r\n    display: flex;\r\n\r\n    justify-content: center;\r\n\r\n    align-items: center;\r\n\r\n    padding: 20px;\r\n\r\n    font-family: Arial, sans-serif;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #ffd6e3,\r\n            #fff0f5\r\n        );\r\n\r\n}\r\n\r\n.carta {\r\n\r\n    width: 100%;\r\n\r\n    max-width: 700px;\r\n\r\n    padding: 55px 30px;\r\n\r\n    text-align: center;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #fffafd,\r\n            #ffe1ec\r\n        );\r\n\r\n    border: 3px solid #f4bfd0;\r\n\r\n    border-radius: 30px;\r\n\r\n    box-shadow:\r\n        0 20px 60px\r\n        rgba(180,30,80,.20);\r\n\r\n}\r\n\r\n.corazones {\r\n\r\n    font-size: 35px;\r\n\r\n}\r\n\r\nh1 {\r\n\r\n    color: #c2185b;\r\n\r\n    font-size: 45px;\r\n\r\n}\r\n\r\n.linea {\r\n\r\n    width: 90px;\r\n\r\n    height: 3px;\r\n\r\n    margin: 15px auto;\r\n\r\n    background: #e91e63;\r\n\r\n}\r\n\r\nh2 {\r\n\r\n    color: #8e294b;\r\n\r\n}\r\n\r\n.mensaje {\r\n\r\n    color: #5c2638;\r\n\r\n    font-size: 20px;\r\n\r\n    line-height: 1.8;\r\n\r\n    white-space: pre-wrap;\r\n\r\n}\r\n\r\n.firma {\r\n\r\n    margin-top: 30px;\r\n\r\n    color: #c2185b;\r\n\r\n    font-weight: bold;\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"carta\">\r\n\r\n<div class=\"corazones\">\r\n\u2764\ufe0f \ud83d\udc95 \u2764\ufe0f\r\n<\/div>\r\n\r\n<h1>\r\nPara ti\r\n<\/h1>\r\n\r\n<div class=\"linea\"><\/div>\r\n\r\n<h2>\r\n${seguro(nombre)}\r\n<\/h2>\r\n\r\n<div class=\"mensaje\">\r\n${seguro(mensaje)}\r\n<\/div>\r\n\r\n<div class=\"firma\">\r\nCon todo mi amor \u2764\ufe0f\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<\/html>`;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * DISE\u00d1O CORAZONES\r\n     *\/\r\n\r\n    function crearCorazones(\r\n        nombre,\r\n        mensaje\r\n    ) {\r\n\r\n        return `<!DOCTYPE html>\r\n\r\n<html lang=\"es\">\r\n\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n\r\n<meta name=\"viewport\"\r\ncontent=\"width=device-width,initial-scale=1.0\">\r\n\r\n<title>Corazones de amor<\/title>\r\n\r\n<style>\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n\r\n    margin: 0;\r\n\r\n    min-height: 100vh;\r\n\r\n    overflow: hidden;\r\n\r\n    display: flex;\r\n\r\n    justify-content: center;\r\n\r\n    align-items: center;\r\n\r\n    padding: 20px;\r\n\r\n    font-family: Arial, sans-serif;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle,\r\n            #ff477e,\r\n            #8d1745\r\n        );\r\n\r\n}\r\n\r\n.centro {\r\n\r\n    position: relative;\r\n\r\n    z-index: 5;\r\n\r\n    width: 100%;\r\n\r\n    max-width: 700px;\r\n\r\n    padding: 50px 25px;\r\n\r\n    text-align: center;\r\n\r\n    color: white;\r\n\r\n    background:\r\n        rgba(255,255,255,.12);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.3);\r\n\r\n    border-radius: 25px;\r\n\r\n    backdrop-filter: blur(8px);\r\n\r\n}\r\n\r\nh1 {\r\n\r\n    font-size: 48px;\r\n\r\n}\r\n\r\nh2 {\r\n\r\n    color: #ffe5ef;\r\n\r\n}\r\n\r\n.mensaje {\r\n\r\n    font-size: 20px;\r\n\r\n    line-height: 1.8;\r\n\r\n    white-space: pre-wrap;\r\n\r\n}\r\n\r\n.corazon {\r\n\r\n    position: fixed;\r\n\r\n    bottom: -60px;\r\n\r\n    animation:\r\n        subir 8s linear infinite;\r\n\r\n}\r\n\r\n@keyframes subir {\r\n\r\n    from {\r\n\r\n        transform:\r\n            translateY(0)\r\n            rotate(0deg);\r\n\r\n        opacity: 0;\r\n\r\n    }\r\n\r\n    10% {\r\n        opacity: .7;\r\n    }\r\n\r\n    90% {\r\n        opacity: .7;\r\n    }\r\n\r\n    to {\r\n\r\n        transform:\r\n            translateY(-700px)\r\n            rotate(360deg);\r\n\r\n        opacity: 0;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<span\r\nclass=\"corazon\"\r\nstyle=\"left:5%;font-size:30px;\"\r\n>\r\n\u2764\ufe0f\r\n<\/span>\r\n\r\n<span\r\nclass=\"corazon\"\r\nstyle=\"\r\nleft:20%;\r\nfont-size:40px;\r\nanimation-delay:2s;\r\n\"\r\n>\r\n\ud83d\udc95\r\n<\/span>\r\n\r\n<span\r\nclass=\"corazon\"\r\nstyle=\"\r\nleft:40%;\r\nfont-size:25px;\r\nanimation-delay:4s;\r\n\"\r\n>\r\n\u2764\ufe0f\r\n<\/span>\r\n\r\n<span\r\nclass=\"corazon\"\r\nstyle=\"\r\nleft:60%;\r\nfont-size:45px;\r\nanimation-delay:1s;\r\n\"\r\n>\r\n\ud83d\udc97\r\n<\/span>\r\n\r\n<span\r\nclass=\"corazon\"\r\nstyle=\"\r\nleft:80%;\r\nfont-size:30px;\r\nanimation-delay:3s;\r\n\"\r\n>\r\n\u2764\ufe0f\r\n<\/span>\r\n\r\n\r\n<div class=\"centro\">\r\n\r\n<div style=\"font-size:40px;\">\r\n\u2764\ufe0f\r\n<\/div>\r\n\r\n<h1>\r\nTe Amo\r\n<\/h1>\r\n\r\n<h2>\r\n${seguro(nombre)}\r\n<\/h2>\r\n\r\n<div class=\"mensaje\">\r\n${seguro(mensaje)}\r\n<\/div>\r\n\r\n<br>\r\n\r\nCon todo mi coraz\u00f3n \u2764\ufe0f\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<\/html>`;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * DISE\u00d1O ROSA\r\n     *\/\r\n\r\n    function crearRosa(\r\n        nombre,\r\n        mensaje\r\n    ) {\r\n\r\n        return `<!DOCTYPE html>\r\n\r\n<html lang=\"es\">\r\n\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n\r\n<meta name=\"viewport\"\r\ncontent=\"width=device-width,initial-scale=1.0\">\r\n\r\n<title>Rosa rom\u00e1ntica<\/title>\r\n\r\n<style>\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n\r\n    margin: 0;\r\n\r\n    min-height: 100vh;\r\n\r\n    overflow: hidden;\r\n\r\n    display: flex;\r\n\r\n    justify-content: center;\r\n\r\n    align-items: center;\r\n\r\n    padding: 20px;\r\n\r\n    font-family: Arial, sans-serif;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #3b0718,\r\n            #7b1238,\r\n            #21030e\r\n        );\r\n\r\n}\r\n\r\n.centro {\r\n\r\n    position: relative;\r\n\r\n    z-index: 5;\r\n\r\n    width: 100%;\r\n\r\n    max-width: 700px;\r\n\r\n    padding: 50px 30px;\r\n\r\n    text-align: center;\r\n\r\n    color: white;\r\n\r\n    background:\r\n        rgba(0,0,0,.25);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.25);\r\n\r\n    border-radius: 25px;\r\n\r\n    backdrop-filter: blur(8px);\r\n\r\n}\r\n\r\n.rosa {\r\n\r\n    font-size: 75px;\r\n\r\n}\r\n\r\nh1 {\r\n\r\n    color: #ffd5df;\r\n\r\n    font-size: 46px;\r\n\r\n}\r\n\r\nh2 {\r\n\r\n    color: #fff0f4;\r\n\r\n}\r\n\r\n.mensaje {\r\n\r\n    color: #ffe8ee;\r\n\r\n    font-size: 20px;\r\n\r\n    line-height: 1.8;\r\n\r\n    white-space: pre-wrap;\r\n\r\n}\r\n\r\n.firma {\r\n\r\n    margin-top: 30px;\r\n\r\n    color: #ffb6c8;\r\n\r\n    font-weight: bold;\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"centro\">\r\n\r\n<div class=\"rosa\">\r\n\ud83c\udf39\r\n<\/div>\r\n\r\n<h1>\r\nPara ti\r\n<\/h1>\r\n\r\n<h2>\r\n${seguro(nombre)}\r\n<\/h2>\r\n\r\n<div class=\"mensaje\">\r\n${seguro(mensaje)}\r\n<\/div>\r\n\r\n<div class=\"firma\">\r\nUna rosa para alguien especial \u2764\ufe0f\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<\/html>`;\r\n\r\n    }\r\n\r\n});\r\n\r\n<\/script>\r\n\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Quiero continuar el proyecto de mi plugin de WordPress \u00abHTML de Amor\u00bb. Estoy usando WordPress + Elementor y tengo un plugin llamado:HTML de Amor El shortcode que uso en Elementor es: Queremos crear un generador de p\u00e1ginas rom\u00e1nticas descargables. Caracter\u00edsticas actuales: IMPORTANTE:Hoy reemplazamos completamente el archivo:html-amor.php por un c\u00f3digo nuevo dividido en 4 partes. Ya &#8230; <a title=\"Mensajes \u2764\ufe0f\" class=\"read-more\" href=\"https:\/\/plennox.com\/inicio\/mensajes-%e2%9d%a4%ef%b8%8f\/\" aria-label=\"Leer m\u00e1s sobre Mensajes \u2764\ufe0f\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-315","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/plennox.com\/inicio\/wp-json\/wp\/v2\/pages\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/plennox.com\/inicio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/plennox.com\/inicio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/plennox.com\/inicio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plennox.com\/inicio\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":2,"href":"https:\/\/plennox.com\/inicio\/wp-json\/wp\/v2\/pages\/315\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/plennox.com\/inicio\/wp-json\/wp\/v2\/pages\/315\/revisions\/318"}],"wp:attachment":[{"href":"https:\/\/plennox.com\/inicio\/wp-json\/wp\/v2\/media?parent=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}