Hugging Face's logo

Spaces:
Crazyka51
/
mynewcomp
Running

App Files Community
mynewcomp / index.html
Crazyka51's picture
Crazyka51
Add 3 files
41fa0b3 verified
raw
history blame contribute delete
76.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Precision Auto | Professional Auto Repair & Parts</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @keyframes gearRotate {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
 }
@keyframes roadMove {
 0% { background-position: 0 0; }
 100% { background-position: 100px 0; }
 }
@keyframes oilDrip {
 0% { transform: translateY(-20px) scaleY(0.2); opacity: 0; }
 50% { transform: translateY(0) scaleY(1); opacity: 0.8; }
 100% { transform: translateY(20px) scaleY(0.2); opacity: 0; }
 }
@keyframes smokePuff {
 0% { transform: scale(0.5); opacity: 0; }
 50% { transform: scale(1.2); opacity: 0.6; }
 100% { transform: scale(1.5); opacity: 0; }
 }
@keyframes pulseGlow {
 0%, 100% { box-shadow: 0 0 5px rgba(249, 115, 22, 0.5); }
 50% { box-shadow: 0 0 15px rgba(249, 115, 22, 0.8); }
 }
.gear-animation {
 animation: gearRotate 10s linear infinite;
 }
.road-animation {
 animation: roadMove 2s linear infinite;
 }
.oil-drip {
 animation: oilDrip 3s ease-in infinite;
 }
.smoke-puff {
 animation: smokePuff 4s ease-out infinite;
 }
.part-highlight {
 transition: all 0.3s ease;
 }
.part-highlight:hover {
 filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.7));
 transform: scale(1.05);
 }
.progress-bar {
 transition: width 0.5s ease;
 }
.tool-animation {
 animation: toolMove 0.5s ease-in-out infinite alternate;
 }
@keyframes toolMove {
 from { transform: translateY(0) rotate(0deg); }
 to { transform: translateY(-5px) rotate(5deg); }
 }
.light-effect {
 animation: lightPulse 2s ease-in-out infinite;
 }
@keyframes lightPulse {
 0%, 100% { opacity: 0.3; }
 50% { opacity: 0.8; }
 }
.theme-switcher {
 transition: all 0.3s ease;
 }
.theme-switcher:hover {
 transform: scale(1.1);
 }
.glow-orange {
 box-shadow: 0 0 10px 2px rgba(249, 115, 22, 0.7);
 }
.part-glow {
 transition: all 0.3s ease;
 }
.part-glow:hover {
 filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.7));
 }
