Objetivo

Criar uma página web responsiva que ilustre conceitos de Interface do Usuário (UI) e sua relação com páginas web. A página deve conter um cabeçalho fixo, um índice interativo, uma área de conteúdo principal, uma barra lateral (sidebar) com cards informativos e um rodapé fixo. Além disso, a página deve ter um tema claro/escuro que pode ser alternado pelo usuário.

Requisitos Funcionais

Os requisitos funcionais da página incluem:

• Cabeçalho Fixo
• Navegação e Índice
• Área de Conteúdo Principal
• Rodapé Fixo
• Tema Claro/Escuro

Cabeçalho Fixo

O cabeçalho deve conter um logo à esquerda, o nome da página ao lado do logo, um menu de navegação com links "Home", "Requisitos", "Estrutura" e um ícone para alternar entre os temas claro e escuro (sol/lua). O cabeçalho deve se estender de ponta a ponta da tela e ser fixo no topo.

Navegação e Índice

Um botão de hambúrguer deve abrir/fechar o menu de navegação em telas pequenas. Um índice à esquerda com itens e subitens deve expandir e colapsar. O índice deve ser fixo na lateral da página em telas maiores e acessível via botão de hambúrguer em telas pequenas. O índice deve conter links que, ao serem clicados, exibem o conteúdo correspondente na área principal.

Área de Conteúdo Principal

A área de conteúdo principal deve exibir o conteúdo correspondente ao item ou subitem do índice selecionado. O conteúdo deve estar oculto até que o link correspondente no índice seja clicado.

Rodapé Fixo

O rodapé deve conter um texto simples "© 2024 - Todos os direitos reservados." e deve se estender de ponta a ponta da tela e ser fixo na parte inferior.

Tema Claro/Escuro

O usuário deve poder alternar entre os temas claro e escuro clicando no ícone de sol/lua no cabeçalho. A alteração do tema deve afetar todo o layout da página, incluindo o cabeçalho, rodapé, conteúdo e sidebar.

Requisitos Não Funcionais

Os requisitos não funcionais da página incluem:

• Responsavidade
• Usabilidade

Responsavidade

A página deve ser responsiva e funcionar bem em diferentes tamanhos de tela, desde dispositivos móveis até desktops. O menu de navegação e o índice devem ser acessíveis via botões de hambúrguer em telas pequenas.

Usabilidade

A navegação deve ser intuitiva e fácil de usar. O índice deve indicar visualmente o item ou subitem ativo.