Hugging Face's logo

Spaces:
Geotoad
/
anycoder-567141f6
Running

App Files Community
Geotoad commited on
Commit
8765e1c
·
verified ·
1 Parent(s): 1f71d90

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +648 -19
index.html CHANGED
@@ -1,19 +1,648 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>2013 Hyundai Genesis Coupe Interactive Diagram</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #002c5f;
11
+ --secondary-color: #e50012;
12
+ --accent-color: #8a8d8f;
13
+ --text-color: #333;
14
+ --light-bg: #f8f9fa;
15
+ --dark-bg: #343a40;
16
+ --highlight: #ffc107;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
+ }
25
+
26
+ body {
27
+ background-color: var(--light-bg);
28
+ color: var(--text-color);
29
+ line-height: 1.6;
30
+ overflow-x: hidden;
31
+ }
32
+
33
+ .header {
34
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
35
+ color: white;
36
+ padding: 1rem;
37
+ text-align: center;
38
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
39
+ position: sticky;
40
+ top: 0;
41
+ z-index: 1000;
42
+ }
43
+
44
+ .header h1 {
45
+ font-size: 2rem;
46
+ margin-bottom: 0.5rem;
47
+ font-weight: 700;
48
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
49
+ }
50
+
51
+ .header p {
52
+ font-size: 1rem;
53
+ opacity: 0.9;
54
+ }
55
+
56
+ .anycoder-link {
57
+ position: absolute;
58
+ right: 1rem;
59
+ top: 1rem;
60
+ color: white;
61
+ text-decoration: none;
62
+ font-size: 0.9rem;
63
+ background: rgba(0, 0, 0, 0.2);
64
+ padding: 0.3rem 0.6rem;
65
+ border-radius: 4px;
66
+ transition: all 0.3s ease;
67
+ }
68
+
69
+ .anycoder-link:hover {
70
+ background: rgba(0, 0, 0, 0.4);
71
+ transform: translateY(-2px);
72
+ }
73
+
74
+ .container {
75
+ max-width: 1400px;
76
+ margin: 0 auto;
77
+ padding: 2rem;
78
+ }
79
+
80
+ .controls {
81
+ display: flex;
82
+ justify-content: center;
83
+ gap: 1rem;
84
+ margin-bottom: 2rem;
85
+ flex-wrap: wrap;
86
+ }
87
+
88
+ .btn {
89
+ padding: 0.8rem 1.5rem;
90
+ border: none;
91
+ border-radius: 50px;
92
+ background-color: var(--primary-color);
93
+ color: white;
94
+ cursor: pointer;
95
+ font-weight: 600;
96
+ transition: all 0.3s ease;
97
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
98
+ }
99
+
100
+ .btn:hover {
101
+ background-color: var(--secondary-color);
102
+ transform: translateY(-2px);
103
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
104
+ }
105
+
106
+ .btn.active {
107
+ background-color: var(--secondary-color);
108
+ box-shadow: 0 0 0 2px white, 0 0 0 4px var(--secondary-color);
109
+ }
110
+
111
+ .car-container {
112
+ position: relative;
113
+ width: 100%;
114
+ height: 600px;
115
+ margin: 2rem 0;
116
+ overflow: hidden;
117
+ border-radius: 10px;
118
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
119
+ background: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
120
+ perspective: 1000px;
121
+ }
122
+
123
+ .car-image {
124
+ width: 100%;
125
+ height: 100%;
126
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCI+PHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNjAwIiB5PSI0MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM2NmY2NjYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZm9udC13ZWlnaHQ9ImJvbGQiPjEyOSBIeW5kdW5kYSBHZW5lc2lzIENvdXBlIDIwMTM8L3RleHQ+PC9zdmc+');
127
+ background-size: contain;
128
+ background-repeat: no-repeat;
129
+ background-position: center;
130
+ position: relative;
131
+ transition: transform 0.5s ease;
132
+ }
133
+
134
+ .car-image.exterior {
135
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCI+PHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNjAwIiB5PSI0MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM2NmY2NjYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZm9udC13ZWlnaHQ9ImJvbGQiPjEyOSBIeW5kdW5kYSBHZW5lc2lzIENvdXBlIDIwMTM8L3RleHQ+PC9zdmc+');
136
+ }
137
+
138
+ .car-image.engine {
139
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCI+PHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNjAwIiB5PSI0MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM2NmY2NjYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZm9udC13ZWlnaHQ9ImJvbGQiPjEyOSBIeW5kdW5kYSBHZW5lc2lzIENvdXBlIDIwMTM8L3RleHQ+PC9zdmc+');
140
+ }
141
+
142
+ .car-image.transmission {
143
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCI+PHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNjAwIiB5PSI0MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM2NmY2NjYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZm9udC13ZWlnaHQ9ImJvbGQiPjEyOSBIeW5kdW5kYSBHZW5lc2lzIENvdXBlIDIwMTM8L3RleHQ+PC9zdmc+');
144
+ }
145
+
146
+ .car-image.suspension {
147
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCI+PHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNjAwIiB5PSI0MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM2NmY2NjYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZm9udC13ZWlnaHQ9ImJvbGQiPjEyOSBIeW5kdW5kYSBHZW5lc2lzIENvdXBlIDIwMTM8L3RleHQ+PC9zdmc+');
148
+ }
149
+
150
+ .car-image.brakes {
151
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCI+PHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNjAwIiB5PSI0MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM2NmY2NjYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZm9udC13ZWlnaHQ9ImJvbGQiPjEyOSBIeW5kdW5kYSBHZW5lc2lzIENvdXBlIDIwMTM8L3RleHQ+PC9zdmc+');
152
+ }
153
+
154
+ .car-image.electrical {
155
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCI+PHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNjAwIiB5PSI0MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM2NmY2NjYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZm9udC13ZWlnaHQ9ImJvbGQiPjEyOSBIeW5kdW5kYSBHZW5lc2lzIENvdXBlIDIwMTM8L3RleHQ+PC9zdmc+');
156
+ }
157
+
158
+ .car-image.interior {
159
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDYwMCI+PHJlY3Qgd2lkdGg9IjEyMDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNjAwIiB5PSI0MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiM2NmY2NjYiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZm9udC13ZWlnaHQ9ImJvbGQiPjEyOSBIeW5kdW5kYSBHZW5lc2lzIENvdXBlIDIwMTM8L3RleHQ+PC9zdmc+');
160
+ }
161
+
162
+ .label {
163
+ position: absolute;
164
+ background-color: rgba(0, 0, 0, 0.7);
165
+ color: white;
166
+ padding: 0.5rem 1rem;
167
+ border-radius: 5px;
168
+ font-size: 0.9rem;
169
+ cursor: pointer;
170
+ transition: all 0.3s ease;
171
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
172
+ z-index: 10;
173
+ opacity: 0;
174
+ transform: scale(0.8);
175
+ pointer-events: none;
176
+ }
177
+
178
+ .label.visible {
179
+ opacity: 1;
180
+ transform: scale(1);
181
+ pointer-events: auto;
182
+ }
183
+
184
+ .label:hover {
185
+ background-color: var(--secondary-color);
186
+ transform: scale(1.05);
187
+ z-index: 20;
188
+ }
189
+
190
+ .label::after {
191
+ content: '';
192
+ position: absolute;
193
+ top: 100%;
194
+ left: 50%;
195
+ margin-left: -8px;
196
+ border-width: 8px;
197
+ border-style: solid;
198
+ border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
199
+ }
200
+
201
+ .label:hover::after {
202
+ border-color: var(--secondary-color) transparent transparent transparent;
203
+ }
204
+
205
+ .info-panel {
206
+ background-color: white;
207
+ border-radius: 10px;
208
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
209
+ padding: 1.5rem;
210
+ margin-top: 2rem;
211
+ max-height: 400px;
212
+ overflow-y: auto;
213
+ }
214
+
215
+ .info-panel h3 {
216
+ color: var(--primary-color);
217
+ margin-bottom: 1rem;
218
+ border-bottom: 2px solid var(--accent-color);
219
+ padding-bottom: 0.5rem;
220
+ }
221
+
222
+ .info-panel p {
223
+ margin-bottom: 0.5rem;
224
+ line-height: 1.8;
225
+ }
226
+
227
+ .system-description {
228
+ margin-top: 1rem;
229
+ padding: 1rem;
230
+ background-color: var(--light-bg);
231
+ border-radius: 5px;
232
+ border-left: 4px solid var(--secondary-color);
233
+ }
234
+
235
+ .component-list {
236
+ display: grid;
237
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
238
+ gap: 1rem;
239
+ margin-top: 1rem;
240
+ }
241
+
242
+ .component-item {
243
+ padding: 0.8rem;
244
+ background-color: var(--light-bg);
245
+ border-radius: 5px;
246
+ border-left: 4px solid var(--primary-color);
247
+ transition: all 0.3s ease;
248
+ }
249
+
250
+ .component-item:hover {
251
+ background-color: rgba(229, 0, 18, 0.1);
252
+ border-left-color: var(--secondary-color);
253
+ transform: translateX(5px);
254
+ }
255
+
256
+ .component-item h4 {
257
+ color: var(--primary-color);
258
+ margin-bottom: 0.3rem;
259
+ }
260
+
261
+ .component-item p {
262
+ font-size: 0.9rem;
263
+ color: var(--accent-color);
264
+ }
265
+
266
+ .toggle-labels {
267
+ position: fixed;
268
+ bottom: 2rem;
269
+ right: 2rem;
270
+ background-color: var(--secondary-color);
271
+ color: white;
272
+ width: 50px;
273
+ height: 50px;
274
+ border-radius: 50%;
275
+ display: flex;
276
+ align-items: center;
277
+ justify-content: center;
278
+ cursor: pointer;
279
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
280
+ z-index: 100;
281
+ transition: all 0.3s ease;
282
+ }
283
+
284
+ .toggle-labels:hover {
285
+ transform: scale(1.1);
286
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
287
+ }
288
+
289
+ .toggle-labels i {
290
+ font-size: 1.2rem;
291
+ }
292
+
293
+ .search-box {
294
+ width: 100%;
295
+ max-width: 500px;
296
+ margin: 0 auto 2rem;
297
+ position: relative;
298
+ }
299
+
300
+ .search-box input {
301
+ width: 100%;
302
+ padding: 0.8rem 1.5rem;
303
+ border: 2px solid var(--accent-color);
304
+ border-radius: 50px;
305
+ font-size: 1rem;
306
+ transition: all 0.3s ease;
307
+ }
308
+
309
+ .search-box input:focus {
310
+ outline: none;
311
+ border-color: var(--secondary-color);
312
+ box-shadow: 0 0 0 3px rgba(229, 0, 18, 0.1);
313
+ }
314
+
315
+ .search-box i {
316
+ position: absolute;
317
+ right: 1rem;
318
+ top: 50%;
319
+ transform: translateY(-50%);
320
+ color: var(--accent-color);
321
+ }
322
+
323
+ .legend {
324
+ display: flex;
325
+ justify-content: center;
326
+ flex-wrap: wrap;
327
+ gap: 1rem;
328
+ margin-bottom: 2rem;
329
+ }
330
+
331
+ .legend-item {
332
+ display: flex;
333
+ align-items: center;
334
+ gap: 0.5rem;
335
+ }
336
+
337
+ .legend-color {
338
+ width: 20px;
339
+ height: 20px;
340
+ border-radius: 50%;
341
+ }
342
+
343
+ .legend-color.engine {
344
+ background-color: #ff6b6b;
345
+ }
346
+
347
+ .legend-color.transmission {
348
+ background-color: #4ecdc4;
349
+ }
350
+
351
+ .legend-color.suspension {
352
+ background-color: #ffe66d;
353
+ }
354
+
355
+ .legend-color.brakes {
356
+ background-color: #ff8b94;
357
+ }
358
+
359
+ .legend-color.electrical {
360
+ background-color: #a5d296;
361
+ }
362
+
363
+ .legend-color.interior {
364
+ background-color: #7fb3d5;
365
+ }
366
+
367
+ .legend-color.exterior {
368
+ background-color: #d4a5a5;
369
+ }
370
+
371
+ @media (max-width: 768px) {
372
+ .container {
373
+ padding: 1rem;
374
+ }
375
+
376
+ .car-container {
377
+ height: 400px;
378
+ }
379
+
380
+ .controls {
381
+ flex-direction: column;
382
+ align-items: center;
383
+ }
384
+
385
+ .btn {
386
+ width: 100%;
387
+ max-width: 300px;
388
+ }
389
+
390
+ .component-list {
391
+ grid-template-columns: 1fr;
392
+ }
393
+
394
+ .toggle-labels {
395
+ bottom: 1rem;
396
+ right: 1rem;
397
+ width: 40px;
398
+ height: 40px;
399
+ }
400
+ }
401
+
402
+ @media (max-width: 480px) {
403
+ .header h1 {
404
+ font-size: 1.5rem;
405
+ }
406
+
407
+ .car-container {
408
+ height: 300px;
409
+ }
410
+
411
+ .label {
412
+ font-size: 0.8rem;
413
+ padding: 0.3rem 0.6rem;
414
+ }
415
+
416
+ .label::after {
417
+ border-width: 6px;
418
+ margin-left: -6px;
419
+ }
420
+ }
421
+ </style>
422
+ </head>
423
+ <body>
424
+ <header class="header">
425
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
426
+ <h1>2013 Hyundai Genesis Coupe</h1>
427
+ <p>Interactive Component Diagram</p>
428
+ </header>
429
+
430
+ <div class="container">
431
+ <div class="search-box">
432
+ <input type="text" id="searchInput" placeholder="Search for components...">
433
+ <i class="fas fa-search"></i>
434
+ </div>
435
+
436
+ <div class="legend">
437
+ <div class="legend-item">
438
+ <div class="legend-color exterior"></div>
439
+ <span>Exterior</span>
440
+ </div>
441
+ <div class="legend-item">
442
+ <div class="legend-color engine"></div>
443
+ <span>Engine</span>
444
+ </div>
445
+ <div class="legend-item">
446
+ <div class="legend-color transmission"></div>
447
+ <span>Transmission</span>
448
+ </div>
449
+ <div class="legend-item">
450
+ <div class="legend-color suspension"></div>
451
+ <span>Suspension</span>
452
+ </div>
453
+ <div class="legend-item">
454
+ <div class="legend-color brakes"></div>
455
+ <span>Brakes</span>
456
+ </div>
457
+ <div class="legend-item">
458
+ <div class="legend-color electrical"></div>
459
+ <span>Electrical</span>
460
+ </div>
461
+ <div class="legend-item">
462
+ <div class="legend-color interior"></div>
463
+ <span>Interior</span>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="controls">
468
+ <button class="btn active" data-system="exterior">Exterior</button>
469
+ <button class="btn" data-system="engine">Engine</button>
470
+ <button class="btn" data-system="transmission">Transmission</button>
471
+ <button class="btn" data-system="suspension">Suspension</button>
472
+ <button class="btn" data-system="brakes">Brakes</button>
473
+ <button class="btn" data-system="electrical">Electrical</button>
474
+ <button class="btn" data-system="interior">Interior</button>
475
+ </div>
476
+
477
+ <div class="car-container">
478
+ <div class="car-image exterior" id="carImage">
479
+ <!-- Labels will be added dynamically -->
480
+ </div>
481
+ </div>
482
+
483
+ <div class="info-panel">
484
+ <h3>System Overview</h3>
485
+ <div class="system-description" id="systemDescription">
486
+ <p>Select a system from the buttons above to view its components. The 2013 Hyundai Genesis Coupe features a sophisticated combination of mechanical and electrical systems working together to deliver performance and comfort.</p>
487
+ </div>
488
+
489
+ <div class="component-list" id="componentList">
490
+ <!-- Components will be added dynamically -->
491
+ </div>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="toggle-labels" id="toggleLabels">
496
+ <i class="fas fa-eye"></i>
497
+ </div>
498
+
499
+ <script>
500
+ // Car component data organized by system
501
+ const carComponents = {
502
+ exterior: {
503
+ name: "Exterior Components",
504
+ description: "The exterior system includes all visible parts of the vehicle that contribute to its aerodynamics, styling, and protection.",
505
+ components: [
506
+ { name: "Front Bumper", position: { x: 30, y: 45 }, description: "Absorbs impact in front collisions and houses fog lights" },
507
+ { name: "Hood", position: { x: 45, y: 25 }, description: "Protects the engine compartment and provides access for maintenance" },
508
+ { name: "Headlights", position: { x: 25, y: 35 }, description: "Provides illumination and houses turn signals" },
509
+ { name: "Grille", position: { x: 50, y: 30 }, description: "Allows airflow to the radiator and engine bay" },
510
+ { name: "Fenders", position: { x: 35, y: 40 }, description: "Covers the wheel wells and protects against road debris" },
511
+ { name: "Doors", position: { x: 60, y: 50 }, description: "Provides entry/exit and houses windows and side mirrors" },
512
+ { name: "Side Mirrors", position: { x: 20, y: 50 }, description: "Provides rear visibility for the driver" },
513
+ { name: "Windows", position: { x: 65, y: 45 }, description: "Provides visibility and protection from elements" },
514
+ { name: "Rear Bumper", position: { x: 70, y: 45 }, description: "Absorbs impact in rear collisions and houses reverse lights" },
515
+ { name: "Taillights", position: { x: 75, y: 35 }, description: "Signals braking and provides rear illumination" },
516
+ { name: "Trunk Lid", position: { x: 80, y: 25 }, description: "Provides access to cargo area" },
517
+ { name: "Wheels", position: { x: 40, y: 70 }, description: "Supports vehicle weight and provides mobility" },
518
+ { name: "Tires", position: { x: 40, y: 75 }, description: "Provides traction and absorbs road imperfections" },
519
+ { name: "Roof", position: { x: 50, y: 15 }, description: "Provides structural support and protection" },
520
+ { name: "Windshield", position: { x: 50, y: 20 }, description: "Provides forward visibility and structural support" },
521
+ { name: "Rear Spoiler", position: { x: 85, y: 15 }, description: "Improves aerodynamics and rear downforce" }
522
+ ]
523
+ },
524
+ engine: {
525
+ name: "Engine System",
526
+ description: "The engine system is the powerplant of the vehicle, converting fuel into mechanical energy to propel the car.",
527
+ components: [
528
+ { name: "3.8L V6 Engine", position: { x: 50, y: 35 }, description: "Lambda V6 engine producing 306 hp @ 6300 rpm" },
529
+ { name: "Engine Block", position: { x: 50, y: 38 }, description: "Aluminum block with cast iron cylinder liners" },
530
+ { name: "Cylinder Heads", position: { x: 50, y: 32 }, description: "Dual overhead camshaft (DOHC) design with 24 valves" },
531
+ { name: "Intake Manifold", position: { x: 45, y: 30 }, description: "Distributes air to the cylinders" },
532
+ { name: "Exhaust Manifold", position: { x: 55, y: 30 }, description: "Collects exhaust gases from the cylinders" },
533
+ { name: "Turbocharger (2.0T)", position: { x: 50, y: 40 }, description: "Twin-scroll turbocharger for forced induction (2.0T model)" },
534
+ { name: "Intercooler", position: { x: 40, y: 35 }, description: "Cools compressed air before entering the engine" },
535
+ { name: "Throttle Body", position: { x: 48, y: 28 }, description: "Controls airflow into the engine" },
536
+ { name: "Fuel Injectors", position: { x: 50, y: 34 }, description: "Delivers fuel directly into the combustion chambers" },
537
+ { name: "Spark Plugs", position: { x: 50, y: 33 }, description: "Ignites the air-fuel mixture in each cylinder" },
538
+ { name: "Oil Pan", position: { x: 50, y: 42 }, description: "Stores engine oil and houses the oil pump" },
539
+ { name: "Oil Pump", position: { x: 50, y: 43 }, description: "Circulates oil throughout the engine" },
540
+ { name: "Water Pump", position: { x: 55, y: 38 }, description: "Circulates coolant through the engine" },
541
+ { name: "Radiator", position: { x: 60, y: 30 }, description: "Cools engine coolant using airflow" },
542
+ { name: "Engine Mounts", position: { x: 45, y: 45 }, description: "Secures engine to the chassis and absorbs vibrations" },
543
+ { name: "Serpentine Belt", position: { x: 55, y: 40 }, description: "Drives engine accessories (alternator, power steering, etc.)" },
544
+ { name: "Alternator", position: { x: 60, y: 40 }, description: "Generates electrical power and charges the battery" }
545
+ ]
546
+ },
547
+ transmission: {
548
+ name: "Transmission System",
549
+ description: "The transmission system transfers power from the engine to the wheels, allowing for different gear ratios to optimize performance and efficiency.",
550
+ components: [
551
+ { name: "6-Speed Manual Transmission", position: { x: 55, y: 45 }, description: "Close-ratio gearbox for performance driving" },
552
+ { name: "8-Speed Automatic Transmission", position: { x: 55, y: 45 }, description: "Electronically controlled with manual shift mode" },
553
+ { name: "Clutch Assembly", position: { x: 53, y: 45 }, description: "Engages and disengages engine power to the transmission" },
554
+ { name: "Flywheel", position: { x: 52, y: 45 }, description: "Smooths engine power delivery and provides clutch surface" },
555
+ { name: "Transmission Case", position: { x: 55, y: 47 }, description: "Houses gears, shafts, and transmission fluid" },
556
+ { name: "Gear Set", position: { x: 55, y: 46 }, description: "Multiple gear ratios for different speed ranges" },
557
+ { name: "Synchronizers", position: { x: 55, y: 46 }, description: "Allows smooth gear engagement" },
558
+ { name: "Shift Linkage", position: { x: 55, y: 44 }, description: "Connects shift lever to transmission" },
559
+ { name: "Driveshaft", position: { x: 60, y: 50 }, description: "Transfers power from transmission to differential" },
560
+ { name: "Differential", position: { x: 65, y: 55 }, description: "Allows wheels to rotate at different speeds" },
561
+ { name: "Axle Shafts", position: { x: 65, y: 60 }, description: "Transfers power from differential to wheels" },
562
+ { name: "CV Joints", position: { x: 65, y: 62 }, description: "Allows power transfer at varying angles" },
563
+ { name: "Transmission Mounts", position: { x: 55, y: 50 }, description: "Secures transmission to the chassis" },
564
+ { name: "Transmission Fluid", position: { x: 55, y: 48 }, description: "Lubricates and cools transmission components" },
565
+ { name: "Torque Converter (Auto)", position: { x: 54, y: 45 }, description: "Transfers power from engine to transmission fluid" },
566
+ { name: "Valve Body (Auto)", position: { x: 55, y: 46 }, description: "Controls fluid flow for gear changes" }
567
+ ]
568
+ },
569
+ suspension: {
570
+ name: "Suspension System",
571
+ description: "The suspension system provides ride comfort, handling stability, and maintains tire contact with the road surface.",
572
+ components: [
573
+ { name: "Front Struts", position: { x: 35, y: 55 }, description: "Combines shock absorber and spring in one unit" },
574
+ { name: "Rear Shock Absorbers", position: { x: 70, y: 55 }, description: "Dampens suspension movement" },
575
+ { name: "Coil Springs", position: { x: 35, y: 58 }, description: "Supports vehicle weight and absorbs road impacts" },
576
+ { name: "Control Arms", position: { x: 35, y: 60 }, description: "Connects suspension to the chassis" },
577
+ { name: "Sway Bars", position: { x: 50, y: 60 }, description: "Reduces body roll during cornering" },
578
+ { name: "Bushings", position: { x: 35, y: 62 }, description: "Absorbs vibrations between suspension components" },
579
+ { name: "Ball Joints", position: { x: 35, y: 65 }, description: "Allows pivoting movement in the suspension" },
580
+ { name: "Tie Rods", position: { x: 35, y: 68 }, description: "Connects steering system to wheels" },
581
+ { name: "Wheel Bearings", position: { x: 40, y: 70 }, description: "Allows wheels to rotate smoothly" },
582
+ { name: "Subframe", position: { x: 50, y: 65 }, description: "Structural component that supports suspension" },
583
+ { name: "Strut Mounts", position: { x: 35, y: 52 }, description: "Connects struts to the chassis" },
584
+ { name: "Lower Control Arms", position: { x: 35, y: 63 }, description: "Supports the wheel assembly" },
585
+ { name: "Upper Control Arms", position: { x: 35, y: 57 }, description: "Provides additional suspension support" },
586
+ { name: "Suspension Bushings", position: { x: 35, y: 61 }, description: "Reduces noise and vibration transfer" },
587
+ { name: "Wheel Hubs", position: { x: 40, y: 72 }, description: "Mounting point for wheels and bearings" }
588
+ ]
589
+ },
590
+ brakes: {
591
+ name: "Brake System",
592
+ description: "The brake system provides stopping power and control, converting kinetic energy into heat through friction.",
593
+ components: [
594
+ { name: "Brake Pedal", position: { x: 20, y: 65 }, description: "Driver interface for brake activation" },
595
+ { name: "Brake Booster", position: { x: 25, y: 55 }, description: "Amplifies brake pedal force" },
596
+ { name: "Master Cylinder", position: { x: 25, y: 50 }, description: "Converts pedal force to hydraulic pressure" },
597
+ { name: "Brake Lines", position: { x: 30, y: 55 }, description: "Transfers hydraulic fluid to brake components" },
598
+ { name: "Front Brake Calipers", position: { x: 35, y: 65 }, description: "Houses brake pads and pistons" },
599
+ { name: "Rear Brake Calipers", position: { x: 70, y: 65 }, description: "Houses brake pads and pistons" },
600
+ { name: "Brake Rotors", position: { x: 35, y: 68 }, description: "Provides friction surface for brake pads" },
601
+ { name: "Brake Pads", position: { x: 35, y: 67 }, description: "Friction material that contacts the rotors" },
602
+ { name: "Parking Brake", position: { x: 75, y: 60 }, description: "Mechanical brake system for parking" },
603
+ { name: "ABS Module", position: { x: 30, y: 50 }, description: "Prevents wheel lockup during hard braking" },
604
+ { name: "Brake Fluid Reservoir", position: { x: 25, y: 45 }, description: "Stores hydraulic fluid for the brake system" },
605
+ { name: "Brake Hoses", position: { x: 30, y: 60 }, description: "Flexible connections between brake lines and calipers" },
606
+ { name: "Wheel Speed Sensors", position: { x: 35, y: 70 }, description: "Monitors wheel speed for ABS system" },
607
+ { name: "Brake Proportioning Valve", position: { x: 30, y: 52 }, description: "Balances brake pressure between front and rear" },
608
+ { name: "Emergency Brake Cable", position: { x: 75, y: 62 }, description: "Mechanical cable for parking brake" }
609
+ ]
610
+ },
611
+ electrical: {
612
+ name: "Electrical System",
613
+ description: "The electrical system powers all electronic components, provides starting power, and manages vehicle systems through computer control.",
614
+ components: [
615
+ { name: "Battery", position: { x: 25, y: 45 }, description: "12-volt lead-acid battery providing electrical power" },
616
+ { name: "Starter Motor", position: { x: 50, y: 48 }, description: "Engages flywheel to start the engine" },
617
+ { name: "ECU (Engine Control Unit)", position: { x: 50, y: 35 }, description: "Manages engine performance and emissions" },
618
+ { name: "Fusible Links", position: { x: 20, y: 40 }, description: "Protects wiring from electrical overload" },
619
+ { name: "Fuse Box", position: { x: 20, y: 42 }, description: "Houses fuses for electrical circuits" },
620
+ { name: "Relay Box", position: { x: 20, y: 44 }, description: "Contains relays for high-current components" },
621
+ { name: "Wiring Harness", position: { x: 50, y: 40 }, description: "Organized bundle of electrical wires" },
622
+ { name: "Ignition System", position: { x: 50, y: 33 }, description: "Controls spark timing and delivery" },
623
+ { name: "Sensors (Various)", position: { x: 50, y: 38 }, description: "Monitors engine and vehicle parameters" },
624
+ { name: "Lighting System", position: { x: 50, y: 25 }, description: "Exterior and interior lighting components" },
625
+ { name: "Instrument Cluster", position: { x: 50, y: 20 }, description: "Displays vehicle information to the driver" },
626
+ { name: "Power Windows", position: { x: 60, y: 45 }, description: "Electric window regulators" },
627
+ { name: "Power Door Locks", position: { x: 60, y: 48 }, description: "Electric door locking mechanism" },
628
+ { name: "Audio System", position: { x: 50, y: 22 }, description: "Entertainment and information system" },
629
+ { name: "Climate Control", position: { x: 50, y: 23 }, description: "HVAC system for cabin comfort" },
630
+ { name: "OBD-II Port", position: { x: 30, y: 48 }, description: "Diagnostic interface for vehicle systems" }
631
+ ]
632
+ },
633
+ interior: {
634
+ name: "Interior Components",
635
+ description: "The interior system includes all components that provide comfort, convenience, and control for the driver and passengers.",
636
+ components: [
637
+ { name: "Dashboard", position: { x: 50, y: 20 }, description: "Houses instruments and controls" },
638
+ { name: "Steering Wheel", position: { x: 50, y: 25 }, description: "Driver interface for steering and controls" },
639
+ { name: "Seats", position: { x: 50, y: 40 }, description: "Driver and passenger seating" },
640
+ { name: "Center Console", position: { x: 50, y: 45 }, description: "Houses controls and storage" },
641
+ { name: "Gear Shift", position: { x: 50, y: 48 }, description: "Transmission control interface" },
642
+ { name: "Pedals", position: { x: 50, y: 65 }, description: "Accelerator, brake, and clutch pedals" },
643
+ { name: "Instrument Cluster", position: { x: 50, y: 20 }, description: "Displays speed, RPM, and vehicle status" },
644
+ { name: "HVAC Controls", position: { x: 50, y: 22 }, description: "Climate control system interface" },
645
+ { name: "Audio System", position: { x: 50, y: 23 }, description: "Entertainment and information display" },
646
+ { name: "Door Panels", position: { x: 60, y: 45 }, description: "Interior door trim and controls" },
647
+ { name: "Headliner", position: { x: 50, y: 10 }, description: "Interior roof covering" },
648
+ { name: "