Tutorial
Deploy / Deploy (push) Successful in 32s
Details
Deploy / Deploy (push) Successful in 32s
Details
This commit is contained in:
emerson
parent
71c0583a5a
commit
afb1caae3d
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/* ================================================================================================================================== */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -10,31 +10,34 @@ lang: pt
|
|||
</div>
|
||||
|
||||
<div class="mx-6 mt-6">
|
||||
{% assign cursos = site.cursos | sort: 'date' | reverse %}
|
||||
<div class="columns is-multiline">
|
||||
{% assign cursos = site.data.cursos | sort: 'date' | reverse %}
|
||||
|
||||
<div class="content-box">
|
||||
{% for curso in cursos %}
|
||||
{% assign nome = curso.name | replace: ".md","" %}
|
||||
<div class="column is-one-third">
|
||||
<a href='{{ site.baseurl }}{{ curso.url }}.html' class="card-link">
|
||||
<div class="card">
|
||||
<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">
|
||||
<h1 class="title is-size-4">{{ curso.title }}</h1>
|
||||
{% 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 class="box">
|
||||
<div class="box-top">
|
||||
<figure>
|
||||
<img src="{{ site.baseurl }}/thumbs/{{ curso.name | replace: '.md', '' }}.jpg">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="box-info">
|
||||
<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 %}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue