{"id":2606,"date":"2026-06-16T13:14:49","date_gmt":"2026-06-16T13:14:49","guid":{"rendered":"https:\/\/app.digitalfreelancer.org\/?page_id=2606"},"modified":"2026-06-22T18:07:34","modified_gmt":"2026-06-22T18:07:34","slug":"dashboard-mypage","status":"publish","type":"page","link":"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-mypage\/","title":{"rendered":"Dashboard MyPage+"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2606\" class=\"elementor elementor-2606\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8603493 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"8603493\" 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-1ad279d elementor-widget elementor-widget-shortcode\" data-id=\"1ad279d\" 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\">        <div id=\"mp-1-gVNhCP\" class=\"mp-wrap\">\n                    <style>\n        #mp-1-gVNhCP {\n            --mp-bg: linear-gradient(135deg, #f0f7ff, #ffffff);\n            --mp-card-bg: #ffffff;\n            --mp-text: #222222;\n            --mp-muted: #555555;\n            --mp-border: #e6eefc;\n            --mp-primary: #1d4ed8;\n            --mp-primary-hover: #2563eb;\n            --mp-light: #eff6ff;\n            --mp-light-hover: #dbeafe;\n            all: initial;\n            * { box-sizing: border-box; }\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            color: var(--mp-text);\n            background: var(--mp-bg);\n            display: block;\n            padding: 24px;\n            border-radius: 20px;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.06);\n            animation: mpFadeIn 0.5s ease-in-out;\n            max-width: 1280px;\n            margin: 0 auto;\n        }\n\n        #mp-1-gVNhCP button, \n        #mp-1-gVNhCP input,\n        #mp-1-gVNhCP select, \n        #mp-1-gVNhCP textarea {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            font-size: 14px;\n            color: var(--mp-text);\n            outline: none;\n        }\n\n        @keyframes mpFadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        \/* HEADER *\/\n        #mp-1-gVNhCP .mp-header {\n            display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px;\n        }\n        #mp-1-gVNhCP .mp-header h2 { margin: 0; color: var(--mp-primary); font-size: 26px; }\n        #mp-1-gVNhCP .mp-header p { color: var(--mp-muted); margin: 4px 0 0 0; font-size: 14px; }\n\n        \/* GRID *\/\n        #mp-1-gVNhCP .mp-grid {\n            display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 18px; margin-top: 15px;\n        }\n\n        \/* CARD *\/\n        #mp-1-gVNhCP .mp-card {\n            background: var(--mp-card-bg); border-radius: 14px; padding: 18px;\n            border: 1px solid var(--mp-border); box-shadow: 0 4px 12px rgba(0,0,0,0.04);\n            transition: 0.25s ease; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;\n        }\n        #mp-1-gVNhCP .mp-card:hover {\n            transform: translateY(-4px); box-shadow: 0 12px 25px rgba(29,78,216,0.12);\n        }\n        #mp-1-gVNhCP .mp-card h3 {\n            margin-top: 0; color: var(--mp-primary); font-size: 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\n        }\n\n        \/* INPUTS *\/\n        #mp-1-gVNhCP input, \n        #mp-1-gVNhCP textarea, \n        #mp-1-gVNhCP select {\n            width: 100%; margin: 6px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #dbeafe; transition: 0.2s; background: #fff;\n        }\n        #mp-1-gVNhCP textarea { height: 110px; resize: none; }\n        #mp-1-gVNhCP input:focus, \n        #mp-1-gVNhCP textarea:focus, \n        #mp-1-gVNhCP select:focus {\n            border-color: var(--mp-primary); box-shadow: 0 0 0 3px rgba(29,78,216,0.15);\n        }\n\n        \/* BUTTONS *\/\n        #mp-1-gVNhCP button {\n            width: 100%; margin-top: 8px; padding: 11px; border: none; border-radius: 10px;\n            background: var(--mp-primary); color: white; font-weight: bold; cursor: pointer; transition: 0.2s; text-align: center;\n        }\n        #mp-1-gVNhCP button:hover {\n            background: var(--mp-primary-hover); transform: scale(1.02); filter: brightness(1.05);\n        }\n        #mp-1-gVNhCP button.secondary {\n            background: #e0ecff; color: var(--mp-primary);\n        }\n        #mp-1-gVNhCP button.secondary:hover {\n            background: #cfe2ff;\n        }\n\n        \/* PREVIEW *\/\n        #mp-1-gVNhCP .mp-preview {\n            height: 340px; border: 2px dashed #c7d2fe; border-radius: 12px; padding: 15px;\n            background: #f8fbff; overflow: auto; transition: 0.3s;\n        }\n\n        \/* TEMPLATES LIST *\/\n        #mp-1-gVNhCP .tpl {\n            padding: 10px 12px; margin: 8px 0; border-radius: 10px; background: var(--mp-light);\n            cursor: pointer; transition: 0.2s; border: 1px solid #dbeafe; font-size: 13.5px; font-weight: 500;\n        }\n        #mp-1-gVNhCP .tpl:hover {\n            background: var(--mp-light-hover); transform: translateX(4px); color: var(--mp-primary);\n        }\n\n        \/* RESPONSIVE *\/\n        @media(max-width: 900px){\n            #mp-1-gVNhCP .mp-grid { grid-template-columns: 1fr; }\n        }\n        <\/style>\n                            <div class=\"mp-wrap-inner\">\n            <!-- HEADER -->\n            <div class=\"mp-header\">\n                <div>\n                    <h2>\ud83c\udf10 MyPage Builder Pro+<\/h2>\n                    <p>Cria p\u00e1ginas HTML simples de forma r\u00e1pida, visual e din\u00e2mica<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- MAIN GRID -->\n            <div class=\"mp-grid\">\n\n                <!-- LEFT PANEL -->\n                <div class=\"mp-card\">\n                    <h3><span>\ud83e\uddf1 Criador de P\u00e1gina<\/span><\/h3>\n                    <div class=\"mp-field\">\n                        <label style=\"font-size:12px; color:var(--mp-muted); font-weight:600;\">T\u00edtulo da P\u00e1gina<\/label>\n                        <input type=\"text\" data-mp-title placeholder=\"Ex: Meu Portef\u00f3lio\">\n                    <\/div>\n                    <div class=\"mp-field\">\n                        <label style=\"font-size:12px; color:var(--mp-muted); font-weight:600;\">Conte\u00fado Principal<\/label>\n                        <textarea data-mp-content placeholder=\"Escreve o conte\u00fado da tua p\u00e1gina...\"><\/textarea>\n                    <\/div>\n                    <div class=\"mp-field\">\n                        <label style=\"font-size:12px; color:var(--mp-muted); font-weight:600;\">Layout do Template<\/label>\n                        <select data-mp-template>\n                            <option value=\"default\">Template Base<\/option>\n                            <option value=\"landing\">Landing Page<\/option>\n                            <option value=\"about\">About Page<\/option>\n                            <option value=\"contact\">Contact Page<\/option>\n                        <\/select>\n                    <\/div>\n                    <button data-mp-generate>\u26a1 Gerar P\u00e1gina<\/button>\n                    <button class=\"secondary\" data-mp-copy>\ud83d\udccb Copiar HTML<\/button>\n                <\/div>\n\n                <!-- CENTER PREVIEW -->\n                <div class=\"mp-card large\">\n                    <h3><span>\ud83d\udc41 Preview em Tempo Real<\/span><\/h3>\n                    <div class=\"mp-preview\" data-mp-preview>\n                        A tua p\u00e1gina aparecer\u00e1 aqui...\n                    <\/div>\n                <\/div>\n\n                <!-- RIGHT TEMPLATES -->\n                <div class=\"mp-card\">\n                    <h3><span>\ud83c\udfa8 Templates R\u00e1pidos<\/span><\/h3>\n                    <div class=\"tpl\" data-template-click=\"landingTpl\">\n                        \ud83d\ude80 Landing moderna\n                    <\/div>\n                    <div class=\"tpl\" data-template-click=\"aboutTpl\">\n                        \ud83d\udc64 About elegante\n                    <\/div>\n                    <div class=\"tpl\" data-template-click=\"contactTpl\">\n                        \u2709 Contacto simples\n                    <\/div>\n                    <div class=\"tpl\" data-template-click=\"blogTpl\">\n                        \ud83d\udcdd Blog layout\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n                            <script>\n        (function(){\n            var root = document.getElementById(\"mp-1-gVNhCP\");\n            if (!root) return;\n\n            var generatedHTML = '';\n\n            var els = {\n                title: root.querySelector('[data-mp-title]'),\n                content: root.querySelector('[data-mp-content]'),\n                templateSelect: root.querySelector('[data-mp-template]'),\n                preview: root.querySelector('[data-mp-preview]'),\n                btnGenerate: root.querySelector('[data-mp-generate]'),\n                btnCopy: root.querySelector('[data-mp-copy]')\n            };\n\n            function generatePage(){\n                var titleVal = els.title.value.trim() || 'Nova P\u00e1gina';\n                var contentVal = els.content.value.trim() || 'Conte\u00fado em desenvolvimento...';\n                var tmpl = els.templateSelect.value;\n\n                var innerHtml = '';\n                if (tmpl === 'landing') {\n                    innerHtml = '<div style=\"font-family:Segoe UI; padding:20px; text-align:center;\"><h1 style=\"color:#1d4ed8; font-size:28px;\">' + escapeHtml(titleVal) + '<\/h1><p style=\"font-size:16px; color:#555;\">' + escapeHtml(contentVal) + '<\/p><button style=\"background:#1d4ed8; color:white; padding:12px 24px; border-radius:10px; border:none; font-weight:bold; cursor:pointer; margin-top:15px;\">Come\u00e7ar Agora<\/button><\/div>';\n                } else if (tmpl === 'about') {\n                    innerHtml = '<div style=\"font-family:Segoe UI; padding:20px;\"><h1 style=\"color:#1d4ed8; border-bottom:2px solid #dbeafe; padding-bottom:8px;\">' + escapeHtml(titleVal) + '<\/h1><p style=\"font-size:15px; line-height:1.6; color:#444;\">' + escapeHtml(contentVal) + '<\/p><div style=\"margin-top:20px; padding:15px; background:#eff6ff; border-radius:8px; font-weight:600; color:#1d4ed8;\">Nossa Equipa &amp; Miss\u00e3o<\/div><\/div>';\n                } else if (tmpl === 'contact') {\n                    innerHtml = '<div style=\"font-family:Segoe UI; padding:20px;\"><h1 style=\"color:#1d4ed8;\">' + escapeHtml(titleVal) + '<\/h1><p style=\"color:#555;\">' + escapeHtml(contentVal) + '<\/p><div style=\"margin-top:15px; background:#fff; padding:15px; border:1px solid #ddd; border-radius:8px;\"><strong>Email de contacto:<\/strong> suporte@site.com<br><strong>Telefone:<\/strong> +351 900 000 000<\/div><\/div>';\n                } else {\n                    innerHtml = '<div style=\"font-family:Segoe UI; padding:20px;\"><h1 style=\"color:#1d4ed8;\">' + escapeHtml(titleVal) + '<\/h1><p style=\"color:#444; font-size:15px;\">' + escapeHtml(contentVal) + '<\/p><\/div>';\n                }\n\n                els.preview.innerHTML = innerHtml;\n                generatedHTML = innerHtml;\n            }\n\n            function copyHTML(){\n                if (!generatedHTML){\n                    alert(\"Gera primeiro uma p\u00e1gina!\");\n                    return;\n                }\n                if (navigator.clipboard && navigator.clipboard.writeText) {\n                    navigator.clipboard.writeText(generatedHTML).then(function(){\n                        alert(\"C\u00f3digo HTML copiado com sucesso!\");\n                    }).catch(function(){\n                        fallbackCopy(generatedHTML);\n                    });\n                } else {\n                    fallbackCopy(generatedHTML);\n                }\n            }\n\n            function fallbackCopy(text){\n                var textArea = document.createElement(\"textarea\");\n                textArea.value = text;\n                textArea.style.position = \"fixed\";\n                document.body.appendChild(textArea);\n                textArea.focus();\n                textArea.select();\n                try {\n                    document.execCommand('copy');\n                    alert(\"C\u00f3digo HTML copiado com sucesso!\");\n                } catch (err) {\n                    alert(\"N\u00e3o foi poss\u00edvel copiar o HTML.\");\n                }\n                document.body.removeChild(textArea);\n            }\n\n            function setTemplate(type){\n                var templates = {\n                    landingTpl: { title: 'Landing Page Moderna', content: 'Bem-vindo ao teu site de alta convers\u00e3o e design inovador.', select: 'landing' },\n                    aboutTpl: { title: 'Sobre N\u00f3s', content: 'Somos uma equipa focada em inova\u00e7\u00e3o, tecnologia de ponta e resultados.', select: 'about' },\n                    contactTpl: { title: 'Fale Connosco', content: 'Entre em contacto para parcerias, suporte ou d\u00favidas gerais.', select: 'contact' },\n                    blogTpl: { title: 'Blog & Artigos', content: 'Acompanhe as publica\u00e7\u00f5es, dicas e novidades recentes do setor.', select: 'default' }\n                };\n\n                var t = templates[type];\n                if (t) {\n                    els.title.value = t.title;\n                    els.content.value = t.content;\n                    els.templateSelect.value = t.select;\n                    generatePage();\n                }\n            }\n\n            function escapeHtml(str){\n                return (str || '').toString().replace(\/[&<>\"']\/g, function(m){\n                    return ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'})[m];\n                });\n            }\n\n            els.btnGenerate.addEventListener('click', generatePage);\n            els.btnCopy.addEventListener('click', copyHTML);\n\n            root.querySelectorAll('[data-template-click]').forEach(function(el){\n                el.addEventListener('click', function(){\n                    setTemplate(el.getAttribute('data-template-click'));\n                });\n            });\n\n            \/\/ Inicializar com uma p\u00e1gina padr\u00e3o gerada\n            setTemplate('landingTpl');\n        })();\n        <\/script>\n                <\/div>\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2606","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages\/2606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/comments?post=2606"}],"version-history":[{"count":4,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages\/2606\/revisions"}],"predecessor-version":[{"id":2639,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages\/2606\/revisions\/2639"}],"wp:attachment":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/media?parent=2606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}