| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FixIT-On-Demand - Mobile App UI</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> |
| |
| .progress-bar { |
| height: 8px; |
| border-radius: 4px; |
| background-color: #e5e7eb; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| border-radius: 4px; |
| background-color: #3b82f6; |
| width: 25%; |
| transition: width 0.3s ease; |
| } |
| |
| .skill-badge { |
| display: inline-block; |
| padding: 2px 8px; |
| border-radius: 12px; |
| font-size: 12px; |
| margin-right: 6px; |
| margin-bottom: 6px; |
| } |
| |
| .problem-card { |
| transition: all 0.2s ease; |
| } |
| |
| .problem-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .slider-thumb::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| background: #3b82f6; |
| cursor: pointer; |
| } |
| |
| .map-container { |
| height: 200px; |
| background-color: #e5e7eb; |
| border-radius: 12px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .map-placeholder { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: #6b7280; |
| } |
| |
| .rating-star { |
| color: #e5e7eb; |
| } |
| |
| .rating-star.active { |
| color: #f59e0b; |
| } |
| |
| .chat-bubble { |
| max-width: 80%; |
| padding: 10px 14px; |
| border-radius: 18px; |
| margin-bottom: 8px; |
| } |
| |
| .chat-bubble.customer { |
| background-color: #3b82f6; |
| color: white; |
| align-self: flex-end; |
| } |
| |
| .chat-bubble.tech { |
| background-color: #e5e7eb; |
| color: #1f2937; |
| align-self: flex-start; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <div class="max-w-md mx-auto bg-white shadow-lg rounded-2xl overflow-hidden min-h-screen"> |
| |
| <header class="bg-blue-600 text-white p-4 flex items-center justify-between"> |
| <button class="text-white"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <h1 class="text-xl font-bold">FixIT-On-Demand</h1> |
| <button class="text-white"> |
| <i class="fas fa-user-circle"></i> |
| </button> |
| </header> |
| |
| |
| <main class="p-4"> |
| |
| <section id="onboarding" class="mb-8"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Get Started in Seconds</h2> |
| <div class="bg-blue-50 p-4 rounded-lg mb-4"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-user-plus text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">Quick Registration</h3> |
| <p class="text-sm text-gray-600">Sign up with phone or email in under 30 seconds</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-shield-alt text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">Verified Technicians</h3> |
| <p class="text-sm text-gray-600">All technicians are background-checked and certified</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <h3 class="font-medium mb-2">Sample Technician Profile</h3> |
| <div class="flex items-center mb-3"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Technician" class="w-12 h-12 rounded-full mr-3"> |
| <div> |
| <h4 class="font-medium">Alex Johnson</h4> |
| <div class="flex items-center"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| <span class="text-sm text-gray-600">4.8 (127 reviews)</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-3"> |
| <span class="skill-badge bg-blue-100 text-blue-800">Hardware Specialist</span> |
| <span class="skill-badge bg-green-100 text-green-800">Network Guru</span> |
| <span class="skill-badge bg-purple-100 text-purple-800">MacOS Expert</span> |
| </div> |
| |
| <p class="text-sm text-gray-600 mb-3">"Alex fixed my laptop in under an hour when no one else could figure out the problem. Highly recommended!"</p> |
| |
| <div class="flex justify-between items-center"> |
| <div class="text-sm"> |
| <span class="text-gray-600">Response time:</span> |
| <span class="font-medium">15 min avg</span> |
| </div> |
| <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm"> |
| View Profile |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="problem-definition" class="mb-8"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">What's the issue?</h2> |
| <div class="grid grid-cols-2 gap-3 mb-4"> |
| <div class="problem-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-center cursor-pointer hover:border-blue-200"> |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-laptop text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="font-medium text-sm">Slow PC</h3> |
| </div> |
| <div class="problem-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-center cursor-pointer hover:border-blue-200"> |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-exclamation-triangle text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="font-medium text-sm">Blue Screen</h3> |
| </div> |
| <div class="problem-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-center cursor-pointer hover:border-blue-200"> |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-download text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="font-medium text-sm">Software Install</h3> |
| </div> |
| <div class="problem-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 text-center cursor-pointer hover:border-blue-200"> |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
| <i class="fas fa-wifi text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="font-medium text-sm">Wi-Fi Setup</h3> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Or describe your issue</label> |
| <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" rows="2" placeholder="E.g. 'My printer won't connect to my new laptop'"></textarea> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <h3 class="font-medium mb-3">How urgent is your issue?</h3> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium">Standard</span> |
| <span class="text-sm font-medium">Urgent</span> |
| </div> |
| <input type="range" min="0" max="100" value="50" class="w-full slider-thumb"> |
| |
| <div class="mt-4 flex justify-between"> |
| <div> |
| <div class="text-sm text-gray-600">ETA</div> |
| <div class="font-medium">1-2 hours</div> |
| </div> |
| <div> |
| <div class="text-sm text-gray-600">Price</div> |
| <div class="font-medium">$49 base</div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="matching-pricing" class="mb-8"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Available Technicians</h2> |
| |
| <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-4 flex items-start"> |
| <i class="fas fa-exclamation-circle text-yellow-500 mt-1 mr-2"></i> |
| <div> |
| <h3 class="font-medium text-yellow-800">High Demand Notice</h3> |
| <p class="text-sm text-yellow-700">Due to high demand between 6-9 PM, prices are currently +25%</p> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4"> |
| <div class="flex items-center justify-between mb-3"> |
| <h3 class="font-medium">Best Match</h3> |
| <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full">Available Now</span> |
| </div> |
| |
| <div class="flex items-center mb-3"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Technician" class="w-12 h-12 rounded-full mr-3"> |
| <div class="flex-1"> |
| <h4 class="font-medium">Sarah Miller</h4> |
| <div class="flex items-center"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| <span class="text-sm text-gray-600">4.9 (86 reviews)</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="font-medium text-blue-600">$61</div> |
| <div class="text-sm text-gray-600">ETA: 45 min</div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between text-sm mb-3"> |
| <span class="text-gray-600">Distance: 1.2 miles</span> |
| <span class="text-gray-600">Specializes in: Laptops, Software</span> |
| </div> |
| |
| <div class="progress-bar"> |
| <div class="progress-fill"></div> |
| </div> |
| <div class="text-xs text-gray-500 mt-1">Matching score: 98%</div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <div class="flex items-center justify-between mb-3"> |
| <h3 class="font-medium">Other Options</h3> |
| <span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded-full">2 Available</span> |
| </div> |
| |
| <div class="flex items-center mb-3"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Technician" class="w-10 h-10 rounded-full mr-3"> |
| <div class="flex-1"> |
| <h4 class="font-medium">James Wilson</h4> |
| <div class="flex items-center"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star-half-alt text-yellow-400"></i> |
| </div> |
| <span class="text-sm text-gray-600">4.7 (203 reviews)</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="font-medium text-blue-600">$55</div> |
| <div class="text-sm text-gray-600">ETA: 1h 15m</div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Technician" class="w-10 h-10 rounded-full mr-3"> |
| <div class="flex-1"> |
| <h4 class="font-medium">Michael Brown</h4> |
| <div class="flex items-center"> |
| <div class="flex mr-2"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| <span class="text-sm text-gray-600">4.8 (156 reviews)</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="font-medium text-blue-600">$58</div> |
| <div class="text-sm text-gray-600">ETA: 1h 30m</div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="confirmation" class="mb-8"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Confirm Your Booking</h2> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4"> |
| <h3 class="font-medium mb-3">Service Summary</h3> |
| |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Service Type:</span> |
| <span class="font-medium">Laptop Repair - Slow Performance</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Technician:</span> |
| <span class="font-medium">Sarah Miller</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Urgency:</span> |
| <span class="font-medium">Standard</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Location:</span> |
| <span class="font-medium">123 Main St, Apt 4B</span> |
| </div> |
| |
| <div class="border-t border-gray-200 my-3"></div> |
| |
| <h3 class="font-medium mb-2">Price Breakdown</h3> |
| <div class="flex justify-between mb-1"> |
| <span class="text-gray-600">Base Fee</span> |
| <span>$49.00</span> |
| </div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-gray-600">Surge Pricing</span> |
| <span>$12.25</span> |
| </div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-gray-600">Estimated Time (1h)</span> |
| <span>$25.00</span> |
| </div> |
| <div class="border-t border-gray-200 my-2"></div> |
| <div class="flex justify-between font-medium"> |
| <span>Total</span> |
| <span>$86.25</span> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4"> |
| <h3 class="font-medium mb-3">Technician Location</h3> |
| <div class="map-container"> |
| <div class="map-placeholder"> |
| <div class="text-center"> |
| <i class="fas fa-map-marker-alt text-3xl mb-2"></i> |
| <p>Technician is 1.2 miles away</p> |
| <p class="text-sm">ETA: 45 minutes</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition"> |
| Confirm Booking ($86.25) |
| </button> |
| </section> |
| |
| |
| <section id="communication" class="mb-8"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">In-App Communication</h2> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Technician" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h3 class="font-medium">Sarah Miller</h3> |
| <div class="text-sm text-gray-600">En route - ETA 15 min</div> |
| </div> |
| </div> |
| <div class="flex"> |
| <button class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> |
| <i class="fas fa-phone"></i> |
| </button> |
| <button class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"> |
| <i class="fas fa-video"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex flex-col mb-4" style="height: 200px; overflow-y: auto;"> |
| <div class="chat-bubble customer"> |
| Hi Sarah, my laptop is the silver Dell on the kitchen table |
| </div> |
| <div class="chat-bubble tech"> |
| Got it! I'll be there in about 15 minutes. Is there a parking spot I should know about? |
| </div> |
| <div class="chat-bubble customer"> |
| Yes, there's visitor parking in front of building 3 |
| </div> |
| <div class="chat-bubble tech"> |
| Perfect, see you soon! |
| </div> |
| </div> |
| |
| <div class="flex"> |
| <input type="text" placeholder="Type a message..." class="flex-1 p-3 border border-gray-300 rounded-l-lg focus:ring-blue-500 focus:border-blue-500"> |
| <button class="bg-blue-600 text-white px-4 rounded-r-lg"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <h3 class="font-medium mb-3">Remote Diagnostics</h3> |
| <p class="text-sm text-gray-600 mb-4">Many issues can be diagnosed remotely to save time. Would you like to start a remote session now?</p> |
| |
| <div class="flex justify-between"> |
| <button class="flex-1 bg-blue-600 text-white py-2 rounded-lg mr-2 flex items-center justify-center"> |
| <i class="fas fa-video mr-2"></i> Start Video Call |
| </button> |
| <button class="flex-1 bg-gray-100 text-gray-800 py-2 rounded-lg flex items-center justify-center"> |
| <i class="fas fa-share-square mr-2"></i> Share Screen |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="job-tracking" class="mb-8"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Job Progress</h2> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4"> |
| <div class="flex justify-between mb-4"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-user-cog text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">Sarah Miller</h3> |
| <div class="text-sm text-gray-600">Hardware Specialist</div> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="text-sm text-gray-600">Time spent</div> |
| <div class="font-medium">45 min</div> |
| </div> |
| </div> |
| |
| <div class="space-y-4 mb-4"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 mt-1"> |
| <i class="fas fa-check text-green-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Technician En Route</h4> |
| <p class="text-sm text-gray-600">Arrived at 3:15 PM</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 mt-1"> |
| <i class="fas fa-check text-green-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">On-Site Inspection</h4> |
| <p class="text-sm text-gray-600">Diagnosed slow HDD</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1"> |
| <i class="fas fa-cog text-blue-600 animate-spin"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Repair in Progress</h4> |
| <p class="text-sm text-gray-600">Replacing with SSD</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center mr-3 mt-1"> |
| <i class="fas fa-ellipsis-h text-gray-400"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-400">Job Completed</h4> |
| </div> |
| </div> |
| </div> |
| |
| <div class="progress-bar"> |
| <div class="progress-fill" style="width: 75%;"></div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <h3 class="font-medium mb-3">Digital Receipt Preview</h3> |
| |
| <div class="border border-gray-200 rounded-lg p-3 mb-3"> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Service:</span> |
| <span>Dell Inspiron SSD Upgrade</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Parts:</span> |
| <span>500GB Samsung SSD</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Labor:</span> |
| <span>45 minutes</span> |
| </div> |
| <div class="border-t border-gray-200 my-2"></div> |
| <div class="flex justify-between font-medium"> |
| <span>Total:</span> |
| <span>$149.99</span> |
| </div> |
| </div> |
| |
| <button class="w-full bg-gray-100 text-gray-800 py-2 rounded-lg font-medium hover:bg-gray-200 transition"> |
| View Full Receipt |
| </button> |
| </div> |
| </section> |
| |
| |
| <section id="payment-feedback"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Payment & Feedback</h2> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-4"> |
| <h3 class="font-medium mb-3">Payment Method</h3> |
| |
| <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg mb-3"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fab fa-cc-visa text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">Visa •••• 4242</h4> |
| <p class="text-sm text-gray-600">Expires 05/25</p> |
| </div> |
| </div> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| |
| <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg mb-3"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3"> |
| <i class="fab fa-paypal text-blue-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium">PayPal</h4> |
| <p class="text-sm text-gray-600">user@example.com</p> |
| </div> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| |
| <button class="w-full bg-gray-100 text-gray-800 py-2 rounded-lg font-medium hover:bg-gray-200 transition"> |
| <i class="fas fa-plus mr-2"></i> Add Payment Method |
| </button> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <h3 class="font-medium mb-3">Rate Your Experience</h3> |
| <p class="text-sm text-gray-600 mb-4">How would you rate Sarah's service?</p> |
| |
| <div class="flex justify-center mb-4"> |
| <div class="rating-star text-3xl mr-2 active">★</div> |
| <div class="rating-star text-3xl mr-2 active">★</div> |
| <div class="rating-star text-3xl mr-2 active">★</div> |
| <div class="rating-star text-3xl mr-2 active">★</div> |
| <div class="rating-star text-3xl">★</div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Leave a comment (optional)</label> |
| <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" rows="3" placeholder="What did you like about the service?"></textarea> |
| </div> |
| |
| <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition"> |
| Submit Review & Pay $149.99 |
| </button> |
| </div> |
| </section> |
| </main> |
| |
| |
| <nav class="bg-white border-t border-gray-200 fixed bottom-0 w-full max-w-md"> |
| <div class="flex justify-around"> |
| <a href="#" class="flex flex-col items-center py-2 px-4 text-blue-600"> |
| <i class="fas fa-home"></i> |
| <span class="text-xs mt-1">Home</span> |
| </a> |
| <a href="#" class="flex flex-col items-center py-2 px-4 text-gray-500"> |
| <i class="fas fa-search"></i> |
| <span class="text-xs mt-1">Search</span> |
| </a> |
| <a href="#" class="flex flex-col items-center py-2 px-4 text-gray-500"> |
| <i class="fas fa-calendar-alt"></i> |
| <span class="text-xs mt-1">Bookings</span> |
| </a> |
| <a href="#" class="flex flex-col items-center py-2 px-4 text-gray-500"> |
| <i class="fas fa-user"></i> |
| <span class="text-xs mt-1">Profile</span> |
| </a> |
| </div> |
| </nav> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const stars = document.querySelectorAll('.rating-star'); |
| stars.forEach((star, index) => { |
| star.addEventListener('click', () => { |
| stars.forEach((s, i) => { |
| if (i <= index) { |
| s.classList.add('active'); |
| } else { |
| s.classList.remove('active'); |
| } |
| }); |
| }); |
| }); |
| |
| |
| const problemCards = document.querySelectorAll('.problem-card'); |
| problemCards.forEach(card => { |
| card.addEventListener('click', () => { |
| problemCards.forEach(c => c.classList.remove('border-blue-500', 'bg-blue-50')); |
| card.classList.add('border-blue-500', 'bg-blue-50'); |
| }); |
| }); |
| |
| |
| const slider = document.querySelector('input[type="range"]'); |
| if (slider) { |
| slider.addEventListener('input', function() { |
| const value = this.value; |
| const urgent = value > 50; |
| |
| |
| const etaElement = document.querySelector('#problem-definition .font-medium:first-child'); |
| const priceElement = document.querySelector('#problem-definition .font-medium:last-child'); |
| |
| if (urgent) { |
| if (etaElement) etaElement.textContent = '30-45 min'; |
| if (priceElement) priceElement.textContent = '$69 base'; |
| } else { |
| if (etaElement) etaElement.textContent = '1-2 hours'; |
| if (priceElement) priceElement.textContent = '$49 base'; |
| } |
| }); |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/fixit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
