1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>RepairGuide Pro - Laptop & PC Repair Instructions</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
10 <script>
11 tailwind.config = {
12 theme: {
13 extend: {
14 fontFamily: {
15 'roboto': ['Roboto', 'sans-serif'],
16 'roboto-mono': ['Roboto Mono', 'monospace'],
17 },
18 colors: {
19 'primary': {
20 50: '#E3F2FD',
21 500: '#2196F3',
22 700: '#1976D2',
23 900: '#0D47A1'
24 },
25 'success': {
26 500: '#4CAF50',
27 600: '#388E3C'
28 },
29 'warning': {
30 500: '#FF9800',
31 700: '#F57C00'
32 },
33 'danger': {
34 500: '#F44336',
35 700: '#D32F2F'
36 }
37 },
38 boxShadow: {
39 'material': '0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1)',
40 'material-lg': '0 4px 8px rgba(0,0,0,0.12), 0 16px 32px rgba(0,0,0,0.12)'
41 }
42 }
43 }
44 };
45 </script>
46 </head>
47 <body class="font-roboto bg-gray-50 text-gray-900">
48 <!-- @COMPONENT: AppHeader [search, navigation, user menu] -->
49 <header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
50 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
51 <div class="flex items-center justify-between h-16">
52 <!-- Logo and Brand -->
53 <div class="flex items-center space-x-4">
54 <div class="flex items-center space-x-2">
55 <span class="material-icons text-primary-700 text-2xl">build</span>
56 <h1 class="text-xl font-medium text-gray-900">RepairGuide Pro</h1>
57 </div>
58 </div>
59
60 <!-- Search Bar -->
61 <div class="flex-1 max-w-2xl mx-8">
62 <div class="relative">
63 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
64 <span class="material-icons text-gray-400 text-xl">search</span>
65 </div>
66 <input type="text"
67 class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
68 placeholder="Search repair guides, issues, or parts..."
69 data-bind="searchQuery">
70 </div>
71 </div>
72
73 <!-- User Actions -->
74 <div class="flex items-center space-x-4">
75 <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
76 data-event="click:toggleBookmarks">
77 <span class="material-icons">bookmark_border</span>
78 </button>
79 <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
80 data-event="click:printPage">
81 <span class="material-icons">print</span>
82 </button>
83 </div>
84 </div>
85 </div>
86 </header>
87 <!-- @END_COMPONENT: AppHeader -->
88
89 <!-- @COMPONENT: MainContent [device selection, categories, guides] -->
90 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
91
92 <!-- Device Type Selection -->
93 <!-- @COMPONENT: DeviceTypeSelector [laptop/desktop toggle] -->
94 <section class="mb-8">
95 <div class="bg-white rounded-xl shadow-material p-6">
96 <h2 class="text-lg font-medium text-gray-900 mb-4">Select Device Type</h2>
97 <div class="flex space-x-4">
98 <button class="flex items-center space-x-3 px-6 py-4 bg-primary-700 text-white rounded-lg hover:bg-primary-900 transition-colors"
99 data-event="click:selectDeviceType" data-device="laptop">
100 <span class="material-icons text-2xl">laptop_mac</span>
101 <span class="font-medium">Laptops</span>
102 </button>
103 <button class="flex items-center space-x-3 px-6 py-4 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
104 data-event="click:selectDeviceType" data-device="desktop">
105 <span class="material-icons text-2xl">desktop_windows</span>
106 <span class="font-medium">Desktops</span>
107 </button>
108 </div>
109 </div>
110 </section>
111 <!-- @END_COMPONENT: DeviceTypeSelector -->
112
113 <!-- Quick Access Categories -->
114 <!-- @COMPONENT: CategoryGrid [hardware, software, cleaning, upgrades] -->
115 <section class="mb-8">
116 <h2 class="text-lg font-medium text-gray-900 mb-4">Repair Categories</h2>
117 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
118 <!-- @MAP: categories.map(category => ( -->
119 <div class="bg-white rounded-xl shadow-material p-6 hover:shadow-material-lg transition-shadow cursor-pointer"
120 data-event="click:selectCategory" data-category="hardware">
121 <div class="flex items-center space-x-3 mb-3">
122 <span class="material-icons text-primary-700 text-2xl">memory</span>
123 <h3 class="font-medium text-gray-900">Hardware</h3>
124 </div>
125 <p class="text-sm text-gray-600 mb-2">Component repairs, replacements, and installations</p>
126 <span class="inline-block px-2 py-1 bg-primary-50 text-primary-700 text-xs rounded-full">23 guides</span>
127 </div>
128
129 <div class="bg-white rounded-xl shadow-material p-6 hover:shadow-material-lg transition-shadow cursor-pointer"
130 data-event="click:selectCategory" data-category="software">
131 <div class="flex items-center space-x-3 mb-3">
132 <span class="material-icons text-success-600 text-2xl">code</span>
133 <h3 class="font-medium text-gray-900">Software</h3>
134 </div>
135 <p class="text-sm text-gray-600 mb-2">OS troubleshooting, driver issues, and system recovery</p>
136 <span class="inline-block px-2 py-1 bg-success-50 text-success-600 text-xs rounded-full">18 guides</span>
137 </div>
138
139 <div class="bg-white rounded-xl shadow-material p-6 hover:shadow-material-lg transition-shadow cursor-pointer"
140 data-event="click:selectCategory" data-category="cleaning">
141 <div class="flex items-center space-x-3 mb-3">
142 <span class="material-icons text-warning-700 text-2xl">cleaning_services</span>
143 <h3 class="font-medium text-gray-900">Cleaning</h3>
144 </div>
145 <p class="text-sm text-gray-600 mb-2">Dust removal, thermal paste, and maintenance</p>
146 <span class="inline-block px-2 py-1 bg-warning-50 text-warning-700 text-xs rounded-full">12 guides</span>
147 </div>
148
149 <div class="bg-white rounded-xl shadow-material p-6 hover:shadow-material-lg transition-shadow cursor-pointer"
150 data-event="click:selectCategory" data-category="upgrades">
151 <div class="flex items-center space-x-3 mb-3">
152 <span class="material-icons text-purple-600 text-2xl">upgrade</span>
153 <h3 class="font-medium text-gray-900">Upgrades</h3>
154 </div>
155 <p class="text-sm text-gray-600 mb-2">RAM, storage, and performance improvements</p>
156 <span class="inline-block px-2 py-1 bg-purple-50 text-purple-600 text-xs rounded-full">15 guides</span>
157 </div>
158 <!-- @END_MAP )) -->
159 </div>
160 </section>
161 <!-- @END_COMPONENT: CategoryGrid -->
162
163 <!-- Featured Repair Guides -->
164 <!-- @COMPONENT: RepairGuidesList [filtering, sorting, difficulty indicators] -->
165 <section class="mb-8">
166 <div class="flex items-center justify-between mb-4">
167 <h2 class="text-lg font-medium text-gray-900">Popular Repair Guides</h2>
168 <div class="flex items-center space-x-4">
169 <select class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
170 data-bind="sortOption">
171 <option>Most Popular</option>
172 <option>Difficulty: Easy to Hard</option>
173 <option>Recently Updated</option>
174 <option>Estimated Time</option>
175 </select>
176 </div>
177 </div>
178
179 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
180 <!-- @MAP: popularGuides.map(guide => ( -->
181 <div class="bg-white rounded-xl shadow-material hover:shadow-material-lg transition-shadow">
182 <!-- A laptop motherboard with visible components and circuitry for hardware repair identification -->
183 <img src="https://images.unsplash.com/photo-1588872657578-7efd1f1555ed?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&h=300"
184 alt="Laptop motherboard components"
185 class="w-full h-48 object-cover rounded-t-xl">
186
187 <div class="p-6">
188 <div class="flex items-center justify-between mb-3">
189 <div class="flex items-center space-x-2">
190 <span class="inline-block px-2 py-1 bg-success-50 text-success-600 text-xs font-medium rounded-full">EASY</span>
191 <span class="inline-block px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">30-45 min</span>
192 </div>
193 <button class="p-1 text-gray-400 hover:text-primary-700 transition-colors"
194 data-event="click:toggleBookmark">
195 <span class="material-icons text-sm">bookmark_border</span>
196 </button>
197 </div>
198
199 <h3 class="font-medium text-gray-900 mb-2">Laptop RAM Upgrade Installation</h3>
200 <p class="text-sm text-gray-600 mb-4">Step-by-step guide to upgrading laptop memory including compatibility checks and installation procedures.</p>
201
202 <div class="flex items-center justify-between">
203 <div class="flex items-center space-x-4 text-sm text-gray-500">
204 <span class="flex items-center space-x-1">
205 <span class="material-icons text-sm">tools</span>
206 <span>3 tools</span>
207 </span>
208 <span class="flex items-center space-x-1">
209 <span class="material-icons text-sm">visibility</span>
210 <span>1.2k views</span>
211 </span>
212 </div>
213 <button class="px-4 py-2 bg-primary-700 text-white text-sm rounded-lg hover:bg-primary-900 transition-colors"
214 data-event="click:viewGuide">
215 View Guide
216 </button>
217 </div>
218 </div>
219 </div>
220
221 <div class="bg-white rounded-xl shadow-material hover:shadow-material-lg transition-shadow">
222 <!-- A computer screen showing BIOS/UEFI interface for system troubleshooting -->
223 <img src="https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&h=300"
224 alt="Computer BIOS interface"
225 class="w-full h-48 object-cover rounded-t-xl">
226
227 <div class="p-6">
228 <div class="flex items-center justify-between mb-3">
229 <div class="flex items-center space-x-2">
230 <span class="inline-block px-2 py-1 bg-warning-50 text-warning-700 text-xs font-medium rounded-full">MEDIUM</span>
231 <span class="inline-block px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">60-90 min</span>
232 </div>
233 <button class="p-1 text-gray-400 hover:text-primary-700 transition-colors">
234 <span class="material-icons text-sm">bookmark_border</span>
235 </button>
236 </div>
237
238 <h3 class="font-medium text-gray-900 mb-2">Boot Failure Troubleshooting</h3>
239 <p class="text-sm text-gray-600 mb-4">Comprehensive flowchart and procedures to diagnose and fix common boot issues in laptops and desktops.</p>
240
241 <div class="flex items-center justify-between">
242 <div class="flex items-center space-x-4 text-sm text-gray-500">
243 <span class="flex items-center space-x-1">
244 <span class="material-icons text-sm">warning</span>
245 <span>Safety critical</span>
246 </span>
247 <span class="flex items-center space-x-1">
248 <span class="material-icons text-sm">visibility</span>
249 <span>856 views</span>
250 </span>
251 </div>
252 <button class="px-4 py-2 bg-primary-700 text-white text-sm rounded-lg hover:bg-primary-900 transition-colors">
253 View Guide
254 </button>
255 </div>
256 </div>
257 </div>
258
259 <div class="bg-white rounded-xl shadow-material hover:shadow-material-lg transition-shadow">
260 <!-- Cooling fan and heat sink assembly from a laptop for thermal management repair -->
261 <img src="https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&h=300"
262 alt="Laptop cooling fan and heat sink"
263 class="w-full h-48 object-cover rounded-t-xl">
264
265 <div class="p-6">
266 <div class="flex items-center justify-between mb-3">
267 <div class="flex items-center space-x-2">
268 <span class="inline-block px-2 py-1 bg-success-50 text-success-600 text-xs font-medium rounded-full">EASY</span>
269 <span class="inline-block px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">20-30 min</span>
270 </div>
271 <button class="p-1 text-gray-400 hover:text-primary-700 transition-colors">
272 <span class="material-icons text-sm">bookmark_border</span>
273 </button>
274 </div>
275
276 <h3 class="font-medium text-gray-900 mb-2">Laptop Fan Cleaning & Maintenance</h3>
277 <p class="text-sm text-gray-600 mb-4">Prevent overheating with proper fan cleaning techniques and thermal paste application guidelines.</p>
278
279 <div class="flex items-center justify-between">
280 <div class="flex items-center space-x-4 text-sm text-gray-500">
281 <span class="flex items-center space-x-1">
282 <span class="material-icons text-sm">tools</span>
283 <span>2 tools</span>
284 </span>
285 <span class="flex items-center space-x-1">
286 <span class="material-icons text-sm">visibility</span>
287 <span>2.1k views</span>
288 </span>
289 </div>
290 <button class="px-4 py-2 bg-primary-700 text-white text-sm rounded-lg hover:bg-primary-900 transition-colors">
291 View Guide
292 </button>
293 </div>
294 </div>
295 </div>
296
297 <div class="bg-white rounded-xl shadow-material hover:shadow-material-lg transition-shadow">
298 <!-- SSD and traditional hard drive comparison for storage upgrade decisions -->
299 <img src="https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&h=300"
300 alt="SSD and hard drive storage devices"
301 class="w-full h-48 object-cover rounded-t-xl">
302
303 <div class="p-6">
304 <div class="flex items-center justify-between mb-3">
305 <div class="flex items-center space-x-2">
306 <span class="inline-block px-2 py-1 bg-danger-50 text-danger-700 text-xs font-medium rounded-full">HARD</span>
307 <span class="inline-block px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">2-3 hours</span>
308 </div>
309 <button class="p-1 text-gray-400 hover:text-primary-700 transition-colors">
310 <span class="material-icons text-sm">bookmark_border</span>
311 </button>
312 </div>
313
314 <h3 class="font-medium text-gray-900 mb-2">SSD Installation & Data Migration</h3>
315 <p class="text-sm text-gray-600 mb-4">Complete guide for replacing traditional drives with SSDs, including backup procedures and OS migration.</p>
316
317 <div class="flex items-center justify-between">
318 <div class="flex items-center space-x-4 text-sm text-gray-500">
319 <span class="flex items-center space-x-1">
320 <span class="material-icons text-sm">tools</span>
321 <span>5 tools</span>
322 </span>
323 <span class="flex items-center space-x-1">
324 <span class="material-icons text-sm">visibility</span>
325 <span>945 views</span>
326 </span>
327 </div>
328 <button class="px-4 py-2 bg-primary-700 text-white text-sm rounded-lg hover:bg-primary-900 transition-colors">
329 View Guide
330 </button>
331 </div>
332 </div>
333 </div>
334 <!-- @END_MAP )) -->
335 </div>
336 </section>
337 <!-- @END_COMPONENT: RepairGuidesList -->
338
339 <!-- Troubleshooting Flowchart Section -->
340 <!-- @COMPONENT: TroubleshootingFlowchart [interactive decision tree] -->
341 <section class="mb-8">
342 <div class="bg-white rounded-xl shadow-material p-6">
343 <h2 class="text-lg font-medium text-gray-900 mb-4">Quick Troubleshooting</h2>
344 <p class="text-sm text-gray-600 mb-6">Start here if you're not sure what's wrong with your device</p>
345
346 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
347 <button class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors text-left"
348 data-event="click:startTroubleshooting" data-type="power">
349 <div class="flex items-center space-x-3 mb-2">
350 <span class="material-icons text-danger-500">power_off</span>
351 <h3 class="font-medium">Device Won't Turn On</h3>
352 </div>
353 <p class="text-sm text-gray-600">Power issues, dead battery, charging problems</p>
354 </button>
355
356 <button class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors text-left"
357 data-event="click:startTroubleshooting" data-type="performance">
358 <div class="flex items-center space-x-3 mb-2">
359 <span class="material-icons text-warning-500">speed</span>
360 <h3 class="font-medium">Slow Performance</h3>
361 </div>
362 <p class="text-sm text-gray-600">Freezing, overheating, software issues</p>
363 </button>
364
365 <button class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors text-left"
366 data-event="click:startTroubleshooting" data-type="display">
367 <div class="flex items-center space-x-3 mb-2">
368 <span class="material-icons text-primary-500">monitor</span>
369 <h3 class="font-medium">Display Problems</h3>
370 </div>
371 <p class="text-sm text-gray-600">Screen flickering, no display, broken LCD</p>
372 </button>
373 </div>
374 </div>
375 </section>
376 <!-- @END_COMPONENT: TroubleshootingFlowchart -->
377
378 <!-- Parts Identification Guide -->
379 <!-- @COMPONENT: PartsIdentificationGuide [visual component library] -->
380 <section class="mb-8">
381 <div class="bg-white rounded-xl shadow-material p-6">
382 <h2 class="text-lg font-medium text-gray-900 mb-4">Parts Identification Guide</h2>
383 <p class="text-sm text-gray-600 mb-6">Click on components to learn more about them</p>
384
385 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
386 <div class="relative">
387 <!-- Detailed internal view of a laptop showing motherboard, RAM slots, storage, and cooling components -->
388 <img src="https://pixabay.com/get/g47f3243ed959354ccf54e02cc790eae822f47a5a3e5222dbc4d9becb7bacd50952bf4d9c647072182a34403929751facc95c030ab418c2af1194144c6770113f_1280.jpg"
389 alt="Laptop internal components layout"
390 class="w-full rounded-lg">
391
392 <!-- Interactive hotspots -->
393 <!-- @FUNCTIONALITY: These hotspots should be clickable and show component information -->
394 <button class="absolute top-1/4 left-1/3 w-6 h-6 bg-primary-700 rounded-full border-4 border-white shadow-lg hover:scale-110 transition-transform"
395 data-event="click:showComponentInfo" data-component="ram"
396 title="RAM/Memory">
397 <span class="sr-only">RAM Module</span>
398 </button>
399 <button class="absolute top-1/2 left-1/4 w-6 h-6 bg-primary-700 rounded-full border-4 border-white shadow-lg hover:scale-110 transition-transform"
400 data-event="click:showComponentInfo" data-component="storage"
401 title="Storage Drive">
402 <span class="sr-only">Storage Drive</span>
403 </button>
404 <button class="absolute top-1/3 right-1/4 w-6 h-6 bg-primary-700 rounded-full border-4 border-white shadow-lg hover:scale-110 transition-transform"
405 data-event="click:showComponentInfo" data-component="cooling"
406 title="Cooling System">
407 <span class="sr-only">Cooling Fan</span>
408 </button>
409 </div>
410
411 <div class="space-y-4">
412 <div class="border border-gray-200 rounded-lg p-4">
413 <h3 class="font-medium text-gray-900 mb-2">Common Components</h3>
414 <div class="space-y-2">
415 <div class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded cursor-pointer"
416 data-event="click:highlightComponent" data-component="motherboard">
417 <div class="w-3 h-3 bg-primary-700 rounded-full"></div>
418 <span class="text-sm">Motherboard</span>
419 </div>
420 <div class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded cursor-pointer"
421 data-event="click:highlightComponent" data-component="ram">
422 <div class="w-3 h-3 bg-success-600 rounded-full"></div>
423 <span class="text-sm">RAM/Memory</span>
424 </div>
425 <div class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded cursor-pointer"
426 data-event="click:highlightComponent" data-component="storage">
427 <div class="w-3 h-3 bg-warning-700 rounded-full"></div>
428 <span class="text-sm">Storage Drive</span>
429 </div>
430 <div class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded cursor-pointer"
431 data-event="click:highlightComponent" data-component="battery">
432 <div class="w-3 h-3 bg-purple-600 rounded-full"></div>
433 <span class="text-sm">Battery</span>
434 </div>
435 <div class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded cursor-pointer"
436 data-event="click:highlightComponent" data-component="cooling">
437 <div class="w-3 h-3 bg-cyan-600 rounded-full"></div>
438 <span class="text-sm">Cooling System</span>
439 </div>
440 </div>
441 </div>
442
443 <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
444 <div class="flex items-start space-x-3">
445 <span class="material-icons text-primary-700 text-lg mt-0.5">info</span>
446 <div>
447 <h4 class="font-medium text-primary-900 mb-1">Pro Tip</h4>
448 <p class="text-sm text-primary-800">Always power down and disconnect the battery before working on internal components.</p>
449 </div>
450 </div>
451 </div>
452 </div>
453 </div>
454 </div>
455 </section>
456 <!-- @END_COMPONENT: PartsIdentificationGuide -->
457
458 </main>
459 <!-- @END_COMPONENT: MainContent -->
460
461 <!-- @COMPONENT: FloatingActionButton [quick access menu] -->
462 <div class="fixed bottom-6 right-6 z-40">
463 <!-- @STATE: isExpanded:boolean = false -->
464 <div class="relative">
465 <!-- Quick access menu (hidden by default) -->
466 <div class="absolute bottom-16 right-0 space-y-2 opacity-0 pointer-events-none transition-all duration-200"
467 id="fab-menu" data-state="collapsed">
468 <button class="flex items-center space-x-3 bg-white shadow-material rounded-full px-4 py-3 hover:shadow-material-lg transition-shadow"
469 data-event="click:quickAction" data-action="emergency">
470 <span class="material-icons text-danger-500">emergency</span>
471 <span class="text-sm font-medium text-gray-700 whitespace-nowrap">Emergency Shutdown</span>
472 </button>
473 <button class="flex items-center space-x-3 bg-white shadow-material rounded-full px-4 py-3 hover:shadow-material-lg transition-shadow"
474 data-event="click:quickAction" data-action="tools">
475 <span class="material-icons text-primary-700">construction</span>
476 <span class="text-sm font-medium text-gray-700 whitespace-nowrap">Tool Checklist</span>
477 </button>
478 <button class="flex items-center space-x-3 bg-white shadow-material rounded-full px-4 py-3 hover:shadow-material-lg transition-shadow"
479 data-event="click:quickAction" data-action="safety">
480 <span class="material-icons text-warning-700">security</span>
481 <span class="text-sm font-medium text-gray-700 whitespace-nowrap">Safety Guide</span>
482 </button>
483 </div>
484
485 <!-- Main FAB -->
486 <button class="w-14 h-14 bg-primary-700 text-white rounded-full shadow-material-lg hover:bg-primary-900 hover:shadow-xl transition-all duration-200 flex items-center justify-center"
487 data-event="click:toggleFABMenu">
488 <span class="material-icons text-2xl">help</span>
489 </button>
490 </div>
491 </div>
492 <!-- @END_COMPONENT: FloatingActionButton -->
493
494 <!-- @COMPONENT: DetailedRepairGuide [step-by-step modal/overlay] -->
495 <!-- This would be shown when clicking "View Guide" buttons -->
496 <div class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden"
497 id="repair-guide-modal" data-state="hidden">
498 <div class="flex items-center justify-center min-h-screen p-4">
499 <div class="bg-white rounded-xl shadow-material-lg max-w-4xl w-full max-h-screen overflow-y-auto">
500 <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 rounded-t-xl">
501 <div class="flex items-center justify-between">
502 <h2 class="text-xl font-medium text-gray-900" data-bind="guide.title">Laptop RAM Upgrade Installation</h2>
503 <button class="p-2 text-gray-400 hover:text-gray-600 rounded-lg"
504 data-event="click:closeModal">
505 <span class="material-icons">close</span>
506 </button>
507 </div>
508 <div class="flex items-center space-x-4 mt-2">
509 <span class="inline-block px-2 py-1 bg-success-50 text-success-600 text-xs font-medium rounded-full">EASY</span>
510 <span class="inline-block px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">30-45 min</span>
511 <span class="text-sm text-gray-500">Updated 2 days ago</span>
512 </div>
513 </div>
514
515 <div class="p-6">
516 <!-- Safety Warning -->
517 <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
518 <div class="flex items-start space-x-3">
519 <span class="material-icons text-yellow-600 text-lg mt-0.5">warning</span>
520 <div>
521 <h3 class="font-medium text-yellow-800 mb-1">Safety Precautions</h3>
522 <ul class="text-sm text-yellow-700 space-y-1">
523 <li>• Power down completely and remove battery</li>
524 <li>• Ground yourself to prevent static discharge</li>
525 <li>• Work in a clean, well-lit environment</li>
526 </ul>
527 </div>
528 </div>
529 </div>
530
531 <!-- Required Tools -->
532 <div class="mb-6">
533 <h3 class="font-medium text-gray-900 mb-3">Required Tools</h3>
534 <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
535 <div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
536 <span class="material-icons text-gray-600">construction</span>
537 <span class="text-sm">Phillips screwdriver</span>
538 </div>
539 <div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
540 <span class="material-icons text-gray-600">settings</span>
541 <span class="text-sm">Anti-static wrist strap</span>
542 </div>
543 <div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
544 <span class="material-icons text-gray-600">memory</span>
545 <span class="text-sm">Compatible RAM module</span>
546 </div>
547 </div>
548 </div>
549
550 <!-- Step-by-step Instructions -->
551 <div class="space-y-6">
552 <h3 class="font-medium text-gray-900">Installation Steps</h3>
553
554 <!-- @MAP: guide.steps.map((step, index) => ( -->
555 <div class="flex space-x-4">
556 <div class="flex-shrink-0 w-8 h-8 bg-primary-700 text-white rounded-full flex items-center justify-center text-sm font-medium">1</div>
557 <div class="flex-1">
558 <h4 class="font-medium text-gray-900 mb-2">Power Down and Prepare</h4>
559 <p class="text-sm text-gray-600 mb-3">Shut down your laptop completely. Disconnect the power adapter and remove the battery if it's removable.</p>
560 <!-- Close-up of hands removing a laptop battery safely -->
561 <img src="https://images.unsplash.com/photo-1625842268584-8f3296236761?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&h=300"
562 alt="Removing laptop battery"
563 class="rounded-lg shadow-sm w-full max-w-md">
564 </div>
565 </div>
566
567 <div class="flex space-x-4">
568 <div class="flex-shrink-0 w-8 h-8 bg-primary-700 text-white rounded-full flex items-center justify-center text-sm font-medium">2</div>
569 <div class="flex-1">
570 <h4 class="font-medium text-gray-900 mb-2">Locate RAM Access Panel</h4>
571 <p class="text-sm text-gray-600 mb-3">Find the RAM access panel on the bottom of your laptop. It's usually marked with a memory symbol or "RAM".</p>
572 <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
573 <p class="text-sm text-blue-800"><strong>Note:</strong> Some laptops require removing the entire bottom panel.</p>
574 </div>
575 </div>
576 </div>
577
578 <div class="flex space-x-4">
579 <div class="flex-shrink-0 w-8 h-8 bg-primary-700 text-white rounded-full flex items-center justify-center text-sm font-medium">3</div>
580 <div class="flex-1">
581 <h4 class="font-medium text-gray-900 mb-2">Install the New RAM</h4>
582 <p class="text-sm text-gray-600 mb-3">Insert the RAM module at a 45-degree angle, then press down until the clips snap into place.</p>
583 <!-- Hands installing RAM module into laptop memory slot -->
584 <img src="https://pixabay.com/get/g1e9ddf595ce19c90731fefde83d08c55664369e3f40aec7dec9ddc2b8d0d77809c09946e31514ba291e6a2a14531f45e3d2eca09a9019ff491ceaed45a3307f0_1280.jpg"
585 alt="Installing RAM into laptop"
586 class="rounded-lg shadow-sm w-full max-w-md">
587 </div>
588 </div>
589 <!-- @END_MAP )) -->
590
591 <!-- Alternative Solutions -->
592 <div class="bg-gray-50 rounded-lg p-4">
593 <h4 class="font-medium text-gray-900 mb-2">Alternative Solutions</h4>
594 <p class="text-sm text-gray-600">If your laptop doesn't have accessible RAM slots, consider external solutions like faster storage or cloud-based workflows to improve performance.</p>
595 </div>
596 </div>
597 </div>
598 </div>
599 </div>
600 </div>
601 <!-- @END_COMPONENT: DetailedRepairGuide -->
602
603 <script>
604 (function() {
605 // TODO: Implement business logic, API calls, and state management
606
607 // Simple interactions for demo purposes
608 let isModalOpen = false;
609 let isFABExpanded = false;
610
611 // Modal functionality
612 const modal = document.getElementById('repair-guide-modal');
613 const closeModalButtons = document.querySelectorAll('[data-event="click:closeModal"]');
614 const viewGuideButtons = document.querySelectorAll('[data-event="click:viewGuide"]');
615
616 viewGuideButtons.forEach(button => {
617 button.addEventListener('click', () => {
618 modal.classList.remove('hidden');
619 isModalOpen = true;
620 });
621 });
622
623 closeModalButtons.forEach(button => {
624 button.addEventListener('click', () => {
625 modal.classList.add('hidden');
626 isModalOpen = false;
627 });
628 });
629
630 // Close modal on background click
631 modal.addEventListener('click', (e) => {
632 if (e.target === modal) {
633 modal.classList.add('hidden');
634 isModalOpen = false;
635 }
636 });
637
638 // FAB functionality
639 const fabButton = document.querySelector('[data-event="click:toggleFABMenu"]');
640 const fabMenu = document.getElementById('fab-menu');
641
642 if (fabButton && fabMenu) {
643 fabButton.addEventListener('click', () => {
644 isFABExpanded = !isFABExpanded;
645 if (isFABExpanded) {
646 fabMenu.classList.remove('opacity-0', 'pointer-events-none');
647 fabMenu.classList.add('opacity-100');
648 } else {
649 fabMenu.classList.add('opacity-0', 'pointer-events-none');
650 fabMenu.classList.remove('opacity-100');
651 }
652 });
653 }
654
655 // Print functionality
656 const printButton = document.querySelector('[data-event="click:printPage"]');
657 if (printButton) {
658 printButton.addEventListener('click', () => {
659 window.print();
660 });
661 }
662
663 // Search functionality placeholder
664 const searchInput = document.querySelector('[data-bind="searchQuery"]');
665 if (searchInput) {
666 searchInput.addEventListener('input', (e) => {
667 // TODO: Implement search functionality
668 console.log('Search query:', e.target.value);
669 });
670 }
671 })();
672 </script>
673
674 <!-- Print Styles -->
675 <style media="print">
676 .no-print { display: none !important; }
677 .shadow-material, .shadow-material-lg { box-shadow: none !important; }
678 .bg-primary-700 { background-color: #1976D2 !important; color: white !important; }
679 .text-primary-700 { color: #1976D2 !important; }
680 </style>
681 </body>
682 </html>