<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="shortcut icon" href="bees.ico" type="image/x-icon">

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
			integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
			crossorigin="anonymous"
		/>
		<link rel="stylesheet" href="style.css" />
		<title>Chat</title>
	</head>
	<body>
		<div class="join-container">
			<header class="join-header">
				<h1>Chat</h1>
			</header>
			<main class="join-main">
				<form action="/chatlogged">
					<div class="form-control">
						<label for="username">Username</label>
						<input
							type="text"
							name="username"
							id="username"
							placeholder="Enter username..."
							required
						/>
					</div>
					<div class="form-control">
						<label for="room">Room</label>
						<select name="room" id="room">
							<option value="chatroom1">Chatroom1</option>
							<option value="chatroom2">Chatroom2</option>
							<option value="chatroom3">Chatroom3</option>
							<option value="Chatroom4">Chatroom4</option>
							<option value="Chatroom5">Chatroom5</option>
							<option value="Chatroom6">Chatroom6</option>
						</select>
					</div>
					<button type="submit" class="btn">Join Chat</button>
				</form>
			</main>
		</div>
	</body>
</html>
