<!DOCTYPE html>
<html lang="pt-PT">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre - Mitigação de Ataques Cibernéticos</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Saudação dinâmica e contador de visitas -->
    <div id="saudacao"></div>

    <!-- Botão para alternar entre temas (Dark/Light) -->
    <button id="btn-tema">🌙 Modo Escuro</button>

    <header>
        <h1>Mitigação de Ataques Cibernéticos</h1>
        <nav>
            <ul>
                <li><a href="index.php">Visão Geral</a></li>
                <li><a href="phishing.php">Phishing</a></li>
                <li><a href="ransomware.php">Ransomware</a></li>
                <li><a href="ddos.php">DDoS</a></li>
                <li><a href="about.php" class="active">Sobre</a></li>
                <li><a href="backoffice.php">Back-office</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="relatorio">
            <h2>Relatório do E-fólio A</h2>

            <article>
                <h3>Finalidade e Arquitetura</h3>
                <p>Desenvolvi este site com o objetivo de apresentar técnicas de mitigação para os três tipos de ataques cibernéticos mais prevalentes: phishing, ransomware e DDoS. A arquitetura do projeto é composta por cinco páginas HTML ( <code>index.html</code> (visão geral), <code>phishing.html</code>, <code>ransomware.html</code>, <code>ddos.html</code> e <code>about.html</code> (relatório) ), todas partilhando um menu de navegação idêntico com links relativos. Esta estrutura permite ao utilizador navegar coerentemente entre os conteúdos, assegurando consistência visual e funcional em todo o site.</p>
            </article>

            <article>
                <h3>Separação entre Conteúdo e Formatação</h3>
                <p>Todo o conteúdo semântico está contido nos ficheiros HTML5, recorrendo a tags como <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;section&gt;</code>, <code>&lt;article&gt;</code>, <code>&lt;table&gt;</code> e <code>&lt;footer&gt;</code>. Nenhuma página contém estilos inline. A totalidade da formatação visual encontra-se no ficheiro externo <code>style.css</code>, onde utilizei variáveis CSS (<code>:root</code>) para definir cores, tipografia e sombras, facilitando a manutenção e a alternância de temas. O ficheiro <code>script.js</code> limita-se a manipular o DOM e o <code>localStorage</code>, sem gerar estilos inline.</p>
            </article>

            <article>
                <h3>Funcionalidades em JavaScript Puro</h3>
                <p>Implementei exatamente três funcionalidades em JavaScript puro (Vanilla JS), sem qualquer dependência externa:</p>
                <ul>
                    <li><strong>Saudação dinâmica e contador de visitas:</strong> A função <code>initSaudacao()</code> lê a hora do sistema via <code>new Date().getHours()</code> e exibe uma saudação contextual ("Bom dia", "Boa tarde" ou "Boa noite"). O contador de visitas é incrementado e persistido no <code>localStorage</code> sob a chave <code>efolio-visitas</code>, mantendo-se entre sessões e páginas.</li>
                    <li><strong>Alternância de tema (Dark/Light):</strong> A função <code>initTema()</code> adiciona ou remove a classe <code>dark-mode</code> no elemento <code>&lt;body&gt;</code>, ativando as variáveis CSS alternativas previamente definidas. A preferência é guardada no <code>localStorage</code> (<code>efolio-tema</code>), garantindo continuidade ao navegar entre as cinco páginas. O texto do botão atualiza-se automaticamente para refletir o tema ativo.</li>
                    <li><strong>Modal de imagem aumentada:</strong> A função <code>initModal()</code> atribui eventos de clique a todas as imagens com a classe <code>.img-conteudo</code>. Ao clicar, a imagem é apresentada em tamanho ampliado dentro de um modal sobreposto (<code>#modal-imagem</code>). O modal fecha ao clicar na área exterior ou ao premir a tecla Escape, promovendo acessibilidade e usabilidade.</li>
                </ul>
                <p>Todas as funções são inicializadas no evento <code>DOMContentLoaded</code>, assegurando que o DOM está completamente carregado antes de qualquer manipulação.</p>
            </article>
        </section>

        <section id="server-side">
            <h2>Informação Server-side (E-fólio B)</h2>

            <article>
                <h3>Tecnologias Server-side Utilizadas</h3>
                <p>Na evolução do projeto para o e-fólio B, foram integradas tecnologias server-side para persistência e gestão dinâmica de dados:</p>
                <ul>
                    <li><strong>PHP 8.x:</strong> Linguagem de scripting server-side responsável pela geração dinâmica de páginas e processamento de pedidos HTTP.</li>
                    <li><strong>MySQLi (Object-Oriented):</strong> Extensão nativa do PHP para interação com a base de dados MySQL/MariaDB, utilizando prepared statements para prevenção de SQL injection.</li>
                    <li><strong>API REST JSON:</strong> Interface de comunicação stateless que expõe endpoints para operações CRUD (GET para consulta, PUT para inserção) sobre os registos de incidentes.</li>
                    <li><strong>Base de Dados:</strong> <code>bd_2403882_mitigacao</code> - base de dados relacional com a tabela <code>incidentes</code> que armazena os registos de ataques cibernéticos com campos para tipo, descrição, data de ocorrência, severidade e origem.</li>
                </ul>
            </article>

            <article>
                <h3>Arquitetura Server-side</h3>
                <p>A arquitetura segue uma separação clara de responsabilidades:</p>
                <ul>
                    <li><strong><code>inc/db.php</code>:</strong> Ficheiro de configuração da conexão à base de dados, reutilizável por todas as páginas dinâmicas.</li>
                    <li><strong><code>api/incidentes.php</code>:</strong> Endpoint REST que processa pedidos GET (listar todos ou por ID) e PUT (inserir novo incidente), respondendo em formato JSON.</li>
                    <li><strong><code>index.php</code>:</strong> Página dinâmica que consulta a base de dados e apresenta os incidentes numa tabela HTML gerada server-side.</li>
                    <li><strong><code>backoffice.php</code>:</strong> Interface de gestão com formulário que comunica assincronamente com a API REST via JavaScript <code>fetch()</code>.</li>
                </ul>
                <p><strong>Nota:</strong> As páginas criadas no E-fólio A com extensão <code>.html</code> (index, phishing, ransomware, ddos, about) foram renomeadas para <code>.php</code> de forma a suportarem a geração dinâmica de conteúdo do lado do servidor no E-fólio B. As referências do relatório do E-fólio A mantêm a designação original <code>.html</code> por serem descrição do trabalho anterior.</p>
            </article>

            <article>
                <h3>Endpoints da API REST</h3>
                <p><strong>URL da página de back-office:</strong> <code>backoffice.php</code></p>

                <h4>1. GET /api/incidentes.php</h4>
                <p>Consulta todos os incidentes registados na base de dados.</p>
                <ul>
                    <li><strong>Parâmetros:</strong> nenhum (ou <code>?id=NUMERO</code> para um incidente específico)</li>
                    <li><strong>Exemplo de pedido:</strong> <code>GET /api/incidentes.php</code></li>
                    <li><strong>Resposta (JSON):</strong> <code>[{"id":1,"tipo":"Phishing","descricao":"...","data_ocorrencia":"2025-01-15","severidade":"Alta","origem":"Email","data_registo":"..."}, ...]</code></li>
                </ul>

                <h4>2. PUT /api/incidentes.php</h4>
                <p>Insere um novo incidente na base de dados.</p>
                <ul>
                    <li><strong>Parâmetros (corpo JSON):</strong> <code>tipo</code>, <code>descricao</code>, <code>data_ocorrencia</code>, <code>severidade</code>, <code>origem</code></li>
                    <li><strong>Exemplo de pedido:</strong></li>
                </ul>
                <pre><code>PUT /api/incidentes.php
Content-Type: application/json

{
    "tipo": "Ransomware",
    "descricao": "Ataque ao servidor de ficheiros da empresa.",
    "data_ocorrencia": "2025-06-01",
    "severidade": "Critica",
    "origem": "Internet"
}</code></pre>
                <ul>
                    <li><strong>Resposta (JSON):</strong> <code>{"message":"Incidente criado com sucesso","id":6,"tipo":"Ransomware",...}</code></li>
                </ul>
            </article>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 - João Marques (2403882) - Laboratório de Sistemas e Serviços Web (E-fólios A e B)</p>
    </footer>

    <!-- Modal para visualização de imagens em tamanho grande -->
    <div id="modal-imagem">
        <img src="" alt="">
    </div>

    <script src="script.js"></script>
</body>
</html>