Skip to content

Commit

Permalink
22/11
Browse files Browse the repository at this point in the history
  • Loading branch information
@sibellyvih
sibellyvih authored Nov 22, 2024
1 parent b9a9669 commit 3e92ab8
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 90 deletions.
65 changes: 65 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,71 @@ <h2>Imagens da aplicação do projeto com os alunos do fundamental I</h2>
</script>
</div>

<div class="imagens-conclusao">
<h2>Imagens da apresentação na sala de recursos NAAH/S</h2>

<div class="carousel-container" id="carousel1">
<div class="carousel-controls left" onclick="changeApresentando('carousel1', -1)">&#10094;</div>

<blockquote class="active">
<div class="content">
<img src="Apresentação_1.jpeg" alt="Foto apresentando aos alunos da sala de recursos">
<figcaption>Apresentando aos alunos da sala de recursos NAAH/S. Fonte: Autoral.</figcaption>
</div>
</blockquote>

<blockquote>
<div class="content">
<img src="Apresentação_2.jpeg" alt="Foto apresentando aos alunos da sala de recursos">
<figcaption>Apresentando aos alunos da sala de recursos NAAH/S. Fonte: Autoral.</figcaption>
</div>
</blockquote>

<div class="carousel-controls right" onclick="changeApresentando('carousel1', 1)">&#10095;</div>
</div>

<script>
// Controle de índices para cada carrossel
const carrosselIndices = {};

function changeApresentando(carouselId, direction) {
const carousel = document.getElementById(carouselId);
const slides = carousel.querySelectorAll('blockquote');

if (!(carouselId in carrosselIndices)) {
carrosselIndices[carouselId] = 0; // Inicializa o índice para este carrossel
}

// Atualiza o índice
carrosselIndices[carouselId] = (carrosselIndices[carouselId] + direction + slides.length) % slides.length;

// Atualiza a exibição
slides.forEach((slide, index) => {
slide.classList.toggle('active', index === carrosselIndices[carouselId]);
});
}

// Inicializa todos os carrosséis
document.querySelectorAll('.carousel-container').forEach((carousel) => {
const slides = carousel.querySelectorAll('blockquote');
if (slides.length > 0) {
slides.forEach((slide) => slide.classList.remove('active'));
slides[0].classList.add('active');
}
});
</script>

<style>
blockquote {
display: none;
}
blockquote.active {
display: block;
}
</style>
</div>


<h2 class="titulo-grafico">Estatísticas</h2>
<div class="estatisticas">
<canvas id="meuGrafico"></canvas>
Expand Down
182 changes: 93 additions & 89 deletions workshop.css
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,135 @@
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap');

:roof {
--cor-de-fundo-titulo-principal: #F4D03F;
--background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);
--cor-de-fundo-titulo-principal: #F4D03F;
--background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);
}

html, body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: white;
background: black;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: white;
background: black;
}

header {
color: black;
background: white;
padding: 10px 0px;
color: black;
background: white;
padding: 10px 0px;
}

.caixa {
position: relative;
margin: 0 auto;
flex-wrap: wrap;
position: relative;
margin: 0 auto;
flex-wrap: wrap;
}

.caixa h1 {
font-size: 25px;
color: rgb(0, 69, 0);
padding-left: 85px;
padding-bottom: 29px;
font-size: 25px;
color: rgb(0, 69, 0);
padding-left: 85px;
padding-bottom: 29px;
}

.caixa ul {
padding-right: 85px;
padding-right: 85px;
}

nav {
position: absolute;
top: 20px;
right: 0;
position: absolute;
top: 20px;
right: 0;
}

nav li {
display: inline;
margin: 0 0 0 15px;
display: inline;
margin: 0 0 0 15px;
}

nav a {
color: black;
font-weight: bold;
font-size: 20px;
text-decoration: none;
color: black;
font-weight: bold;
font-size: 20px;
text-decoration: none;
}

nav a:hover {
color: rgb(138, 59, 125);
text-decoration: underline;
}
color: rgb(138, 59, 125);
text-decoration: underline;
}

.titulo-principal {
font-size: 23px;
color: white;
background-color: #F4D03F;
background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);
flex-wrap: wrap;
text-align: center;
font-family: "Chakra Petch", sans-serif;
font-weight: 400;
font-style: normal;
padding: 5px;
font-size: 23px;
color: white;
background-color: #F4D03F;
background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);
flex-wrap: wrap;
text-align: center;
font-family: "Chakra Petch", sans-serif;
font-weight: 400;
font-style: normal;
padding: 5px;
}

