-
Notifications
You must be signed in to change notification settings - Fork 4
/
bonus.html
135 lines (134 loc) · 4.62 KB
/
bonus.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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/pyro.css" />
<link rel="stylesheet" href="./css/bonus.css" />
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<title>AstroMath | bonus</title>
</head>
<body class="not-home">
<!--Loading Gif-->
<div class="loader">
<img src="./assets/gifs/loading.gif" alt="loading..." />
</div>
<!-- theme music -->
<audio class="audio__theme" src="./assets/music/themeMusic.mp3"></audio>
<!--High Score-->
<audio class="audio__high" src="./assets/music/game/high_Score.mp3"></audio>
<!--Low Score-->
<audio class="audio__low" src="./assets/music/game/game_lost.mp3"></audio>
<!-- Game Music -->
<audio class="audio__game" src="./assets/music/game/explode.wav"></audio>
<audio class="audio__game" src="./assets/music/game/danger.mp3"></audio>
<!-- Fireworks -->
<audio
class="audio__fireworks"
src="./assets/music/game/firework.wav"
></audio>
<!-- header -->
<header class="header">
<h2 class="header__info header__info--time">120 s</h2>
<h2 class="header__info header__info--score">0</h2>
<h2 class="header__info header__info--sound">
<img
class="header__info--sound-icon settings__sound--icon"
src="./assets/images/soundon.svg"
alt="sound-toggle"
/>
</h2>
<h2 class="header__info header__info--level">Bonus</h2>
<h2 class="header__info header__info--exit">
<a href="./astro-math-levels.html" id="exit">Exit</a>
</h2>
</header>
<!-- main -->
<main class="main">
<!-- start popup -->
<section class="popup--game">
<h2 class="popup__title">Get Ready</h2>
<p class="popup__description">
Compare Answers and Click on the
<span class="primary-color">Right</span> half
<span class="primary-color">(D key)</span> if the answers are same or
Click on the <span class="primary-color">Left</span> half
<span class="primary-color">(A key)</span>
</p>
<button class="popup__button popup__button--start">Start</button>
</section>
<!-- lives -->
<section class="life">
<img
src="./assets/images/meteorlife.svg"
alt="Life"
class="life__img"
/>
<img
src="./assets/images/meteorlife.svg"
alt="Life"
class="life__img"
/>
<img
src="./assets/images/meteorlife.svg"
alt="Life"
class="life__img"
/>
</section>
<!-- items -->
<div class="main__item main__item--right" data-side="right">
<p class="main__question"></p>
</div>
<div class="main__item main__item--left" data-side="left">
<p class="main__question"></p>
</div>
<!-- results -->
<section class="result none">
<div class="pyro none">
<div class="before"></div>
<div class="after"></div>
</div>
<h2 class="result__title secondary-color">Results</h2>
<div class="result__details">
<div class="result__images">
<img
src="./assets/images/asteroid.png"
alt="asteroid"
class="result__img"
/>
<img
src="./assets/gifs/high_score.gif"
alt="high_score"
class="result__high-score none"
/>
<p class="result__quotes popup__description primary-color">20%</p>
</div>
<div class="result__data">
<div>
<p class="result__highscore popup__description primary-color">
High Score: <span class="secondary-color">2</span>
</p>
<p class="result__score popup__description primary-color">
Score: <span class="secondary-color">2</span>
</p>
</div>
</div>
</div>
<div class="result__buttons">
<button class="result__button popup__button" data-value="again">
Play Again
</button>
<a href="./astro-math-levels.html">
<button class="result__button popup__button exit__button">
Exit
</button></a
>
</div>
</section>
</main>
<!-- js -->
<script src="./js/bonus.js" type="module"></script>
</body>
</html>