AliceClass/_layouts/cursos.html

128 lines
4.7 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
{% if page.styles %}{{ page.styles }}{% endif %}
<title>
{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}
</title>
{% assign aulas = site.aulas | sort: 'date' | reverse %}
<script>
const switchGrind = () =>{
var grad = document.getElementById("grad");
var list = document.getElementById("list");
list.classList.add("is-hidden");
grad.classList.remove("is-hidden");
}
const switchList = () =>{
var grad = document.getElementById("grad");
var list = document.getElementById("list");
grad.classList.add("is-hidden");
list.classList.remove("is-hidden");
}
</script>
</head>
<body>
<div class="is-flex is-flex-direction-row is-full-width">
<div class="is-flex">
{% include SideBar.html %}
</div>
<div class="is-flex">
<div class="is-flex-grow-5 is-flex is-flex-direction-column">
{% include TopBar.html %}
<main class="">
<div class="aula-title pt-6 pb-6">
<div class="detals-aula is is-flex is-flex-direction-row">
<div class="detals-aula is is-flex is-flex-direction-column is-flex-grow-1">
<h1 class="aula-title">{{ page.title }}</h1>
<h2 class="aula-name">{{ page.software }} - {{ page.level }}</h2>
<h3 class="aula-name">{{ page.author }}</h2>
<h3 class="aula-name">{{ page.date | date: "%d/%m/%Y" }}</h2>
</div>
</div>
</div>
<div class="is-flex is-flex-direction-row is-align-items-center ">
<h1 class="title pt-6 pb6 pl-6 is-flex-grow-3">Explore as Aulas deste Curso: Descubra o que Está por Vir!</h1>
<div class="is-flex-grow-1 mt-5 ">
<span class="material-symbols-outlined" onclick="switchGrind()" style="cursor: pointer;" >grid_view</span>
<span class="material-symbols-outlined" onclick="switchList()" style="cursor: pointer;" >more_vert</span>
</div>
</div>
<div id="grad" class=" is-flex is-justify-content-center is-align-content-center">
{% assign aulas = site.aulas | sort: 'date' | reverse %}
<div class="columns is-multiline">
{% for aula in aulas %}
{% assign nome = aula.name | replace: ".md","" %}
{% for aulaContent in page.aulas %}
{% if nome == aulaContent %}
<div class="column is-one-third">
<a href='{{ site.baseurl }}{{ aula.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">{{ aula.title }}</h1>
<h3 class="subtitle is-size-6">{{ aula.level }}</h3>
<h3 class="is-size-6">{{ aula.description }}</h3>
<div class="is-flex is-flex-direction-row is-align-items-center ">
<span class="is-size-6 is-flex-grow-4 blue-text">{{ aula.author }}</span>
<span class="is-size-7">{{ aula.date | date: "%d-%m-%y"}}</span>
</div>
</div>
</div>
</div>
</a>
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
<div id="list" class=" is-flex is-flex-direction-column is-justify-content-center is-align-content-center mt-5 is-hidden">
{% for aulaContent in page.aulas %}
{% assign aula_slug = aulaContent | replace: '.md', '' %}
{% assign video_aula = site.baseurl | append: '/aulas/' | append: aula_slug | append: '.mp4' %}
<div class="title-Background px-6">
<h1>{{ aulaContent }}</h1>
</div>
<div class="video-curso">
<video controls class="aula-video">
<source src="{{ video_aula }}" type="video/mp4">
Seu navegador não suporta o elemento de vídeo.
</video>
</div>
{% endfor %}
</div>
</main>
</div>
</div>
</div>
<footer>
<!-- Conteúdo do rodapé -->
</footer>
</body>
</html>