generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
217 lines (206 loc) · 11.9 KB
/
index.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Meta Tags for Search Engines-->
<meta name="keywords" content="memory card game, F1, Formula1, car game, pole position, card game, online game, cards, motorsport online game">
<meta name="description" content="A memory card game to start first on the grid of F1.">
<link rel="stylesheet" href="./assets/css/style.css">
<!--Favicon-->
<link rel="icon" href="./assets/images/favicon-white.jpg">
<title>F1 - Pole Position!</title>
</head>
<body class="body">
<!--Start Form - code inspired from https://github.com/Kathrin-ddggxh/CI-PP2_memory-card-game/blob/main/index.html -->
<dialog class="dialog" id="dialog">
<h2 class="start-box-heading">Let's drive!</h2>
<form class="form" method="dialog">
<label for="driver-name-input">Enter your Driver Name:</label>
<input id="driver-name-input" name="driver-name" class="start-box-input" type="text">
<label for="driver-photo-input">Upload your Driver Photo:</label>
<input id="driver-photo-input" name="driverphoto" class="start-box-input" type="file" accept="image/*">
<br>
<button class="start-btn" id="start-btn" type="submit" aria-label="start game"
onclick="time(); displayName()">Start the Qualifying</button>
</form>
</dialog>
<!--Header-->
<header>
<div>
<h1 class="header1"><img class="logo" src="./assets/images/f1-logo-red.png" alt="F1 logo"><a
class="header1-title">Pole Position</a></h1>
</div>
<br>
<div>
<h2 class="header2">A F1 memory card game to start in Pole Position!</h2>
</div>
</header>
<br>
<!--Main Content-->
<main class="main">
<!--Quick Info to start the game-->
<section class="game-info">
<h3>How to be the first starting on the grid?</h3>
<p>Uncover the matching pairs of F1 teammates. The fastest you match them and the higher chances you will
have to start in pole ahead of everyone and of <a href="https://en.wikipedia.org/wiki/Max_Verstappen"
target="_blank" rel="noopener"
aria-label="Visit the Wiki page of Max Verstappen (opens in a new tab)">Super Max</a>. Drivers will
have different faces and you will recognize the matching teammates by the <strong>same colour of their
racing suits.</strong></p>
<br>
<p>You will be able to qualify in the following positions by stopping the timer accordingly:</p>
<ul class="finish-times">
<li><i class="fa-solid fa-trophy" style="color: #d4af37;"></i><strong>1st</strong> Time equal or less
than 20s</li>
<li><i class="fa-solid fa-trophy" style="color: #aaa9ad;"></i><strong>2nd</strong> Time equal or less
than 30s</li>
<li><i class="fa-solid fa-trophy" style="color: #a97142;"></i><strong>3rd</strong> Time equal or less
than 40s</li>
</ul>
<br>
<p>If you don't know the Formula 1 drivers and its teams, you can have an in-depth look on the official site
of <a href="https://www.formula1.com/en/teams.html" target="_blank" rel="noopener"
aria-label="Visit the Formula1 page (opens in a new tab)">Formula 1</a>.</p>
</section>
<!--Button to play F1 Anthem-->
<span class="player"><strong>Play and get ready in your car!</strong>
<img id="button" class="button-properties" onclick="togglePlay()" src="assets/images/circle-play-regular.svg" alt="anthem formula1">
<audio src="assets/audio/f1_theme_brian_tyler.mp3"></audio>
</span>
<!--Game Area-->
<div class="game-score-block">
<!--Timer and Final Position-->
<section class="score-area">
<div class="timer-span">
<h4><i class="fa-solid fa-stopwatch" style="color: #ffffff;"></i> Time:
<span class="clock" id="timer"><label id="minutes">00</label>:<label id="seconds">00</label>
</span>
</h4>
<br>
<h4><i class="fa-solid fa-trophy" style="color: #ffffff;"></i> Position:
<span class="position-finish" id="show-position"></span>
</h4>
<br>
<h4><i class="fa-solid fa-user" style="color: #ffffff;"></i> Driver:
<span class="driver-submitted" id="show-name">
</span>
</h4>
</div>
<span class="card-driver">
<img id="tosubmit" src="./assets/images/verstappen-start.webp" alt="driver photo to upload" width="200">
</span>
</section>
<!--Cards table section-->
<div class="cards-area">
<div class="card" data-framework="ferrari">
<img src="./assets/images/pilots/leclerc.webp" alt="Charles Leclerc - Ferrari" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="ferrari">
<img src="./assets/images/pilots/sainz.webp" alt="Carlos Sainz - Ferrari" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="redbull">
<img src="./assets/images/pilots/verstappen.webp" alt="Max Verstappen-RedBull" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="redbull">
<img src="./assets/images/pilots/perez.webp" alt="Sergio Perez-RedBull" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="mercedes">
<img src="./assets/images/pilots/hamilton.webp" alt="Lewis Hamilton - Mercedes" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="mercedes">
<img src="./assets/images/pilots/russell.webp" alt="George Russell- Mercedes" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="astonmartin">
<img src="./assets/images/pilots/alonso.webp" alt="Fernando Alonso - Aston Martin"
class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="astonmartin">
<img src="./assets/images/pilots/stroll.webp" alt="Lance Stroll - Aston Martin" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="mclaren">
<img src="./assets/images/pilots/norris.webp" alt="Lando Norris - McLaren" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="mclaren">
<img src="./assets/images/pilots/piastri.webp" alt="Oscar Piastri - McLaren" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="alfa-romeo">
<img src="./assets/images/pilots/bottas.webp" alt="Valteri Bottas - Alfa Romeo" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
<div class="card" data-framework="alfa-romeo">
<img src="./assets/images/pilots/zhou.webp" alt="Guanyu Zhou - Alfa-Romeo" class="front-face">
<img src="assets/images/cards-back.webp" alt="card back" class="back-face">
</div>
</div>
</div>
<!-- Hidden section - pop-up windows for end game activated via JS -->
<!--pop-up window - Finish position 1st -->
<div id="popup-pole" class="popup-end-game">
<div class="position-phrase">
<p><strong>You are on Pole!</strong></p>
<p><strong>1st</strong> <i class="fa-solid fa-trophy" style="color: #d4af37;"></i></p>
</div>
<a class="restart-btn" href="index.html" style="text-decoration:none">Drive again!</a>
</div>
<!--pop-up window - Finish position 2nd -->
<div id="popup-second" class="popup-end-game">
<div class="position-phrase">
<p><strong>You are Second!</strong></p>
<p><strong>2nd</strong> <i class="fa-solid fa-trophy" style="color: #aaa9ad;"></i></p>
</div>
<a class="restart-btn" href="index.html" style="text-decoration:none">Drive again!</a>
</div>
<!--pop-up window - Finish position 3rd -->
<div id="popup-third" class="popup-end-game">
<div class="position-phrase">
<p><strong>You are Third!</strong></p>
<p><strong>3rd</strong> <i class="fa-solid fa-trophy" style="color: #a97142;"></i></p>
</div>
<a class="restart-btn" href="index.html" style="text-decoration:none">Drive again!</a>
</div>
<!--pop-up window - Finish position: Out of podium -->
<div id="popup-fourth" class="popup-end-game">
<div class="position-phrase">
<p><strong>You are out of podium...</strong></p>
<p><strong>Retry!</strong></p>
</div>
<a class="restart-btn" href="index.html" style="text-decoration:none">Drive again!</a>
</div>
<!--Audio for the winner -->
<audio id="winner-song" src="assets/audio/track-1st-position.mp3" preload="auto"></audio>
</main>
<!--Footer-->
<footer class="footer">
<ul class="social-networks">
<li>
<a href="https://www.facebook.com/" target="_blank" rel="noopener" aria-label="Visit our Facebook page (opens in a new tab)"><i class="fa-brands fa-facebook" style="color: #ffffff"></i></a>
</li>
<li>
<a href="https://www.youtube.com/" target="_blank" rel="noopener" aria-label="Visit our Youtube page (opens in a new tab)"><i class="fa-brands fa-youtube" style="color: #ffffff"></i></a>
</li>
<li>
<a href="https://www.twitter.com/" target="_blank" rel="noopener" aria-label="Visit our X-Twitter page (opens in a new tab)"><i class="fa-brands fa-x-twitter" style="color: #ffffff"></i></a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Visit our Instagram page (opens in a new tab)"><i class="fa-brands fa-instagram" style="color: #ffffff"></i></a>
</li>
</ul>
</footer>
<!--Font Awesome Kit-->
<script src="https://kit.fontawesome.com/4f92087d19.js" crossorigin="anonymous"></script>
<!--JavaScript file link-->
<script src="assets/js/script.js"></script>
</body>
</html>