Tela de Login Premium — HTML, CSS & JavaScript com Recuperaç

Este é um kit completo de tela de login profissional, feito do zero com HTML5, CSS3 e JavaScript puro (sem frameworks, sem dependências externas). Foi projetado para desenvolvedores, freelancers e agências que precisam entregar um sistema de autenticação moderno em minutos — basta colar no projeto e personalizar.

✨ O que está incluso

🔐 Tela de Login

• Campo de usuário e senha com validação em tempo real

• Botão “mostrar/ocultar senha” integrado

• Opção “Lembrar de mim”

• Mensagens de erro elegantes com feedback visual (shake animation)

🔒 Bloqueio Automático de Conta

• Após 5 tentativas incorretas, a conta é bloqueada automaticamente

• Mensagem com contador de tentativas restantes

• Botão “Redefinir senha” aparece inline para desbloquear

🔑 Recuperação de Senha em 4 Etapas

1. Informar usuário + contato (e-mail ou telefone)

2. Código de 6 dígitos com caixas individuais (auto-avanço, colar, backspace inteligente)

3. Definir nova senha com medidor de força e checklist em tempo real

4. Tela de sucesso animada

• Reenvio de código com contagem regressiva de 60s

📊 Painel de Testes (Dashboard)

• KPIs animados, gráficos de barras, donut chart, line chart em SVG puro

• Menu de usuário com avatar, dropdown e logout

• Tela de “Gerenciar Contatos” (adicionar/editar/remover e-mail e telefone)

🎨 Design & UX

• Tema claro e escuro alternável (salvo no localStorage)

• Layout responsivo (desktop, tablet e mobile)

• Animações suaves, transições e microinterações

• Código limpo, comentado em português e fácil de customizar

⚙️ Técnico

• Zero dependências — funciona em qualquer navegador moderno

• Código semântico e acessível (ARIA labels, roles, aria-live)

• Fácil de integrar com qualquer backend (PHP, Node, Python…)

• Senhas e usuários de exemplo já configurados para testar

🎯 Ideal para

• Desenvolvedores que querem economizar horas de trabalho

• Freelancers que precisam entregar projetos com aparência profissional

• Agências que buscam um template base reutilizável

• Quem está aprendendo e quer estudar código real e bem estruturado

📦 O que você recebe

• index.html — estrutura completa das telas

• style.css — estilização com tema claro/escuro

• script.js — toda a lógica (login, bloqueio, recuperação, dashboard)

• Instruções de uso e personalização