Site estático (HTML/CSS/JS puro, sem build, sem backend, sem dependências) que ajuda o cliente a descobrir o aro da sua aliança usando apenas um cartão de crédito comum e um anel que já sirva.
Não há servidor nem passo de build. Basta abrir o arquivo diretamente no navegador:
- Dê duplo clique em
index.html(ou clique com o botão direito → "Abrir com" → seu navegador). - Pronto — o site funciona 100% localmente, inclusive offline (exceto pelas fontes do Google Fonts, que exigem internet na primeira carga; veja a seção "Fontes" abaixo caso queira removê-la).
Alternativa (opcional, só por conveniência ao testar mudanças com recarregamento automático): qualquer servidor estático simples funciona, por exemplo, a partir desta pasta:
npx serve .
ou, com Python já instalado:
python -m http.server 8080
Isso é totalmente opcional — o requisito do projeto é funcionar abrindo o
index.html diretamente, e funciona.
index.html Estrutura da página (hero + 3 passos)
styles.css Todo o visual (preto + dourado, tipografia, animações)
app.js Toda a lógica (navegação entre passos, cálculo do aro, localStorage)
assets/logo-placeholder.svg Logo "DANIEL CARMASSI" temporário (dourado)
assets/favicon.svg Favicon temporário ("DC" dourado sobre preto)
README.md Este arquivo
A logo oficial em uso é assets/danielcarmassilogo.png (PNG dourado com
fundo transparente, monograma "DC" + "Daniel Carmassi — Joalheiro").
Para atualizar a logo:
-
Exporte a nova arte em PNG com fundo transparente (ou SVG).
-
Salve substituindo
assets/danielcarmassilogo.png(mantendo o mesmo nome), ou salve com outro nome e atualize a referência emindex.html:<img class="site-header__logo" src="assets/danielcarmassilogo.png" alt="Daniel Carmassi — Joalheiro">
-
Recomendações de arte-final: fundo transparente; como o cabeçalho é preto, uma versão dourada ou monocromática clara funciona melhor. Se a logo for escura/colorida, ajuste
styles.css(classe.site-header) para um fundo neutro atrás dela. O tamanho é controlado por.site-header__logoemstyles.css.
O favicon (assets/favicon.svg) segue a mesma lógica — substitua o
arquivo mantendo o nome, ou ajuste o <link rel="icon"> no <head> do
index.html.
Na tela de resultado, o botão "Falar no WhatsApp" aponta para um link
placeholder (href="#"). Para ativar o link real, edite um dos dois
lugares abaixo (o JS sobrescreve o href do HTML, então o mais
confiável é editar o app.js):
app.js — função updateWhatsappLink():
function updateWhatsappLink() {
// TODO(daniel-carmassi): set the real WhatsApp number/link here.
var WHATSAPP_URL = "#"; // <-- troque aqui
btnWhatsapp.setAttribute("href", WHATSAPP_URL);
}Troque "#" por algo como:
var WHATSAPP_URL = "https://wa.me/5511999999999?text=Ol%C3%A1%2C%20medi%20minha%20alian%C3%A7a%20e%20o%20aro%20deu%20" + state.lastAro;(substitua 5511999999999 pelo número real, com código do país + DDD,
sem espaços ou símbolos).
Também é possível editar diretamente o href="#" no index.html
(elemento <a id="btn-whatsapp">), mas nesse caso remova ou ajuste a
chamada de updateWhatsappLink() em app.js para não sobrescrevê-lo.
-
Calibração (Passo I): o usuário ajusta um retângulo na tela até ele ficar do mesmo tamanho de um cartão de crédito real encostado no monitor/celular. O retângulo respeita sempre a proporção ISO/IEC 7810 ID-1 (85,60 mm × 53,98 mm), então nunca fica distorcido — apenas a largura é controlada pelo usuário; a altura é recalculada automaticamente.
A partir da largura em pixels escolhida, calculamos:
pxPorMM = larguraDoCartaoEmPx / 85.60Esse valor é salvo em
localStorage(dc_pxPorMM) para que o visitante não precise recalibrar em visitas futuras no mesmo dispositivo/navegador. -
Medição (Passo II): o usuário ajusta um círculo dourado até ele encostar exatamente no diâmetro interno de uma aliança que já sirva. Convertendo o diâmetro do círculo (em px) para milímetros usando o
pxPorMMcalibrado, e então para o aro brasileiro:diametroMM = diametroDoCirculoEmPx / pxPorMM aro = round(PI * diametroMM - 40)(A fórmula inversa, usada para limitar os controles ao intervalo de aros 8–34, é
diametroMM = (aro + 40) / PI.) -
Resultado: mostramos o número do aro em destaque, o diâmetro em milímetros (com vírgula decimal, padrão brasileiro) e um aviso de que a margem de erro é de 1 a 2 aros — a medida exata deve ser conferida em loja.
Checagens de sanidade validadas (usadas durante o desenvolvimento):
- aro 20 → diâmetro ≈ 19,1 mm
- diâmetro 17,5 mm → aro 15
Como é um site 100% estático, qualquer hospedagem de arquivos estáticos funciona. Alguns exemplos:
- Netlify / Vercel: arraste a pasta inteira no painel de deploy, ou conecte um repositório Git e configure "sem build" (build command vazio, publish directory = raiz do projeto).
- GitHub Pages: suba os arquivos para um repositório e ative o Pages apontando para a branch/pasta raiz.
- Qualquer servidor / CDN: basta copiar os arquivos
(
index.html,styles.css,app.js, pastaassets/) para o diretório público do servidor.
Não é necessário nenhum passo de build, variável de ambiente ou configuração de servidor além de servir arquivos estáticos.
- Sem frameworks, sem dependências de runtime, sem passo de build.
- Fontes carregadas via Google Fonts (
Cormorant Garamondpara títulos,Interpara textos de interface) através de uma tag<link>no<head>— requer internet apenas na primeira carga da página. - O slider de medida usa
<input type="range">nativo, funcionando com mouse, touch e teclado em qualquer navegador moderno. - Compatível com light/dark do sistema operacional não se aplica — o design é intencionalmente preto/dourado fixo (identidade da marca).
- Números são formatados no padrão brasileiro (vírgula decimal), por exemplo "19,1 mm".