How to give some space between my buttons - html

I need help giving my buttons some space. No matter what I try, I just can't seem to space them out.
You can see my github repository here.
The following is my HTML with stylesheets inside.
<script src="update.js"></script>
<script src="sw.js"></script>
<script>
let d = new Date();
//alert(d);
let hrs = d.getHours();
let min = d.getMinutes();
let day = d.getDay();
let auth = false;
fetch('https://raw.githubusercontent.com/AzlanCoding/iframe-browser-pwa/main/lock.js')
.then(response => response.text())
.then(data => {
let split_str = "/split/";
const data_arr = data.split(split_str);
let lock = data_arr[1];
if (data_arr[0] === "lock") {
setInterval(lock,500);
}else{
alert(data_arr[0]);
}
console.log(data_arr[0]);
});
</script>
<!DOCTYPE html>
<html lang="en">
<style>
body {
background-color: ##2C2F33;
}
</style>
<head>
<meta name="theme-color" content="#2C2F33">
<meta charset="UTF-8">
<meta name="description" content="Azlan's iframe Browser">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0, no-store">
<!meta http-equiv="cache-control" content="max-age=0" />
<!meta http-equiv="Pragma" content="no-cache">
<!meta http-equiv="Expires" content="0">
<title> Iframe Browser </title>
<link rel="canonical" href="https://azlancoding.github.io/iframe-browser-pwa/" />
<link rel="manifest" href="/iframe-browser-pwa/manifest.webmanifest">
<meta name="keywords" content="bypass, school, browser in website, cloud browser">
<link rel="stylesheet" href="css/styles.css">
<title> iFrame browser </title>
<script language="javascript">
const getValidUrl = (url = "") => {
let newUrl = window.decodeURIComponent(url);
newUrl = newUrl.trim().replace(/\s/g, "");
if(/^(:\/\/)/.test(newUrl)){
return `https${newUrl}`;
}
if(!/^(f|ht)tps?:\/\//i.test(newUrl)){
return `https://${newUrl}`;
}
return newUrl;
};
function setCookie(c_name,value,exdays){
var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name){
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
checkSession();
function checkSession(){
var c = getCookie("visited");
if (c === "yes") {
alert("Welcome back! Make sure you have your extension on.");
}
else {
alert("By continuing, you agree to the terms and conditions in azlancoding.github.io/iframe-browser/TermsAndConditions")
ext_install();
}
}
function ext_install()
{
if (window.confirm('An extension is required for this website to work. Do you want to install it now?'))
{
setCookie("visited", "yes", 365)
window.location.href='https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe';
};
};
function checkCookie() {
let user = getCookie("alerted");
if (user != "") {
alert("Welcome again !");
} else
{ext_install();}
}
//document.getElementById("myIframe").src = "https://wwf.org";
var iframe = document.getElementById("myIframe");
//var website = iframe.src;
//console.log(website);
document.addEventListener("scroll", function(event)
{
var style = document.getElementById("myIframe").style;
style.webkitTransform = style.webkitTransform ? "" : "scale(1)";
})
/*function resizeIframe()
{
document.getElementById('myIframe').height = 100%;
}*/
function ResetBox()
{
if(document.getElementById("URL").value == '')
{document.getElementById("URL").value='';};
}
function LoadPage()
{
var objFrame=document.getElementById("myIframe");
var newurl = getValidUrl(document.getElementById("URL").value);
objFrame.src = newurl;
}
var elem = document.documentElement
function openFullscreen() {
if (elem.requestFullscreen)
{
elem.requestFullscreen();
}
else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen)
{
document.exitFullscreen();
}
else if (document.webkitExitFullscreen)
{
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen)
{
document.msExitFullscreen();
}
}
</script>
<style>
.iframe-container {
overflow: visible;
/* 16:9 aspect ratio */
//padding-top: 56.25%;
position: 60px 0px;
//margin-top: 60px;
}
:root {
--fallback-title-bar-height: 45px;
}
.draggable {
app-region: drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: drag;
}
.nonDraggable {
app-region: no-drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: no-drag;
}
#child {
width: window.innerWidth;
//height: window.innerHeight;
height: 100vh;
flex: 1 1 auto;
position: absolute;
top: env(titlebar-area-height, var(--fallback-title-bar-height));
left: 0;
right: 0;
}
.button {
background-color: #ffffff;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
margin-right: 5px;
cursor: pointer;
border-radius: 10px;
app-region: no-drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: no-drag;
}
fieldset {
border: 0px;
}
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
}
#titleBarContainer {
position: absolute;
top: 0;
left: 0;
height: env(titlebar-area-height, var(--fallback-title-bar-height));
width: 100%;
background-color:#254B85;
}
#titleBar {
position: absolute;
top: 0;
display: flex;
user-select: none;
height: 100%;
left: env(titlebar-area-x, 0);
//left : 0px;
width: env(titlebar-area-width, 50%);
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
#titleBar > span {
margin: 5;
padding: 0px 32px 0px 32px;
}
#titleBar > input {
flex: 1;
margin: 0px;
border-radius: 5px;
border: none;
padding: 8px;
}
#mainContent {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: env(titlebar-area-height, var(--fallback-title-bar-height));
overflow-y: scroll;
}
</style>
</head>
<body style="background-color:#254B85">
<div id="titleBarContainer" >
<div id="titleBar">
<span class="draggable">Iframe Browser</span>
<input class="nonDraggable" type="text" ID="URL" placeholder="Enter a URL" value="https://www.google.com"></input>
<input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" VALUE="&#65513" onClick="history.back()">
<input type="button" VALUE="&#65515" onClick="history.forward()">
<input type="button" class="fullscreen" value="⛶" onclick="openFullscreen()">
<input type="button" class="Exitfullscreen" value="Exit Fullscreen" onclick="closeFullscreen()">
<input type="button" class="newWindow" value="New Window" onclick=" window.open('https://azlancoding.github.io/iframe-browser-pwa/','_blank')">
<input type="button" class="cloudbrowser" value="Cloud Browser" onclick="window.open('https://replit.com/#azlancoding/free-and-unlimited-cloud-browser?embed=true','_blank')">
</div>
</div>
<!div style="Clear:both;">
<!input type="text" value="https://www.google.com" class="frmUrlVal" ID="URL" placeholder = "Enter a URL" >
<!/div>
<div id = "child" >
<iframe align="top" width="100%" height="100%" allowtransparency="true" style="background: #FFFFFF;" src="https://www.google.com" onload = "check()" onerror"ext_install()" allow="camera;microphone" frameborder=yes loading ="lazy" name="myIframe" id="myIframe"> </iframe>
</div>
<script>
window.onbeforeunload = () => '';
var urlbox = document.getElementById("URL");
urlbox.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
LoadPage();
}
});
function check(){
document.getElementById("URL").value = "";
}
</script>
<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register (
'/iframe-browser-pwa/sw.js',
{scope: '/iframe-browser-pwa/'}
)
}
</script>
<script src="js/app.js"></script>
</body>
</html>
The stylesheet may be weird as it is used to support Windows Overlay Controls which allowed buttons to be placed on top next to the buttons to minimise, maximise and close the window. I just changed the manifest to support tabbed experimental feature.
Any help is appreciated.
Update:
I tried to use <span> but it over did it...

