Spaces:

LukasBe
/

fixit-on-demand

Running

App Files Files Community

LukasBe commited on Apr 21, 2025

Commit

9a5adcb

verified ·

1 Parent(s): 3d6342d

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1062 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Fixit On Demand
-emoji: 🏃
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: fixit-on-demand
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1062 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

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

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ the mobile app is the beating heart of FixIT‑On‑Demand—it’s where trust is built, transactions happen, and satisfaction is delivered. Here’s how it works, step by step: 1. Seamless Onboarding & Trust Signals Quick Registration: Customers sign up using phone or e‑mail in under 30 seconds. Verified Profiles: Before booking, users see each technician’s name, photo, skill badges (e.g. “Hardware Specialist,” “Network Guru”), average star rating, and recent reviews—instantly establishing credibility. 2. Intuitive Problem Definition Guided Issue Selection: Rather than a free‑form form, the app presents a clean checklist (“Slow PC,” “Blue Screen,” “Software Install,” “Wi‑Fi Setup,” etc.) plus an “Other” field. Priority Slider: Customers choose “Standard” or “Urgent” and see how that affects ETA and pricing. 3. Real‑Time Matching & Dynamic Pricing Live Technician Pool: Based on the selected problem, location, and urgency, our orchestration engine filters for proximity, skill match, and workload. Surge Indicator: If demand spikes (e.g. evenings), customers see a transparent “+ 25 %” surge tag—with an explanation (“High demand between 6–9 PM”). 4. Transparent Confirmation Cost Breakdown: Before tapping “Confirm,” users review a line‑item estimate: base fee + per‑hour rate + any surge or service fees. ETA & Route Preview: An integrated map (powered by Mapbox) shows the technician’s current location and an estimated arrival window. 5. In‑App Communication & Diagnostics Live Chat & Calls: Secure text and VOIP let customers clarify details or send photos of error messages. Remote Diagnostics Option: One tap launches an AR‑powered video session—so many issues can be diagnosed (and often fixed) remotely, saving both parties travel time. 6. Job Tracking & Completion Progress Bar: The job page tracks every stage: “Technician En Route,” “On‑Site Inspection,” “Repair in Progress,” and “Job Completed.” Digital Receipt: Upon completion, customers receive a detailed service report (work done, parts used, time spent) and an itemized invoice. 7. Effortless Payment & Feedback One‑Tap Payment: Stored card, local bank transfer, or mobile‑wallet options settle the invoice instantly. Rating Prompt: Right after payment, a lightweight 5‑star + comment prompt opens—fueling our continuous quality loop. By encapsulating every interaction—from problem diagnosis through payment—into a single, intuitive mobile journey, our app not only reduces friction but also turns DIY frustration into a delightful, trust‑filled experience. That seamless, data‑rich flow is what drives repeat usage, word‑of‑mouth growth, and ultimately, the network effects that make FixIT‑On‑Demand a scalable, defensible platform.