-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmercedes_clock.html
135 lines (128 loc) · 3.99 KB
/
mercedes_clock.html
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AMG Mercedes F1 Dashboard</title>
<link rel="icon" href="https://images.ctfassets.net/1fvlg6xqnm65/6C16zrW3rzGzp8whpr4e1y/152befa996d2a24da81e0e50f6aa76c6/MAPF1_SM_n_1KL.webp?w=1920&q=75&fm=webp" type="image/svg+xml">
<link rel="stylesheet" href="styles/mercedes_clock.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<div class="dashboard-container">
<header class="header">
<a href="index.html" class="home-button">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 3V1L2 12H4V22H10V16H14V22H20V12H22L12 3Z"
fill="white"
/>
</svg>
</a>
<img
src="https://images.ctfassets.net/1fvlg6xqnm65/6C16zrW3rzGzp8whpr4e1y/152befa996d2a24da81e0e50f6aa76c6/MAPF1_SM_n_1KL.webp?w=1920&q=75&fm=webp"
alt="AMG Mercedes"
class="logo"
/>
<h1>AMG Mercedes F1 Dashboard</h1>
<div id="current-time">Loading...</div>
</header>
<section class="widget countdown-widget">
<h2>Race Countdown</h2>
<div id="countdown" class="countdown">
<div>
<span id="days">00</span>
<p>Days</p>
</div>
<div>
<span id="hours">00</span>
<p>Hours</p>
</div>
<div>
<span id="minutes">00</span>
<p>Minutes</p>
</div>
<div>
<span id="seconds">00</span>
<p>Seconds</p>
</div>
</div>
</section>
<div class="race-details-widget">
<h2>Upcoming Race</h2>
<table class="race-details-table">
<tr>
<th>Season</th>
<td id="season"></td>
</tr>
<tr>
<th>Round</th>
<td id="round"></td>
</tr>
<tr>
<th>Race Name</th>
<td id="race-name"></td>
</tr>
<tr>
<th>Circuit Name</th>
<td id="circuit-name"></td>
</tr>
<tr>
<th>Location</th>
<td id="location"></td>
</tr>
<tr>
<th>First Practice</th>
<td id="first-practice"></td>
</tr>
<tr>
<th>Second Practice</th>
<td id="second-practice"></td>
</tr>
<tr>
<th>Third Practice</th>
<td id="third-practice"></td>
</tr>
<tr>
<th>Qualifying</th>
<td id="qualifying"></td>
</tr>
</table>
</div>
<section class="widget map-widget">
<h2>Track Location</h2>
<div id="map"></div>
<div id="controls"></div>
</section>
<section class="widget standings-widget">
<h2>Drivers Leaderboard</h2>
<div id="drivers-leaderboard">
<ul id="drivers-list">
<!-- Constructor results will be dynamically inserted here -->
</ul>
</div>
</section>
<section class="widget standings-widget">
<h2>Constructors Leaderboard</h2>
<div id="constructors-leaderboard">
<ul id="constructors-list">
<!-- Constructor results will be dynamically inserted here -->
</ul>
</div>
</section>
</div>
<footer>
<p>
Made with Soft Tyres for the F1 community © <span id="year"></span>
</p>
</footer>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="js/mercedes_clock.js"></script>
</body>
</html>