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