Pular
Rastreie seu pedido
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rastrear Pedido | i9Finity</title> <style> * { box-sizing: border-box; } body { margin: 0; padding: 30px 16px; font-family: Arial, Helvetica, sans-serif; background: #f7f7f7; color: #171717; } .rastreamento-container { width: 100%; max-width: 620px; margin: 40px auto; padding: 38px 28px; background: #ffffff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); text-align: center; } .icone { width: 58px; height: 58px; margin: 0 auto 18px; } h1 { margin: 0 0 12px; font-size: 30px; line-height: 1.2; } .subtitulo { margin: 0 auto 25px; max-width: 470px; color: #606060; font-size: 16px; line-height: 1.6; } .campo { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #cccccc; border-radius: 8px; font-size: 16px; text-transform: uppercase; outline: none; transition: border-color 0.2s; } .campo:focus { border-color: #111111; } .botao { width: 100%; min-height: 52px; margin-top: 14px; padding: 14px 18px; border: 0; border-radius: 8px; background: #111111; color: #ffffff; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.2s; } .botao:hover { opacity: 0.88; transform: translateY(-1px); } .aviso { margin-top: 20px; color: #777777; font-size: 13px; line-height: 1.5; } .erro { display: none; margin: 10px 0 0; color: #b00020; font-size: 14px; text-align: left; } @media (max-width: 600px) { body { padding: 15px; } .rastreamento-container { margin: 20px auto; padding: 30px 20px; } h1 { font-size: 25px; } } </style> </head> <body> <section class="rastreamento-container"> <svg class="icone" viewBox="0 0 64 64" aria-hidden="true"> <path d="M9 20L32 8l23 12v25L32 57 9 45V20Z" fill="none" stroke="#111" stroke-width="2.5" stroke-linejoin="round"/> <path d="M9 20l23 12 23-12M32 32v25" fill="none" stroke="#111" stroke-width="2.5" stroke-linejoin="round"/> <path d="M20 14l23 12v9" fill="none" stroke="#111" stroke-width="2.5" stroke-linejoin="round"/> </svg> <h1>Rastreie seu pedido</h1> <p class="subtitulo"> Insira o código de rastreamento recebido por e-mail para acompanhar sua entrega diretamente no site oficial dos Correios. </p> <form id="form-rastreamento"> <input id="codigo-rastreio" class="campo" type="text" placeholder="Exemplo: AB123456789BR" maxlength="20" autocomplete="off" aria-label="Código de rastreamento" > <p id="mensagem-erro" class="erro"> Digite um código de rastreamento válido. </p> <button class="botao" type="submit"> Rastrear pedido </button> </form> <p class="aviso"> Você será direcionado para o ambiente oficial dos Correios. Nunca realize pagamentos por links recebidos de fontes desconhecidas. </p> </section> <script> const formulario = document.getElementById('form-rastreamento'); const campo = document.getElementById('codigo-rastreio'); const erro = document.getElementById('mensagem-erro'); campo.addEventListener('input', function () { this.value = this.value.toUpperCase().replace(/\s+/g, ''); erro.style.display = 'none'; }); formulario.addEventListener('submit', function (evento) { evento.preventDefault(); const codigo = campo.value.trim().toUpperCase(); const formatoCorreios = /^[A-Z]{2}[0-9]{9}[A-Z]{2}$/; if (!formatoCorreios.test(codigo)) { erro.style.display = 'block'; campo.focus(); return; } const urlOficial = 'https://rastreamento.correios.com.br/app/index.php?objeto=' + encodeURIComponent(codigo); window.open(urlOficial, '_blank', 'noopener,noreferrer'); }); </script> </body> </html>