2021-01-25 14:45:14 +01:00
|
|
|
<!doctype html>
|
|
|
|
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
2021-01-25 21:36:57 +01:00
|
|
|
<title>Watch With Friends!</title>
|
2021-01-25 14:45:14 +01:00
|
|
|
<link rel="icon" href="/img/favicon.png">
|
|
|
|
|
<link rel="stylesheet" href="/css/styles.min.css">
|
2021-01-25 21:36:57 +01:00
|
|
|
<meta name="description" content="Watch with Friends!">
|
|
|
|
|
<meta name="author" content="Kacper Maj">
|
2021-01-25 14:45:14 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="centered-form">
|
|
|
|
|
<div class="centered-form__box">
|
|
|
|
|
<h1>Join</h1>
|
2021-01-25 19:27:44 +01:00
|
|
|
<form action="/chat">
|
2021-01-25 14:45:14 +01:00
|
|
|
<label>Display name</label>
|
2021-01-27 22:14:16 +01:00
|
|
|
<input type="text" name="username" placeholder="Display name" required autocomplete="off">
|
2021-01-25 14:45:14 +01:00
|
|
|
<label>Room</label>
|
2021-01-27 22:14:16 +01:00
|
|
|
<input type="text" id="roomID" name="room" placeholder="Room" required autocomplete="off">
|
2021-01-25 19:27:44 +01:00
|
|
|
<button type="submit">Join or create</button>
|
2021-01-25 14:45:14 +01:00
|
|
|
</form>
|
|
|
|
|
<p class="myPar">or</p>
|
2021-01-25 19:27:44 +01:00
|
|
|
<button type="submit" id="generateIdButton">Generate unique id</button>
|
2021-01-25 14:45:14 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2021-01-25 19:27:44 +01:00
|
|
|
<script>
|
|
|
|
|
const generateIdButton = document.querySelector('#generateIdButton');
|
|
|
|
|
const room = document.querySelector('#roomID');
|
|
|
|
|
generateIdButton.addEventListener('click', e => {
|
|
|
|
|
const id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
|
|
|
|
room.value = id;
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2021-01-25 14:45:14 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
