From f3672cecd0bfa2ef011b2069dcfa05e1103dda3f Mon Sep 17 00:00:00 2001
From: felipetaua <taua.felipee@gmail.com>
Date: Wed, 25 Sep 2024 13:52:10 -0300
Subject: [PATCH] adicionando um card dinamico

---
 aboutus.html | 28 +++++++---------------------
 index.html   |  2 +-
 modal.html   | 49 ++++++++++++++++++++++++++++++++++++++-----------
 script.js    | 43 ++++++++++++++++++++++++++++++++-----------
 style.css    |  4 ++++
 5 files changed, 82 insertions(+), 44 deletions(-)

diff --git a/aboutus.html b/aboutus.html
index 4ab34c7..5610ede 100644
--- a/aboutus.html
+++ b/aboutus.html
@@ -52,6 +52,7 @@ <h1 class="headline">
         <div class="sectionPic bouncepic aboutusPic" id="sectionPic">
             <img src="./img/about-hero.png" alt="">
         </div>
+        <span id="Programador"></span>
     </section>
 
     <!-- About us status -->
@@ -83,7 +84,7 @@ <h1><b>20+</b> Countries</h1>
                 <img src="./img/fast-forward-icon-white.svg" alt="">
                 <div class="offerDesc">
                     <h1>Constante Evolução</h1>
-                    <p>The Complete Guide to Management and How to Implement it Quickly and Effectively</p>
+                    <p>Com projetos como esse podemos ver nossa evolução ao longo do tempo.</p>
                 </div>
             </div>
 
@@ -91,14 +92,14 @@ <h1>Constante Evolução</h1>
                 <img src="./img/support-agent-icon-white.svg" alt="">
                 <div class="offerDesc">
                     <h1>Ambiente Colaborativo</h1>
-                    <p>The Best Support for Online crypto & How to Craft a Compelling Description</p>
+                    <p>em equipe, permitindo que os colegas compartilhem as suas habilidades, talentos e ideias para alcançar um objetivo em comum.</p>
                 </div>
             </div>
 
             <div class="eachOffer">
                 <img src="./img/progress-warning-icon-white.svg" alt="">
                 <div class="offerDesc">
-                    <h1>Best Progress</h1>
+                    <h1>Avaliação dos alunos</h1>
                     <p>What is a Crypto-Mining Malware and Why You MUST Protect Against Them</p>
                 </div>
             </div>
@@ -107,18 +108,14 @@ <h1>Best Progress</h1>
 
     <!-- Play Video -->
        <section class="videoSection">
-            <h1 class="videoSectionHeader">Play The Video.</h1>
+            <h1 class="videoSectionHeader">O Video.</h1>
            <div class="videoContainer">
             <div class="video">
                 <img src="./img/about-video.jpg" class="thumbnail" alt="">
                 <img src="./img/video-play-icon-white.svg" class="playIcon" alt="">
             </div>
             <p>
-            Crypto mining has become more popular with people
-            from all walks of life and across the world.
-            This article will teach you how to mine crypto
-            without having to buy expensive hardware or pay
-            exorbitant electricity bills.
+            No trailer nos deparamos com evolução das ténologias desde o início, ao chegar aos tempos modernos podemos ver ténologias atuais então chegamos no futuro e mostramos a SINTEC o evento de técnologia do agora! Em breve...
             </p>
            </div>
        </section>
@@ -131,8 +128,6 @@ <h1 class="sectionHeader">Alunos e Instrutores envolvidos</h1>
                 <div class="teamPic">
                     <img src="./img/Taua.png" alt="">
                     <div class="teamSocialLink">
-                        <img src="./img/Facebook_black.svg" alt="">
-                        <img src="./img/Vimeo_black.svg" alt="">
                         <img src="./img/Instagram_black.svg" alt="">
                     </div>
                 </div>
