<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Estimativa de Entrega - Brasil</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
}
#estimator-container {
max-width: 100%;
margin: 20px auto;
padding: 20px;
border: 1px solid #000;
border-radius: 0px;
background-color: #fff;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
color: #000;
}
.cep-input {
width: 100%;
padding: 15px;
border: 1px solid #cccccc;
border-radius: 0px;
font-size: 16px;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.cep-input:focus {
outline: none;
border-color: #2c6ecb;
box-shadow: 0 0 0 2px rgba(44, 110, 203, 0.2);
}
.calcular-button {
background-color: black;
color: white;
border: none;
padding: 15px 30px;
border-radius: 0px;
cursor: pointer;
width: 100%;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.calcular-button:hover {
background-color: gray;
}
.estimativa-result {
margin-top: 20px;
padding: 20px;
border-radius: 4px;
background-color: #f8f9fa;
display: none;
border: 1px solid #e5e5e5;
}
.estimativa-result.show {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
.error-message {
color: #dc3545;
padding: 15px;
border-radius: 0px;
background-color: #fff5f5;
margin-top: 15px;
display: none;
border: 1px solid #dc3545;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.delivery-info {
display: flex;
align-items: flex-start;
gap: 15px;
margin: 15px 0;
padding: 10px;
background-color: white;
border-radius: 0px;
border: 1px solid #e5e5e5;
}
.icon {
font-size: 24px;
flex-shrink: 0;
}
.delivery-info strong {
display: block;
margin-bottom: 0px;
font-size: 14px;
color: #333333;
}
.delivery-info div {
font-size: 14px;
line-height: 1.5;
}
@media screen and (min-width: 750px) {
#estimator-container {
max-width: 600px;
}
}
</style>
</head>
<body>
<div id="estimator-container">
<div class="form-group">
<label for="cep">Digite seu CEP:</label>
<input
type="text"
id="cep"
class="cep-input"
placeholder="00000-000"
maxlength="9"
autocomplete="postal-code">
</div>
<button onclick="calcularEstimativa()" class="calcular-button">
Calcular Entrega
</button>
<div id="error-message" class="error-message"></div>
<div id="result" class="estimativa-result"></div>
</div>
<script>
// Configurações de frete grátis
const freteGratis = {
habilitado: true, // Ativar/desativar frete grátis
prazoMin: 4, // Prazo mínimo para frete grátis
prazoMax: 12, // Prazo máximo para frete grátis
};
// Faixas de CEP por estado (simplificadas)
const faixasCep = [
// Região Sudeste
{ faixa: "01000-000 a 19999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "São Paulo" },
{ faixa: "20000-000 a 28999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Rio de Janeiro" },
{ faixa: "30000-000 a 39999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Minas Gerais" },
{ faixa: "29000-000 a 29999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Espírito Santo" },
// Região Nordeste
{ faixa: "40000-000 a 48999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Bahia" },
{ faixa: "50000-000 a 56999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Pernambuco" },
{ faixa: "57000-000 a 57999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Alagoas" },
{ faixa: "58000-000 a 58999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Paraíba" },
{ faixa: "59000-000 a 59999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Rio Grande do Norte" },
{ faixa: "60000-000 a 63999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Ceará" },
{ faixa: "64000-000 a 64999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Piauí" },
{ faixa: "65000-000 a 65999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Maranhão" },
{ faixa: "49000-000 a 49999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Sergipe" },
// Região Sul
{ faixa: "80000-000 a 87999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Paraná" },
{ faixa: "88000-000 a 89999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Santa Catarina" },
{ faixa: "90000-000 a 99999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Rio Grande do Sul" },
// Região Centro-Oeste
{ faixa: "70000-000 a 73699-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Distrito Federal" },
{ faixa: "73700-000 a 76799-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Goiás" },
{ faixa: "76800-000 a 77999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Rondônia" },
{ faixa: "78000-000 a 79999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Mato Grosso" },
{ faixa: "79000-000 a 79999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Mato Grosso do Sul" },
// Região Norte
{ faixa: "66000-000 a 66999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Pará" },
{ faixa: "67000-000 a 67999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Amapá" },
{ faixa: "68000-000 a 68999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Amazonas" },
{ faixa: "69000-000 a 69299-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Roraima" },
{ faixa: "69300-000 a 69399-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Acre" },
{ faixa: "69400-000 a 69999-999", prazoMin: 2, prazoMax: 10, valorFrete: "R$ 5,00", regiao: "Tocantins" },
];
// Formata o CEP enquanto o usuário digita
document.getElementById('cep').addEventListener('input', function(e) {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 5) {
value = value.substring(0, 5) + '-' + value.substring(5);
}
e.target.value = value;
});
// Permite calcular ao pressionar Enter
document.getElementById('cep').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
calcularEstimativa();
}
});
function calcularEstimativa() {
const cepInput = document.getElementById('cep');
const resultElement = document.getElementById('result');
const errorElement = document.getElementById('error-message');
const cep = cepInput.value.replace(/\D/g, '');
// Reset visual states
resultElement.classList.remove('show');
errorElement.style.display = 'none';
if (cep.length !== 8) {
errorElement.textContent = "Por favor, insira um CEP válido com 8 dígitos.";
errorElement.style.display = 'block';
return;
}
let estimativa = faixasCep.find(faixa => {
let [inicio, fim] = faixa.faixa.split(" a ").map(str => parseInt(str.replace(/\D/g, '')));
let cepNumero = parseInt(cep);
return cepNumero >= inicio && cepNumero <= fim;
});
if (!estimativa) {
errorElement.textContent = "Desculpe, não realizamos entregas para este CEP.";
errorElement.style.display = 'block';
return;
}
const dataEntregaMinima = new Date();
const dataEntregaMaxima = new Date();
dataEntregaMinima.setDate(dataEntregaMinima.getDate() + estimativa.prazoMin);
dataEntregaMaxima.setDate(dataEntregaMaxima.getDate() + estimativa.prazoMax);
// Adiciona a opção de frete grátis
const freteGratisInfo = freteGratis.habilitado ? `
<div class="delivery-info">
<span class="icon">🎁</span>
<div>
<strong>Frete Grátis:</strong><br>
Entrega estimada entre ${freteGratis.prazoMin} a ${freteGratis.prazoMax} dias úteis.
</div>
</div>
` : '';
resultElement.innerHTML = `
<div class="delivery-info">
<span class="icon">📍</span>
<div>
<strong>Região de entrega:</strong><br>
${estimativa.regiao}
</div>
</div>
<div class="delivery-info">
<span class="icon">🚛</span>
<div>
<strong>Frete Rápido:</strong><br>
Entrega estimada entre ${formatDate(dataEntregaMinima)} até ${formatDate(dataEntregaMaxima)}<br>
Valor: ${estimativa.valorFrete}
</div>
</div>
${freteGratisInfo}
`;
resultElement.classList.add('show');
}
function formatDate(date) {
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
return date.toLocaleDateString('pt-BR', options);
}
</script>
</body>
</html>
