Chat Test

<!DOCTYPE html>
<html>
	<head>

		<style>
			#chatwindow {
				background-color: #cccccc;
				width: 260px;
				height: 330px;
				position: absolute;
				left: 50%;
				margin-left: -130px;
				top: 50%;
				margin-top: -165px;
			}

			#chatarea {
				width: 230px;
				height: 255px;
				background-color: #dddddd;
				position: absolute;
				left: 5px;
				top: 35px;
				font-family: Lucida sans unicode, arial;
				font-size: 12px;
				overflow: auto;
				padding-left: 10px;
				padding-right: 10px;
			}

			#chatinput {
				width: 240px;
				height: 30px;
				background-color: #cccccc;
				padding-left: 5px;
				padding-right: 5px;
				position: absolute;
				bottom: 5px;
				left: 5px;
			}

			#textinput {
				border: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 240px;
				height: 28px;
				background-color: #dddddd;
				padding-left: 5px;
				padding-right: 5px;
				font-family: Lucida sans unicode, arial;
				font-size: 12px;
			}

			#textinput:focus {
				outline: none;
			}

			#submitchat {
				width: 30px;
				height: 30px;
				background-color: #dddddd;
				position: absolute;
				right: 0;
				top: 0;
				border-top: none;
				border-bottom: none;
				border-right: none;
				border-left: none;
				color: #505050;
				font-family: Lucida sans unicode, arial;
				font-weight: bold;
				font-size: 25px;
				text-align: center;
			}

			#submitchat:focus {
				outline: none;
			}

			#recipientpic {
				position: absolute;
				left: 5px;
				top: 5px;
				width: 25px;
				height: 25px;
				background-color: #dddddd;
			}

			#recipientname {
				font-family: Lucida sans unicode, arial;
				font-size: 15px;
				position: absolute;
				top: -6px;
				right: 5px;
				color: #505050;
			}

			.localchat {
				background-color: #ffffff;
				padding: 5px;
				border-top-right-radius: 5px;
				border-bottom-left-radius: 5px;
				color: #505050;
				word-wrap: break-word;
				float: bottom;
			}
		</style>

		<script>
			document.onkeypress = enter;
			function enter(e) {
				if (e.which == 13){
					var msg = document.getElementById("textinput").value;
					var p = document.createElement("p");
					p.innerHTML = msg;
					p.className = "localchat"
					document.getElementById("chatarea").appendChild(p);
					document.getElementById("textinput").value = "";
					return false;
				}
			}
		</script>

		<?php
			//php Here
		?>
	</head>

	<body>
		<p>Chat Window 1.0</p>

		<div id="chatwindow">
			<div id="recipient">
				<img src="http://occarch.com/wp-content/uploads/2012/12/iconmonstr-user-icon-380x380.png" id="recipientpic">
				<p id="recipientname">Recipient</p>
			</div>

			<div id="chatarea" name="chatarea">
			</div>


			<div id="chatinput">
				<form id="inputtext">
					<input type="text" id="textinput" placeholder="Enter your chat here.">
				</form>
			</div>
		</div>
	</body>
</html>