{"id":4510,"date":"2025-08-07T10:48:19","date_gmt":"2025-08-07T08:48:19","guid":{"rendered":"https:\/\/mhc-int.com\/?page_id=4510"},"modified":"2025-08-07T13:17:59","modified_gmt":"2025-08-07T11:17:59","slug":"gt-qr","status":"publish","type":"page","link":"https:\/\/mhc-int.com\/pt-pt\/gt-qr\/","title":{"rendered":"Generador de tarjetas"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;Hero&#8221; _builder_version=&#8221;4.27.4&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_type=&#8221;circular&#8221; background_color_gradient_direction_radial=&#8221;top left&#8221; background_color_gradient_stops=&#8221;rgba(40,40,40,0.79) 0%|rgba(40,40,40,0.86) 100%&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_color_gradient_start=&#8221;rgba(40,40,40,0.79)&#8221; background_color_gradient_end=&#8221;rgba(40,40,40,0.86)&#8221; background_image=&#8221;https:\/\/mhc-int.com\/wp-content\/uploads\/2024\/09\/computer.jpg&#8221; custom_margin=&#8221;||||false&#8221; custom_padding=&#8221;5vw||5vw||true|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row column_structure=&#8221;2_3,1_3&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;2_3&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.27.4&#8243; text_font=&#8221;||||||||&#8221; header_font=&#8221;Rubik|700|||||||&#8221; header_font_size=&#8221;64px&#8221; header_line_height=&#8221;1.1em&#8221; background_layout=&#8221;dark&#8221; max_width=&#8221;800px&#8221; custom_margin=&#8221;||0px|&#8221; custom_padding=&#8221;|||16px&#8221; text_font_size_tablet=&#8221;14px&#8221; text_font_size_last_edited=&#8221;off|desktop&#8221; header_font_size_tablet=&#8221;44px&#8221; header_font_size_phone=&#8221;32px&#8221; header_font_size_last_edited=&#8221;on|phone&#8221; border_color_all=&#8221;#ffb400&#8243; border_width_left=&#8221;10px&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>\u00a1Crea tu tarjeta digital de contacto en pocos pasos!<\/h1>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.27.4&#8243; text_font=&#8221;||||||||&#8221; text_font_size=&#8221;22px&#8221; text_line_height=&#8221;1.6em&#8221; header_font=&#8221;||||||||&#8221; background_layout=&#8221;dark&#8221; max_width=&#8221;800px&#8221; custom_margin=&#8221;|||&#8221; custom_padding=&#8221;46px||46px||true|&#8221; text_font_size_tablet=&#8221;18px&#8221; text_font_size_phone=&#8221;&#8221; text_font_size_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p style=\"text-align: justify;\">Simplemente completa los campos con tu informaci\u00f3n (nombre, cargo, tel\u00e9fono, etc.), y si lo deseas, sube el logo de tu empresa. Al hacer clic en &#8220;&#x2728; Generar Tarjeta&#8221;, se crear\u00e1 una imagen con tus datos y un c\u00f3digo QR que, al ser escaneado, permitir\u00e1 a cualquier persona guardar tu contacto al instante en su tel\u00e9fono. \u00a1Ya puedes descargarla o compartirla directamente!<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.27.4&#8243; text_font=&#8221;||||||||&#8221; header_font=&#8221;||||||||&#8221; header_2_font=&#8221;Rubik|700|||||||&#8221; header_2_text_color=&#8221;#ffb400&#8243; header_2_font_size=&#8221;32px&#8221; header_2_line_height=&#8221;1.2em&#8221; custom_margin=&#8221;|||&#8221; custom_padding=&#8221;|||&#8221; header_2_font_size_last_edited=&#8221;off|desktop&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2>Todo sobre:<\/h2>\n<p>[\/et_pb_text][et_pb_blurb title=&#8221;Tdod en uno&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;&#x52;||divi||400&#8243; icon_color=&#8221;#ffb400&#8243; icon_placement=&#8221;left&#8221; image_icon_width=&#8221;55px&#8221; content_max_width=&#8221;1100px&#8221; content_max_width_tablet=&#8221;1100px&#8221; content_max_width_last_edited=&#8221;off|desktop&#8221; _builder_version=&#8221;4.27.4&#8243; header_font=&#8221;Rubik|700|||||||&#8221; header_line_height=&#8221;1.4em&#8221; body_font=&#8221;||||||||&#8221; body_font_size=&#8221;15px&#8221; body_line_height=&#8221;1.8em&#8221; background_layout=&#8221;dark&#8221; custom_margin=&#8221;|||&#8221; custom_padding=&#8221;|||&#8221; animation_style=&#8221;slide&#8221; animation_direction=&#8221;right&#8221; animation_intensity_slide=&#8221;10%&#8221; animation=&#8221;off&#8221; image_max_width=&#8221;64px&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Crea tu tarjeta digital y\u00a0 desc\u00e1rgala en una imagen.<\/p>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8221;Tama\u00f1o Perfecto&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;&#xf05b;||fa||900&#8243; icon_color=&#8221;#ffb400&#8243; icon_placement=&#8221;left&#8221; image_icon_width=&#8221;55px&#8221; content_max_width=&#8221;1100px&#8221; content_max_width_tablet=&#8221;1100px&#8221; content_max_width_last_edited=&#8221;off|desktop&#8221; _builder_version=&#8221;4.27.4&#8243; header_font=&#8221;Rubik|700|||||||&#8221; header_line_height=&#8221;1.4em&#8221; body_font=&#8221;||||||||&#8221; body_font_size=&#8221;15px&#8221; body_line_height=&#8221;1.8em&#8221; background_layout=&#8221;dark&#8221; custom_margin=&#8221;|||&#8221; custom_padding=&#8221;|||&#8221; animation_style=&#8221;slide&#8221; animation_direction=&#8221;right&#8221; animation_delay=&#8221;100ms&#8221; animation_intensity_slide=&#8221;10%&#8221; animation=&#8221;off&#8221; image_max_width=&#8221;64px&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Ajusta tu tarjeta formato exacto que necesitas sin perder calidad.<\/p>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8221;R\u00e1pido y Sin Complicaciones&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;&#xf021;||fa||900&#8243; icon_color=&#8221;#ffb400&#8243; icon_placement=&#8221;left&#8221; image_icon_width=&#8221;55px&#8221; content_max_width=&#8221;1100px&#8221; content_max_width_tablet=&#8221;1100px&#8221; content_max_width_last_edited=&#8221;off|desktop&#8221; _builder_version=&#8221;4.27.4&#8243; header_font=&#8221;Rubik|700|||||||&#8221; header_line_height=&#8221;1.4em&#8221; body_font=&#8221;||||||||&#8221; body_font_size=&#8221;15px&#8221; body_line_height=&#8221;1.8em&#8221; background_layout=&#8221;dark&#8221; custom_margin=&#8221;|||&#8221; custom_padding=&#8221;|||&#8221; animation_style=&#8221;slide&#8221; animation_direction=&#8221;right&#8221; animation_delay=&#8221;200ms&#8221; animation_intensity_slide=&#8221;10%&#8221; animation=&#8221;off&#8221; image_max_width=&#8221;64px&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Edita y descarga en pocos clics en el formato de tu preferencia.<\/p>\n<p>[\/et_pb_blurb][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;About Us&#8221; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.27.4&#8243; text_font=&#8221;||||||||&#8221; header_font=&#8221;||||||||&#8221; header_2_font=&#8221;Rubik|700|||||||&#8221; header_2_font_size=&#8221;42px&#8221; header_2_line_height=&#8221;1.2em&#8221; text_orientation=&#8221;center&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;|||&#8221; custom_padding=&#8221;|||&#8221; header_2_font_size_tablet=&#8221;&#8221; header_2_font_size_phone=&#8221;36px&#8221; header_2_font_size_last_edited=&#8221;on|phone&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2>Crea tu tarjeta digital en pocos pasos<\/h2>\n<p>[\/et_pb_text][et_pb_divider color=&#8221;#ffb400&#8243; divider_position=&#8221;center&#8221; divider_weight=&#8221;5px&#8221; _builder_version=&#8221;4.16&#8243; max_width=&#8221;50px&#8221; module_alignment=&#8221;center&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.timezone-calculator {|| max-width: 100%;|| width: 100%;|| background-color: #ffffff;|| border-radius: 12px;|| padding: 20px;|| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);||}||||.input-section, .comparison-section {|| display: flex;|| flex-wrap: wrap;|| gap: 12px; \/* Aseg\u00farate de que esto est\u00e9 dentro de un contenedor flex *\/|| margin-bottom: 20px;|| align-items: flex-end;|| background-color: #f8f9fa;|| padding: 16px;|| border-radius: 10px;|| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);||}||||.input-group {|| flex: 1;|| min-width: 150px;||}||||.input-group label {|| display: block;|| margin-bottom: 6px;|| font-weight: 600;|| font-size: 14px;|| color: #333;||}||||.input-group select,||.input-group input {|| width: 100%;|| padding: 10px;|| border: 1px solid #ddd;|| border-radius: 6px;|| font-size: 14px;|| transition: border-color 0.2s;||}||||.input-group select:focus,||.input-group input:focus {|| outline: none;|| border-color: #007bff;|| box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);||}||||.calculate-btn {|| background-color: #007bff;|| color: white;|| border: none;|| padding: 12px 20px;|| border-radius: 6px;|| cursor: pointer;|| font-size: 16px;|| font-weight: 500;|| min-width: 120px;|| transition: background-color 0.2s, transform 0.1s;|| margin-left: 12px;||}||||.calculate-btn:hover {|| background-color: #0056b3;||}||||.results-section {|| display: flex;|| justify-content: space-between;|| align-items: center;|| margin-top: 20px;|| flex-wrap: nowrap;||}||||.time-card {|| background-color: #e9ecef;|| border-radius: 10px;|| padding: 16px;|| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);|| text-align: center;|| flex: 1;|| margin-right: 10px;|| min-width: 150px;||}||||.time-card:last-child {|| margin-right: 0;||}||||.country-name {|| font-weight: 600;|| margin-bottom: 8px;|| font-size: 16px;|| color: #333;||}||||.country-time {|| font-size: 24px;|| font-family: &#8216;Courier New&#8217;, monospace;|| color: #007bff;||}||&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<style>\r\n    \/* Estilos para el contenedor principal, a\u00edsla el componente del resto de la p\u00e1gina *\/\r\n    .ms-vcard-generator-container {\r\n        font-family: Arial, sans-serif;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 20px;\r\n        padding: 20px;\r\n        border-radius: 8px;\r\n        background-color: #f8f9fa;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n        font-size: 14px;\r\n        line-height: 1.6;\r\n    }\r\n    @media (min-width: 768px) {\r\n        .ms-vcard-generator-container {\r\n            flex-direction: row;\r\n        }\r\n    }\r\n\r\n    \/* M\u00f3dulo de entrada de datos (formulario) *\/\r\n    .ms-input-section, .ms-output-section {\r\n        flex: 1;\r\n        padding: 20px;\r\n        border-radius: 8px;\r\n        background-color: #fff;\r\n        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n    }\r\n    \r\n    .ms-input-section h2, .ms-output-section h2 {\r\n        font-size: 1.5em;\r\n        margin-bottom: 20px;\r\n        color: #333;\r\n        text-align: center;\r\n    }\r\n    .ms-input-section .input-group {\r\n        margin-bottom: 15px;\r\n    }\r\n    .ms-input-section label {\r\n        display: block;\r\n        margin-bottom: 5px;\r\n        font-weight: bold;\r\n        color: #444;\r\n    }\r\n    .ms-input-section input[type=\"text\"],\r\n    .ms-input-section input[type=\"tel\"],\r\n    .ms-input-section input[type=\"email\"] {\r\n        width: 100%;\r\n        padding: 10px;\r\n        border: 1px solid #ccc;\r\n        border-radius: 5px;\r\n        font-size: 14px;\r\n    }\r\n    \r\n    .ms-input-section #logo-upload-container {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n    }\r\n    .ms-input-section #logo-upload {\r\n        width: 100%;\r\n        padding: 8px;\r\n        border: 1px dashed #ccc;\r\n        border-radius: 5px;\r\n        background-color: #f9f9f9;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .ms-input-section #logo-preview {\r\n        margin-top: 10px;\r\n        text-align: center;\r\n        min-height: 60px;\r\n    }\r\n    .ms-input-section #logo-preview img {\r\n        max-width: 100px;\r\n        max-height: 100px;\r\n        border-radius: 50%;\r\n        border: 2px solid #ccc;\r\n        object-fit: cover;\r\n    }\r\n    .ms-input-section #remove-logo-button {\r\n        background-color: #dc3545;\r\n        color: white;\r\n        border: none;\r\n        padding: 8px 12px;\r\n        border-radius: 5px;\r\n        cursor: pointer;\r\n        display: none;\r\n        margin: 0 auto;\r\n        font-size: 12px;\r\n    }\r\n    .ms-input-section #generate-button {\r\n        width: 100%;\r\n        padding: 12px;\r\n        background-color: #007bff;\r\n        color: white;\r\n        border: none;\r\n        border-radius: 5px;\r\n        cursor: pointer;\r\n        font-size: 16px;\r\n        margin-top: 10px;\r\n    }\r\n\r\n    \/* M\u00f3dulo de visualizaci\u00f3n (tarjeta) *\/\r\n    .ms-card-output {\r\n        padding: 20px;\r\n        background: linear-gradient(135deg, #f0f4f8, #e0e8f0);\r\n        border-radius: 10px;\r\n        text-align: center;\r\n    }\r\n    .ms-card-output .ms-logo {\r\n        max-width: 150px;\r\n        height: auto;\r\n        margin-bottom: 20px;\r\n        border-radius: 50%;\r\n        border: 4px solid #fff;\r\n    }\r\n    .ms-card-output h3 {\r\n        font-size: 1.5em;\r\n        margin-bottom: 5px;\r\n        color: #333;\r\n    }\r\n    .ms-card-output .ms-card-company {\r\n        margin-top: 20px;\r\n        font-size: 16px;\r\n        font-weight: bold;\r\n        color: #444;\r\n    }\r\n    .ms-card-output .ms-card-position {\r\n        font-size: 14px;\r\n        color: #666;\r\n    }\r\n    .ms-vcard-info {\r\n        text-align: center;\r\n        margin-top: 15px;\r\n    }\r\n    .ms-vcard-info p {\r\n        margin: 5px 0;\r\n        font-size: 14px;\r\n        color: #444;\r\n    }\r\n    .ms-qr-code-container {\r\n        margin-top: 20px;\r\n        padding: 10px;\r\n        background-color: #fff;\r\n        border-radius: 8px;\r\n        display: inline-block;\r\n    }\r\n    .ms-qr-code-container img {\r\n        width: 256px;\r\n        height: 256px;\r\n    }\r\n    .ms-action-buttons {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        margin-top: 20px;\r\n    }\r\n    .ms-action-buttons button {\r\n        padding: 10px 15px;\r\n        border: none;\r\n        border-radius: 5px;\r\n        color: white;\r\n        cursor: pointer;\r\n        font-size: 14px;\r\n    }\r\n    .ms-download-btn {\r\n        background-color: #28a745;\r\n    }\r\n    .ms-whatsapp-btn {\r\n        background-color: #25D366;\r\n    }\r\n<\/style>\r\n\r\n<div class=\"ms-vcard-generator-container\">\r\n    <div class=\"ms-input-section\">\r\n        <h2>Datos de la Tarjeta<\/h2>\r\n        <form id=\"vcardForm\">\r\n            <div class=\"input-group\">\r\n                <label for=\"name\">&#x1f464; Nombre completo:<\/label>\r\n                <input type=\"text\" id=\"name\" placeholder=\"Dirk Meyer\" value=\"Carlos Campos\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"organization\">&#x1f3e2; Empresa:<\/label>\r\n                <input type=\"text\" id=\"organization\" placeholder=\"CETM International Trading GmbH\" value=\"Carlos M&S\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"position\">&#x1f4bc; Cargo:<\/label>\r\n                <input type=\"text\" id=\"position\" placeholder=\"Gerente de Ventas\" value=\"Gerente de Ventas\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"address\">&#x1f4cd; Direcci\u00f3n:<\/label>\r\n                <input type=\"text\" id=\"address\" placeholder=\"Bremer Reihe 26, 20099 Hamburg, Germany\" value=\"Bremer Reihe 26, 20099 Hamburg, Germany\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"phone\">&#x1f4f1; Tel\u00e9fono:<\/label>\r\n                <input type=\"tel\" id=\"phone\" placeholder=\"+49 173 6057403\" value=\"+49 173 609735479\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"email\">&#x1f4e7; Email:<\/label>\r\n                <input type=\"email\" id=\"email\" placeholder=\"dirkmeyer@cetm-group.com\" value=\"carloscamp@gmail.com\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"logo-upload-container\">&#x1f3a8; Logo (opcional):<\/label>\r\n                <input type=\"file\" id=\"logo-upload\" accept=\"image\/*\">\r\n                <button type=\"button\" id=\"remove-logo-button\">&#x274c; Quitar logo<\/button>\r\n                <div id=\"logo-preview\"><\/div>\r\n            <\/div>\r\n            <button type=\"button\" id=\"generate-button\">Generar Tarjeta<\/button>\r\n        <\/form>\r\n    <\/div>\r\n\r\n    <div class=\"ms-output-section\">\r\n        <h2>Vista Previa<\/h2>\r\n        <div class=\"ms-card-output\">\r\n            <img decoding=\"async\" class=\"ms-logo\" id=\"card-logo\" src=\"\" alt=\"Logo de la tarjeta\">\r\n            <h3 id=\"card-name\"><\/h3>\r\n            <p id=\"card-organization\" class=\"ms-card-company\"><\/p>\r\n            <p id=\"card-position\" class=\"ms-card-position\"><\/p>\r\n            <div class=\"ms-vcard-info\">\r\n                <p id=\"card-address\"><\/p>\r\n                <p id=\"card-phone\"><\/p>\r\n                <p id=\"card-email\"><\/p>\r\n            <\/div>\r\n            <div class=\"ms-qr-code-container\">\r\n                <img decoding=\"async\" id=\"qrcode-img\" src=\"\" alt=\"C\u00f3digo QR de contacto\">\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"ms-action-buttons\">\r\n            <button id=\"download-button\" class=\"ms-download-btn\">&#x1f4e5; Descargar JPG<\/button>\r\n            <button id=\"whatsapp-button\" class=\"ms-whatsapp-btn\">&#x1f4ac; Compartir por WhatsApp<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdn.rawgit.com\/davidshimjs\/qrcodejs\/gh-pages\/qrcode.min.js\"><\/script>\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const nameInput = document.getElementById('name');\r\n        const positionInput = document.getElementById('position');\r\n        const organizationInput = document.getElementById('organization');\r\n        const addressInput = document.getElementById('address');\r\n        const phoneInput = document.getElementById('phone');\r\n        const emailInput = document.getElementById('email');\r\n        const logoInput = document.getElementById('logo-upload');\r\n        const generateButton = document.getElementById('generate-button');\r\n        const removeLogoButton = document.getElementById('remove-logo-button');\r\n        const downloadButton = document.getElementById('download-button');\r\n        const whatsappButton = document.getElementById('whatsapp-button');\r\n        const logoPreview = document.getElementById('logo-preview');\r\n        const cardLogo = document.getElementById('card-logo');\r\n        const qrcodeImg = document.getElementById('qrcode-img');\r\n        const cardName = document.getElementById('card-name');\r\n        const cardPosition = document.getElementById('card-position');\r\n        const cardOrganization = document.getElementById('card-organization');\r\n        const cardAddress = document.getElementById('card-address');\r\n        const cardPhone = document.getElementById('card-phone');\r\n        const cardEmail = document.getElementById('card-email');\r\n\r\n        const defaultLogoUrl = 'https:\/\/i.ibb.co\/3T9Y5B4\/CetM-Logo-HP-19.png';\r\n        let currentQRDataUrl = null;\r\n\r\n        function updateCard() {\r\n            const name = nameInput.value;\r\n            const position = positionInput.value;\r\n            const organization = organizationInput.value;\r\n            const address = addressInput.value;\r\n            const phone = phoneInput.value;\r\n            const email = emailInput.value;\r\n            \r\n            cardName.textContent = name;\r\n            cardOrganization.textContent = organization;\r\n            cardPosition.textContent = position;\r\n            cardAddress.innerHTML = `&#x1f4cd; Direcci\u00f3n: ${address}`;\r\n            cardPhone.innerHTML = `&#x1f4f1; Tel\u00e9fono: ${phone}`;\r\n            cardEmail.innerHTML = `&#x1f4e7; Email: ${email}`;\r\n\r\n            const vcardData = `BEGIN:VCARD\r\nVERSION:3.0\r\nFN:${name}\r\nORG:${organization}\r\nTITLE:${position}\r\nTEL;TYPE=WORK,VOICE:${phone}\r\nEMAIL;TYPE=WORK:${email}\r\nADR;TYPE=WORK:;;${address.replace(\/,\/g, ';')};;;;\r\nEND:VCARD`;\r\n\r\n            const size = 256;\r\n            const eccLevel = 'Q';\r\n            const qrApiUrl = `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=${size}x${size}&data=${encodeURIComponent(vcardData)}&ecc=${eccLevel}`;\r\n            qrcodeImg.src = qrApiUrl;\r\n\r\n            qrcodeImg.onload = function() {\r\n                generateFullCardImage(name, position, organization, address, phone, email, cardLogo.src, qrcodeImg.src);\r\n            };\r\n        }\r\n\r\n        function generateFullCardImage(name, position, organization, address, phone, email, logoSrc, qrSrc) {\r\n            const canvas = document.createElement('canvas');\r\n            const ctx = canvas.getContext('2d');\r\n            const cardWidth = 540;\r\n            const cardHeight = 960;\r\n            canvas.width = cardWidth;\r\n            canvas.height = cardHeight;\r\n\r\n            const gradient = ctx.createLinearGradient(0, 0, cardWidth, cardHeight);\r\n            gradient.addColorStop(0, '#f0f4f8');\r\n            gradient.addColorStop(1, '#e0e8f0');\r\n            ctx.fillStyle = gradient;\r\n            ctx.fillRect(0, 0, cardWidth, cardHeight);\r\n\r\n            const logo = new Image();\r\n            logo.onload = function() {\r\n                const logoSize = 150;\r\n                const logoX = (cardWidth - logoSize) \/ 2;\r\n                const logoY = 50;\r\n                ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);\r\n                \r\n                ctx.fillStyle = '#333';\r\n                ctx.textAlign = 'center';\r\n                ctx.font = 'bold 36px Arial';\r\n                ctx.fillText(name, cardWidth \/ 2, 250);\r\n                \r\n                ctx.fillStyle = '#666';\r\n                ctx.font = '18px Arial';\r\n                ctx.fillText(organization, cardWidth \/ 2, 280);\r\n                ctx.fillText(position, cardWidth \/ 2, 310);\r\n\r\n                ctx.fillStyle = '#444';\r\n                ctx.font = '16px Arial';\r\n                ctx.fillText(`&#x1f4cd; Direcci\u00f3n: ${address}`, cardWidth \/ 2, 380);\r\n                ctx.fillText(`&#x1f4f1; Tel\u00e9fono: ${phone}`, cardWidth \/ 2, 410);\r\n                ctx.fillText(`&#x1f4e7; Email: ${email}`, cardWidth \/ 2, 440);\r\n\r\n                const qrCode = new Image();\r\n                qrCode.onload = function() {\r\n                    const qrSize = 256;\r\n                    const qrX = (cardWidth - qrSize) \/ 2;\r\n                    const qrY = 480;\r\n                    ctx.drawImage(qrCode, qrX, qrY, qrSize, qrSize);\r\n                    \r\n                    currentQRDataUrl = canvas.toDataURL('image\/jpeg', 0.95);\r\n                };\r\n                qrCode.src = qrSrc;\r\n            };\r\n            logo.src = logoSrc;\r\n        }\r\n\r\n        function handleLogoUpload() {\r\n            const logoFile = logoInput.files[0];\r\n            if (logoFile) {\r\n                const reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    cardLogo.src = e.target.result;\r\n                    logoPreview.innerHTML = `<img decoding=\"async\" src=\"${e.target.result}\">`;\r\n                    removeLogoButton.style.display = 'block';\r\n                };\r\n                reader.readAsDataURL(logoFile);\r\n            } else {\r\n                cardLogo.src = defaultLogoUrl;\r\n                logoPreview.innerHTML = '';\r\n                removeLogoButton.style.display = 'none';\r\n            }\r\n        }\r\n\r\n        function removeLogo() {\r\n            logoInput.value = '';\r\n            handleLogoUpload();\r\n        }\r\n\r\n        function downloadCard() {\r\n            if (!currentQRDataUrl) {\r\n                alert('Por favor, genera la tarjeta primero.');\r\n                return;\r\n            }\r\n            const link = document.createElement('a');\r\n            link.href = currentQRDataUrl;\r\n            link.download = 'tarjeta-digital.jpg';\r\n            document.body.appendChild(link);\r\n            link.click();\r\n            document.body.removeChild(link);\r\n        }\r\n\r\n        function shareWhatsApp() {\r\n            if (!currentQRDataUrl) {\r\n                alert('Por favor, genera la tarjeta primero.');\r\n                return;\r\n            }\r\n            const message = encodeURIComponent('\u00a1Hola! Te comparto mi tarjeta de contacto digital. Escanea el QR para agregarme.');\r\n            const whatsappUrl = `https:\/\/wa.me\/?text=${message}`;\r\n            window.open(whatsappUrl, '_blank');\r\n        }\r\n\r\n        generateButton.addEventListener('click', updateCard);\r\n        logoInput.addEventListener('change', handleLogoUpload);\r\n        removeLogoButton.addEventListener('click', removeLogo);\r\n        downloadButton.addEventListener('click', downloadCard);\r\n        whatsappButton.addEventListener('click', shareWhatsApp);\r\n\r\n        handleLogoUpload();\r\n        updateCard();\r\n    });\r\n<\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a1Crea tu tarjeta digital de contacto en pocos pasos!Simplemente completa los campos con tu informaci\u00f3n (nombre, cargo, tel\u00e9fono, etc.), y si lo deseas, sube el logo de tu empresa. Al hacer clic en &#8220;&#x2728; Generar Tarjeta&#8221;, se crear\u00e1 una imagen con tus datos y un c\u00f3digo QR que, al ser escaneado, permitir\u00e1 a cualquier persona [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-4510","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mhc-int.com\/pt-pt\/wp-json\/wp\/v2\/pages\/4510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mhc-int.com\/pt-pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mhc-int.com\/pt-pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mhc-int.com\/pt-pt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mhc-int.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=4510"}],"version-history":[{"count":12,"href":"https:\/\/mhc-int.com\/pt-pt\/wp-json\/wp\/v2\/pages\/4510\/revisions"}],"predecessor-version":[{"id":4533,"href":"https:\/\/mhc-int.com\/pt-pt\/wp-json\/wp\/v2\/pages\/4510\/revisions\/4533"}],"wp:attachment":[{"href":"https:\/\/mhc-int.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=4510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}