Fix search buttons visibility + auto-select services on order page
- Check Compliance and Search buttons: inline styles (bg-orange-500 not in Astro CSS) - CTA "Fix My DOT Filings" now maps red checks to service slugs: mcs150 → mcs150-update, insurance → dot-full-compliance, bond → boc3-filing, authority → mc-authority - Order page pre-checks the recommended services via ?services= param Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin
parent
aad45dc827
commit
2e45a59133
1 changed files with 18 additions and 3 deletions
|
|
@ -15,9 +15,9 @@ Sign out
|
|||
<a href="/tools" class="hover:text-gray-700">Free Tools</a> /
|
||||
<span class="text-gray-900">DOT Compliance Check</span> </nav> <!-- Header --> <h1 class="text-3xl font-bold text-gray-900 mb-3">DOT / FMCSA Compliance Check</h1> <p class="text-lg text-gray-600 mb-4">Look up any motor carrier by USDOT number or name to instantly check MCS-150 status, insurance, operating authority, and safety rating.</p> <!-- Disclaimer --> <div class="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-8"> <p class="text-xs text-gray-500"><strong>Disclaimer:</strong> This tool queries publicly available FMCSA data and is for informational purposes only. Always confirm directly with FMCSA. This is not legal or compliance advice.</p> </div> <!-- Search Box --> <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm mb-8"> <!-- Tabs --> <div class="flex gap-0 mb-5 border-b-2 border-gray-200"> <button type="button" class="dot-tab px-4 py-2 text-sm font-semibold text-orange-600 border-b-2 border-orange-500 -mb-[2px] cursor-pointer" data-tab="dot">Search by DOT #</button> <button type="button" class="dot-tab px-4 py-2 text-sm font-semibold text-gray-500 border-b-2 border-transparent -mb-[2px] cursor-pointer hover:text-gray-700" data-tab="name">Search by Name</button> </div>
|
||||
|
||||
<!-- DOT number search --> <div id="tab-dot"> <label for="dot-input" class="block text-sm font-semibold text-gray-900 mb-2">USDOT Number</label> <div class="flex gap-3"> <input type="text" id="dot-input" placeholder="Enter USDOT number (e.g. 1234567)" maxlength="10" class="flex-1 border border-gray-300 rounded-lg px-4 py-3 text-lg font-mono text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400"> <button type="button" id="dot-btn" class="px-6 py-3 bg-orange-500 text-white font-semibold rounded-lg hover:bg-orange-600 transition-colors whitespace-nowrap disabled:bg-gray-400 disabled:cursor-not-allowed">Check Compliance</button> </div> <p class="text-xs text-gray-500 mt-2">Your USDOT number is assigned by the Federal Motor Carrier Safety Administration. Don't know it? Use the name search tab.</p> </div>
|
||||
<!-- DOT number search --> <div id="tab-dot"> <label for="dot-input" class="block text-sm font-semibold text-gray-900 mb-2">USDOT Number</label> <div class="flex gap-3"> <input type="text" id="dot-input" placeholder="Enter USDOT number (e.g. 1234567)" maxlength="10" class="flex-1 border border-gray-300 rounded-lg px-4 py-3 text-lg font-mono text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400"> <button type="button" id="dot-btn" style="padding:12px 24px;background:#f97316;color:#fff;font-weight:600;border-radius:8px;border:none;cursor:pointer;white-space:nowrap;font-size:15px">Check Compliance</button> </div> <p class="text-xs text-gray-500 mt-2">Your USDOT number is assigned by the Federal Motor Carrier Safety Administration. Don't know it? Use the name search tab.</p> </div>
|
||||
|
||||
<!-- Name search --> <div id="tab-name" class="hidden"> <label for="name-input" class="block text-sm font-semibold text-gray-900 mb-2">Carrier Name</label> <div class="flex gap-3"> <input type="text" id="name-input" placeholder="Enter carrier name (e.g. Werner Enterprises)" class="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400"> <button type="button" id="name-btn" class="px-5 py-2.5 bg-gray-100 text-gray-700 font-semibold rounded-lg hover:bg-gray-200 border border-gray-300 transition-colors whitespace-nowrap text-sm">Search</button> </div> <div id="name-results" class="hidden mt-4 max-h-60 overflow-y-auto space-y-2"></div> </div> </div>
|
||||
<!-- Name search --> <div id="tab-name" class="hidden"> <label for="name-input" class="block text-sm font-semibold text-gray-900 mb-2">Carrier Name</label> <div class="flex gap-3"> <input type="text" id="name-input" placeholder="Enter carrier name (e.g. Werner Enterprises)" class="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400"> <button type="button" id="name-btn" style="padding:10px 20px;background:#f3f4f6;color:#374151;font-weight:600;border-radius:8px;border:1px solid #d1d5db;cursor:pointer;white-space:nowrap;font-size:14px">Search</button> </div> <div id="name-results" class="hidden mt-4 max-h-60 overflow-y-auto space-y-2"></div> </div> </div>
|
||||
|
||||
<!-- Loading state --> <div id="pw-results-anchor"></div><div id="loading" class="hidden text-center py-12"> <div class="inline-flex items-center gap-3 text-gray-600"> <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
|
||||
Checking DOT compliance status...
|
||||
|
|
@ -255,10 +255,25 @@ Send reset link
|
|||
// CTA
|
||||
var redCount = (s.red || 0);
|
||||
if (redCount > 0) {
|
||||
// Map red checks to recommended service slugs
|
||||
var recommendedServices = [];
|
||||
(data.checks || []).forEach(function(c) {
|
||||
if (c.status !== "red") return;
|
||||
if (c.id === "mcs150") recommendedServices.push("mcs150-update");
|
||||
if (c.id === "insurance_bipd" || c.id === "insurance_cargo") recommendedServices.push("dot-full-compliance");
|
||||
if (c.id === "insurance_bond") recommendedServices.push("boc3-filing");
|
||||
if (c.id === "authority") recommendedServices.push("mc-authority");
|
||||
});
|
||||
// Always suggest MCS-150 if overdue
|
||||
if ((data.checks || []).some(function(c) { return c.id === "mcs150" && c.status === "red"; }) && recommendedServices.indexOf("mcs150-update") < 0) {
|
||||
recommendedServices.push("mcs150-update");
|
||||
}
|
||||
var svcParam = recommendedServices.length > 0 ? "&services=" + recommendedServices.join(",") : "";
|
||||
|
||||
html += '<div style="background:linear-gradient(135deg,#fff7ed,#ffedd5);border:2px solid #f97316;border-radius:12px;padding:24px;text-align:center;margin-top:8px">';
|
||||
html += '<h3 style="font-size:18px;font-weight:700;color:#111827;margin-bottom:8px">' + redCount + ' compliance issue' + (redCount > 1 ? 's' : '') + ' found</h3>';
|
||||
html += '<p style="font-size:14px;color:#4b5563;margin-bottom:16px">Performance West can help you resolve these issues. We handle the paperwork so you can focus on driving.</p>';
|
||||
html += '<a href="/order/dot-compliance?dot=' + data.dot_number + '" style="display:inline-block;padding:12px 32px;background:#f97316;color:#fff;font-weight:700;border-radius:8px;text-decoration:none;font-size:15px;box-shadow:0 4px 12px rgba(249,115,22,0.3)">Fix My DOT Filings →</a>';
|
||||
html += '<a href="/order/dot-compliance?dot=' + data.dot_number + svcParam + '" style="display:inline-block;padding:12px 32px;background:#f97316;color:#fff;font-weight:700;border-radius:8px;text-decoration:none;font-size:15px;box-shadow:0 4px 12px rgba(249,115,22,0.3)">Fix My DOT Filings →</a>';
|
||||
html += '<p class="text-xs text-gray-400 mt-3">Or call (888) 411-0383</p>';
|
||||
html += '</div>';
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue