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