<!DOCTYPE html>
<html>
<head>
<title>Calculadora de Estimativa de Entrega</title>
<style>
#estimator-container {
margin-top: 10px;
padding: 15px;
border: 1px #dadada;
border-radius: 5px;
background-color: #dadada;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: row;
}
@media screen and (max-width: 600px) {
#estimator-container {
flex-direction: column;
}
}
.cep-input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
width: 45%;
}
@media screen and (max-width: 600px) {
.cep-input {
width: 100%;
}
}
.calcular-button {
background-color: #00A341;
color: #fff;
border: 1px solid #00A341;
padding: 8px 15px;
border-radius: 3px;
cursor: pointer;
width: 45%;
text-align: center;
display: inline-block;
transition: background-color 0.3s, transform 0.2s;
}
@media screen and (max-width: 600px) {
.calcular-button {
width: 100%;
}
}
.calcular-button:hover {
background-color: #007f2d;
transform: scale(1.05);
}
.estimativa-result {
margin-top: 10px;
font-weight: bold;
}
/* Estilo para o container do resultado */
#result-container {
margin-top: 10px;
padding: 15px;
border: 1px #dadada;
border-radius: 5px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div id="estimator-container">
<label for="cep">CEP:</label>
<input type="text" id="cep" placeholder="12345-678" class="cep-input">
<button onclick="calcularEstimativa()" class="calcular-button">Calcular Entrega</button>
</div>
<div id="result-container">
<p id="result" class="estimativa-result"></p>
</div>
<script>
function calcularEstimativa() {
var cep = document.getElementById('cep').value;
// Lógica de estimativa de entrega aqui (usando prazo fixo de 7 a 14 dias úteis).
var prazoMinimo = 7;
var prazoMaximo = 12;
var dataEntregaMinima = new Date();
var dataEntregaMaxima = new Date();
dataEntregaMinima.setDate(dataEntregaMinima.getDate() + prazoMinimo);
dataEntregaMaxima.setDate(dataEntregaMaxima.getDate() + prazoMaximo);
var resultado = "Entrega estimada entre " + formatDate(dataEntregaMinima) + " e " + formatDate(dataEntregaMaxima) + ".";
document.getElementById('result').innerText = resultado;
}
function formatDate(date) {
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
return date.toLocaleDateString('pt-BR', options);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Calculadora de Estimativa de Entrega</title>
<style>
#estimator-container {
margin-top: 10px;
padding: 15px;
border: 1px #dadada;
border-radius: 5px;
background-color: #dadada;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: row;
}
@media screen and (max-width: 600px) {
#estimator-container {
flex-direction: column;
}
}
.cep-input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
width: 45%;
}
@media screen and (max-width: 600px) {
.cep-input {
width: 100%;
}
}
.calcular-button {
background-color: #00A341;
color: #fff;
border: 1px solid #00A341;
padding: 8px 15px;
border-radius: 3px;
cursor: pointer;
width: 45%;
text-align: center;
display: inline-block;
transition: background-color 0.3s, transform 0.2s;
}
@media screen and (max-width: 600px) {
.calcular-button {
width: 100%;
}
}
.calcular-button:hover {
background-color: #007f2d;
transform: scale(1.05);
}
.estimativa-result {
margin-top: 10px;
font-weight: bold;
}
/* Estilo para o container do resultado */
#result-container {
margin-top: 10px;
padding: 15px;
border: 1px #dadada;
border-radius: 5px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div id="estimator-container">
<label for="cep">CEP:</label>
<input type="text" id="cep" placeholder="12345-678" class="cep-input">
<button onclick="calcularEstimativa()" class="calcular-button">Calcular Entrega</button>
</div>
<div id="result-container">
<p id="result" class="estimativa-result"></p>
</div>
<script>
function calcularEstimativa() {
var cep = document.getElementById('cep').value;
// Lógica de estimativa de entrega aqui (usando prazo fixo de 7 a 14 dias úteis).
var prazoMinimo = 7;
var prazoMaximo = 12;
var dataEntregaMinima = new Date();
var dataEntregaMaxima = new Date();
dataEntregaMinima.setDate(dataEntregaMinima.getDate() + prazoMinimo);
dataEntregaMaxima.setDate(dataEntregaMaxima.getDate() + prazoMaximo);
var resultado = "Entrega estimada entre " + formatDate(dataEntregaMinima) + " e " + formatDate(dataEntregaMaxima) + ".";
document.getElementById('result').innerText = resultado;
}
function formatDate(date) {
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
return date.toLocaleDateString('pt-BR', options);
}
</script>
</body>
</html>
Recomendados para Você
Nós Aceitamos
