Sites & Landing Pages
ChatGPT / GPT-4o
Página 404 com Busca e Sugestões (HTML/CSS/JS puro)
Página de erro 404 que recupera o usuário: busca instantânea em um índice JSON, sugestões populares e atalhos por categoria.
0cópias
0joinhas
0favoritos
O prompt
Crie uma página de erro 404 em HTML, CSS e JavaScript puro (arquivo único) para o site {{nome_site}}.
Parâmetros:
- Nome do Site: {{nome_site}}
- URL do Índice de Busca (JSON): {{url_indice_json}} (formato [{title, url, keywords}])
- Cor da Marca: {{cor_marca}}
Requisitos:
1. Visual: número 404 grande com animação sutil (ex.: as 'zeros' flutuam), mensagem amigável ('Parece que esta página saiu para um café') e ilustração SVG inline simples — nada de imagem externa.
2. Campo de busca central: ao digitar, filtra instantaneamente o índice de {{url_indice_json}} (título + keywords, case-insensitive, mínimo 2 caracteres) mostrando até 5 resultados clicáveis com o termo destacado em <mark>.
3. Sem resultados: mensagem 'Nada encontrado para "X"' + link para a home e para contato.
4. Abaixo da busca: 6 atalhos populares (links fixos configuráveis no topo do script) organizados por categoria, como grade de cards pequenos.
5. Se o fetch do índice falhar (offline/CDN), esconder a busca graciosamente e manter os atalhos — a página nunca quebra.
6. Acessibilidade: label visível na busca, resultados em <ul> com aria-live='polite' anunciando a contagem, foco gerenciado ao digitar; cor da marca {{cor_marca}} nos destaques.
Como usar
- Substitua {{nome_site}}, {{url_indice_json}} e {{cor_marca}} (hex).
- Gere o índice JSON listando suas páginas principais ({title, url, keywords}) — 30-50 itens já dão boa experiência; hospede na raiz do site.
- Cole no ChatGPT; salve como 404.html e configure seu servidor para apontar erros HTTP 404 para ela (no nginx: error_page 404 /404.html).
- Teste digitando termos com e sem acento — o filtro normaliza antes de comparar (a IA inclui isso; confira).
Exemplo de saída
404.html (~250 linhas): '404' animado com zeros flutuantes + SVG inline, busca instantânea no índice JSON com <mark> nos termos e aria-live anunciando resultados, fallback sem busca se o fetch falhar, 6 atalhos por categoria em cards, label visível e foco gerenciado — tudo em um arquivo único.