Related

How could i restart my game? Tabs, jQuery, game

I need to make an invisible background color that appears after 10 seconds of losing a game. In the finish, I also should make a button "Restart" that restarts the game.
Please, help me!
I have found some information about restarting on the internet, but I couldn't understand most of this, so please may you explain to me a very simple method? I am just a student, it totally fits me more than difficult theories.
const width = $(document).width() - 200 // ширина окна html 1366
const height = $(document).height() - 200 // высота окна html 600
let timer = 10
let points = 0
let isClick = false
let intervalID
$('.item-1').click(function () {
setRandomPosition()
$('.points').text(points)
points += 10
if(points == 100) {
endGame('Вы выиграли')
clearInterval(intervalID)
}
})
let intervalID = setInterval(function() {
if(timer > 0) {
timer--
$('.timer').text(timer)
} else {
endGame('Вы проиграли')
}
}, 1000)
function setRandomPosition() {
$('.item-1').css({
'top' : Math.floor(Math.random() * height),
'left' : Math.floor(Math.random() * width)
})
}
function endGame(endText) {
$('.end').css('display', 'flex')
$('h1').text(endText)
}
* {
margin: 0;
padding: 0;
}
.item {
width: 200px;
aspect-ratio: 1/1;
background-color: lightpink;
position: absolute;
}
.timer {
font-size: 65px;
text-align: center;
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
.points {
font-size: 65px;
position: absolute;
right: 20px;
z-index: 1;
}
.end {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.497);
align-items: center;
justify-content: center;
}
.restart {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="item item-1"></div>
<p class="timer">10</p>
<p class="points">0</p>
<div class="end">
<h1></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>

It's a bit hard to know how you want the game to reset since you haven't include information about how it should reset, but here is an example:
$('.end h1').click(function() {
points = 0;
$('.points').text(points);
timer = 10;
intervalID = setInterval(_timer, 1000)
});
Also I've moved your code a bit around, but nothing major.
Demo
const width = $(document).width(); - 200 // ширина окна html 1366
const height = $(document).height(); - 200 // высота окна html 600
let timer = 10;
let points = 0;
let isClick = false;
let intervalID;
$('.item-1').click(function() {
setRandomPosition()
points += 10
$('.points').text(points)
if (points == 100) {
endGame('Вы выиграли')
clearInterval(intervalID)
}
})
function _timer() {
$('.end').css('display', 'none')
if (timer > 0) {
timer--
$('.timer').text(timer)
} else {
endGame('Вы проиграли')
}
};
intervalID = setInterval(_timer, 1000)
function setRandomPosition() {
$('.item-1').css({
'top': Math.floor(Math.random() * height),
'left': Math.floor(Math.random() * width)
})
}
$('.end h1').click(function() {
points = 0;
$('.points').text(points);
timer = 10;
intervalID = setInterval(_timer, 1000)
});
function endGame(endText) {
$('.end').css('display', 'flex')
$('h1').text(endText)
}
* {
margin: 0;
padding: 0;
}
.item {
width: 200px;
aspect-ratio: 1/1;
background-color: lightpink;
position: absolute;
}
.timer {
font-size: 65px;
text-align: center;
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
.points {
font-size: 65px;
position: absolute;
right: 20px;
z-index: 1;
}
.end {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.497);
align-items: center;
justify-content: center;
}
.restart {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="item item-1"></div>
<p class="timer">10</p>
<p class="points">0</p>
<div class="end">
<h1></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</body>
</html>

Weird behavior from Express, Socket.io chat app

I am attempting to create a chat app using socket.io on nodeJS and I want to add image transmission using the method outlined here
I'm running into an issue where if the image file is any larger than ~1MB, it seems to reset the connection and the io connection event is raised again (as the chat log gets re-sent).
Here is my code:
CLIENTSIDE
<html>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 5rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#subBtn {background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; margin-bottom:5.3rem;bottom: 0; left: 200; right: 0; display: flex; height: 2rem; box-sizing: border-box; backdrop-filter: blur(10px);}
#img {background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; margin-bottom:5.3rem;bottom: 0; left: 200; right: 0; display: flex; height: 2rem; box-sizing: border-box; backdrop-filter: blur(10px);}
#nametag {background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed;margin-top:-0.05rem;top: 0; left: 0; right: 0; display: flex; height: 2rem; box-sizing: border-box; backdrop-filter: blur(10px);}
#messages { list-style-type: none; margin-bottom: 2rem; padding: 0; }
#messages > li { padding: 1rem 1rem; font-size:30px; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<div id="loginPrompt" style="position:fixed; margin:0;margin-top:-1rem; background-color:blue;width:100%;height:100%;z-index:2;">
<h2 style="color:white;margin-left:0.2rem;">Enter your name: </h2>
<form id="formName" style="margin-left:0.2rem;">
<input id="inputName"><button>Submit</button>
</form>
</div>
<div id="imageDiv" style="position:absolute; margin-bottom:5rem; z-index:2;"></div>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" placeholder="Enter your message..."/><button>Send</button>
</form>
<input type="file" id="img" onchange="setImgSrc(this)" accept="image/*"/>
<input type="submit" id="subBtn" onclick="submitImg()"/>
<script src="/socket.io/socket.io.js"></script>
<p id="nametag"></p>
<script>
var socket = io.connect()
var src
var setImgSrc = (elm) => {
var fr = new FileReader()
fr.onload = () => (src = fr.result)
fr.readAsArrayBuffer(elm.files[0])
}
var submitImg = () => socket.emit('submitImg',src)
socket.on('sentImg', (src) => {
// Create Img...
var img = document.createElement('img')
img.src = (window.URL || window.webkitURL).createObjectURL(
new Blob([src], {
type: 'image/png'
})
)
img.width = 300
img.height = 300
//sleep(5000)
var theDiv = document.createElement('div')
theDiv.append(img)
document.getElementById('messages').append(theDiv)
//var usern = document.getElementById('nametag')
//socket.emit('chat message', "(Photo from " + usern.innerHTML + ")")
})
var username = ""; //prompt("Please enter a username: ", "");
var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
var formName = document.getElementById('formName');
var inputName = document.getElementById('inputName');
formName.addEventListener('submit', function (k) {
k.preventDefault();
if (inputName.value)
{
username = inputName.value;
nametag.innerHTML = username;
$('#loginPrompt').hide();
$('#form').attr('style', '');
//form.width = "100%";
socket.emit('chat message', username + ' has joined!');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', username + ': ' + input.value);
input.value = "";
$('#input').attr('placeholder', 'Enter your message...');
}
if (inputName.value != "Enter your name..."){
name = inputName.value;
}
});
//return false;
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
SERVERSIDE JS:
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3001;
var chatlog = [];
app.use((req, res, next) => {
res.set('Cache-Control', 'no-store')
next()
})
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
for (i = 0; i < chatlog.length; i++){
io.emit('chat message', chatlog[i]);
}
socket.on('chat message', msg => {
chatlog.push(msg);
io.emit('chat message', msg);
});
socket.on('submitImg', (src) => {
console.log('Client sent image')
//Client submit an image
io.emit('sentImg', src) //the server send the image src to all clients
});
});
http.listen(port, () => {
console.log(`Socket.IO server running at http://localhost:${port}/`);
});
When I try to append the image to any element, if the file is small enough it'll work, if not, it'll just re-send the chat log as though a complete reconnect occurred.
I'm assuming the issue is that the data stream upload for the photo is not happening fast enough, and other code is executing prematurely. I employed a wait function and threw a whopping 5s delay in, but I still had the same issue. What's worse is the wait would only actually fire on the filesizes that would've worked anyway.
Any help would be greatly appreciated!!

