Create script.js

script.js

@@ -0,0 +1,195 @@
+// arquivo: script.js - Para integrar com o frontend existente
+
+// Configuração da API
+const API_URL = 'https://seu-backend-goalmaster-ai.hf.space'; // Substitua pelo URL real quando implantar
+
+// Selecionar elementos importantes do DOM
+document.addEventListener('DOMContentLoaded', () => {
+    const generatePlanBtn = document.getElementById('generate-plan');
+    const aiLoadingSection = document.getElementById('ai-loading');
+    const aiPlanSection = document.getElementById('ai-plan-section');
+    
+    const goalTitleInput = document.getElementById('goal-title');
+    const goalCategorySelect = document.getElementById('goal-category');
+    const goalDescriptionInput = document.getElementById('goal-description');
+    const goalTimelineSelect = document.getElementById('goal-timeline');
+    
+    // Capturar opções da IA
+    const stepByStepOption = document.querySelector('input[type="checkbox"][checked]:nth-of-type(1)');
+    const metricsOption = document.querySelector('input[type="checkbox"][checked]:nth-of-type(2)');
+    const remindersOption = document.querySelector('input[type="checkbox"][checked]:nth-of-type(3)');
+    const benchmarksOption = document.querySelector('input[type="checkbox"]:not([checked])');
+    
+    // Substituir o evento de clique simulado por uma chamada real à API
+    if (generatePlanBtn) {
+        generatePlanBtn.addEventListener('click', async function() {
+            if (!goalTitleInput.value.trim()) {
+                alert('Por favor, informe um título para sua meta.');
+                return;
+            }
+            
+            // Mostrar estado de carregamento
+            aiLoadingSection.classList.remove('hidden');
+            generatePlanBtn.disabled = true;
+            
+            try {
+                // Preparar dados para enviar à API
+                const planData = {
+                    title: goalTitleInput.value,
+                    category: goalCategorySelect.value,
+                    description: goalDescriptionInput.value,
+                    timeframe: goalTimelineSelect.value,
+                    options: {
+                        step_by_step: stepByStepOption.checked,
+                        metrics: metricsOption.checked,
+                        reminders: remindersOption.checked,
+                        benchmarks: benchmarksOption.checked
+                    }
+                };
+                
+                // Fazer chamada à API
+                const response = await fetch(`${API_URL}/generate-plan`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(planData)
+                });
+                
+                const result = await response.json();
+                
+                if (result.success) {
+                    // Atualizar a UI com o plano gerado
+                    updatePlanUI(result.plan, planData.title, planData.category);
+                } else {
+                    throw new Error(result.error || 'Erro ao gerar o plano');
+                }
+            } catch (error) {
+                console.error('Erro:', error);
+                // Em caso de erro, exibir um plano genérico
+                displayFallbackPlan(goalTitleInput.value, goalCategorySelect.value);
+            } finally {
+                // Ocultar carregamento e mostrar seção do plano
+                aiLoadingSection.classList.add('hidden');
+                aiPlanSection.classList.remove('hidden');
+                generatePlanBtn.disabled = false;
+                
+                // Rolar até a seção do plano
+                aiPlanSection.scrollIntoView({ behavior: 'smooth' });
+            }
+        });
+    }
+});
+
+// Função para atualizar a UI com o plano gerado pela IA
+function updatePlanUI(plan, goalTitle, category) {
+    // Selecionar elementos que precisam ser atualizados
+    const planSummaryContainer = document.querySelector('.bg-gray-50.p-4.rounded-lg.mb-6 ul');
+    const planStepsContainer = document.querySelector('.mb-6 .space-y-4');
+    const resourcesContainer = document.querySelector('.bg-blue-50.p-4.rounded-lg ul');
+    const checkpointsContainer = document.querySelector('.bg-green-50.p-4.rounded-lg ul');
+    
+    // Atualizar resumo
+    if (planSummaryContainer) {
+        planSummaryContainer.innerHTML = `
+            <li>Duração: ${plan.summary.duration}</li>
+            <li>Métricas-chave: ${plan.summary.key_metrics.join(', ')}</li>
+            <li>Nível estimado ao final: ${plan.summary.final_level}</li>
+            <li>Dificuldade: ${plan.summary.difficulty}</li>
+        `;
+    }
+    
+    // Atualizar etapas
+    if (planStepsContainer) {
+        planStepsContainer.innerHTML = '';
+        
+        plan.steps.forEach((step, index) => {
+            const stepElement = document.createElement('div');
+            stepElement.className = 'p-4 border border-gray-200 rounded-lg';
+            
+            const tasks = step.tasks.map(task => `• ${task}`).join('<br>');
+            
+            stepElement.innerHTML = `
+                <div class="flex items-start">
+                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
+                        <span class="font-bold">${index + 1}</span>
+                    </div>
+                    <div>
+                        <h4 class="font-medium text-gray-900">${step.period}: ${step.title}</h4>
+                        <p class="text-gray-600 mt-1">${tasks}</p>
+                    </div>
+                </div>
+            `;
+            
+            planStepsContainer.appendChild(stepElement);
+        });
+    }
+    
+    // Atualizar recursos recomendados
+    if (resourcesContainer) {
+        resourcesContainer.innerHTML = '';
+        
+        plan.resources.forEach(resource => {
+            const li = document.createElement('li');
+            li.innerHTML = `<a href="#" class="underline">${resource}</a>`;
+            resourcesContainer.appendChild(li);
+        });
+    }
+    
+    // Atualizar checkpoints
+    if (checkpointsContainer) {
+        checkpointsContainer.innerHTML = '';
+        
+        plan.checkpoints.forEach(checkpoint => {
+            const li = document.createElement('li');
+            li.textContent = checkpoint;
+            checkpointsContainer.appendChild(li);
+        });
+    }
+    
+    // Atualizar título e citação da IA
+    const planTitle = document.querySelector('#ai-plan-section h2');
+    if (planTitle) {
+        planTitle.textContent = `Plano para: ${goalTitle}`;
+    }
+    
+    const planQuote = document.querySelector('.border-l-4.border-purple-500.pl-4.mb-6 p');
+    if (planQuote) {
+        planQuote.textContent = `"Com base no seu objetivo de ${goalTitle} na categoria ${category}, criei um plano personalizado para você alcançar seu objetivo com sucesso. Aqui está o que recomendo:"`;
+    }
+}
+
+// Função para exibir um plano de contingência em caso de falha
+function displayFallbackPlan(goalTitle, category) {
+    // Plano genérico baseado no título e categoria
+    const fallbackPlan = {
+        summary: {
+            duration: "3 meses",
+            key_metrics: ["Progresso semanal", "Tarefas concluídas"],
+            final_level: "Objetivo alcançado com sucesso",
+            difficulty: "Moderada"
+        },
+        steps: [
+            {
+                period: "Mês 1",
+                title: "Preparação e Planejamento",
+                tasks: ["Pesquisar sobre o tema", "Definir metas específicas", "Reunir recursos necessários"]
+            },
+            {
+                period: "Mês 2",
+                title: "Implementação",
+                tasks: ["Executar tarefas planejadas", "Monitorar progresso", "Ajustar estratégias"]
+            },
+            {
+                period: "Mês 3",
+                title: "Refinamento e Conclusão",
+                tasks: ["Aprimorar habilidades", "Superar obstáculos finais", "Avaliar resultados"]
+            }
+        ],
+        resources: ["Cursos online sobre o tema", "Comunidades especializadas", "Ferramentas digitais de acompanhamento"],
+        checkpoints: ["Relatório semanal de progresso", "Avaliação mensal de resultados", "Revisão de estratégias a cada 2 semanas"]
+    };
+    
+    // Atualizar UI com o plano de contingência
+    updatePlanUI(fallbackPlan, goalTitle, category);
+}