From 9319fca0f8df8cf2775bc945cf067ba6446cd1c1 Mon Sep 17 00:00:00 2001
From: Roodney Moraes <roodneysouza@gmail.com>
Date: Sun, 30 Jun 2024 16:52:02 -0300
Subject: [PATCH] =?UTF-8?q?Bot=C3=A3o=20home?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html            |   8 +-
 src/pages/az-104.html | 256 +++++++++++++++++++++++++-----------------
 2 files changed, 160 insertions(+), 104 deletions(-)
diff --git a/index.html b/index.html
index 595e1b1..95988af 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Simulados para as Certificações da Microsoft Azure</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-    <style>
+    <style>    
         .card {
             transition: transform 0.3s ease-in-out;
         }
@@ -21,6 +21,12 @@
         .card-body a:hover {
             text-decoration: none;
         }
+
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 1.5rem;
+            }
+        }
     </style>
 </head>
 <body>
diff --git a/src/pages/az-104.html b/src/pages/az-104.html
index b3a439b..be9f897 100644
--- a/src/pages/az-104.html
+++ b/src/pages/az-104.html
@@ -68,7 +68,7 @@
 </head>
 <header>
     <div class="container">
-        <h1 id="tituloPagina">ExamTopics | Topic 1</h1>
+        <h1 id="tituloPagina"></h1>
         <h6 id="descricaoProgresso"></h6>
     </div>
 </header>
@@ -81,6 +81,8 @@ <h6 id="descricaoProgresso"></h6>
             </div>
             <div>
                 <button id="btnAnterior" class="btn btn-primary" onclick="paginaAnterior()">Anterior</button>
+                <!-- Botão Home adicionado aqui -->
+                <button id="btnHome" class="btn btn-primary" onclick="confirmarVoltarHome()">Home</button>
                 <button id="btnProxima" class="btn btn-primary" onclick="proximaPagina()">Próxima</button>
             </div>
             <div>
