diff --git a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/lib.css b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/lib.css index f384e85..060af3d 100644 --- a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/lib.css +++ b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/lib.css @@ -2,7 +2,8 @@ /* Esse arquivo contém as estilizações do tipo biblioteca, para criar classes comuns e úteis (tipo uma framework)*/ body{ - padding: 2vw; + padding: .5vw; + padding-bottom: 2vw; } /* For mobile phones: */ [class*="col-"] { diff --git a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/style.css b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/style.css index ef20508..85352ac 100644 --- a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/style.css +++ b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/style.css @@ -1,139 +1,136 @@ -/* Criar aqui um sumário ou cabeçlho */ -/* Esse arquivo contém as estilizações gerais*/ - -.bg{ - background-color: #F0F5FF; +/* Global Styles */ +.bg { + background-color: #f0f5ff; } -.bg.dark{ +.bg.dark { background-color: #000000; } -.border-btn{ -font-size: 12px; -padding: 6px; -min-width: 160px; -min-height: 48px; -border-radius: 24px; -border: 3px solid var(--Primary, #4785FF); -color: #4785FF; -background-color: transparent; -font-weight: bold; - -transition: all .2s ease-in-out; +.border-btn { + font-size: 12px; + padding: 6px; + min-width: 160px; + min-height: 48px; + border-radius: 24px; + border: 3px solid var(--Primary, #4785ff); + color: #4785ff; + background-color: transparent; + font-weight: bold; + transition: all 0.2s ease-in-out; } -.border-btn:hover{ -transform: scale(1.05); -cursor: pointer; -background-color: #4785FF; -color: #FFF; +.border-btn:hover { + transform: scale(0.955); + cursor: pointer; + background-color: #4785ff; + color: #fff; } -.toggle-theme{ -border: 3px solid var(--Primary, black); -color: black; +.toggle-theme, +.toggle-theme.dark { + border: 3px solid var(--Primary, black); + color: black; + font-size: 12px; + padding: 6px; + min-width: 100px; + min-height: 48px; } -.toggle-theme:hover{ -background-color: black; +.toggle-theme:hover, +.toggle-theme.dark:hover { + background-color: var(--Primary, black); + color: var(--Secondary, white); } -.toggle-theme.dark{ +.toggle-theme.dark { border: 3px solid var(--Primary, white); - color: white; + color: white; } -.toggle-theme.dark:hover{ - background-color: white; - color: black; +.menu ul { + list-style-type: none; + margin: 0; + padding: 0; } - .menu ul { - list-style-type: none; - margin: 0; - padding: 0; - } - - .menu li { - padding: 8px; - margin-bottom: 7px; - background-color: #FFFFFF; - color: #4785FF; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); - } - - .menu li:hover { - background-color: #0099cc; - } +.menu li { + padding: 8px; + margin-bottom: 7px; + background-color: #ffffff; + color: #4785ff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} - - .aside, .bottom { - background-color: #FFFFFF; - padding: 15px; - font-size: 14px; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - border-radius: 16px; - - /*min-width: 33vw;*/ - /*min-height: 94vh;*/ - padding: 3vw - } +.menu li:hover { + background-color: #0099cc; +} - .aside.dark, .bottom.dark{ - background-color: #36393E; - color: #fff; - } +.aside, +.bottom { + background-color: #ffffff; + font-size: 14px; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + border-radius: 16px; + height: 100%; + padding: 2vw; +} - .text-area{ - max-height: 41.4vh; - margin-bottom: 4vh; - overflow-y: scroll - } - .bottom{ - margin-top: 4vh; - } +.aside.dark, +.bottom.dark { + background-color: #36393e; + color: #fff; +} - video{ - width: 100%; - height: auto; - border-radius: 16px; - } +.aside { + display: flex; + flex-direction: column; + flex-grow: 0; + max-height: 100%; +} - .resume-text { - color: #465f96; - } +.bottom { + margin-top: 4vh; +} -/* Estilo para o contêiner dos botões de idioma */ +video { + width: 100%; + height: 100%; + border-radius: 16px; + z-index: -5; +} + +.resume-text { + color: #465f96; +} + +/* Language Buttons Styles */ #idioma-buttons-container { - background-color: #0099cc31; /* Cor de fundo preto */ - display: flex; /* Exibe os botões em uma linha */ - justify-content: center; /* Centraliza os botões horizontalmente */ - padding: 10px; /* Espaçamento interno para os botões */ + background-color: #0099cc31; + display: flex; + justify-content: center; + padding: 10px; border-radius: 12px; } -/* Estilo para os botões de idioma */ button.resumo-idioma { - background-color: #00000000; /* Cor de fundo preto */ + background-color: #00000000; border: none; - padding: 10px; /* Espaçamento interno para os botões */ + padding: 10px; cursor: pointer; display: flex; align-items: center; } -/* Estilo para os ícones de bandeira */ button.resumo-idioma img { - width: 24px; /* Ajuste o tamanho do ícone conforme necessário */ - height: 24px; /* Ajuste o tamanho do ícone conforme necessário */ - margin-right: 8px; /* Espaço entre o ícone e o texto */ + width: 24px; + height: 24px; + margin-right: 8px; } -/* Estilo para o texto do botão de idioma */ button.resumo-idioma span { - font-size: 16px; /* Ajuste o tamanho da fonte conforme necessário */ - color: #fff; /* Cor do texto (branco) */ + font-size: 16px; + color: #fff; } .carousel-controllers { @@ -142,22 +139,65 @@ button.resumo-idioma span { display: flex; justify-content: space-between; gap: 10px; - width: 250px; /* Adjust the width as needed */ + width: 250px; } .controller { width: 82px; - height: 16px; + height: 46px; border-radius: 8px; - background: #D6E4FF; - transition: all .2s ease-in-out; + background: #d6e4ff; + transition: all 0.2s ease-in-out; +} + +.controller p { + margin: 0; } -.controller:hover{ +.controller:hover { cursor: pointer; - transform: scale(1.05); + transform: scale(0.955); } -.controller:nth-child(1) { - background: #4785FF; /* Different color for the third controller */ + +.controller.active { + background: #4785ff; + color: #fff; +} + +#title-text { + font-weight: bold; } +.container { + padding: 5vh; + height: auto; + max-height: 620px; + display: flex; + flex-basis: 0; + flex-grow: 1; +} + +.text-area { + flex-grow: 0; + margin-bottom: 2vh; + overflow: auto; +} + +.left, +.right { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +/* Media Query for Smaller Screens */ +@media (max-width: 768px) { + .container { + flex-direction: column; + } + + .left, + .right { + width: 100% !important; + } +} diff --git a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/index.html b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/index.html index 820a17d..7600e2b 100644 --- a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/index.html +++ b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/index.html @@ -14,68 +14,61 @@
- -
- - -
-

Oi!

+
+
+ +
+

+

+
+
-
-
-
-
-
-
-
-
- -
- - - +
+
+
+ +
+
+ +
+
+ +
+
+
+ +
+

+
+
-

- - - -
- - -
-
-
-
+ +
+
+
+
+
+ +
- -
- - + - // ... (restante do código) ... - - \ No newline at end of file + diff --git a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/js/lib.js b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/js/lib.js index d8cdfdd..4fd23d9 100644 --- a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/js/lib.js +++ b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/js/lib.js @@ -67,6 +67,16 @@ async function loadSubtitles(videoElement){ }); } +// Função de trocar o contraste da tela +function toggleContrast() { + // Adicionar a classe .dark aos elementos específicos + var elementsWithDarkClass = document.querySelectorAll('.bg, .aside, .bottom, .toggle-theme'); + + elementsWithDarkClass.forEach(function (element) { + element.classList.toggle("dark"); + }); +} + // Carregar o resumo com base no idioma selecionado function carregarResumo(idioma) { fetch(url_base+`/api/videos/${api_return.id}/transcript/${idioma}.txt`) @@ -118,6 +128,42 @@ document.addEventListener('DOMContentLoaded', async () => { // Eventos para carregar o resumo quando o botão "Ver Resumo" for clicado. elements.btnShowResume.addEventListener('click', () => {hideTranscription(); toggleBtnShowResumeVisibility();}); -elements.resumoButtonBR.addEventListener('click', () => {carregarResumo('pt-BR')}); -elements.resumoButtonUS.addEventListener('click', () => {carregarResumo('en-US')}); -elements.resumoButtonES.addEventListener('click', () => {carregarResumo('es-ES')}); \ No newline at end of file +/* +elements.resumoButtonBR.addEventListener('click', () => { + carregarResumo('pt-BR') +}); +elements.resumoButtonUS.addEventListener('click', () => { + carregarResumo('en-US') +}); +elements.resumoButtonES.addEventListener('click', () => { + carregarResumo('es-ES') +}); +*/ + +// Adicione um event listener para cada botão +document.getElementById('resumo-pt-BR').addEventListener('click', function() { + carregarResumo('pt-BR'); + resetControllers(); // Resetar todas as classes + this.parentElement.classList.add('active'); // Adicionar classe à linguagem selecionada +}); + +document.getElementById('resumo-en-US').addEventListener('click', function() { + carregarResumo('en-US'); + resetControllers(); + this.parentElement.classList.add('active'); +}); + +document.getElementById('resumo-es-ES').addEventListener('click', function() { + carregarResumo('es-ES'); + resetControllers(); + this.parentElement.classList.add('active'); +}); + +// Função para resetar todas as classes para a cor padrão +function resetControllers() { + const controllers = document.querySelectorAll('.controller'); + controllers.forEach(controller => { + controller.classList.remove('active'); + }); +} + \ No newline at end of file