generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
169 lines (155 loc) · 6.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Game description-->
<meta name="description" content="Have fun with this free online Javascript game.
Whack as many moles within the time limit given">
<meta name="keywords" content="Whack-A-Mole, game, arcade-game, mole, javascript">
<!--Author information-->
<meta name="author" content="Chris Townsend">
<!--Link to CSS File-->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!--Whack A Mole head title-->
<title>Whack-A-Mole</title>
<!--Favicon logo-->
<link rel="icon" type="image/x-icon" href="./assets/images/game-images/favicon-ico.png">
<!--MailJS script tag with personal init tag-->
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>
<script>
(function () {
emailjs.init("ENQJGikNpn_xKjgxz");
})();
</script>
</head>
<body>
<div class="homepage-container" onclick="playSound()">
<!--Div to allow mallet cursor on homepage-->
<div class="cursor-mallet">
<img src="./assets/images/game-images/mallet.webp" alt="mallet cursor">
</div>
<!-- Center and align items on homepage -->
<div id="home" class="flex-column flex-center">
<!--Whack A Mole title-->
<h1>Whack-A-Mole</h1>
<!--Nav section of game-->
<a href="game.html" class="btn"> Play</a>
<!--Mole animation-->
<div class="home-mole-container">
<div class="hole">
<div class="soil-div"></div>
</div>
<div class="hole">
<div class="soil-div"></div>
</div>
<div class="hole">
<div class="soil-div"></div>
</div>
<div class="hole">
<div class="soil-div"></div>
</div>
<div class="hole">
<div class="soil-div"></div>
</div>
<div class="hole">
<div class="soil-div"></div>
</div>
</div>
<!-- Open the contact us modal -->
<button class=" btn contactBtn" aria-label="Contact" id="contact">Contact <i class="fa-solid fa-envelope">
</i></button>
<!-- The modal -->
<div id="mycontactModal" class="contactModal modal">
<!-- Modal content -->
<!--Modal close button-->
<div class="modal-content">
<span class="contactClose" id="contactSpan">×</span>
<!--Modal title-->
<h2 class="contact-modal-header">Contact Us</h2>
<p class="contact-modal-question">Have a question? Found any bugs? Let me know what you think!</p>
<!--Modal body content-->
<form>
<div class="contact-modal">
<input type="text" id="fullName" placeholder="Your Name" required>
<input type="email" id="email_id" placeholder="Email Address" required>
<textarea id="message" placeholder="Enter your message here . . " required></textarea>
<button onclick="sendMail()" aria-label="Send the email" id="send-button">Send Email</button>
</div>
</form>
<!--Modal footer social icons-->
<div class="modal-footer">
<ul>
<li>
<a href="https://www.linkedin.com/in/chris-townsend93" target="_blank" rel="noopener"
aria-label="Vist my Linkedin page (opens in a new tab)" class="fa-brands fa-linkedin"></a>
</li>
<li>
<a href="https://github.com/chris-townsend" target="_blank" rel="noopener"
aria-label="Vist my Github page (opens in a new tab)" class="fa-brands fa-github-square"></a>
</ul>
</div>
</div>
</div>
<!-- Open the instructions modal -->
<button class="btn instructionBtn" aria-label="Instructions" id="instruction-btn">Instructions <i
class="fa-solid fa-circle-info"></i></button>
<!-- The modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<!--Modal close button-->
<div class="modal-content">
<span class="close">×</span>
<!--Modal title-->
<h2 id="instructions-modal-header">How to Play</h2>
<!--Modal body content-->
<div class="modal-body">
<p>Ready for some fast-action, mole-whackin' fun? Look no further!
Grab a mallet and whack your way to to the top of the leaderboards</p>
<p id="how-to-play">
<ul>
<li>Use your mouse to click on the moles</li>
<li>You will get 20 seconds to whack as many mole's as you can</li>
<li>For every successful whack of a mole, you will score 1 point</li>
<li>To win, whack your way to the highest score!</li>
</ul>
</div>
<!--Modal footer social icons-->
<div class="modal-footer">
<ul>
<li>
<a href="https://www.linkedin.com/in/chris-townsend93" target="_blank" rel="noopener"
aria-label="Vist my Linkedin page (opens in a new tab)" class="fa-brands fa-linkedin"></a>
</li>
<li>
<a href="https://github.com/chris-townsend" target="_blank" rel="noopener"
aria-label="Vist my Github page (opens in a new tab)" class="fa-brands fa-github-square"></a>
</ul>
</div>
</div>
</div>
<!--Footer which contains play/pause stop controls for music on homepage-->
<footer>
<div>
<audio id="audio">
<source src="assets/audio/jazz.mp3" type="audio/wav"></audio>
<button id="playPauseBtn" aria-label="Play/Pause the music" onclick="playPause()">Play ►</button>
<!--onclick stop function to stop the music-->
<button onclick="stop()" aria-label="Stop the music" id="stopBtn">Stop ⏹</button>
</div>
</footer>
</div>
</div>
<!--Font awesome script-->
<script src="https://kit.fontawesome.com/9932e8fab5.js" crossorigin="anonymous"></script>
<!--Javascript tags-->
<script src="assets/js/home.js"></script>
<script src="assets/js/game.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>