Chat and CSS player aula

_includes/player.html

@@ -85,8 +85,8 @@
               
           } else {
               console.log("Arquivo não encontrado.");
-              // Coloque o código para ocultar o vídeo aqui
+            //   Coloque o código para ocultar o vídeo aqui
-            //   videoElement.style.opacity = "0";
+              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

_layouts/aulas.html

@@ -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="page-aula">
-			<div class="aula-title pt-6 pb-6">
+				<div class="detals-aula">
-				<div class="detals-aula is is-flex is-flex-direction-row">
+					<div class="info-aula">
-					<div class="detals-aula is is-flex is-flex-direction-column is-flex-grow-1">
+						<h1 class="title">{{ page.title }}</h1>
-						<h1 class="title has-text-white">{{ 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>

assets/css/stylesheet.css

@@ -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 */
+}