h1 {
opacity: 0; /* Inicialmente invisível */
transform: translateY(-50px); /* Posição inicial acima */
animation: titleEntrance 1s forwards; /* Animação de entrada */
}
opacity: 0; /* Inicialmente invisível */
transform: translateY(-50px); /* Posição inicial acima */
animation: titleEntrance 1s forwards; /* Animação de entrada */
}

/* Animação de entrada */
@keyframes titleEntrance {
to {
opacity: 1; /* Torna o título visível */
transform: translateY(0); /* Retorna à posição original */
/* Animação de entrada */
@keyframes titleEntrance {
to {
opacity: 1; /* Torna o título visível */
transform: translateY(0); /* Retorna à posição original */
}
}
}

h2 {
text-align: center;
padding: 16px 0;
font-size: 32px;
font-family: "Chakra Petch", sans-serif;
}
h2 {
text-align: center;
padding: 16px 0;
font-size: 32px;
font-family: "Chakra Petch", sans-serif;
}

p {
font-size: 22px;
text-align: center;
}
p {
font-size: 22px;
text-align: center;
}

.workshop {
width: 100%;
margin: 0 auto;
text-align: center;
position: relative; /* Adicionado para posicionar as setas */
}
.workshop {
width: 100%;
margin: 0 auto;
text-align: center;
position: relative; /* Adicionado para posicionar as setas */
}

img {
max-width: 500px;
max-height: 450px;
margin: auto;
display: block;
padding: 20px;
}
.workshop-naahs {
padding: 40px 0;
}

.rodape {
font-size: 18px;
padding: 40px 0;
text-align: center;
background: rgb(48, 96, 52);
color: white;
}
img {
max-width: 500px;
max-height: 450px;
margin: auto;
display: block;
padding: 20px;
}

.copyright {
color: #FFFFFF;
font-size: 13px;
margin: 20px 0 0;
padding: 10px;
}
.rodape {
font-size: 18px;
padding: 40px 0;
text-align: center;
background: rgb(48, 96, 52);
color: white;
}

.copyright {
color: #FFFFFF;
font-size: 13px;
margin: 20px 0 0;
padding: 10px;
}
30 changes: 29 additions & 1 deletion workshop.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1>Visita na Escola Municipal Luiz Deliberador</h1>
</div>

<h2>Relato da aplicação do projeto</h2>
<p>Os alunos demonstraram grande interesse e entusiasmo pelo jogo, esforçandose para responder a cada pergunta e competir para serem a equipe vencedora. Eles ficaram empolgados com a experiência, mostrando satisfação e alegria ao participarem das atividades. Recebemos um feedback extremamente positivo, com muitos alunos expressando como se divertiram e como acharam o jogo educativo e envolvente.</p>
<p>Os alunos demonstraram grande interesse e entusiasmo pelo jogo, esforçando-se para responder a cada pergunta e competir para serem a equipe vencedora. Eles ficaram empolgados com a experiência, mostrando satisfação e alegria ao participarem das atividades. Recebemos um feedback extremamente positivo, com muitos alunos expressando como se divertiram e como acharam o jogo educativo e envolvente.</p>

<div class="workshop">
<blockquote class="active">
Expand Down Expand Up @@ -76,6 +76,34 @@ <h2>Relato da aplicação do projeto</h2>
</blockquote>
</div>

<div class="workshop-naahs">
<div class="titulo-principal">
<h1>Apresentação na sala de recursos NAAH/S</h1>
</div>

<h2>Relato da aplicação do projeto</h2>
<p>A apresentação do projeto na sala de recursos do NAAH/S para alunos mais velhos do ensino médio. Foi uma oportunidade de compartilhar o que foi desenvolvido e de receber feedbacks importantes de uma nova audiência. A experiência foi enriquecedora e ajudou a validar ainda mais o trabalho realizado até agora.</p>

<div class="workshop">
<blockquote>
<div class="content">
<figure>
<img src="Apresentação_1.jpeg" alt="Foto apresentando aos alunos da sala de recursos">
<figcaption>Foto apresentando aos alunos da sala de recursos NAAH/S. Fonte: Autoral.</figcaption>
</figure>
</div>
</blockquote>
<blockquote>
<div class="content">
<figure>
<img src="Apresentação_2.jpeg" alt="Foto apresentando aos alunos da sala de recursos">
<figcaption>Foto apresentando aos alunos da sala de recursos NAAH/S. Fonte: Autoral.</figcaption>
</figure>
</div>
</blockquote>
</div>
</div>

<footer class="rodape">
<h2><strong>Eco Board Game<br>
by Sibelly</strong></h2>
Expand Down

0 comments on commit 3e92ab8

Please sign in to comment.