<!doctype html>

<head>

<title>30 second car valuation</title>

<style>

:root { --green:#16a34a; --bg:#f6f7f9; --text:#0f172a; --muted:#64748b; --card:#ffffff; --border:#e2e8f0; }

* { box-sizing:border-box; }

body {

margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

background: var(--bg); color: var(--text);

}

header {

background:#fff; border-bottom:1px solid var(--border);

}

.nav {

max-width: 980px; margin:0 auto; padding:14px 18px;

display:flex; align-items:center; justify-content:space-between;

}

.brand { font-weight:800; letter-spacing:-0.02em; }

.pill {

font-size:12px; color:var(--muted); border:1px solid var(--border); padding:6px 10px; border-radius:999px;

background:#fff;

}

main { max-width: 980px; margin:0 auto; padding:34px 18px 50px; }

.wrap {

display:grid; grid-template-columns: 1.2fr 0.8fr; gap:22px; align-items:start;

}

@media (max-width: 820px) { .wrap { grid-template-columns: 1fr; } }

.card {

background:var(--card); border:1px solid var(--border); border-radius:18px;

padding:26px; box-shadow: 0 10px 25px rgba(2,6,23,0.05);

}

h1 { margin:0 0 10px; font-size: clamp(28px, 3.2vw, 44px); letter-spacing:-0.03em; }

h1 span { color: var(--green); }

p.lead { margin:0 0 18px; color: var(--muted); font-size:16px; line-height:1.5; }

.field { margin: 14px 0; }

label { display:block; font-size:13px; color:var(--muted); margin-bottom:7px; }

.input {

width:100%; padding:16px 14px; border-radius:14px; border:1px solid var(--border);

font-size:18px; outline:none; background:#fff;

}

.input:focus { border-color: rgba(22,163,74,.5); box-shadow: 0 0 0 4px rgba(22,163,74,.12); }

.regRow { display:flex; gap:10px; }

.flag {

display:flex; align-items:center; justify-content:center;

width:54px; min-width:54px; border-radius:14px; border:1px solid var(--border);

background: linear-gradient(180deg,#0b4aa6,#0b4aa6);

color:#fff; font-weight:800; letter-spacing:0.02em;

}

.btn {

width:100%; margin-top:14px; padding:15px 14px;

border:none; border-radius:14px; background: var(--green); color:#fff;

font-weight:800; font-size:16px; cursor:pointer;

}

.btn:disabled { opacity:.65; cursor:not-allowed; }

.fineprint { margin-top:10px; font-size:12px; color:var(--muted); line-height:1.4; }

.trust {

display:flex; gap:10px; align-items:center; margin-top:18px; padding-top:18px; border-top:1px dashed var(--border);

color:var(--muted); font-size:13px;

}

.stars { letter-spacing:1px; color:#16a34a; font-weight:900; }

.side h3 { margin:0 0 10px; font-size:16px; }

.side ul { margin:0; padding-left:18px; color:var(--muted); }

.side li { margin:8px 0; }

.status {

margin-top:14px; padding:12px 14px; border-radius:14px; border:1px solid var(--border);

background:#fff; color:var(--muted); font-size:13px; display:none;

}

.status.show { display:block; }

.ok { color: #166534; }

.err { color: #991b1b; }

</style>

</head>

<body>

<div class="brand">Your Dealership</div>

<div class="pill">Instant valuation • UK-wide</div>

</div>

</header>

<main>

<h1><span>30 second</span> car valuation</h1>

<p class="lead">Enter your reg and mileage to get an instant estimated offer, subject to inspection.</p>

<label for="reg">Registration number</label>

</div>

<label for="mileage">Mileage</label>

</div>

<button class="btn" id="submitBtn" type="submit">Get my car valuation</button>

<div class="fineprint">We’ll check DVLA vehicle details and compare against current market listings. No obligation.</div>

</form>

<div><strong>Excellent</strong> • Quick valuations • Friendly buyers</div>

</div>

<h3>How it works</h3>

<ul>

<li>We decode your car details using DVLA.</li>

<li>We compare against similar live UK listings.</li>

<li>We send an offer range subject to inspection.</li>

</ul>

<div class="pill">No hidden fees</div>

<div class="pill">Fast response</div>

<div class="pill">Local buyer</div>

</div>

</main>

const https://hook.eu2.make.com/14frgilbadfwxawzjwwq0vwxvstmshf4";

const form = document.getElementById("valuationForm");

const regInput = document.getElementById("reg");

const mileageInput = document.getElementById("mileage");

const btn = document.getElementById("submitBtn");

const statusBox = document.getElementById("statusBox");

function showStatus(msg, type) {

statusBox.textContent = msg;

statusBox.classList.add("show");

statusBox.classList.remove("ok", "err");

if (type) statusBox.classList.add(type);

}

// Auto-format reg: uppercase + remove extra spaces

regInput.addEventListener("input", () => {

regInput.value = regInput.value.toUpperCase().replace(/\s+/g, " ").trim();

});

// Allow commas in mileage but send clean number

function cleanMileage(v) {

return v.replace(/[^0-9]/g, "");

}

form.addEventListener("submit", async (e) => {

e.preventDefault();

const reg = regInput.value.replace(/\s/g, "").toUpperCase();

const mileageRaw = mileageInput.value;

const mileage = cleanMileage(mileageRaw);

if (!reg || reg.length < 4) {

showStatus("Please enter a valid UK registration.", "err");

return;

}

if (!mileage || Number(mileage) < 0) {

showStatus("Please enter a valid mileage.", "err");

return;

}

btn.disabled = true;

btn.textContent = "Checking vehicle details…";

showStatus("Submitting…", null);

try {

const res = await fetch(WEBHOOK_URL, {

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({

reg,

mileage: Number(mileage),

source: "valuation_page",

submitted_at: new Date().toISOString()

})

});

if (!res.ok) throw new Error("Webhook error: " + res.status);

btn.textContent = "Submitted!";

showStatus("Thanks — we’re analysing the market and will email your valuation shortly.", "ok");

form.reset();

} catch (err) {

console.error(err);

btn.disabled = false;

btn.textContent = "Get my car valuation";

showStatus("Something went wrong. Please try again in a moment.", "err");

}

});

</script>

</body>

</html>