ajustes, expandindo img e marcação de page

t3rndesenvolvimento · t3rndesenvolvimento · commit 41619d3b80df · 2024-05-04T19:58:20.000-03:00
diff --git a/index.html b/index.html
@@ -85,6 +85,8 @@ <h3>Funções</h3>
             </div>
             
             <div class="card">
+                <div class="overlay" id="overlay">
+
                 <img src="./src/img/identificadores_8.png" alt="Identificadores - Imagem 9">
                 <h3>Identificadores</h3>
                 <p class="short-description">Nomes para variáveis, funções, etc., começam com letra, sublinhado ou cifrão.</p>
@@ -107,6 +109,7 @@ <h3>Identificadores</h3>
     </div>
 
     <script src="./src/script.js"></script>
+    <script src="src/expand.js"></script>
 </body>
 
 </html>
diff --git a/src/expand.js b/src/expand.js
@@ -0,0 +1,21 @@
+const cards = document.querySelectorAll('.card');
+
+cards.forEach((card) => {
+    const img = card.querySelector('img');
+    img.addEventListener('click', () => {
+        expandImage(img);
+    });
+});
+
+function expandImage(img) {
+    img.classList.toggle('expanded'); // Adiciona ou remove a classe de expansão
+    
+    // Centraliza a imagem quando expandida
+    if (img.classList.contains('expanded')) {
+        // Adiciona uma classe ao body para permitir o overflow hidden
+        document.body.classList.add('modal-open');
+    } else {
+        // Remove a classe do body quando a imagem é recolhida
+        document.body.classList.remove('modal-open');
+    }
+}
diff --git a/src/script.js b/src/script.js
@@ -1,4 +1,3 @@
-//script.js
 const cardsPerPage = 3;
 const dataContainer = document.querySelector('.card-container');
 const pagination = document.getElementById('pagination');
@@ -22,10 +21,14 @@ function updatePagination() {
     pageNumbers.textContent = `Page ${currentPage} of ${totalPages}`;
     prevButton.disabled = currentPage === 1;
     nextButton.disabled = currentPage === totalPages;
+
+    // Remove a classe 'active' de todos os elementos da página
     pageLinks.forEach((link) => {
-        const page = parseInt(link.dataset.page);
-        link.classList.toggle('active', page === currentPage);
+        link.classList.remove('active');
     });
+    
+    // Adiciona a classe 'active' ao link da página atual
+    pageLinks[currentPage - 1].classList.add('active');
 }
 
 prevButton.addEventListener('click', () => {
@@ -36,11 +39,15 @@ nextButton.addEventListener('click', () => {
     currentPage < totalPages && displayPage(++currentPage) && updatePagination();
 });
 
-pageLinks.forEach((link) => {
+pageLinks.forEach((link, index) => {
     link.addEventListener('click', (e) => {
         e.preventDefault();
-        const page = parseInt(link.dataset.page);
-        page !== currentPage && displayPage(page) && updatePagination();
+        const page = index + 1;
+        if (page !== currentPage) {
+            displayPage(page);
+            currentPage = page;
+            updatePagination();
+        }
     });
 });
 
@@ -55,26 +62,12 @@ function expandImage(card) {
 cards.forEach((card) => {
     card.addEventListener('click', () => {
         expandImage(card);
-    });
 
-    // Adiciona um evento de clique para cada botão "Ver Mais"
-    card.querySelector('.btn-more').addEventListener('click', () => {
-        const shortDescription = card.querySelector('.short-description');
-        const fullDescription = card.querySelector('.full-description');
-        
-        // Alternar a visibilidade dos parágrafos
-        shortDescription.classList.add('hidden');
-        fullDescription.classList.remove('hidden');
-    });
-});
-
-displayPage(currentPage);
-updatePagination();
-//script.js
-
-cards.forEach((card) => {
-    card.addEventListener('click', () => {
-        expandImage(card);
+        // Adiciona temporizador para fechar a imagem após 10 segundos
+        setTimeout(() => {
+            const img = card.querySelector('img');
+            img.classList.remove('expanded');
+        }, 10000); // Fechar após 10 segundos
     });
 
     // Adiciona um evento de clique para cada botão "Ver Mais"
@@ -85,3 +78,19 @@ cards.forEach((card) => {
         fullDescription.classList.toggle('visible');
     });
 });
+
+// Adicionar a lógica fornecida para destacar a página atual na paginação
+function updatePagination() {
+    // Remove a classe 'active' de todos os links de página
+    pageLinks.forEach((link) => {
+        link.classList.remove('active');
+    });
+    
+    // Adiciona a classe 'active' ao link da página atual
+    const currentPageLink = document.querySelector(`.page-link[data-page="${currentPage}"]`);
+    currentPageLink.classList.add('active');
+}
+
+// Inicialize a paginação e a lógica de destaque da página atual
+updatePagination();
+displayPage(currentPage);
diff --git a/src/styles.css b/src/styles.css
@@ -64,6 +64,10 @@ header {
     font-size: 14px;
     margin-bottom: 15px;
 }
+.card img.expanded {
+    transform: scale(2.1); /* Aumenta o tamanho da imagem em 10% */
+    transition: transform 0.3s ease-in-out; /* Adiciona uma transição suave */
+}
 
 .btn-more {
     background-color: #050505;
@@ -107,6 +111,10 @@ header {
 .page-numbers a {
     margin: 0 5px;
 }
+.pagination a.active {
+    background-color: #edf704; /* Cor de fundo para a página ativa */
+    color: #050505; /* Cor do texto para a página ativa */
+}
 
 .modal {
     position: fixed;
