Loja de tecnologia responsiva em HTML, CSS e JavaScript puros.
Sem build, sem framework, sem dependência de runtime — abrir o index.html já é o produto rodando.
- O que tem dentro
- Direção de design
- A marca
- Acessibilidade
- Estrutura
- Rodando localmente
- Deploy
- Personalizando
- Créditos
| Carrinho persistente | Quantidade por item, validação contra o estoque real do produto e estado salvo em localStorage |
| Medidor de frete grátis | Barra de progresso mostrando quanto falta para os R$ 299 |
| Cupons funcionais | NOVA10 (10%), NOVATECH20 (20%) e FRETEGRATIS |
| Parcelamento | Calculado por produto e no total: até 12x, parcela mínima de R$ 30 |
| Visualização rápida | Modal com descrição, ficha técnica e estoque, sem sair da grade |
| Lista de desejos | Painel próprio, com envio direto ao carrinho |
- Busca com Ctrl+K, destaque do termo encontrado e navegação por ↑↓+Enter
- Filtro por categoria e ordenação por preço, avaliação, desconto ou relevância
- Contagem de resultados e estado vazio com ação de limpar filtros
- Contagem regressiva da oferta com prazo persistido — não reinicia a cada visita
- 24 produtos em 6 categorias, com todas as contagens derivadas do próprio catálogo
- Tema claro e escuro completos, com alternância persistida e respeito ao
prefers-color-schemena primeira visita - Estados de carregamento (skeletons), revelação em scroll e barra de progresso de leitura
- Validação de formulário campo a campo, com mensagem em
role="alert" - Notificações com ação ("Ver carrinho"), posicionadas fora do caminho dos botões principais
- Entrada escalonada da primeira dobra; o traço do título é desenhado, não aparece pronto
- O produto voa até o ícone do carrinho ao ser adicionado
- Crossfade da grade ao filtrar ou reordenar
- Elevação e escala nos cartões, resposta física nos botões, sublinhado do menu deslizante
- Tudo desligado sob
prefers-reduced-motion
Varejo editorial, não dashboard de SaaS.
| Papel | Cor | Uso |
|---|---|---|
| Ação | Azul | Botões primários, links, foco |
| Urgência | Âmbar | Ofertas, cupons, selo de mais vendido, estrelas |
| Confiança | Verde | Estoque, economia, confirmações |
| Alerta | Vermelho | Percentual de desconto, erros de formulário |
O fundo do tema claro é um neutro frio, escolhido para o branco puro dos cartões saltar à frente — com sombra em duas camadas, os cartões têm elevação real em vez de apenas um contorno. A tipografia é fluida via clamp(): Space Grotesk no display, Inter na interface, com números tabulares em todo preço e contador.
O produto aparece na primeira dobra: a vitrine do hero é montada a partir do próprio catálogo, não de arte fixa.
Sem ícone em quadradinho colorido. O símbolo mora dentro da palavra: o O de NOVA é uma nova — anel mais estrela de quatro pontas.
O anel foi desenhado em SVG copiando as proporções do O da Space Grotesk 700, incluindo a assimetria que todo grotesco tem: hastes laterais mais grossas (0,145em) que topo e base (0,115em). Sem isso a letra desenhada destoa das letras reais ao lado.
A estrela foi calibrada para sobreviver à escala: aos 72px lê como nova, aos 19px como estrela, aos 11px vira um ponto — que é exatamente o que se quer num favicon. O mesmo O é o favicon.
TECH vem depois de um filete, em Inter espaçada — hierarquia por peso e tracking, sem o clássico "Tech" colorido de duas cores. Em telas estreitas o | TECH some e a palavra sozinha segura a marca. No hover a estrela gira 90°.
Auditado com axe-core (WCAG 2.1 e 2.2, níveis A e AA) nos dois temas — zero violações, incluindo os estados abertos: carrinho, busca com resultados, visualização rápida, favoritos e formulário com erro.
- Contraste AA garantido por tokens dedicados:
--text-3,--brand-ink,--accent-ink,--accent-display,--on-danger,--on-accent - Foco preso dentro dos diálogos, Esc para fechar e retorno do foco ao elemento que abriu
- Link "pular para os produtos", anéis de foco visíveis e
prefers-reduced-motionrespeitado em toda animação - Sem overflow horizontal de 360px a 1440px
- Todo HTML dinâmico passa por
escapeHtml()antes da interpolação
loja-online/
├── index.html marcação semântica e conteúdo estático
├── styles.css design system: tokens, componentes, responsivo
├── app.js catálogo, estado, carrinho, busca e interações
└── docs/ capturas usadas nesta documentação
O app.js é organizado por módulo de UI, cada um com seu init:
constantes e catálogo → estado → utilidades → camadas (scrim, foco, Esc)
→ tema → header → busca → carrinho → favoritos → categorias
→ filtros → produtos → visualização rápida → vitrine → contagem regressiva
→ contadores → formulários → toasts
Adicionar um produto é acrescentar um objeto ao array products — categorias, filtros, contagens e a vitrine do hero se atualizam sozinhos.
git clone https://github.com/blackxzin/loja-online.git
cd loja-onlineAbra o index.html no navegador, ou suba um servidor local:
npx serve .
# ou
python3 -m http.server 8000Não há passo de build, instalação ou variável de ambiente.
O site está no ar na Vercel: loja-online-one-eta.vercel.app
Como é estático puro, não há configuração de build — basta importar o repositório e apontar para a raiz:
| Framework Preset | Other |
| Build Command | (vazio) |
| Output Directory | . |
Cada push na master publica automaticamente.
Outras opções de host
GitHub Pages — Settings → Pages → Source Deploy from a branch → branch master, pasta / (root)
Netlify — arraste a pasta do projeto na área de deploy, ou conecte o repositório sem build command
Qualquer host estático serve: são três arquivos e nenhuma dependência de runtime.
Cores e espaçamentos — tudo vive em custom properties no topo do styles.css:
:root /* tipografia, escala, raios, curvas de animação */
[data-theme=...] /* uma paleta completa por tema */Regras de negócio — constantes no topo do app.js:
FREE_SHIPPING_MIN // valor mínimo para frete grátis
SHIPPING_FLAT // frete fixo abaixo do mínimo
MAX_INSTALLMENTS // parcelas máximas
MIN_INSTALLMENT // valor mínimo por parcela
COUPONS // cupons aceitos- Tipografia: Inter e Space Grotesk
- Ícones de interface: Lucide
- Fotografia de produto: Unsplash
Uso livre. Fique à vontade para clonar, adaptar e usar como base.