.carbon-fiber {
 background-image:
linear-gradient(45deg, #111 25%, transparent 25%),
 linear-gradient(-45deg, #111 25%, transparent 25%),
 linear-gradient(45deg, transparent 75%, #111 75%),
 linear-gradient(-45deg, transparent 75%, #111 75%);
 background-size: 20px 20px;
 background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
.metal-texture {
 background: linear-gradient(135deg, #333 0%, #666 50%, #333 100%);
 }
.oil-spill {
 background: radial-gradient(circle, transparent 10%, rgba(0, 0, 0, 0.8) 70%);
 }
.neon-border {
 box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #f97316;
 }
.zoom-on-hover {
 transition: transform 0.3s ease;
 }
.zoom-on-hover:hover {
 transform: scale(1.05);
 }
.pulse-glow {
 animation: pulseGlow 2s infinite;
 }
.service-card {
 transition: all 0.3s ease;
 border-left: 4px solid transparent;
 }
.service-card:hover {
 transform: translateY(-5px);
 border-left-color: #f97316;
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
 }
.nav-link {
 position: relative;
 }
.nav-link::after {
 content: '';
 position: absolute;
 width: 0;
 height: 2px;
 bottom: 0;
 left: 0;
 background-color: #f97316;
 transition: width 0.3s ease;
 }
.nav-link:hover::after {
 width: 100%;
 }
.active-nav::after {
 width: 100%;
 }
.dropdown-menu {
 opacity: 0;
 visibility: hidden;
 transform: translateY(10px);
 transition: all 0.3s ease;
 }
.dropdown:hover .dropdown-menu {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
 }
.before-after-container {
 position: relative;
 overflow: hidden;
 height: 300px;
 }
.before-image, .after-image {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
.before-image {
 width: 50%;
 z-index: 2;
 border-right: 2px solid #f97316;
 }
.slider-handle {
 position: absolute;
 width: 40px;
 height: 40px;
 background-color: #f97316;
 border-radius: 50%;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 3;
 cursor: ew-resize;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
.slider-line {
 position: absolute;
 width: 2px;
 height: 100%;
 background-color: #f97316;
 left: 50%;
 z-index: 2;
 }
.calendar-day {
 transition: all 0.2s ease;
 }
.calendar-day:hover {
 background-color: #f97316;
 color: white;
 }
.calendar-day.selected {
 background-color: #f97316;
 color: white;
 }
.time-slot {
 transition: all 0.2s ease;
 }
.time-slot:hover {
 background-color: #f97316;
 color: white;
 }
.time-slot.selected {
 background-color: #f97316;
 color: white;
 }
.part-card {
 transition: all 0.3s ease;
 border: 1px solid #2d3748;
 }
.part-card:hover {
 border-color: #f97316;
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
 }
.filter-option {
 transition: all 0.2s ease;
 }
.filter-option:hover {
 color: #f97316;
 }
.filter-option.active {
 color: #f97316;
 font-weight: 600;
 }
 </style>
</head>
<body class="bg-gray-900 text-gray-100 font-sans">
 <!-- Top Bar -->
 <div class="bg-black py-2 px-4 text-sm">
 <div class="container mx-auto flex justify-between items-center">
 <div class="flex space-x-4">
 <div class="flex items-center">
 <i class="fas fa-phone-alt text-orange-500 mr-2"></i>
 <span>1-800-AUTO-REP</span>
 </div>
 <div class="flex items-center">
 <i class="fas fa-map-marker-alt text-orange-500 mr-2"></i>
 <span>123 Mechanic St, Auto City</span>
 </div>
 </div>
 <div class="flex space-x-4">
 <a href="#" class="hover:text-orange-400 transition"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="hover:text-orange-400 transition"><i class="fab fa-twitter"></i></a>
 <a href="#" class="hover:text-orange-400 transition"><i class="fab fa-instagram"></i></a>
 <a href="#" class="hover:text-orange-400 transition"><i class="fab fa-youtube"></i></a>
 </div>
 </div>
 </div>
<!-- Navigation -->
 <nav class="bg-gray-800 shadow-lg sticky top-0 z-50">
 <div class="container mx-auto px-4">
 <div class="flex justify-between items-center py-4">
 <div class="flex items-center">
 <div class="mr-2 text-orange-500">
 <i class="fas fa-car text-2xl"></i>
 </div>
 <div class="text-2xl font-bold">
 <span class="text-white">Precision</span>
 <span class="text-orange-500">Auto</span>
 </div>
 </div>
<div class="hidden md:flex space-x-8">
 <a href="#" class="nav-link active-nav py-2">Home</a>
 <div class="dropdown relative">
 <a href="#" class="nav-link py-2 flex items-center">
 Services <i class="fas fa-chevron-down ml-1 text-xs"></i>
 </a>
 <div class="dropdown-menu absolute left-0 mt-2 w-48 bg-gray-700 rounded-md shadow-lg py-1 z-50">
 <a href="#" class="block px-4 py-2 hover:bg-gray-600">Auto Repair</a>
 <a href="#" class="block px-4 py-2 hover:bg-gray-600">Maintenance</a>
 <a href="#" class="block px-4 py-2 hover:bg-gray-600">Diagnostics</a>
 <a href="#" class="block px-4 py-2 hover:bg-gray-600">Tire Services</a>
 </div>
 </div>
 <a href="#" class="nav-link py-2">Parts</a>
 <a href="#" class="nav-link py-2">About</a>
 <a href="#" class="nav-link py-2">Contact</a>
 </div>
<div class="flex items-center space-x-4">
 <a href="#" class="hidden md:block bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded font-medium transition">
 Book Online
 </a>
 <button class="md:hidden text-white focus:outline-none">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="relative bg-gradient-to-b from-gray-900 to-gray-800 overflow-hidden">
 <div class="absolute inset-0 road-animation" style="background-image: linear-gradient(90deg, transparent 95%, rgba(249, 115, 22, 0.1) 5%); background-size: 100px 100px;"></div>
<div class="container mx-auto px-4 py-24 relative z-10">
 <div class="flex flex-col lg:flex-row items-center">
 <div class="lg:w-1/2 mb-12 lg:mb-0">
 <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
 Professional <span class="text-orange-500">Auto Repair</span> Services You Can Trust
 </h1>
 <p class="text-xl text-gray-300 mb-8">
 Precision Auto provides top-quality automotive repair and maintenance services with a commitment to excellence and customer satisfaction.
 </p>
 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
 <a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg font-medium text-center transition pulse-glow">
 Schedule Service
 </a>
 <a href="#" class="bg-transparent hover:bg-gray-800 text-orange-400 px-6 py-3 rounded-lg font-medium text-center border border-orange-500 transition">
 Learn More
 </a>
 </div>
 </div>
 <div class="lg:w-1/2 flex justify-center">
 <div class="relative w-full max-w-lg">
 <div class="absolute -top-16 -left-16 w-32 h-32 bg-orange-500 rounded-full opacity-20"></div>
 <div class="absolute -bottom-16 -right-16 w-32 h-32 bg-orange-500 rounded-full opacity-20"></div>
 <div class="relative bg-gray-800 rounded-xl p-6 border border-gray-700 shadow-xl">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-orange-400">Repair Status</h3>
 <div class="flex items-center">
 <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
 <span class="text-sm">Active</span>
 </div>
 </div>
<div class="mb-6">
 <div class="flex items-center mb-4">
 <div class="w-14 h-14 bg-gray-700 rounded-full flex items-center justify-center border border-orange-500">
 <i class="fas fa-car text-orange-400 text-xl"></i>
 </div>
 <div class="ml-4">
 <h4 class="font-bold">Toyota Camry 2020</h4>
 <p class="text-sm text-gray-400">VIN: 4T1B11HK9LU123456</p>
 </div>
 </div>
<div class="space-y-4">
 <div>
 <div class="flex justify-between mb-2">
 <span class="text-gray-300">Diagnostics</span>
 <span class="text-orange-400 font-medium">85%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="progress-bar bg-orange-600 h-2 rounded-full" style="width: 85%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <span class="text-gray-300">Parts Replacement</span>
 <span class="text-orange-400 font-medium">60%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="progress-bar bg-orange-500 h-2 rounded-full" style="width: 60%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <span class="text-gray-300">Testing</span>
 <span class="text-orange-400 font-medium">30%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="progress-bar bg-orange-400 h-2 rounded-full" style="width: 30%"></div>
 </div>
 </div>
 </div>
 </div>
<div class="border-t border-gray-700 pt-4">
 <h4 class="font-medium mb-2 text-orange-400">Estimated Completion</h4>
 <div class="flex items-center">
 <i class="fas fa-clock text-orange-400 mr-2"></i>
 <span class="font-medium">2 days remaining</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Services Section -->
 <section class="py-16 bg-gray-800">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Our <span class="text-orange-500">Services</span></h2>
 <p class="text-xl text-gray-400 max-w-3xl mx-auto">
 We offer a comprehensive range of automotive services to keep your vehicle running smoothly.
 </p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
 <div class="service-card bg-gray-900 p-6 rounded-lg">
 <div class="w-14 h-14 bg-orange-500 rounded-full flex items-center justify-center mb-4">
 <i class="fas fa-tools text-white text-xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">General Repair</h3>
 <p class="text-gray-400 mb-4">
 Comprehensive repair services for all makes and models, performed by certified technicians.
 </p>
 <a href="#" class="text-orange-400 font-medium inline-flex items-center">
 Learn More <i class="fas fa-chevron-right ml-2 text-sm"></i>
 </a>
 </div>
<div class="service-card bg-gray-900 p-6 rounded-lg">
 <div class="w-14 h-14 bg-orange-500 rounded-full flex items-center justify-center mb-4">
 <i class="fas fa-oil-can text-white text-xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Preventive Maintenance</h3>
 <p class="text-gray-400 mb-4">
 Regular maintenance to prevent costly repairs and extend your vehicle's lifespan.
 </p>
 <a href="#" class="text-orange-400 font-medium inline-flex items-center">
 Learn More <i class="fas fa-chevron-right ml-2 text-sm"></i>
 </a>
 </div>
<div class="service-card bg-gray-900 p-6 rounded-lg">
 <div class="w-14 h-14 bg-orange-500 rounded-full flex items-center justify-center mb-4">
 <i class="fas fa-bolt text-white text-xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Electrical Systems</h3>
 <p class="text-gray-400 mb-4">
 Diagnosis and repair of all electrical components including batteries, alternators, and starters.
 </p>
 <a href="#" class="text-orange-400 font-medium inline-flex items-center">
 Learn More <i class="fas fa-chevron-right ml-2 text-sm"></i>
 </a>
 </div>
<div class="service-card bg-gray-900 p-6 rounded-lg">
 <div class="w-14 h-14 bg-orange-500 rounded-full flex items-center justify-center mb-4">
 <i class="fas fa-tire text-white text-xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Tire Services</h3>
 <p class="text-gray-400 mb-4">
 Complete tire services including rotation, balancing, alignment, and replacement.
 </p>
 <a href="#" class="text-orange-400 font-medium inline-flex items-center">
 Learn More <i class="fas fa-chevron-right ml-2 text-sm"></i>
 </a>
 </div>
 </div>
 </div>
 </section>
<!-- Before/After Gallery -->
 <section class="py-16 bg-gray-900">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Before & After <span class="text-orange-500">Repairs</span></h2>
 <p class="text-xl text-gray-400 max-w-3xl mx-auto">
 See the transformation our expert technicians can achieve with your vehicle.
 </p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
 <div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
 <h3 class="text-xl font-semibold mb-4 text-orange-400">Brake System Repair</h3>
 <div class="before-after-container">
 <img src="https://images.unsplash.com/photo-1547036965-6e0a1a5d6a3a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Before repair" class="before-image">
 <img src="https://images.unsplash.com/photo-1547036965-6e0a1a5d6a3a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="After repair" class="after-image">
 <div class="slider-line"></div>
 <div class="slider-handle">
 <i class="fas fa-arrows-left-right"></i>
 </div>
 </div>
 <div class="mt-4 text-gray-400">
 <p>Complete brake system overhaul including new rotors, pads, and fluid replacement.</p>
 </div>
 </div>
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
 <h3 class="text-xl font-semibold mb-4 text-orange-400">Engine Tune-Up</h3>
 <div class="before-after-container">
 <img src="https://images.unsplash.com/photo-1547036965-6e0a1a5d6a3a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Before repair" class="before-image">
 <img src="https://images.unsplash.com/photo-1547036965-6e0a1a5d6a3a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="After repair" class="after-image">
 <div class="slider-line"></div>
 <div class="slider-handle">
 <i class="fas fa-arrows-left-right"></i>
 </div>
 </div>
 <div class="mt-4 text-gray-400">
 <p>Full engine service including spark plugs, filters, and fluid changes.</p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Diagnostic Simulator -->
 <section class="py-16 bg-gray-800">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Interactive <span class="text-orange-500">Diagnostics</span></h2>
 <p class="text-xl text-gray-400 max-w-3xl mx-auto">
 Experience our advanced diagnostic tools to identify potential issues with your vehicle.
 </p>
 </div>
<div class="bg-gray-900 p-8 rounded-xl border border-gray-700 shadow-lg">
 <div class="flex flex-col lg:flex-row gap-8">
 <div class="lg:w-1/2">
 <div class="bg-black p-6 rounded-lg border border-gray-800 h-full">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-semibold text-orange-400">Vehicle Scan</h3>
 <button onclick="runDiagnostics()" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded text-sm font-medium">
 Run Diagnostics
 </button>
 </div>
<div class="bg-gray-800 p-4 rounded border border-gray-700 h-64 overflow-y-auto font-mono text-sm" id="diagnosticOutput">
 <p class="text-gray-400">> Diagnostics tool ready</p>
 <p class="text-gray-400">> Select 'Run Diagnostics' to begin</p>
 </div>
<div class="mt-4 grid grid-cols-2 gap-2">
 <div class="bg-gray-800 p-3 rounded border border-gray-700">
 <div class="text-orange-400 text-xs mb-1">ECU Status</div>
 <div class="text-white font-medium" id="ecuStatus">-</div>
 </div>
 <div class="bg-gray-800 p-3 rounded border border-gray-700">
 <div class="text-orange-400 text-xs mb-1">Error Codes</div>
 <div class="text-white font-medium" id="errorCodes">0</div>
 </div>
 <div class="bg-gray-800 p-3 rounded border border-gray-700">
 <div class="text-orange-400 text-xs mb-1">Battery Voltage</div>
 <div class="text-white font-medium" id="batteryVoltage">-</div>
 </div>
 <div class="bg-gray-800 p-3 rounded border border-gray-700">
 <div class="text-orange-400 text-xs mb-1">O2 Sensor</div>
 <div class="text-white font-medium" id="o2Sensor">-</div>
 </div>
 </div>
 </div>
 </div>
<div class="lg:w-1/2">
 <div class="bg-gray-800 p-6 rounded-lg border border-gray-700 h-full">
 <h3 class="text-xl font-semibold mb-6 text-orange-400">Visual Inspection</h3>
<div class="relative bg-black rounded-lg overflow-hidden h-64">
 <!-- Car SVG for inspection points -->
 <svg id="inspectionSvg" width="100%" height="100%" viewBox="0 0 400 200" class="part-glow">
 <!-- Car outline -->
 <rect x="100" y="80" width="200" height="80" rx="10" fill="#333" stroke="#555" stroke-width="2" />
 <rect x="120" y="60" width="160" height="20" rx="5" fill="#333" stroke="#555" stroke-width="2" />
<!-- Inspection points -->
 <circle cx="120" cy="160" r="8" fill="none" stroke="#f97316" stroke-width="2" stroke-dasharray="5,3" class="inspection-point" data-point="front-brake" onclick="inspectPoint('front-brake')" />
 <circle cx="280" cy="160" r="8" fill="none" stroke="#f97316" stroke-width="2" stroke-dasharray="5,3" class="inspection-point" data-point="rear-brake" onclick="inspectPoint('rear-brake')" />
 <circle cx="150" cy="70" r="8" fill="none" stroke="#f97316" stroke-width="2" stroke-dasharray="5,3" class="inspection-point" data-point="engine" onclick="inspectPoint('engine')" />
 <circle cx="250" cy="70" r="8" fill="none" stroke="#f97316" stroke-width="2" stroke-dasharray="5,3" class="inspection-point" data-point="battery" onclick="inspectPoint('battery')" />
<!-- Wheels -->
 <circle cx="120" cy="160" r="15" fill="#222" stroke="#444" stroke-width="2" />
 <circle cx="280" cy="160" r="15" fill="#222" stroke="#444" stroke-width="2" />
<!-- Smoke effect (hidden by default) -->
 <circle id="engineSmoke" cx="150" cy="50" r="0" fill="rgba(200,200,200,0.5)" class="smoke-puff" style="display: none;"></circle>
 </svg>
<!-- Highlighted part info -->
 <div id="inspectionInfo" class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 p-3 text-sm" style="display: none;">
 <h4 class="font-medium text-orange-400" id="inspectedPartName">Engine</h4>
 <p class="text-gray-300" id="inspectedPartStatus">Status: OK</p>
 </div>
 </div>
<div class="mt-4">
 <div class="flex justify-between items-center">
 <span class="text-gray-400">Inspection Progress</span>
 <span class="text-orange-400 font-medium">2/4 points</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2 mt-1">
 <div class="bg-orange-500 h-2 rounded-full" style="width: 50%"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Booking Form with Interactive Calendar -->
 <section class="py-16 bg-gray-900">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Book a <span class="text-orange-500">Service</span></h2>
 <p class="text-xl text-gray-400 max-w-3xl mx-auto">
 Schedule your appointment online with our easy-to-use booking system.
 </p>
 </div>
<div class="max-w-4xl mx-auto bg-gray-800 p-8 rounded-xl border border-gray-700 shadow-lg">
 <div class="flex flex-col md:flex-row gap-8">
 <div class="md:w-1/2">
 <h3 class="text-xl font-semibold mb-6 text-orange-400">Service Information</h3>
<div class="space-y-4">
 <div>
 <label class="block text-gray-400 mb-1">Vehicle Type</label>
 <select class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-2 text-white focus:border-orange-500 focus:ring-orange-500">
 <option>Sedan</option>
 <option>SUV</option>
 <option>Truck</option>
 <option>Van</option>
 </select>
 </div>
<div>
 <label class="block text-gray-400 mb-1">Service Type</label>
 <select class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-2 text-white focus:border-orange-500 focus:ring-orange-500">
 <option>Oil Change</option>
 <option>Brake Service</option>
 <option>Engine Diagnostic</option>
 <option>Tire Rotation</option>
 <option>Full Tune-Up</option>
 </select>
 </div>
<div>
 <label class="block text-gray-400 mb-1">Additional Notes</label>
 <textarea class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-2 text-white focus:border-orange-500 focus:ring-orange-500" rows="3"></textarea>
 </div>
 </div>
 </div>
<div class="md:w-1/2">
 <h3 class="text-xl font-semibold mb-6 text-orange-400">Select Date & Time</h3>
<div class="bg-gray-700 p-4 rounded-lg border border-gray-600 mb-6">
 <!-- Calendar Header -->
 <div class="flex justify-between items-center mb-4">
 <button class="text-orange-400 hover:text-orange-300">
 <i class="fas fa-chevron-left"></i>
 </button>
 <h4 class="font-medium">June 2023</h4>
 <button class="text-orange-400 hover:text-orange-300">
 <i class="fas fa-chevron-right"></i>
 </button>
 </div>
<!-- Calendar Grid -->
 <div class="grid grid-cols-7 gap-1 text-center text-sm">
 <div class="text-orange-400 py-1 text-xs">Sun</div>
 <div class="text-orange-400 py-1 text-xs">Mon</div>
 <div class="text-orange-400 py-1 text-xs">Tue</div>
 <div class="text-orange-400 py-1 text-xs">Wed</div>
 <div class="text-orange-400 py-1 text-xs">Thu</div>
 <div class="text-orange-400 py-1 text-xs">Fri</div>
 <div class="text-orange-400 py-1 text-xs">Sat</div>
<!-- Calendar Days -->
 <div class="py-1 text-gray-500 text-sm">28</div>
 <div class="py-1 text-gray-500 text-sm">29</div>
 <div class="py-1 text-gray-500 text-sm">30</div>
 <div class="py-1 text-gray-500 text-sm">31</div>
 <div class="calendar-day py-1 text-sm">1</div>
 <div class="calendar-day py-1 text-sm">2</div>
 <div class="calendar-day py-1 text-sm">3</div>
<div class="calendar-day py-1 text-sm">4</div>
 <div class="calendar-day py-1 text-sm">5</div>
 <div class="calendar-day py-1 text-sm">6</div>
 <div class="calendar-day py-1 text-sm">7</div>
 <div class="calendar-day py-1 text-sm">8</div>
 <div class="calendar-day py-1 text-sm">9</div>
 <div class="calendar-day py-1 text-sm">10</div>
<div class="calendar-day py-1 text-sm">11</div>
 <div class="calendar-day py-1 text-sm">12</div>
 <div class="calendar-day py-1 text-sm">13</div>
 <div class="calendar-day py-1 text-sm">14</div>
 <div class="calendar-day py-1 text-sm">15</div>
 <div class="calendar-day selected py-1 text-sm">16</div>
 <div class="calendar-day py-1 text-sm">17</div>
<div class="calendar-day py-1 text-sm">18</div>
 <div class="calendar-day py-1 text-sm">19</div>
 <div class="calendar-day py-1 text-sm">20</div>
 <div class="calendar-day py-1 text-sm">21</div>
 <div class="calendar-day py-1 text-sm">22</div>
 <div class="calendar-day py-1 text-sm">23</div>
 <div class="calendar-day py-1 text-sm">24</div>
<div class="calendar-day py-1 text-sm">25</div>
 <div class="calendar-day py-1 text-sm">26</div>
 <div class="calendar-day py-1 text-sm">27</div>
 <div class="calendar-day py-1 text-sm">28</div>
 <div class="calendar-day py-1 text-sm">29</div>
 <div class="calendar-day py-1 text-sm">30</div>
 <div class="py-1 text-gray-500 text-sm">1</div>
 </div>
 </div>
<div>
 <label class="block text-gray-400 mb-1">Available Times</label>
 <div class="grid grid-cols-3 gap-2">
 <button class="time-slot bg-gray-700 hover:bg-orange-600 text-white py-2 rounded text-sm">9:00 AM</button>
 <button class="time-slot bg-gray-700 hover:bg-orange-600 text-white py-2 rounded text-sm">10:00 AM</button>
 <button class="time-slot bg-gray-700 hover:bg-orange-600 text-white py-2 rounded text-sm">11:00 AM</button>
 <button class="time-slot selected bg-orange-600 text-white py-2 rounded text-sm">1:00 PM</button>
 <button class="time-slot bg-gray-700 hover:bg-orange-600 text-white py-2 rounded text-sm">2:00 PM</button>
 <button class="time-slot bg-gray-700 hover:bg-orange-600 text-white py-2 rounded text-sm">3:00 PM</button>
 </div>
 </div>
<button class="w-full mt-6 bg-orange-600 hover:bg-orange-700 text-white py-3 rounded-lg font-medium transition duration-300">
 Confirm Booking
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Parts Catalog with Filters -->
 <section class="py-16 bg-gray-800">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Auto <span class="text-orange-500">Parts</span> Catalog</h2>
 <p class="text-xl text-gray-400 max-w-3xl mx-auto">
 Find genuine and aftermarket parts for your vehicle with our comprehensive catalog.
 </p>
 </div>
<div class="bg-gray-900 p-6 rounded-xl border border-gray-700 shadow-lg">
 <div class="flex flex-col md:flex-row gap-6 mb-8">
 <div class="md:w-1/4">
 <h3 class="text-lg font-semibold mb-4 text-orange-400">Filters</h3>
<div class="space-y-6">
 <div>
 <label class="block text-gray-400 mb-2">Brand</label>
 <div class="space-y-2">
 <div class="filter-option active">All Brands</div>
 <div class="filter-option">Ford</div>
 <div class="filter-option">Toyota</div>
 <div class="filter-option">Honda</div>
 <div class="filter-option">Chevrolet</div>
 <div class="filter-option">BMW</div>
 </div>
 </div>
<div>
 <label class="block text-gray-400 mb-2">Model</label>
 <select class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white focus:border-orange-500 focus:ring-orange-500">
 <option>All Models</option>
 <option>F-150</option>
 <option>Camry</option>
 <option>Civic</option>
 <option>Silverado</option>
 <option>3 Series</option>
 </select>
 </div>
<div>
 <label class="block text-gray-400 mb-2">Category</label>
 <div class="space-y-2">
 <div class="filter-option active">All Categories</div>
 <div class="filter-option">Engine</div>
 <div class="filter-option">Brakes</div>
 <div class="filter-option">Suspension</div>
 <div class="filter-option">Electrical</div>
 <div class="filter-option">Exhaust</div>
 </div>
 </div>
<button class="w-full bg-orange-600 hover:bg-orange-700 text-white py-2 rounded font-medium">
 Apply Filters
 </button>
 </div>
 </div>
<div class="md:w-3/4">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-lg font-semibold text-orange-400">Showing 24 parts</h3>
 <div class="flex items-center">
 <span class="text-gray-400 mr-2">Sort by:</span>
 <select class="bg-gray-800 border border-gray-700 rounded px-3 py-1 text-white text-sm focus:border-orange-500 focus:ring-orange-500">
 <option>Popularity</option>
 <option>Price: Low to High</option>
 <option>Price: High to Low</option>
 <option>Newest</option>
 </select>
 </div>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 <!-- Part Item 1 -->
 <div class="part-card bg-gray-800 p-4 rounded-lg">
 <div class="relative h-40 mb-3 bg-black rounded flex items-center justify-center">
 <i class="fas fa-cog text-orange-400 text-5xl"></i>
 <button class="absolute top-2 right-2 bg-orange-600 hover:bg-orange-700 text-white p-1 rounded-full">
 <i class="fas fa-arrows-rotate text-xs"></i>
 </button>
 </div>
 <h4 class="font-medium mb-1">Engine Control Module</h4>
 <p class="text-sm text-gray-400 mb-2">Ford F-150 2015-2020</p>
 <div class="flex justify-between items-center">
 <span class="font-bold text-orange-500">$249.99</span>
 <button class="text-orange-400 hover:text-orange-300">
 <i class="fas fa-cart-plus"></i>
 </button>
 </div>
 </div>
<!-- Part Item 2 -->
 <div class="part-card bg-gray-800 p-4 rounded-lg">
 <div class="relative h-40 mb-3 bg-black rounded flex items-center justify-center">
 <i class="fas fa-tire text-orange-400 text-5xl"></i>
 <button class="absolute top-2 right-2 bg-orange-600 hover:bg-orange-700 text-white p-1 rounded-full">
 <i class="fas fa-arrows-rotate text-xs"></i>
 </button>
 </div>
 <h4 class="font-medium mb-1">Brake Rotor</h4>
 <p class="text-sm text-gray-400 mb-2">Toyota Camry 2018-2023</p>
 <div class="flex justify-between items-center">
 <span class="font-bold text-orange-500">$89.99</span>
 <button class="text-orange-400 hover:text-orange-300">
 <i class="fas fa-cart-plus"></i>
 </button>
 </div>
 </div>
<!-- Part Item 3 -->
 <div class="part-card bg-gray-800 p-4 rounded-lg">
 <div class="relative h-40 mb-3 bg-black rounded flex items-center justify-center">
 <i class="fas fa-fan text-orange-400 text-5xl"></i>
 <button class="absolute top-2 right-2 bg-orange-600 hover:bg-orange-700 text-white p-1 rounded-full">
 <i class="fas fa-arrows-rotate text-xs"></i>
 </button>
 </div>
 <h4 class="font-medium mb-1">Radiator Assembly</h4>
 <p class="text-sm text-gray-400 mb-2">Honda Civic 2016-2021</p>
 <div class="flex justify-between items-center">
 <span class="font-bold text-orange-500">$179.99</span>
 <button class="text-orange-400 hover:text-orange-300">
 <i class="fas fa-cart-plus"></i>
 </button>
 </div>
 </div>
<!-- Part Item 4 -->
 <div class="part-card bg-gray-800 p-4 rounded-lg">
 <div class="relative h-40 mb-3 bg-black rounded flex items-center justify-center">
 <i class="fas fa-bolt text-orange-400 text-5xl"></i>
 <button class="absolute top-2 right-2 bg-orange-600 hover:bg-orange-700 text-white p-1 rounded-full">
 <i class="fas fa-arrows-rotate text-xs"></i>
 </button>
 </div>
 <h4 class="font-medium mb-1">Spark Plug Set</h4>
 <p class="text-sm text-gray-400 mb-2">Chevrolet Silverado 2014-2019</p>
 <div class="flex justify-between items-center">
 <span class="font-bold text-orange-500">$39.99</span>
 <button class="text-orange-400 hover:text-orange-300">
 <i class="fas fa-cart-plus"></i>
 </button>
 </div>
 </div>
<!-- Part Item 5 -->
 <div class="part-card bg-gray-800 p-4 rounded-lg">
 <div class="relative h-40 mb-3 bg-black rounded flex items-center justify-center">
 <i class="fas fa-oil-can text-orange-400 text-5xl"></i>
 <button class="absolute top-2 right-2 bg-orange-600 hover:bg-orange-700 text-white p-1 rounded-full">
 <i class="fas fa-arrows-rotate text-xs"></i>
 </button>
 </div>
 <h4 class="font-medium mb-1">Oil Filter</h4>
 <p class="text-sm text-gray-400 mb-2">BMW 3 Series 2017-2022</p>
 <div class="flex justify-between items-center">
 <span class="font-bold text-orange-500">$19.99</span>
 <button class="text-orange-400 hover:text-orange-300">
 <i class="fas fa-cart-plus"></i>
 </button>
 </div>
 </div>
<!-- Part Item 6 -->
 <div class="part-card bg-gray-800 p-4 rounded-lg">
 <div class="relative h-40 mb-3 bg-black rounded flex items-center justify-center">
 <i class="fas fa-lightbulb text-orange-400 text-5xl"></i>
 <button class="absolute top-2 right-2 bg-orange-600 hover:bg-orange-700 text-white p-1 rounded-full">
 <i class="fas fa-arrows-rotate text-xs"></i>
 </button>
 </div>
 <h4 class="font-medium mb-1">Headlight Assembly</h4>
 <p class="text-sm text-gray-400 mb-2">Ford Mustang 2015-2023</p>
 <div class="flex justify-between items-center">
 <span class="font-bold text-orange-500">$129.99</span>
 <button class="text-orange-400 hover:text-orange-300">
 <i class="fas fa-cart-plus"></i>
 </button>
 </div>
 </div>
 </div>
<div class="mt-8 flex justify-center">
 <button class="bg-orange-600 hover:bg-orange-700 text-white px-6 py-2 rounded-lg font-medium">
 Load More Parts
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Interactive Parts Configurator -->
 <section class="py-16 bg-gray-900">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Parts <span class="text-orange-500">Configurator</span></h2>
 <p class="text-xl text-gray-400 max-w-3xl mx-auto">
 Build your perfect engine with our interactive parts configurator.
 </p>
 </div>
<div class="bg-gray-800 p-8 rounded-xl border border-gray-700 shadow-lg">
 <div class="flex flex-col lg:flex-row gap-8">
 <div class="lg:w-1/2">
 <div class="bg-black p-6 rounded-lg border border-gray-700 h-full">
 <h3 class="text-xl font-semibold mb-6 text-orange-400">Build Your Engine</h3>
<div class="relative h-96">
 <!-- Engine SVG with interactive parts -->
 <svg id="engineSvg" width="100%" height="100%" viewBox="0 0 400 300" class="part-glow">
 <!-- Engine block (base) -->
 <rect id="engineBlock" x="100" y="100" width="200" height="120" rx="10" fill="#333" stroke="#555" stroke-width="2" class="part-highlight" data-part="engine-block" onclick="selectPart('engine-block')" />
<!-- Cylinder heads -->
 <rect id="leftCylinder" x="120" y="120" width="60" height="80" fill="#444" stroke="#666" stroke-width="2" class="part-highlight" data-part="left-cylinder" onclick="selectPart('left-cylinder')" />
 <rect id="rightCylinder" x="220" y="120" width="60" height="80" fill="#444" stroke="#666" stroke-width="2" class="part-highlight" data-part="right-cylinder" onclick="selectPart('right-cylinder')" />
<!-- Crankshaft -->
 <circle id="crankshaft" cx="200" cy="220" r="20" fill="#555" stroke="#777" stroke-width="2" class="part-highlight" data-part="crankshaft" onclick="selectPart('crankshaft')" />
<!-- Intake manifold -->
 <path id="intakeManifold" d="M100,100 L50,70 L70,50 L120,80 Z" fill="#3b82f6" stroke="#1d4ed8" stroke-width="2" class="part-highlight" data-part="intake-manifold" onclick="selectPart('intake-manifold')" />
<!-- Exhaust manifold -->
 <path id="exhaustManifold" d="M300,100 L350,70 L330,50 L280,80 Z" fill="#ef4444" stroke="#b91c1c" stroke-width="2" class="part-highlight" data-part="exhaust-manifold" onclick="selectPart('exhaust-manifold')" />
<!-- Selected part highlight (initially hidden) -->
 <rect id="partHighlight" x="0" y="0" width="0" height="0" stroke="#f97316" stroke-width="3" stroke-dasharray="5,3" fill="none" style="display: none;" />
 </svg>
<!-- Part controls -->
 <div id="partControls" class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 p-3" style="display: none;">
 <h4 class="font-medium text-orange-400 mb-2" id="selectedPartName">Engine Block</h4>
 <div class="flex justify-between items-center">
 <div>
 <span class="text-gray-300 mr-2">Color:</span>
 <select id="partColor" class="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-sm" onchange="changePartColor()">
 <option value="#333">Default</option>
 <option value="#3b82f6">Blue</option>
 <option value="#ef4444">Red</option>
 <option value="#10b981">Green</option>
 <option value="#f59e0b">Orange</option>
 </select>
 </div>
 <button onclick="explodePart()" class="bg-orange-600 hover:bg-orange-700 text-white px-3 py-1 rounded text-sm">
 <i class="fas fa-expand mr-1"></i> Explode View
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="lg:w-1/2">
 <div class="bg-gray-900 p-6 rounded-lg border border-gray-700 h-full">
 <h3 class="text-xl font-semibold mb-6 text-orange-400">Configuration Options</h3>
<div class="space-y-6">
 <div>
 <h4 class="font-medium mb-3 text-orange-400">Engine Type</h4>
 <div class="grid grid-cols-2 gap-3">
 <button class="bg-gray-800 hover:bg-orange-600 text-white py-2 px-3 rounded border border-gray-700 text-sm text-left">
 <i class="fas fa-gas-pump mr-2"></i> Gasoline
 </button>
 <button class="bg-gray-800 hover:bg-orange-600 text-white py-2 px-3 rounded border border-gray-700 text-sm text-left">
 <i class="fas fa-oil-can mr-2"></i> Diesel
 </button>
 <button class="bg-gray-800 hover:bg-orange-600 text-white py-2 px-3 rounded border border-gray-700 text-sm text-left">
 <i class="fas fa-bolt mr-2"></i> Electric
 </button>
 <button class="bg-gray-800 hover:bg-orange-600 text-white py-2 px-3 rounded border border-gray-700 text-sm text-left">
 <i class="fas fa-random mr-2"></i> Hybrid
 </button>
 </div>
 </div>
<div>
 <h4 class="font-medium mb-3 text-orange-400">Performance Parts</h4>
 <div class="space-y-2">
 <div class="flex items-center justify-between bg-gray-800 p-3 rounded border border-gray-700">
 <div>
 <div class="font-medium">High-Flow Air Filter</div>
 <div class="text-sm text-gray-400">+15 HP</div>
 </div>
 <button class="bg-orange-600 hover:bg-orange-700 text-white px-3 py-1 rounded text-sm">
 Add ($49.99)
 </button>
 </div>
 <div class="flex items-center justify-between bg-gray-800 p-3 rounded border border-gray-700">
 <div>
 <div class="font-medium">Performance Exhaust</div>
 <div class="text-sm text-gray-400">+25 HP</div>
 </div>
 <button class="bg-orange-600 hover:bg-orange-700 text-white px-3 py-1 rounded text-sm">
 Add ($199.99)
 </button>
 </div>
 <div class="flex items-center justify-between bg-gray-800 p-3 rounded border border-gray-700">
 <div>
 <div class="font-medium">Turbocharger Kit</div>
 <div class="text-sm text-gray-400">+100 HP</div>
 </div>
 <button class="bg-orange-600 hover:bg-orange-700 text-white px-3 py-1 rounded text-sm">
 Add ($1,299.99)
 </button>
 </div>
 </div>
 </div>
<div class="border-t border-gray-700 pt-4">
 <h4 class="font-medium mb-3 text-orange-400">Current Configuration</h4>
 <div class="bg-gray-800 p-4 rounded border border-gray-700">
 <div class="flex justify-between mb-2">
 <span class="text-gray-400">Base Engine:</span>
 <span class="font-medium">2.0L Turbo</span>
 </div>
 <div class="flex justify-between mb-2">
 <span class="text-gray-400">Selected Parts:</span>
 <span class="font-medium">3</span>
 </div>
 <div class="flex justify-between mb-2">
 <span class="text-gray-400">Total HP:</span>
 <span class="font-medium text-orange-400">315 HP</span>
 </div>
 <div class="flex justify-between text-lg font-bold mt-3 pt-3 border-t border-gray-700">
 <span>Total Price:</span>
 <span class="text-orange-400">$1,598.97</span>
 </div>
 </div>
 </div>
<button class="w-full bg-orange-600 hover:bg-orange-700 text-white py-3 rounded-lg font-medium">
 Add to Cart
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Testimonials -->
 <section class="py-16 bg-gray-800">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold mb-4">Customer <span class="text-orange-500">Testimonials</span></h2>
 <p class="text-xl text-gray-400 max-w-3xl mx-auto">
 Hear what our satisfied customers have to say about our services.
 </p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-gray-900 p-6 rounded-xl border border-gray-700">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold mr-4">JD</div>
 <div>
 <h4 class="font-bold">John D.</h4>
 <div class="flex text-orange-400">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 </div>
 </div>
 <p class="text-gray-400">
 "Precision Auto fixed my transmission when no one else could. Their diagnostic tools identified the exact issue quickly, saving me time and money. Highly recommend their services!"
 </p>
 </div>
<div class="bg-gray-900 p-6 rounded-xl border border-gray-700">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold mr-4">SM</div>
 <div>
 <h4 class="font-bold">Sarah M.</h4>
 <div class="flex text-orange-400">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 </div>
 </div>
 <p class="text-gray-400">
 "The before/after photos of my brake repair were impressive. The team was professional and kept me updated throughout the process. Will definitely return for future services."
 </p>
 </div>
<div class="bg-gray-900 p-6 rounded-xl border border-gray-700">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold mr-4">RT</div>
 <div>
 <h4 class="font-bold">Robert T.</h4>
 <div class="flex text-orange-400">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star-half-alt"></i>
 </div>
 </div>
 </div>
 <p class="text-gray-400">
 "Found the exact OEM part I needed through their parts catalog. The interactive configurator helped me visualize the installation. Fast shipping and great customer service."
 </p>
 </div>
 </div>
 </div>
 </section>
<!-- Call to Action -->
 <section class="py-16 bg-orange-600">
 <div class="container mx-auto px-4 text-center">
 <h2 class="text-3xl font-bold mb-6 text-white">Ready to Experience <span class="text-black">Precision Auto</span>?</h2>
 <p class="text-xl text-white mb-8 max-w-3xl mx-auto">
 Schedule your service today and experience the difference of professional auto care.
 </p>
 <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
 <a href="#" class="bg-black hover:bg-gray-900 text-white px-8 py-3 rounded-lg font-medium">
 Book Appointment
 </a>
 <a href="#" class="bg-white hover:bg-gray-100 text-orange-600 px-8 py-3 rounded-lg font-medium">
 Call Now
 </a>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-black text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <div class="flex items-center mb-4">
 <div class="mr-2 text-orange-500">
 <i class="fas fa-car text-2xl"></i>
 </div>
 <div class="text-2xl font-bold">
 <span class="text-white">Precision</span>
 <span class="text-orange-500">Auto</span>
 </div>
 </div>
 <p class="text-gray-400 mb-4">
 Professional auto repair and parts services with a commitment to excellence and customer satisfaction.
 </p>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-orange-400 transition"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="text-gray-400 hover:text-orange-400 transition"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-orange-400 transition"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-gray-400 hover:text-orange-400 transition"><i class="fab fa-youtube"></i></a>
 </div>
 </div>
 <div>
 <h4 class="font-bold mb-4 text-orange-400">Quick Links</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Parts Catalog</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Repair Status</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Book Appointment</a></li>
 </ul>
 </div>
 <div>
 <h4 class="font-bold mb-4 text-orange-400">Services</h4>
 <ul class="space-y-2 text-gray-400">
 <li><a href="#" class="hover:text-white transition">General Repair</a></li>
 <li><a href="#" class="hover:text-white transition">Preventive Maintenance</a></li>
 <li><a href="#" class="hover:text-white transition">Electrical Systems</a></li>
 <li><a href="#" class="hover:text-white transition">Tire Services</a></li>
 <li><a href="#" class="hover:text-white transition">Diagnostics</a></li>
 </ul>
 </div>
 <div>
 <h4 class="font-bold mb-4 text-orange-400">Contact Us</h4>
 <ul class="space-y-2 text-gray-400">
 <li class="flex items-center">
 <i class="fas fa-map-marker-alt mr-2 text-orange-400"></i>
 123 Mechanic St, Auto City
 </li>
 <li class="flex items-center">
 <i class="fas fa-phone mr-2 text-orange-400"></i>
 (555) 123-4567
 </li>
 <li class="flex items-center">
 <i class="fas fa-envelope mr-2 text-orange-400"></i>
 info@precisionauto.com
 </li>
 <li class="flex items-center">
 <i class="fas fa-clock mr-2 text-orange-400"></i>
 Mon-Fri: 8AM-6PM
 </li>
 </ul>
 </div>
 </div>
 <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
 <p>&copy; 2023 Precision Auto. All rights reserved.</p>
 </div>
 </div>
 </footer>
<script>
 // Theme switcher
 function changeTheme(theme) {
 document.body.classList.remove('bg-gray-900', 'bg-orange-50', 'carbon-fiber');
 document.body.classList.remove('text-gray-100', 'text-gray-900', 'text-orange-400');
switch(theme) {
 case 'orange':
 document.body.classList.add('bg-orange-50', 'text-gray-900');
 break;
 case 'carbon':
 document.body.classList.add('carbon-fiber', 'text-orange-400');
 break;
 default: // dark
 document.body.classList.add('bg-gray-900', 'text-gray-100');
 }
 }
 // Diagnostic Simulator Functions
 function runDiagnostics() {
 const output = document.getElementById('diagnosticOutput');
 output.innerHTML = '<p class="text-orange-400">> Starting diagnostic scan...</p>';
setTimeout(() => {
 output.innerHTML += '<p class="text-orange-400">> Connecting to vehicle ECU...</p>';
 document.getElementById('ecuStatus').textContent = 'Connected';
 }, 800);
setTimeout(() => {
 output.innerHTML += '<p class="text-orange-400">> Reading error codes...</p>';
 document.getElementById('errorCodes').textContent = '2';
 }, 1600);
setTimeout(() => {
 output.innerHTML += '<p class="text-orange-400">> Checking battery voltage...</p>';
 document.getElementById('batteryVoltage').textContent = '12.4V';
 }, 2400);
setTimeout(() => {
 output.innerHTML += '<p class="text-orange-400">> Testing O2 sensor...</p>';
 document.getElementById('o2Sensor').textContent = 'Faulty';
 }, 3200);
setTimeout(() => {
 output.innerHTML += '<p class="text-green-400">> Diagnostics complete. 2 issues found.</p>';
// Show smoke effect on engine
 const smoke = document.getElementById('engineSmoke');
 smoke.style.display = 'block';
 smoke.setAttribute('r', '15');
 }, 4000);
 }
function inspectPoint(pointId) {
 const infoDiv = document.getElementById('inspectionInfo');
 const partName = document.getElementById('inspectedPartName');
 const partStatus = document.getElementById('inspectedPartStatus');
// Highlight the selected point
 document.querySelectorAll('.inspection-point').forEach(point => {
 point.style.stroke = '#f97316';
 point.style.strokeDasharray = '5,3';
 });
const selectedPoint = document.querySelector(`[data-point="${pointId}"]`);
 if (selectedPoint) {
 selectedPoint.style.stroke = '#10b981';
 selectedPoint.style.strokeDasharray = '0';
// Show info
 infoDiv.style.display = 'block';
switch(pointId) {
 case 'front-brake':
 partName.textContent = 'Front Brakes';
 partStatus.text
</html>