Tutorial

_data/cursos.json

@@ -0,0 +1,12 @@
+[
+    {
+        "title": "Introdução ao LMMS",
+        "user": "",
+        "author": "Matheus De Bomfim Rodrigues Jordão",
+        "description": " Introdução ao Hydrogen",
+        "date": "9\/07\/2024",
+        "aulas": [
+            "lmms"
+        ]
+    }
+]

_includes/SideBar.html

@@ -12,7 +12,7 @@
 			<a class="item-menu" href="{{ site.baseurl }}/">
 				<li>
 					
-						<span class="menu-txt">Inicio</span>
+						<span class="menu-txt" id="inicio">Inicio</span>
 						<i class="fa-solid fa-house mx-4"></i>
 				</li>
 			</a>
@@ -20,14 +20,14 @@
 			<a class="item-menu" href="{{ site.baseurl }}/aulas">
 			
 				<li>
-						<span class="menu-txt">Aulas</span>
+						<span class="menu-txt"id="aulas">Aulas</span>
 						<i class="fa-solid fa-house mx-4"></i>
 				</li>
 			</a>
 
 			<a class="item-menu" href="{{ site.baseurl }}/cursos">
 				<li>
-						<span class="menu-txt">Cursos</span>
+						<span class="menu-txt" id="cursos">Cursos</span>
 						<i class="fa-solid fa-house mx-4"></i>
 				</li>
 			</a>
@@ -48,7 +48,7 @@
 
 			<a class="item-menu" href="{{ site.baseurl }}/software">
 				<li>
-						<span class="menu-txt">Software</span>
+						<span class="menu-txt"  id="software">Software</span>
 						<i class="fa-solid fa-house mx-4"></i>
 				</li>
 			</a>
@@ -66,7 +66,7 @@
 		<ul>
 			<li>
 				<a class="" href="{{ site.baseurl }}/dashboard">
-					<span class="menu-txt">Dashboard</span>
+					<span class="menu-txt" id="Dashboard">Dashboard</span>
 					<i class="fa-solid fa-house mx-4"></i>
 				</a>
 			</li>

_includes/tutorial/tutorial.html

@@ -0,0 +1,7 @@
+<!-- _includes/tutorial.html -->
+<div id="tutorial-overlay" class="hidden">
+  <div id="tutorial-box">
+    <p id="tutorial-text">Texto do passo</p>
+    <button id="next-step">Próximo</button>
+  </div>
+</div>

_layouts/default.html

@@ -6,6 +6,7 @@
     <meta charset="utf-8">
 	<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> -->
 	<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/stylesheet.css">
+	<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tutorial.css">
 	<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> -->
 
     {% if page.styles %}{{ page.styles }}{% endif %}
@@ -24,5 +25,6 @@
 				{{content}}
 			</div>
 		</div>
+		<script src="{{ '/assets/js/tutorial.js' | relative_url }}"></script>
 	</body>
 </html>

assets/css/stylesheet.css

@@ -265,18 +265,21 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 /* ================================================================================================================================== */
-/* CSS da pagina Aulas localizada em _content/Pages/index.html  */
+/* CSS da pagina Aulas localizada em _content/Pages/aulas.html  */
 
 .aulas-content{
  width: 100%;
 
  padding: 15px;
 }
