<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Transport Co. - Reliable Hauling</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 15px 20px;
text-align: center;
}
header h1 {
font-size: 1.5em;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}
.hero {
background-color: #f4f4f4;
padding: 40px 20px;
text-align: center;
}
.hero h2 {
font-size: 2em;
margin-bottom: 10px;
}
.hero p {
font-size: 1.1em;
color: #555;
}
.calculator {
max-width: 600px;
margin: 40px auto;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
font-size: 1.2em;
}
#fit-check {
font-style: italic;
color: #555;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Your Transport Co.</h1>
<nav>
<a href="#home">Home</a>
<a href="#calculator">Get a Quote</a>
<a href="mailto:your@email.com">Contact</a>
</nav>
</header>
<section class="hero">
<h2>Reliable Hauling with Our Transit 350</h2>
<p>Fast, safe delivery for loads up to 2,500 lbs and 404 cu.ft. Get your instant quote below!</p>
</section>
<section class="calculator" id="calculator">
<h3>Calculate Your Cost</h3>
<form id="calcForm" onsubmit="calculateCost(event)">
<div class="form-group">
<label for="miles">Distance (miles):</label>
<input type="number" id="miles" min="1" required>
</div>
<div class="form-group">
<label for="weight">Weight (lbs, max 2,500):</label>
<input type="number" id="weight" min="1" max="2500" required>
</div>
<div class="form-group">
<label for="size">Size (cu.ft., max 404): <span title="E.g., ~130 moving boxes, 16 queen mattresses, or 5 living room sets">(?)</span></label>
<input type="number" id="size" min="1" max="404" required>
</div>
<button type="submit">Get Quote</button>
</form>
<div id="result"></div>
<div id="fit-check"></div>
</section>
<footer>
<p>© 2025 Your Transport Co. | Email: your@email.com | Phone: (123) 456-7890</p>
</footer>
<script>
function calculateCost(event) {
event.preventDefault();
const miles = parseFloat(document.getElementById('miles').value);
const weight = Math.min(parseFloat(document.getElementById('weight').value), 2500);
const size = Math.min(parseFloat(document.getElementById('size').value), 404);
const fuel = (miles / 16) * 3.50;
const maintenance = miles * 0.15;
const driver = (miles / 50) * 20;
const weightSurcharge = Math.max(0, (weight - 500)) * 0.05;
const sizeSurcharge = Math.max(0, (size - 100)) / 10 * 1;
const fixedCosts = miles * 0.10;
const subtotal = fuel + maintenance + driver + weightSurcharge + sizeSurcharge + fixedCosts;
const total = subtotal * 1.25;
document.getElementById('result').innerHTML = `Your Cost: $${total.toFixed(2)}<br><small>Price based on distance, load weight, and size, covering fuel, vehicle care, and expert driving. We add a fair margin to keep your service reliable.</small>`;
const sizePercent = (size / 404) * 100;
const weightPercent = (weight / 2500) * 100;
let fitMessage = (size <= 404 && weight <= 2500)
? `Good news! This fits your van (${Math.round(sizePercent)}% of 404 cu.ft., ${Math.round(weightPercent)}% of 2,500 lbs).`
: `Sorry, this exceeds our 404 cu.ft. or 2,500 lb limit. Split the load or contact us!`;
document.getElementById('fit-check').textContent = fitMessage;
}
</script>
</body>
</html>