� Como Funciona - ClickTime V3.1

👥 Os 3 Perfis do Sistema

O ClickTime V3.1 possui três tipos de acesso diferentes, cada um com funcionalidades específicas:

🔐 Sistema de Autenticação

Entenda como o login funciona em 4 passos:

1

Você digita suas credenciais

Na página de login, digite usuário e senha. O sistema valida credenciais de demonstração e usuários criados localmente.

2

Sistema define seu "role"

Se o perfil for administrador, o role será "admin". Nos demais casos, será "user" (ou convidado em modo guest).

3

Dados salvos no localStorage

Seus dados (usuário, role e preferências) são salvos para persistência entre sessões.

4

Classe CSS aplicada no Body

Se é admin, a classe is-admin é adicionada ao <body>, mostrando o painel de customização.

💡 A Mágica: Não é JavaScript checking de role constantemente. É CSS! Quando você é admin, a classe CSS é aplicada e painel aparece. Simples e eficiente.

📊 Comparação de Funcionalidades

Funcionalidade	👨‍💼 Admin	👤 Usuário	🚀 Convidado
Login Obrigatório	✅ Sim	✅ Sim	❌ Não
Painel de Customização	✅ Completo	❌ Não	❌ Não
Color Picker	✅ Sim	❌ Não	❌ Não
Presets de Temas (3)	✅ Sim	❌ Não	❌ Não
Fullscreen Mode	✅ Sim	✅ Sim	✅ Sim
Timer Principal	✅ Avançado	✅ Sim	✅ Básico
Frases Motivacionais	✅ 10+ Frases	✅ 10+ Frases	✅ Básicas
Persistência localStorage	✅ Completa	✅ Completa	❌ Limitada
Logout Seguro	✅ Sim	✅ Sim	✅ Sim

⭐ Recursos Especiais

1. Esqueci a Senha com Captcha

Se você esquecer sua senha, pode recuperá-la respondendo um desafio matemático simples:

Como funciona: Sistema gera uma soma simples (ex: 5+3), você responde e redefine a senha de usuários locais criados nas últimas 24h.

2. Cadastro local de usuários (24h)

No botão "Criar usuário", o cadastro é feito sem banco de dados, com validade de 24 horas.

Campos: Nome e sobrenome, Usuário, Senha e Perfil (Admin ou Usuário).

3. Modo Convidado Sem Credenciais

Clique em "Entrar como Convidado" para testar o sistema sem fazer login:

Benefício: Permite que visitantes terem uma prévia do sistema sem barreiras de autenticação.

4. Customização e gestão ADM

Administradores têm 3 presets, cor personalizada e gestão de usuários criados localmente:

Professional: Azul profissional (#2e8ae6)
Energia: Laranja energético (#ff8c42)
Relax: Verde relaxante (#2ecc71)
Customizado: Escolha qualquer cor com color picker
Usuários: filtrar, buscar, editar senha e excluir

5. Fullscreen Mode

Botão para entrar em modo tela cheia, perfeito para minimizar distrações:

Vantagem: Elimina distrações de barra de navegação do navegador, aumentando foco.

6. Frases Motivacionais

Sistema exibe frases motivacionais aleatórias para inspirar o usuário:

          "Foco é a chave para o sucesso" "Você é mais forte do que pensa" "Cada
          minuto conta, aproveite ao máximo" ... + 7 frases mais
        

🔧 Arquitetura Técnica

Arquivos Principais

login.html - Página de autenticação
auth-system.js - Core de autenticação
application-ui.js - Gerenciamento de UI
theme-advanced.css - Estilos e temas
sistema.html - Interface principal

Como as Classes CSS Controlam Tudo

          /* Admin pode ver o painel */ body.is-admin .admin-panel { display:
          block !important; animation: slideInRight 0.3s; } /* Convidado tem
          recursos restritos */ body.is-guest .restricted-feature { opacity:
          0.4; pointer-events: none; } /* Fullscreen ajusta o layout */
          body.in-fullscreen .navbar { display: none; } body.in-fullscreen
          .timer { font-size: 4rem; }
        

localStorage - Persistência

Dados salvos no navegador para reutilização:

clicktime_user: JSON com email, role, displayName, isGuest, themeColor
clicktime_theme: Cor hex salva (#2e8ae6, etc)

💡 Dicas Importantes

✅ Teste cada perfil: Faça login como admin, depois como usuário comum, depois como convidado. Veja as diferenças!

✅ Customize cores: Se for admin, abra o color picker e mude as cores em tempo real.

✅ Teste regoverança: Clique "Esqueci a senha" e resolva o captcha matemático.

✅ Fullscreen boost: Aperte o botão fullscreen para experiência de foco máximo.

⚠️ Importante: Este é um sistema de demonstração com autenticação frontend simulada. Para produção real, implemente autenticação backend com tokens JWT, criptografia de senhas, e segurança apropriada.

💡 Como Funciona o ClickTime V3.1