Tutorial

assets/js/tutorial.js

@@ -0,0 +1,86 @@
+// assets/script/tutorial.js
+document.addEventListener('DOMContentLoaded', function() {
+    // Array de passos com seletor e mensagem para cada etapa do tutorial
+    const steps = [
+      { selector: '#inicio', message: 'Esta é a barra de navegação, onde você encontra as principais seções.' },
+      { selector: '#aulas', message: 'Em aulas, temos uma lista de aulas mostrando pelo mais recente ate o mais antigo.' },
+      { selector: '#cursos', message: 'Em cursos temos os cursos, que não é nada mais que uma junção de aulas sobre um determinado assunto.' },
+      { selector: '#software', message: 'Caso queira procurar cursos de um determinado programa, você pode procurar ele por aqui.' },
+      { selector: '#Dashboard', message: 'Aqui é onde você manda as aulas, precisa ter um cadastro como um Autor.' },
+      { selector: '#lasted', message: 'Aqui mostraremos as 6 ultimas aulas enviadas.' },
+
+      // Adicione os demais passos (total de 10, ou quantos precisar)
+    ];
+  
+    // Função para remover qualquer destaque anterior e destacar o elemento atual
+    function highlightElement(element) {
+      document.querySelectorAll('.tutorial-highlight').forEach(function(el) {
+        el.classList.remove('tutorial-highlight');
+      });
+      if (element) {
+        element.classList.add('tutorial-highlight');
+      }
+    }
+  
+    // Função que exibe e posiciona o passo do tutorial
+    function showStep(stepIndex) {
+      const step = steps[stepIndex]; // pega o objeto do passo atual
+      const element = document.querySelector(step.selector);
+      const tutorialBox = document.getElementById('tutorial-box');
+      const tutorialText = document.getElementById('tutorial-text');
+  
+      // Atualiza o texto do tutorial com a mensagem correta
+      tutorialText.textContent = step.message;
+  
+      // Destaque o elemento alvo, se existir
+      highlightElement(element);
+  
+      if (element) {
+        // Obtém a posição do elemento alvo
+        const rect = element.getBoundingClientRect();
+        
+        // Posiciona o tutorialBox logo abaixo do elemento (ajuste os valores conforme sua necessidade)
+        tutorialBox.style.position = 'absolute';
+        tutorialBox.style.top = (rect.bottom + 10 + window.scrollY) + 'px'; // 10px abaixo do elemento
+        tutorialBox.style.left = (rect.left + window.scrollX) + 'px';
+        tutorialBox.style.transform = 'none';
+      } else {
+        // Fallback: se o elemento não for encontrado, centraliza a caixa do tutorial
+        tutorialBox.style.position = 'fixed';
+        tutorialBox.style.top = '50%';
+        tutorialBox.style.left = '50%';
+        tutorialBox.style.transform = 'translate(-50%, -50%)';
+      }
+    }
+  
+    // Captura os elementos do DOM que vamos usar
+    const overlay = document.getElementById('tutorial-overlay');
+    const nextStepButton = document.getElementById('next-step');
+    const startTutorialButton = document.getElementById('start-tutorial');
+  
+    let currentStep = 0;
+  
+    // Inicia o tutorial somente quando o botão de início for clicado
+    if (startTutorialButton) {
+      startTutorialButton.addEventListener('click', function() {
+        overlay.classList.remove('hidden'); // Mostra o overlay
+        currentStep = 0;
+        showStep(currentStep);
+      });
+    }
+  
+    // Avança os passos ao clicar no botão "Próximo"
+    if (nextStepButton) {
+      nextStepButton.addEventListener('click', function() {
+        currentStep++;
+        if (currentStep < steps.length) {
+          showStep(currentStep);
+        } else {
+          // Quando terminar todos os passos, oculta o tutorial
+          overlay.classList.add('hidden');
+          currentStep = 0;
+        }
+      });
+    }
+  });
+