{"id":2596,"date":"2026-06-16T13:10:40","date_gmt":"2026-06-16T13:10:40","guid":{"rendered":"https:\/\/app.digitalfreelancer.org\/?page_id=2596"},"modified":"2026-06-22T18:19:52","modified_gmt":"2026-06-22T18:19:52","slug":"dashboard-idioma","status":"publish","type":"page","link":"https:\/\/app.digitalfreelancer.org\/index.php\/dashboard-idioma\/","title":{"rendered":"Dashboard Idioma+"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2596\" class=\"elementor elementor-2596\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69c0c8e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"69c0c8e\" 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-670ba10 elementor-widget elementor-widget-shortcode\" data-id=\"670ba10\" 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=\"lang-1-7fYmCd\" class=\"lang-wrap\">\n                    <style>\n        #lang-1-7fYmCd {\n            --lang-bg: linear-gradient(135deg, #1e1e1e, #2a2a2a);\n            --lang-card-bg: #2b2b2b;\n            --lang-text: #ddd;\n            --lang-muted: #aaa;\n            --lang-border: #3a3a3a;\n            --lang-silver: #c0c0c0;\n            all: initial;\n            * { box-sizing: border-box; }\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            color: var(--lang-text);\n            background: var(--lang-bg);\n            display: block;\n            padding: 24px;\n            border-radius: 20px;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.4);\n            animation: langFadeIn 0.5s ease-in-out;\n            max-width: 1280px;\n            margin: 0 auto;\n        }\n\n        #lang-1-7fYmCd button, \n        #lang-1-7fYmCd input,\n        #lang-1-7fYmCd select, \n        #lang-1-7fYmCd textarea {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            font-size: 14px;\n            color: var(--lang-text);\n            outline: none;\n        }\n\n        @keyframes langFadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        \/* HEADER *\/\n        #lang-1-7fYmCd .lang-header {\n            display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px;\n        }\n        #lang-1-7fYmCd .lang-header h2 { margin: 0; color: var(--lang-silver); font-size: 26px; }\n        #lang-1-7fYmCd .lang-header p { color: var(--lang-muted); margin: 4px 0 0 0; font-size: 14px; }\n\n        \/* STATS *\/\n        #lang-1-7fYmCd .lang-stats {\n            display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 20px 0;\n        }\n\n        \/* GRID & BOTTOM *\/\n        #lang-1-7fYmCd .lang-grid {\n            display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 15px;\n        }\n        #lang-1-7fYmCd .lang-bottom {\n            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-top: 20px;\n        }\n\n        \/* CARD *\/\n        #lang-1-7fYmCd .lang-card {\n            background: var(--lang-card-bg); border: 1px solid var(--lang-border); border-radius: 14px;\n            padding: 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); transition: 0.25s ease;\n            display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;\n        }\n        #lang-1-7fYmCd .lang-card:hover {\n            transform: translateY(-4px); box-shadow: 0 14px 28px rgba(192,192,192,0.1); border-color: var(--lang-silver);\n        }\n        #lang-1-7fYmCd .lang-card h3 {\n            margin-top: 0; color: var(--lang-silver); font-size: 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\n        }\n\n        \/* STAT CARDS *\/\n        #lang-1-7fYmCd .lang-card.stat {\n            text-align: center; border-left: 3px solid var(--lang-silver); display: block;\n        }\n        #lang-1-7fYmCd .lang-card.stat h3 { font-size: 13px; color: var(--lang-muted); justify-content: center; margin-bottom: 6px; }\n        #lang-1-7fYmCd .lang-card.stat strong { color: var(--lang-silver); font-size: 24px; }\n\n        \/* INPUTS *\/\n        #lang-1-7fYmCd select {\n            width: 100%; margin: 6px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #444; background: #1f1f1f; color: var(--lang-text); transition: 0.2s;\n        }\n        #lang-1-7fYmCd select:focus {\n            border-color: var(--lang-silver); box-shadow: 0 0 0 3px rgba(192,192,192,0.15);\n        }\n\n        \/* BUTTONS *\/\n        #lang-1-7fYmCd button {\n            width: 100%; margin-top: 8px; padding: 11px; border: none; border-radius: 10px;\n            background: linear-gradient(135deg, var(--lang-silver), #6d6d6d); color: #111; font-weight: bold; cursor: pointer; transition: 0.25s; text-align: center;\n        }\n        #lang-1-7fYmCd button:hover {\n            transform: scale(1.02); box-shadow: 0 10px 22px rgba(192,192,192,0.2); filter: brightness(1.05);\n        }\n        #lang-1-7fYmCd button.secondary { background: #444; color: #ddd; }\n        #lang-1-7fYmCd button.secondary:hover { background: #555; }\n        #lang-1-7fYmCd .lang-btn-small { padding: 4px 8px; font-size: 11px; width: auto; margin: 0; }\n\n        \/* LESSON BOX *\/\n        #lang-1-7fYmCd .lesson {\n            min-height: 180px; padding: 15px; border-radius: 12px; background: #1f1f1f;\n            border: 1px dashed #555; margin-bottom: 10px; transition: 0.3s;\n        }\n        #lang-1-7fYmCd .lesson:hover {\n            border-color: var(--lang-silver); transform: scale(1.01);\n        }\n\n        \/* PROGRESS *\/\n        #lang-1-7fYmCd .bar {\n            height: 8px; background: #444; border-radius: 10px; overflow: hidden; margin-bottom: 8px;\n        }\n        #lang-1-7fYmCd .fill {\n            height: 100%; background: var(--lang-silver); transition: width 0.4s ease; border-radius: 10px;\n        }\n        #lang-1-7fYmCd .progress-label {\n            font-size: 12px; margin-top: 6px; color: var(--lang-muted); font-weight: 600;\n        }\n\n        \/* RESPONSIVE *\/\n        @media(max-width: 900px){\n            #lang-1-7fYmCd .lang-stats,\n            #lang-1-7fYmCd .lang-grid,\n            #lang-1-7fYmCd .lang-bottom {\n                grid-template-columns: 1fr;\n            }\n        }\n        <\/style>\n                            <div class=\"lang-wrap-inner\">\n            <!-- HEADER -->\n            <div class=\"lang-header\">\n                <div>\n                    <h2>\ud83c\udf0d Idioma+ Pro<\/h2>\n                    <p>Aprende idiomas passo a passo com n\u00edveis e exerc\u00edcios<\/p>\n                <\/div>\n                <button class=\"secondary lang-btn-small\" data-lang-reset>Reiniciar Progresso<\/button>\n            <\/div>\n\n            <!-- STATS -->\n            <div class=\"lang-stats\">\n                <div class=\"lang-card stat\">\n                    <h3>XP Total<\/h3>\n                    <strong data-stat=\"xp\">120<\/strong>\n                <\/div>\n                <div class=\"lang-card stat\">\n                    <h3>N\u00edvel Atual<\/h3>\n                    <strong data-stat=\"level\">A2<\/strong>\n                <\/div>\n                <div class=\"lang-card stat\">\n                    <h3>Exerc\u00edcios<\/h3>\n                    <strong data-stat=\"exercises\">8<\/strong>\n                <\/div>\n                <div class=\"lang-card stat\">\n                    <h3>Precis\u00e3o<\/h3>\n                    <strong data-stat=\"accuracy\">78%<\/strong>\n                <\/div>\n            <\/div>\n\n            <!-- GRID -->\n            <div class=\"lang-grid\">\n\n                <!-- SELECT LANGUAGE -->\n                <div class=\"lang-card\">\n                    <h3><span>\ud83c\udf10 Escolhe Idioma<\/span><\/h3>\n                    <div class=\"lang-field\">\n                        <select data-lang-select>\n                            <option value=\"Ingl\u00eas\">Ingl\u00eas<\/option>\n                            <option value=\"Espanhol\">Espanhol<\/option>\n                            <option value=\"Franc\u00eas\">Franc\u00eas<\/option>\n                            <option value=\"Alem\u00e3o\">Alem\u00e3o<\/option>\n                            <option value=\"Italiano\">Italiano<\/option>\n                        <\/select>\n                    <\/div>\n                    <button data-lang-start>\ud83d\ude80 Come\u00e7ar<\/button>\n                <\/div>\n\n                <!-- LESSON AREA -->\n                <div class=\"lang-card large\">\n                    <h3><span>\ud83d\udcd8 Aula Atual<\/span><\/h3>\n                    <div class=\"lesson\" data-lesson-box>\n                        Seleciona um idioma para come\u00e7ar\n                    <\/div>\n                    <button data-lesson-next>\u27a1 Pr\u00f3xima li\u00e7\u00e3o<\/button>\n                    <button class=\"secondary\" data-lesson-exercise>\u270f Exerc\u00edcio<\/button>\n                <\/div>\n\n                <!-- PROGRESS -->\n                <div class=\"lang-card\">\n                    <h3><span>\ud83d\udcca Progresso<\/span><\/h3>\n                    <div class=\"progress-label\">A1<\/div>\n                    <div class=\"bar\"><div class=\"fill w100\"><\/div><\/div>\n                    <div class=\"progress-label\">A2<\/div>\n                    <div class=\"bar\"><div class=\"fill\" style=\"width: 70%;\"><\/div><\/div>\n                    <div class=\"progress-label\">B1<\/div>\n                    <div class=\"bar\"><div class=\"fill\" style=\"width: 40%;\"><\/div><\/div>\n                    <div class=\"progress-label\">B2<\/div>\n                    <div class=\"bar\"><div class=\"fill\" style=\"width: 10%;\"><\/div><\/div>\n                <\/div>\n\n            <\/div>\n\n            <!-- BOTTOM -->\n            <div class=\"lang-bottom\">\n                <div class=\"lang-card\">\n                    <h3>\ud83e\udde0 Exerc\u00edcios<\/h3>\n                    <p style=\"font-size: 13.5px; color: var(--lang-muted); margin: 0;\">Tradu\u00e7\u00e3o, vocabul\u00e1rio e frases b\u00e1sicas interativas.<\/p>\n                <\/div>\n\n                <div class=\"lang-card\">\n                    <h3>\ud83c\udfc6 Conquistas<\/h3>\n                    <p style=\"font-size: 13.5px; color: var(--lang-muted); margin: 0;\">\ud83d\udd25 3 dias seguidos a estudar sem falhar.<\/p>\n                <\/div>\n\n                <div class=\"lang-card\">\n                    <h3>\ud83c\udfaf Objetivo<\/h3>\n                    <p style=\"font-size: 13.5px; color: var(--lang-muted); margin: 0;\">Alcan\u00e7ar n\u00edvel B2 no idioma escolhido este ano.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n                            <script>\n        (function(){\n            var root = document.getElementById(\"lang-1-7fYmCd\");\n            if (!root) return;\n            var STORAGE_KEY = 'idioma_plus_data_v2_lang-1-7fYmCd';\n\n            var defaultState = {\n                xp: 120,\n                level: 'A2',\n                exercises: 8,\n                accuracy: '78%',\n                selectedLang: 'Ingl\u00eas',\n                lessonIndex: 0\n            };\n\n            function loadState(){\n                try {\n                    var raw = localStorage.getItem(STORAGE_KEY);\n                    if (raw) return JSON.parse(raw);\n                } catch(e) {}\n                return defaultState;\n            }\n\n            function saveState(){\n                localStorage.setItem(STORAGE_KEY, JSON.stringify(state));\n            }\n\n            var state = loadState();\n\n            var lessons = [\n                \"Ol\u00e1! Hoje vais aprender sauda\u00e7\u00f5es b\u00e1sicas.\",\n                \"Aprende verbos essenciais no presente.\",\n                \"Constru\u00e7\u00e3o de frases simples do dia a dia.\",\n                \"Vocabul\u00e1rio avan\u00e7ado e express\u00f5es idiom\u00e1ticas.\",\n                \"Conversa\u00e7\u00e3o b\u00e1sica simulada com exemplos pr\u00e1ticos.\"\n            ];\n\n            var els = {\n                selectLang: root.querySelector('[data-lang-select]'),\n                lessonBox: root.querySelector('[data-lesson-box]'),\n                btnStart: root.querySelector('[data-lang-start]'),\n                btnNext: root.querySelector('[data-lesson-next]'),\n                btnExercise: root.querySelector('[data-lesson-exercise]'),\n                btnReset: root.querySelector('[data-lang-reset]'),\n                statXp: root.querySelector('[data-stat=\"xp\"]'),\n                statLevel: root.querySelector('[data-stat=\"level\"]'),\n                statExercises: root.querySelector('[data-stat=\"exercises\"]'),\n                statAccuracy: root.querySelector('[data-stat=\"accuracy\"]')\n            };\n\n            function render(){\n                els.statXp.textContent = state.xp;\n                els.statLevel.textContent = state.level;\n                els.statExercises.textContent = state.exercises;\n                els.statAccuracy.textContent = state.accuracy;\n                els.selectLang.value = state.selectedLang;\n\n                if (state.lessonIndex === 0 && els.lessonBox.textContent.includes('Seleciona')) {\n                    els.lessonBox.innerHTML = \"\ud83d\udcd8 Idioma selecionado: <strong>\" + escapeHtml(state.selectedLang) + \"<\/strong><br><br>\" + lessons[0];\n                } else {\n                    els.lessonBox.innerHTML = \"\ud83d\udcd8 Idioma selecionado: <strong>\" + escapeHtml(state.selectedLang) + \"<\/strong><br><br>\" + lessons[state.lessonIndex];\n                }\n            }\n\n            function startLearning(){\n                state.selectedLang = els.selectLang.value;\n                state.lessonIndex = 0;\n                saveState();\n                render();\n            }\n\n            function nextLesson(){\n                state.lessonIndex++;\n                if(state.lessonIndex >= lessons.length) {\n                    state.lessonIndex = 0;\n                    state.xp += 15;\n                }\n                state.exercises += 1;\n                saveState();\n                render();\n            }\n\n            function doExercise(){\n                state.xp += 10;\n                state.exercises += 1;\n                saveState();\n                render();\n                alert(\"Exerc\u00edcio conclu\u00eddo com sucesso! Ganhaste +10 XP.\");\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.btnStart.addEventListener('click', startLearning);\n            els.btnNext.addEventListener('click', nextLesson);\n            els.btnExercise.addEventListener('click', doExercise);\n\n            els.btnReset.addEventListener('click', function(){\n                if (confirm('Pretende restaurar o progresso padr\u00e3o?')) {\n                    state = JSON.parse(JSON.stringify(defaultState));\n                    saveState();\n                    render();\n                }\n            });\n\n            render();\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-2596","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages\/2596","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=2596"}],"version-history":[{"count":4,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages\/2596\/revisions"}],"predecessor-version":[{"id":2653,"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/pages\/2596\/revisions\/2653"}],"wp:attachment":[{"href":"https:\/\/app.digitalfreelancer.org\/index.php\/wp-json\/wp\/v2\/media?parent=2596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}