-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (110 loc) · 5.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Color Game</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="color.css" type="text/css">
</head>
<body class="bg-dark" onload="gen()">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Instructions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
There are 3 values provided which are values for Red, Green and Blue respectively. According to the
values provided to you, try to figure out the color that is generated by mixing Red, Green and Blue in
those quantities.
<ul type="none">
<li>For easy difficulty, you get 2 chances. There are 3 Choices</li>
<li>For medium difficulty, you get 4 chances. There are 6 Choices</li>
<li>For hard difficulty, you get 3 chances. There are 9 Choices</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron py-1 my-0 bg-primary text-light" id="jumbotron">
<h1 class="display-5 text-center">THE GREAT<br>
<span class="display-4 line-height" id="display-2">RGB(0, 0, 0)</span>
<br>GUESSING GAME
</h1>
</div>
<nav class="navbar navbar-expand-md white navbar-primary py-0 mr-auto w-5 justify-content-center">
<div class="container">
<button type="button" id="new_color" class="navbar-brand btn btn-outline-primary rounded-0">New Colors
</button>
<div class="navbar-nav mx-auto" id="success">
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fas fa-ellipsis-v"></i></span>
</button>
<div class="btn-group collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<button class="nav-link btn btn-outline-primary rounded-0" data-toggle="modal"
data-target="#exampleModal">Instructions
</button>
</li>
<li class="nav-item dropdown">
<button type="button" class="nav-link btn btn-outline-primary rounded-0 dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Difficulty
</button>
<div class="dropdown-menu">
<button id="easy" class="dropdown-item btn rounded-0" href="">Easy</button>
<button id="hard" class="dropdown-item btn rounded-0" href="">Medium</button>
<button id="medium" class="dropdown-item btn rounded-0" href="">Hard</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="game">
<div class="row d-flex justify-content-center mt-3" id="normal">
<div class="col card square easy medium">
</div>
<div class="col card square easy medium">
</div>
<div class="col card square easy medium">
</div>
</div>
<div class="row d-flex justify-content-center mt-3" id="hardef">
<div class="col card square medium">
</div>
<div class="col card square medium">
</div>
<div class="col card square medium">
</div>
</div>
<div class="row d-flex justify-content-center mt-3" id="dif_med">
<div class="col card square hide">
</div>
<div class="col card square hide">
</div>
<div class="col card square hide">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/b4d549ad02.js" crossorigin="anonymous"></script>
<script src="color.js"></script>
</body>
</html>