Site de uma perfumaria fictícia, desenvolvido apenas com tecnologias de front-end.
O projeto Notta consiste no desenvolvimento de um site para uma empresa fictícia de perfumes. Um conjunto de páginas interconectadas permite cadastrar um usuário, autenticar o acesso e navegar pelas informações, pelos produtos e pelos serviços da marca.
O objetivo acadêmico é aplicar HTML semântico, CSS, JavaScript e um framework responsivo, incluindo validação de formulários, manipulação de localStorage, feedback visual sem alert(), navegação entre páginas e acessibilidade. O site não possui servidor de autenticação, vendas, pagamentos ou envio de mensagens.
Todas as páginas internas exibem o mesmo menu e o login no canto superior direito. O botão Sair encerra a sessão e retorna ao login. Abrir uma página interna sem sessão direciona à tela de login e preserva o destino para depois da autenticação.
Erros junto aos campos e resumo do formulário.
Autenticação demonstrativa usando dados locais.
Submenus levam aos tópicos das páginas internas.
A identidade segue a referência enviada: fundo quase preto com tom azulado, caixas azul escuro, texto claro e destaque dourado. Playfair Display nos títulos e DM Sans nos textos. Bootstrap 5.3.3 na grade responsiva e nos menus e modais.
Em telas menores, a navegação vira um menu expansível, os formulários ocupam uma coluna e os cards do catálogo se reorganizam. A barra de acessibilidade alterna contraste claro/escuro e ajusta o texto de 100% a 130%. As preferências ficam salvas no navegador. Animações respeitam a preferência por movimento reduzido.
Cronograma de referência em oito semanas, alinhado aos marcos do enunciado. As datas abaixo representam planejamento, não comprovantes de execução em datas passadas.
| Semana / período | Etapa | Entregável |
|---|---|---|
| 1 · 28/09–04/10 | Definição do escopo e wireframes das três telas principais | Objetivo e mapa de navegação |
| 2 · 05/10–11/10 | Mockup, identidade visual e escolha do framework | Pré-projeto: estrutura e layout |
| 3 · 12/10–18/10 | Cadastro com HTML, CSS e validação em JavaScript | Tela 1 funcional |
| 4 · 19/10–25/10 | Integração com localStorage e mensagens de feedback | Persistência e feedback padronizado |
| 5 · 26/10–01/11 | Login e comparação das credenciais cadastradas | Tela 2 funcional |
| 6 · 02/11–08/11 | Tela principal, páginas internas, menu e submenus | Navegação e identificação do usuário |
| 7 · 09/11–15/11 | Responsividade, contraste e tamanho do texto | Versões para celular e desktop |
| 8 · 16/11–22/11 | Testes, revisão do código e preparação da apresentação | Front-end final e roteiro |
11/10/2026 · Pré-projeto · 10 pontos
22/11/2026 · Projeto · 20 pontos
23/11/2026 · Apresentação · 20 pontos
| Requisito | Implementação |
|---|---|
| Todos os dados do cadastro | Nome, nascimento, CPF, celular, endereço completo, login, senha e confirmação. Complemento é opcional. |
| Nome com até 45 caracteres | Letras com acentos e separadores de nomes; números são recusados. |
| Celular no formato do PDF | (+55) XX-XXXXXXXX, com máscara e validação: dois dígitos de DDD e oito do número. |
| Login e senha alfabéticos | Login: exatamente seis letras. Senha: exatamente oito letras. Confirmação idêntica à senha. |
| Feedback sem alert() | Mensagens junto aos campos, resumo de erros e toast, com a mesma aparência em todo o site. |
| Cadastro e autenticação | Login e senha no localStorage; sessão no sessionStorage; redirecionamento após cadastro e login. |
| Menu, submenus e login | Cabeçalho compartilhado em todas as páginas internas, com tópicos, identificação e saída da conta. |
| Dois mecanismos de acessibilidade | Alternância entre tema claro/escuro e controle do tamanho do texto, além de foco visível e navegação por teclado. |
| Responsividade com framework | Bootstrap local e CSS próprio, com ajustes para desktop, notebook, tablet e celular. |
| Extras da proposta Notta | Catálogo filtrável, pirâmide olfativa, sacola demonstrativa, serviços, contato local e dúvidas frequentes. |
O formato de telefone e as regras de senha seguem literalmente o trabalho. A autenticação é uma simulação acadêmica: armazenar senha no localStorage não é uma solução para aplicações reais. Use dados de teste.