-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpitwall.html
More file actions
89 lines (81 loc) · 4.9 KB
/
pitwall.html
File metadata and controls
89 lines (81 loc) · 4.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pit Wall - Meter Games</title>
<link rel="icon" href="images/favicon-light.ico" type="image/x-icon" />
<link rel="icon" href="images/favicon-light.ico" type="image/x-icon" media="(prefers-color-scheme: light)" />
<link rel="icon" href="images/favicon-dark.ico" type="image/x-icon" media="(prefers-color-scheme: dark)" />
<script>
const savedTheme = localStorage.getItem("theme") || "dark";
document.documentElement.setAttribute("data-theme", savedTheme);
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body class="pit-theme">
<div class="container">
<site-header page="pitwall"></site-header>
<section class="hero">
<h1>Pit Wall</h1>
<p>A high-performance Formula 1 data dashboard delivering real-time statistics and historical metrics.</p>
<div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px;">
<a href="https://metergames.github.io/f1-pit-wall/" target="_blank" rel="noreferrer" class="btn">
Live Demo
</a>
<a href="https://github.com/metergames/f1-pit-wall" target="_blank" rel="noreferrer" class="btn">
View Source
</a>
</div>
<div style="margin-top: 30px; margin-bottom: 20px;">
<img
src="images/pitwall-dashboard.webp"
alt="Pit Wall Overview"
class="enlargeable-image"
style="width: 100%; max-width: 900px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 15px 30px rgba(0,0,0,0.3);"
>
</div>
</section>
<div class="grid">
<div class="card">
<h3>Features</h3>
<ul class="feature-list">
<li><strong>Data Pipelines:</strong> Asynchronous fetching from multiple REST endpoints via f1api.dev.</li>
<li><strong>Dynamic Dashboard:</strong> Visualize seasonal metrics, race results, and driver standings.</li>
<li><strong>Responsive UI:</strong> Built with React for a highly fluid and interactive user experience.</li>
<li><strong>Optimized Routing:</strong> Clean data parsing and state management to prevent API throttling.</li>
</ul>
</div>
<div class="card">
<h3>Tech Stack</h3>
<ul class="feature-list">
<li><strong>Language:</strong> TypeScript</li>
<li><strong>Framework:</strong> React</li>
<li><strong>Build Tool:</strong> Vite</li>
<li><strong>External Data:</strong> f1api.dev (Community API)</li>
</ul>
</div>
</div>
<section class="tech-showcase" style="margin-top: 60px;">
<h2>Interface Deep Dive</h2>
<p>Clean data visualization for complex racing metrics.</p>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
<div style="text-align: center;">
<img src="images/pitwall-standings.webp" alt="Championship Standings" class="enlargeable-image" style="width: 100%; border-radius: 8px; border: 1px solid var(--border-color);">
<p style="font-size: 0.9rem; color: var(--text-muted); margin-top: 10px;">Previous Race Results & Championship Standings</p>
</div>
<div style="text-align: center;">
<img src="images/pitwall-schedule.webp" alt="Race Schedule" class="enlargeable-image" style="width: 100%; border-radius: 8px; border: 1px solid var(--border-color);">
<p style="font-size: 0.9rem; color: var(--text-muted); margin-top: 10px;">Season Schedule & Results</p>
</div>
<div style="text-align: center;">
<img src="images/pitwall-driver.webp" alt="Driver Details" class="enlargeable-image" style="width: 100%; border-radius: 8px; border: 1px solid var(--border-color);">
<p style="font-size: 0.9rem; color: var(--text-muted); margin-top: 10px;">Detailed Driver Statistics</p>
</div>
</div>
</section>
<site-footer></site-footer>
</div>
<script src="script.js"></script>
</body>
</html>