Hugging Face's logo

Spaces:
Karmastudios
/
anycoder-94bb464a
Running

App Files Community
Karmastudios commited on
Commit
97bec04
·
verified ·
1 Parent(s): df0227e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1376 -19
index.html CHANGED
@@ -1,19 +1,1376 @@
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>ECU Tuner Pro | Dyno Dashboard</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
+ --bg-primary: #0a0e14;
11
+ --bg-secondary: #121820;
12
+ --bg-tertiary: #1a222e;
13
+ --bg-card: #151c26;
14
+ --accent-cyan: #00d4ff;
15
+ --accent-orange: #ff6b35;
16
+ --accent-green: #00ff88;
17
+ --accent-red: #ff3366;
18
+ --accent-yellow: #ffcc00;
19
+ --accent-purple: #a855f7;
20
+ --text-primary: #e8edf4;
21
+ --text-secondary: #8b97a8;
22
+ --text-muted: #5a6474;
23
+ --border-color: #2a3544;
24
+ --glow-cyan: 0 0 20px rgba(0, 212, 255, 0.3);
25
+ --glow-orange: 0 0 20px rgba(255, 107, 53, 0.3);
26
+ --glow-green: 0 0 20px rgba(0, 255, 136, 0.3);
27
+ }
28
+
29
+ * {
30
+ margin: 0;
31
+ padding: 0;
32
+ box-sizing: border-box;
33
+ }
34
+
35
+ body {
36
+ font-family: 'Segoe UI', 'Roboto', mon: var(--bgospace;
37
+ background-primary);
38
+ color: var(--text-primary);
39
+ min-height: 100vh;
40
+ overflow-x: hidden;
41
+ }
42
+
43
+ /* Header */
44
+ .header {
45
+ background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
46
+ border-bottom: 1px solid var(--border-color);
47
+ padding: 0.75rem 1.5rem;
48
+ display: flex;
49
+ justify-content: space-between;
50
+ align-items: center;
51
+ position: sticky;
52
+ top: 0;
53
+ z-index: 100;
54
+ }
55
+
56
+ .logo-section {
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 1rem;
60
+ }
61
+
62
+ .logo {
63
+ width: 42px;
64
+ height: 42px;
65
+ background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
66
+ border-radius: 10px;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ font-size: 1.2rem;
71
+ font-weight: bold;
72
+ box-shadow: var(--glow-cyan);
73
+ }
74
+
75
+ .brand {
76
+ display: flex;
77
+ flex-direction: column;
78
+ }
79
+
80
+ .brand h1 {
81
+ font-size: 1.1rem;
82
+ font-weight: 700;
83
+ letter-spacing: 0.5px;
84
+ background: linear-gradient(90deg, var(--accent-cyan), var(--text-primary));
85
+ -webkit-background-clip: text;
86
+ -webkit-text-fill-color: transparent;
87
+ background-clip: text;
88
+ }
89
+
90
+ .brand span {
91
+ font-size: 0.7rem;
92
+ color: var(--text-muted);
93
+ text-transform: uppercase;
94
+ letter-spacing: 2px;
95
+ }
96
+
97
+ .header-controls {
98
+ display: flex;
99
+ align-items: center;
100
+ gap: 1rem;
101
+ }
102
+
103
+ .connection-status {
104
+ display: flex;
105
+ align-items: center;
106
+ gap: 0.5rem;
107
+ padding: 0.4rem 0.8rem;
108
+ background: var(--bg-tertiary);
109
+ border-radius: 20px;
110
+ font-size: 0.75rem;
111
+ border: 1px solid var(--border-color);
112
+ }
113
+
114
+ .status-dot {
115
+ width: 8px;
116
+ height: 8px;
117
+ border-radius: 50%;
118
+ background: var(--accent-green);
119
+ box-shadow: var(--glow-green);
120
+ animation: pulse 2s infinite;
121
+ }
122
+
123
+ @keyframes pulse {
124
+ 0%, 100% { opacity: 1; }
125
+ 50% { opacity: 0.5; }
126
+ }
127
+
128
+ .header-btn {
129
+ padding: 0.5rem 1rem;
130
+ background: var(--bg-tertiary);
131
+ border: 1px solid var(--border-color);
132
+ color: var(--text-primary);
133
+ border-radius: 8px;
134
+ cursor: pointer;
135
+ font-size: 0.85rem;
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 0.5rem;
139
+ transition: all 0.2s;
140
+ }
141
+
142
+ .header-btn:hover {
143
+ background: var(--accent-cyan);
144
+ color: var(--bg-primary);
145
+ border-color: var(--accent-cyan);
146
+ }
147
+
148
+ .header-btn.primary {
149
+ background: linear-gradient(135deg, var(--accent-cyan), #0099cc);
150
+ border: none;
151
+ }
152
+
153
+ /* Main Layout */
154
+ .main-container {
155
+ display: grid;
156
+ grid-template-columns: 280px 1fr 320px;
157
+ gap: 1rem;
158
+ padding: 1rem;
159
+ min-height: calc(100vh - 70px);
160
+ }
161
+
162
+ @media (max-width: 1400px) {
163
+ .main-container {
164
+ grid-template-columns: 1fr;
165
+ }
166
+ }
167
+
168
+ /* Panels */
169
+ .panel {
170
+ background: var(--bg-card);
171
+ border: 1px solid var(--border-color);
172
+ border-radius: 12px;
173
+ overflow: hidden;
174
+ }
175
+
176
+ .panel-header {
177
+ padding: 0.75rem 1rem;
178
+ background: var(--bg-secondary);
179
+ border-bottom: 1px solid var(--border-color);
180
+ display: flex;
181
+ justify-content: space-between;
182
+ align-items: center;
183
+ }
184
+
185
+ .panel-title {
186
+ font-size: 0.8rem;
187
+ font-weight: 600;
188
+ text-transform: uppercase;
189
+ letter-spacing: 1px;
190
+ color: var(--text-secondary);
191
+ display: flex;
192
+ align-items: center;
193
+ gap: 0.5rem;
194
+ }
195
+
196
+ .panel-title i {
197
+ color: var(--accent-cyan);
198
+ }
199
+
200
+ .panel-content {
201
+ padding: 1rem;
202
+ }
203
+
204
+ /* Left Sidebar */
205
+ .sidebar {
206
+ display: flex;
207
+ flex-direction: column;
208
+ gap: 1rem;
209
+ }
210
+
211
+ /* Sensor List */
212
+ .sensor-list {
213
+ display: flex;
214
+ flex-direction: column;
215
+ gap: 0.5rem;
216
+ }
217
+
218
+ .sensor-item {
219
+ display: flex;
220
+ justify-content: space-between;
221
+ align-items: center;
222
+ padding: 0.6rem 0.8rem;
223
+ background: var(--bg-tertiary);
224
+ border-radius: 8px;
225
+ border: 1px solid transparent;
226
+ transition: all 0.2s;
227
+ }
228
+
229
+ .sensor-item:hover {
230
+ border-color: var(--accent-cyan);
231
+ }
232
+
233
+ .sensor-item .label {
234
+ font-size: 0.75rem;
235
+ color: var(--text-secondary);
236
+ }
237
+
238
+ .sensor-item .value {
239
+ font-size: 0.9rem;
240
+ font-weight: 600;
241
+ font-family: 'Courier New', monospace;
242
+ }
243
+
244
+ .sensor-item .unit {
245
+ font-size: 0.7rem;
246
+ color: var(--text-muted);
247
+ margin-left: 2px;
248
+ }
249
+
250
+ /* Gauges */
251
+ .gauge-container {
252
+ display: grid;
253
+ grid-template-columns: repeat(2, 1fr);
254
+ gap: 1rem;
255
+ }
256
+
257
+ .gauge {
258
+ position: relative;
259
+ width: 100%;
260
+ aspect-ratio: 1;
261
+ background: var(--bg-tertiary);
262
+ border-radius: 50%;
263
+ display: flex;
264
+ flex-direction: column;
265
+ align-items: center;
266
+ justify-content: center;
267
+ border: 2px solid var(--border-color);
268
+ box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
269
+ }
270
+
271
+ .gauge::before {
272
+ content: '';
273
+ position: absolute;
274
+ width: 85%;
275
+ height: 85%;
276
+ border-radius: 50%;
277
+ background: conic-gradient(
278
+ from 135deg,
279
+ var(--accent-cyan) 0deg,
280
+ var(--accent-cyan) var(--value, 180deg),
281
+ var(--bg-primary) var(--value, 180deg),
282
+ var(--bg-primary) 270deg,
283
+ transparent 270deg
284
+ );
285
+ opacity: 0.3;
286
+ }
287
+
288
+ .gauge::after {
289
+ content: '';
290
+ position: absolute;
291
+ width: 70%;
292
+ height: 70%;
293
+ border-radius: 50%;
294
+ background: var(--bg-card);
295
+ z-index: 1;
296
+ }
297
+
298
+ .gauge-value {
299
+ position: relative;
300
+ z-index: 2;
301
+ text-align: center;
302
+ }
303
+
304
+ .gauge-value .number {
305
+ font-size: 1.8rem;
306
+ font-weight: 700;
307
+ font-family: 'Courier New', monospace;
308
+ line-height: 1;
309
+ }
310
+
311
+ .gauge-value .number.boost {
312
+ color: var(--accent-green);
313
+ text-shadow: var(--glow-green);
314
+ }
315
+
316
+ .gauge-value .number.rpm {
317
+ color: var(--accent-orange);
318
+ text-shadow: var(--glow-orange);
319
+ }
320
+
321
+ .gauge-value .unit {
322
+ font-size: 0.7rem;
323
+ color: var(--text-muted);
324
+ text-transform: uppercase;
325
+ letter-spacing: 1px;
326
+ }
327
+
328
+ .gauge-label {
329
+ position: relative;
330
+ z-index: 2;
331
+ font-size: 0.65rem;
332
+ color: var(--text-secondary);
333
+ margin-top: 0.3rem;
334
+ text-transform: uppercase;
335
+ letter-spacing: 1px;
336
+ }
337
+
338
+ /* Center Section */
339
+ .center-section {
340
+ display: flex;
341
+ flex-direction: column;
342
+ gap: 1rem;
343
+ }
344
+
345
+ /* Main Gauges Row */
346
+ .main-gauges {
347
+ display: grid;
348
+ grid-template-columns: repeat(4, 1fr);
349
+ gap: 1rem;
350
+ }
351
+
352
+ @media (max-width: 900px) {
353
+ .main-gauges {
354
+ grid-template-columns: repeat(2, 1fr);
355
+ }
356
+ }
357
+
358
+ .main-gauge-card {
359
+ background: var(--bg-card);
360
+ border: 1px solid var(--border-color);
361
+ border-radius: 12px;
362
+ padding: 1.2rem;
363
+ text-align: center;
364
+ position: relative;
365
+ overflow: hidden;
366
+ }
367
+
368
+ .main-gauge-card::before {
369
+ content: '';
370
+ position: absolute;
371
+ top: 0;
372
+ left: 0;
373
+ right: 0;
374
+ height: 3px;
375
+ background: var(--accent-cyan);
376
+ }
377
+
378
+ .main-gauge-card.boost::before {
379
+ background: var(--accent-green);
380
+ }
381
+
382
+ .main-gauge-card.rpm::before {
383
+ background: var(--accent-orange);
384
+ }
385
+
386
+ .main-gauge-card.temp::before {
387
+ background: var(--accent-red);
388
+ }
389
+
390
+ .main-gauge-card.fuel::before {
391
+ background: var(--accent-yellow);
392
+ }
393
+
394
+ .main-gauge-icon {
395
+ width: 36px;
396
+ height: 36px;
397
+ margin: 0 auto 0.5rem;
398
+ background: var(--bg-tertiary);
399
+ border-radius: 50%;
400
+ display: flex;
401
+ align-items: center;
402
+ justify-content: center;
403
+ font-size: 0.9rem;
404
+ color: var(--accent-cyan);
405
+ }
406
+
407
+ .main-gauge-card.boost .main-gauge-icon {
408
+ color: var(--accent-green);
409
+ }
410
+
411
+ .main-gauge-card.rpm .main-gauge-icon {
412
+ color: var(--accent-orange);
413
+ }
414
+
415
+ .main-gauge-card.temp .main-gauge-icon {
416
+ color: var(--accent-red);
417
+ }
418
+
419
+ .main-gauge-card.fuel .main-gauge-icon {
420
+ color: var(--accent-yellow);
421
+ }
422
+
423
+ .main-gauge-value {
424
+ font-size: 2rem;
425
+ font-weight: 700;
426
+ font-family: 'Courier New', monospace;
427
+ line-height: 1;
428
+ margin-bottom: 0.2rem;
429
+ }
430
+
431
+ .main-gauge-card.boost .main-gauge-value {
432
+ color: var(--accent-green);
433
+ }
434
+
435
+ .main-gauge-card.rpm .main-gauge-value {
436
+ color: var(--accent-orange);
437
+ }
438
+
439
+ .main-gauge-card.temp .main-gauge-value {
440
+ color: var(--accent-red);
441
+ }
442
+
443
+ .main-gauge-card.fuel .main-gauge-value {
444
+ color: var(--accent-yellow);
445
+ }
446
+
447
+ .main-gauge-unit {
448
+ font-size: 0.7rem;
449
+ color: var(--text-muted);
450
+ text-transform: uppercase;
451
+ }
452
+
453
+ .main-gauge-label {
454
+ font-size: 0.7rem;
455
+ color: var(--text-secondary);
456
+ margin-top: 0.5rem;
457
+ }
458
+
459
+ .main-gauge-minmax {
460
+ display: flex;
461
+ justify-content: space-between;
462
+ font-size: 0.6rem;
463
+ color: var(--text-muted);
464
+ margin-top: 0.3rem;
465
+ font-family: 'Courier New', monospace;
466
+ }
467
+
468
+ /* Map Grid */
469
+ .maps-section {
470
+ display: grid;
471
+ grid-template-columns: repeat(2, 1fr);
472
+ gap: 1rem;
473
+ }
474
+
475
+ @media (max-width: 1100px) {
476
+ .maps-section {
477
+ grid-template-columns: 1fr;
478
+ }
479
+ }
480
+
481
+ .map-grid {
482
+ display: grid;
483
+ grid-template-columns: 50px repeat(8, 1fr);
484
+ gap: 2px;
485
+ font-size: 0.65rem;
486
+ }
487
+
488
+ .map-grid-header {
489
+ background: var(--bg-tertiary);
490
+ padding: 0.3rem;
491
+ text-align: center;
492
+ color: var(--text-secondary);
493
+ font-weight: 600;
494
+ }
495
+
496
+ .map-grid-row-header {
497
+ background: var(--bg-tertiary);
498
+ padding: 0.3rem;
499
+ text-align: center;
500
+ color: var(--text-secondary);
501
+ font-weight: 600;
502
+ display: flex;
503
+ align-items: center;
504
+ justify-content: center;
505
+ }
506
+
507
+ .map-cell {
508
+ background: var(--bg-secondary);
509
+ padding: 0.3rem;
510
+ text-align: center;
511
+ font-family: 'Courier New', monospace;
512
+ cursor: pointer;
513
+ transition: all 0.15s;
514
+ border: 1px solid transparent;
515
+ }
516
+
517
+ .map-cell:hover {
518
+ background: var(--accent-cyan);
519
+ color: var(--bg-primary);
520
+ transform: scale(1.05);
521
+ z-index: 1;
522
+ border-color: var(--accent-cyan);
523
+ }
524
+
525
+ .map-cell.high {
526
+ color: var(--accent-red);
527
+ }
528
+
529
+ .map-cell.medium {
530
+ color: var(--accent-yellow);
531
+ }
532
+
533
+ .map-cell.low {
534
+ color: var(--accent-green);
535
+ }
536
+
537
+ /* Timing Grid */
538
+ .timing-grid {
539
+ display: grid;
540
+ grid-template-columns: repeat(12, 1fr);
541
+ gap: 3px;
542
+ }
543
+
544
+ .timing-cell {
545
+ aspect-ratio: 1;
546
+ background: var(--bg-secondary);
547
+ border-radius: 4px;
548
+ display: flex;
549
+ align-items: center;
550
+ justify-content: center;
551
+ font-size: 0.7rem;
552
+ font-family: 'Courier New', monospace;
553
+ cursor: pointer;
554
+ transition: all 0.15s;
555
+ border: 1px solid var(--border-color);
556
+ }
557
+
558
+ .timing-cell:hover {
559
+ transform: scale(1.1);
560
+ border-color: var(--accent-cyan);
561
+ z-index: 2;
562
+ }
563
+
564
+ .timing-cell.advanced {
565
+ background: linear-gradient(135deg, var(--accent-green), #00cc66);
566
+ color: var(--bg-primary);
567
+ font-weight: 600;
568
+ }
569
+
570
+ .timing-cell.retarded {
571
+ background: linear-gradient(135deg, var(--accent-red), #cc2255);
572
+ color: var(--text-primary);
573
+ font-weight: 600;
574
+ }
575
+
576
+ .timing-cell.stock {
577
+ background: var(--bg-tertiary);
578
+ color: var(--text-secondary);
579
+ }
580
+
581
+ /* Right Sidebar */
582
+ .right-sidebar {
583
+ display: flex;
584
+ flex-direction: column;
585
+ gap: 1rem;
586
+ }
587
+
588
+ /* Bar Gauges */
589
+ .bar-gauge {
590
+ margin-bottom: 1rem;
591
+ }
592
+
593
+ .bar-gauge-header {
594
+ display: flex;
595
+ justify-content: space-between;
596
+ margin-bottom: 0.4rem;
597
+ }
598
+
599
+ .bar-gauge-label {
600
+ font-size: 0.75rem;
601
+ color: var(--text-secondary);
602
+ }
603
+
604
+ .bar-gauge-value {
605
+ font-size: 0.75rem;
606
+ font-family: 'Courier New', monospace;
607
+ font-weight: 600;
608
+ }
609
+
610
+ .bar-gauge-track {
611
+ height: 8px;
612
+ background: var(--bg-tertiary);
613
+ border-radius: 4px;
614
+ overflow: hidden;
615
+ position: relative;
616
+ }
617
+
618
+ .bar-gauge-fill {
619
+ height: 100%;
620
+ border-radius: 4px;
621
+ transition: width 0.3s ease;
622
+ position: relative;
623
+ }
624
+
625
+ .bar-gauge-fill::after {
626
+ content: '';
627
+ position: absolute;
628
+ top: 0;
629
+ left: 0;
630
+ right: 0;
631
+ bottom: 0;
632
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
633
+ animation: shimmer 2s infinite;
634
+ }
635
+
636
+ @keyframes shimmer {
637
+ 0% { transform: translateX(-100%); }
638
+ 100% { transform: translateX(100%); }
639
+ }
640
+
641
+ .bar-gauge-fill.maf {
642
+ background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
643
+ }
644
+
645
+ .bar-gauge-fill.timing {
646
+ background: linear-gradient(90deg, var(--accent-green), var(--accent-yellow), var(--accent-red));
647
+ }
648
+
649
+ .bar-gauge-fill.fuel {
650
+ background: linear-gradient(90deg, var(--accent-yellow), var(--accent-orange));
651
+ }
652
+
653
+ .bar-gauge-fill.voltage {
654
+ background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
655
+ }
656
+
657
+ .bar-gauge-markers {
658
+ display: flex;
659
+ justify-content: space-between;
660
+ margin-top: 0.2rem;
661
+ font-size: 0.6rem;
662
+ color: var(--text-muted);
663
+ }
664
+
665
+ /* 3D Surface Map */
666
+ .surface-map {
667
+ height: 200px;
668
+ background: var(--bg-tertiary);
669
+ border-radius: 8px;
670
+ position: relative;
671
+ overflow: hidden;
672
+ display: flex;
673
+ align-items: flex-end;
674
+ justify-content: space-around;
675
+ padding: 1rem;
676
+ }
677
+
678
+ .surface-bar {
679
+ width: 30px;
680
+ background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple));
681
+ border-radius: 4px 4px 0 0;
682
+ transition: height 0.3s ease;
683
+ position: relative;
684
+ }
685
+
686
+ .surface-bar::after {
687
+ content: attr(data-value);
688
+ position: absolute;
689
+ top: -20px;
690
+ left: 50%;
691
+ transform: translateX(-50%);
692
+ font-size: 0.65rem;
693
+ font-family: 'Courier New', monospace;
694
+ color: var(--text-secondary);
695
+ }
696
+
697
+ /* Data Tables */
698
+ .data-table {
699
+ width: 100%;
700
+ border-collapse: collapse;
701
+ font-size: 0.7rem;
702
+ }
703
+
704
+ .data-table th {
705
+ background: var(--bg-tertiary);
706
+ padding: 0.5rem;
707
+ text-align: left;
708
+ color: var(--text-secondary);
709
+ font-weight: 600;
710
+ text-transform: uppercase;
711
+ letter-spacing: 0.5px;
712
+ }
713
+
714
+ .data-table td {
715
+ padding: 0.4rem 0.5rem;
716
+ border-bottom: 1px solid var(--border-color);
717
+ font-family: 'Courier New', monospace;
718
+ }
719
+
720
+ .data-table tr:hover td {
721
+ background: var(--bg-tertiary);
722
+ }
723
+
724
+ .data-table .highlight {
725
+ color: var(--accent-cyan);
726
+ font-weight: 600;
727
+ }
728
+
729
+ .data-table .warning {
730
+ color: var(--accent-yellow);
731
+ }
732
+
733
+ .data-table .danger {
734
+ color: var(--accent-red);
735
+ }
736
+
737
+ /* Status Indicators */
738
+ .status-grid {
739
+ display: grid;
740
+ grid-template-columns: repeat(4, 1fr);
741
+ gap: 0.5rem;
742
+ }
743
+
744
+ .status-item {
745
+ text-align: center;
746
+ padding: 0.5rem;
747
+ background: var(--bg-tertiary);
748
+ border-radius: 8px;
749
+ border: 1px solid var(--border-color);
750
+ }
751
+
752
+ .status-item.active {
753
+ border-color: var(--accent-green);
754
+ background: rgba(0, 255, 136, 0.1);
755
+ }
756
+
757
+ .status-item.warning {
758
+ border-color: var(--accent-yellow);
759
+ background: rgba(255, 204, 0, 0.1);
760
+ }
761
+
762
+ .status-icon {
763
+ font-size: 0.8rem;
764
+ margin-bottom: 0.2rem;
765
+ }
766
+
767
+ .status-item.active .status-icon {
768
+ color: var(--accent-green);
769
+ }
770
+
771
+ .status-item.warning .status-icon {
772
+ color: var(--accent-yellow);
773
+ }
774
+
775
+ .status-label {
776
+ font-size: 0.6rem;
777
+ color: var(--text-muted);
778
+ text-transform: uppercase;
779
+ }
780
+
781
+ /* Buttons */
782
+ .btn-group {
783
+ display: flex;
784
+ gap: 0.5rem;
785
+ flex-wrap: wrap;
786
+ }
787
+
788
+ .btn {
789
+ padding: 0.4rem 0.8rem;
790
+ border: 1px solid var(--border-color);
791
+ background: var(--bg-tertiary);
792
+ color: var(--text-secondary);
793
+ border-radius: 6px;
794
+ font-size: 0.7rem;
795
+ cursor: pointer;
796
+ transition: all 0.2s;
797
+ text-transform: uppercase;
798
+ letter-spacing: 0.5px;
799
+ }
800
+
801
+ .btn:hover {
802
+ background: var(--accent-cyan);
803
+ color: var(--bg-primary);
804
+ border-color: var(--accent-cyan);
805
+ }
806
+
807
+ .btn.active {
808
+ background: var(--accent-cyan);
809
+ color: var(--bg-primary);
810
+ border-color: var(--accent-cyan);
811
+ }
812
+
813
+ .btn.danger {
814
+ border-color: var(--accent-red);
815
+ color: var(--accent-red);
816
+ }
817
+
818
+ .btn.danger:hover {
819
+ background: var(--accent-red);
820
+ color: var(--text-primary);
821
+ }
822
+
823
+ /* Tabs */
824
+ .tabs {
825
+ display: flex;
826
+ gap: 0.25rem;
827
+ background: var(--bg-tertiary);
828
+ padding: 0.25rem;
829
+ border-radius: 8px;
830
+ }
831
+
832
+ .tab {
833
+ flex: 1;
834
+ padding: 0.5rem;
835
+ text-align: center;
836
+ font-size: 0.7rem;
837
+ color: var(--text-secondary);
838
+ background: transparent;
839
+ border: none;
840
+ border-radius: 6px;
841
+ cursor: pointer;
842
+ transition: all 0.2s;
843
+ }
844
+
845
+ .tab.active {
846
+ background: var(--accent-cyan);
847
+ color: var(--bg-primary);
848
+ font-weight: 600;
849
+ }
850
+
851
+ /* RPM Gauge */
852
+ .rpm-gauge {
853
+ position: relative;
854
+ width: 100%;
855
+ max-width: 280px;
856
+ margin: 0 auto;
857
+ }
858
+
859
+ .rpm-arc {
860
+ fill: none;
861
+ stroke: var(--bg-tertiary);
862
+ stroke-width: 20;
863
+ }
864
+
865
+ .rpm-progress {
866
+ fill: none;
867
+ stroke: url(#rpmGradient);
868
+ stroke-width: 20;
869
+ stroke-linecap: round;
870
+ transform: rotate(-135deg);
871
+ transform-origin: center;
872
+ transition: stroke-dashoffset 0.3s ease;
873
+ }
874
+
875
+ .rpm-display {
876
+ position: absolute;
877
+ top: 50%;
878
+ left: 50%;
879
+ transform: translate(-50%, -50%);
880
+ text-align: center;
881
+ }
882
+
883
+ .rpm-value {
884
+ font-size: 2.5rem;
885
+ font-weight: 700;
886
+ font-family: 'Courier New', monospace;
887
+ color: var(--accent-orange);
888
+ text-shadow: var(--glow-orange);
889
+ }
890
+
891
+ .rpm-label {
892
+ font-size: 0.7rem;
893
+ color: var(--text-muted);
894
+ text-transform: uppercase;
895
+ letter-spacing: 2px;
896
+ }
897
+
898
+ /* Dyno Graph */
899
+ .dyno-graph {
900
+ height: 180px;
901
+ background: var(--bg-tertiary);
902
+ border-radius: 8px;
903
+ position: relative;
904
+ overflow: hidden;
905
+ }
906
+
907
+ .dyno-canvas {
908
+ width: 100%;
909
+ height: 100%;
910
+ }
911
+
912
+ /* Flex utilities */
913
+ .flex-row {
914
+ display: flex;
915
+ gap: 1rem;
916
+ }
917
+
918
+ .flex-col {
919
+ display: flex;
920
+ flex-direction: column;
921
+ gap: 1rem;
922
+ }
923
+
924
+ .mb-1 {
925
+ margin-bottom: 0.5rem;
926
+ }
927
+
928
+ /* Scrollbar */
929
+ ::-webkit-scrollbar {
930
+ width: 6px;
931
+ height: 6px;
932
+ }
933
+
934
+ ::-webkit-scrollbar-track {
935
+ background: var(--bg-secondary);
936
+ }
937
+
938
+ ::-webkit-scrollbar-thumb {
939
+ background: var(--border-color);
940
+ border-radius: 3px;
941
+ }
942
+
943
+ ::-webkit-scrollbar-thumb:hover {
944
+ background: var(--accent-cyan);
945
+ }
946
+
947
+ /* Footer link */
948
+ .built-with {
949
+ text-align: center;
950
+ padding: 1rem;
951
+ font-size: 0.75rem;
952
+ color: var(--text-muted);
953
+ }
954
+
955
+ .built-with a {
956
+ color: var(--accent-cyan);
957
+ text-decoration: none;
958
+ transition: color 0.2s;
959
+ }
960
+
961
+ .built-with a:hover {
962
+ color: var(--accent-purple);
963
+ }
964
+
965
+ /* Animations */
966
+ @keyframes glow {
967
+ 0%, 100% { box-shadow: 0 0 10px var(--accent-cyan); }
968
+ 50% { box-shadow: 0 0 25px var(--accent-cyan); }
969
+ }
970
+
971
+ .live-indicator {
972
+ display: flex;
973
+ align-items: center;
974
+ gap: 0.5rem;
975
+ }
976
+
977
+ .live-dot {
978
+ width: 8px;
979
+ height: 8px;
980
+ background: var(--accent-red);
981
+ border-radius: 50%;
982
+ animation: blink 1s infinite;
983
+ }
984
+
985
+ @keyframes blink {
986
+ 0%, 100% { opacity: 1; }
987
+ 50% { opacity: 0.3; }
988
+ }
989
+
990
+ /* Responsive */
991
+ @media (max-width: 768px) {
992
+ .main-container {
993
+ padding: 0.5rem;
994
+ gap: 0.5rem;
995
+ }
996
+
997
+ .header {
998
+ padding: 0.5rem 1rem;
999
+ flex-wrap: wrap;
1000
+ }
1001
+
1002
+ .brand h1 {
1003
+ font-size: 1rem;
1004
+ }
1005
+
1006
+ .main-gauges {
1007
+ grid-template-columns: repeat(2, 1fr);
1008
+ }
1009
+
1010
+ .maps-section {
1011
+ grid-template-columns: 1fr;
1012
+ }
1013
+ }
1014
+ </style>
1015
+ </head>
1016
+ <body>
1017
+ <!-- SVG Definitions -->
1018
+ <svg width="0" height="0">
1019
+ <defs>
1020
+ <linearGradient id="rpmGradient" x1="0%" y1="0%" x2="100%" y2="0%">
1021
+ <stop offset="0%" style="stop-color:#00ff88" />
1022
+ <stop offset="50%" style="stop-color:#ffcc00" />
1023
+ <stop offset="100%" style="stop-color:#ff3366" />
1024
+ </linearGradient>
1025
+ </defs>
1026
+ </svg>
1027
+
1028
+ <!-- Header -->
1029
+ <header class="header">
1030
+ <div class="logo-section">
1031
+ <div class="logo">
1032
+ <i class="fas fa-microchip"></i>
1033
+ </div>
1034
+ <div class="brand">
1035
+ <h1>ECU TUNER PRO</h1>
1036
+ <span>Dyno Dashboard</span>
1037
+ </div>
1038
+ </div>
1039
+
1040
+ <div class="header-controls">
1041
+ <div class="live-indicator">
1042
+ <span class="live-dot"></span>
1043
+ <span style="font-size: 0.75rem; color: var(--text-secondary);">LIVE</span>
1044
+ </div>
1045
+ <div class="connection-status">
1046
+ <div class="status-dot"></div>
1047
+ <span>ECU Connected</span>
1048
+ </div>
1049
+ <button class="header-btn">
1050
+ <i class="fas fa-save"></i> Save
1051
+ </button>
1052
+ <button class="header-btn primary">
1053
+ <i class="fas fa-bolt"></i> Tune
1054
+ </button>
1055
+ </div>
1056
+ </header>
1057
+
1058
+ <!-- Main Container -->
1059
+ <main class="main-container">
1060
+ <!-- Left Sidebar -->
1061
+ <aside class="sidebar">
1062
+ <!-- RPM Gauge -->
1063
+ <div class="panel">
1064
+ <div class="panel-header">
1065
+ <div class="panel-title">
1066
+ <i class="fas fa-tachometer-alt"></i>
1067
+ RPM
1068
+ </div>
1069
+ </div>
1070
+ <div class="panel-content" style="padding: 1.5rem;">
1071
+ <div class="rpm-gauge">
1072
+ <svg viewBox="0 0 200 200">
1073
+ <circle class="rpm-arc" cx="100" cy="100" r="80"
1074
+ stroke-dasharray="377" stroke-dashoffset="0" />
1075
+ <circle class="rpm-progress" cx="100" cy="100" r="80"
1076
+ stroke-dasharray="377" stroke-dashoffset="94" />
1077
+ </svg>
1078
+ <div class="rpm-display">
1079
+ <div class="rpm-value">6,850</div>
1080
+ <div class="rpm-label">RPM</div>
1081
+ </div>
1082
+ </div>
1083
+ </div>
1084
+ </div>
1085
+
1086
+ <!-- Sensors -->
1087
+ <div class="panel">
1088
+ <div class="panel-header">
1089
+ <div class="panel-title">
1090
+ <i class="fas fa-thermometer-half"></i>
1091
+ Sensors
1092
+ </div>
1093
+ </div>
1094
+ <div class="panel-content">
1095
+ <div class="sensor-list">
1096
+ <div class="sensor-item">
1097
+ <span class="label">Intake Temp</span>
1098
+ <span class="value" style="color: var(--accent-cyan);">32.5<span class="unit">°C</span></span>
1099
+ </div>
1100
+ <div class="sensor-item">
1101
+ <span class="label">Coolant Temp</span>
1102
+ <span class="value" style="color: var(--accent-red);">87.2<span class="unit">°C</span></span>
1103
+ </div>
1104
+ <div class="sensor-item">
1105
+ <span class="label">Exhaust Temp</span>
1106
+ <span class="value" style="color: var(--accent-orange);">645<span class="unit">°C</span></span>
1107
+ </div>
1108
+ <div class="sensor-item">
1109
+ <span class="label">Oil Temp</span>
1110
+ <span class="value" style="color: var(--accent-yellow);">94.8<span class="unit">°C</span></span>
1111
+ </div>
1112
+ <div class="sensor-item">
1113
+ <span class="label">Oil Pressure</span>
1114
+ <span class="value" style="color: var(--accent-green);">4.2<span class="unit">bar</span></span>
1115
+ </div>
1116
+ <div class="sensor-item">
1117
+ <span class="label">Fuel Pressure</span>
1118
+ <span class="value" style="color: var(--accent-purple);">5.8<span class="unit">bar</span></span>
1119
+ </div>
1120
+ <div class="sensor-item">
1121
+ <span class="label">Battery</span>
1122
+ <span class="value" style="color: var(--accent-cyan);">14.2<span class="unit">V</span></span>
1123
+ </div>
1124
+ <div class="sensor-item">
1125
+ <span class="label">Lambda</span>
1126
+ <span class="value" style="color: var(--accent-green);">0.98<span class="unit">λ</span></span>
1127
+ </div>
1128
+ </div>
1129
+ </div>
1130
+ </div>
1131
+
1132
+ <!-- Status -->
1133
+ <div class="panel">
1134
+ <div class="panel-header">
1135
+ <div class="panel-title">
1136
+ <i class="fas fa-check-circle"></i>
1137
+ System Status
1138
+ </div>
1139
+ </div>
1140
+ <div class="panel-content">
1141
+ <div class="status-grid">
1142
+ <div class="status-item active">
1143
+ <div class="status-icon"><i class="fas fa-engine"></i></div>
1144
+ <div class="status-label">Engine</div>
1145
+ </div>
1146
+ <div class="status-item active">
1147
+ <div class="status-icon"><i class="fas fa-burn"></i></div>
1148
+ <div class="status-label">Fuel</div>
1149
+ </div>
1150
+ <div class="status-item active">
1151
+ <div class="status-icon"><i class="fas fa-fire"></i></div>
1152
+ <div class="status-label">Ignition</div>
1153
+ </div>
1154
+ <div class="status-item warning">
1155
+ <div class="status-icon"><i class="fas fa-exclamation-triangle"></i></div>
1156
+ <div class="status-label">EGT</div>
1157
+ </div>
1158
+ </div>
1159
+ </div>
1160
+ </div>
1161
+ </aside>
1162
+
1163
+ <!-- Center Section -->
1164
+ <section class="center-section">
1165
+ <!-- Main Gauges -->
1166
+ <div class="main-gauges">
1167
+ <div class="main-gauge-card boost">
1168
+ <div class="main-gauge-icon">
1169
+ <i class="fas fa-wind"></i>
1170
+ </div>
1171
+ <div class="main-gauge-value">1.42</div>
1172
+ <div class="main-gauge-unit">bar</div>
1173
+ <div class="main-gauge-label">Boost Pressure</div>
1174
+ <div class="main-gauge-minmax">
1175
+ <span>0.0</span>
1176
+ <span>2.5</span>
1177
+ </div>
1178
+ </div>
1179
+
1180
+ <div class="main-gauge-card rpm">
1181
+ <div class="main-gauge-icon">
1182
+ <i class="fas fa-tachometer-alt"></i>
1183
+ </div>
1184
+ <div class="main-gauge-value">6,850</div>
1185
+ <div class="main-gauge-unit">RPM</div>
1186
+ <div class="main-gauge-label">Engine Speed</div>
1187
+ <div class="main-gauge-minmax">
1188
+ <span>0</span>
1189
+ <span>8000</span>
1190
+ </div>
1191
+ </div>
1192
+
1193
+ <div class="main-gauge-card temp">
1194
+ <div class="main-gauge-icon">
1195
+ <i class="fas fa-temperature-high"></i>
1196
+ </div>
1197
+ <div class="main-gauge-value">87.2</div>
1198
+ <div class="main-gauge-unit">°C</div>
1199
+ <div class="main-gauge-label">Coolant Temp</div>
1200
+ <div class="main-gauge-minmax">
1201
+ <span>40</span>
1202
+ <span>120</span>
1203
+ </div>
1204
+ </div>
1205
+
1206
+ <div class="main-gauge-card fuel">
1207
+ <div class="main-gauge-icon">
1208
+ <i class="fas fa-gas-pump"></i>
1209
+ </div>
1210
+ <div class="main-gauge-value">32.5</div>
1211
+ <div class="main-gauge-unit">%</div>
1212
+ <div class="main-gauge-label">Fuel Trims</div>
1213
+ <div class="main-gauge-minmax">
1214
+ <span>-20</span>
1215
+ <span>+20</span>
1216
+ </div>
1217
+ </div>
1218
+ </div>
1219
+
1220
+ <!-- Maps Grid -->
1221
+ <div class="maps-section">
1222
+ <!-- Fuel Map -->
1223
+ <div class="panel">
1224
+ <div class="panel-header">
1225
+ <div class="panel-title">
1226
+ <i class="fas fa-gas-pump"></i>
1227
+ Fuel Map
1228
+ </div>
1229
+ <div class="tabs" style="width: auto;">
1230
+ <button class="tab active">VE</button>
1231
+ <button class="tab">Lambda</button>
1232
+ <button class="tab">AFR</button>
1233
+ </div>
1234
+ </div>
1235
+ <div class="panel-content">
1236
+ <div class="map-grid">
1237
+ <div class="map-grid-header"></div>
1238
+ <div class="map-grid-header">1000</div>
1239
+ <div class="map-grid-header">2000</div>
1240
+ <div class="map-grid-header">3000</div>
1241
+ <div class="map-grid-header">4000</div>
1242
+ <div class="map-grid-header">5000</div>
1243
+ <div class="map-grid-header">6000</div>
1244
+ <div class="map-grid-header">7000</div>
1245
+ <div class="map-grid-header">8000</div>
1246
+
1247
+ <div class="map-grid-row-header">0.5</div>
1248
+ <div class="map-cell">45.2</div>
1249
+ <div class="map-cell">48.5</div>
1250
+ <div class="map-cell">52.1</div>
1251
+ <div class="map-cell low">55.8</div>
1252
+ <div class="map-cell low">58.2</div>
1253
+ <div class="map-cell">54.5</div>
1254
+ <div class="map-cell">50.2</div>
1255
+ <div class="map-cell medium">46.8</div>
1256
+
1257
+ <div class="map-grid-row-header">1.0</div>
1258
+ <div class="map-cell">42.5</div>
1259
+ <div class="map-cell">45.8</div>
1260
+ <div class="map-cell">49.2</div>
1261
+ <div class="map-cell">52.5</div>
1262
+ <div class="map-cell low">56.8</div>
1263
+ <div class="map-cell low">58.5</div>
1264
+ <div class="map-cell">55.2</div>
1265
+ <div class="map-cell">51.8</div>
1266
+
1267
+ <div class="map-grid-row-header">1.5</div>
1268
+ <div class="map-cell">40.2</div>
1269
+ <div class="map-cell">43.5</div>
1270
+ <div class="map-cell">46.8</div>
1271
+ <div class="map-cell">50.2</div>
1272
+ <div class="map-cell">54.5</div>
1273
+ <div class="map-cell low">57.2</div>
1274
+ <div class="map-cell low">58.8</div>
1275
+ <div class="map-cell">56.5</div>
1276
+
1277
+ <div class="map-grid-row-header">2.0</div>
1278
+ <div class="map-cell">38.5</div>
1279
+ <div class="map-cell">41.2</div>
1280
+ <div class="map-cell">44.8</div>
1281
+ <div class="map-cell">48.5</div>
1282
+ <div class="map-cell">52.2</div>
1283
+ <div class="map-cell">55.8</div>
1284
+ <div class="map-cell low">58.2</div>
1285
+ <div class="map-cell low">59.5</div>
1286
+ </div>
1287
+ </div>
1288
+ </div>
1289
+
1290
+ <!-- Ignition Map -->
1291
+ <div class="panel">
1292
+ <div class="panel-header">
1293
+ <div class="panel-title">
1294
+ <i class="fas fa-bolt"></i>
1295
+ Ignition Timing
1296
+ </div>
1297
+ <div class="btn-group">
1298
+ <button class="btn active">Knock</button>
1299
+ <button class="btn">Base</button>
1300
+ <button class="btn">Total</button>
1301
+ </div>
1302
+ </div>
1303
+ <div class="panel-content">
1304
+ <div class="map-grid">
1305
+ <div class="map-grid-header"></div>
1306
+ <div class="map-grid-header">1000</div>
1307
+ <div class="map-grid-header">2000</div>
1308
+ <div class="map-grid-header">3000</div>
1309
+ <div class="map-grid-header">4000</div>
1310
+ <div class="map-grid-header">5000</div>
1311
+ <div class="map-grid-header">6000</div>
1312
+ <div class="map-grid-header">7000</div>
1313
+ <div class="map-grid-header">8000</div>
1314
+
1315
+ <div class="map-grid-row-header">0.5</div>
1316
+ <div class="map-cell">-2.5</div>
1317
+ <div class="map-cell">-1.8</div>
1318
+ <div class="map-cell">-1.2</div>
1319
+ <div class="map-cell">-0.5</div>
1320
+ <div class="map-cell">0.0</div>
1321
+ <div class="map-cell">-0.8</div>
1322
+ <div class="map-cell">-2.2</div>
1323
+ <div class="map-cell">-4.5</div>
1324
+
1325
+ <div class="map-grid-row-header">1.0</div>
1326
+ <div class="map-cell">5.2</div>
1327
+ <div class="map-cell">8.5</div>
1328
+ <div class="map-cell">12.2</div>
1329
+ <div class="map-cell">15.8</div>
1330
+ <div class="map-cell">18.2</div>
1331
+ <div class="map-cell">16.5</div>
1332
+ <div class="map-cell">12.8</div>
1333
+ <div class="map-cell">8.5</div>
1334
+
1335
+ <div class="map-grid-row-header">1.5</div>
1336
+ <div class="map-cell">8.5</div>
1337
+ <div class="map-cell">12.2</div>
1338
+ <div class="map-cell">16.8</div>
1339
+ <div class="map-cell">20.5</div>
1340
+ <div class="map-cell">22.2</div>
1341
+ <div class="map-cell">20.8</div>
1342
+ <div class="map-cell">16.5</div>
1343
+ <div class="map-cell">12.2</div>
1344
+
1345
+ <div class="map-grid-row-header">2.0</div>
1346
+ <div class="map-cell">6.2</div>
1347
+ <div class="map-cell">9.5</div>
1348
+ <div class="map-cell">13.2</div>
1349
+ <div class="map-cell">16.8</div>
1350
+ <div class="map-cell">18.5</div>
1351
+ <div class="map-cell">17.2</div>
1352
+ <div class="map-cell">14.5</div>
1353
+ <div class="map-cell">10.2</div>
1354
+ </div>
1355
+ </div>
1356
+ </div>
1357
+
1358
+ <!-- Advanced Timing Grid -->
1359
+ <div class="panel">
1360
+ <div class="panel-header">
1361
+ <div class="panel-title">
1362
+ <i class="fas fa-layer-group"></i>
1363
+ Timing Advance
1364
+ </div>
1365
+ <div class="btn-group">
1366
+ <button class="btn active">Cyl 1</button>
1367
+ <button class="btn">Cyl 2</button>
1368
+ <button class="btn">Cyl 3</button>
1369
+ <button class="btn">Cyl 4</button>
1370
+ </div>
1371
+ </div>
1372
+ <div class="panel-content">
1373
+ <div class="timing-grid">
1374
+ <div class="timing-cell advanced">18.5</div>
1375
+ <div class="timing-cell advanced">20.2</div>
1376
+ <div class="timing-cell advanced">