242 lines
14 KiB
HTML
242 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Request Escort Service | PilotEdge</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-slate-50 min-h-screen flex flex-col">
|
|
|
|
<div id="main-nav"></div>
|
|
<div id="poc-banner"></div>
|
|
|
|
<!-- Page Header -->
|
|
<section class="bg-slate-900 text-white pt-24 pb-12 px-4">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-3">Request Escort Vehicle Service</h1>
|
|
<p class="text-lg text-gray-400 max-w-3xl">Tell us about your load and route — we'll match you with available escort/pilot vehicles and get back to you promptly.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Order Form -->
|
|
<section class="max-w-4xl mx-auto px-4 py-8">
|
|
<form id="order-form" onsubmit="handleSubmit(event)" class="space-y-8">
|
|
|
|
<!-- Contact Information -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-8">
|
|
<h2 class="text-xl font-bold text-slate-900 mb-6 flex items-center">
|
|
<span class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center text-amber-600 mr-3 text-sm font-bold">1</span>
|
|
Contact Information
|
|
</h2>
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Full Name <span class="text-red-500">*</span></label>
|
|
<input type="text" name="name" required class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="John Smith">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Company Name</label>
|
|
<input type="text" name="company" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="ABC Trucking LLC">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Email <span class="text-red-500">*</span></label>
|
|
<input type="email" name="email" required class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="john@abctrucking.com">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Phone <span class="text-red-500">*</span></label>
|
|
<input type="tel" name="phone" required class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="(555) 123-4567">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load Details -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-8">
|
|
<h2 class="text-xl font-bold text-slate-900 mb-6 flex items-center">
|
|
<span class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center text-amber-600 mr-3 text-sm font-bold">2</span>
|
|
Load Details
|
|
</h2>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Load Description <span class="text-red-500">*</span></label>
|
|
<textarea name="load_desc" required rows="3" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="e.g. Wind turbine blade, 135' long, loaded on extendable trailer"></textarea>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Width</label>
|
|
<input type="text" name="width" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="16'2"">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Height</label>
|
|
<input type="text" name="height" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="14'8"">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Overall Length</label>
|
|
<input type="text" name="length" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="135'">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Gross Weight</label>
|
|
<input type="text" name="weight" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="185,000 lbs">
|
|
</div>
|
|
</div>
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Trailer Type</label>
|
|
<select name="trailer_type" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none">
|
|
<option value="">Select...</option>
|
|
<option>Lowboy / RGN</option>
|
|
<option>Flatbed</option>
|
|
<option>Step Deck</option>
|
|
<option>Extendable / Stretch</option>
|
|
<option>Double Drop</option>
|
|
<option>Multi-Axle / Schnabel</option>
|
|
<option>Perimeter (Beam/Bolster)</option>
|
|
<option>Other</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Number of Axles</label>
|
|
<select name="axles" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none">
|
|
<option value="">Select...</option>
|
|
<option>5 axles (standard)</option>
|
|
<option>6 axles</option>
|
|
<option>7 axles</option>
|
|
<option>8 axles</option>
|
|
<option>9+ axles</option>
|
|
<option>13+ axles (superload)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Route Details -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-8">
|
|
<h2 class="text-xl font-bold text-slate-900 mb-6 flex items-center">
|
|
<span class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center text-amber-600 mr-3 text-sm font-bold">3</span>
|
|
Route & Schedule
|
|
</h2>
|
|
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Pickup Location <span class="text-red-500">*</span></label>
|
|
<input type="text" name="pickup" required class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="City, State or full address">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Delivery Location <span class="text-red-500">*</span></label>
|
|
<input type="text" name="delivery" required class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="City, State or full address">
|
|
</div>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-4 mb-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Departure Date <span class="text-red-500">*</span></label>
|
|
<input type="date" name="departure_date" required class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Flexibility</label>
|
|
<select name="flexibility" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none">
|
|
<option>Exact date</option>
|
|
<option>± 1 day</option>
|
|
<option>± 2-3 days</option>
|
|
<option>± 1 week</option>
|
|
<option>Flexible</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">States on Route</label>
|
|
<input type="text" name="states" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="e.g. TX, OK, KS">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Do you already have permits?</label>
|
|
<div class="flex gap-4 mt-1">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="has_permits" value="yes" class="accent-amber-500"> <span class="text-slate-700">Yes, permits are in hand</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="has_permits" value="no" checked class="accent-amber-500"> <span class="text-slate-700">No, still need permits</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="has_permits" value="some" class="accent-amber-500"> <span class="text-slate-700">Some states</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Escort Requirements -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-8">
|
|
<h2 class="text-xl font-bold text-slate-900 mb-6 flex items-center">
|
|
<span class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center text-amber-600 mr-3 text-sm font-bold">4</span>
|
|
Escort Requirements
|
|
</h2>
|
|
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Escort Vehicles Needed</label>
|
|
<select name="escorts_needed" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none">
|
|
<option>1 (front only)</option>
|
|
<option>1 (rear only)</option>
|
|
<option>2 (front and rear)</option>
|
|
<option>3+ (complex move)</option>
|
|
<option>Not sure — help me determine</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Height Pole Required?</label>
|
|
<select name="height_pole" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none">
|
|
<option>No</option>
|
|
<option>Yes</option>
|
|
<option>Not sure</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 mb-1">Special Requirements or Notes</label>
|
|
<textarea name="notes" rows="4" class="w-full border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-amber-400 focus:border-amber-400 outline-none" placeholder="Any additional details — night travel needs, multiple loads, specific equipment requirements, etc."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<div class="flex flex-col sm:flex-row gap-4 items-center justify-between">
|
|
<p class="text-sm text-slate-500">Fields marked with <span class="text-red-500">*</span> are required. We typically respond within 2-4 hours.</p>
|
|
<button type="submit" class="bg-amber-500 hover:bg-amber-600 text-slate-900 font-bold px-8 py-4 rounded-xl text-lg transition-colors shadow-lg hover:shadow-xl whitespace-nowrap">
|
|
Submit Request →
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Success Message (hidden by default) -->
|
|
<div id="success-message" class="hidden">
|
|
<div class="bg-white rounded-2xl shadow-lg p-12 text-center">
|
|
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center text-4xl mx-auto mb-6">✅</div>
|
|
<h2 class="text-2xl font-bold text-slate-900 mb-3">Request Submitted!</h2>
|
|
<p class="text-slate-600 mb-6 max-w-md mx-auto">Thank you for your escort service request. We've received your details and will get back to you within 2-4 hours with availability and pricing.</p>
|
|
<div class="bg-slate-50 rounded-xl p-4 mb-6 inline-block">
|
|
<p class="text-sm text-slate-500">Reference Number</p>
|
|
<p id="ref-number" class="text-xl font-bold text-slate-900">PE-2026-0001</p>
|
|
</div>
|
|
<div>
|
|
<a href="index.html" class="inline-block bg-amber-500 hover:bg-amber-600 text-slate-900 font-bold px-6 py-3 rounded-lg transition-colors">
|
|
← Back to Home
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="main-footer"></div>
|
|
|
|
<script src="nav.js"></script>
|
|
<script>
|
|
renderNav('order');
|
|
renderBanner();
|
|
renderFooter();
|
|
|
|
function handleSubmit(e) {
|
|
e.preventDefault();
|
|
// In production, this would POST to an API
|
|
const refNum = 'PE-2026-' + String(Math.floor(Math.random() * 9000) + 1000);
|
|
document.getElementById('ref-number').textContent = refNum;
|
|
document.getElementById('order-form').classList.add('hidden');
|
|
document.getElementById('success-message').classList.remove('hidden');
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|