Can someone help me bring down my pause stop and play button

Can someone help me bring down my pause, stop and play button so that it is under my type here box. I aslo need help bring down my type here box so people can fully see the letters that are popping up on the screen. I also need a 45 sec timer at the top right because mines didnt work.

<html>
<head>
<style>
.buttonPosition{
    margin: -20px -50px;
    position:relative;
    top:310px;
    left:200px;
}
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
   border-radius: 8px;
}
.box:active{
    width: 100%;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.button2:active {
   background-color: #e7e7e7;
   box-shadow: 0 5px #008CBA;
   transform: translateY(2px);
}
.button3:active {
   background-color: #008CBA;
   box-shadow: 0 5px #f44336;
   transform: translateY(2px);
}
.button4:active {
   background-color: #008CBA;
   box-shadow: 0 5px #e7e7e7;
   transform: translateY(2px);
}
.button2 {
   //position:fixed;
   //top: 400px;
//   left: 300px;
   background-color: #008CBA;
} /* Blue */
.button3 {
   //position:fixed;
   //top: 400px;
   //left: 400px;
   background-color: #f44336;
} /* Red */
.button4 {
   //position:fixed;
   //top: 400px;
   //left: 500px;
   background-color: #e7e7e7; color: black;
} /* Gray */
</style>
<script> //script starting tag
var displayedText = \"\";
var score = 0;
var INCREMENT = 10;
var DECREMENT = 5;
var playFlag = false;
var LEVEL = [];
LEVEL.push({NUM:1 , SEQ:\'a\'}); //assigning level 1-11 into array
LEVEL.push({NUM:1 , SEQ:\'A\'});
LEVEL.push({NUM:2 , SEQ:\'a\'});
LEVEL.push({NUM:2 , SEQ:\'A\'});
LEVEL.push({NUM:3 , SEQ:\'aAa\'});
LEVEL.push({NUM:3 , SEQ:\'a#\'});
LEVEL.push({NUM:4 , SEQ:\'A#\'});
LEVEL.push({NUM:4 , SEQ:\'A#a\'});
LEVEL.push({NUM:5 , SEQ:\'AAa\'});
LEVEL.push({NUM:5 , SEQ:\'#Aa\'});
LEVEL.push({NUM:6 , SEQ:\'aA#a\'});
var CURRENTLEVEL=LEVEL[0];//you can change the level here by changing index
                          //value upto 9

Hi,

As per your requirement design issue is resolved but for timer I need to understand what sort of game is this so that I am able to sync the timer with play, pause and stop button.

For play, pause, stop button and Type here text box you can update your code with below mention code, then all button will be showing as per your requirement.

<html>
<head>
<style>
.buttonPosition{
margin: -20px -50px;
position: absolute;
top: 450px;
left: 480px;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
.box:active{
width: 100%;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.button2:active {
background-color: #e7e7e7;
box-shadow: 0 5px #008CBA;
transform: translateY(2px);
}
.button3:active {
background-color: #008CBA;
box-shadow: 0 5px #f44336;
transform: translateY(2px);
}
.button4:active {
background-color: #008CBA;
box-shadow: 0 5px #e7e7e7;
transform: translateY(2px);
}
.button2 {
//position:fixed;
//top: 400px;
// left: 300px;
background-color: #008CBA;
} /* Blue */
.button3 {
//position:fixed;
//top: 400px;
//left: 400px;
background-color: #f44336;
} /* Red */
.button4 {
//position:fixed;
//top: 400px;
//left: 500px;
background-color: #e7e7e7; color: black;
} /* Gray */
</style>
<script> //script starting tag
var displayedText = \"\";
var score = 0;
var INCREMENT = 10;
var DECREMENT = 5;
var playFlag = false;
var LEVEL = [];
LEVEL.push({NUM:1 , SEQ:\'a\'}); //assigning level 1-11 into array
LEVEL.push({NUM:1 , SEQ:\'A\'});
LEVEL.push({NUM:2 , SEQ:\'a\'});
LEVEL.push({NUM:2 , SEQ:\'A\'});
LEVEL.push({NUM:3 , SEQ:\'aAa\'});
LEVEL.push({NUM:3 , SEQ:\'a#\'});
LEVEL.push({NUM:4 , SEQ:\'A#\'});
LEVEL.push({NUM:4 , SEQ:\'A#a\'});
LEVEL.push({NUM:5 , SEQ:\'AAa\'});
LEVEL.push({NUM:5 , SEQ:\'#Aa\'});
LEVEL.push({NUM:6 , SEQ:\'aA#a\'});
var CURRENTLEVEL=LEVEL[0];//you can change the level here by changing index
//value upto 9
function play(){ //javascript function to play the game
playFlag=true;
display(); //calling the display function
}
function randomString(length, chars) {//assigning displaying elements
var mask = \'\';
if (chars.indexOf(\'a\') > -1) mask += \'abcdefghijklmnopqrstuvwxyz\';
if (chars.indexOf(\'A\') > -1) mask += \'ABCDEFGHIJKLMNOPQRSTUVWXYZ\';
if (chars.indexOf(\'#\') > -1) mask += \'0123456789\';
// if (chars.indexOf(\'!\') > -1) mask += \'~`!@#$%^&*()_+-={}[]:\";\\\'<>?,./|\\\\\';
var result = \'\';
for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
return result;
}
function display(){ //function to display the charecters on the desktop
displayedText = randomString(CURRENTLEVEL.NUM, CURRENTLEVEL.SEQ);
document.getElementById(\'displayCharSequence\').innerHTML = displayedText;
DisplayScore();
}
function incrementScore(){ //function for incrementing the score
score = score+INCREMENT;
}
function decrementScore(){ //function for decrementing the Score
if(score > 0)
score = score - DECREMENT;
else
score = 0;
}
function DisplayScore(){ //funtion for displaying the score
document.getElementById(\'score\').innerHTML = score;
}
function clearTyped(){
document.getElementById(\'typed\').value = \"\";
}
function check(obj){ //function for checking the object for play,pause,stop
var val = new String();
val = obj.value;
if(val == displayedText && playFlag){
incrementScore();
DisplayScore();
clearTyped();
display();
}
function startTimer(duration, display) { //function for time calculations
var start = Date.now(),diff,minutes,seconds;
function timer() {
diff = duration - (((Date.now() - start) / 1000) | 0);
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? \"0\" + minutes : minutes;
seconds = seconds < 10 ? \"0\" + seconds : seconds;
display.textContent = minutes + \":\" + seconds;
if (diff <= 0) {
start = Date.now() + 1000;
}
};
timer();
setInterval(timer, 1000);
}
window.onload = function () { //function for displaying the time and load the time
var reqMinutes = 60 * 2,
display = document.querySelector(\'#timeRemain\');
startTimer(reqMinutes, display);
};
}
</script>
</head>
<body style=\"background-image: url(\'image.png\');\" onload=\"changeLevel();\">
<div
style=\"text-align: center;float:left;width: 250px; height: 60px; font-size: 30px; color: rgb(6, 238, 246); position: absolute; top: 30px; left: 60px;\"\">
<label >Score:<a style=\"color:white;\" id=\"score\" href=\"#\">0000</a></label>
</div>
<div
style=\"text-align: center; float:right;width: 300px; height: 90px; font-size: 30px; color: rgb(6, 238, 246); position: absolute; top: 30px; right: 30px;\">
<label >RemainTime:<span style=\"color:white;\" id=\"timeRemain\" href=\"#\"></span></label>
</div>


<div style=\"font-size: 120; color: white;position: fixed;left:200px;width: 60%;text-align:center;height: 70%;background-color: rgb(10, 128, 128);box-shadow: 10px 10px 30px 30px rgb(3, 53, 65); top:100px\">
<a id=\"displayCharSequence\"></a>
</div>
<div style=\"top: 200px; left: 250px; width: 80%; height: 30%; right: 20px; bottom:200px;\">
<input id=\"typed\" onkeyup=\"check(this);\" class=\"box\" placeholder=\"Type Here.....\" autofocus
style=\"padding-left: 10;padding-right: 10; text-align:center;color:red;font-size: 40; z-index: 2000px; position: fixed; top: 260px; width: 50%; left: 240px; height: 90px;box-shadow: 10px 10px 30px 30px rgb(16, 227, 137);border-radius: 20px;\"
type=\"text\">
<div class=\"buttonPosition\">
<a class=\"button button2\" onclick=\"play();\" disabled>Play</a>
<a class=\"button button3\" disabled>Stop</a>
<a class=\"button button4\">Pause</a>
<div>
</div>

</body>
</html>

Can someone help me bring down my pause stop and play button

Solution

Get Help Now

Submit a Take Down Notice