@@ -98,128 +100,176 @@ <h6 id="descricaoProgresso"></h6>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script>
-        fetch('../data/az-104.json')
-            .then(response => response.json())
-            .then(data => {
-                let topicos = Object.keys(data).filter(key => key !== 'title').map(key => ({ Titulo: key, Itens: data[key] }));
-                let paginaAtual = 0;
-
-                function contarTotalDeLinks() {
-                    let totalLinks = 0;
-                    topicos.forEach(topico => {
-                        totalLinks += topico.Itens.length;
-                    });
-                    return totalLinks;
-                }
+        async function carregarDados() {
+            try {
+                const response = await fetch('../data/az-104.json');
+                const data = await response.json();
+                console.log('Dados carregados com sucesso', data);
+                return data;
+            } catch (error) {
+                console.error('Erro ao carregar os dados', error);
+            }
+        }
 
-                function marcarComoVisitado(link) {
-                    const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
-                    if (!visitados.includes(link)) {
-                        visitados.push(link);
-                        localStorage.setItem('simulado-az-104', JSON.stringify(visitados));
-                    }
-                    atualizarBarraDeProgresso();
-                }
+        async function iniciar() {
+            const data = await carregarDados();
+            if (!data) return;
 
-                function foiVisitado(link) {
-                    const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
-                    return visitados.includes(link);
-                }
+            let topicos = Object.keys(data).filter(key => key !== 'title').map(key => ({ Titulo: key, Itens: data[key] }));
+            let paginaAtual = 0;
 
-                function exibirTopicos() {
-                    if (topicos.length === 0) return;
-                    const topicoAtual = topicos[paginaAtual];
-                    const container = document.getElementById("topicos");
-                    const tituloPagina = document.getElementById("tituloPagina");
-                    tituloPagina.textContent = topicoAtual.Titulo;
-                    container.innerHTML = "";
-
-                    topicoAtual.Itens.forEach(item => {
-                        const elemento = document.createElement("a");
-                        elemento.href = item.link;
-                        elemento.classList.add("list-group-item", "list-group-item-action");
-                        elemento.target = "_blank";
-                        elemento.textContent = item.title;
-                        if (foiVisitado(item.link)) {
-                            elemento.style.backgroundColor = "lightgreen";
-                        }
-                        elemento.addEventListener('click', (e) => {
-                            e.target.style.backgroundColor = "lightgreen";
-                            marcarComoVisitado(item.link);
-                        });
-                        container.appendChild(elemento);
-                    });
-                    atualizarInfoPagina();
-                    atualizarBotoes();
-                    atualizarBarraDeProgresso();
-                }
+            function contarTotalDeLinks() {
+                let totalLinks = 0;
+                topicos.forEach(topico => {
+                    totalLinks += topico.Itens.length;
+                });
+                return totalLinks;
+            }
 
-                function proximaPagina() {
-                    if (paginaAtual < topicos.length - 1) {
-                        paginaAtual++;
-                        exibirTopicos();
-                    }
+            function marcarComoVisitado(link) {
+                const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
+                if (!visitados.includes(link)) {
+                    visitados.push(link);
+                    localStorage.setItem('simulado-az-104', JSON.stringify(visitados));
                 }
+                atualizarBarraDeProgresso();
+            }
+
+            function foiVisitado(link) {
+                const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
+                return visitados.includes(link);
+            }
 
-                function paginaAnterior() {
-                    if (paginaAtual > 0) {
-                        paginaAtual--;
-                        exibirTopicos();
+            function exibirTopicos() {
+                if (topicos.length === 0) return;
+                const topicoAtual = topicos[paginaAtual];
+                const container = document.getElementById("topicos");
+                const tituloPagina = document.getElementById("tituloPagina");
+                tituloPagina.textContent = topicoAtual.Titulo;
+                container.innerHTML = "";
+
+                topicoAtual.Itens.forEach(item => {
+                    const elemento = document.createElement("a");
+                    elemento.href = item.link;
+                    elemento.classList.add("list-group-item", "list-group-item-action");
+                    elemento.target = "_blank";
+                    elemento.textContent = item.title;
+                    if (foiVisitado(item.link)) {
+                        elemento.style.backgroundColor = "lightgreen";
                     }
-                }
+                    elemento.addEventListener('click', (e) => {
+                        e.target.style.backgroundColor = "lightgreen";
+                        marcarComoVisitado(item.link);
+                    });
+                    container.appendChild(elemento);
+                });
+                atualizarInfoPagina();
+                atualizarBotoes();
+                atualizarBarraDeProgresso();
+            }
 
-                function atualizarInfoPagina() {
-                    const infoPagina = document.getElementById("infoPagina");
-                    infoPagina.textContent = `Página ${paginaAtual + 1} de ${topicos.length}`;
+            function proximaPagina() {
+                if (paginaAtual < topicos.length - 1) {
+                    paginaAtual++;
+                    exibirTopicos();
                 }
+            }
 
-                function atualizarBotoes() {
-                    const btnAnterior = document.getElementById("btnAnterior");
-                    const btnProxima = document.getElementById("btnProxima");
-                    btnAnterior.disabled = paginaAtual === 0;
-                    btnProxima.disabled = paginaAtual >= topicos.length - 1;
+            function paginaAnterior() {
+                if (paginaAtual > 0) {
+                    paginaAtual--;
+                    exibirTopicos();
                 }
+            }
 
-                function atualizarBarraDeProgresso() {
-                    const topicoAtual = topicos[paginaAtual];
-                    const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
-                    const totalItens = topicoAtual.Itens.length;
-                    const itensVisitados = topicoAtual.Itens.filter(item => visitados.includes(item.link)).length;
-                    const percentualVisitado = (itensVisitados / totalItens) * 100;
-                    const textoDescricao = `Você acessou ${Math.round(percentualVisitado)}% porcento (${itensVisitados} de ${totalItens}) dos links abaixo - Total de Perguntas: (${contarTotalDeLinks()})`;
-                    const descricaoProgresso = document.getElementById("descricaoProgresso");
-                    descricaoProgresso.textContent = textoDescricao;
-                }
+            function atualizarInfoPagina() {
+                const infoPagina = document.getElementById("infoPagina");
+                infoPagina.textContent = `Página ${paginaAtual + 1} de ${topicos.length}`;
+            }
 
-                function limparLocalStorage() {
-                    $('#confirmacaoModal').modal('show');
-                }
+            function atualizarBotoes() {
+                const btnAnterior = document.getElementById("btnAnterior");
+                const btnProxima = document.getElementById("btnProxima");
+                btnAnterior.disabled = paginaAtual === 0;
+                btnProxima.disabled = paginaAtual >= topicos.length - 1;
+            }
 
-                $(document).ready(function () {
-                    $('body').append(`
-                        <div class="modal fade" id="confirmacaoModal" tabindex="-1" aria-labelledby="confirmacaoModalLabel" aria-hidden="true">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-header">
-                                        <h5 class="modal-title" id="confirmacaoModalLabel">Confirmação</h5>
-                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                            <span aria-hidden="true">&times;</span>
-                                        </button>
-                                    </div>
-                                    <div class="modal-body">
-                                        Deseja realmente reiniciar todo o progresso? Ao confirmar será excluido todo o historico de acesso aos links de cada tópico que está armazenado no Local Storage, essa ação irá fazer você voltar ao tópico 1.
+            function atualizarBarraDeProgresso() {
+                const topicoAtual = topicos[paginaAtual];
+                const visitados = JSON.parse(localStorage.getItem('simulado-az-104') || '[]');
+                const totalItens = topicoAtual.Itens.length;
+                const itensVisitados = topicoAtual.Itens.filter(item => visitados.includes(item.link)).length;
+                const percentualVisitado = (itensVisitados / totalItens) * 100;
+                const textoDescricao = `Você acessou ${Math.round(percentualVisitado)}% porcento (${itensVisitados} de ${totalItens}) dos links abaixo - Total de Perguntas: (${contarTotalDeLinks()})`;
+                const descricaoProgresso = document.getElementById("descricaoProgresso");
+                descricaoProgresso.textContent = textoDescricao;
+            }
+
+            window.limparLocalStorage = function() {
+                $('#confirmacaoModal').modal('show');
+            };
+
+            window.proximaPagina = proximaPagina;
+            window.paginaAnterior = paginaAnterior;
+
+            // Função para confirmar volta ao menu principal
+            window.confirmarVoltarHome = function() {
+                $('#voltarHomeModal').modal('show');
+            };
+
+            $(document).ready(function () {
+                $('body').append(`
+                            <div class="modal fade" id="confirmacaoModal" tabindex="-1" aria-labelledby="confirmacaoModalLabel" aria-hidden="true">
+                                <div class="modal-dialog">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="confirmacaoModalLabel">Confirmação</h5>
+                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                <span aria-hidden="true">&times;</span>
+                                            </button>
+                                        </div>
+                                        <div class="modal-body">
+                                            Deseja realmente reiniciar todo o progresso? Ao confirmar será excluido todo o historico de acesso aos links de cada tópico que está armazenado no Local Storage, essa ação irá fazer você voltar ao tópico 1.
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
+                                            <button type="button" class="btn btn-danger" onclick="localStorage.removeItem('simulado-az-104'); $('#confirmacaoModal').modal('hide'); location.reload();">Reiniciar o Progresso</button>
+                                        </div>
                                     </div>
-                                    <div class="modal-footer">
-                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
-                                        <button type="button" class="btn btn-danger" onclick="localStorage.removeItem('simulado-az-104'); $('#confirmacaoModal').modal('hide'); location.reload();">Reiniciar o Progresso</button>
+                                </div>
+                            </div>
+                        `);
+
+                // Modal de confirmação para voltar ao menu principal
+                $('body').append(`
+                            <div class="modal fade" id="voltarHomeModal" tabindex="-1" aria-labelledby="voltarHomeModalLabel" aria-hidden="true">
+                                <div class="modal-dialog">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="voltarHomeModalLabel">Voltar ao Menu Principal</h5>
+                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                <span aria-hidden="true">&times;</span>
+                                            </button>
+                                        </div>
+                                        <div class="modal-body">
+                                            Tem certeza que deseja voltar ao menu principal? Ao confirmar você será redirecionado para a página "Simulados para as Certificações da Microsoft Azure".
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
+                                            <button type="button" class="btn btn-primary" onclick="window.location.href='../../index.html';">Confirmar</button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    `);
-                });
+                        `);
+
                 exibirTopicos();
             });
+
+            exibirTopicos();
+        }
+
+        iniciar();
     </script>
 </body>
 
