Hugging Face's logo

Spaces:
BarBar288
/
F1View
Running

App Files Community
BarBar288 commited on
Commit
6ea712c
·
verified ·
1 Parent(s): 937f1df

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +366 -19
index.html CHANGED
@@ -1,19 +1,366 @@
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" data-theme="dark">
3
+ <head>
4
+ <link rel="icon" href="https://raw.githubusercontent.com/Bella288/F1View/main/images/favicon.ico" type="image/x-icon">
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>F1 Car Parts Explorer</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ :root { --primary-bg: #18181b; --primary-text: #fff; --modal-bg: #1a1a1a; --modal-border: #e10600; --tooltip-bg: rgba(0, 0, 0, 0.8);}
12
+ [data-theme="light"] { --primary-bg: #f6f6f6; --primary-text: #18181b; --modal-bg: #fff; --modal-border: #e10600; --tooltip-bg: rgba(60, 60, 60, 0.95);}
13
+ html, body { background: var(--primary-bg); color: var(--primary-text);}
14
+ .car-container { position: relative; width: 100%; max-width: 800px; margin: 0 auto; aspect-ratio: 16/9; background: #101010;}
15
+ .car-container img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none;}
16
+ .car-part { position: absolute; cursor: pointer; transition: all 0.3s ease; z-index: 10; width: 40px; height: 40px; border-radius: 50%; background: rgba(225,6,0,0.18); border: 2px solid white; box-sizing: border-box; outline: none; transform: translate(-50%, -50%);}
17
+ .car-part:focus { outline: 3px solid #e10600; box-shadow: 0 0 0 3px #fff, 0 0 8px #e10600;}
18
+ .car-part:active { background: rgba(225,6,0,0.34);}
19
+ .car-part:hover { transform: translate(-50%, -50%) scale(1.05); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7));}
20
+ .part-tooltip { position: absolute; background-color: var(--tooltip-bg); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; pointer-events: none; z-index: 20; opacity: 0; transition: opacity 0.3s; white-space: nowrap; left: 50%; transform: translateX(-50%);}
21
+ .car-part:hover .part-tooltip, .car-part:focus .part-tooltip { opacity: 1;}
22
+ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 100; justify-content: center; align-items: center;}
23
+ .modal-content { background-color: var(--modal-bg); color: var(--primary-text); border-radius: 10px; width: 95%; max-width: 520px; padding: 20px; position: relative; border: 2px solid var(--modal-border); box-shadow: 0 0 20px rgba(225, 6, 0, 0.5);}
24
+ .close-modal { position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer; color: #e10600;}
25
+ .tab-button { transition: all 0.3s;}
26
+ .tab-button.active { background-color: #e10600; color: white;}
27
+ .darkmode-toggle { position: fixed; top: 18px; right: 72px; z-index: 200; background: var(--modal-bg); border: 2px solid var(--modal-border); border-radius: 9999px; padding: 6px 12px; cursor: pointer; display: flex; align-items: center; box-shadow: 0 2px 18px 0 rgba(0,0,0,0.18); transition: background 0.2s, color 0.2s;}
28
+ .darkmode-toggle:focus { outline: 2px solid #e10600;}
29
+ .about-btn { position: fixed; top: 18px; right: 18px; z-index: 201; background: var(--modal-bg); border: 2px solid var(--modal-border); border-radius: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: box-shadow 0.2s;}
30
+ .about-btn img { width: 22px; height: 22px; pointer-events: none;}
31
+ .about-btn:focus { outline: 2px solid #e10600; box-shadow: 0 0 0 3px #fff, 0 0 8px #e10600;}
32
+ .about-tooltip { position: absolute; top: 44px; right: 0; background: var(--tooltip-bg); color: white; padding: 6px 12px; border-radius: 6px; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 202;}
33
+ .about-btn:hover + .about-tooltip, .about-btn:focus + .about-tooltip { opacity: 1;}
34
+ @media (max-width: 640px) {
35
+ .car-part { width: 30px !important; height: 30px !important;}
36
+ .part-tooltip { font-size: 10px; padding: 3px 6px;}
37
+ .darkmode-toggle, .about-btn { top: 10px; right: 12px; padding: 2px 8px;}
38
+ .about-btn { top: 10px; right: 10px; width: 30px; height: 30px;}
39
+ .about-btn img { width: 16px; height: 16px;}
40
+ .about-tooltip { top: 36px; font-size: 11px;}
41
+ }
42
+ .wheel-container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 16/9; background: #111;}
43
+ .wheel-container img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none;}
44
+ .wheel-hotspot { position: absolute; width: 36px; height: 36px; background: rgba(0,123,255,0.13); border: 2px solid #e10600; border-radius: 50%; cursor: pointer; z-index: 20; transition: background 0.2s, transform 0.2s; box-shadow: 0 0 0 1px #fff4; transform: translate(-50%, -50%);}
45
+ .wheel-hotspot:hover { background: rgba(0,123,255,0.35); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 12px #e10600;}
46
+ .wheel-tooltip { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); font-size: 14px; padding: 4px 10px; background: var(--tooltip-bg); color: #fff; border-radius: 6px; pointer-events: none; white-space: nowrap; z-index: 1000; opacity: 0; transition: opacity 0.2s;}
47
+ .wheel-hotspot:hover .wheel-tooltip, .wheel-hotspot:focus .wheel-tooltip { opacity: 1;}
48
+ .wheel-modal-bg { display: none; position: fixed; left:0;top:0;width:100vw;height:100vh; background: rgba(0,0,0,0.7); z-index: 2000; justify-content: center; align-items: center;}
49
+ .wheel-modal-bg.show { display: flex; }
50
+ .wheel-modal { background: var(--modal-bg); color: var(--primary-text); border-radius: 14px; padding: 30px 28px 20px 28px; min-width: 260px; max-width: 90vw; border: 2px solid #e10600; box-shadow: 0 8px 32px #000b; position: relative;}
51
+ .wheel-modal-close { position: absolute; top: 10px; right: 16px; font-size: 27px; color: #e10600; cursor: pointer;}
52
+ @media (max-width: 800px) { .wheel-container { width: 100vw !important; max-width: none !important; } }
53
+ </style>
54
+ </head>
55
+ <body class="min-h-screen">
56
+ <button class="darkmode-toggle" id="darkmode-toggle" aria-label="Toggle dark mode" tabindex="0">
57
+ <span id="darkmode-icon" aria-hidden="true"><i class="fas fa-moon"></i></span>
58
+ </button>
59
+ <button class="about-btn" id="about-btn" aria-label="About the creator" tabindex="0">
60
+ <img src="https://raw.githubusercontent.com/Bella288/F1View/main/images/about_ico.png" alt="About Me">
61
+ </button>
62
+ <span class="about-tooltip" id="about-tooltip">Learn about the creator</span>
63
+ <div id="about-modal" class="modal" style="display: none;">
64
+ <div class="modal-content" style="max-width: 390px;">
65
+ <span class="close-modal" id="close-about-modal" aria-label="Close creator modal" tabindex="0">&times;</span>
66
+ <h2 class="text-2xl font-bold mb-4 text-red-600">About the Creator</h2>
67
+ <div class="text-gray-300 mb-2">
68
+ <p>Hi! I'm <b>Bella Lawrence</b>, an HTML and Python programmer from Fort Wayne, Indiana.</p>
69
+ <p>I made this for my Dad and Sister who like Formula 1.</p>
70
+ <p><b>YouTube:</b> <a href="https://www.youtube.com/@SerialDesignationN-BL" class="text-blue-400 underline" target="_blank" rel="noopener">@SerialDesignationN-BL</a></p>
71
+ <p><b>Source:</b> <a href="https://github.com/Bella288/F1View" class="text-blue-400 underline" target="_blank" rel="noopener">github.com/Bella288/F1View</a></p>
72
+ <p><b>GitHub:</b> <a href="https://github.com/Bella288" class="text-blue-400 underline" target="_blank" rel="noopener">@Bella288</a></p>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ <div class="container mx-auto px-4 py-8">
77
+ <header class="text-center mb-8">
78
+ <h1 class="text-4xl md:text-5xl font-bold mb-2 text-red-600">F1 CAR EXPLORER</h1>
79
+ <p class="text-gray-300 max-w-2xl mx-auto">Interactive guide to Formula 1 car components. Click on any part to learn more.</p>
80
+ </header>
81
+ <div class="flex justify-center mb-6">
82
+ <div class="inline-flex rounded-md shadow-sm" role="group">
83
+ <button id="exterior-btn" class="tab-button px-4 py-2 text-sm font-medium rounded-l-lg bg-gray-800 hover:bg-gray-700 active" aria-label="Show Exterior View" tabindex="0">
84
+ <i class="fas fa-car mr-2" aria-hidden="true"></i>Exterior
85
+ </button>
86
+ <button id="interior-btn" class="tab-button px-4 py-2 text-sm font-medium bg-gray-800 hover:bg-gray-700" aria-label="Show Interior View" tabindex="0">
87
+ <i class="fas fa-tachometer-alt mr-2" aria-hidden="true"></i>Interior
88
+ </button>
89
+ <button id="wheel-btn" class="tab-button px-4 py-2 text-sm font-medium rounded-r-lg bg-gray-800 hover:bg-gray-700" aria-label="Show Steering Wheel" tabindex="0">
90
+ <i class="fas fa-circle-notch mr-2" aria-hidden="true"></i>Steering Wheel
91
+ </button>
92
+ </div>
93
+ </div>
94
+ <div id="exterior-view" class="car-container">
95
+ <img src="images/F1_EXTERIOR.jpg" alt="F1 Car">
96
+ <div class="car-part" style="left:90.63%; top:58.15%;" data-part="front-wing" aria-label="Front Wing" tabindex="0"><div class="part-tooltip" style="top:-38px;">Front Wing</div></div>
97
+ <div class="car-part" style="left:85.94%; top:53.89%;" data-part="nose" aria-label="Nose" tabindex="0"><div class="part-tooltip" style="top:-38px;">Nose</div></div>
98
+ <div class="car-part" style="left:48.65%; top:52.22%;" data-part="sidepods" aria-label="Sidepods" tabindex="0"><div class="part-tooltip" style="top:-38px;">Sidepods</div></div>
99
+ <div class="car-part" style="left:60.63%; top:40.56%;" data-part="halo" aria-label="Halo" tabindex="0"><div class="part-tooltip" style="top:-38px;">Halo</div></div>
100
+ <div class="car-part" style="left:13.75%; top:46.85%;" data-part="rear-wing" aria-label="Rear Wing" tabindex="0"><div class="part-tooltip" style="top:-38px;">Rear Wing</div></div>
101
+ <div class="car-part" style="left:26.04%; top:61.11%;" data-part="diffuser" aria-label="Diffuser" tabindex="0"><div class="part-tooltip" style="top:46px;">Diffuser</div></div>
102
+ <div class="car-part" style="left:78.96%; top:56.30%;" data-part="wheels" aria-label="Wheels" tabindex="0"><div class="part-tooltip" style="top:-38px;">Wheels</div></div>
103
+ <div class="car-part" style="left:16.15%; top:38.33%;" data-part="drs" aria-label="DRS" tabindex="0"><div class="part-tooltip" style="top:-38px;">DRS</div></div>
104
+ <div class="car-part" style="left:19.79%; top:55.74%;" data-part="wheels" aria-label="Wheels" tabindex="0"><div class="part-tooltip" style="top:-38px;">Wheels</div></div>
105
+ </div>
106
+ <div id="interior-view" class="car-container hidden">
107
+ <img src="images/F1_INTERIOR.jpg" alt="F1 Car Interior">
108
+ <div class="car-part" style="left:54.38%; top:69.39%;" data-part="steering-wheel" aria-label="Steering Wheel" tabindex="0"><div class="part-tooltip" style="top:-38px;">Steering Wheel</div></div>
109
+ <div class="car-part" style="left:53.44%; top:78.54%;" data-part="pedals" aria-label="Pedals" tabindex="0"><div class="part-tooltip" style="top:46px;">Pedals</div></div>
110
+ <div class="car-part" style="left:53.50%; top:90.41%;" data-part="seat" aria-label="Seat" tabindex="0"><div class="part-tooltip" style="top:-38px;">Seat</div></div>
111
+ <div class="car-part" style="left:54.38%; top:49.70%;" data-part="halo-interior" aria-label="Halo (Interior)" tabindex="0"><div class="part-tooltip" style="top:-38px;">Halo</div></div>
112
+ <div class="car-part" style="left:22.94%; top:48.54%;" data-part="wheels" aria-label="Wheels" tabindex="0"><div class="part-tooltip" style="top:-38px;">Wheels</div></div>
113
+ <div class="car-part" style="left:76.75%; top:44.67%;" data-part="wheels" aria-label="Wheels" tabindex="0"><div class="part-tooltip" style="top:-38px;">Wheels</div></div>
114
+ </div>
115
+ <div id="wheel-view" class="wheel-container hidden">
116
+ <img src="https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/interior/steer.webp" alt="F1 Steering Wheel" draggable="false">
117
+ </div>
118
+ <div class="wheel-modal-bg" id="wheel-modal-bg">
119
+ <div class="wheel-modal" id="wheel-modal">
120
+ <span class="wheel-modal-close" id="wheel-modal-close" tabindex="0">&times;</span>
121
+ <h2 id="wheel-modal-title" class="text-xl font-bold mb-2 text-red-600"></h2>
122
+ <p id="wheel-modal-desc" class="mb-2"></p>
123
+ </div>
124
+ </div>
125
+ <div id="part-modal" class="modal" aria-modal="true" role="dialog">
126
+ <div class="modal-content">
127
+ <span class="close-modal" aria-label="Close part modal" tabindex="0">&times;</span>
128
+ <h2 id="part-name" class="text-2xl font-bold mb-4 text-red-600"></h2>
129
+ <div id="part-description" class="text-gray-300 mb-2"></div>
130
+ <div id="part-image" class="mb-3"></div>
131
+ <div id="part-facts" class="mt-4 p-4 bg-gray-800 rounded-lg hidden">
132
+ <h3 class="font-bold text-red-500 mb-2">Fun Fact</h3>
133
+ <p id="fact-text"></p>
134
+ </div>
135
+ <div id="part-learnmore" class="mt-3"></div>
136
+ </div>
137
+ </div>
138
+ <script>
139
+ const exteriorBtn = document.getElementById('exterior-btn');
140
+ const interiorBtn = document.getElementById('interior-btn');
141
+ const wheelBtn = document.getElementById('wheel-btn');
142
+ const exteriorView = document.getElementById('exterior-view');
143
+ const interiorView = document.getElementById('interior-view');
144
+ const wheelView = document.getElementById('wheel-view');
145
+ exteriorBtn.addEventListener('click', () => {
146
+ exteriorBtn.classList.add('active');
147
+ interiorBtn.classList.remove('active');
148
+ wheelBtn.classList.remove('active');
149
+ exteriorView.classList.remove('hidden');
150
+ interiorView.classList.add('hidden');
151
+ wheelView.classList.add('hidden');
152
+ });
153
+ interiorBtn.addEventListener('click', () => {
154
+ interiorBtn.classList.add('active');
155
+ exteriorBtn.classList.remove('active');
156
+ wheelBtn.classList.remove('active');
157
+ exteriorView.classList.add('hidden');
158
+ interiorView.classList.remove('hidden');
159
+ wheelView.classList.add('hidden');
160
+ });
161
+ wheelBtn.addEventListener('click', () => {
162
+ wheelBtn.classList.add('active');
163
+ exteriorBtn.classList.remove('active');
164
+ interiorBtn.classList.remove('active');
165
+ exteriorView.classList.add('hidden');
166
+ interiorView.classList.add('hidden');
167
+ wheelView.classList.remove('hidden');
168
+ });
169
+ const carPartData = {
170
+ 'front-wing': { name: 'Front Wing', description: 'The front wing is the first point of contact for airflow and is fundamental to a car’s aerodynamic performance. It\'s made from multiple elements and endplates to direct airflow around the car.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/exterior/frontwing.webp' },
171
+ 'nose': { name: 'Nose Cone', description: 'The nose cone is the forward-most structure, designed to pass stringent crash tests while being as aerodynamic and lightweight as possible.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/exterior/nose.jpg' },
172
+ 'sidepods': { name: 'Sidepods', description: 'Sidepods house radiators, electronics, and sometimes cooling for the hybrid system. Their outer surfaces are sculpted to channel air efficiently to the rear of the car.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/exterior/sidepods.jpg' },
173
+ 'halo': { name: 'Halo Safety Device', description: 'The halo is a titanium structure mounted above the cockpit to protect the driver’s head from debris or other cars.', fact: 'The halo can withstand the weight of a London bus.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/exterior/halo.jpg' },
174
+ 'rear-wing': { name: 'Rear Wing', description: 'The rear wing provides crucial downforce, helping maintain grip at high speeds and during cornering.', fact: 'At full speed, the rear wing produces enough downforce to flip a car upside down.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/exterior/rearwing.jpg' },
175
+ 'diffuser': { name: 'Diffuser', description: 'The diffuser is the upward-swept rear section of the floor, essential for generating ground effect downforce.', fact: 'A well-designed diffuser can contribute as much as 40% of a car’s total downforce.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/exterior/diffuser.jpg' },
176
+ 'wheels': { name: 'Wheels', description: 'F1 wheels are made from high-strength magnesium alloy, combining lightness and durability. They are fitted with Pirelli tires, which are slick for dry and treaded for wet conditions.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/exterior/tyre.jpg' },
177
+ 'drs': { name: 'DRS (Drag Reduction System)', description: 'The Drag Reduction System (DRS) allows drivers to open a flap in the rear wing when within one second of a car ahead, reducing drag and increasing top speed.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/exterior/drs.gif' },
178
+ 'steering-wheel': { name: 'Steering Wheel', description: 'An F1 steering wheel is an advanced control center, featuring more than 20 buttons, rotary switches, and paddles. Drivers use it to change settings, communicate, and control the car.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/interior/steer.webp' },
179
+ 'pedals': { name: 'Pedals', description: 'F1 cars have just two pedals: brake (left) and throttle (right). The brake pedal operates carbon-carbon brakes capable of generating over 5G of deceleration.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/interior/pedals.jpg' },
180
+ 'seat': { name: "Driver's Seat", description: "The seat is custom-molded to each driver using foam or resin, providing maximum support and safety during high G-force events.", fact: "Drivers spend hours sitting in their seat during fittings for a perfect mold.", image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/interior/seat.png' },
181
+ 'halo-interior': { name: 'Halo (Interior View)', description: 'From inside the cockpit, the halo appears as a central pillar and two side arms, framing the driver\'s field of vision.', image: 'https://raw.githubusercontent.com/Bella288/F1View/main/images/parts/interior/halo.png' }
182
+ };
183
+ function showCarPartModal(partId) {
184
+ const modal = document.getElementById('part-modal');
185
+ const partName = document.getElementById('part-name');
186
+ const partDescription = document.getElementById('part-description');
187
+ const partFacts = document.getElementById('part-facts');
188
+ const factText = document.getElementById('fact-text');
189
+ const partImage = document.getElementById('part-image');
190
+ const partLearnMore = document.getElementById('part-learnmore');
191
+ const data = carPartData[partId];
192
+ partName.textContent = data ? data.name : partId;
193
+ partDescription.textContent = data ? data.description : '';
194
+ if (data && data.fact) {
195
+ partFacts.classList.remove('hidden');
196
+ factText.textContent = data.fact;
197
+ } else {
198
+ partFacts.classList.add('hidden');
199
+ }
200
+ if (data && data.image) {
201
+ partImage.innerHTML = `<img src="${data.image}" alt="${data.name}" class="rounded-lg shadow mb-2" style="max-width: 100%; max-height:140px; display:block;margin:0 auto;">`;
202
+ } else {
203
+ partImage.innerHTML = '';
204
+ }
205
+ if (data && data.link) {
206
+ partLearnMore.innerHTML = `<a href="${data.link}" class="text-blue-400 underline" target="_blank" rel="noopener">Learn more</a>`;
207
+ } else {
208
+ partLearnMore.innerHTML = '';
209
+ }
210
+ modal.style.display = 'flex';
211
+ document.body.style.overflow = 'hidden';
212
+ modal.querySelector('.close-modal').focus();
213
+ }
214
+ function hideCarPartModal() {
215
+ const modal = document.getElementById('part-modal');
216
+ modal.style.display = 'none';
217
+ document.body.style.overflow = '';
218
+ }
219
+ document.querySelectorAll('.car-part').forEach(part => {
220
+ part.addEventListener('click', function() {
221
+ showCarPartModal(this.getAttribute('data-part'));
222
+ });
223
+ part.addEventListener('keydown', function(e) {
224
+ if (e.key === 'Enter' || e.key === ' ') {
225
+ e.preventDefault();
226
+ showCarPartModal(this.getAttribute('data-part'));
227
+ }
228
+ });
229
+ });
230
+ document.querySelectorAll('.close-modal').forEach(el => {
231
+ el.addEventListener('click', hideCarPartModal);
232
+ el.addEventListener('keydown', e => {
233
+ if (e.key === 'Enter' || e.key === ' ') hideCarPartModal();
234
+ });
235
+ });
236
+ window.addEventListener('keydown', e => {
237
+ const modal = document.getElementById('part-modal');
238
+ if (e.key === "Escape" && modal.style.display === 'flex') hideCarPartModal();
239
+ });
240
+ document.getElementById('part-modal').addEventListener('click', e => {
241
+ if (e.target === document.getElementById('part-modal')) hideCarPartModal();
242
+ });
243
+ const wheelHotspotData = [
244
+ { label: "N", x: 343, y: 144, title: "N (Neutral) Button", desc: "Shifts the gearbox into neutral. Essential for pit stops and emergencies." },
245
+ { label: "+10", x: 447, y: 154, title: "+10 Button", desc: "Increases selected parameter (like brake balance, engine mode) by 10 units." },
246
+ { label: "BW", x: 536, y: 212, title: "Brake Magic (BW)", desc: "Reconfigures brake balance for maximum front bias to heat brakes or for safety car restarts." },
247
+ { label: "Entry", x: 273, y: 230, title: "'Entry' Rotary", desc: "Multi-function rotary usually for corner entry settings (diff, brake migration, etc)." },
248
+ { label: "EB", x: 508, y: 360, title: "Engine Braking (EB) Rotary", desc: "Adjusts the engine braking level, affecting how much the engine slows the car off-throttle." },
249
+ { label: "Scroll", x: 444, y: 535, title: "Left Scroll Wheel", desc: "Menu navigation or fine-tuning settings." },
250
+ { label: "MARK", x: 570, y: 480, title: "MARK Button", desc: "Marks a lap/time/event for later engineering analysis." },
251
+ { label: "OK", x: 554, y: 600, title: "OK Button", desc: "Confirms menu choices or acknowledges messages on the dash." },
252
+ { label: "BB-", x: 529, y: 720, title: "BB- (Brake Bias Decrement)", desc: "Reduces brake bias (moves braking rearward) to help with rear locking or instability." },
253
+ { label: "Leds", x: 619, y: 232, title: "Shift Light Strip", desc: "Colored LEDs indicate optimal shift points and/or warnings (blue/yellow/red)." },
254
+ { label: "Screen", x: 947, y: 352, title: "Main Display", desc: "Displays lap times, deltas, fuel, tire wear, engine and ERS modes, DRS, speed, gear, and warnings for driver and engineer." },
255
+ { label: "STRAT", x: 728, y: 698, title: "Strat Mode Rotary", desc: "Selects engine/PU strategy modes (performance mapping, fuel, reliability)." },
256
+ { label: "Settings", x: 952, y: 697, title: "Multi-Function Rotary", desc: "Adjusts various advanced car systems: DEF, BITE, EXIT, INIT, RADIO, TRQ, CRUZ, VOL, REVS, DASH, DISP, BRIG, etc." },
257
+ { label: "HPP", x: 1183, y: 703, title: "HPP Mode Rotary", desc: "Likely adjusts power unit parameters (Hybrid Power Parameters), e.g., ERS deployment, harvesting, shift, etc." },
258
+ { label: "PL", x: 1582, y: 126, title: "PL (Pit Lane) Button", desc: "Activates pit lane speed limiter." },
259
+ { label: "+1", x: 1486, y: 146, title: "+1 Button", desc: "Increases selected parameter by 1 unit." },
260
+ { label: "PC", x: 1383, y: 212, title: "PC (Pit Confirm) Button", desc: "Confirms pit instruction, or used for pit related settings." },
261
+ { label: "MID", x: 1640, y: 230, title: "MID Rotary", desc: "Likely for mid-corner balance or mid-race settings." },
262
+ { label: "BBAL", x: 1400, y: 357, title: "BBAL Rotary", desc: "Selects brake balance preset profiles (BB+, BB-, etc)." },
263
+ { label: "ACS", x: 1347, y: 488, title: "ACS Button", desc: "Quick access to engine/hybrid adjustments." },
264
+ { label: "Scroll", x: 1457, y: 532, title: "Right Scroll Wheel", desc: "Menu navigation or fine-tuning settings." },
265
+ { label: "TALK", x: 1362, y: 608, title: "Radio (Talk) Button", desc: "Activates the driver's radio for communication with the pit wall." },
266
+ { label: "BB+", x: 1377, y: 723, title: "BB+ (Brake Bias Increment)", desc: "Increases brake bias (moves braking forward) to help with front locking or instability." },
267
+ { label: "L Paddle", x: 433, y: 387, title: "Left Paddle", desc: "Gear shift, clutch, or DRS. Used for launches and gear changes." },
268
+ { label: "R Paddle", x: 1488, y: 387, title: "Right Paddle", desc: "Gear shift, clutch, or DRS. Used for launches and gear changes." },
269
+ { label: "LEDs", x: 1296, y: 225, title: "Shift Light Strip", desc: "Colored LEDs indicate optimal shift points and/or warnings." },
270
+ { label: "LED Strip", x: 958, y: 119, title: "Main LED Strip", desc: "Main shift lights and warning indicators." }
271
+ ];
272
+ function createWheelHotspots() {
273
+ const wheelView = document.getElementById('wheel-view');
274
+ wheelHotspotData.forEach(h => {
275
+ const spot = document.createElement('div');
276
+ spot.className = 'wheel-hotspot';
277
+ spot.style.left = ((h.x / 1920) * 100) + '%';
278
+ spot.style.top = ((h.y / 1080) * 100) + '%';
279
+ spot.tabIndex = 0;
280
+ spot.setAttribute('aria-label', h.title);
281
+ const tip = document.createElement('div');
282
+ tip.className = 'wheel-tooltip';
283
+ tip.textContent = h.title;
284
+ spot.appendChild(tip);
285
+ spot.addEventListener('click', () => showWheelModal(h.title, h.desc));
286
+ spot.addEventListener('keydown', e => {
287
+ if (e.key === 'Enter' || e.key === ' ') showWheelModal(h.title, h.desc);
288
+ });
289
+ wheelView.appendChild(spot);
290
+ });
291
+ }
292
+ function showWheelModal(title, desc) {
293
+ document.getElementById('wheel-modal-title').textContent = title;
294
+ document.getElementById('wheel-modal-desc').textContent = desc;
295
+ document.getElementById('wheel-modal-bg').classList.add('show');
296
+ }
297
+ function closeWheelModal() {
298
+ document.getElementById('wheel-modal-bg').classList.remove('show');
299
+ }
300
+ document.getElementById('wheel-modal-close').onclick = closeWheelModal;
301
+ document.getElementById('wheel-modal-bg').onclick = function(e) {
302
+ if(e.target === this) closeWheelModal();
303
+ };
304
+ window.addEventListener('keydown', e => {
305
+ if(e.key === "Escape" && document.getElementById('wheel-modal-bg').classList.contains('show')) closeWheelModal();
306
+ });
307
+
308
+ const aboutBtn = document.getElementById('about-btn');
309
+ const aboutModal = document.getElementById('about-modal');
310
+ const closeAboutModal = document.getElementById('close-about-modal');
311
+ aboutBtn.addEventListener('click', () => {
312
+ aboutModal.style.display = 'flex';
313
+ document.body.style.overflow = 'hidden';
314
+ closeAboutModal.focus();
315
+ });
316
+ closeAboutModal.addEventListener('click', () => {
317
+ aboutModal.style.display = 'none';
318
+ document.body.style.overflow = '';
319
+ });
320
+ closeAboutModal.addEventListener('keydown', e => {
321
+ if (e.key === 'Enter' || e.key === ' ') {
322
+ aboutModal.style.display = 'none';
323
+ document.body.style.overflow = '';
324
+ }
325
+ });
326
+ window.addEventListener('keydown', e => {
327
+ if (e.key === "Escape" && aboutModal.style.display === 'flex') {
328
+ aboutModal.style.display = 'none';
329
+ document.body.style.overflow = '';
330
+ }
331
+ });
332
+ aboutModal.addEventListener('click', e => {
333
+ if (e.target === aboutModal) {
334
+ aboutModal.style.display = 'none';
335
+ document.body.style.overflow = '';
336
+ }
337
+ });
338
+
339
+ const darkmodeToggle = document.getElementById('darkmode-toggle');
340
+ const darkmodeIcon = document.getElementById('darkmode-icon');
341
+ function setTheme(theme) {
342
+ if (theme === 'dark') {
343
+ document.documentElement.setAttribute('data-theme', 'dark');
344
+ darkmodeIcon.innerHTML = '<i class="fas fa-moon"></i>';
345
+ } else {
346
+ document.documentElement.setAttribute('data-theme', 'light');
347
+ darkmodeIcon.innerHTML = '<i class="fas fa-sun"></i>';
348
+ }
349
+ }
350
+ function getSavedTheme() {
351
+ return localStorage.getItem('theme') || 'dark';
352
+ }
353
+ function toggleTheme() {
354
+ const current = getSavedTheme();
355
+ const newTheme = current === 'dark' ? 'light' : 'dark';
356
+ setTheme(newTheme);
357
+ localStorage.setItem('theme', newTheme);
358
+ }
359
+ darkmodeToggle.addEventListener('click', toggleTheme);
360
+ setTheme(getSavedTheme());
361
+
362
+ createWheelHotspots();
363
+ </script>
364
+ </div>
365
+ </body>
366
+ </html>