-
Notifications
You must be signed in to change notification settings - Fork 2
/
game.html
112 lines (100 loc) · 6.06 KB
/
game.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
<!DOCTYPE html>
<html lang="en-US">
<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" />
<!-- Link any Google fonts here -->
<!-- Link CSS Primer here -->
<link rel="stylesheet" href="https://unpkg.com/@primer/css@%5E20.2.4/dist/primer.css" />
<!-- Link external CSS stylesheet here -->
<link rel="stylesheet" href="./assets/style.css" />
<link rel="stylesheet" href="./assets/style.css" />
<title>Hardcore Memory Game Page</title>
</head>
<body>
<header>
<h1>Hardcore Memory Game</h1>
<div class="button-row">
<!--'Return Home' and 'Start Over' buttons-->
<button class="btn-mktg btn-signup-mktg btn-large-mktg" type="button" onclick="document.location='index.html'">Return Home</button>
<button class="btn-mktg btn-signup-mktg btn-large-mktg" type="button" onClick="window.location.reload()">Start Over</button>
<br></br>
<!-- count-up timer -->
<label id="minutes">00</label>:<label id="seconds">00</label>
</div>
</header>
<div class="game-container grid">
<!-- game card rows here -->
<div class="d-flex flex-justify-center row-1">
<div class="border color-bg-done card"><img id="cardImg1" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-success card"><img id="cardImg2" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-done card"><img id="cardImg3" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-success card"><img id="cardImg4" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
</div>
<div class="d-flex flex-justify-center row-2">
<div class="border color-bg-success card"><img id="cardImg5" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-done card"><img id="cardImg6" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-success card"><img id="cardImg7" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-done card"><img id="cardImg8" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
</div>
<div class="d-flex flex-justify-center row-3">
<div class="border color-bg-success card"><img id="cardImg9" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-done card"><img id="cardImg10" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-success card"><img id="cardImg11" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-done card"><img id="cardImg12" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
</div>
<div class="d-flex flex-justify-center row-4">
<div class="border color-bg-done card"><img id="cardImg13" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-success card"><img id="cardImg14" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-done card"><img id="cardImg15" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
<div class="border color-bg-success card"><img id="cardImg16" height="200px" width="200px" src="assets/Images/Back-400sq.jpg"></div>
</div>
<!-- count-up timer -->
<p id="count-up-timer" class="timer"></p>
</div>
<!-- Form to enter initials and time as a high score -->
<div class="Box Box--spacious col-6 mx-auto text-center" id = "initials-form">
<form id="form-initials">
<div class="Box-body">
<!-- <h3 class="f1-light">
Game over!
</h3> -->
<div class="form-group mb-4">
<div class="form-group-header"><label>Enter your initials:</label></div>
<div class="form-group-body"><input class="form-control initials" type="text" /></div>
</div>
<button class="btn btn-primary btn-block">Submit</button>
</div>
</form>
</div>
<!-- Trigger/Open The Modal -->
<div class="button-row">
<button class="btn-mktg btn-signup-mktg btn-large-mktg" id="myBtn" type="button">Show me a fact!</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Animal Fact File:</h2>
</div>
<div class="modal-body">
<p id="facts"></p>
</div>
<div class="modal-footer">
<h3>Play again to learn more!</h3>
</div>
</div>
<!-- Day.js CDN link -->
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script>dayjs().format()</script>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<!-- External JavaScript file -->
<script src="./assets/script.js"></script>
<script src="./assets/script-timer.js"></script>
<script src="./assets/trivia.js"></script>
</body>
</html>