+
 .aulas-content .title-content{
     width: 100%;
     display: flex;
     flex-direction: row;
     padding: 15px;
+    /* background-color: #007bff; */
+    text-align: center;
 } 
 
 .aulas-content .title-content > :nth-child(1){
@@ -327,7 +330,7 @@ h1, h2, h3, h4, h5, h6 {
     background-color: var(--background-color);
     box-shadow: -5px 5px 15px var(--primary-color);
 
-    margin: 25px 25px;
+    margin: 10px 15px;
 }
 
 /* ================================================================================================================================== */

assets/css/tutorial.css

@@ -0,0 +1,63 @@
+/* ================================================================================================================================== */
+/* Variables */
+:root {
+    /* Paleta de cors */
+    --midnight-blue: #0B1A33;
+    --cornflower-blue: #4B90F8;
+    --goldenrod: #D6A419;
+    --caribbean-green: #00C6BE;
+    --deep-ruby: #623A40;
+    --ivory: #F1F1E6;
+    --alice-blue: #F4F9FF;
+    --charcoal-blue: #35405D;
+    --slate-gray: #616B8B;
+    --light-slate-gray: #909ABB;
+    --periwinkle: #2d2e31;
+
+    /* Informaçoes da paleta de cores */
+    --primary-color: var(--midnight-blue);
+    --secondary-color: var(--cornflower-blue);
+    --tertiary-color: var(--periwinkle);
+    --gradient-backfround: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(75,144,248,1) 19%, rgba(97,157,246,1) 85%, rgba(241,241,230,0) 100%);
+    --accent-color: var(--goldenrod);
+    --background-color: var(--charcoal-blue);
+    --text-color: var( --alice-blue);
+    --secondary-text-color: var(--slate-gray);
+    --border-color: var(--deep-ruby);
+    --highlight-color: var(--caribbean-green);
+    --error-color: var(--slate-gray);
+    --success-color: var(--light-slate-gray);
+    --warning-color: var(--periwinkle);
+    --info-color: var(--ivory);
+
+    --font-family: 'Roboto', sans-serif;
+    --heading-color: var(--alice-blue);
+    --heading-margin: 0 0 20px;
+}
+
+
+/* assets/css/tutorial.css */
+#tutorial-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.8); /* Escurece a tela */
+    /* display: flex; */
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+#tutorial-box {
+    background: var(--deep-ruby);
+    padding: 20px;
+    border-radius: 8px;
+    max-width: 500px;
+    text-align: center;
+}
+
+.hidden {
+    display: none;
+}

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;
+        }
+      });
+    }
+  });
+  

pages/cursos.html

@@ -10,31 +10,34 @@ lang: pt
 </div>
 
 <div class="mx-6 mt-6">
-{% assign cursos = site.cursos | sort: 'date' | reverse %}
+    {% assign cursos = site.data.cursos | sort: 'date' | reverse %}
-    <div class="columns is-multiline">
+    
+    <div class="content-box">
         {% for curso in cursos %}
-        {% assign nome = curso.name | replace: ".md","" %}
+        <div class="box">
-        <div class="column is-one-third">
+            <div class="box-top">
-            <a href='{{ site.baseurl }}{{ curso.url  }}.html' class="card-link">
+                <figure>
-                <div class="card">
+                    <img src="{{ site.baseurl }}/thumbs/{{ curso.name | replace: '.md', '' }}.jpg">
-                    <div class="card-image">
-                        <figure class="image is-4by3">
-                            <img src="{{ site.baseurl }}/thumbs/{{ nome }}.jpg">
                 </figure>
             </div>
-                    <div class="card-content">
+    
-                        <div class="content my-2">
+            <div class="box-info">
-                            <h1 class="title is-size-4">{{  curso.title }}</h1>
+                <h1>
+                    <a href="{{ site.baseurl }}/cursos/{{ curso.name | slugify: 'latin' }}.html">
+                        {{ curso.title }}
+                    </a>
+                </h1>
+                <p>{{ curso.description }}</p>
+                <p><strong>Autor:</strong> {{ curso.author }}</p>
+    
+                <div class="tags">
                     {% for aula in curso.aulas %}
                     <span class="tag is-link">{{ aula }}</span>
                     {% endfor %}
-                            <h3 class="subtitle is-size-6">{{ curso.description  }}</h3>
-                            <h3 class="subtitle is-size-6">{{ curso.author  }}</h3>
                 </div>
             </div>
         </div>
-            </a>
-        </div>
         {% endfor %}
     </div>
+    
 </div>

pages/index.html

@@ -3,15 +3,21 @@ layout: default
 permalink: /
 ---
 
+{% include tutorial/tutorial.html %}
+
 <div class="home-content">
     <div class="banner">
         <h1>Bem vindo ao Alice Class</h1>
         <h3>Participe de uma comunidade colaborativa para criar e compartilhar cursos e materiais educativos.</h3>
+        
+        <br/>
+        <h4 style="margin-top: 100px;">E novo aqui? <span style="color: black;" id="start-tutorial">Click aqui</span> e conheça nosso site.</h4>
+        <!-- <button id="start-tutorial">Iniciar Tutorial</button> -->
     </div>
 
     <div class="lasted">
         <div class="title-section">
-            <h1 class="title">Ultimas aulas</h1>
+            <h1 class="title" id="lasted">Ultimas aulas</h1>
         </div>
 
         <div class="content-box">