-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (146 loc) · 4.94 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flip Card Memory Game</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
defer
></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="./Styles/styles.css" />
<link rel="shortcut icon" href="./Images/favicon.png" type="image/x-icon" />
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
defer
></script>
</head>
<body>
<!-- Start Page -->
<div id="start-game" class="container">
<div class="start-page">
<div class="bg-light p-3 rounded-5 border border-5 border-danger">
<h2 class="text-center py-4 text-uppercase fw-bold text-success">
Flip The Card - Memory Game
</h2>
<div
class="d-flex flex-column flex-wrap justify-content-center align-items-center gap-3"
>
<select name="grid-selection" id="grid-options" class="form-select">
<option value="select">Select Grid</option>
</select>
<button type="button" id="play" class="">
<img src="./Images/play-button.png" alt="Play button image" />
</button>
</div>
</div>
</div>
</div>
<!-- Game Page -->
<div id="game-page" class="mt-3m" hidden>
<!-- Score Card -->
<div
id="score-card"
class="bg-white rounded-3 user-select-none position-relative"
>
<div
class="d-flex flex-row flex-wrap justify-content-between align-items-center px-4 py-3"
>
<span class="text-uppercase fw-bold fs-5">Scorecard</span>
<span class="label"> Pairs: <b id="pairs-found-label">0</b> </span>
<span class="label">Moves : <b id="moves-label">0</b></span>
<div class="d-flex flex-row gap-1 align-items-center">
<button
type="button"
class="btn btn-primary p-0 px-2"
id="home-btn"
title="Home Button"
>
<span class="bi bi-house-door fs-4"></span>
</button>
<button
type="button"
class="btn btn-outline-danger p-0 px-2"
id="pause-btn"
title="Pause Button"
>
<span class="bi bi-pause-fill fs-4"></span>
</button>
</div>
<span class="label" id="timer"><b>00</b> mins: <b>00</b> secs</span>
</div>
<div
class="progress time-progress"
role="progressbar"
aria-label="progress bar Example"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
style="height: 7px"
>
<div
class="progress-bar bg-info rounded-end-2"
id="time-bar"
style="width: 0%"
></div>
</div>
</div>
<!-- Grids -->
<div id="grids" class="grid-box"></div>
</div>
<!-- Modal -->
<div
class="modal fade"
id="game-modal"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content user-select-none">
<div class="modal-header">
<h1 class="modal-title fs-5" id="game-modal-label">
Game Modal Label
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button
type="button"
class="btn btn-outline-success"
data-bs-dismiss="modal"
>
Back To Main Page
</button>
</div>
</div>
</div>
</div>
<!-- Toasts -->
<div
class="bg-white rounded-3 py-2 px-4 d-flex flex-row gap-2 align-items-center position-absolute hide-toast"
id="game-toast"
>
<span class="bi fs-5 text-success" id="toast-icon"></span>
<span class="toast-font" id="toast-body"></span>
</div>
<script src="./Scripts/data.js"></script>
<script src="./Scripts/script.js"></script>
</body>
</html>