forked from VAR-solutions/Find-the-match
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (127 loc) · 4.36 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
<!DOCTYPE html>
<html>
<head>
<title>FIND A MATCH</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/match.css">
<script src="assets/js/lib/chance.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">Find The Match</a>
<ul class="nav navbar-nav navbar-fixed-bottom">
<li><a href="#" data-toggle="modal" data-target="#exampleModalCenter">How to play?</a></li>
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" >
Launch demo modal
</button> -->
<!-- Popup - Modal -->
<li><a href="#">Developers</a></li>
<br>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-right">
<p class="score-board">Score Board</p>
<br>
<br>
<p><span id="score">000</span></p>
</div>
<div class="container">
<div class = "redux">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="thumbnail">
</div>
</div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLongTitle">How to play?
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button></h5>
</div>
<div class="modal-body">
1. Click on a tile to reveal its color<br>
2. Guess the tile with same color.<br>
a. If right, marks increase by 25.<br>
b. If wrong, marks decrease by 5.<br>
3. The game is played till all colors are revealed OR the score becomes negative.<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/lib/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/matches.js"></script>
</body>
</html>