{"id":4153,"date":"2024-09-24T13:01:46","date_gmt":"2024-09-24T11:01:46","guid":{"rendered":"https:\/\/areaalzheimer.fpmaragall.org\/suport-tecnic\/"},"modified":"2024-09-30T19:51:02","modified_gmt":"2024-09-30T17:51:02","slug":"suport-tecnic","status":"publish","type":"page","link":"https:\/\/areaalzheimer.fpmaragall.org\/ca\/suport-tecnic\/","title":{"rendered":"Suport t\u00e8cnic"},"content":{"rendered":"        <style>\n            .support-contact-container {\n                display: flex;\n                flex-wrap: wrap;\n                width: 100%;\n                margin: 0 auto;\n                padding: 20px;\n                box-sizing: border-box;\n            }\n            .support-contact-image {\n                flex: 1;\n                background-image: url('\/wp-content\/uploads\/verano20alzheimer-1-2.jpg'); \/* Replace with your image path *\/\n                background-size: cover;\n                background-position: center;\n                min-height: 400px;\n                border-radius: 8px 0 0 8px;\n                border: 1px solid #ddd;\n\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            }\n            .support-contact-form {\n                flex: 1;\n                max-width: 600px;\n                margin: 0 auto;\n                padding: 20px;\n                background-color: #f9f9f9;\n                border: 1px solid #ddd;\n                border-radius: 0 8px 8px 0;\n                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            }\n            .support-contact-form .form-group {\n                margin-bottom: 15px;\n            }\n            .support-contact-form label {\n                display: block;\n                margin-bottom: 5px;\n                font-weight: bold;\n            }\n            .support-contact-form input[type=\"text\"],\n            .support-contact-form input[type=\"email\"],\n            .support-contact-form textarea {\n                width: 100%;\n                padding: 10px;\n                border: 1px solid #ccc;\n                border-radius: 4px;\n                box-sizing: border-box;\n            }\n            .support-contact-form textarea {\n                resize: vertical;\n                height: 150px;\n            }\n            .support-contact-form input[type=\"submit\"] {\n                background-color: #0073aa;\n                color: #fff;\n                padding: 10px 20px;\n                border: none;\n                border-radius: 4px;\n                cursor: pointer;\n                font-size: 16px;\n            }\n            .support-contact-form input[type=\"submit\"]:hover {\n                background-color: #005177;\n            }\n            .support-contact-form .legal-text {\n                font-size: 12px;\n                color: #666;\n                margin-top: 20px;\n                max-height: 100px;\n                overflow-y: scroll;\n                border: 1px solid #ddd;\n                padding: 10px;\n                background-color: #f9f9f9;\n            }\n            .support-contact-form .char-count {\n                font-size: 12px;\n                color: #666;\n                float: right;\n            }\n            .support-contact-form input[type=\"text\"].readonly,\n            .support-contact-form input[type=\"email\"].readonly {\n                background-color: #f0f0f0;\n                color: #666;\n                cursor: not-allowed;\n                border: 1px solid #ddd;\n            }\n            .support-contact-form .error-message {\n                font-size: 13px !important;\n                margin-top: 2px;\n            }\n            .privacy_polic{\n                font-size: 13px;\n            }\n            @media (max-width: 768px) {\n                .support-contact-container {\n                    flex-direction: column;\n                }\n                .support-contact-image {\n                    min-height: 200px;\n                }\n            }\n            .form-submission-message-area {\n                padding: 10px;\n                margin-top: 15px;\n                margin-bottom: 15px;\n                border-radius: 4px;\n                text-align: center;\n                display: none; \/* Oculto por defecto *\/\n            }\n            .form-submission-message-area.success-message {\n                background-color: #d4edda;\n                color: #155724;\n                border: 1px solid #c3e6cb;\n                display: block;\n            }\n            .form-submission-message-area.error-message {\n                background-color: #f8d7da;\n                color: #721c24;\n                border: 1px solid #f5c6cb;\n                display: block;\n            }\n            .support-contact-form .form-submission-message-area.success-message.full-width-message {\n                padding: 40px 20px;\n                font-size: 1.15em;\n                text-align: center;\n                box-sizing: border-box;\n                \/* Opcional: para centrar verticalmente si el mensaje es corto y el contenedor tiene alto *\/\n                \/* display: flex; *\/\n                \/* align-items: center; *\/\n                \/* justify-content: center; *\/\n                \/* min-height: 150px; *\/ \/* Ajustar seg\u00fan sea necesario *\/\n            }\n        <\/style>\n        <div class=\"support-contact-container\">\n            <div class=\"support-contact-image\"><\/div>\n            <form id=\"support-contact-form\" class=\"support-contact-form\">\n                <div class=\"form-group\">\n                    <label for=\"full_name\">Nom Complet<\/label>\n                    <input type=\"text\" id=\"full_name\" name=\"full_name\" value=\"\" required>\n                <\/div>\n                <div class=\"form-group\">\n                    <label for=\"email\">Correu Electr\u00f2nic<\/label>\n                    <input type=\"email\" id=\"email\" name=\"email\" value=\"\" required>\n                <\/div>\n                <div class=\"form-group\">\n                    <label for=\"subject\">Assumpte <span id=\"subject-char-count\" class=\"char-count\">0\/100<\/span><\/label>\n                    <script type=\"text\/javascript\">\n                        jQuery(document).ready(function($) {\n                                                            $('#full_name').focus();\n                                                    });\n                    <\/script>\n                    <input type=\"text\" id=\"subject\" name=\"subject\" maxlength=\"100\">\n                    <p id=\"subject_error\" class=\"error-message\" style=\"color: red; display: none;\">El camp assumpte \u00e9s obligatori<\/p>\n                <\/div>\n                <div class=\"form-group\">\n                    <label for=\"message\">Missatge <span id=\"message-char-count\" class=\"char-count\">0\/500<\/span><\/label>\n                    <textarea id=\"message\" name=\"message\" maxlength=\"500\"><\/textarea>\n                    <p id=\"message_error\" class=\"error-message\" style=\"color: red; display: none;\">El campo mensaje es obligatorio.<\/p>\n                <\/div>\n                <div class=\"form-group\" style=\"display:none;\">\n                    <label for=\"honeypot\">Deixa aquest camp buit<\/label>\n                    <input type=\"text\" id=\"honeypot\" name=\"honeypot\">\n                <\/div>\n                <div class=\"legal-text\">\n                    <p><strong>Informaci\u00f3 b\u00e0sica sobre protecci\u00f3 de dades:<\/strong><\/p>\n<p><span style=\"color: #000000;\"><u>Responsable del tractament<\/u><\/span>: Fundaci\u00f3 Pasqual Maragall per a la recerca sobre l\u2019Alzheimer.<\/p>\n<p><span style=\"color: #000000;\"><u>Finalitat del tractament<\/u><\/span><span style=\"color: #000000;\">:<\/span> atenci\u00f3 de les consultes i sol\u00b7licituds de car\u00e0cter t\u00e8cnic<\/p>\n<p><span style=\"color: #000000;\"><u>Drets<\/u><\/span><span style=\"color: #000000;\">:<\/span> per exercir els seus drets d\u2019acc\u00e9s, rectificaci\u00f3 i supressi\u00f3, aix\u00ed com altres drets reconeguts en la normativa, pot enviar un correu electr\u00f2nic a <a href=\"mailto:gdpr@fpmaragall.org.\">gdpr@fpmaragall.org.<\/a><\/p>\n<p>Per a m\u00e9s informaci\u00f3 i per saber com exercir els seus drets, consulti la nostra\u00a0pol\u00edtica de privacitat.<\/p>\n                <\/div><br>\n                <div class=\"form-group\">\n                    <label for=\"privacy_terms\" class=\"privacy_polic\">\n                        <input type=\"checkbox\" id=\"privacy_terms\" name=\"privacy_terms\">\n                        He llegit i accepto la \n                        <a style=\"font-size: 13px;\" href=\"\/ca\/politica-de-privacitat\/\" target=\"_blank\">Pol\u00edtica de Privacitat<\/a>\n                        i les                        <a style=\"font-size: 13px;\" href=\"\/ca\/avis-legal\/\" target=\"_blank\">Condicions d\u2019\u00fas<\/a>\n                        <span style=\"color: red;\">*<\/span>\n                    <\/label>\n                    <p id=\"privacy_terms_error\" class=\"error-message\" style=\"color: red; display: none;\">Has d\u2019acceptar la pol\u00edtica de privacitat i les condicions d\u2019\u00fas per a continuar<\/p>\n                <\/div>\n                <input type=\"hidden\" id=\"support_contact_form_nonce\" name=\"support_contact_form_nonce\" value=\"8d6a0775e2\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/ca\/wp-json\/wp\/v2\/pages\/4153\" \/>                <input type=\"hidden\" name=\"form_token\" value=\"ounXRWUwHd9khhzJLGTj0lpwBiPmOEiC\">\n                \n                <div id=\"form_submission_message_area\" class=\"form-submission-message-area\"><\/div>\n                \n                <div class=\"form-group\">\n                    <input type=\"submit\" value=\"Enviar missatge a suport\">\n                <\/div>\n\n            <\/form>\n        <\/div>\n\n        <script type=\"text\/javascript\">\n        jQuery(document).ready(function($) {\n            $('#subject').on('input', function() {\n                var charCount = $(this).val().length;\n                $('#subject-char-count').text(charCount + '\/100');\n                $('#form_submission_message_area').html('').removeClass('success-message error-message').hide();\n            });\n\n            $('#message').on('input', function() {\n                var charCount = $(this).val().length;\n                $('#message-char-count').text(charCount + '\/500');\n                $('#form_submission_message_area').html('').removeClass('success-message error-message').hide();\n            });\n\n            $('#privacy_terms').on('change', function() {\n                $('#form_submission_message_area').html('').removeClass('success-message error-message').hide();\n            });\n\n            $('#support-contact-form').on('submit', function(e) {\n                e.preventDefault();\n\n                \/\/ Limpiar mensajes de env\u00edo anteriores\n                $('#form_submission_message_area').html('').removeClass('success-message error-message').hide();\n\n                let isValid = true;\n\n                \/\/ Ocultar errores previos\n                $('#subject_error').hide();\n                $('#message_error').hide();\n                $('#privacy_terms_error').hide();\n\n                \/\/ Validar campo Asunto\n                if ($('#subject').val().trim() === '') {\n                    $('#subject_error').show();\n                    isValid = false;\n                }\n\n                \/\/ Validar campo Mensaje\n                if ($('#message').val().trim() === '') {\n                    $('#message_error').show();\n                    isValid = false;\n                }\n\n                \/\/ Validar checkbox de pol\u00edtica de privacidad\n                if (!$('#privacy_terms').is(':checked')) {\n                    $('#privacy_terms_error').show();\n                    isValid = false;\n                }\n\n                if (!isValid) {\n                    return; \/\/ Detener el env\u00edo si algo no es v\u00e1lido\n                }\n\n                var formData = $(this).serialize();\n                \n                $.ajax({\n                    url: 'https:\/\/areaalzheimer.fpmaragall.org\/wp-admin\/admin-ajax.php',\n                    type: 'POST',\n                    data: formData + '&action=submit_support_contact_form',\n                    beforeSend: function() {\n                        \/\/ Opcional: Mostrar un spinner o deshabilitar el bot\u00f3n de env\u00edo\n                        $('#support-contact-form input[type=\"submit\"]').prop('disabled', true).val('Enviando...');\n                    },\n                    success: function(response) {\n                        if (response.success) {\n                            \/\/ Ocultar todos los hijos del formulario excepto el \u00e1rea de mensajes\n                            $('#support-contact-form').children().not('#form_submission_message_area').hide();\n                            \n                            $('#form_submission_message_area')\n                                .html(response.data)\n                                .removeClass('error-message')\n                                .addClass('success-message full-width-message') \/\/ A\u00f1adir nueva clase\n                                .show();\n\n                            \/\/ Aunque los campos est\u00e9n ocultos, resetear por si acaso y limpiar contadores\n                            \/\/ Esto no es estrictamente necesario si el formulario no se vuelve a mostrar sin recargar\n                            $('#support-contact-form')[0].reset();\n                            $('#subject-char-count').text('0\/100');\n                            $('#message-char-count').text('0\/500');\n                            $('#subject_error').hide();\n                            $('#message_error').hide();\n                            $('#privacy_terms_error').hide();\n                        } else {\n                            $('#form_submission_message_area').html(response.data).removeClass('success-message').addClass('error-message').show();\n                            if (response.data.includes('Env\u00edo de formulario inv\u00e1lido')) {\n                                setTimeout(function() {\n                                   location.reload();\n                                }, 3000); \/\/ Recargar despu\u00e9s de 3 segundos\n                            }\n                        }\n                    },\n                    error: function() {\n                         $('#form_submission_message_area').html('Error de conexi\u00f3n. Por favor, int\u00e9ntelo de nuevo m\u00e1s tarde.').removeClass('success-message').addClass('error-message').show();\n                    },\n                    complete: function() {\n                        \/\/ Restablecer el bot\u00f3n de env\u00edo\n                        $('#support-contact-form input[type=\"submit\"]').prop('disabled', false).val('Enviar missatge a suport');\n                    }\n                });\n            });\n        });\n        <\/script>\n        \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":{"_acf_changed":false,"footnotes":""},"class_list":["post-4153","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/areaalzheimer.fpmaragall.org\/ca\/wp-json\/wp\/v2\/pages\/4153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/areaalzheimer.fpmaragall.org\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/areaalzheimer.fpmaragall.org\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/areaalzheimer.fpmaragall.org\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/areaalzheimer.fpmaragall.org\/ca\/wp-json\/wp\/v2\/comments?post=4153"}],"version-history":[{"count":1,"href":"https:\/\/areaalzheimer.fpmaragall.org\/ca\/wp-json\/wp\/v2\/pages\/4153\/revisions"}],"predecessor-version":[{"id":4154,"href":"https:\/\/areaalzheimer.fpmaragall.org\/ca\/wp-json\/wp\/v2\/pages\/4153\/revisions\/4154"}],"wp:attachment":[{"href":"https:\/\/areaalzheimer.fpmaragall.org\/ca\/wp-json\/wp\/v2\/media?parent=4153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}