| | <!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> |
