emerson
/
AliceClass
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chat and CSS player aula
SSH Build / Deploy (push) Successful in 11s Details

This commit is contained in:
emerson 2024-09-03 16:11:53 -03:00
parent cddf197dd5
commit fd312033e0
3 changed files with 97 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_includes/player.html
View File

@ -85,8 +85,8 @@
} else {
console.log("Arquivo não encontrado.");
// Coloque o código para ocultar o vídeo aqui
// videoElement.style.opacity = "0";
// Coloque o código para ocultar o vídeo aqui
videoElement.style.opacity = "0";
}
})
@ -111,9 +111,17 @@ socket.addEventListener('close', (event) => {
socket.addEventListener('error', (event) => {
console.error('Erro no WebSocket:', event);
});
const nomesAlice = [
'Alice', 'Chapeleiro Maluco', 'Coelho Branco', 'Rainha de Copas',
'Gato de Cheshire', 'Lebre de Março', 'Lagarta', 'Dodo',
'Tweedledee', 'Tweedledum', 'Rainha Vermelha', 'Rei de Copas'
];
function nomeAleatorio() {
return nomesAlice[Math.floor(Math.random() * nomesAlice.length)];
}
// Variáveis para armazenar o nome do usuário e a mensagem
let username = prompt('Qual é o seu nome?');
let username = nomeAleatorio();
let message = '';
// Função que envia a mensagem

26
_layouts/aulas.html
View File

@ -3,31 +3,28 @@ layout: default
lang: pt
---
<div class="is-flex">
<div class="is-flex-grow-5 is-flex is-flex-direction-column" >
<main>
<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="title has-text-white">{{ page.title }}</h1>
<div class="page-aula">
<div class="detals-aula">
<div class="info-aula">
<h1 class="title">{{ page.title }}</h1>
<h2 class="aula-name">{{ page.software }} - {{ page.level }}</h2>
<h3 class="aula-name">{{ page.author }}</h3>
<h3 class="aula-name">{{ page.date | date: "%d/%m/%Y" }}</h3>
</div>
<div class="download aula is-flex is-flex-grow-1 is-justify-content-flex-end mr-6">
<div class="download">
{% assign aula_name = page.name | replace: '.md', '' %}
{% assign zip_file = 'aulas/' | append: aula_name | append: '.zip' %}
<a class="button is-success is-large" href="{{ site.baseurl }}{{ zip_file }}" download>
<a class="button" href="{{ site.baseurl }}{{ zip_file }}" download>
Download
</a>
</div>
</div>
</div>
<div class=" is-flex is-justify-content-center is-align-content-center mt-3">
<div class=" ">
{% assign aula_slug = page.title %}
{% assign video_aula = '' | append: aula_slug | append: '.mp4' %}
{% if page.live %}
@ -40,13 +37,14 @@ lang: pt
{% endif %}
</div>
<div class="content-aula mt-3 pt-2 pb-2">
<div class="content-aula">
{{ page.description }}
<br>
</br>
</br>
{% for link in page.links %}
<li><a href="{{ link }}">{{ link }}</a></li>
{% endfor %}
</div>
</main>
</div>
</div>

77
assets/css/stylesheet.css
View File

@ -89,6 +89,8 @@ h1, h2, h3, h4, h5, h6 {
border-radius: 30px;
box-shadow: -10px 5px 15px var(--primary-color);
width: 30vw;
}
/* ================================================================================================================================== */
@ -568,7 +570,8 @@ h1, h2, h3, h4, h5, h6 {
margin: 15px;
}
/* ================================================================================================================================== */
/* CSS da pagina Player localizada em _includes/layouts/dashboard.php */
.player-off{
height: 80vh;
@ -639,7 +642,7 @@ display: flex;
flex-direction: column;
flex-grow: 1;
margin: 15px;
background-color: #0b1a33;
background-color: var(--background-color);
border-radius: 10px;
color: #fff;
}
@ -666,7 +669,7 @@ color: #fff;
flex-grow: 1;
overflow-y: auto;
padding: 10px;
background-color: #0b1a33;
background-color: var(--primary-color);
}
.chat-line {
@ -707,3 +710,71 @@ color: #fff;
outline: none;
background-color: #243b65;
}
.page-aula{
font-family: var(--font-family);
}
.detals-aula{
display: flex;
flex-direction: row;
margin: 15px;
justify-content: space-between;
}
.info-aula{
display: flex;
flex-direction: column;
}
.info-aula h1, h2, h3{
font-family: var(--font-family);
}
.download .button {
display: inline-block;
font-weight: 600;
padding: 0.5em 1em;
border-radius: 4px;
border: 2px solid transparent;
background-color: #48c774; /* Cor verde */
color: #fff; /* Texto branco */
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.download .button:hover {
background-color: #3ec46d; /* Cor verde mais escura no hover */
}
.download .button:active {
background-color: #36a65b; /* Cor ainda mais escura ao clicar */
}
.download .button:focus {
border-color: #32a852; /* Borda verde ao focar */
outline: none; /* Remove o outline padrão do navegador */
box-shadow: 0 0 0 0.125em rgba(72, 199, 116, 0.25); /* Sombra ao focar */
}
.content-aula{
margin: 25px;
font-family: var(--font-family);
}
.content-aula li{
margin: 15px;
}
.content-aula a{
color: #007bff; /* Cor do link, você pode escolher outra cor que combine com o design */
text-decoration: none; /* Remove o sublinhado do link */
font-weight: bold; /* Deixa o texto mais destacado */
border-bottom: 2px solid transparent; /* Adiciona uma borda inferior invisível */
transition: border-color 0.3s ease; /* Transição suave para o hover */
}
.content-aula a:hover {
border-bottom-color: #007bff; /* Mostra a borda inferior ao passar o mouse */
}