87 lines
1.7 KiB
HTML
87 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<title>Multiparty Meeting</title>
|
|
</head>
|
|
<style>
|
|
body
|
|
{
|
|
margin:auto;
|
|
padding:0.5vmin;
|
|
text-align:center;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 40%;
|
|
width: 90%;
|
|
transform: translate(-50%, 0%);
|
|
background-image: url('/images/background.svg');
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: repeat;
|
|
}
|
|
input:hover { opacity:0.9; }
|
|
input[type=text]
|
|
{
|
|
font-size: 1.5em;
|
|
padding: 1.5vmin;
|
|
background-color: rgba(0,0,0,0.3);
|
|
border: 0;
|
|
color: #fff;
|
|
margin: 0.8vmin;
|
|
width: 50%;
|
|
}
|
|
|
|
button:hover { background-color: #f5f5f5; }
|
|
button
|
|
{
|
|
font-size: 1.5em;
|
|
padding: 1.5vmin;
|
|
margin: 0.8vmin;
|
|
background-color: #fafafa;
|
|
border-radius: 1.8vmin;
|
|
color: #000;
|
|
border: 0;
|
|
}
|
|
img
|
|
{
|
|
height: 15vmin;
|
|
}
|
|
</style>
|
|
<body>
|
|
<a>
|
|
<img src='/images/logo.svg'></img><br />
|
|
</a>
|
|
<input id='room' type='text' onkeypress='checkEnter(event)' value='' placeholder='your room name' />
|
|
<button onclick = 'start(location.href)'>Go to room</button>
|
|
</body>
|
|
<script>
|
|
let room = document.getElementById('room');
|
|
let stateObj = { foo: 'bar' };
|
|
|
|
room.addEventListener('input', (e) =>
|
|
{
|
|
console.log(e.charCode);
|
|
history.replaceState(stateObj, 'Multiparty Meeting', '/'+room.value);
|
|
}, true);
|
|
|
|
room.focus();
|
|
|
|
function start(target)
|
|
{
|
|
location.href;history.replaceState(stateObj, 'Multiparty Meeting', '/');
|
|
window.location = target;
|
|
}
|
|
|
|
function checkEnter(event)
|
|
{
|
|
let x = event.charCode || event.keyCode;
|
|
if (x == 13 )
|
|
{
|
|
start(location.href);
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|