-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (112 loc) · 5.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- BASIC TAGS -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="favicon" href="logo.png">
<title>The Simon Game</title>
<meta name="author" content="Rohit Gupta">
<meta name="description" content="THE SIMON GAME">
<meta name="keywords" content="THE SIMON GAME">
<!-- STYLESHEET CONNECTION -->
<link rel="stylesheet" href="styles.css">
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/07f8f9c90c.js" crossorigin="anonymous"></script>
</head>
<body>
<SECTION id="PRELOADER">
<div class="container">
<h2 class="loader">The Simon Game</h2>
</div>
</SECTION>
<SECTION id="CONTENT">
<SECTION id="NAVIGATION-BAR">
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" target="_blank" href="https://therohitgupta.vercel.app/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="">RULES</a>
</li>
</ul>
</div>
</div>
</nav>
</SECTION>
<h1>Press Any Key To Start</h1>
<div class="container-fluid">
<table class="table-box">
<tbody>
<tr>
<td class="box" id="green" style="background-color: green;"></td>
<td class="box" id="red" style="background-color: red;"></td>
</tr>
<tr>
<td class="box" id="yellow" style="background-color: yellow;"></td>
<td class="box" id="blue" style="background-color: blue;"></td>
</tr>
</tbody>
</table>
</div>
<SECTION id="FOOTER">
<div class="container text-center">
<h6 class="text-center footer-text">This <strong>Simon Game</strong> is Made With 💖 by Rohit Gupta </h6>
</div>
</SECTION>
</SECTION>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).on('load',function(){
$('#PRELOADER').delay(1500);
$('#PRELOADER').fadeOut(1000);
$('#CONTENT').fadeIn(1000);
})
</script>
<script src="game.js"></script>
<SECTION id="MODAL">
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered text-center">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Wanna Play The Simon Game?
</h5>
</div>
<div class="modal-body">
<p class="modal-text">
Press any <strong>KEY</strong> to START. <br> Simon will give the first signal. <br> Repeat the signal by pressing the same color button. <br>
Everytime you do this right you'll get a LEVEL UP. <br>
Then Simon will generate a new signal. <br>
You need to repeat previous two signals by pressing the same color buttons, <br> In the similar order. <br>
Continue playing as long as you can repeat each sequence of signals correctly.<br>
If you FAIL to repeat a sequence exactly. <br> Simon responds with a "RAZZ" sound. <br> This means you've lost, and the sequence of signals ends.
<br><br>
<img src="kiwi-catscafe.gif" alt="" style="height: 7rem;"> <br> <br>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn modal-footer-btn btn-lg btn-light" data-bs-dismiss="modal"><span class="modal-footer-btn">Okay, Let Me Play!</span></button>
</div>
</div>
</div>
</div>
</SECTION>
</body>
</html>