Aplicação web completa com múltiplas páginas, sistema de autenticação, cadastro de usuários e interface moderna e responsiva.
Projeto desenvolvido com foco em experiência do usuário, manipulação do DOM, validações em JavaScript e organização estruturada de front-end.
Sistema web com fluxo completo de navegação:
- Página inicial
- Login
- Cadastro
- Definição de senha
- Dashboard
- Pagamentos
- Sobre nós
- Endereço
- Modais interativos
Interface moderna com identidade visual própria, fontes customizadas e múltiplos efeitos visuais.
O Konnect foi desenvolvido com o objetivo de simular uma aplicação real com múltiplos fluxos de usuário, incluindo autenticação, formulários e validações.
Durante o desenvolvimento foram aplicados conceitos como:
- Manipulação do DOM
- Validação de formulários
- Máscara e validação de CEP
- Controle de exibição de senha
- Modais dinâmicos
- Organização modular de JavaScript
- Estruturação de múltiplas páginas HTML
- Estilização avançada com CSS
- Responsividade
- Uso de fontes customizadas
- HTML5
- CSS3
- JavaScript (ES6+)
- Manipulação do DOM
- Validações customizadas
- Estrutura modular de arquivos
📁 html/
├── 📁 css/
│ ├── style.css
│ ├── login.css
│ ├── cadastro.css
│ ├── main.css
│ └── ...
│
├── 📁 js/
│ ├── valida.js
│ ├── cadastro.js
│ ├── senha.js
│ ├── cep.js
│ ├── modal.js
│ └── ...
│
├── 📁 imagens/
│ ├── icon.png
│ ├── Konnectus.png
│ ├── login.png
│ └── ...
│
├── index.html
├── login.html
├── cadastro.html
├── dashboard.html
├── pagamento.html
├── endereco.html
├── sobrenos.html
└── definirsenha.html
📄 package.json
📄 README.md
- Validação de campos
- Alternância de exibição de senha
- Controle visual de erro
- Validação dinâmica de formulário
- Indicadores visuais de progresso
- Campos com efeitos animados
- Busca automática de CEP
- Preenchimento dinâmico de campos
- Simulação de fluxo de pagamento
- Interface organizada por tipo de pagamento
- Área principal pós-login
- Interface estruturada para futura expansão
- Fontes customizadas (Lato, Press Start 2P)
- Efeitos de foco animados
- Modais interativos
- Layout organizado e moderno
O layout foi estruturado para:
- Ajuste automático em diferentes resoluções
- Organização flexível com Flexbox
- Melhor experiência em dispositivos móveis
✔ Organização de projeto em múltiplas pastas ✔ Separação de responsabilidades (CSS, JS, HTML) ✔ Validação e manipulação avançada de formulários ✔ Estruturação de sistema com múltiplas páginas ✔ Controle de estados visuais via JavaScript ✔ Modularização de scripts
Clone o repositório:
git clone https://github.com/tvbrgamer/Konnect.gitAcesse a pasta do projeto e abra:
html/index.html
Nenhuma instalação adicional é necessária.