<!DOCTYPE html>
<html>
<head>
<title>Delivery Estimate Calculator</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%;
}
}
.calculate-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) {
.calculate-button {
width: 100%;
}
}
.calculate-button:hover {
background-color: #007f2d;
transform: scale(1.05);
}
.estimate-result {
margin-top: 10px;
font-weight: bold;
}
/* Style for the result container */
#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="calcularEstimate()" class="calcular-button">Calculate Delivery</button>
</div>
<div id="result-container">
<p id="result" class="estimate-result"></p>
</div>
<script>
function calculateEstimate() {
var cep = document.getElementById('cep').value;
// Estimated delivery logic here (using fixed time frame of 7-14 business days).
var MinimumTerm = 7;
var maximumTerm = 12;
var Minimum Delivery Date = new Date();
var dateEntregaMaxima = new Date();
dataEntregaMinima.setDate(dataEntregaMinima.getDate() + deadlineMinimo);
dateEntregaMaxima.setDate(dataEntregaMaxima.getDate() + deadlineMaximo);
var result = "Estimated delivery between " + formatDate(dataEntregaMinima) + " and " + formatDate(dataEntregaMaxima) + ".";
document.getElementById('result').innerText = result;
}
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>Delivery Estimate Calculator</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%;
}
}
.calculate-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) {
.calculate-button {
width: 100%;
}
}
.calculate-button:hover {
background-color: #007f2d;
transform: scale(1.05);
}
.estimate-result {
margin-top: 10px;
font-weight: bold;
}
/* Style for the result container */
#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="calcularEstimate()" class="calcular-button">Calculate Delivery</button>
</div>
<div id="result-container">
<p id="result" class="estimate-result"></p>
</div>
<script>
function calculateEstimate() {
var cep = document.getElementById('cep').value;
// Estimated delivery logic here (using fixed time frame of 7-14 business days).
var MinimumTerm = 7;
var maximumTerm = 12;
var Minimum Delivery Date = new Date();
var dateEntregaMaxima = new Date();
dataEntregaMinima.setDate(dataEntregaMinima.getDate() + deadlineMinimo);
dateEntregaMaxima.setDate(dataEntregaMaxima.getDate() + deadlineMaximo);
var result = "Estimated delivery between " + formatDate(dataEntregaMinima) + " and " + formatDate(dataEntregaMaxima) + ".";
document.getElementById('result').innerText = result;
}
function formatDate(date) {
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
return date.toLocaleDateString('pt-BR', options);
}
</script>
</body>
</html>
Recommended for You
We Accept
