Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Request Help - RoadResQ</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .service-card { | |
| transition: all 0.2s ease; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .service-card.selected { | |
| border: 2px solid #2563eb; | |
| background-color: #eff6ff; | |
| } | |
| .btn-primary { | |
| background-color: #2563eb; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #1d4ed8; | |
| transform: translateY(-1px); | |
| } | |
| .btn-emergency { | |
| background-color: #dc2626; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-emergency:hover { | |
| background-color: #b91c1c; | |
| transform: translateY(-1px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="tool" class="h-8 w-8 text-blue-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">RoadResQ</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-100">Home</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-900 hover:bg-gray-100">Request Help</a> | |
| <a href="customer-login.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-100">Sign In</a> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"> | |
| <i data-feather="menu" class="block h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main> | |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> | |
| <div class="px-4 py-6 sm:px-0"> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 bg-blue-50 border-b border-blue-100"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Request Roadside Assistance | |
| </h3> | |
| <p class="mt-1 max-w-2xl text-sm text-gray-500"> | |
| Select your issue type and location to get help quickly. | |
| </p> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="space-y-8 divide-y divide-gray-200"> | |
| <div> | |
| <div> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">1. Select Service Type</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| What type of assistance do you need? | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Flat Tire --> | |
| <div class="service-card relative bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex flex-col cursor-pointer"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mx-auto"> | |
| <i data-feather="alert-circle" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="mt-4 text-sm font-medium text-gray-900 text-center">Flat Tire</h3> | |
| <p class="mt-1 text-xs text-gray-500 text-center"> | |
| Tire change or temporary repair | |
| </p> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blue-600 bg-blue-100">Starting at ₹499</span> | |
| </div> | |
| </div> | |
| <!-- Battery Jumpstart --> | |
| <div class="service-card relative bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex flex-col cursor-pointer"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mx-auto"> | |
| <i data-feather="battery" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="mt-4 text-sm font-medium text-gray-900 text-center">Battery Jumpstart</h3> | |
| <p class="mt-1 text-xs text-gray-500 text-center"> | |
| Get your car started when battery dies | |
| </p> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blue-600 bg-blue-100">Starting at ₹399</span> | |
| </div> | |
| </div> | |
| <!-- Towing Service --> | |
| <div class="service-card relative bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex flex-col cursor-pointer"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mx-auto"> | |
| <i data-feather="truck" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="mt-4 text-sm font-medium text-gray-900 text-center">Towing Service</h3> | |
| <p class="mt-1 text-xs text-gray-500 text-center"> | |
| Transport your vehicle safely | |
| </p> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blue-600 bg-blue-100">Starting at ₹999</span> | |
| </div> | |
| </div> | |
| <!-- Engine Trouble --> | |
| <div class="service-card relative bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex flex-col cursor-pointer"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mx-auto"> | |
| <i data-feather="settings" class="h-6 w-6"></i> | |
| </div> | |
| <h3 class="mt-4 text-sm font-medium text-gray-900 text-center">Engine Trouble</h3> | |
| <p class="mt-1 text-xs text-gray-500 text-center"> | |
| Basic diagnostics and temporary fixes | |
| </p> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blue-600 bg-blue-100">Starting at ₹799</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8"> | |
| <div> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">2. Your Location</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Where do you need assistance? | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-4"> | |
| <label for="address" class="block text-sm font-medium text-gray-700"> | |
| Address | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="address" id="address" autocomplete="address" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="landmark" class="block text-sm font-medium text-gray-700"> | |
| Landmark (Optional) | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="landmark" id="landmark" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="city" class="block text-sm font-medium text-gray-700"> | |
| City | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="city" id="city" autocomplete="address-level2" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="state" class="block text-sm font-medium text-gray-700"> | |
| State | |
| </label> | |
| <div class="mt-1"> | |
| <select id="state" name="state" autocomplete="state" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| <option>Select State</option> | |
| <option>Delhi</option> | |
| <option>Maharashtra</option> | |
| <option>Karnataka</option> | |
| <option>Tamil Nadu</option> | |
| <option>Uttar Pradesh</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="pincode" class="block text-sm font-medium text-gray-700"> | |
| ZIP / Postal code | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="pincode" id="pincode" autocomplete="postal-code" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="country" class="block text-sm font-medium text-gray-700"> | |
| Country | |
| </label> | |
| <div class="mt-1"> | |
| <select id="country" name="country" autocomplete="country" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| <option>India</option> | |
| <option>United States</option> | |
| <option>Canada</option> | |
| <option>Mexico</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="relative inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i data-feather="map-pin" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| Use Current Location | |
| </button> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-500"> | |
| Allow location access for faster service. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8"> | |
| <div> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">3. Vehicle Details</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Information about your vehicle. | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-3"> | |
| <label for="vehicle-make" class="block text-sm font-medium text-gray-700"> | |
| Make | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="vehicle-make" id="vehicle-make" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="vehicle-model" class="block text-sm font-medium text-gray-700"> | |
| Model | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="vehicle-model" id="vehicle-model" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="vehicle-year" class="block text-sm font-medium text-gray-700"> | |
| Year | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="vehicle-year" id="vehicle-year" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="vehicle-color" class="block text-sm font-medium text-gray-700"> | |
| Color | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="vehicle-color" id="vehicle-color" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="vehicle-plate" class="block text-sm font-medium text-gray-700"> | |
| License Plate | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="vehicle-plate" id="vehicle-plate" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label for="additional-notes" class="block text-sm font-medium text-gray-700"> | |
| Additional Notes | |
| </label> | |
| <div class="mt-1"> | |
| <textarea id="additional-notes" name="additional-notes" rows="3" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"></textarea> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-500"> | |
| Describe your issue in more detail if needed. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8"> | |
| <div> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">4. Contact Information</h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| How can we reach you? | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-3"> | |
| <label for="first-name" class="block text-sm font-medium text-gray-700"> | |
| First name | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="last-name" class="block text-sm font-medium text-gray-700"> | |
| Last name | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-4"> | |
| <label for="email" class="block text-sm font-medium text-gray-700"> | |
| Email address | |
| </label> | |
| <div class="mt-1"> | |
| <input type="email" name="email" id="email" autocomplete="email" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-4"> | |
| <label for="phone" class="block text-sm font-medium text-gray-700"> | |
| Phone number | |
| </label> | |
| <div class="mt-1"> | |
| <input type="text" name="phone" id="phone" autocomplete="tel" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="terms" name="terms" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="terms" class="font-medium text-gray-700"> | |
| I agree to the <a href="#" class="text-blue-600 hover:text-blue-500">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-500">Privacy Policy</a> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-200 pt-5"> | |
| <div class="flex justify-between"> | |
| <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i data-feather="arrow-left" class="-ml-1 mr-2 h-5 w-5"></i> | |
| Back | |
| </button> | |
| <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white btn-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Continue to Payment | |
| <i data-feather="arrow-right" class="ml-2 -mr-1 h-5 w-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 mt-12"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="tool" class="h-8 w-8 text-blue-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">RoadResQ</span> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <p class="text-center text-base text-gray-500"> | |
| © 2023 RoadResQ. All rights reserved. | |
| </p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="facebook" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="twitter" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="instagram" class="h-6 w-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Service selection functionality | |
| document.querySelectorAll('.service-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| // Remove selected class from all cards | |
| document.querySelectorAll('.service-card').forEach(c => { | |
| c.classList.remove('selected'); | |
| }); | |
| // Add selected class to clicked card | |
| this.classList.add('selected'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |