Escrita Fina – Sistema de Reda\u00e7\u00e3o e Gram\u00e1tica<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Definindo a fonte Inter como padr\u00e3o *\/\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8fafc; \/* Tailwind gray-50 *\/\n }\n \/* Custom scrollbar para um visual mais limpo *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background: #a78bfa; \/* lilas suave *\/\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #818cf8;\n }\n \/* Garantir que as views de painel ocupem todo o espa\u00e7o e o sidebar fique fixo *\/\n #professor-view, #aluno-view {\n display: flex;\n flex: 1;\n }\n\n \/* Classes para simular gr\u00e1ficos *\/\n .chart-container {\n height: 200px;\n width: 100%;\n display: flex;\n align-items: flex-end;\n border-left: 1px solid #ddd;\n border-bottom: 1px solid #ddd;\n padding: 5px;\n justify-content: space-around;\n }\n .chart-bar {\n width: 15%;\n background-color: #6d28d9;\n transition: height 0.5s;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n position: relative;\n }\n .chart-bar-label {\n position: absolute;\n top: -20px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.75rem;\n color: #6d28d9;\n font-weight: 600;\n }\n <\/style>\n <script>\n \/\/ Configura\u00e7\u00e3o do Tailwind com a paleta roxa\/lil\u00e1s\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n 'fina-purple': {\n 50: '#f5f3ff',\n 100: '#ede9fe',\n 600: '#6d28d9', \/* Roxo vibrante (Primary) *\/\n 700: '#5b21b6',\n 800: '#4c1d95',\n },\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n<\/head>\n<body class=\"min-h-screen bg-gray-50 flex flex-col\">\n\n \n <div id=\"app-container\" class=\"flex flex-1 w-full\">\n \n \n \n \n <div id=\"login-view\" class=\"flex-1 flex items-center justify-center p-4\">\n <div class=\"w-full max-w-lg bg-white p-8 rounded-2xl shadow-2xl border border-gray-100\">\n <div class=\"text-center mb-8\">\n <h1 class=\"text-4xl font-extrabold text-fina-purple-700\">Escrita Fina<\/h1>\n <p class=\"text-gray-500 mt-2\">Acesso ao Sistema de Reda\u00e7\u00e3o<\/p>\n <\/div>\n \n <form onsubmit=\"handleLogin(event)\" class=\"space-y-4\">\n <div class=\"mb-4\">\n <label for=\"email\" class=\"block text-sm font-medium text-gray-700\">Email<\/label>\n <input type=\"email\" id=\"email\" required value=\"user@email.com\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-fina-purple-600 focus:border-fina-purple-600\">\n <\/div>\n <div class=\"mb-6\">\n <label for=\"password\" class=\"block text-sm font-medium text-gray-700\">Senha<\/label>\n <input type=\"password\" id=\"password\" required value=\"123456\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-fina-purple-600 focus:border-fina-purple-600\">\n <\/div>\n \n \n <div class=\"pt-4 grid grid-cols-1 md:grid-cols-2 gap-4\">\n <button type=\"button\" onclick=\"login('professor')\" class=\"w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-lg font-semibold text-white bg-fina-purple-600 hover:bg-fina-purple-700 transition duration-150 transform hover:scale-[1.01]\">\n Entrar como Professor\n <\/button>\n <button type=\"button\" onclick=\"login('aluno')\" class=\"w-full flex justify-center py-3 px-4 border border-fina-purple-600 rounded-xl shadow-lg text-lg font-semibold text-fina-purple-600 bg-fina-purple-50 hover:bg-fina-purple-100 transition duration-150 transform hover:scale-[1.01]\">\n Entrar como Aluno\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"professor-view\" class=\"hidden w-full\">\n \n <aside class=\"w-64 bg-fina-purple-700 text-white flex flex-col h-screen sticky top-0 md:block\">\n <div class=\"p-6 text-2xl font-bold border-b border-fina-purple-800\">Professor<\/div>\n <nav class=\"flex-1 p-4 space-y-2 overflow-y-auto\">\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 bg-fina-purple-800 shadow-md\" data-page=\"home\">In\u00edcio<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"alunos\">Visualizar Alunos<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"redacoes\">Corrigir Reda\u00e7\u00f5es<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"adicionar-aluno\">Adicionar Aluno<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"arquivos\">Enviar Arquivos<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"agenda\">Agenda \/ Calend\u00e1rio<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"financeiro\">Financeiro \/ Pagamentos<\/a>\n <\/nav>\n <div class=\"p-4 border-t border-fina-purple-800\">\n <button onclick=\"logout()\" class=\"w-full py-2 px-4 bg-red-500 rounded-xl font-semibold hover:bg-red-600 transition duration-150\">Sair<\/button>\n <\/div>\n <\/aside>\n \n <main class=\"flex-1 p-4 md:p-8 overflow-y-auto\">\n <h2 class=\"text-3xl font-bold mb-6 text-fina-purple-600\" id=\"professor-page-title\">Bem-vindo, Professor(a)<\/h2>\n <div id=\"professor-content\" class=\"space-y-8\">\n \n \n <div data-page-content=\"home\">\n <p class=\"text-gray-600 mb-6\">Este \u00e9 o painel de controle principal. Use o menu lateral para gerenciar alunos e corre\u00e7\u00f5es.<\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl border border-fina-purple-100\">\n <p class=\"text-4xl font-extrabold text-fina-purple-600\">12<\/p>\n <p class=\"text-gray-500\">Alunos Ativos<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-xl border border-fina-purple-100\">\n <p class=\"text-4xl font-extrabold text-red-500\">5<\/p>\n <p class=\"text-gray-500\">Reda\u00e7\u00f5es Pendentes<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-xl border border-fina-purple-100\">\n <p class=\"text-4xl font-extrabold text-green-600\">R$ 4.500<\/p>\n <p class=\"text-gray-500\">Receita M\u00eas (Simulado)<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"alunos\" class=\"hidden\">\n <div id=\"aluno-list\" class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Lista de Alunos Cadastrados<\/h3>\n <ul class=\"space-y-3\">\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-fina-purple-50 rounded-xl border border-fina-purple-100\">\n <span class=\"font-medium text-gray-800\">Jo\u00e3o Silva<\/span> \n <span class=\"text-sm text-fina-purple-600 font-medium mt-1 sm:mt-0\">9 Reda\u00e7\u00f5es Enviadas<\/span>\n <\/li>\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-fina-purple-50 rounded-xl border border-fina-purple-100\">\n <span class=\"font-medium text-gray-800\">Maria Oliveira<\/span> \n <span class=\"text-sm text-fina-purple-600 font-medium mt-1 sm:mt-0\">12 Reda\u00e7\u00f5es Enviadas<\/span>\n <\/li>\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-fina-purple-50 rounded-xl border border-fina-purple-100\">\n <span class=\"font-medium text-gray-800\">Pedro Souza<\/span> \n <span class=\"text-sm text-fina-purple-600 font-medium mt-1 sm:mt-0\">4 Reda\u00e7\u00f5es Enviadas<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"redacoes\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl mb-6\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Reda\u00e7\u00f5es Pendentes de Corre\u00e7\u00e3o<\/h3>\n <ul class=\"space-y-3\">\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-red-50 rounded-xl border border-red-200\">\n <span class=\"font-medium text-gray-800\">Reda\u00e7\u00e3o: A Crise H\u00eddrica (Jo\u00e3o S.)<\/span>\n <button onclick=\"simulateCorrection('A Crise H\u00eddrica - Jo\u00e3o S.')\" class=\"py-1 px-3 mt-2 sm:mt-0 bg-fina-purple-600 text-white rounded-lg text-sm hover:bg-fina-purple-700 shadow-md\">Corrigir<\/button>\n <\/li>\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-red-50 rounded-xl border border-red-200\">\n <span class=\"font-medium text-gray-800\">Reda\u00e7\u00e3o: Impacto da IA (Maria O.)<\/span>\n <button onclick=\"simulateCorrection('Impacto da IA - Maria O.')\" class=\"py-1 px-3 mt-2 sm:mt-0 bg-fina-purple-600 text-white rounded-lg text-sm hover:bg-fina-purple-700 shadow-md\">Corrigir<\/button>\n <\/li>\n <\/ul>\n <\/div>\n \n \n <div id=\"correction-area\" class=\"mt-4 hidden p-6 border-4 border-fina-purple-200 rounded-2xl bg-fina-purple-50 shadow-inner\">\n <h4 class=\"text-2xl font-bold mb-4 text-fina-purple-800 border-b pb-2\">Corrigindo: <span id=\"correction-title\" class=\"text-fina-purple-600\"><\/span><\/h4>\n \n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n \n <div>\n <h5 class=\"text-lg font-semibold mb-2 text-gray-700\">Texto Original do Aluno<\/h5>\n <div id=\"essay-content\" class=\"h-64 overflow-y-auto p-4 bg-white rounded-lg border border-gray-300 shadow-sm text-sm text-gray-800 resize-none\">\n \n O impacto da intelig\u00eancia artificial na sociedade moderna se configura como um tema de profunda relev\u00e2ncia. A IA, ao passo que promove avan\u00e7os significativos, tamb\u00e9m introduz dilemas \u00e9ticos e sociais, especialmente no mercado de trabalho. \u00c9 imperativo que as pol\u00edticas p\u00fablicas acompanhem essa evolu\u00e7\u00e3o, garantindo a requalifica\u00e7\u00e3o profissional e a inclus\u00e3o digital para todos os cidad\u00e3os. A tecnologia deve ser uma ferramenta de equidade, e n\u00e3o de amplia\u00e7\u00e3o das desigualdades existentes.\n <\/div>\n <div class=\"mt-3 flex space-x-2\">\n <button onclick=\"simulateSavePDF('Reda\u00e7\u00e3o Aluno')\" class=\"py-2 px-4 text-sm bg-gray-500 text-white rounded-xl hover:bg-gray-600\">Baixar Reda\u00e7\u00e3o (PDF)<\/button>\n <\/div>\n <\/div>\n\n \n <div>\n <h5 class=\"text-lg font-semibold mb-2 text-fina-purple-700\">Feedback Detalhado e Nota<\/h5>\n \n \n <div class=\"flex items-center space-x-4 mb-4 bg-white p-3 rounded-xl shadow-md border border-fina-purple-100\">\n <label for=\"nota\" class=\"font-medium text-fina-purple-800\">Nota (0\/1000):<\/label>\n <input type=\"number\" id=\"nota\" min=\"0\" max=\"1000\" placeholder=\"Ex: 920\" class=\"w-24 px-3 py-2 border border-gray-300 rounded-lg focus:ring-fina-purple-600 focus:border-fina-purple-600\">\n <\/div>\n\n \n <textarea id=\"feedback-text\" placeholder=\"Insira o feedback detalhado, destacando pontos fortes e fracos em cada compet\u00eancia (Ex: C1: 180, C2: 200...)\" rows=\"8\" class=\"w-full p-4 border border-gray-300 rounded-lg focus:ring-fina-purple-600 focus:border-fina-purple-600 resize-none\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 mt-6 pt-4 border-t border-fina-purple-300\">\n <button onclick=\"simulateSaveCorrection()\" class=\"py-3 px-6 bg-green-500 text-white rounded-xl font-semibold hover:bg-green-600 transition duration-150 shadow-md\">\n Finalizar Corre\u00e7\u00e3o e Enviar Nota\n <\/button>\n <button onclick=\"simulateSavePDF('Corre\u00e7\u00e3o Detalhada')\" class=\"py-3 px-6 bg-gray-600 text-white rounded-xl font-semibold hover:bg-gray-700 transition duration-150 shadow-md\">\n Salvar PDF da Corre\u00e7\u00e3o (Modelo)\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"adicionar-aluno\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Formul\u00e1rio de Cadastro de Aluno<\/h3>\n <form class=\"space-y-4\">\n <div>\n <label for=\"new-student-name\" class=\"block text-sm font-medium text-gray-700\">Nome do Aluno<\/label>\n <input type=\"text\" id=\"new-student-name\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <\/div>\n <div>\n <label for=\"new-student-email\" class=\"block text-sm font-medium text-gray-700\">Email (Login)<\/label>\n <input type=\"email\" id=\"new-student-email\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <\/div>\n <button type=\"button\" onclick=\"simulateAddStudent()\" class=\"py-3 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 shadow-md\">Adicionar Aluno<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"arquivos\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Gerenciar Arquivos (Apostilas e Materiais)<\/h3>\n <div class=\"border-2 border-dashed border-fina-purple-300 p-6 rounded-xl bg-fina-purple-50 mb-6\">\n <p class=\"text-gray-700 mb-3 font-medium\">Selecione arquivos para enviar aos alunos:<\/p>\n <input type=\"file\" id=\"file-upload\" class=\"mb-4 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-fina-purple-100 file:text-fina-purple-700 hover:file:bg-fina-purple-200\"\/>\n <button onclick=\"simulateFileUpload()\" class=\"py-3 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 shadow-md\">Enviar Arquivo<\/button>\n <\/div>\n \n <h4 class=\"text-lg font-semibold mt-6 mb-3 border-b pb-2\">Arquivos Atuais Dispon\u00edveis<\/h4>\n <ul class=\"space-y-2 text-gray-600\">\n <li class=\"p-3 border rounded-xl flex justify-between items-center bg-gray-50\">\n <span>Apostila Gram\u00e1tica Avan\u00e7ada.pdf<\/span> \n <button onclick=\"simulateSavePDF('Apostila')\" class=\"text-xs text-fina-purple-600 hover:text-fina-purple-800 font-semibold\">Salvar PDF<\/button>\n <\/li>\n <li class=\"p-3 border rounded-xl flex justify-between items-center bg-gray-50\">\n <span>Guia de Coes\u00e3o e Coer\u00eancia.pdf<\/span> \n <button onclick=\"simulateSavePDF('Guia')\" class=\"text-xs text-fina-purple-600 hover:text-fina-purple-800 font-semibold\">Salvar PDF<\/button>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"agenda\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl mb-8\">\n <h3 class=\"text-xl font-semibold mb-4 text-fina-purple-700\">Gerenciamento de Prazos e Aulas<\/h3>\n \n \n <div class=\"border border-fina-purple-200 p-4 rounded-xl mb-6\">\n <h4 class=\"text-lg font-semibold mb-4 text-gray-700\">Setembro 2025<\/h4>\n <div class=\"grid grid-cols-7 text-center text-sm font-medium text-gray-500 mb-2\">\n <span>Dom<\/span><span>Seg<\/span><span>Ter<\/span><span>Qua<\/span><span>Qui<\/span><span>Sex<\/span><span>S\u00e1b<\/span>\n <\/div>\n <div class=\"grid grid-cols-7 gap-1 text-center\">\n \n <div class=\"py-2 text-gray-400\">29<\/div><div class=\"py-2 text-gray-400\">30<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">1<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg relative\">\n 2\n <span class=\"absolute bottom-1 left-1\/2 transform -translate-x-1\/2 w-1.5 h-1.5 bg-fina-purple-600 rounded-full\" title=\"Aula ao Vivo\"><\/span>\n <\/div>\n \n <div class=\"py-2 text-white bg-fina-purple-600 rounded-full w-8 h-8 flex items-center justify-center mx-auto shadow-md\">3<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg relative\">\n 4\n <span class=\"absolute bottom-1 left-1\/2 transform -translate-x-1\/2 w-1.5 h-1.5 bg-red-500 rounded-full\" title=\"Prazo de Reda\u00e7\u00e3o\"><\/span>\n <\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">5<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">6<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">7<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">8<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">9<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">10<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">11<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">12<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">13<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">14<\/div>\n <\/div>\n <\/div>\n\n \n <h4 class=\"text-lg font-semibold mb-3 border-b pb-2 text-fina-purple-600\">Adicionar Novo Evento<\/h4>\n <form class=\"space-y-3\">\n <div>\n <input type=\"text\" id=\"event-title\" placeholder=\"T\u00edtulo do Evento (ex: Prazo Final Reda\u00e7\u00e3o)\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <\/div>\n <div class=\"flex space-x-4\">\n <input type=\"date\" id=\"event-date\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <select id=\"event-type\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <option>Prazo<\/option>\n <option>Aula ao Vivo<\/option>\n <option>Reuni\u00e3o<\/option>\n <\/select>\n <\/div>\n <button type=\"button\" onclick=\"simulateAddEvent('professor')\" class=\"py-3 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 shadow-md\">Adicionar \u00e0 Agenda<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"financeiro\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl mb-8\">\n <h3 class=\"text-xl font-semibold mb-4 text-fina-purple-700\">Controle de Vencimentos e Comprovantes<\/h3>\n \n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n <div class=\"bg-green-50 p-4 rounded-xl border border-green-200\">\n <p class=\"text-lg font-medium text-green-700\">Pagamentos em Dia<\/p>\n <p class=\"text-3xl font-extrabold text-green-600\">10\/12<\/p>\n <\/div>\n <div class=\"bg-red-50 p-4 rounded-xl border border-red-200\">\n <p class=\"text-lg font-medium text-red-700\">Pendentes (Vencidos)<\/p>\n <p class=\"text-3xl font-extrabold text-red-600\">2<\/p>\n <\/div>\n <div class=\"bg-fina-purple-50 p-4 rounded-xl border border-fina-purple-200\">\n <p class=\"text-lg font-medium text-fina-purple-700\">Comprovantes Recebidos<\/p>\n <p class=\"text-3xl font-extrabold text-fina-purple-600\">1<\/p>\n <\/div>\n <\/div>\n\n \n <h4 class=\"text-lg font-semibold mb-3 border-b pb-2 text-fina-purple-600\">Status de Pagamento dos Alunos (Setembro)<\/h4>\n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full divide-y divide-gray-200\">\n <thead class=\"bg-fina-purple-50\">\n <tr>\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Aluno<\/th>\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Status<\/th>\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Vencimento<\/th>\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">A\u00e7\u00e3o<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"bg-white divide-y divide-gray-200\">\n <tr id=\"aluno-joao\">\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">Jo\u00e3o Silva<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold\">Pago<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">01\/09<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium\">\n <button onclick=\"simulateComprovante('Jo\u00e3o Silva')\" class=\"text-fina-purple-600 hover:text-fina-purple-800 text-xs font-semibold\">Ver Comprovante<\/button>\n <\/td>\n <\/tr>\n <tr id=\"aluno-maria\" class=\"bg-red-50\">\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">Maria Oliveira<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold\">Pendente<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">01\/09<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm space-x-2\">\n <button onclick=\"simulateBaixa('Maria Oliveira')\" class=\"text-green-600 hover:text-green-800 text-xs font-semibold\">Dar Baixa<\/button>\n <button onclick=\"simulateComprovante('Maria Oliveira')\" class=\"text-fina-purple-600 hover:text-fina-purple-800 text-xs font-semibold\">Ver Comprovante<\/button>\n <\/td>\n <\/tr>\n <tr id=\"aluno-pedro\" class=\"bg-yellow-50\">\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">Pedro Souza<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-yellow-600 font-semibold\">Aguardando<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">05\/10<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm space-x-2\">\n <button onclick=\"simulateBaixa('Pedro Souza')\" class=\"text-green-600 hover:text-green-800 text-xs font-semibold\">Dar Baixa<\/button>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"professor-notification\" class=\"fixed bottom-4 right-4 bg-green-500 text-white p-4 rounded-xl shadow-xl hidden transition-opacity duration-300 opacity-0\">Mensagem de Sucesso!<\/div>\n <\/div>\n <\/main>\n <\/div>\n\n \n \n \n <div id=\"aluno-view\" class=\"hidden w-full\">\n \n <aside class=\"w-64 bg-fina-purple-700 text-white flex flex-col h-screen sticky top-0 md:block\">\n <div class=\"p-6 text-2xl font-bold border-b border-fina-purple-800\">Aluno<\/div>\n <nav class=\"flex-1 p-4 space-y-2 overflow-y-auto\">\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 bg-fina-purple-800 shadow-md\" data-page=\"desempenho\">Acompanhamento<\/a>\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"escrever-redacao\">Escrever Reda\u00e7\u00e3o<\/a>\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"aulas-dicas\">Aulas e Dicas<\/a>\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"agenda\">Minha Agenda<\/a>\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"financeiro\">Meus Vencimentos<\/a>\n <\/nav>\n <div class=\"p-4 border-t border-fina-purple-800\">\n <button onclick=\"logout()\" class=\"w-full py-2 px-4 bg-red-500 rounded-xl font-semibold hover:bg-red-600 transition duration-150\">Sair<\/button>\n <\/div>\n <\/aside>\n \n <main class=\"flex-1 p-4 md:p-8 overflow-y-auto\">\n <h2 class=\"text-3xl font-bold mb-6 text-fina-purple-600\" id=\"aluno-page-title\">Bem-vindo(a), Aluno(a)<\/h2>\n <div id=\"aluno-content\" class=\"space-y-8\">\n \n \n <div data-page-content=\"desempenho\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Seu Desempenho Recente<\/h3>\n \n \n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-8\">\n <div class=\"bg-fina-purple-50 p-4 rounded-xl border-4 border-fina-purple-100 text-center\">\n <p class=\"text-lg text-gray-500 font-medium\">M\u00e9dia:<\/p>\n <p class=\"text-3xl font-extrabold text-fina-purple-600\">880<\/p>\n <\/div>\n <div class=\"bg-green-50 p-4 rounded-xl border-4 border-green-100 text-center\">\n <p class=\"text-lg text-gray-500 font-medium\">Melhor Nota:<\/p>\n <p class=\"text-3xl font-extrabold text-green-600\">920<\/p>\n <\/div>\n <div class=\"bg-red-50 p-4 rounded-xl border-4 border-red-100 text-center\">\n <p class=\"text-lg text-gray-500 font-medium\">\u00daltima Nota:<\/p>\n <p class=\"text-3xl font-extrabold text-red-600\">840<\/p>\n <\/div>\n <div class=\"bg-yellow-50 p-4 rounded-xl border-4 border-yellow-100 text-center\">\n <p class=\"text-lg text-gray-500 font-medium\">Reda\u00e7\u00f5es Enviadas:<\/p>\n <p class=\"text-3xl font-extrabold text-yellow-600\">14<\/p>\n <\/div>\n <\/div>\n \n \n <h4 class=\"font-bold text-gray-700 mb-4 border-b pb-2\">Evolu\u00e7\u00e3o das Notas (\u00daltimos 5 Envios)<\/h4>\n <div class=\"chart-container mb-8\">\n <div class=\"chart-bar\" style=\"height: 60%;\" title=\"800\/1000\"><span class=\"chart-bar-label\">800<\/span><\/div>\n <div class=\"chart-bar\" style=\"height: 85%; background-color: #f59e0b;\" title=\"850\/1000\"><span class=\"chart-bar-label\">850<\/span><\/div>\n <div class=\"chart-bar\" style=\"height: 90%;\" title=\"900\/1000\"><span class=\"chart-bar-label\">900<\/span><\/div>\n <div class=\"chart-bar\" style=\"height: 95%; background-color: #10b981;\" title=\"950\/1000\"><span class=\"chart-bar-label\">950<\/span><\/div>\n <div class=\"chart-bar\" style=\"height: 84%; background-color: #ef4444;\" title=\"840\/1000\"><span class=\"chart-bar-label\">840<\/span><\/div>\n <\/div>\n <div class=\"flex justify-between text-xs text-gray-500 px-6\">\n <span>Reda\u00e7\u00e3o #10<\/span>\n <span>Reda\u00e7\u00e3o #11<\/span>\n <span>Reda\u00e7\u00e3o #12<\/span>\n <span>Reda\u00e7\u00e3o #13<\/span>\n <span>Reda\u00e7\u00e3o #14<\/span>\n <\/div>\n \n \n <h4 class=\"font-bold text-gray-700 mt-8 mb-3 border-b pb-2\">Detalhe das Reda\u00e7\u00f5es Corrigidas:<\/h4>\n <ul class=\"space-y-3\">\n <li class=\"p-4 bg-green-50 rounded-xl flex justify-between items-center border border-green-200 shadow-sm\">\n <span class=\"font-medium\">Reda\u00e7\u00e3o #13: Impacto da IA<\/span> \n <span class=\"font-bold text-green-700 text-lg\">920\/1000<\/span>\n <\/li>\n <li class=\"p-4 bg-red-50 rounded-xl flex justify-between items-center border border-red-200 shadow-sm\">\n <span class=\"font-medium\">Reda\u00e7\u00e3o #14: A Crise H\u00eddrica<\/span> \n <span class=\"font-bold text-red-700 text-lg\">840\/1000<\/span>\n <\/li>\n <li class=\"p-4 bg-green-50 rounded-xl flex justify-between items-center border border-green-200 shadow-sm\">\n <span class=\"font-medium\">Reda\u00e7\u00e3o #12: O Meio Ambiente<\/span> \n <span class=\"font-bold text-green-700 text-lg\">900\/1000<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n \n <div data-page-content=\"escrever-redacao\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">\u00c1rea de Escrita: Reda\u00e7\u00e3o para o ENEM<\/h3>\n <textarea id=\"essay-text\" placeholder=\"Comece a escrever sua reda\u00e7\u00e3o aqui. Tente atingir no m\u00ednimo 50 palavras para enviar a simula\u00e7\u00e3o...\" rows=\"15\" class=\"w-full p-4 border-2 border-gray-300 rounded-lg focus:ring-fina-purple-600 focus:border-fina-purple-600 resize-none shadow-inner\"><\/textarea>\n <div class=\"mt-4 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4\">\n <button onclick=\"simulateSubmitEssay()\" class=\"py-3 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 shadow-md\">Enviar para Corre\u00e7\u00e3o<\/button>\n <button onclick=\"simulateSavePDF('Minha Reda\u00e7\u00e3o')\" class=\"py-3 px-6 bg-gray-600 text-white rounded-xl font-semibold hover:bg-gray-700 shadow-md\">Salvar Rascunho em PDF (Simulado)<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"aulas-dicas\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Materiais de Apoio e Videoaulas<\/h3>\n <div class=\"space-y-4\">\n <details class=\"border border-fina-purple-200 p-4 rounded-xl bg-fina-purple-50 shadow-sm\">\n <summary class=\"font-bold cursor-pointer text-fina-purple-800 text-lg\">Aula 1: Estrutura do Texto Dissertativo-Argumentativo<\/summary>\n <p class=\"pt-2 text-gray-600 border-t border-fina-purple-100 mt-2\">Aprenda a construir uma introdu\u00e7\u00e3o forte, desenvolver argumentos e finalizar com uma proposta de interven\u00e7\u00e3o eficaz.<\/p>\n <a href=\"#\" onclick=\"simulateDownload('Estrutura')\" class=\"text-sm text-blue-600 hover:text-blue-800 mt-2 block font-medium\">Acessar Videoaula (Simulado)<\/a>\n <\/details>\n <details class=\"border border-fina-purple-200 p-4 rounded-xl bg-fina-purple-50 shadow-sm\">\n <summary class=\"font-bold cursor-pointer text-fina-purple-800 text-lg\">Dica R\u00e1pida: Uso da V\u00edrgula<\/summary>\n <p class=\"pt-2 text-gray-600 border-t border-fina-purple-100 mt-2\">Evite erros comuns: a v\u00edrgula n\u00e3o separa sujeito de predicado. Use-a para intercala\u00e7\u00f5es e enumera\u00e7\u00f5es.<\/p>\n <a href=\"#\" onclick=\"simulateDownload('Virgula')\" class=\"text-sm text-blue-600 hover:text-blue-800 mt-2 block font-medium\">Baixar Dica em PDF (Simulado)<\/a>\n <\/details>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"agenda\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl mb-8\">\n <h3 class=\"text-xl font-semibold mb-4 text-fina-purple-700\">Pr\u00f3ximos Prazos e Aulas<\/h3>\n \n \n <div class=\"border border-fina-purple-200 p-4 rounded-xl mb-6\">\n <h4 class=\"text-lg font-semibold mb-4 text-gray-700\">Setembro 2025<\/h4>\n <div class=\"grid grid-cols-7 text-center text-sm font-medium text-gray-500 mb-2\">\n <span>Dom<\/span><span>Seg<\/span><span>Ter<\/span><span>Qua<\/span><span>Qui<\/span><span>Sex<\/span><span>S\u00e1b<\/span>\n <\/div>\n <div class=\"grid grid-cols-7 gap-1 text-center\">\n \n <div class=\"py-2 text-gray-400\">29<\/div><div class=\"py-2 text-gray-400\">30<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">1<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg relative\">\n 2\n <span class=\"absolute bottom-1 left-1\/2 transform -translate-x-1\/2 w-1.5 h-1.5 bg-fina-purple-600 rounded-full\" title=\"Aula ao Vivo\"><\/span>\n <\/div>\n \n <div class=\"py-2 text-white bg-fina-purple-600 rounded-full w-8 h-8 flex items-center justify-center mx-auto shadow-md\">3<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg relative\">\n 4\n <span class=\"absolute bottom-1 left-1\/2 transform -translate-x-1\/2 w-1.5 h-1.5 bg-red-500 rounded-full\" title=\"Prazo de Reda\u00e7\u00e3o\"><\/span>\n <\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">5<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">6<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">7<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">8<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">9<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">10<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">11<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">12<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">13<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">14<\/div>\n <\/div>\n <\/div>\n\n \n <h4 class=\"text-lg font-semibold mb-3 border-b pb-2 text-fina-purple-600\">Detalhes dos Eventos<\/h4>\n <ul class=\"space-y-3\">\n <li class=\"p-3 border rounded-xl bg-red-50 border-red-200\">\n <p class=\"font-medium text-red-700\">04\/09: Prazo Final – Tema “O Impacto da Tecnologia”<\/p>\n <p class=\"text-sm text-gray-600\">Lembre-se de enviar sua reda\u00e7\u00e3o antes das 23:59h.<\/p>\n <\/li>\n <li class=\"p-3 border rounded-xl bg-fina-purple-50 border-fina-purple-200\">\n <p class=\"font-medium text-fina-purple-700\">02\/09: Aula ao Vivo – Gram\u00e1tica: Concord\u00e2ncia Verbal<\/p>\n <p class=\"text-sm text-gray-600\">Hor\u00e1rio: 19:00h. Link de acesso dispon\u00edvel na se\u00e7\u00e3o Aulas.<\/p>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"financeiro\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 text-fina-purple-700\">Meus Vencimentos e Comprovantes<\/h3>\n \n \n <div class=\"bg-red-50 p-6 rounded-xl mb-6 border-4 border-red-200 flex justify-between items-center flex-wrap\">\n <div>\n <p class=\"text-lg text-red-700 font-medium\">Aten\u00e7\u00e3o: Mensalidade de Setembro<\/p>\n <p class=\"text-4xl font-extrabold text-red-600\">R$ 300,00<\/p>\n <p class=\"text-sm text-red-500 mt-1\">Status: **PENDENTE** (Vencida em 01\/09)<\/p>\n <\/div>\n \n \n <div class=\"mt-4 sm:mt-0 w-full sm:w-auto p-4 bg-white rounded-lg border border-red-300 shadow-inner\">\n <p class=\"font-medium mb-2 text-gray-700\">Enviar Comprovante de Pagamento:<\/p>\n <input type=\"file\" id=\"comprovante-upload-aluno\" class=\"mb-2 block w-full text-sm text-gray-500 file:mr-4 file:py-1 file:px-3 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-fina-purple-100 file:text-fina-purple-700 hover:file:bg-fina-purple-200\"\/>\n <button onclick=\"simulateUploadComprovante()\" class=\"w-full py-2 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 transition duration-150 shadow-md\">\n Enviar\n <\/button>\n <\/div>\n <\/div>\n\n \n <h4 class=\"text-lg font-semibold mb-3 border-b pb-2 text-fina-purple-600\">Hist\u00f3rico de Pagamentos<\/h4>\n <ul class=\"space-y-3\">\n <li class=\"p-3 border rounded-xl flex justify-between items-center bg-green-50 border-green-200\">\n <span class=\"font-medium text-gray-800\">Mensalidade Agosto (R$ 300,00)<\/span> \n <span class=\"text-green-600 font-semibold\">Pago em 30\/07<\/span>\n <\/li>\n <li class=\"p-3 border rounded-xl flex justify-between items-center bg-yellow-50 border-yellow-200\">\n <span class=\"font-medium text-gray-800\">Mensalidade Julho (R$ 300,00)<\/span> \n <span class=\"text-yellow-700 font-semibold\">Aguardando Baixa (Comprovante Enviado)<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div id=\"aluno-notification\" class=\"fixed bottom-4 right-4 bg-green-500 text-white p-4 rounded-xl shadow-xl hidden transition-opacity duration-300 opacity-0\">Mensagem de Sucesso!<\/div>\n <\/div>\n <\/main>\n <\/div>\n\n <\/div>\n \n <script>\n \/\/ Vari\u00e1veis de Estado\n let currentRole = 'guest'; \/\/ 'guest', 'professor', 'aluno'\n\n \/\/ --- Fun\u00e7\u00f5es de Controle de Visualiza\u00e7\u00e3o ---\n\n \/**\n * Controla qual das tr\u00eas visualiza\u00e7\u00f5es principais (login, professor, aluno) est\u00e1 ativa.\n *\/\n function setView(viewId) {\n \/\/ Oculta todas as visualiza\u00e7\u00f5es principais\n document.getElementById('login-view').classList.add('hidden');\n document.getElementById('professor-view').classList.add('hidden');\n document.getElementById('aluno-view').classList.add('hidden');\n \n \/\/ Exibe a visualiza\u00e7\u00e3o solicitada\n const viewElement = document.getElementById(viewId);\n if (viewElement) {\n viewElement.classList.remove('hidden');\n \/\/ Garante que o container flex\u00edvel esteja vis\u00edvel para os pain\u00e9is\n if (viewId === 'professor-view' || viewId === 'aluno-view') {\n document.getElementById('app-container').classList.add('flex');\n } else {\n document.getElementById('app-container').classList.remove('flex');\n }\n }\n }\n\n \/\/ --- Fun\u00e7\u00f5es de Utilidade (Notifica\u00e7\u00e3o e Simula\u00e7\u00e3o) ---\n\n function showNotification(message, role, isError = false) {\n const notificationEl = document.getElementById(`${role}-notification`);\n if (notificationEl) {\n notificationEl.textContent = message;\n \n \/\/ Define cores da notifica\u00e7\u00e3o\n notificationEl.classList.remove('hidden', 'opacity-0', 'bg-green-500', 'bg-red-500');\n if (isError) {\n notificationEl.classList.add('bg-red-500');\n } else {\n notificationEl.classList.add('bg-green-500');\n }\n \n notificationEl.classList.add('opacity-100');\n \n setTimeout(() => {\n notificationEl.classList.remove('opacity-100');\n notificationEl.classList.add('opacity-0');\n setTimeout(() => {\n notificationEl.classList.add('hidden');\n }, 300);\n }, 3000);\n }\n }\n\n function simulateCorrection(title) {\n document.getElementById('correction-title').textContent = title;\n document.getElementById('correction-area').classList.remove('hidden');\n showNotification(`Carregando reda\u00e7\u00e3o de \"${title}\".`, 'professor');\n \/\/ Resetando campos para simular o carregamento de uma nova corre\u00e7\u00e3o\n document.getElementById('nota').value = '';\n document.getElementById('feedback-text').value = '';\n \/\/ Texto original simulado\n document.getElementById('essay-content').textContent = \"O impacto da intelig\u00eancia artificial na sociedade moderna se configura como um tema de profunda relev\u00e2ncia. A IA, ao passo que promove avan\u00e7os significativos, tamb\u00e9m introduz dilemas \u00e9ticos e sociais, especialmente no mercado de trabalho. \u00c9 imperativo que as pol\u00edticas p\u00fablicas acompanhem essa evolu\u00e7\u00e3o, garantindo a requalifica\u00e7\u00e3o profissional e a inclus\u00e3o digital para todos os cidad\u00e3os. A tecnologia deve ser uma ferramenta de equidade, e n\u00e3o de amplia\u00e7\u00e3o das desigualdades existentes.\";\n \n document.getElementById('correction-area').scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n\n function simulateSaveCorrection() {\n const nota = document.getElementById('nota').value;\n const feedback = document.getElementById('feedback-text').value;\n\n if (nota && feedback) {\n document.getElementById('correction-area').classList.add('hidden');\n showNotification(`Corre\u00e7\u00e3o e nota ${nota}\/1000 salvas com sucesso! Aluno notificado.`, 'professor');\n } else {\n showNotification('Preencha a nota e o feedback detalhado.', 'professor', true);\n }\n }\n \n function simulateAddStudent() {\n const name = document.getElementById('new-student-name').value;\n const email = document.getElementById('new-student-email').value;\n if (name && email) {\n showNotification(`Aluno(a) \"${name}\" adicionado(a). (Simulado)`, 'professor');\n document.getElementById('new-student-name').value = '';\n document.getElementById('new-student-email').value = '';\n } else {\n showNotification('Preencha nome e email do aluno.', 'professor', true);\n }\n }\n \n function simulateFileUpload() {\n const fileInput = document.getElementById('file-upload');\n if (fileInput.files.length > 0) {\n const fileName = fileInput.files[0].name;\n showNotification(`Arquivo \"${fileName}\" enviado com sucesso! (Simulado)`, 'professor');\n } else {\n showNotification('Selecione um arquivo para enviar.', 'professor', true);\n }\n }\n\n function simulateSavePDF(item) {\n const textToCopy = `[Simula\u00e7\u00e3o de Download PDF] O item \"${item}\" seria baixado.`;\n const tempInput = document.createElement('textarea');\n tempInput.value = textToCopy;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand('copy');\n document.body.removeChild(tempInput);\n \n const role = (currentRole === 'professor') ? 'professor' : 'aluno';\n showNotification(`Simula\u00e7\u00e3o: PDF de \"${item}\" copiado para a \u00e1rea de transfer\u00eancia.`, role);\n }\n\n function simulateSubmitEssay() {\n const essay = document.getElementById('essay-text').value;\n if (essay.length > 50) {\n showNotification('Reda\u00e7\u00e3o enviada com sucesso! Aguarde a corre\u00e7\u00e3o.', 'aluno');\n document.getElementById('essay-text').value = ''; \n } else {\n showNotification('Escreva pelo menos 50 caracteres para simular o envio.', 'aluno', true);\n }\n }\n\n function simulateDownload(item) {\n showNotification(`Material \"${item}\" acessado\/baixado. (Simulado)`, 'aluno');\n }\n \n function simulateAddEvent(role) {\n const title = document.getElementById('event-title').value;\n const date = document.getElementById('event-date').value;\n const type = document.getElementById('event-type').value;\n\n if (title && date) {\n showNotification(`Evento \"${title}\" (${type}) em ${date} adicionado com sucesso!`, role);\n document.getElementById('event-title').value = '';\n document.getElementById('event-date').value = '';\n } else {\n showNotification('Preencha o t\u00edtulo e a data do evento.', role, true);\n }\n }\n\n function simulateUploadComprovante() {\n const fileInput = document.getElementById('comprovante-upload-aluno');\n if (fileInput.files.length > 0) {\n const fileName = fileInput.files[0].name;\n showNotification(`Comprovante \"${fileName}\" enviado para an\u00e1lise. Aguarde a baixa do Professor.`, 'aluno');\n } else {\n showNotification('Selecione um arquivo para enviar o comprovante.', 'aluno', true);\n }\n }\n\n \/\/ Fun\u00e7\u00f5es espec\u00edficas do Professor (Financeiro)\n function simulateBaixa(aluno) {\n showNotification(`Pagamento de ${aluno} marcado como RECEBIDO.`, 'professor');\n \/\/ Em um app real, aqui o status do aluno seria atualizado no banco de dados.\n }\n\n function simulateComprovante(aluno) {\n const textToCopy = `[Simula\u00e7\u00e3o: Comprovante de Pagamento de ${aluno}]`;\n const tempInput = document.createElement('textarea');\n tempInput.value = textToCopy;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand('copy');\n document.body.removeChild(tempInput);\n showNotification(`Link\/PDF do comprovante de ${aluno} copiado para a \u00e1rea de transfer\u00eancia.`, 'professor');\n }\n\n\n \/\/ --- Fun\u00e7\u00f5es de Navega\u00e7\u00e3o e Autentica\u00e7\u00e3o ---\n\n \/\/ Atualiza o conte\u00fado do Painel do Professor\n function updateProfessorView(page) {\n document.querySelectorAll('#professor-content [data-page-content]').forEach(el => el.classList.add('hidden'));\n document.querySelector(`#professor-content [data-page-content=\"${page}\"]`).classList.remove('hidden');\n \n let title = '';\n switch(page) {\n case 'home': title = 'Painel Principal'; break;\n case 'alunos': title = 'Visualizar Alunos'; break;\n case 'redacoes': title = 'Corrigir Reda\u00e7\u00f5es'; document.getElementById('correction-area').classList.add('hidden'); break;\n case 'adicionar-aluno': title = 'Adicionar Novo Aluno'; break;\n case 'arquivos': title = 'Gerenciar Arquivos'; break;\n case 'agenda': title = 'Agenda e Eventos'; break;\n case 'financeiro': title = 'Controle de Vencimentos'; break; \n }\n document.getElementById('professor-page-title').textContent = title;\n \n document.querySelectorAll('.nav-item-professor').forEach(item => {\n item.classList.remove('bg-fina-purple-800', 'shadow-md');\n if (item.getAttribute('data-page') === page) {\n item.classList.add('bg-fina-purple-800', 'shadow-md');\n }\n });\n }\n \n \/\/ Atualiza o conte\u00fado do Painel do Aluno\n function updateAlunoView(page) {\n document.querySelectorAll('#aluno-content [data-page-content]').forEach(el => el.classList.add('hidden'));\n document.querySelector(`#aluno-content [data-page-content=\"${page}\"]`).classList.remove('hidden');\n\n let title = '';\n switch(page) {\n case 'desempenho': title = 'Acompanhamento de Desempenho'; break;\n case 'escrever-redacao': title = '\u00c1rea de Escrita'; break;\n case 'aulas-dicas': title = 'Aulas e Dicas'; break;\n case 'agenda': title = 'Minha Agenda de Estudos'; break;\n case 'financeiro': title = 'Meus Vencimentos e Comprovantes'; break; \n }\n document.getElementById('aluno-page-title').textContent = title;\n\n document.querySelectorAll('.nav-item-aluno').forEach(item => {\n item.classList.remove('bg-fina-purple-800', 'shadow-md');\n if (item.getAttribute('data-page') === page) {\n item.classList.add('bg-fina-purple-800', 'shadow-md');\n }\n });\n }\n\n \/\/ Fun\u00e7\u00e3o principal de Login\n function login(role) {\n currentRole = role;\n \n if (role === 'professor') {\n setView('professor-view');\n updateProfessorView('home'); \n } else if (role === 'aluno') {\n setView('aluno-view');\n updateAlunoView('desempenho'); \n }\n \n const roleName = role === 'professor' ? 'Professor(a)' : 'Aluno(a)';\n showNotification(`Login efetuado como ${roleName}. Bem-vindo(a)!`, role);\n }\n\n \/\/ Fun\u00e7\u00e3o de Logout\n function logout() {\n currentRole = 'guest';\n setView('login-view');\n }\n\n \/\/ Impede o envio padr\u00e3o do formul\u00e1rio (que recarregaria a p\u00e1gina)\n function handleLogin(event) {\n event.preventDefault(); \n }\n\n \/\/ --- Inicializa\u00e7\u00e3o de Listeners no carregamento da p\u00e1gina ---\n window.onload = () => {\n \/\/ Define a tela inicial (Login)\n setView('login-view');\n \n \/\/ Listeners para os links do Professor\n document.querySelectorAll('.nav-item-professor').forEach(item => {\n item.addEventListener('click', (e) => {\n e.preventDefault();\n updateProfessorView(e.target.getAttribute('data-page'));\n });\n });\n\n \/\/ Listeners para os links do Aluno\n document.querySelectorAll('.nav-item-aluno').forEach(item => {\n item.addEventListener('click', (e) => {\n e.preventDefault();\n updateAlunoView(e.target.getAttribute('data-page'));\n });\n });\n };\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Escrita Fina – Sistema de Reda\u00e7\u00e3o e Gram\u00e1tica Escrita Fina Acesso ao Sistema de Reda\u00e7\u00e3o Email Senha Entrar como Professor Entrar como Aluno Professor In\u00edcio Visualizar Alunos Corrigir Reda\u00e7\u00f5es Adicionar Aluno Enviar Arquivos Agenda \/ Calend\u00e1rio Financeiro \/ Pagamentos Sair Bem-vindo, Professor(a) Este \u00e9 o painel de controle principal. Use o menu lateral para gerenciar […]<\/p>\n","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-1236","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1236"}],"version-history":[{"count":5,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1236\/revisions"}],"predecessor-version":[{"id":1257,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1236\/revisions\/1257"}],"wp:attachment":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1236,"date":"2025-09-29T13:21:11","date_gmt":"2025-09-29T16:21:11","guid":{"rendered":"https:\/\/get84.com.br\/?page_id=1236"},"modified":"2025-09-29T14:42:15","modified_gmt":"2025-09-29T17:42:15","slug":"escrita-fina","status":"publish","type":"page","link":"https:\/\/get84.com.br\/index.php\/escrita-fina\/","title":{"rendered":"Escrita Fina"},"content":{"rendered":"\n\n\n\n \n \n Escrita Fina – Sistema de Reda\u00e7\u00e3o e Gram\u00e1tica<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Definindo a fonte Inter como padr\u00e3o *\/\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f8fafc; \/* Tailwind gray-50 *\/\n }\n \/* Custom scrollbar para um visual mais limpo *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background: #a78bfa; \/* lilas suave *\/\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #818cf8;\n }\n \/* Garantir que as views de painel ocupem todo o espa\u00e7o e o sidebar fique fixo *\/\n #professor-view, #aluno-view {\n display: flex;\n flex: 1;\n }\n\n \/* Classes para simular gr\u00e1ficos *\/\n .chart-container {\n height: 200px;\n width: 100%;\n display: flex;\n align-items: flex-end;\n border-left: 1px solid #ddd;\n border-bottom: 1px solid #ddd;\n padding: 5px;\n justify-content: space-around;\n }\n .chart-bar {\n width: 15%;\n background-color: #6d28d9;\n transition: height 0.5s;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n position: relative;\n }\n .chart-bar-label {\n position: absolute;\n top: -20px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.75rem;\n color: #6d28d9;\n font-weight: 600;\n }\n <\/style>\n <script>\n \/\/ Configura\u00e7\u00e3o do Tailwind com a paleta roxa\/lil\u00e1s\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n 'fina-purple': {\n 50: '#f5f3ff',\n 100: '#ede9fe',\n 600: '#6d28d9', \/* Roxo vibrante (Primary) *\/\n 700: '#5b21b6',\n 800: '#4c1d95',\n },\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n<\/head>\n<body class=\"min-h-screen bg-gray-50 flex flex-col\">\n\n \n <div id=\"app-container\" class=\"flex flex-1 w-full\">\n \n \n \n \n <div id=\"login-view\" class=\"flex-1 flex items-center justify-center p-4\">\n <div class=\"w-full max-w-lg bg-white p-8 rounded-2xl shadow-2xl border border-gray-100\">\n <div class=\"text-center mb-8\">\n <h1 class=\"text-4xl font-extrabold text-fina-purple-700\">Escrita Fina<\/h1>\n <p class=\"text-gray-500 mt-2\">Acesso ao Sistema de Reda\u00e7\u00e3o<\/p>\n <\/div>\n \n <form onsubmit=\"handleLogin(event)\" class=\"space-y-4\">\n <div class=\"mb-4\">\n <label for=\"email\" class=\"block text-sm font-medium text-gray-700\">Email<\/label>\n <input type=\"email\" id=\"email\" required value=\"user@email.com\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-fina-purple-600 focus:border-fina-purple-600\">\n <\/div>\n <div class=\"mb-6\">\n <label for=\"password\" class=\"block text-sm font-medium text-gray-700\">Senha<\/label>\n <input type=\"password\" id=\"password\" required value=\"123456\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-fina-purple-600 focus:border-fina-purple-600\">\n <\/div>\n \n \n <div class=\"pt-4 grid grid-cols-1 md:grid-cols-2 gap-4\">\n <button type=\"button\" onclick=\"login('professor')\" class=\"w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-lg font-semibold text-white bg-fina-purple-600 hover:bg-fina-purple-700 transition duration-150 transform hover:scale-[1.01]\">\n Entrar como Professor\n <\/button>\n <button type=\"button\" onclick=\"login('aluno')\" class=\"w-full flex justify-center py-3 px-4 border border-fina-purple-600 rounded-xl shadow-lg text-lg font-semibold text-fina-purple-600 bg-fina-purple-50 hover:bg-fina-purple-100 transition duration-150 transform hover:scale-[1.01]\">\n Entrar como Aluno\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"professor-view\" class=\"hidden w-full\">\n \n <aside class=\"w-64 bg-fina-purple-700 text-white flex flex-col h-screen sticky top-0 md:block\">\n <div class=\"p-6 text-2xl font-bold border-b border-fina-purple-800\">Professor<\/div>\n <nav class=\"flex-1 p-4 space-y-2 overflow-y-auto\">\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 bg-fina-purple-800 shadow-md\" data-page=\"home\">In\u00edcio<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"alunos\">Visualizar Alunos<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"redacoes\">Corrigir Reda\u00e7\u00f5es<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"adicionar-aluno\">Adicionar Aluno<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"arquivos\">Enviar Arquivos<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"agenda\">Agenda \/ Calend\u00e1rio<\/a>\n <a href=\"#\" class=\"nav-item-professor block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"financeiro\">Financeiro \/ Pagamentos<\/a>\n <\/nav>\n <div class=\"p-4 border-t border-fina-purple-800\">\n <button onclick=\"logout()\" class=\"w-full py-2 px-4 bg-red-500 rounded-xl font-semibold hover:bg-red-600 transition duration-150\">Sair<\/button>\n <\/div>\n <\/aside>\n \n <main class=\"flex-1 p-4 md:p-8 overflow-y-auto\">\n <h2 class=\"text-3xl font-bold mb-6 text-fina-purple-600\" id=\"professor-page-title\">Bem-vindo, Professor(a)<\/h2>\n <div id=\"professor-content\" class=\"space-y-8\">\n \n \n <div data-page-content=\"home\">\n <p class=\"text-gray-600 mb-6\">Este \u00e9 o painel de controle principal. Use o menu lateral para gerenciar alunos e corre\u00e7\u00f5es.<\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl border border-fina-purple-100\">\n <p class=\"text-4xl font-extrabold text-fina-purple-600\">12<\/p>\n <p class=\"text-gray-500\">Alunos Ativos<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-xl border border-fina-purple-100\">\n <p class=\"text-4xl font-extrabold text-red-500\">5<\/p>\n <p class=\"text-gray-500\">Reda\u00e7\u00f5es Pendentes<\/p>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl shadow-xl border border-fina-purple-100\">\n <p class=\"text-4xl font-extrabold text-green-600\">R$ 4.500<\/p>\n <p class=\"text-gray-500\">Receita M\u00eas (Simulado)<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"alunos\" class=\"hidden\">\n <div id=\"aluno-list\" class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Lista de Alunos Cadastrados<\/h3>\n <ul class=\"space-y-3\">\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-fina-purple-50 rounded-xl border border-fina-purple-100\">\n <span class=\"font-medium text-gray-800\">Jo\u00e3o Silva<\/span> \n <span class=\"text-sm text-fina-purple-600 font-medium mt-1 sm:mt-0\">9 Reda\u00e7\u00f5es Enviadas<\/span>\n <\/li>\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-fina-purple-50 rounded-xl border border-fina-purple-100\">\n <span class=\"font-medium text-gray-800\">Maria Oliveira<\/span> \n <span class=\"text-sm text-fina-purple-600 font-medium mt-1 sm:mt-0\">12 Reda\u00e7\u00f5es Enviadas<\/span>\n <\/li>\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-fina-purple-50 rounded-xl border border-fina-purple-100\">\n <span class=\"font-medium text-gray-800\">Pedro Souza<\/span> \n <span class=\"text-sm text-fina-purple-600 font-medium mt-1 sm:mt-0\">4 Reda\u00e7\u00f5es Enviadas<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"redacoes\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl mb-6\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Reda\u00e7\u00f5es Pendentes de Corre\u00e7\u00e3o<\/h3>\n <ul class=\"space-y-3\">\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-red-50 rounded-xl border border-red-200\">\n <span class=\"font-medium text-gray-800\">Reda\u00e7\u00e3o: A Crise H\u00eddrica (Jo\u00e3o S.)<\/span>\n <button onclick=\"simulateCorrection('A Crise H\u00eddrica - Jo\u00e3o S.')\" class=\"py-1 px-3 mt-2 sm:mt-0 bg-fina-purple-600 text-white rounded-lg text-sm hover:bg-fina-purple-700 shadow-md\">Corrigir<\/button>\n <\/li>\n <li class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-red-50 rounded-xl border border-red-200\">\n <span class=\"font-medium text-gray-800\">Reda\u00e7\u00e3o: Impacto da IA (Maria O.)<\/span>\n <button onclick=\"simulateCorrection('Impacto da IA - Maria O.')\" class=\"py-1 px-3 mt-2 sm:mt-0 bg-fina-purple-600 text-white rounded-lg text-sm hover:bg-fina-purple-700 shadow-md\">Corrigir<\/button>\n <\/li>\n <\/ul>\n <\/div>\n \n \n <div id=\"correction-area\" class=\"mt-4 hidden p-6 border-4 border-fina-purple-200 rounded-2xl bg-fina-purple-50 shadow-inner\">\n <h4 class=\"text-2xl font-bold mb-4 text-fina-purple-800 border-b pb-2\">Corrigindo: <span id=\"correction-title\" class=\"text-fina-purple-600\"><\/span><\/h4>\n \n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n \n <div>\n <h5 class=\"text-lg font-semibold mb-2 text-gray-700\">Texto Original do Aluno<\/h5>\n <div id=\"essay-content\" class=\"h-64 overflow-y-auto p-4 bg-white rounded-lg border border-gray-300 shadow-sm text-sm text-gray-800 resize-none\">\n \n O impacto da intelig\u00eancia artificial na sociedade moderna se configura como um tema de profunda relev\u00e2ncia. A IA, ao passo que promove avan\u00e7os significativos, tamb\u00e9m introduz dilemas \u00e9ticos e sociais, especialmente no mercado de trabalho. \u00c9 imperativo que as pol\u00edticas p\u00fablicas acompanhem essa evolu\u00e7\u00e3o, garantindo a requalifica\u00e7\u00e3o profissional e a inclus\u00e3o digital para todos os cidad\u00e3os. A tecnologia deve ser uma ferramenta de equidade, e n\u00e3o de amplia\u00e7\u00e3o das desigualdades existentes.\n <\/div>\n <div class=\"mt-3 flex space-x-2\">\n <button onclick=\"simulateSavePDF('Reda\u00e7\u00e3o Aluno')\" class=\"py-2 px-4 text-sm bg-gray-500 text-white rounded-xl hover:bg-gray-600\">Baixar Reda\u00e7\u00e3o (PDF)<\/button>\n <\/div>\n <\/div>\n\n \n <div>\n <h5 class=\"text-lg font-semibold mb-2 text-fina-purple-700\">Feedback Detalhado e Nota<\/h5>\n \n \n <div class=\"flex items-center space-x-4 mb-4 bg-white p-3 rounded-xl shadow-md border border-fina-purple-100\">\n <label for=\"nota\" class=\"font-medium text-fina-purple-800\">Nota (0\/1000):<\/label>\n <input type=\"number\" id=\"nota\" min=\"0\" max=\"1000\" placeholder=\"Ex: 920\" class=\"w-24 px-3 py-2 border border-gray-300 rounded-lg focus:ring-fina-purple-600 focus:border-fina-purple-600\">\n <\/div>\n\n \n <textarea id=\"feedback-text\" placeholder=\"Insira o feedback detalhado, destacando pontos fortes e fracos em cada compet\u00eancia (Ex: C1: 180, C2: 200...)\" rows=\"8\" class=\"w-full p-4 border border-gray-300 rounded-lg focus:ring-fina-purple-600 focus:border-fina-purple-600 resize-none\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 mt-6 pt-4 border-t border-fina-purple-300\">\n <button onclick=\"simulateSaveCorrection()\" class=\"py-3 px-6 bg-green-500 text-white rounded-xl font-semibold hover:bg-green-600 transition duration-150 shadow-md\">\n Finalizar Corre\u00e7\u00e3o e Enviar Nota\n <\/button>\n <button onclick=\"simulateSavePDF('Corre\u00e7\u00e3o Detalhada')\" class=\"py-3 px-6 bg-gray-600 text-white rounded-xl font-semibold hover:bg-gray-700 transition duration-150 shadow-md\">\n Salvar PDF da Corre\u00e7\u00e3o (Modelo)\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"adicionar-aluno\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Formul\u00e1rio de Cadastro de Aluno<\/h3>\n <form class=\"space-y-4\">\n <div>\n <label for=\"new-student-name\" class=\"block text-sm font-medium text-gray-700\">Nome do Aluno<\/label>\n <input type=\"text\" id=\"new-student-name\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <\/div>\n <div>\n <label for=\"new-student-email\" class=\"block text-sm font-medium text-gray-700\">Email (Login)<\/label>\n <input type=\"email\" id=\"new-student-email\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <\/div>\n <button type=\"button\" onclick=\"simulateAddStudent()\" class=\"py-3 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 shadow-md\">Adicionar Aluno<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"arquivos\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Gerenciar Arquivos (Apostilas e Materiais)<\/h3>\n <div class=\"border-2 border-dashed border-fina-purple-300 p-6 rounded-xl bg-fina-purple-50 mb-6\">\n <p class=\"text-gray-700 mb-3 font-medium\">Selecione arquivos para enviar aos alunos:<\/p>\n <input type=\"file\" id=\"file-upload\" class=\"mb-4 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-fina-purple-100 file:text-fina-purple-700 hover:file:bg-fina-purple-200\"\/>\n <button onclick=\"simulateFileUpload()\" class=\"py-3 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 shadow-md\">Enviar Arquivo<\/button>\n <\/div>\n \n <h4 class=\"text-lg font-semibold mt-6 mb-3 border-b pb-2\">Arquivos Atuais Dispon\u00edveis<\/h4>\n <ul class=\"space-y-2 text-gray-600\">\n <li class=\"p-3 border rounded-xl flex justify-between items-center bg-gray-50\">\n <span>Apostila Gram\u00e1tica Avan\u00e7ada.pdf<\/span> \n <button onclick=\"simulateSavePDF('Apostila')\" class=\"text-xs text-fina-purple-600 hover:text-fina-purple-800 font-semibold\">Salvar PDF<\/button>\n <\/li>\n <li class=\"p-3 border rounded-xl flex justify-between items-center bg-gray-50\">\n <span>Guia de Coes\u00e3o e Coer\u00eancia.pdf<\/span> \n <button onclick=\"simulateSavePDF('Guia')\" class=\"text-xs text-fina-purple-600 hover:text-fina-purple-800 font-semibold\">Salvar PDF<\/button>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"agenda\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl mb-8\">\n <h3 class=\"text-xl font-semibold mb-4 text-fina-purple-700\">Gerenciamento de Prazos e Aulas<\/h3>\n \n \n <div class=\"border border-fina-purple-200 p-4 rounded-xl mb-6\">\n <h4 class=\"text-lg font-semibold mb-4 text-gray-700\">Setembro 2025<\/h4>\n <div class=\"grid grid-cols-7 text-center text-sm font-medium text-gray-500 mb-2\">\n <span>Dom<\/span><span>Seg<\/span><span>Ter<\/span><span>Qua<\/span><span>Qui<\/span><span>Sex<\/span><span>S\u00e1b<\/span>\n <\/div>\n <div class=\"grid grid-cols-7 gap-1 text-center\">\n \n <div class=\"py-2 text-gray-400\">29<\/div><div class=\"py-2 text-gray-400\">30<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">1<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg relative\">\n 2\n <span class=\"absolute bottom-1 left-1\/2 transform -translate-x-1\/2 w-1.5 h-1.5 bg-fina-purple-600 rounded-full\" title=\"Aula ao Vivo\"><\/span>\n <\/div>\n \n <div class=\"py-2 text-white bg-fina-purple-600 rounded-full w-8 h-8 flex items-center justify-center mx-auto shadow-md\">3<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg relative\">\n 4\n <span class=\"absolute bottom-1 left-1\/2 transform -translate-x-1\/2 w-1.5 h-1.5 bg-red-500 rounded-full\" title=\"Prazo de Reda\u00e7\u00e3o\"><\/span>\n <\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">5<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">6<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">7<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">8<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">9<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">10<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">11<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">12<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">13<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">14<\/div>\n <\/div>\n <\/div>\n\n \n <h4 class=\"text-lg font-semibold mb-3 border-b pb-2 text-fina-purple-600\">Adicionar Novo Evento<\/h4>\n <form class=\"space-y-3\">\n <div>\n <input type=\"text\" id=\"event-title\" placeholder=\"T\u00edtulo do Evento (ex: Prazo Final Reda\u00e7\u00e3o)\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <\/div>\n <div class=\"flex space-x-4\">\n <input type=\"date\" id=\"event-date\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <select id=\"event-type\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg\">\n <option>Prazo<\/option>\n <option>Aula ao Vivo<\/option>\n <option>Reuni\u00e3o<\/option>\n <\/select>\n <\/div>\n <button type=\"button\" onclick=\"simulateAddEvent('professor')\" class=\"py-3 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 shadow-md\">Adicionar \u00e0 Agenda<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"financeiro\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl mb-8\">\n <h3 class=\"text-xl font-semibold mb-4 text-fina-purple-700\">Controle de Vencimentos e Comprovantes<\/h3>\n \n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n <div class=\"bg-green-50 p-4 rounded-xl border border-green-200\">\n <p class=\"text-lg font-medium text-green-700\">Pagamentos em Dia<\/p>\n <p class=\"text-3xl font-extrabold text-green-600\">10\/12<\/p>\n <\/div>\n <div class=\"bg-red-50 p-4 rounded-xl border border-red-200\">\n <p class=\"text-lg font-medium text-red-700\">Pendentes (Vencidos)<\/p>\n <p class=\"text-3xl font-extrabold text-red-600\">2<\/p>\n <\/div>\n <div class=\"bg-fina-purple-50 p-4 rounded-xl border border-fina-purple-200\">\n <p class=\"text-lg font-medium text-fina-purple-700\">Comprovantes Recebidos<\/p>\n <p class=\"text-3xl font-extrabold text-fina-purple-600\">1<\/p>\n <\/div>\n <\/div>\n\n \n <h4 class=\"text-lg font-semibold mb-3 border-b pb-2 text-fina-purple-600\">Status de Pagamento dos Alunos (Setembro)<\/h4>\n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full divide-y divide-gray-200\">\n <thead class=\"bg-fina-purple-50\">\n <tr>\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Aluno<\/th>\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Status<\/th>\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Vencimento<\/th>\n <th class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">A\u00e7\u00e3o<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"bg-white divide-y divide-gray-200\">\n <tr id=\"aluno-joao\">\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">Jo\u00e3o Silva<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold\">Pago<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">01\/09<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium\">\n <button onclick=\"simulateComprovante('Jo\u00e3o Silva')\" class=\"text-fina-purple-600 hover:text-fina-purple-800 text-xs font-semibold\">Ver Comprovante<\/button>\n <\/td>\n <\/tr>\n <tr id=\"aluno-maria\" class=\"bg-red-50\">\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">Maria Oliveira<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold\">Pendente<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">01\/09<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm space-x-2\">\n <button onclick=\"simulateBaixa('Maria Oliveira')\" class=\"text-green-600 hover:text-green-800 text-xs font-semibold\">Dar Baixa<\/button>\n <button onclick=\"simulateComprovante('Maria Oliveira')\" class=\"text-fina-purple-600 hover:text-fina-purple-800 text-xs font-semibold\">Ver Comprovante<\/button>\n <\/td>\n <\/tr>\n <tr id=\"aluno-pedro\" class=\"bg-yellow-50\">\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">Pedro Souza<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-yellow-600 font-semibold\">Aguardando<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">05\/10<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm space-x-2\">\n <button onclick=\"simulateBaixa('Pedro Souza')\" class=\"text-green-600 hover:text-green-800 text-xs font-semibold\">Dar Baixa<\/button>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"professor-notification\" class=\"fixed bottom-4 right-4 bg-green-500 text-white p-4 rounded-xl shadow-xl hidden transition-opacity duration-300 opacity-0\">Mensagem de Sucesso!<\/div>\n <\/div>\n <\/main>\n <\/div>\n\n \n \n \n <div id=\"aluno-view\" class=\"hidden w-full\">\n \n <aside class=\"w-64 bg-fina-purple-700 text-white flex flex-col h-screen sticky top-0 md:block\">\n <div class=\"p-6 text-2xl font-bold border-b border-fina-purple-800\">Aluno<\/div>\n <nav class=\"flex-1 p-4 space-y-2 overflow-y-auto\">\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 bg-fina-purple-800 shadow-md\" data-page=\"desempenho\">Acompanhamento<\/a>\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"escrever-redacao\">Escrever Reda\u00e7\u00e3o<\/a>\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"aulas-dicas\">Aulas e Dicas<\/a>\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"agenda\">Minha Agenda<\/a>\n <a href=\"#\" class=\"nav-item-aluno block px-4 py-3 rounded-xl transition duration-150 hover:bg-fina-purple-800\" data-page=\"financeiro\">Meus Vencimentos<\/a>\n <\/nav>\n <div class=\"p-4 border-t border-fina-purple-800\">\n <button onclick=\"logout()\" class=\"w-full py-2 px-4 bg-red-500 rounded-xl font-semibold hover:bg-red-600 transition duration-150\">Sair<\/button>\n <\/div>\n <\/aside>\n \n <main class=\"flex-1 p-4 md:p-8 overflow-y-auto\">\n <h2 class=\"text-3xl font-bold mb-6 text-fina-purple-600\" id=\"aluno-page-title\">Bem-vindo(a), Aluno(a)<\/h2>\n <div id=\"aluno-content\" class=\"space-y-8\">\n \n \n <div data-page-content=\"desempenho\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Seu Desempenho Recente<\/h3>\n \n \n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-8\">\n <div class=\"bg-fina-purple-50 p-4 rounded-xl border-4 border-fina-purple-100 text-center\">\n <p class=\"text-lg text-gray-500 font-medium\">M\u00e9dia:<\/p>\n <p class=\"text-3xl font-extrabold text-fina-purple-600\">880<\/p>\n <\/div>\n <div class=\"bg-green-50 p-4 rounded-xl border-4 border-green-100 text-center\">\n <p class=\"text-lg text-gray-500 font-medium\">Melhor Nota:<\/p>\n <p class=\"text-3xl font-extrabold text-green-600\">920<\/p>\n <\/div>\n <div class=\"bg-red-50 p-4 rounded-xl border-4 border-red-100 text-center\">\n <p class=\"text-lg text-gray-500 font-medium\">\u00daltima Nota:<\/p>\n <p class=\"text-3xl font-extrabold text-red-600\">840<\/p>\n <\/div>\n <div class=\"bg-yellow-50 p-4 rounded-xl border-4 border-yellow-100 text-center\">\n <p class=\"text-lg text-gray-500 font-medium\">Reda\u00e7\u00f5es Enviadas:<\/p>\n <p class=\"text-3xl font-extrabold text-yellow-600\">14<\/p>\n <\/div>\n <\/div>\n \n \n <h4 class=\"font-bold text-gray-700 mb-4 border-b pb-2\">Evolu\u00e7\u00e3o das Notas (\u00daltimos 5 Envios)<\/h4>\n <div class=\"chart-container mb-8\">\n <div class=\"chart-bar\" style=\"height: 60%;\" title=\"800\/1000\"><span class=\"chart-bar-label\">800<\/span><\/div>\n <div class=\"chart-bar\" style=\"height: 85%; background-color: #f59e0b;\" title=\"850\/1000\"><span class=\"chart-bar-label\">850<\/span><\/div>\n <div class=\"chart-bar\" style=\"height: 90%;\" title=\"900\/1000\"><span class=\"chart-bar-label\">900<\/span><\/div>\n <div class=\"chart-bar\" style=\"height: 95%; background-color: #10b981;\" title=\"950\/1000\"><span class=\"chart-bar-label\">950<\/span><\/div>\n <div class=\"chart-bar\" style=\"height: 84%; background-color: #ef4444;\" title=\"840\/1000\"><span class=\"chart-bar-label\">840<\/span><\/div>\n <\/div>\n <div class=\"flex justify-between text-xs text-gray-500 px-6\">\n <span>Reda\u00e7\u00e3o #10<\/span>\n <span>Reda\u00e7\u00e3o #11<\/span>\n <span>Reda\u00e7\u00e3o #12<\/span>\n <span>Reda\u00e7\u00e3o #13<\/span>\n <span>Reda\u00e7\u00e3o #14<\/span>\n <\/div>\n \n \n <h4 class=\"font-bold text-gray-700 mt-8 mb-3 border-b pb-2\">Detalhe das Reda\u00e7\u00f5es Corrigidas:<\/h4>\n <ul class=\"space-y-3\">\n <li class=\"p-4 bg-green-50 rounded-xl flex justify-between items-center border border-green-200 shadow-sm\">\n <span class=\"font-medium\">Reda\u00e7\u00e3o #13: Impacto da IA<\/span> \n <span class=\"font-bold text-green-700 text-lg\">920\/1000<\/span>\n <\/li>\n <li class=\"p-4 bg-red-50 rounded-xl flex justify-between items-center border border-red-200 shadow-sm\">\n <span class=\"font-medium\">Reda\u00e7\u00e3o #14: A Crise H\u00eddrica<\/span> \n <span class=\"font-bold text-red-700 text-lg\">840\/1000<\/span>\n <\/li>\n <li class=\"p-4 bg-green-50 rounded-xl flex justify-between items-center border border-green-200 shadow-sm\">\n <span class=\"font-medium\">Reda\u00e7\u00e3o #12: O Meio Ambiente<\/span> \n <span class=\"font-bold text-green-700 text-lg\">900\/1000<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n \n <div data-page-content=\"escrever-redacao\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">\u00c1rea de Escrita: Reda\u00e7\u00e3o para o ENEM<\/h3>\n <textarea id=\"essay-text\" placeholder=\"Comece a escrever sua reda\u00e7\u00e3o aqui. Tente atingir no m\u00ednimo 50 palavras para enviar a simula\u00e7\u00e3o...\" rows=\"15\" class=\"w-full p-4 border-2 border-gray-300 rounded-lg focus:ring-fina-purple-600 focus:border-fina-purple-600 resize-none shadow-inner\"><\/textarea>\n <div class=\"mt-4 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4\">\n <button onclick=\"simulateSubmitEssay()\" class=\"py-3 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 shadow-md\">Enviar para Corre\u00e7\u00e3o<\/button>\n <button onclick=\"simulateSavePDF('Minha Reda\u00e7\u00e3o')\" class=\"py-3 px-6 bg-gray-600 text-white rounded-xl font-semibold hover:bg-gray-700 shadow-md\">Salvar Rascunho em PDF (Simulado)<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"aulas-dicas\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 border-b pb-2 text-fina-purple-700\">Materiais de Apoio e Videoaulas<\/h3>\n <div class=\"space-y-4\">\n <details class=\"border border-fina-purple-200 p-4 rounded-xl bg-fina-purple-50 shadow-sm\">\n <summary class=\"font-bold cursor-pointer text-fina-purple-800 text-lg\">Aula 1: Estrutura do Texto Dissertativo-Argumentativo<\/summary>\n <p class=\"pt-2 text-gray-600 border-t border-fina-purple-100 mt-2\">Aprenda a construir uma introdu\u00e7\u00e3o forte, desenvolver argumentos e finalizar com uma proposta de interven\u00e7\u00e3o eficaz.<\/p>\n <a href=\"#\" onclick=\"simulateDownload('Estrutura')\" class=\"text-sm text-blue-600 hover:text-blue-800 mt-2 block font-medium\">Acessar Videoaula (Simulado)<\/a>\n <\/details>\n <details class=\"border border-fina-purple-200 p-4 rounded-xl bg-fina-purple-50 shadow-sm\">\n <summary class=\"font-bold cursor-pointer text-fina-purple-800 text-lg\">Dica R\u00e1pida: Uso da V\u00edrgula<\/summary>\n <p class=\"pt-2 text-gray-600 border-t border-fina-purple-100 mt-2\">Evite erros comuns: a v\u00edrgula n\u00e3o separa sujeito de predicado. Use-a para intercala\u00e7\u00f5es e enumera\u00e7\u00f5es.<\/p>\n <a href=\"#\" onclick=\"simulateDownload('Virgula')\" class=\"text-sm text-blue-600 hover:text-blue-800 mt-2 block font-medium\">Baixar Dica em PDF (Simulado)<\/a>\n <\/details>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"agenda\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl mb-8\">\n <h3 class=\"text-xl font-semibold mb-4 text-fina-purple-700\">Pr\u00f3ximos Prazos e Aulas<\/h3>\n \n \n <div class=\"border border-fina-purple-200 p-4 rounded-xl mb-6\">\n <h4 class=\"text-lg font-semibold mb-4 text-gray-700\">Setembro 2025<\/h4>\n <div class=\"grid grid-cols-7 text-center text-sm font-medium text-gray-500 mb-2\">\n <span>Dom<\/span><span>Seg<\/span><span>Ter<\/span><span>Qua<\/span><span>Qui<\/span><span>Sex<\/span><span>S\u00e1b<\/span>\n <\/div>\n <div class=\"grid grid-cols-7 gap-1 text-center\">\n \n <div class=\"py-2 text-gray-400\">29<\/div><div class=\"py-2 text-gray-400\">30<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">1<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg relative\">\n 2\n <span class=\"absolute bottom-1 left-1\/2 transform -translate-x-1\/2 w-1.5 h-1.5 bg-fina-purple-600 rounded-full\" title=\"Aula ao Vivo\"><\/span>\n <\/div>\n \n <div class=\"py-2 text-white bg-fina-purple-600 rounded-full w-8 h-8 flex items-center justify-center mx-auto shadow-md\">3<\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg relative\">\n 4\n <span class=\"absolute bottom-1 left-1\/2 transform -translate-x-1\/2 w-1.5 h-1.5 bg-red-500 rounded-full\" title=\"Prazo de Reda\u00e7\u00e3o\"><\/span>\n <\/div>\n \n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">5<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">6<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">7<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">8<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">9<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">10<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">11<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">12<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">13<\/div>\n <div class=\"py-2 text-gray-700 hover:bg-fina-purple-50 rounded-lg\">14<\/div>\n <\/div>\n <\/div>\n\n \n <h4 class=\"text-lg font-semibold mb-3 border-b pb-2 text-fina-purple-600\">Detalhes dos Eventos<\/h4>\n <ul class=\"space-y-3\">\n <li class=\"p-3 border rounded-xl bg-red-50 border-red-200\">\n <p class=\"font-medium text-red-700\">04\/09: Prazo Final – Tema “O Impacto da Tecnologia”<\/p>\n <p class=\"text-sm text-gray-600\">Lembre-se de enviar sua reda\u00e7\u00e3o antes das 23:59h.<\/p>\n <\/li>\n <li class=\"p-3 border rounded-xl bg-fina-purple-50 border-fina-purple-200\">\n <p class=\"font-medium text-fina-purple-700\">02\/09: Aula ao Vivo – Gram\u00e1tica: Concord\u00e2ncia Verbal<\/p>\n <p class=\"text-sm text-gray-600\">Hor\u00e1rio: 19:00h. Link de acesso dispon\u00edvel na se\u00e7\u00e3o Aulas.<\/p>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div data-page-content=\"financeiro\" class=\"hidden\">\n <div class=\"bg-white p-6 rounded-2xl shadow-xl\">\n <h3 class=\"text-xl font-semibold mb-4 text-fina-purple-700\">Meus Vencimentos e Comprovantes<\/h3>\n \n \n <div class=\"bg-red-50 p-6 rounded-xl mb-6 border-4 border-red-200 flex justify-between items-center flex-wrap\">\n <div>\n <p class=\"text-lg text-red-700 font-medium\">Aten\u00e7\u00e3o: Mensalidade de Setembro<\/p>\n <p class=\"text-4xl font-extrabold text-red-600\">R$ 300,00<\/p>\n <p class=\"text-sm text-red-500 mt-1\">Status: **PENDENTE** (Vencida em 01\/09)<\/p>\n <\/div>\n \n \n <div class=\"mt-4 sm:mt-0 w-full sm:w-auto p-4 bg-white rounded-lg border border-red-300 shadow-inner\">\n <p class=\"font-medium mb-2 text-gray-700\">Enviar Comprovante de Pagamento:<\/p>\n <input type=\"file\" id=\"comprovante-upload-aluno\" class=\"mb-2 block w-full text-sm text-gray-500 file:mr-4 file:py-1 file:px-3 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-fina-purple-100 file:text-fina-purple-700 hover:file:bg-fina-purple-200\"\/>\n <button onclick=\"simulateUploadComprovante()\" class=\"w-full py-2 px-6 bg-fina-purple-600 text-white rounded-xl font-semibold hover:bg-fina-purple-700 transition duration-150 shadow-md\">\n Enviar\n <\/button>\n <\/div>\n <\/div>\n\n \n <h4 class=\"text-lg font-semibold mb-3 border-b pb-2 text-fina-purple-600\">Hist\u00f3rico de Pagamentos<\/h4>\n <ul class=\"space-y-3\">\n <li class=\"p-3 border rounded-xl flex justify-between items-center bg-green-50 border-green-200\">\n <span class=\"font-medium text-gray-800\">Mensalidade Agosto (R$ 300,00)<\/span> \n <span class=\"text-green-600 font-semibold\">Pago em 30\/07<\/span>\n <\/li>\n <li class=\"p-3 border rounded-xl flex justify-between items-center bg-yellow-50 border-yellow-200\">\n <span class=\"font-medium text-gray-800\">Mensalidade Julho (R$ 300,00)<\/span> \n <span class=\"text-yellow-700 font-semibold\">Aguardando Baixa (Comprovante Enviado)<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div id=\"aluno-notification\" class=\"fixed bottom-4 right-4 bg-green-500 text-white p-4 rounded-xl shadow-xl hidden transition-opacity duration-300 opacity-0\">Mensagem de Sucesso!<\/div>\n <\/div>\n <\/main>\n <\/div>\n\n <\/div>\n \n <script>\n \/\/ Vari\u00e1veis de Estado\n let currentRole = 'guest'; \/\/ 'guest', 'professor', 'aluno'\n\n \/\/ --- Fun\u00e7\u00f5es de Controle de Visualiza\u00e7\u00e3o ---\n\n \/**\n * Controla qual das tr\u00eas visualiza\u00e7\u00f5es principais (login, professor, aluno) est\u00e1 ativa.\n *\/\n function setView(viewId) {\n \/\/ Oculta todas as visualiza\u00e7\u00f5es principais\n document.getElementById('login-view').classList.add('hidden');\n document.getElementById('professor-view').classList.add('hidden');\n document.getElementById('aluno-view').classList.add('hidden');\n \n \/\/ Exibe a visualiza\u00e7\u00e3o solicitada\n const viewElement = document.getElementById(viewId);\n if (viewElement) {\n viewElement.classList.remove('hidden');\n \/\/ Garante que o container flex\u00edvel esteja vis\u00edvel para os pain\u00e9is\n if (viewId === 'professor-view' || viewId === 'aluno-view') {\n document.getElementById('app-container').classList.add('flex');\n } else {\n document.getElementById('app-container').classList.remove('flex');\n }\n }\n }\n\n \/\/ --- Fun\u00e7\u00f5es de Utilidade (Notifica\u00e7\u00e3o e Simula\u00e7\u00e3o) ---\n\n function showNotification(message, role, isError = false) {\n const notificationEl = document.getElementById(`${role}-notification`);\n if (notificationEl) {\n notificationEl.textContent = message;\n \n \/\/ Define cores da notifica\u00e7\u00e3o\n notificationEl.classList.remove('hidden', 'opacity-0', 'bg-green-500', 'bg-red-500');\n if (isError) {\n notificationEl.classList.add('bg-red-500');\n } else {\n notificationEl.classList.add('bg-green-500');\n }\n \n notificationEl.classList.add('opacity-100');\n \n setTimeout(() => {\n notificationEl.classList.remove('opacity-100');\n notificationEl.classList.add('opacity-0');\n setTimeout(() => {\n notificationEl.classList.add('hidden');\n }, 300);\n }, 3000);\n }\n }\n\n function simulateCorrection(title) {\n document.getElementById('correction-title').textContent = title;\n document.getElementById('correction-area').classList.remove('hidden');\n showNotification(`Carregando reda\u00e7\u00e3o de \"${title}\".`, 'professor');\n \/\/ Resetando campos para simular o carregamento de uma nova corre\u00e7\u00e3o\n document.getElementById('nota').value = '';\n document.getElementById('feedback-text').value = '';\n \/\/ Texto original simulado\n document.getElementById('essay-content').textContent = \"O impacto da intelig\u00eancia artificial na sociedade moderna se configura como um tema de profunda relev\u00e2ncia. A IA, ao passo que promove avan\u00e7os significativos, tamb\u00e9m introduz dilemas \u00e9ticos e sociais, especialmente no mercado de trabalho. \u00c9 imperativo que as pol\u00edticas p\u00fablicas acompanhem essa evolu\u00e7\u00e3o, garantindo a requalifica\u00e7\u00e3o profissional e a inclus\u00e3o digital para todos os cidad\u00e3os. A tecnologia deve ser uma ferramenta de equidade, e n\u00e3o de amplia\u00e7\u00e3o das desigualdades existentes.\";\n \n document.getElementById('correction-area').scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n\n function simulateSaveCorrection() {\n const nota = document.getElementById('nota').value;\n const feedback = document.getElementById('feedback-text').value;\n\n if (nota && feedback) {\n document.getElementById('correction-area').classList.add('hidden');\n showNotification(`Corre\u00e7\u00e3o e nota ${nota}\/1000 salvas com sucesso! Aluno notificado.`, 'professor');\n } else {\n showNotification('Preencha a nota e o feedback detalhado.', 'professor', true);\n }\n }\n \n function simulateAddStudent() {\n const name = document.getElementById('new-student-name').value;\n const email = document.getElementById('new-student-email').value;\n if (name && email) {\n showNotification(`Aluno(a) \"${name}\" adicionado(a). (Simulado)`, 'professor');\n document.getElementById('new-student-name').value = '';\n document.getElementById('new-student-email').value = '';\n } else {\n showNotification('Preencha nome e email do aluno.', 'professor', true);\n }\n }\n \n function simulateFileUpload() {\n const fileInput = document.getElementById('file-upload');\n if (fileInput.files.length > 0) {\n const fileName = fileInput.files[0].name;\n showNotification(`Arquivo \"${fileName}\" enviado com sucesso! (Simulado)`, 'professor');\n } else {\n showNotification('Selecione um arquivo para enviar.', 'professor', true);\n }\n }\n\n function simulateSavePDF(item) {\n const textToCopy = `[Simula\u00e7\u00e3o de Download PDF] O item \"${item}\" seria baixado.`;\n const tempInput = document.createElement('textarea');\n tempInput.value = textToCopy;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand('copy');\n document.body.removeChild(tempInput);\n \n const role = (currentRole === 'professor') ? 'professor' : 'aluno';\n showNotification(`Simula\u00e7\u00e3o: PDF de \"${item}\" copiado para a \u00e1rea de transfer\u00eancia.`, role);\n }\n\n function simulateSubmitEssay() {\n const essay = document.getElementById('essay-text').value;\n if (essay.length > 50) {\n showNotification('Reda\u00e7\u00e3o enviada com sucesso! Aguarde a corre\u00e7\u00e3o.', 'aluno');\n document.getElementById('essay-text').value = ''; \n } else {\n showNotification('Escreva pelo menos 50 caracteres para simular o envio.', 'aluno', true);\n }\n }\n\n function simulateDownload(item) {\n showNotification(`Material \"${item}\" acessado\/baixado. (Simulado)`, 'aluno');\n }\n \n function simulateAddEvent(role) {\n const title = document.getElementById('event-title').value;\n const date = document.getElementById('event-date').value;\n const type = document.getElementById('event-type').value;\n\n if (title && date) {\n showNotification(`Evento \"${title}\" (${type}) em ${date} adicionado com sucesso!`, role);\n document.getElementById('event-title').value = '';\n document.getElementById('event-date').value = '';\n } else {\n showNotification('Preencha o t\u00edtulo e a data do evento.', role, true);\n }\n }\n\n function simulateUploadComprovante() {\n const fileInput = document.getElementById('comprovante-upload-aluno');\n if (fileInput.files.length > 0) {\n const fileName = fileInput.files[0].name;\n showNotification(`Comprovante \"${fileName}\" enviado para an\u00e1lise. Aguarde a baixa do Professor.`, 'aluno');\n } else {\n showNotification('Selecione um arquivo para enviar o comprovante.', 'aluno', true);\n }\n }\n\n \/\/ Fun\u00e7\u00f5es espec\u00edficas do Professor (Financeiro)\n function simulateBaixa(aluno) {\n showNotification(`Pagamento de ${aluno} marcado como RECEBIDO.`, 'professor');\n \/\/ Em um app real, aqui o status do aluno seria atualizado no banco de dados.\n }\n\n function simulateComprovante(aluno) {\n const textToCopy = `[Simula\u00e7\u00e3o: Comprovante de Pagamento de ${aluno}]`;\n const tempInput = document.createElement('textarea');\n tempInput.value = textToCopy;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand('copy');\n document.body.removeChild(tempInput);\n showNotification(`Link\/PDF do comprovante de ${aluno} copiado para a \u00e1rea de transfer\u00eancia.`, 'professor');\n }\n\n\n \/\/ --- Fun\u00e7\u00f5es de Navega\u00e7\u00e3o e Autentica\u00e7\u00e3o ---\n\n \/\/ Atualiza o conte\u00fado do Painel do Professor\n function updateProfessorView(page) {\n document.querySelectorAll('#professor-content [data-page-content]').forEach(el => el.classList.add('hidden'));\n document.querySelector(`#professor-content [data-page-content=\"${page}\"]`).classList.remove('hidden');\n \n let title = '';\n switch(page) {\n case 'home': title = 'Painel Principal'; break;\n case 'alunos': title = 'Visualizar Alunos'; break;\n case 'redacoes': title = 'Corrigir Reda\u00e7\u00f5es'; document.getElementById('correction-area').classList.add('hidden'); break;\n case 'adicionar-aluno': title = 'Adicionar Novo Aluno'; break;\n case 'arquivos': title = 'Gerenciar Arquivos'; break;\n case 'agenda': title = 'Agenda e Eventos'; break;\n case 'financeiro': title = 'Controle de Vencimentos'; break; \n }\n document.getElementById('professor-page-title').textContent = title;\n \n document.querySelectorAll('.nav-item-professor').forEach(item => {\n item.classList.remove('bg-fina-purple-800', 'shadow-md');\n if (item.getAttribute('data-page') === page) {\n item.classList.add('bg-fina-purple-800', 'shadow-md');\n }\n });\n }\n \n \/\/ Atualiza o conte\u00fado do Painel do Aluno\n function updateAlunoView(page) {\n document.querySelectorAll('#aluno-content [data-page-content]').forEach(el => el.classList.add('hidden'));\n document.querySelector(`#aluno-content [data-page-content=\"${page}\"]`).classList.remove('hidden');\n\n let title = '';\n switch(page) {\n case 'desempenho': title = 'Acompanhamento de Desempenho'; break;\n case 'escrever-redacao': title = '\u00c1rea de Escrita'; break;\n case 'aulas-dicas': title = 'Aulas e Dicas'; break;\n case 'agenda': title = 'Minha Agenda de Estudos'; break;\n case 'financeiro': title = 'Meus Vencimentos e Comprovantes'; break; \n }\n document.getElementById('aluno-page-title').textContent = title;\n\n document.querySelectorAll('.nav-item-aluno').forEach(item => {\n item.classList.remove('bg-fina-purple-800', 'shadow-md');\n if (item.getAttribute('data-page') === page) {\n item.classList.add('bg-fina-purple-800', 'shadow-md');\n }\n });\n }\n\n \/\/ Fun\u00e7\u00e3o principal de Login\n function login(role) {\n currentRole = role;\n \n if (role === 'professor') {\n setView('professor-view');\n updateProfessorView('home'); \n } else if (role === 'aluno') {\n setView('aluno-view');\n updateAlunoView('desempenho'); \n }\n \n const roleName = role === 'professor' ? 'Professor(a)' : 'Aluno(a)';\n showNotification(`Login efetuado como ${roleName}. Bem-vindo(a)!`, role);\n }\n\n \/\/ Fun\u00e7\u00e3o de Logout\n function logout() {\n currentRole = 'guest';\n setView('login-view');\n }\n\n \/\/ Impede o envio padr\u00e3o do formul\u00e1rio (que recarregaria a p\u00e1gina)\n function handleLogin(event) {\n event.preventDefault(); \n }\n\n \/\/ --- Inicializa\u00e7\u00e3o de Listeners no carregamento da p\u00e1gina ---\n window.onload = () => {\n \/\/ Define a tela inicial (Login)\n setView('login-view');\n \n \/\/ Listeners para os links do Professor\n document.querySelectorAll('.nav-item-professor').forEach(item => {\n item.addEventListener('click', (e) => {\n e.preventDefault();\n updateProfessorView(e.target.getAttribute('data-page'));\n });\n });\n\n \/\/ Listeners para os links do Aluno\n document.querySelectorAll('.nav-item-aluno').forEach(item => {\n item.addEventListener('click', (e) => {\n e.preventDefault();\n updateAlunoView(e.target.getAttribute('data-page'));\n });\n });\n };\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Escrita Fina – Sistema de Reda\u00e7\u00e3o e Gram\u00e1tica Escrita Fina Acesso ao Sistema de Reda\u00e7\u00e3o Email Senha Entrar como Professor Entrar como Aluno Professor In\u00edcio Visualizar Alunos Corrigir Reda\u00e7\u00f5es Adicionar Aluno Enviar Arquivos Agenda \/ Calend\u00e1rio Financeiro \/ Pagamentos Sair Bem-vindo, Professor(a) Este \u00e9 o painel de controle principal. Use o menu lateral para gerenciar […]<\/p>\n","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-1236","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1236"}],"version-history":[{"count":5,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1236\/revisions"}],"predecessor-version":[{"id":1257,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1236\/revisions\/1257"}],"wp:attachment":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}