-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 7.81 KB
/
index.html
1
<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><title>BeatBox</title><link rel="icon" href="hammer.png"><link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"><link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="animate.css"><link rel="stylesheet" href="beat.css"><script src="jquery-3.1.1.js"></script><script src="bootstrap/js/bootstrap.min.js"></script><script src="jquery.waypoints.min.js"></script><script src="beat.js"></script></head><body><div class="container-fluid" id="headbox"><div id="header"><div class="row" id="headcon"><div class="col-xs-12" align="center"><a href="index.html"><h1>Beat <img class="img-responsive" src="logo.png"> Box </h1></a></div><div class="col-xs-6" id="time"><p><i class="fa fa-clock-o "></i><span id="clock">-- : --</span></p></div><div class="col-xs-6" id="score"><i class="fa fa-heart" aria-hidden="true"></i><i class="fa fa-heart" aria-hidden="true"></i><i class="fa fa-heart" aria-hidden="true"></i></div></div></div></div><div class="container-fluid" id="diff"><div id="diff-win"><div class="row"><div class="col-xs-12"><h1>Instructions</h1><p>This game is as simple as it gets. Boxes with different colors will appear on your screen, you have to beat the boxes with the color same as that of the difficulty button you have chosen.There are two modes of the game, mouse mode and keyboard mode. Choose the mode you are comfortable with. You would get three lives, indicated by the hearts on the top. Once you run out of lives, the game ends and your time is your score. Click on the logo above to return to home screen. Now choose your difficulty level and beat the shit out of those boxes! </p></div></div><button class="btn btn-success choice" id="easybtn">Easy</button><br><button class="btn btn-warning choice" id="mediumbtn">Medium</button><br><button class="btn btn-danger choice"id="hardbtn">Hard</button><br></div><div id="mode-win"><h1>What Do You Prefer?</h1><p>In mouse mode click on the boxes of the right color and in the keyboard mode press the respective letter appearing on the box of the right color. <strong>If on a mobile device, choose mouse mode.</strong></p><button class="btn btn-primary mode" id="mousebtn"><i class="fa fa-mouse-pointer"></i>Mouse</button><button class="btn btn-primary mode" id="keyboardbtn"><i class="fa fa-keyboard-o"></i>Keyboard</button></div></div><div class="container" id="play0" tabindex="0"><h1 id="count"></h1><div class="row"><div class="col-xs-3 col-xs-offset-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>D</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3 col-xs-offset-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>B</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>A</p></div></div></div></div></div><div class="container" id="play1" tabindex="0"><h1 id="count"></h1><div class="row"><div class="col-xs-3 col-xs-offset-1"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3 col-xs-offset-1"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div></div></div><div class="container" id="play2" tabindex="0"><h1 id="count"></h1><div class="row"><div class="col-xs-3 col-xs-offset-1"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3 col-xs-offset-1"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3 col-xs-offset-1"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div><div class="col-xs-3"><div class="colbox"><div class="right"><h1><i class="fa fa-check"></i></h1></div><div class="wrong"><h1><i class="fa fa-times"></i></h1></div><div class="text"><p>C</p></div></div></div></div></div><div class="container-fluid" id="gameover"><h1>GAME OVER!</h1><h1 id="finaltime"></h1><a class="btn btn-primary" id="replaybtn" href="index.html">Replay</a></div><div class="container-fluid" id="about"><div id="about-con"><h1>Hope You Liked The Game <i class="fa fa-xsile-o"></i></h1><div class="row"><div class="col-md-6"><img class="img-responsive img-thumbnail" src="mypic.jpg"></div><div class="col-md-6"><p>This game has been developed by Paritosh Sharma. A CSE student studying in Birla Institute Of Technology Mesra.<br><a href="/" title="My Website" target="_blank"><i class="fa fa-globe" aria-hidden="true"></i></a><a title="Facebook" href="https://www.facebook.com/paritosh080797" target="_blank"><i class="fa fa-facebook" aria-hidden=true></i></a><a href="mailto:[email protected]" title="mail" target="_blank"><i class="fa fa-envelope" aria-hidden=true></i></a><a href="https://github.com/pari08tosh/beatbox" title="Github" target="_blank"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></p></div></div></div></div></body></html>