Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>melon.pw | login</title>
	<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
	<script src="/jquery.js"></script>
	<script src="/jquery-ui.js"></script>
</head>
<body>
<div class="site">
<div class="header">
	<div class="link" style="float: left;">melon.pw</div>
	<?php
		if (isset($_SESSION['username'])) {
	?>
	<p style="float: right;" id="username"></p>
	<?php
		} else {
	?>
	<div class="link" style="float: right;" id="register">Register</div>
	<div class="link" style="float: right;" id="login">Login</div>
	<?php
		}
	?>
</div>

<div class="authentication">
	<div class="webheader">
		<span style="margin: 3px 0 0 10px; display:inline-block;">Authentication</span>
		<div id="exit" class="link exit">x</div>
	</div>
	<form method="post" action="login.php">
		<table>
			<tr>
				<td>Username: </td>
				<td>
					<input type="text" name="username">
				</td>
			</tr>
			<tr>
				<td>Password: </td>
				<td>
					<input type="password" name="password">
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="submit" name="login" value="Login">
				</td>
			</tr>
		</table>
	</form>
	<br>
	<div class="link" id="pass" style="margin-left: 15px; font-size: 15px">Request a new password?</div>
</div>
</div>
</body>
<style>

	@keyframes hover {
		from {color: #eee;}
		to 	 {color: lightblue;}
	}

	@keyframes bottomGlow {
  		0% {border-bottom: solid 1px #5D21C4;}
  		25% {border-bottom: solid 1px #000ED1;}
  		50% {border-bottom: solid 1px #005BD1;}
  		75% {border-bottom: solid 1px #00A0D1;}
  		100% {border-bottom: solid 1px #00D1C7;}
	}

	@keyframes leftGlow {
  		0% {border-left: solid 1px #5D21C4;}
  		25% {border-left: solid 1px #000ED1;}
  		50% {border-left: solid 1px #005BD1;}
  		75% {border-left: solid 1px #00A0D1;}
  		100% {border-left: solid 1px #00D1C7;}
	}

	@keyframes textGlow {
		0% {color: #5D21C4;}
  		25% {color: #000ED1;}
  		50% {color: #005BD1;}
  		75% {color: #00A0D1;}
  		100% {color: #00D1C7;}
	}

	@keyframes backgroundGlow {
		0% {background-color: #5D21C4;}
  		25% {background-color: #000ED1;}
  		50% {background-color: #005BD1;}
  		75% {background-color: #00A0D1;}
  		100% {background-color: #00D1C7;}
	}

	html, body {
		font-family: "Dosis", sans-serif;
		background-color: #222;
		color: #eee;
		margin: 0;
		overflow: hidden;
		height: 100%;
	}

	table {
		margin: 20px;
		width: 100%;
	}

	input[type=text], input[type=password] {
		border: none;
		color: #eee;
		background-color: #222;
		border-radius: 7px;
	}

	input[type=submit] {
		animation-name: backgroundGlow;
		animation-duration: 12s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		background-color: green;
		border: none;
		color: #eee;
		padding: 0 15px 0 15px;
		font-family: "Dosis", sans-serif;
		font-size: 13px;
	}

	.link {
		text-decoration: none;
		color: #eee;
		font-size: 18px;
		padding: 2px 4px 0 4px;
	}

	.link:hover {
		animation-name: hover;
		animation-duration: 1s;
		color: lightblue;
	}

	.exit:hover {
		animation-name: textGlow, leftGlow;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	.exit {
		animation-name: textGlow, leftGlow;
		animation-duration: 12s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		float: right;
		color: lightblue;
		height: 100%;
		border-left: 1px solid lightblue;
		padding: 0 12px 0 12px;
	}

	.header, .webheader {
		animation-name: bottomGlow;
		animation-duration: 12s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		height: 30px;
		width: 100%;
		background-color: #111;
		border-bottom: 1px solid lightblue;
	}

	.authentication {
		position: absolute;
		height: 210px;
		width: 350px;
		background-color: #111;
		border: 1px solid lightblue;
		top: calc(50% - 105px);
		left: calc(50% - 175px);
	}

</style>
<script>

	$(document).ready(function() {
		$(".authentication").hide();
	});

	$("#login").click(function() {
		$(".authentication").show("drop", 1000);
		$(".authentication").html('<div class="webheader"><span style="margin: 3px 0 0 10px; display:inline-block;">Authentication</span><div id="exit" class="link exit">x</div></div><form method="post" action="login.php"><table><tr><td>Username: </td><td><input type="text" name="username"></td></tr><tr><td>Password: </td><td><input type="password" name="password"></td></tr><tr><td></td><td><input type="submit" name="login" value="Login"></td></tr></table></form><br><div class="link" id="pass" style="margin-left: 15px; font-size: 15px">Request a new password?</div></div>');
	});

	$("#register").click(function() {
		$(".authentication").show("drop", 1000);
		$(".authentication").html('<div class="webheader"><span style="margin: 3px 0 0 10px; display:inline-block;">Authentication</span><div id="exit" class="link exit">x</div></div><form method="post" action="register.php"><table><tr><td>Username: </td><td><input type="text" name="username"></td></tr><tr><td>Password: </td><td><input type="password" name="password"></td></tr><tr><td>Confirm Password: </td><td><input type="password" name="confirmPassword"></td></tr><tr><td></td><td><input type="submit" name="register" value="Register"></td></tr></table></form></div>');

		$.ajax({
			type: "post",
			url: "melon.pw/register.php",
			cache: false,
			data: {
				username: username,
				password: password
			},
			success: function(data) {
				if (data != "none") {

				}
			}
		});
	});

	$("body").on("click", 'div.exit', function() {
		$(".authentication").hide("drop", 1000);
	});

	$(".authentication").draggable({
		handle: ".webheader",
		snap: false
	});
</script>
</html>