VIN Check

VINcheck

<!-- VINcheck by Vehicular Obsession -->
<div style="padding: 1em; border: 2px solid #2b1d16; border-radius: 6px; max-width: 600px; font-family: Georgia, serif;">
  <h2 style="margin-top: 0; font-size: 1.8em;">VINcheck</h2>
  <p style="margin-top: -10px; color: #555;">Powered by <strong>VehicularObsession.com</strong></p>
  <input type="text" id="vinInput" placeholder="Enter VIN (17 characters)" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;" />
  <button onclick="searchVIN()" style="margin-top: 10px; background-color: #2b1d16; color: white; border: none; padding: 10px 14px; border-radius: 4px; cursor: pointer;">Search</button>
  <div id="results" style="margin-top: 20px;"></div>
  <button id="downloadBtn" style="display:none; margin-top: 15px; background-color: teal; color: white; padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer;">Download PDF</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script>
async function searchVIN() {
  const vin = document.getElementById("vinInput").value.trim().toUpperCase();
  const results = document.getElementById("results");
  const downloadBtn = document.getElementById("downloadBtn");
  results.innerHTML = "Looking up VIN data...";
  downloadBtn.style.display = "none";

  if (vin.length !== 17) {
    results.innerHTML = "<p>Please enter a valid 17-character VIN.</p>";
    return;
  }

  const decodeURL = `https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVin/${vin}?format=json`;
  const recallURL = `https://api.nhtsa.gov/recalls/recallsByVehicle?vin=${vin}`;

  try {
    const [decodeRes, recallRes] = await Promise.all([
      fetch(decodeURL).then(res => res.json()),
      fetch(recallURL).then(res => res.json())
    ]);

    const vehicleInfo = decodeRes.Results;
    const make = vehicleInfo.find(i => i.Variable === "Make")?.Value || "N/A";
    const model = vehicleInfo.find(i => i.Variable === "Model")?.Value || "N/A";
    const year = vehicleInfo.find(i => i.Variable === "Model Year")?.Value || "N/A";
    const recalls = recallRes.results || [];

    const googleURL = `https://www.google.com/search?q="${vin}" site:cargurus.com OR site:autotrader.com OR site:cars.com`;
    const waybackURL = `https://web.archive.org/web/*/autotrader.com/*${vin}`;

    const recallList = recalls.length > 0 
      ? `<ul>${recalls.map(r => `<li><strong>${r.manufacturer}</strong> (${r.nhtsaCampaignNumber}): ${r.summary}</li>`).join("")}</ul>` 
      : `<p style="color: #155724;">No recalls found</p>`;

    results.innerHTML = `
      <div style="background: #f8f8f8; padding: 12px; border-radius: 6px;">
        <p><strong>VIN:</strong> ${vin}</p>
        <p><strong>Vehicle:</strong> ${year} ${make} ${model}</p>
        <p><strong>Search Links:</strong></p>
        <ul>
          <li><a href="${googleURL}" style="color: teal;" target="_blank">Google Search</a></li>
          <li><a href="${waybackURL}" style="color: teal;" target="_blank">Wayback Machine Archive</a></li>
        </ul>
        <p><strong>Recalls:</strong></p>
        ${recallList}
      </div>
    `;

    downloadBtn.style.display = "inline-block";

    window.pdfText = `VINcheck Report\n\nVIN: ${vin}\nVehicle: ${year} ${make} ${model}\n\nSearch Links:\n${googleURL}\n${waybackURL}\n\nRecalls:\n${
      recalls.length > 0
        ? recalls.map(r => `- ${r.manufacturer} (${r.nhtsaCampaignNumber}): ${r.summary}`).join("\n")
        : "No recalls found."
    }\n\nVINcheck, powered by VehicularObsession.com`;

  } catch (err) {
    results.innerHTML = "<p>There was an error fetching data. Please try again later.</p>";
  }
}

document.getElementById("downloadBtn").addEventListener("click", () => {
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();

  const logoBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAI6ElEQVR4nO2ceXBV1R2Av7u+JyElbAlJDEQIJkhUtFpEEEghURsYExFFFH3++dY+18aUbflS0dMyZdEk2wRGqIxmhPqtSeHfz6fd6kfjW8L2eZxPMgAAAAAAAAAAwJ+RZJNdnHOS..."; // full base64 logo here

  const vin = document.getElementById("vinInput").value.trim().toUpperCase();
  doc.setFont("Helvetica", "normal");
  doc.addImage(logoBase64, 'PNG', 150, 10, 40, 12);  // top right corner
  doc.text(window.pdfText, 10, 30, { maxWidth: 180 });
  doc.save(`VINcheck-${vin}.pdf`);
});
</script>