@@ -145,10 +140,8 @@ <h1 class="teamName"> Tauã Felipe</h1>
     
             <div class="eachCarousel eachTeam">
                 <div class="teamPic">
-                    <img src="./img/nicoly.png" alt="">
+                    <img src="./img/Nicoly.png" alt="">
                     <div class="teamSocialLink">
-                        <img src="./img/Facebook_black.svg" alt="">
-                        <img src="./img/Vimeo_black.svg" alt="">
                         <img src="./img/Instagram_black.svg" alt="">
                     </div>
                 </div>
@@ -162,8 +155,6 @@ <h1 class="teamName">Nicoly Carvalho</h1>
                 <div class="teamPic">
                     <img src="./img/Bruna.png" alt="">
                     <div class="teamSocialLink">
-                        <img src="./img/Facebook_black.svg" alt="">
-                        <img src="./img/Vimeo_black.svg" alt="">
                         <img src="./img/Instagram_black.svg" alt="">
                     </div>
                 </div>
@@ -177,8 +168,6 @@ <h1 class="teamName">Bruna Estefani</h1>
                 <div class="teamPic">
                     <img src="./img/Luis.png" alt="">
                     <div class="teamSocialLink">
-                        <img src="./img/Facebook_black.svg" alt="">
-                        <img src="./img/Vimeo_black.svg" alt="">
                         <img src="./img/Instagram_black.svg" alt="">
                     </div>
                 </div>
@@ -193,9 +182,6 @@ <h1 class="teamName">Luiz Gustavo</h1>
                 <div class="teamPic">
                     <img src="./img/Alunos.png" alt="">
                     <div class="teamSocialLink">
-                        <img src="./img/Facebook_black.svg" alt="">
-                        <img src="./img/Vimeo_black.svg" alt="">
-                        <img src="./img/Twitter_black.svg" alt="">
                         <img src="./img/Instagram_black.svg" alt="">
                     </div>
                 </div>
diff --git a/index.html b/index.html
index d8fcd4a..9046c35 100644
--- a/index.html
+++ b/index.html
@@ -254,7 +254,7 @@ <h1 class="sectionHeader">O grupo</h1>
             <p class="sectionPara">
                 Todos no grupo se dedicam muito, para conseguir fazer o que nos foi proposto estamos em sintonia, todos com os mesmos objetivos!
             </p>
-            <button class="btn">Explore Now</button>
+            <a href="#programador"><button class="btn">Explore Now</button></a>
         </div>
 
         <div class="sectionPic dashboardPic">
diff --git a/modal.html b/modal.html
index aa96c7d..02f07c8 100644
--- a/modal.html
+++ b/modal.html
@@ -12,17 +12,44 @@
   >
 <button class="primary" onclick="window.dialog.showModal();">Open Dialog</button>
 
-      <div class="sectionModal">
-      <dialog id="dialog">
-
-        	<h2>Hello.</h2>
-        	<p class="carouselPara">A CSS-only modal based on the <a href="https://developer.mozilla.org/es/docs/Web/CSS/::backdrop" target="_blank">::backdrop</a> pseudo-class. Hope you find it helpful.
-        	</p>
-        	<p class="carouselPara">You can also change the styles of the <code>::backdrop</code> from the CSS.
-        	</p>
-        	<button onclick="window.dialog.close();" aria-label="close" class="x">❌</button>
-      </dialog>
-    </div>
+<div class="sectionModal">
+  <dialog id="dialog">
+    <h2 id="cardTitle">Card 1</h2>
+    <p id="cardContent" class="carouselPara">
+      Conteúdo do Card 1. Aqui você pode colocar o conteúdo do primeiro card.
+    </p>
+    <button onclick="previousCard();" aria-label="previous" class="prev">⬅️ Anterior</button>
+    <button onclick="nextCard();" aria-label="next" class="next">➡️ Próximo</button>
+    <button onclick="window.dialog.close();" aria-label="close" class="x">❌ Fechar</button>
+  </dialog>
+</div>
+
+<script>
+  const cards = [
+    { title: 'Card 1', content: 'Conteúdo do Card 1. Aqui você pode colocar o conteúdo do primeiro card.' },
+    { title: 'Card 2', content: 'Conteúdo do Card 2. Aqui você pode colocar o conteúdo do segundo card.' },
+    { title: 'Card 3', content: 'Conteúdo do Card 3. Aqui você pode colocar o conteúdo do terceiro card.' }
+  ];
+
+  let currentCardIndex = 0;
+
+  function updateCard() {
+    document.getElementById('cardTitle').innerText = cards[currentCardIndex].title;
+    document.getElementById('cardContent').innerText = cards[currentCardIndex].content;
+  }
+
+  function nextCard() {
+    currentCardIndex = (currentCardIndex + 1) % cards.length;
+    updateCard();
+  }
+
+  function previousCard() {
+    currentCardIndex = (currentCardIndex - 1 + cards.length) % cards.length;
+    updateCard();
+  }
+</script>
+
+
         <div class="footerCopyright">
              <p>&copy; 2024 desenvolvido por <a href="#" class="developedBy">felipetauaSystems</a>.</p>
         </div>
diff --git a/script.js b/script.js
index 537c925..f5c5241 100644
--- a/script.js
+++ b/script.js
@@ -14,22 +14,43 @@ bar.onclick = (e) => {
 }
 
 
-// carousel
+// Seleção dos elementos do carousel
 const carouselContainer = document.querySelector(".carouselContainer");
 const eachCarousel = document.querySelector(".eachCarousel").clientWidth;
 const allEachCarousel = document.querySelectorAll(".eachCarousel");
 const allIndicator = document.querySelectorAll(".indicator");
 
+let currentSlide = 0;
+const totalSlides = allEachCarousel.length;
+
+// Função para alternar os slides
 const slideCarousel = (index) => {
-    for(let x = 0; x<allEachCarousel.length;x++){
-        if(x === index){
-            allEachCarousel[x].classList.add("eachCarouselBorder")
-            allIndicator[x].classList.add("activeIndicator")
-        }else{
-            allEachCarousel[x].classList.remove("eachCarouselBorder")
-            allIndicator[x].classList.remove("activeIndicator")
+    for (let x = 0; x < totalSlides; x++) {
+        if (x === index) {
+            allEachCarousel[x].classList.add("eachCarouselBorder");
+            allIndicator[x].classList.add("activeIndicator");
+        } else {
+            allEachCarousel[x].classList.remove("eachCarouselBorder");
+            allIndicator[x].classList.remove("activeIndicator");
         }
     }
-   carouselContainer.scrollLeft = (index * (eachCarousel + 10))
-   console.log(carouselContainer.scrollLeft)
-}
\ No newline at end of file
+
+    // Ajusta a rolagem horizontal da div do carousel
+    carouselContainer.scrollLeft = (index * (eachCarousel + 10)); // Ajuste de espaçamento de 10px entre slides
+    currentSlide = index;
+}
+
+// Função para iniciar a troca automática dos slides
+const startAutoSlide = () => {
+    setInterval(() => {
+        // Atualiza para o próximo slide
+        const nextSlide = (currentSlide + 1) % totalSlides; // Reinicia no primeiro slide após o último
+        slideCarousel(nextSlide);
+    }, 3000); // Troca de slide a cada 3 segundos
+}
+
+// Inicializa o primeiro slide
+slideCarousel(currentSlide);
+
+// Inicia a troca automática dos slides
+startAutoSlide();
diff --git a/style.css b/style.css
index 88b243f..064c978 100644
--- a/style.css
+++ b/style.css
@@ -186,6 +186,10 @@ header{
     width: 100%;
     height: 300px;
 }
+.carouselContainer {
+    scroll-behavior: smooth;
+}
+
 .carouselDesc{
     margin-left: 1em;
 }