HyperDark

O Ambiente Cyberpunk Definitivo para Desenvolvedores Web

Themes • Live Server • Smart Tools • Pomodoro

⚡ O que é a HyperDark?

A HyperDark não é apenas um tema. É uma suíte de produtividade All-in-One projetada para o desenvolvedor moderno que busca estética e performance.

Combinamos um Live Server ultrarrápido, ferramentas inteligentes de CSS, controle avançado de Editor e um Timer de Foco em uma única extensão leve. Em vez de instalar 5 plugins diferentes que pesam no seu VS Code, a HyperDark entrega tudo o que você precisa.

🚀 Funcionalidades Principais

1. 🎨 Realce de Cores Neon (Neon Glass)

Esqueça os quadradinhos de cores opacos. A HyperDark aplica um efeito de "Vidro Neon" translúcido sobre as cores no seu código.

• Suporte Total: Funciona com HEX, RGB, HSL e nomes de cores (ex: red).
• Detecção de Variáveis: Reconhece e colore automaticamente variáveis CSS (var(--primary)) e SASS ($color).
• Controle de Opacidade: Você define se quer um brilho sutil (5%) ou uma cor sólida e vibrante.

2. ⚡ HyperServer (Live Server Integrado)

Inicie seus projetos HTML instantaneamente com zero configuração.

• Auto Reload: Salvou o arquivo? O navegador atualiza sozinho em milissegundos.
• Hot-Reload Inteligente: salvou apenas um .css? A folha é atualizada sem recarregar a página — formulários, scroll e estado JS ficam intactos. Só HTML/JS recarregam.
• Auto-Reconnect: se o servidor reiniciar, as páginas abertas reconectam sozinhas em 1,5s — sem precisar de F5.
• Smart Port: Se a porta 5500 estiver ocupada, ele encontra outra automaticamente.
• Log ao Vivo: um painel de Output mostra cada acesso, com status, arquivo e IP de origem — e conta os dispositivos conectados na barra de status.
• Acesso via Celular (QR Code): ao iniciar, um painel mostra um QR Code — escaneie com a câmera do celular e a página abre direto, sem digitar URL. Quando um dispositivo conecta, um aviso aparece.
• Streaming de Mídia (Range): vídeos e áudios pausam e avançam normalmente (respostas 206 parciais) — perfeito no celular.
• Compressão Brotli + gzip: negocia o melhor algoritmo por cliente (br > gzip), entregando HTML, CSS, JS e JSON comprimidos (~70% menores) — site abre rápido no celular.
• Cache Inteligente: respostas usam ETag + 304 Not Modified — recarregar não re-baixa arquivos sem necessidade.
• Somente Rede Local: o servidor roda apenas no IP privado (Wi-Fi/Ethernet/Tailscale) — qualquer dispositivo na sua rede acessa, mas nunca fica exposto na internet.
• Modo Túnel Seguro (SSH): em sessões remotas (VPS/container), o servidor escuta só em localhost — acesse pelo painel Ports do VS Code.
• Proteção de Arquivos: .env, .git, node_modules e chaves (.pem/.key) são bloqueados com 403 em qualquer cenário.

Como usar: Clique com o botão direito no arquivo HTML > "Start HyperServer" ou use o atalho Alt + L.

3. 🔍 Validador de Caminhos (Anti-404)

Evite quebrar links ou imagens em produção. A HyperDark escaneia seus atributos src e href enquanto você digita.

• Feedback Visual: Se o arquivo não existir na pasta, o caminho é sublinhado em VERMELHO imediatamente.
• Suporte: Funciona em HTML, CSS (url()), JS (import).

4. 📐 Conversor Inteligente (Px para Rem)

Abandone a calculadora. Ao passar o mouse sobre qualquer valor em px no seu CSS, a HyperDark calcula o equivalente em rem baseando-se em 16px.

Exemplo de fluxo:

1. Você digita: font-size: 32px;
2. Passa o mouse e vê o Tooltip: Converter para 2rem
3. Clica e o código é substituído automaticamente.

5. 🍅 Relógio de Foco (Pomodoro)

Mantenha o "Flow State". Um relógio discreto na barra de status que vira seu aliado de produtividade.

• Modo Foco: Clique no relógio para iniciar timers de 15, 25 ou 60 minutos.
• Feedback Visual: O ícone muda para 🔥 e fica Rosa Neon durante o foco.
• Alerta de Descanso: Quando o tempo acaba, um modal avisa que é hora de esticar as pernas.

⚙️ Personalização (Settings)

Você está no controle total. Acesse Configurações > HyperDark (Ctrl + ,) para ajustar:

Aparência & Tema

Ferramentas

⌨️ Atalhos de Teclado

🤝 Contribuição e Suporte

Encontrou um bug ou tem uma ideia para deixar a extensão ainda mais Cyberpunk? Abra uma issue no nosso Repositório GitHub.