Pages Medium
Delivery — Parcel / Courier Landing
A full parcel and courier landing page built around a trustworthy blue-and-slate palette. It leads with a hero track-your-package input that returns live status, ETA and courier detail, paired with a map-forward shipment card where an animated driver marker follows an SVG route and a countdown ticks down. Below sit same-day, next-day and international service cards, an instant pricing calculator with service, size and distance controls, an interactive coverage map with hub tooltips, a dark business-solutions band, CTA and footer. Vanilla JS, no dependencies.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Parcel / courier palette — blue + white + slate */
--brand: #1d4ed8;
--brand-d: #1739a8;
--brand-l: #3b6cf0;
--ink: #0f172a;
--ink-2: #334155;
--muted: #64748b;
--bg: #f1f5f9;
--surface: #ffffff;
--surface-2: #f8fafc;
--line: rgba(15, 23, 42, 0.1);
--line-2: rgba(15, 23, 42, 0.06);
--ok: #15803d;
--ok-bg: #dcfce7;
--warn: #b45309;
--warn-bg: #fef3c7;
--danger: #b91c1c;
--track: #1d4ed8;
--track-bg: #dbeafe;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
--sh-md: 0 6px 18px rgba(15, 23, 42, 0.08);
--sh-lg: 0 22px 48px -18px rgba(15, 23, 42, 0.28);
--maxw: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.visually-hidden, .skip-link {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto;
background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); z-index: 200;
}
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 600; font-size: 0.95rem; padding: 11px 18px; border-radius: var(--r-sm);
border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .18s ease, box-shadow .18s ease, border-color .18s;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--brand); color: #fff; box-shadow: var(--sh-sm); }
.btn-solid:hover { background: var(--brand-d); box-shadow: var(--sh-md); }
.btn-ghost { background: transparent; color: var(--brand); border-color: var(--line); }
.btn-ghost:hover { background: var(--track-bg); border-color: var(--brand); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 26px; font-size: 1.02rem; }
/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700;
letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; }
.pill-track { background: var(--track-bg); color: var(--brand-d); }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
/* NAV */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.86);
backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line-2); }
.nav-inner { display: flex; align-items: center; gap: 18px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.18rem; color: var(--ink); }
.brand-thin { font-weight: 500; color: var(--muted); }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
background: var(--brand); color: #fff; box-shadow: var(--sh-sm); }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; transition: background .15s, color .15s; }
.nav-links a:hover { background: var(--surface-2); color: var(--brand); }
.nav-cta { display: flex; gap: 10px; margin-left: auto; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px 22px 20px; border-bottom: 1px solid var(--line-2); background: var(--surface); }
.mobile-nav a { padding: 12px 10px; border-radius: var(--r-sm); font-weight: 600; color: var(--ink-2); }
.mobile-nav a:hover { background: var(--surface-2); }
.mobile-nav .btn { margin-top: 6px; }
/* HERO */
.hero { padding: 56px 0 64px; background:
radial-gradient(900px 460px at 78% -10%, rgba(29,78,216,0.1), transparent 60%),
linear-gradient(180deg, #ffffff 0%, var(--bg) 100%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-block; font-size: 0.82rem; font-weight: 600; color: var(--brand-d);
background: var(--track-bg); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.hero-copy h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; }
.hero-copy h1 .accent { color: var(--brand); }
.lede { color: var(--ink-2); font-size: 1.1rem; margin-top: 16px; max-width: 30em; }
.track-box { margin-top: 26px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-md); }
.track-heading { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; }
.track-row { display: flex; gap: 10px; }
.track-row input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 13px 15px;
border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.track-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--track-bg); background: #fff; }
.track-hint { font-size: 0.84rem; color: var(--muted); margin-top: 10px; }
.link-btn { background: none; border: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.result { margin-top: 14px; background: var(--surface); border: 1px solid var(--line);
border-left: 4px solid var(--brand); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sh-sm); animation: pop .25s ease; }
.result .res-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.result .res-id { font-weight: 700; font-variant-numeric: tabular-nums; }
.result .res-line { color: var(--ink-2); font-size: 0.95rem; }
.result .res-eta { font-weight: 700; color: var(--brand-d); }
.result.is-fail { border-left-color: var(--danger); }
.trust-row { list-style: none; display: flex; gap: 28px; padding: 0; margin: 26px 0 0; flex-wrap: wrap; }
.trust-row li { display: flex; flex-direction: column; }
.trust-row strong { font-size: 1.5rem; font-weight: 800; }
.trust-row span { color: var(--muted); font-size: 0.86rem; }
/* HERO CARD */
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
padding: 18px; box-shadow: var(--sh-lg); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-id { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-2); font-size: 0.9rem; }
.map { position: relative; aspect-ratio: 320 / 180; border-radius: var(--r-md); overflow: hidden;
background:
linear-gradient(rgba(29,78,216,0.05), rgba(29,78,216,0.05)),
repeating-linear-gradient(0deg, transparent 0 23px, var(--line-2) 23px 24px),
repeating-linear-gradient(90deg, transparent 0 23px, var(--line-2) 23px 24px),
var(--surface-2);
border: 1px solid var(--line-2); }
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-line { fill: none; stroke: var(--track); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 8; opacity: 0.85; }
.route-pin { fill: var(--brand); stroke: #fff; stroke-width: 2.5; }
.driver { fill: var(--ok); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25)); }
.map-tags { position: absolute; inset: 0; pointer-events: none; }
.map-tag { position: absolute; font-size: 0.7rem; font-weight: 600; background: var(--surface);
border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; box-shadow: var(--sh-sm); }
.map-tag.origin { left: 8px; bottom: 8px; }
.map-tag.dest { right: 8px; top: 8px; color: var(--brand-d); }
.steps { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 11px; }
.steps li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted); }
.steps .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); border: 2px solid var(--line); flex: none; }
.steps li.done { color: var(--ink-2); }
.steps li.done .dot { background: var(--ok); border-color: var(--ok); }
.steps li.active { color: var(--ink); font-weight: 600; }
.steps li.active .dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--track-bg); animation: pulse 1.6s ease-in-out infinite; }
.eta-bar { display: flex; align-items: baseline; justify-content: space-between;
background: var(--brand); color: #fff; border-radius: var(--r-md); padding: 14px 18px; }
.eta-label { font-size: 0.85rem; opacity: 0.9; }
.eta-time { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
/* SECTIONS */
.section { padding: 76px 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.section-head { max-width: 38em; margin: 0 auto 42px; text-align: center; }
.kicker { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.kicker-light { color: #93b4ff; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; }
.section-head p { color: var(--muted); margin-top: 12px; font-size: 1.05rem; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 24px; box-shadow: var(--sh-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: rgba(29,78,216,0.3); }
.svc-feature { border-color: rgba(29,78,216,0.4); box-shadow: var(--sh-md); }
.svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.svc-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
background: var(--track-bg); font-size: 1.3rem; }
.svc-card h3 { font-size: 1.3rem; font-weight: 700; }
.svc-card > p { color: var(--ink-2); margin-top: 8px; font-size: 0.96rem; }
.svc-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 9px; }
.svc-list li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 0.92rem; }
.svc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 800; }
.svc-link { font-weight: 600; color: var(--brand); }
.svc-link:hover { color: var(--brand-d); }
/* QUOTE */
.quote-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.quote-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; }
.quote-copy > p { color: var(--ink-2); margin-top: 12px; font-size: 1.05rem; }
.quote-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.quote-points li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.quote-points span { color: var(--ok); font-weight: 800; }
.quote-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
padding: 26px; box-shadow: var(--sh-lg); }
.quote-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.field select { width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--line);
border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--track-bg); }
.seg { display: flex; gap: 8px; }
.seg-btn { flex: 1; font: inherit; font-weight: 600; padding: 11px 8px; border: 1.5px solid var(--line);
border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); cursor: pointer; transition: all .15s; }
.seg-btn:hover { border-color: var(--brand-l); }
.seg-btn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
input[type="range"] { width: 100%; accent-color: var(--brand); height: 6px; cursor: pointer; }
.quote-out { display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-md); padding: 16px 18px; margin: 6px 0 18px; }
.quote-out-label { display: block; font-size: 0.82rem; color: var(--muted); }
.quote-out-price { font-size: 1.85rem; font-weight: 800; color: var(--brand-d); font-variant-numeric: tabular-nums; }
.quote-out-eta { text-align: right; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); max-width: 9em; }
/* COVERAGE */
.coverage-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 32px; align-items: center; }
.cov-map { position: relative; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 14px; box-shadow: var(--sh-md); }
.cov-svg { width: 100%; height: auto; border-radius: var(--r-md); }
.cov-routes path { stroke-dasharray: 4 5; animation: dash 30s linear infinite; }
.hub circle { fill: var(--brand); stroke: #fff; stroke-width: 3; cursor: pointer; transition: r .15s, fill .15s; }
.hub:hover circle, .hub:focus circle { fill: var(--brand-d); }
.hub:focus { outline: none; }
.hub:focus circle { stroke: var(--brand-l); stroke-width: 4; }
.cov-tip { position: absolute; transform: translate(-50%, -130%); background: var(--ink); color: #fff;
font-size: 0.8rem; font-weight: 600; padding: 7px 11px; border-radius: var(--r-sm); pointer-events: none;
white-space: nowrap; box-shadow: var(--sh-md); z-index: 5; }
.cov-tip small { display: block; font-weight: 400; opacity: 0.8; }
.cov-stats { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.cov-stats li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 16px 18px; box-shadow: var(--sh-sm); color: var(--ink-2); font-size: 0.95rem; }
.cov-stats strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* BUSINESS */
.section-dark { background: linear-gradient(160deg, #0f1f4d 0%, #122a6e 100%); color: #fff; }
.biz-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; }
.biz-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; }
.biz-copy > p { color: #c7d4f5; margin: 14px 0 22px; font-size: 1.05rem; }
.biz-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.biz-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--r-md); padding: 20px; transition: background .18s, transform .18s; }
.biz-card:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.biz-num { font-size: 0.78rem; font-weight: 800; color: #93b4ff; letter-spacing: 0.1em; }
.biz-card h3 { font-size: 1.1rem; font-weight: 700; margin: 6px 0; }
.biz-card p { color: #c7d4f5; font-size: 0.9rem; }
/* CTA */
.cta { padding: 80px 0; background:
radial-gradient(700px 360px at 50% -20%, rgba(29,78,216,0.14), transparent 60%); text-align: center; }
.cta-inner h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; max-width: 16em; margin: 0 auto; }
.cta-inner p { color: var(--ink-2); margin: 14px auto 26px; font-size: 1.08rem; max-width: 36em; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* FOOTER */
.footer { background: var(--ink); color: #cbd5e1; padding: 56px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand .brand { color: #fff; }
.footer-brand .brand-thin { color: #94a3b8; }
.footer-brand p { margin-top: 12px; color: #94a3b8; font-size: 0.92rem; max-width: 24em; }
.footer-col h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 14px; }
.footer-col a { display: block; padding: 5px 0; color: #cbd5e1; font-size: 0.92rem; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px;
margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1);
font-size: 0.85rem; color: #94a3b8; }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a:hover { color: #fff; }
/* TOAST */
.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
display: flex; flex-direction: column; gap: 10px; z-index: 300; width: max-content; max-width: 90vw; }
.toast { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-md);
box-shadow: var(--sh-lg); font-size: 0.92rem; font-weight: 500; display: flex; align-items: center; gap: 10px;
animation: toastIn .26s ease; }
.toast::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.toast.is-out { animation: toastOut .3s ease forwards; }
/* REVEAL */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
/* ANIMATIONS */
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 var(--track-bg); } 50% { box-shadow: 0 0 0 6px rgba(29,78,216,0.08); } }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dash { to { stroke-dashoffset: -200; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(12px); } }
/* RESPONSIVE */
@media (max-width: 940px) {
.hero-grid, .quote-grid, .coverage-grid, .biz-grid { grid-template-columns: 1fr; }
.hero-card { max-width: 460px; }
.cards-3 { grid-template-columns: 1fr; }
.nav-links, .nav-cta { display: none; }
.nav-toggle { display: flex; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.section { padding: 56px 0; }
.hero { padding: 36px 0 48px; }
.track-row { flex-direction: column; }
.track-row .btn { width: 100%; }
.trust-row { gap: 20px; }
.biz-cards { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
.quote-out { flex-direction: column; align-items: flex-start; gap: 6px; }
.quote-out-eta { text-align: left; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastWrap = document.getElementById("toastWrap");
function toast(msg) {
if (!toastWrap) return;
var el = document.createElement("div");
el.className = "toast";
el.textContent = msg;
toastWrap.appendChild(el);
setTimeout(function () {
el.classList.add("is-out");
setTimeout(function () { el.remove(); }, 320);
}, 3000);
}
/* ---------- Mobile nav ---------- */
var navToggle = document.getElementById("navToggle");
var mobileNav = document.getElementById("mobileNav");
if (navToggle && mobileNav) {
navToggle.addEventListener("click", function () {
var open = navToggle.getAttribute("aria-expanded") === "true";
navToggle.setAttribute("aria-expanded", String(!open));
mobileNav.hidden = open;
});
mobileNav.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
navToggle.setAttribute("aria-expanded", "false");
mobileNav.hidden = true;
});
});
}
/* ---------- Scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
});
}, { threshold: 0.14 });
reveals.forEach(function (r) { io.observe(r); });
} else {
reveals.forEach(function (r) { r.classList.add("in"); });
}
/* ---------- Tracking widget ---------- */
var trackForm = document.getElementById("trackForm");
var trackInput = document.getElementById("trackInput");
var trackResult = document.getElementById("trackResult");
var SAMPLES = {
"VP-7K42-9180": {
ok: true, status: "Out for delivery",
line: "Courier Mara D. is 3 stops away · Larkfield Ave",
eta: "Arrives by 4:45 PM"
},
"VP-3A09-2255": {
ok: true, status: "At sorting hub",
line: "Departed Centro hub · next-day AM service",
eta: "Arrives tomorrow before 10 AM"
}
};
function lookup(code) {
code = (code || "").trim().toUpperCase();
if (!code) return null;
if (SAMPLES[code]) return Object.assign({ id: code }, SAMPLES[code]);
// Deterministic pseudo-result for any well-formed code
if (/^VP[-\s]?[A-Z0-9]{2,}/.test(code)) {
var states = [
{ status: "Picked up", line: "Collected from sender · awaiting sort", eta: "Arrives in 1–2 days" },
{ status: "In transit", line: "Moving between Eastgate and Centro hubs", eta: "Arrives tomorrow" },
{ status: "Out for delivery", line: "On the van · estimated 9 stops away", eta: "Arrives by 6:00 PM" }
];
var h = 0; for (var i = 0; i < code.length; i++) h = (h * 31 + code.charCodeAt(i)) >>> 0;
var s = states[h % states.length];
return { id: code, ok: true, status: s.status, line: s.line, eta: s.eta };
}
return { id: code, ok: false };
}
function renderResult(r) {
if (!trackResult) return;
if (!r) { trackResult.hidden = true; return; }
trackResult.hidden = false;
if (!r.ok) {
trackResult.classList.add("is-fail");
trackResult.innerHTML =
'<div class="res-top"><span class="res-id">' + esc(r.id) + '</span>' +
'<span class="pill pill-warn">Not found</span></div>' +
'<p class="res-line">We couldn\'t find that number. Codes look like <strong>VP-7K42-9180</strong>.</p>';
return;
}
trackResult.classList.remove("is-fail");
trackResult.innerHTML =
'<div class="res-top"><span class="res-id">' + esc(r.id) + '</span>' +
'<span class="pill pill-track">' + esc(r.status) + '</span></div>' +
'<p class="res-line">' + esc(r.line) + '</p>' +
'<p class="res-eta">' + esc(r.eta) + '</p>';
toast("Tracking " + r.id + " — " + r.status);
}
function esc(s) {
return String(s).replace(/[&<>"']/g, function (c) {
return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c];
});
}
if (trackForm) {
trackForm.addEventListener("submit", function (e) {
e.preventDefault();
renderResult(lookup(trackInput.value));
});
document.querySelectorAll("[data-sample]").forEach(function (b) {
b.addEventListener("click", function () {
trackInput.value = b.getAttribute("data-sample");
renderResult(lookup(trackInput.value));
trackInput.focus();
});
});
}
/* ---------- Hero ETA countdown ---------- */
var etaClock = document.getElementById("etaClock");
if (etaClock) {
var secs = 14 * 60 + 52;
setInterval(function () {
if (secs <= 0) { secs = 14 * 60 + 52; return; }
secs--;
var m = Math.floor(secs / 60), s = secs % 60;
etaClock.textContent = (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
}, 1000);
}
/* ---------- Animated driver along route ---------- */
var route = document.getElementById("route");
var driver = document.getElementById("driver");
var reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (route && driver && route.getTotalLength && !reduce) {
var len = route.getTotalLength();
var t = 0;
setInterval(function () {
t = (t + 0.004) % 1;
var p = route.getPointAtLength(len * t);
driver.setAttribute("cx", p.x);
driver.setAttribute("cy", p.y);
}, 40);
}
/* ---------- Pricing calculator ---------- */
var qForm = document.getElementById("quoteForm");
var qService = document.getElementById("qService");
var qDist = document.getElementById("qDist");
var qDistVal = document.getElementById("qDistVal");
var quotePrice = document.getElementById("quotePrice");
var quoteEta = document.getElementById("quoteEta");
var segBtns = qForm ? qForm.querySelectorAll(".seg-btn") : [];
var sizeMult = 1.6;
var ETA_TEXT = {
same: "Same-day · before 9pm",
next: "Next-day · before 5pm",
intl: "International · 3–6 days"
};
function recalc() {
if (!qService || !quotePrice) return;
var opt = qService.options[qService.selectedIndex];
var base = parseFloat(opt.getAttribute("data-base"));
var per = parseFloat(opt.getAttribute("data-per"));
var dist = parseInt(qDist.value, 10);
var price = (base + per * dist) * sizeMult;
quotePrice.textContent = "$" + price.toFixed(2);
quoteEta.textContent = ETA_TEXT[qService.value];
qDistVal.textContent = dist + " km";
}
if (qForm) {
segBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
segBtns.forEach(function (b) { b.classList.remove("is-on"); b.setAttribute("aria-checked", "false"); });
btn.classList.add("is-on");
btn.setAttribute("aria-checked", "true");
sizeMult = parseFloat(btn.getAttribute("data-mult"));
recalc();
});
});
qService.addEventListener("change", recalc);
qDist.addEventListener("input", recalc);
qForm.addEventListener("submit", function (e) {
e.preventDefault();
toast("Booking requested — " + quotePrice.textContent + " (" + quoteEta.textContent + ")");
});
recalc();
}
/* ---------- Coverage hub tooltips ---------- */
var covMap = document.querySelector(".cov-map");
var covTip = document.getElementById("covTip");
if (covMap && covTip) {
var hubs = covMap.querySelectorAll(".hub");
function showTip(hub) {
var c = hub.querySelector("circle");
var rect = covMap.getBoundingClientRect();
var crect = c.getBoundingClientRect();
covTip.hidden = false;
covTip.style.left = (crect.left - rect.left + crect.width / 2) + "px";
covTip.style.top = (crect.top - rect.top + crect.height / 2) + "px";
covTip.innerHTML = esc(hub.getAttribute("data-name")) +
"<small>" + esc(hub.getAttribute("data-stat")) + "</small>";
}
function hideTip() { covTip.hidden = true; }
hubs.forEach(function (hub) {
hub.addEventListener("mouseenter", function () { showTip(hub); });
hub.addEventListener("mouseleave", hideTip);
hub.addEventListener("focus", function () { showTip(hub); });
hub.addEventListener("blur", hideTip);
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Veloce Parcel — Courier & Same-Day Delivery</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="nav" id="top">
<div class="wrap nav-inner">
<a class="brand" href="#top" aria-label="Veloce Parcel home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg>
</span>
Veloce<span class="brand-thin">Parcel</span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#services">Services</a>
<a href="#quote">Pricing</a>
<a href="#coverage">Coverage</a>
<a href="#business">Business</a>
</nav>
<div class="nav-cta">
<a class="btn btn-ghost" href="#track">Track</a>
<a class="btn btn-solid" href="#quote">Get a quote</a>
</div>
<button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="mobileNav" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
<div class="mobile-nav" id="mobileNav" hidden>
<a href="#services">Services</a>
<a href="#quote">Pricing</a>
<a href="#coverage">Coverage</a>
<a href="#business">Business</a>
<a href="#track">Track a parcel</a>
<a class="btn btn-solid" href="#quote">Get a quote</a>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy reveal">
<span class="eyebrow">Couriers in 38 cities · 99.4% on-time</span>
<h1>Parcels, delivered with <span class="accent">precision</span>.</h1>
<p class="lede">Same-day across town, next-day across the country, and tracked door-to-door worldwide. Drop in a tracking number to see exactly where your package is.</p>
<form class="track-box" id="trackForm" novalidate aria-labelledby="trackHeading">
<h2 id="trackHeading" class="track-heading" id="track">Track your package</h2>
<div class="track-row">
<label class="visually-hidden" for="trackInput">Tracking number</label>
<input id="trackInput" name="track" type="text" inputmode="latin" autocomplete="off"
placeholder="e.g. VP-7K42-9180" aria-describedby="trackHint" />
<button class="btn btn-solid" type="submit">Track</button>
</div>
<p class="track-hint" id="trackHint">Try a sample: <button type="button" class="link-btn" data-sample="VP-7K42-9180">VP-7K42-9180</button></p>
</form>
<div class="result" id="trackResult" hidden aria-live="polite"></div>
<ul class="trust-row" aria-label="Highlights">
<li><strong>4.9</strong><span>★ rating</span></li>
<li><strong>2.1M</strong><span>parcels / mo</span></li>
<li><strong>38</strong><span>cities live</span></li>
</ul>
</div>
<aside class="hero-card reveal" aria-label="Live shipment preview">
<div class="card-head">
<span class="pill pill-track">In transit</span>
<span class="card-id">VP-7K42-9180</span>
</div>
<div class="map" role="img" aria-label="Map showing courier en route to destination">
<svg class="route-svg" viewBox="0 0 320 180" preserveAspectRatio="none" aria-hidden="true">
<path id="route" class="route-line" d="M30 150 C 90 120, 80 60, 150 70 S 250 110, 290 36" />
<circle class="route-pin" cx="290" cy="36" r="6" />
<circle class="driver" id="driver" r="7" cx="30" cy="150" />
</svg>
<div class="map-tags">
<span class="map-tag origin">Hub · Eastgate</span>
<span class="map-tag dest">12 Larkfield Ave</span>
</div>
</div>
<ol class="steps" aria-label="Delivery progress">
<li class="done"><span class="dot"></span>Picked up · 08:12</li>
<li class="done"><span class="dot"></span>At sorting hub · 09:40</li>
<li class="active"><span class="dot"></span>Out for delivery</li>
<li><span class="dot"></span>Delivered</li>
</ol>
<div class="eta-bar">
<span class="eta-label">Arriving in</span>
<span class="eta-time" id="etaClock">14:52</span>
</div>
</aside>
</div>
</section>
<!-- SERVICES -->
<section class="section" id="services">
<div class="wrap">
<header class="section-head reveal">
<span class="kicker">Services</span>
<h2>Pick the speed your shipment needs</h2>
<p>From a cross-town sprint to a customs-cleared international leg — one courier, every lane.</p>
</header>
<div class="cards-3">
<article class="svc-card reveal">
<div class="svc-top"><span class="svc-icon" aria-hidden="true">⚡</span><span class="pill pill-ok">Today</span></div>
<h3>Same-day</h3>
<p>Booked before noon, on the doorstep by evening. Live tracking and photo proof of delivery on every drop.</p>
<ul class="svc-list">
<li>2–4 hour express window</li>
<li>Real-time courier map</li>
<li>From $9.50 / parcel</li>
</ul>
<a class="svc-link" href="#quote">Quote same-day →</a>
</article>
<article class="svc-card svc-feature reveal">
<div class="svc-top"><span class="svc-icon" aria-hidden="true">📦</span><span class="pill pill-track">Most popular</span></div>
<h3>Next-day</h3>
<p>Nationwide overnight network with a guaranteed AM or PM slot and automatic refund if we miss it.</p>
<ul class="svc-list">
<li>Before 10am or before 5pm</li>
<li>Signature & safe-place options</li>
<li>From $5.20 / parcel</li>
</ul>
<a class="svc-link" href="#quote">Quote next-day →</a>
</article>
<article class="svc-card reveal">
<div class="svc-top"><span class="svc-icon" aria-hidden="true">🌍</span><span class="pill pill-warn">3–6 days</span></div>
<h3>International</h3>
<p>Door-to-door to 180 countries with pre-cleared customs paperwork and duties calculated up front.</p>
<ul class="svc-list">
<li>Customs handled for you</li>
<li>End-to-end tracking</li>
<li>From $18.00 / parcel</li>
</ul>
<a class="svc-link" href="#quote">Quote international →</a>
</article>
</div>
</div>
</section>
<!-- QUOTE / PRICING -->
<section class="section section-alt" id="quote">
<div class="wrap quote-grid">
<div class="quote-copy reveal">
<span class="kicker">Instant pricing</span>
<h2>Get a price in seconds</h2>
<p>Pick a service, tell us the parcel size and distance, and we'll estimate your fare before you book. No account needed.</p>
<ul class="quote-points">
<li><span aria-hidden="true">✓</span> No hidden fuel or handling fees</li>
<li><span aria-hidden="true">✓</span> Free pickup within the service area</li>
<li><span aria-hidden="true">✓</span> Volume discounts from 25 parcels / week</li>
</ul>
</div>
<form class="quote-card reveal" id="quoteForm" aria-labelledby="quoteHeading">
<h3 id="quoteHeading">Pricing calculator</h3>
<div class="field">
<label for="qService">Service</label>
<select id="qService" name="service">
<option value="same" data-base="9.5" data-per="0.85">Same-day</option>
<option value="next" data-base="5.2" data-per="0.42" selected>Next-day</option>
<option value="intl" data-base="18" data-per="1.6">International</option>
</select>
</div>
<div class="field">
<label for="qSize">Parcel size</label>
<div class="seg" role="radiogroup" aria-label="Parcel size">
<button type="button" class="seg-btn" data-mult="1" role="radio" aria-checked="false">Small</button>
<button type="button" class="seg-btn is-on" data-mult="1.6" role="radio" aria-checked="true">Medium</button>
<button type="button" class="seg-btn" data-mult="2.4" role="radio" aria-checked="false">Large</button>
</div>
</div>
<div class="field">
<label for="qDist">Distance: <strong id="qDistVal">12 km</strong></label>
<input id="qDist" name="distance" type="range" min="1" max="120" value="12" step="1" />
</div>
<div class="quote-out">
<div>
<span class="quote-out-label">Estimated fare</span>
<span class="quote-out-price" id="quotePrice">$13.79</span>
</div>
<span class="quote-out-eta" id="quoteEta">Next-day · before 5pm</span>
</div>
<button class="btn btn-solid btn-block" type="submit">Book this delivery</button>
</form>
</div>
</section>
<!-- COVERAGE -->
<section class="section" id="coverage">
<div class="wrap">
<header class="section-head reveal">
<span class="kicker">Coverage</span>
<h2>A network that reaches the last mile</h2>
<p>Hover a hub to see its catchment. 38 metros live today, four more launching this quarter.</p>
</header>
<div class="coverage-grid reveal">
<div class="cov-map" aria-label="Coverage map of delivery hubs">
<svg class="cov-svg" viewBox="0 0 600 320" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Stylized map with connected delivery hubs">
<defs>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M40 0H0V40" fill="none" stroke="rgba(29,78,216,0.08)" stroke-width="1"/>
</pattern>
</defs>
<rect width="600" height="320" fill="url(#grid)"/>
<g class="cov-routes" stroke="#1d4ed8" stroke-width="1.5" fill="none" stroke-dasharray="4 5" opacity="0.45">
<path d="M120 90 L300 150 L470 80"/>
<path d="M120 90 L210 240"/>
<path d="M300 150 L420 250"/>
<path d="M470 80 L520 200"/>
</g>
<g class="hubs">
<g class="hub" tabindex="0" data-name="Eastgate" data-stat="412 couriers"><circle cx="120" cy="90" r="9"/></g>
<g class="hub" tabindex="0" data-name="Centro" data-stat="688 couriers"><circle cx="300" cy="150" r="11"/></g>
<g class="hub" tabindex="0" data-name="Northport" data-stat="254 couriers"><circle cx="470" cy="80" r="8"/></g>
<g class="hub" tabindex="0" data-name="Riverside" data-stat="176 couriers"><circle cx="210" cy="240" r="7"/></g>
<g class="hub" tabindex="0" data-name="Harborline" data-stat="203 couriers"><circle cx="420" cy="250" r="7"/></g>
<g class="hub" tabindex="0" data-name="Summit" data-stat="141 couriers"><circle cx="520" cy="200" r="6"/></g>
</g>
</svg>
<div class="cov-tip" id="covTip" hidden></div>
</div>
<ul class="cov-stats">
<li><strong>38</strong> metros live now</li>
<li><strong>2,074</strong> active couriers</li>
<li><strong>180</strong> countries reachable</li>
<li><strong>14 min</strong> avg pickup time</li>
</ul>
</div>
</div>
</section>
<!-- BUSINESS -->
<section class="section section-dark" id="business">
<div class="wrap biz-grid">
<div class="biz-copy reveal">
<span class="kicker kicker-light">Business solutions</span>
<h2>Ship at scale with one API</h2>
<p>Plug Veloce into your checkout, generate labels in bulk, and give every customer branded tracking. Net-30 billing and a dedicated logistics manager included.</p>
<a class="btn btn-solid" href="#quote">Talk to sales</a>
</div>
<div class="biz-cards reveal">
<div class="biz-card"><span class="biz-num">01</span><h3>Shipping API</h3><p>Rates, labels & tracking in three endpoints.</p></div>
<div class="biz-card"><span class="biz-num">02</span><h3>Branded tracking</h3><p>Your logo on every status page and email.</p></div>
<div class="biz-card"><span class="biz-num">03</span><h3>Bulk pickups</h3><p>Scheduled daily collections from your dock.</p></div>
<div class="biz-card"><span class="biz-num">04</span><h3>Net-30 billing</h3><p>One invoice, every parcel, no surprises.</p></div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta">
<div class="wrap cta-inner reveal">
<h2>Your next parcel could be moving in minutes.</h2>
<p>Book a one-off delivery or open a business account — no setup fees, cancel anytime.</p>
<div class="cta-btns">
<a class="btn btn-solid btn-lg" href="#quote">Get a quote</a>
<a class="btn btn-ghost btn-lg" href="#track">Track a parcel</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer-grid">
<div class="footer-brand">
<a class="brand" href="#top">Veloce<span class="brand-thin">Parcel</span></a>
<p>Precision courier & parcel delivery across 38 cities and 180 countries.</p>
</div>
<div class="footer-col">
<h4>Services</h4>
<a href="#services">Same-day</a><a href="#services">Next-day</a><a href="#services">International</a><a href="#business">Freight</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="#coverage">Coverage</a><a href="#business">Business</a><a href="#top">Careers</a><a href="#top">Press</a>
</div>
<div class="footer-col">
<h4>Support</h4>
<a href="#track">Track a parcel</a><a href="#top">Help center</a><a href="#top">Contact</a><a href="#top">Claims</a>
</div>
</div>
<div class="wrap footer-bottom">
<span>© 2026 Veloce Parcel. Illustrative demo — not a real service.</span>
<div class="footer-legal"><a href="#top">Privacy</a><a href="#top">Terms</a></div>
</div>
</footer>
<div class="toast-wrap" id="toastWrap" aria-live="polite" aria-atomic="true"></div>
<script src="script.js"></script>
</body>
</html>Parcel / Courier Landing
A complete marketing landing page for a fictional courier brand, Veloce Parcel, dressed in a clean blue-and-slate system that reads as reliable and trustworthy. The hero pairs a headline with a working track-your-package widget: type a number (or tap the sample) and a result card returns the parcel’s status pill, a human-readable line, and an ETA, with unknown or malformed codes handled gracefully. Alongside it a map-forward shipment card runs a live mm:ss countdown, a four-step status tracker, and an animated driver marker that follows an SVG route toward the destination pin.
The page then walks through same-day, next-day and international service cards, an instant pricing calculator that recomputes a fare live from the chosen service, a small/medium/large size toggle and a distance slider, and an interactive coverage map whose hubs reveal courier counts on hover or keyboard focus. A dark business-solutions band, a closing CTA, a sticky nav with a mobile drawer, scroll-reveal animations and a toast() helper round it out.
Everything is a single vanilla-JS IIFE with no dependencies — drop the three snippet files together and the track, quote, map and countdown widgets drive themselves. Layouts collapse cleanly to a mobile-first single column at ~360px, and prefers-reduced-motion is honored throughout.
Illustrative UI only — fictional brand, not a real delivery service.