Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FixIT-On-Demand | Tech Support App</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e9ecef; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background-color: #4f46e5; | |
| transition: width 0.3s ease; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .tech-card { | |
| transition: all 0.3s ease; | |
| } | |
| .tech-card:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .map-container { | |
| height: 200px; | |
| background-color: #e5e7eb; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .ar-view { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .slide-up { | |
| animation: slideUp 0.5s ease forwards; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .badge-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="max-w-md mx-auto bg-gray-50"> | |
| <!-- App Header --> | |
| <header class="sticky top-0 z-10 bg-white shadow-sm"> | |
| <div class="flex items-center justify-between p-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-tools text-white text-lg"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-gray-800">FixIT-On-Demand</h1> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="text-gray-600"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </button> | |
| <button class="text-gray-600"> | |
| <i class="fas fa-user-circle text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main App Content --> | |
| <main class="pb-20"> | |
| <!-- Dashboard View --> | |
| <div id="dashboardView" class="px-4 py-6"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Hello, Alex!</h2> | |
| <p class="text-gray-600">What tech issue can we help you with today?</p> | |
| </div> | |
| <!-- Quick Services --> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Popular Services</h3> | |
| <button class="text-indigo-600 text-sm font-medium">See all</button> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="service-card bg-white rounded-xl p-4 shadow-sm border border-gray-100 cursor-pointer transition-all duration-300" onclick="showServiceSelection()"> | |
| <div class="w-12 h-12 rounded-lg bg-indigo-50 flex items-center justify-center mb-3"> | |
| <i class="fas fa-laptop-code text-indigo-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800 mb-1">PC Repair</h4> | |
| <p class="text-xs text-gray-500">Slow performance, crashes</p> | |
| </div> | |
| <div class="service-card bg-white rounded-xl p-4 shadow-sm border border-gray-100 cursor-pointer transition-all duration-300" onclick="showServiceSelection()"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center mb-3"> | |
| <i class="fas fa-wifi text-blue-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800 mb-1">Wi-Fi Setup</h4> | |
| <p class="text-xs text-gray-500">Network configuration</p> | |
| </div> | |
| <div class="service-card bg-white rounded-xl p-4 shadow-sm border border-gray-100 cursor-pointer transition-all duration-300" onclick="showServiceSelection()"> | |
| <div class="w-12 h-12 rounded-lg bg-green-50 flex items-center justify-center mb-3"> | |
| <i class="fas fa-mobile-alt text-green-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800 mb-1">Phone Repair</h4> | |
| <p class="text-xs text-gray-500">Screen, battery issues</p> | |
| </div> | |
| <div class="service-card bg-white rounded-xl p-4 shadow-sm border border-gray-100 cursor-pointer transition-all duration-300" onclick="showServiceSelection()"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-50 flex items-center justify-center mb-3"> | |
| <i class="fas fa-database text-purple-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-medium text-gray-800 mb-1">Data Recovery</h4> | |
| <p class="text-xs text-gray-500">Lost files, backups</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Urgent Service Banner --> | |
| <div class="bg-gradient-to-r from-red-500 to-red-600 rounded-xl p-4 mb-6 text-white"> | |
| <div class="flex items-start"> | |
| <div class="mr-3"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-1">Need urgent help?</h3> | |
| <p class="text-sm opacity-90 mb-2">Our technicians are available 24/7 for emergency services</p> | |
| <button class="bg-white text-red-600 text-sm font-semibold px-4 py-1 rounded-full" onclick="showServiceSelection()"> | |
| Request Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Technicians --> | |
| <div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Trusted Technicians</h3> | |
| <button class="text-indigo-600 text-sm font-medium">See all</button> | |
| </div> | |
| <div class="flex space-x-4 overflow-x-auto pb-2"> | |
| <div class="tech-card bg-white rounded-xl p-4 shadow-sm border border-gray-100 flex-shrink-0 w-40" onclick="showTechProfile('1')"> | |
| <div class="relative mb-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Technician" class="w-12 h-12 rounded-full mx-auto"> | |
| <div class="absolute bottom-0 right-0 w-5 h-5 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <h4 class="font-medium text-gray-800 text-center mb-1">Michael S.</h4> | |
| <div class="flex justify-center items-center mb-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">4.9 (128)</span> | |
| </div> | |
| <div class="flex justify-center"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-0.5 rounded-full">PC Specialist</span> | |
| </div> | |
| </div> | |
| <div class="tech-card bg-white rounded-xl p-4 shadow-sm border border-gray-100 flex-shrink-0 w-40" onclick="showTechProfile('2')"> | |
| <div class="relative mb-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Technician" class="w-12 h-12 rounded-full mx-auto"> | |
| <div class="absolute bottom-0 right-0 w-5 h-5 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <h4 class="font-medium text-gray-800 text-center mb-1">Sarah L.</h4> | |
| <div class="flex justify-center items-center mb-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">4.8 (97)</span> | |
| </div> | |
| <div class="flex justify-center"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">Network Guru</span> | |
| </div> | |
| </div> | |
| <div class="tech-card bg-white rounded-xl p-4 shadow-sm border border-gray-100 flex-shrink-0 w-40" onclick="showTechProfile('3')"> | |
| <div class="relative mb-3"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Technician" class="w-12 h-12 rounded-full mx-auto"> | |
| <div class="absolute bottom-0 right-0 w-5 h-5 bg-yellow-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <h4 class="font-medium text-gray-800 text-center mb-1">David K.</h4> | |
| <div class="flex justify-center items-center mb-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">4.7 (86)</span> | |
| </div> | |
| <div class="flex justify-center"> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-0.5 rounded-full">Data Recovery</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service Selection View (Hidden by default) --> | |
| <div id="serviceSelectionView" class="hidden px-4 py-6 absolute top-0 left-0 w-full bg-white min-h-screen slide-up"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="hideServiceSelection()" class="mr-4 text-gray-600"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <h2 class="text-xl font-bold text-gray-800">Select Your Issue</h2> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search issues..." class="w-full bg-gray-100 rounded-lg pl-10 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-search absolute left-3 top-3.5 text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-3">Common PC Issues</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-gray-50 hover:bg-indigo-50 border border-gray-200 rounded-lg p-3 text-left transition-colors" onclick="showPrioritySelection('Slow Performance')"> | |
| <i class="fas fa-tachometer-alt text-indigo-600 mb-2"></i> | |
| <h4 class="font-medium text-gray-800">Slow Performance</h4> | |
| </button> | |
| <button class="bg-gray-50 hover:bg-indigo-50 border border-gray-200 rounded-lg p-3 text-left transition-colors" onclick="showPrioritySelection('Blue Screen')"> | |
| <i class="fas fa-exclamation-triangle text-red-600 mb-2"></i> | |
| <h4 class="font-medium text-gray-800">Blue Screen</h4> | |
| </button> | |
| <button class="bg-gray-50 hover:bg-indigo-50 border border-gray-200 rounded-lg p-3 text-left transition-colors" onclick="showPrioritySelection('Virus Removal')"> | |
| <i class="fas fa-bug text-green-600 mb-2"></i> | |
| <h4 class="font-medium text-gray-800">Virus Removal</h4> | |
| </button> | |
| <button class="bg-gray-50 hover:bg-indigo-50 border border-gray-200 rounded-lg p-3 text-left transition-colors" onclick="showPrioritySelection('Software Install')"> | |
| <i class="fas fa-download text-blue-600 mb-2"></i> | |
| <h4 class="font-medium text-gray-800">Software Install</h4> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-3">Other Categories</h3> | |
| <div class="space-y-3"> | |
| <button class="w-full bg-gray-50 hover:bg-indigo-50 border border-gray-200 rounded-lg p-4 text-left flex items-center justify-between transition-colors" onclick="showPrioritySelection('Wi-Fi Setup')"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mr-3"> | |
| <i class="fas fa-wifi text-blue-600"></i> | |
| </div> | |
| <span class="font-medium text-gray-800">Wi-Fi Setup</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </button> | |
| <button class="w-full bg-gray-50 hover:bg-indigo-50 border border-gray-200 rounded-lg p-4 text-left flex items-center justify-between transition-colors" onclick="showPrioritySelection('Phone Repair')"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center mr-3"> | |
| <i class="fas fa-mobile-alt text-green-600"></i> | |
| </div> | |
| <span class="font-medium text-gray-800">Phone Repair</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </button> | |
| <button class="w-full bg-gray-50 hover:bg-indigo-50 border border-gray-200 rounded-lg p-4 text-left flex items-center justify-between transition-colors" onclick="showPrioritySelection('Data Recovery')"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mr-3"> | |
| <i class="fas fa-database text-purple-600"></i> | |
| </div> | |
| <span class="font-medium text-gray-800">Data Recovery</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Priority Selection View (Hidden by default) --> | |
| <div id="prioritySelectionView" class="hidden px-4 py-6 absolute top-0 left-0 w-full bg-white min-h-screen slide-up"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="hidePrioritySelection()" class="mr-4 text-gray-600"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <h2 class="text-xl font-bold text-gray-800">Service Priority</h2> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-1" id="selectedServiceTitle">Slow Performance</h3> | |
| <p class="text-gray-600 mb-6">Select your preferred service level</p> | |
| <div class="bg-gray-50 rounded-xl p-4 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Standard Service</h4> | |
| <p class="text-sm text-gray-600">Next available technician</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" id="priorityToggle" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div> | |
| </label> | |
| </div> | |
| <div id="standardServiceDetails"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-600">Estimated arrival</span> | |
| <span class="font-medium">Within 2 hours</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600">Service fee</span> | |
| <span class="font-medium">$49 + $29/hour</span> | |
| </div> | |
| </div> | |
| <div id="urgentServiceDetails" class="hidden"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-600">Estimated arrival</span> | |
| <span class="font-medium">Within 45 minutes</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600">Service fee</span> | |
| <div class="flex items-center"> | |
| <span class="font-medium">$79 + $39/hour</span> | |
| <span class="ml-2 bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full">+25%</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-600"> | |
| <i class="fas fa-info-circle mr-1"></i> Higher rates apply during peak hours (6-9 PM) | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-800 mb-2">Additional Details</h4> | |
| <textarea class="w-full bg-gray-100 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="3" placeholder="Describe your issue in more detail..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-800 mb-2">Upload Photos (Optional)</h4> | |
| <div class="flex space-x-3"> | |
| <div class="w-16 h-16 rounded-lg bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </div> | |
| <div class="w-16 h-16 rounded-lg bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </div> | |
| <div class="w-16 h-16 rounded-lg bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition-colors" onclick="showTechnicianSelection()"> | |
| Find Available Technicians | |
| </button> | |
| </div> | |
| <!-- Technician Selection View (Hidden by default) --> | |
| <div id="technicianSelectionView" class="hidden px-4 py-6 absolute top-0 left-0 w-full bg-white min-h-screen slide-up"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="hideTechnicianSelection()" class="mr-4 text-gray-600"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <h2 class="text-xl font-bold text-gray-800">Available Technicians</h2> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex items-center bg-gray-100 rounded-lg px-3 py-2"> | |
| <i class="fas fa-map-marker-alt text-indigo-600 mr-2"></i> | |
| <span class="text-sm">Your location: 123 Main St, Apt 4B</span> | |
| <button class="ml-auto text-indigo-600 text-sm font-medium">Change</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium text-gray-800">3 technicians available</h3> | |
| <div class="flex items-center text-sm"> | |
| <i class="fas fa-filter text-gray-500 mr-1"></i> | |
| <span>Filter</span> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="tech-card bg-white rounded-xl p-4 shadow-md border border-gray-100 cursor-pointer" onclick="showConfirmation('1')"> | |
| <div class="flex items-start"> | |
| <div class="relative mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Technician" class="w-14 h-14 rounded-full"> | |
| <div class="absolute bottom-0 right-0 w-5 h-5 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <h4 class="font-medium text-gray-800">Michael S.</h4> | |
| <span class="text-sm font-medium text-indigo-600">$49 + $29/hr</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex items-center mr-3"> | |
| <i class="fas fa-star text-yellow-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">4.9 (128)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-orange-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">5 min response</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-1 mb-3"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-0.5 rounded-full">PC Specialist</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">Certified</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full">Top Rated</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-600"><i class="fas fa-clock mr-1"></i> ETA: 25-40 min</span> | |
| <button class="text-indigo-600 font-medium">View Profile</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tech-card bg-white rounded-xl p-4 shadow-md border border-gray-100 cursor-pointer" onclick="showConfirmation('2')"> | |
| <div class="flex items-start"> | |
| <div class="relative mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Technician" class="w-14 h-14 rounded-full"> | |
| <div class="absolute bottom-0 right-0 w-5 h-5 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <h4 class="font-medium text-gray-800">Sarah L.</h4> | |
| <span class="text-sm font-medium text-indigo-600">$49 + $29/hr</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex items-center mr-3"> | |
| <i class="fas fa-star text-yellow-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">4.8 (97)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-orange-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">7 min response</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-1 mb-3"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">Network Guru</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-0.5 rounded-full">Apple Certified</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-600"><i class="fas fa-clock mr-1"></i> ETA: 35-50 min</span> | |
| <button class="text-indigo-600 font-medium">View Profile</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tech-card bg-white rounded-xl p-4 shadow-md border border-gray-100 cursor-pointer" onclick="showConfirmation('3')"> | |
| <div class="flex items-start"> | |
| <div class="relative mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Technician" class="w-14 h-14 rounded-full"> | |
| <div class="absolute bottom-0 right-0 w-5 h-5 bg-yellow-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <h4 class="font-medium text-gray-800">David K.</h4> | |
| <span class="text-sm font-medium text-indigo-600">$49 + $29/hr</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex items-center mr-3"> | |
| <i class="fas fa-star text-yellow-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">4.7 (86)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-orange-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">10 min response</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-1 mb-3"> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-0.5 rounded-full">Data Recovery</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full">Windows Expert</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-600"><i class="fas fa-clock mr-1"></i> ETA: 45-60 min</span> | |
| <button class="text-indigo-600 font-medium">View Profile</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center text-sm text-gray-500 mb-4"> | |
| <i class="fas fa-shield-alt mr-1"></i> All technicians are background-checked and verified | |
| </div> | |
| </div> | |
| <!-- Confirmation View (Hidden by default) --> | |
| <div id="confirmationView" class="hidden px-4 py-6 absolute top-0 left-0 w-full bg-white min-h-screen slide-up"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="hideConfirmation()" class="mr-4 text-gray-600"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <h2 class="text-xl font-bold text-gray-800">Confirm Booking</h2> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="bg-gray-50 rounded-xl p-4 mb-4"> | |
| <div class="flex items-start mb-4"> | |
| <div class="relative mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Technician" class="w-14 h-14 rounded-full"> | |
| <div class="absolute bottom-0 right-0 w-5 h-5 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Michael S.</h4> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-star text-yellow-400 text-xs mr-1"></i> | |
| <span class="text-xs font-medium">4.9 (128 reviews)</span> | |
| </div> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-0.5 rounded-full">PC Specialist</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">Certified</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Service</span> | |
| <span class="font-medium">PC Slow Performance</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Service level</span> | |
| <span class="font-medium">Standard</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Estimated arrival</span> | |
| <span class="font-medium">25-40 minutes</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Location</span> | |
| <span class="font-medium">123 Main St, Apt 4B</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-4 mb-4"> | |
| <h4 class="font-medium text-gray-800 mb-3">Pricing Estimate</h4> | |
| <div class="space-y-2 mb-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Service call fee</span> | |
| <span class="font-medium">$49.00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Hourly rate (est. 1 hour)</span> | |
| <span class="font-medium">$29.00</span> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-200 pt-2"> | |
| <span class="text-gray-600">Taxes & fees</span> | |
| <span class="font-medium">$6.24</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between font-bold text-lg border-t border-gray-200 pt-3"> | |
| <span>Total estimate</span> | |
| <span>$84.24</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-2"> | |
| * Final amount may vary based on actual time spent | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-4"> | |
| <h4 class="font-medium text-gray-800 mb-3">Technician Location</h4> | |
| <div class="map-container mb-3"> | |
| <!-- Map placeholder --> | |
| <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-blue-200"> | |
| <div class="text-center"> | |
| <i class="fas fa-map-marked-alt text-blue-500 text-3xl mb-2"></i> | |
| <p class="text-blue-800 font-medium">Mapbox Integration</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-sm"> | |
| <i class="fas fa-car text-gray-500 mr-2"></i> | |
| <span class="text-gray-600">Approximately 3.2 miles away</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fixed bottom-4 left-0 right-0 px-4"> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition-colors flex items-center justify-center" onclick="showJobInProgress()"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| Confirm Booking | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Job In Progress View (Hidden by default) --> | |
| <div id="jobInProgressView" class="hidden px-4 py-6 absolute top-0 left-0 w-full bg-white min-h-screen slide-up"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="hideJobInProgress()" class="mr-4 text-gray-600"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <h2 class="text-xl font-bold text-gray-800">Service in Progress</h2> | |
| </div> | |
| <div class="text-center mb-8"> | |
| <div class="w-20 h-20 rounded-full bg-indigo-100 flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-user-cog text-indigo-600 text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-1">Michael S. is on the way</h3> | |
| <p class="text-gray-600">ETA: 12-17 minutes</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Service Progress</span> | |
| <span class="text-sm font-medium text-indigo-600">25%</span> | |
| </div> | |
| <div class="progress-bar mb-6"> | |
| <div class="progress-fill" style="width: 25%"></div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Request Confirmed</h4> | |
| <p class="text-sm text-gray-600">Your service request has been accepted</p> | |
| <p class="text-xs text-gray-500 mt-1">2:15 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Technician Assigned</h4> | |
| <p class="text-sm text-gray-600">Michael S. (PC Specialist) is your technician</p> | |
| <p class="text-xs text-gray-500 mt-1">2:18 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-car text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">En Route</h4> | |
| <p class="text-sm text-gray-600">Technician is on the way to your location</p> | |
| <p class="text-xs text-gray-500 mt-1">2:25 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start opacity-50"> | |
| <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">On-Site Inspection</h4> | |
| <p class="text-sm text-gray-600">Technician will assess the issue</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start opacity-50"> | |
| <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-tools text-gray-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Repair in Progress</h4> | |
| <p class="text-sm text-gray-600">Technician will fix the issue</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start opacity-50"> | |
| <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-check-circle text-gray-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-1">Job Completed</h4> | |
| <p class="text-sm text-gray-600">Service will be marked as complete</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fixed bottom-4 left-0 right-0 px-4"> | |
| <div class="bg-white p-4 rounded-xl shadow-lg border border-gray-100 mb-3"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Technician" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Michael S.</h4> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-xs mr-1"></i> | |
| <span class="text-xs">4.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600"> | |
| <i class="fas fa-comment"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="map-container"> | |
| <!-- Map placeholder --> | |
| <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-blue-200 relative"> | |
| <div class="absolute top-4 left-4 bg-white p-2 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-xs font-medium">12 min away</span> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <i class="fas fa-map-marked-alt text-blue-500 text-3xl mb-2"></i> | |
| <p class="text-blue-800 font-medium">Live Location Tracking</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition-colors mt-2 flex items-center justify-center" onclick="showRemoteOption()"> | |
| <i class="fas fa-video mr-2"></i> | |
| Start Remote Session | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Remote Option View (Hidden by default) --> | |
| <div id="remoteOptionView" class="hidden px-4 py-6 absolute top-0 left-0 w-full bg-white min-h-screen slide-up"> | |
| <div class="flex items-center mb-6"> | |
| <button onclick="hideRemoteOption()" class="mr-4 text-gray-600"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <h2 class="text-xl font-bold text-gray-800">Remote Assistance</h2> | |
| </div> | |
| <div class="text-center mb-8"> | |
| <div class="ar-view w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-video text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">AR-Powered Remote Help</h3> | |
| <p class="text-gray-600 max-w-md mx-auto">Many issues can be diagnosed and fixed remotely, saving time for both you and the technician.</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-4 mb-6"> | |
| <h4 class="font-medium text-gray-800 mb-3">How it works:</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 mt-0.5"> | |
| <span class="text-indigo-600 font-medium">1</span> | |
| </div> | |
| <div> | |
| <h5 class="font-medium text-gray-800 mb-1">Start Session</h5> | |
| <p class="text-sm text-gray-600">Initiate a secure video call with your technician</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 mt-0.5"> | |
| <span class="text-indigo-600 font-medium">2</span> | |
| </div> | |
| <div> | |
| <h5 class="font-medium text-gray-800 mb-1">Show the Issue</h5> | |
| <p class="text-sm text-gray-600">Use your camera to show error messages or hardware</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 mt-0.5"> | |
| <span class="text-indigo-600 font-medium">3</span> | |
| </div> | |
| <div> | |
| <h5 class="font-medium text-gray-800 mb-1">Follow Guidance</h5> | |
| <p class="text-sm text-gray-600">Technician will guide you through the solution</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h4 class="font-medium text-gray-800">Remote Service Benefits</h4> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="bg-white rounded-lg p-3 border border-gray-200"> | |
| <i class="fas fa-clock text-indigo-600 mb-2"></i> | |
| <p class="text-sm font-medium">Faster Resolution</p> | |
| </div> | |
| <div class="bg-white rounded-lg p-3 border border-gray-200"> | |
| <i class="fas fa-dollar-sign text-green-600 mb-2"></i> | |
| <p class="text-sm font-medium">Lower Cost</p> | |
| </div> | |
| <div class="bg-white rounded-lg p-3 border border-gray-200"> | |
| <i class="fas fa-shield-alt text-blue-600 mb-2"></i> | |
| <p class="text-sm font-medium">Secure Connection</p> | |
| </div> | |
| <div class="bg-white rounded-lg p-3 border border-gray-200"> | |
| <i class="fas fa-user-check text-purple-600 mb-2"></i> | |
| <p class="text-sm font-medium">No Contact Needed</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fixed bottom-4 left-0 right-0 px-4"> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition-colors mb-2" onclick="startRemoteSession()"> | |
| Start Remote Session Now | |
| </button> | |
| <button class="w-full bg-white hover:bg-gray-50 text-gray-800 font-medium py-3 px-4 rounded-lg transition-colors border border-gray-300" onclick="hideRemoteOption()"> | |
| Continue with On-Site Visit | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Payment & Feedback View (Hidden by default) --> | |
| <div id="paymentFeedbackView" class="hidden px-4 py-6 absolute top-0 left-0 w-full bg-white min-h-screen slide-up"> | |
| <div class="flex flex-col items-center justify-center h-full"> | |
| <div class="w-24 h-24 rounded-full bg-green-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-check-circle text-green-600 text-4xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Service Completed!</h2> | |
| <p class="text-gray-600 mb-8 max-w-md text-center">Thank you for choosing FixIT-On-Demand. Your technician has marked the service as complete.</p> | |
| <div class="w-full max-w-sm bg-gray-50 rounded-xl p-6 mb-8"> | |
| <h3 class="font-bold text-gray-800 mb-4 text-center">Service Summary</h3> | |
| <div class="flex items-center mb-4"> | |
| <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 text-gray-800">Michael S.</h4> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-xs mr-1"></i> | |
| <span class="text-xs">4.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Service</span> | |
| <span class="font-medium">PC Slow Performance</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Time spent</span> | |
| <span class="font-medium">1 hour 15 minutes</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Service call fee</span> | |
| <span class="font-medium">$49.00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Hourly rate (1.25 hours)</span> | |
| <span class="font-medium">$36.25</span> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-200 pt-2"> | |
| <span class="text-gray-600">Taxes & fees</span> | |
| <span class="font-medium">$7.85</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between font-bold text-lg border-t border-gray-200 pt-3"> | |
| <span>Total</span> | |
| <span>$93.10</span> | |
| </div> | |
| </div> | |
| <div class="w-full max-w-sm mb-8"> | |
| <h3 class="font-bold text-gray-800 mb-4 text-center">Rate Your Experience</h3> | |
| <div class="flex justify-center space-x-2 mb-4"> | |
| <i class="fas fa-star text-2xl text-gray-300 hover:text-yellow-400 cursor-pointer" onmouseover="hoverStar(1)" onclick="rateService(1)"></i> | |
| <i class="fas fa-star text-2xl text-gray-300 hover:text-yellow-400 cursor-pointer" onmouseover="hoverStar(2)" onclick="rateService(2)"></i> | |
| <i class="fas fa-star text-2xl text-gray-300 hover:text-yellow-400 cursor-pointer" onmouseover="hoverStar(3)" onclick="rateService(3)"></i> | |
| <i class="fas fa-star text-2xl text-gray-300 hover:text-yellow-400 cursor-pointer" onmouseover="hoverStar(4)" onclick="rateService(4)"></i> | |
| <i class="fas fa-star text-2xl text-gray-300 hover:text-yellow-400 cursor-pointer" onmouseover="hoverStar(5)" onclick="rateService(5)"></i> | |
| </div> | |
| <textarea class="w-full bg-gray-100 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-3" rows="3" placeholder="Optional: Tell us about your experience..."></textarea> | |
| </div> | |
| <div class="w-full max-w-sm fixed bottom-4 left-0 right-0 px-4"> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition-colors mb-2" onclick="processPayment()"> | |
| <i class="fas fa-credit-card mr-2"></i> | |
| Pay Now ($93.10) | |
| </button> | |
| <button class="w-full bg-white hover:bg-gray-50 text-gray-800 font-medium py-3 px-4 rounded-lg transition-colors border border-gray-300"> | |
| <i class="fas fa-file-invoice-dollar mr-2"></i> | |
| Request Invoice | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200"> | |
| <div class="flex justify-around items-center p-2"> | |
| <button class="flex flex-col items-center text-indigo-600 p-2"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <span class="text-xs">Home</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-500 hover:text-indigo-600 p-2"> | |
| <i class="fas fa-search text-xl mb-1"></i> | |
| <span class="text-xs">Search</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-500 hover:text-indigo-600 p-2"> | |
| <i class="fas fa-history text-xl mb-1"></i> | |
| <span class="text-xs">History</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-500 hover:text-indigo-600 p-2"> | |
| <i class="fas fa-user text-xl mb-1"></i> | |
| <span class="text-xs">Profile</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <script> | |
| // View navigation functions | |
| function showServiceSelection() { | |
| document.getElementById('dashboardView').classList.add('hidden'); | |
| document.getElementById('serviceSelectionView').classList.remove('hidden'); | |
| } | |
| function hideServiceSelection() { | |
| document.getElementById('serviceSelectionView').classList.add('hidden'); | |
| document.getElementById('dashboardView').classList.remove('hidden'); | |
| } | |
| function showPrioritySelection(service) { | |
| document.getElementById('selectedServiceTitle').textContent = service; | |
| document.getElementById('serviceSelectionView').classList.add('hidden'); | |
| document.getElementById('prioritySelectionView').classList.remove('hidden'); | |
| // Set up priority toggle | |
| const toggle = document.getElementById('priorityToggle'); | |
| toggle.addEventListener('change', function() { | |
| if(this.checked) { | |
| document.getElementById('standardServiceDetails').classList.remove('hidden'); | |
| document.getElementById('urgentServiceDetails').classList.add('hidden'); | |
| } else { | |
| document.getElementById('standardServiceDetails').classList.add('hidden'); | |
| document.getElementById('urgentServiceDetails').classList.remove('hidden'); | |
| } | |
| }); | |
| } | |
| function hidePrioritySelection() { | |
| document.getElementById('prioritySelectionView').classList.add('hidden'); | |
| document.getElementById('serviceSelectionView').classList.remove('hidden'); | |
| } | |
| function showTechnicianSelection() { | |
| document.getElementById('prioritySelectionView').classList.add('hidden'); | |
| document.getElementById('technicianSelectionView').classList.remove('hidden'); | |
| } | |
| function hideTechnicianSelection() { | |
| document.getElementById('technicianSelectionView').classList.add('hidden'); | |
| document.getElementById('prioritySelectionView').classList.remove('hidden'); | |
| } | |
| function showConfirmation(techId) { | |
| document.getElementById('technicianSelectionView').classList.add('hidden'); | |
| document.getElementById('confirmationView').classList.remove('hidden'); | |
| } | |
| function hideConfirmation() { | |
| document.getElementById('confirmationView').classList.add('hidden'); | |
| document.getElementById('technicianSelectionView').classList.remove('hidden'); | |
| } | |
| function showJobInProgress() { | |
| document.getElementById('confirmationView').classList.add('hidden'); | |
| document.getElementById('jobInProgressView').classList.remove('hidden'); | |
| } | |
| function hideJobInProgress() { | |
| document.getElementById('jobInProgressView').classList.add('hidden'); | |
| document.getElementById('dashboardView').classList.remove('hidden'); | |
| } | |
| function showRemoteOption() { | |
| document.getElementById('jobInProgressView').classList.add('hidden'); | |
| document.getElementById('remoteOptionView').classList.remove('hidden'); | |
| } | |
| function hideRemoteOption() { | |
| document.getElementById('remoteOptionView').classList.add('hidden'); | |
| document.getElementById('jobInProgressView').classList.remove('hidden'); | |
| } | |
| function startRemoteSession() { | |
| document.getElementById('remoteOptionView').classList.add('hidden'); | |
| // In a real app, this would start the remote session | |
| alert('Starting secure remote session with your technician...'); | |
| } | |
| function showPaymentFeedback() { | |
| document.getElementById('jobInProgressView').classList.add('hidden'); | |
| document.getElementById('paymentFeedbackView').classList.remove('hidden'); | |
| } | |
| // Rating functionality | |
| let currentRating = 0; | |
| function hoverStar(num) { | |
| const stars = document.querySelectorAll('.fa-star'); | |
| stars.forEach((star, index) => { | |
| if(index < num) { | |
| star.classList.add('text-yellow-400'); | |
| star.classList.remove('text-gray-300'); | |
| } else { | |
| star.classList.remove('text-yellow-400'); | |
| star.classList.add('text-gray-300'); | |
| } | |
| }); | |
| } | |
| function rateService(num) { | |
| currentRating = num; | |
| const stars = document.querySelectorAll('.fa-star'); | |
| stars.forEach((star, index) => { | |
| if(index < num) { | |
| star.classList.add('text-yellow-400'); | |
| star.classList.remove('text-gray-300'); | |
| } else { | |
| star.classList.remove('text-yellow-400'); | |
| star.classList.add('text-gray-300'); | |
| } | |
| }); | |
| } | |
| function processPayment() { | |
| alert('Payment processed successfully! Thank you for your feedback.'); | |
| document.getElementById('paymentFeedbackView').classList.add('hidden'); | |
| document.getElementById('dashboardView').classList.remove('hidden'); | |
| } | |
| // Simulate job completion after 10 seconds | |
| setTimeout(() => { | |
| // This would be triggered by actual job completion in a real app | |
| if(!document.getElementById('jobInProgressView').classList.contains('hidden')) { | |
| showPaymentFeedback(); | |
| } | |
| }, 10000); | |
| </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-on-demand" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |