## Relatório do E-fólio A

### Finalidade e Arquitetura

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 ( `index.html` (visão geral), `phishing.html`, `ransomware.html`, `ddos.html` e `about.html` (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.

### Separação entre Conteúdo e Formatação

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

### Funcionalidades em JavaScript Puro

Implementei exatamente três funcionalidades em JavaScript puro (Vanilla JS), sem qualquer dependência externa:

- Saudação dinâmica e contador de visitas: A função `initSaudacao()` lê a hora do sistema via `new Date().getHours()` e exibe uma saudação contextual ("Bom dia", "Boa tarde" ou "Boa noite"). O contador de visitas é incrementado e persistido no `localStorage` sob a chave `efolio-visitas`, mantendo-se entre sessões e páginas.
- Alternância de tema (Dark/Light): A função `initTema()` adiciona ou remove a classe `dark-mode` no elemento `<body>`, ativando as variáveis CSS alternativas previamente definidas. A preferência é guardada no `localStorage` (`efolio-tema`), garantindo continuidade ao navegar entre as cinco páginas. O texto do botão atualiza-se automaticamente para refletir o tema ativo.
- Modal de imagem aumentada: A função `initModal()` atribui eventos de clique a todas as imagens com a classe `.img-conteudo`. Ao clicar, a imagem é apresentada em tamanho ampliado dentro de um modal sobreposto (`#modal-imagem`). O modal fecha ao clicar na área exterior ou ao premir a tecla Escape, promovendo acessibilidade e usabilidade.

Todas as funções são inicializadas no evento `DOMContentLoaded`, assegurando que o DOM está completamente carregado antes de qualquer manipulação.