<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>LoadRadar — AI Dispatch Assistant</title>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--ink: #080c10;
--cyan: #00d9f5;
--green: #00e07a;
--amber: #f5a623;
--chalk: #ffffff;
--fog: #b8d4e8;
--wire: rgba(255,255,255,0.07);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
background: var(–ink);
color: #ffffff;
font-family: ‘Barlow’, sans-serif;
min-height: 100vh;
overflow-x: hidden;
}
/* ── Radar background animation ── */
.radar-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
}
.radar-ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border: 1px solid rgba(0,217,245,0.25);
transform: translate(-50%, -50%);
animation: radarPulse 4s ease-out infinite;
}
.radar-ring:nth-child(1) { width: 200px; height: 200px; animation-delay: 0s; }
.radar-ring:nth-child(2) { width: 400px; height: 400px; animation-delay: 0.6s; }
.radar-ring:nth-child(3) { width: 650px; height: 650px; animation-delay: 1.2s; }
.radar-ring:nth-child(4) { width: 950px; height: 950px; animation-delay: 1.8s; }
.radar-ring:nth-child(5) { width: 1300px; height: 1300px; animation-delay: 2.4s; }
.radar-ring:nth-child(6) { width: 1700px; height: 1700px; animation-delay: 3s; }
@keyframes radarPulse {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* Radar sweep line */
.radar-sweep {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 900px;
transform: translate(-50%, -50%);
animation: sweep 8s linear infinite;
pointer-events: none;
}
.radar-sweep::after {
content: ‘’;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 1px;
transform-origin: left center;
background: linear-gradient(90deg, transparent, rgba(0,217,245,0.9));
box-shadow: 0 0 16px rgba(0,217,245,0.8), 0 0 40px rgba(0,217,245,0.3);
}
@keyframes sweep {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Radar dots (load blips) */
.radar-dot {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(–cyan);
box-shadow: 0 0 14px var(–cyan), 0 0 28px rgba(0,217,245,0.5);
animation: blip 8s ease-in-out infinite;
}
.radar-dot:nth-child(7) { top: 38%; left: 55%; animation-delay: 0.5s; background: var(–green); box-shadow: 0 0 14px var(–green), 0 0 28px rgba(0,224,122,0.5); }
.radar-dot:nth-child(8) { top: 52%; left: 62%; animation-delay: 1.5s; background: var(–cyan); box-shadow: 0 0 14px var(–cyan), 0 0 28px rgba(0,217,245,0.5); }
.radar-dot:nth-child(9) { top: 44%; left: 48%; animation-delay: 2.5s; background: var(–amber); box-shadow: 0 0 14px var(–amber), 0 0 28px rgba(245,166,35,0.5); }
.radar-dot:nth-child(10) { top: 58%; left: 53%; animation-delay: 3.5s; background: var(–green); box-shadow: 0 0 14px var(–green), 0 0 28px rgba(0,224,122,0.5); }
.radar-dot:nth-child(11) { top: 46%; left: 58%; animation-delay: 4.5s; background: var(–cyan); box-shadow: 0 0 14px var(–cyan), 0 0 28px rgba(0,217,245,0.5); }
.radar-dot:nth-child(12) { top: 54%; left: 46%; animation-delay: 5.5s; background: var(–amber); box-shadow: 0 0 14px var(–amber), 0 0 28px rgba(245,166,35,0.5); }
.radar-dot:nth-child(13) { top: 30%; left: 42%; animation-delay: 1s; background: var(–cyan); box-shadow: 0 0 14px var(–cyan), 0 0 28px rgba(0,217,245,0.5); }
.radar-dot:nth-child(14) { top: 65%; left: 60%; animation-delay: 2s; background: var(–green); box-shadow: 0 0 14px var(–green), 0 0 28px rgba(0,224,122,0.5); }
.radar-dot:nth-child(15) { top: 35%; left: 65%; animation-delay: 3s; background: var(–amber); box-shadow: 0 0 14px var(–amber), 0 0 28px rgba(245,166,35,0.5); }
.radar-dot:nth-child(16) { top: 62%; left: 38%; animation-delay: 4s; background: var(–cyan); box-shadow: 0 0 14px var(–cyan), 0 0 28px rgba(0,217,245,0.5); }
.radar-dot:nth-child(17) { top: 28%; left: 58%; animation-delay: 5s; background: var(–green); box-shadow: 0 0 14px var(–green), 0 0 28px rgba(0,224,122,0.5); }
.radar-dot:nth-child(18) { top: 70%; left: 48%; animation-delay: 6s; background: var(–amber); box-shadow: 0 0 14px var(–amber), 0 0 28px rgba(245,166,35,0.5); }
.radar-dot:nth-child(19) { top: 42%; left: 35%; animation-delay: 0.8s; background: var(–cyan); box-shadow: 0 0 14px var(–cyan), 0 0 28px rgba(0,217,245,0.5); }
.radar-dot:nth-child(20) { top: 55%; left: 68%; animation-delay: 2.2s; background: var(–green); box-shadow: 0 0 14px var(–green), 0 0 28px rgba(0,224,122,0.5); }
@keyframes blip {
0% { opacity: 0; transform: scale(0); }
8% { opacity: 1; transform: scale(2); }
20% { opacity: 1; transform: scale(1.2); }
50% { opacity: 0.8; transform: scale(1); }
75% { opacity: 0; transform: scale(0.5); }
100% { opacity: 0; transform: scale(0); }
}
/* Crosshair lines */
.crosshair {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
height: 900px;
pointer-events: none;
}
.crosshair::before, .crosshair::after {
content: ‘’;
position: absolute;
background: rgba(0,217,245,0.15);
}
.crosshair::before {
width: 1px;
height: 100%;
left: 50%;
}
.crosshair::after {
width: 100%;
height: 1px;
top: 50%;
}
/* ── Main content ── */
.container {
position: relative;
z-index: 10;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.2) 100%);
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 60px;
animation: fadeUp 0.8s ease both;
}
.logo-icon {
font-size: 32px;
filter: drop-shadow(0 0 12px rgba(0,217,245,0.6));
}
.logo-text {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 28px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
}
.logo-text em {
color: var(–cyan);
font-style: normal;
}
/* Badge */
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0,217,245,0.08);
border: 1px solid rgba(0,217,245,0.2);
border-radius: 100px;
padding: 6px 16px;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #00d9f5;
margin-bottom: 28px;
font-weight: 900;
text-shadow: 0 0 20px rgba(0,217,245,0.6), 0 2px 10px rgba(0,0,0,0.9);
animation: fadeUp 0.8s ease 0.1s both;
}
.badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #00d9f5;
box-shadow: 0 0 8px #00d9f5;
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* Headline */
h1 {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: clamp(52px, 10vw, 96px);
font-weight: 900;
line-height: 0.95;
letter-spacing: -1px;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 2px 30px rgba(0,0,0,0.5);
margin-bottom: 24px;
animation: fadeUp 0.8s ease 0.2s both;
}
h1 .highlight {
color: var(–cyan);
display: block;
-webkit-text-stroke: 1px rgba(0,217,245,0.3);
}
/* Subheadline */
.sub {
font-size: clamp(16px, 2.5vw, 20px);
font-weight: 300;
color: #ffffff;
max-width: 560px;
text-shadow: 0 1px 20px rgba(0,0,0,0.8);
line-height: 1.6;
margin-bottom: 56px;
animation: fadeUp 0.8s ease 0.3s both;
}
.sub strong {
color: #ffffff;
font-weight: 500;
}
/* Features pills */
.features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 56px;
animation: fadeUp 0.8s ease 0.4s both;
}
.feature-pill {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 100px;
padding: 8px 16px;
font-size: 13px;
color: #ccdde8;
transition: all 0.2s;
}
.feature-pill:hover {
background: rgba(0,217,245,0.06);
border-color: rgba(0,217,245,0.2);
color: #ffffff;
}
.feature-pill span:first-child { font-size: 14px; }
/* Email form */
.form-wrap {
width: 100%;
max-width: 440px;
animation: fadeUp 0.8s ease 0.5s both;
}
.form-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #f5a623;
margin-bottom: 12px;
display: block;
}
.form-row {
display: flex;
gap: 0;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(245,166,35,0.4);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.2s;
}
.form-row:focus-within {
border-color: rgba(0,217,245,0.4);
box-shadow: 0 0 0 3px rgba(0,217,245,0.08);
}
.form-input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 14px 18px;
color: #ffffff;
font-family: ‘Barlow’, sans-serif;
font-size: 14px;
}
.form-input::placeholder { color: #f5a623; opacity: 1; font-weight: 600; }
.form-btn {
background: var(–cyan);
color: #080c10;
border: none;
padding: 14px 22px;
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.form-btn:hover { background: #00c4dd; }
.form-note {
font-size: 11px;
color: #b8d4e8;
margin-top: 10px;
}
/* Success state */
.form-success {
display: none;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 20px;
background: rgba(0,224,122,0.08);
border: 1px solid rgba(0,224,122,0.2);
border-radius: 10px;
color: var(–green);
font-weight: 600;
font-size: 14px;
}
/* Stats row */
.stats {
display: flex;
gap: 40px;
margin-top: 64px;
animation: fadeUp 0.8s ease 0.6s both;
background: rgba(0,0,0,0.6);
padding: 20px 40px;
border-radius: 14px;
border: 1px solid rgba(245,166,35,0.2);
}
.stat {
text-align: center;
}
.stat-val {
font-family: ‘Barlow Condensed’, sans-serif;
font-size: 30px;
font-weight: 900;
color: #00d9f5;
display: block;
text-shadow: 0 0 20px rgba(0,217,245,0.8), 0 2px 4px rgba(0,0,0,0.9);
}
.stat-label {
font-size: 11px;
color: #b8d4e8;
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 2px;
}
/* Footer */
footer {
position: relative;
z-index: 10;
padding: 24px;
text-align: center;
font-size: 12px;
color: #f5a623;
font-weight: 700;
}
footer a { color: var(–cyan); text-decoration: none; }
/* Animations */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 600px) {
.stats { gap: 24px; }
.stat-val { font-size: 22px; }
.features { gap: 8px; }
.feature-pill { font-size: 12px; padding: 6px 12px; }
.form-btn { padding: 14px 16px; font-size: 12px; }
}
</style>
</head>
<body>
<!-- Radar background -->
<div class="radar-bg">
<div class="radar-ring"></div>
<div class="radar-ring"></div>
<div class="radar-ring"></div>
<div class="radar-ring"></div>
<div class="radar-ring"></div>
<div class="radar-ring"></div>
<div class="crosshair"></div>
<div class="radar-sweep"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
<div class="radar-dot"></div>
</div>
<!-- Content -->
<div class="container">
<!-- Logo -->
<div class="logo">
<span class="logo-icon">📡</span>
<span class="logo-text">Load<em>Radar</em></span>
</div>
<!-- Badge -->
<div class="badge">
<span class="badge-dot"></span>
Coming Soon
</div>
<!-- Headline -->
<h1>
Dispatch Smarter.
<span class="highlight">Haul Better.</span>
</h1>
<!-- Sub -->
<p class="sub">
The AI-powered dispatch assistant built exclusively for <strong>freight dispatchers</strong>.
Work smarter, earn more, and stay ahead —
launching very soon.
</p>
<!-- Email signup -->
<div class="form-wrap">
<label class="form-label">Get early access</label>
<div class="form-row" id="formRow">
<input
class="form-input"
type="email"
id="emailInput"
placeholder="your@email.com"
onkeydown="if(event.key==='Enter')submitEmail()"
/>
<button class="form-btn" onclick="submitEmail()">Notify Me →</button>
</div>
<div class="form-success" id="formSuccess">
✅ You're on the list — we'll notify you at launch!
</div>
<p class="form-note">No spam. Just a single email when we launch.</p>
</div>
<!-- Stats -->
<div class="stats">
<div class="stat">
<span class="stat-val">Free</span>
<span class="stat-label">To get started</span>
</div>
<div class="stat">
<span class="stat-val">Chrome</span>
<span class="stat-label">Extension</span>
</div>
<div class="stat">
<span class="stat-val">$19.99</span>
<span class="stat-label">Pro plan / month</span>
</div>
</div>
</div>
<!-- Footer -->
<footer>
© 2026 LoadRadar · <a href="mailto:admin@loadradar.io">admin@loadradar.io</a>
</footer>
<script>
function submitEmail() {
var email = document.getElementById('emailInput').value.trim();
if (!email || !email.includes('@')) {
document.getElementById('emailInput').style.borderColor = 'rgba(255,71,87,0.5)';
document.getElementById('emailInput').focus();
return;
}
// Hide form, show success
document.getElementById('formRow').style.display = 'none';
var success = document.getElementById('formSuccess');
success.style.display = 'flex';
// Store locally
try {
var emails = JSON.parse(localStorage.getItem('lr_waitlist') || '[]');
emails.push({ email: email, date: new Date().toISOString() });
localStorage.setItem('lr_waitlist', JSON.stringify(emails));
} catch(e) {}
}
</script>
</body>
</html>