I found the answer.
I simply need to change the max buffer filesizes as described in socket.io disconnects due to the size of data

How to center an input field in HTML / CSS / Bootstrap

I'm working on the pomodoro project on free code camp:
https://www.freecodecamp.com/challenges/build-a-pomodoro-clock
And I'm trying to center my input boxes but I am not achieving much success. Does anyone have any ideas?
var timeMin = 0;
var timeSec = 3;
var timerIntervalID = null;
function pad (str, max) {
str = str.toString();
return str.length < max ? pad("0" + str, max) : str;
}
function updateTimer() {
var displayString = "";
console.log("Update timer()");
if (timeSec === 0) {
timeSec = 59;
timeMin--;
} else {
timeSec--;
}
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
if (timeMin < 1 && timeSec < 1) {
$(".timer").css('color', 'red');
clearInterval(timerIntervalID);
alert("Pomodoro Over!")
}
}
function test() {
console.log("Test");
}
$(document).ready(function() {
$("button").click(function() {
var whichButton = $(this).attr("value");
console.log("Button pressed");
switch(whichButton) {
case "start":
timerIntervalID = setInterval(updateTimer, 1000);
break;
case "reset":
timeMin = 0;
timeSec = 3;
if (timerIntervalID !== null) {
clearInterval(timerIntervalID);
}
$(".timer").css('color', 'black');
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
break;
}
});
});
.btn-primary {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.btn-danger {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
input {
max-width: 4rem;
text-align:center;
display:block;
margin:0;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<html>
<head>
<meta charset="utf-8">
<title>fccPomodoro</title>
</head>
<div class="container">
<div class="jumbotron text-center">
<h1>fccPomodoro</h1>
<h2 class="timer">Time Left: 25 minutes</h2>
<button type="button" class="btn btn-primary" value="start">Start Pomodoro</button>
<button type="button" class="btn btn-danger" value="reset">Reset</button>
<div class="form-group">
<label for="min">Minutes:</label>
<input type="text" class="form-control" id="min" value="25">
</div>
<div class="form-group">
<label for="sec">Seconds:</label>
<input type="text" class="form-control" id="sec" value="00">
</div>
</div>
</div>
</html>
styles.css
.btn-primary {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.btn-danger {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
input {
max-width: 4rem;
text-align:center;
display:block;
margin:0;
}

You can
margin: 0 auto
on the input boxes:
input {
max-width: 4rem;
text-align:center;
display:block;
margin:0 auto;
}

See CSS below;
var timeMin = 0;
var timeSec = 3;
var timerIntervalID = null;
function pad (str, max) {
str = str.toString();
return str.length < max ? pad("0" + str, max) : str;
}
function updateTimer() {
var displayString = "";
console.log("Update timer()");
if (timeSec === 0) {
timeSec = 59;
timeMin--;
} else {
timeSec--;
}
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
if (timeMin < 1 && timeSec < 1) {
$(".timer").css('color', 'red');
clearInterval(timerIntervalID);
alert("Pomodoro Over!")
}
}
function test() {
console.log("Test");
}
$(document).ready(function() {
$("button").click(function() {
var whichButton = $(this).attr("value");
console.log("Button pressed");
switch(whichButton) {
case "start":
timerIntervalID = setInterval(updateTimer, 1000);
break;
case "reset":
timeMin = 0;
timeSec = 3;
if (timerIntervalID !== null) {
clearInterval(timerIntervalID);
}
$(".timer").css('color', 'black');
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
break;
}
});
});
.btn-primary {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.btn-danger {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.form-group {
text-align:center;
}
.form-group input {
max-width: 4rem;
display:block;
margin:0 auto 0 auto;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<html>
<head>
<meta charset="utf-8">
<title>fccPomodoro</title>
</head>
<div class="container">
<div class="jumbotron text-center">
<h1>fccPomodoro</h1>
<h2 class="timer">Time Left: 25 minutes</h2>
<button type="button" class="btn btn-primary" value="start">Start Pomodoro</button>
<button type="button" class="btn btn-danger" value="reset">Reset</button>
<div class="form-group">
<label for="min">Minutes:</label>
<input type="text" class="form-control" id="min" value="25">
</div>
<div class="form-group">
<label for="sec">Seconds:</label>
<input type="text" class="form-control" id="sec" value="00">
</div>
</div>
</div>
</html>

Have you tried to code the input tag inside a center tag?
<center><input type="text" ></center>

How to pass parametrs to DIV section

I want to design the dialog in html5. This dialog should accept the freetext and image as parameters. I tried to open dialog as below.. Now I want to pass the parameters so that I can use that dialog everywhere..
<!DOCTYPE html>
<html>
<head>
<style>
#overlay
{
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 200;
background-image: url(maskBG.png);
}
#overlay div
{
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #400;
padding: 15px;
text-align: center;
}
.close
{
text-decoration: underline;
}
</style>
<script>
function overlay() {
var el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function overlayTest(arg) {
//alert(arg);
var el = document.getElementById("overlay").click(moveImages('Testing123'));
//alert(arg);
// el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function close() {
document.getElementById("overlay").style.visibility = 'hidden';
}
function moveImages(arg) {
alert('in Move Images');
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center">
<button type="button" onclick="overlay()" id="btnEffluentTreatment">EFFLUENT TREATMENT</button>
<button type="button" onclick="overlayTest('My MyTesting')" id="btnTry">Try1</button>
</p>
<div id="overlay" >
<div>
<p>
<img src="010.png" />
Content/Images whatever we want the user to see goes here.
</p>
<button type="button" onclick="overlay()" id="btnEffluentTreatment">Close</button>
</div>
</div>
</body>
</html>

Div on top of ViewRight-player

http://clubace.dk/viewright_test.htm
The green div at the bottom of the page is overlapped by the player as soon as the player loads.
I've tried setting wmode to 'transparent' in both the object tag and the param tag, but that doesn't help.
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
function changeChannel(url, chanid)
{
var player = document.getElementById('ViewRightControl');
var video = document.getElementById('video');
if (video != null)
{
video.src = url;
video.load();
video.play();
}
else if (player != null)
{
player.Close();
player.Open(url, false);
}
if(chanid != 0)
{
update(chanid);
}
else
{
tvclear();
}
}
function update(channelid) {
$.getJSON('api.php', function(data) {
console.log(data[channelid][0]);
$('.now').html("<strong>" + data[channelid][0]['title'] + "</strong><br>" + data[channelid][0]['starttime'] + "<br>");
$('.next').html("<strong>" + data[channelid][1]['title'] + "</strong><br>" + data[channelid][1]['starttime'] + "<br>");
});
}
function tvclear() {
$('.now').html("No data");
$('.next').html("No data");
}
</script>
<style type="text/css">
body {
background: black;
cursor: auto;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
}
:::-webkit-scrollbar {
display: none;
}
#ViewRightControl {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
#selectorHolder {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 200px;
background: green;
z-index: 100;
}
</style>
</head>
<body onload="changeChannel('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8', 0);">
<object id="ViewRightControl" type="application/x-viewright-m3u8" wmode="transparent">
<param name="wmode" value="transparent">
</object>
<div id="selectorHolder">
</div>
</body></html>
I'm using this ViewRight plugin from Verimatrix (for Windows):
http://warehouse.yousee.tv.s3.amazonaws.com/misc/plugin/YouSee.msi

I found a solution!!
It's a NPAPI plugin and here's a way to put something on top of that: HTML on top of NPAPI plugin