<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<style>
			body {
				margin: 0 auto;
				max-width: 800px;
				padding: 0 20px;
			}

			.container {
				border: 2px solid #dedede;
				background-color: #f1f1f1;
				border-radius: 5px;
				padding: 10px;
				margin: 10px 0;
			}

			.darker {
				border-color: #ccc;
				background-color: #ddd;
			}

			.container::after {
				content: "";
				clear: both;
				display: table;
			}

			.container img {
				float: left;
				max-width: 60px;
				width: 100%;
				margin-right: 20px;
				border-radius: 50%;
			}

			.container img.right {
				float: right;
				margin-left: 20px;
				margin-right: 0;
			}

			.time-right {
				float: right;
				color: #aaa;
			}

			.time-left {
				float: left;
				color: #999;
			}
		</style>
	</head>
	<body>
		<div align="center">
			<h2>Django Chat</h2>
		</div>

		<div class="container">
			<style>
				input[type="text"],
				select {
					width: 100%;
					padding: 12px 20px;
					margin: 8px 0;
					display: inline-block;
					border: 1px solid #ccc;
					border-radius: 4px;
					box-sizing: border-box;
				}

				input[type="submit"] {
					width: 100%;
					background-color: #4caf50;
					color: white;
					padding: 14px 20px;
					margin: 8px 0;
					border: none;
					border-radius: 4px;
					cursor: pointer;
				}

				input[type="submit"]:hover {
					background-color: #45a049;
				}

				div {
					border-radius: 5px;
					background-color: #f2f2f2;
					padding: 20px;
				}
			</style>

			<form id="post-form" method="POST" action="checkview">
				{% csrf_token %}
				<label>Room Name</label>
				<input type="text" name="room_name" id="room_name" width="100px" />
				<label>Username</label>
				<input type="text" name="username" id="username" width="100px" />
				<input type="submit" value="Enter Room" />
			</form>
		</div>
	</body>
</html>
