diff --git a/Index.html b/Index.html
new file mode 100644
index 0000000..b11581a
--- /dev/null
+++ b/Index.html
@@ -0,0 +1,580 @@
+<!Doctype html>
+<html>
+<head>
+<title>ADS Carrom! The World's Premier Site for Playing Carrom Online!</title>
+</head>
+<body>
+<style>
+body {
+  background: darkgray;
+}
+
+.page-break {
+  width: 100%;
+  height: 25px;
+  background: #000000;
+}
+
+login-padding {
+  padding-top: 40px;
+}
+
+p {
+  font-family: "Helvetica;"
+}
+
+button {
+	background-color: #4CAF50;
+	color: white;
+	padding: 14px 20px;
+	margin: 8px 0;
+	border: none;
+	cursor: pointer;
+	width: 100%;
+}
+
+.login {
+  background-color: #4CAF50;
+  color: white;
+  padding: 14px 20px;
+  height: 72px;
+  width: 120px;
+  margin: 8px 0;
+  border: none;
+  cursor: pointer;
+  vertical-align: baseline;
+  font-size: 15pt;
+}
+
+.signup {
+  background-color: #ff9933;
+  color: white;
+  height: 72px;
+  width: 120px;
+  vertical-align: baseline;
+  font-size: 15pt;
+}
+
+.guest {
+  color: #0086b3;
+  text-decoration: underline;
+}
+/* header at top of lobby- control center */
+.concen {
+	text-align: center;
+	display: inline-block;
+	padding: 10px 5px;
+	height: 25px;
+	font-size: 20px;
+	outline-width: 5px black;
+	outline-style: solid;
+}
+
+.lobbybox {
+	background-color:gray;
+	display:block;
+	width:750px;
+	border-radius:50px;
+	border: 2px solid black;
+	align:center;
+	margin:auto;
+}
+
+.gamebox {
+	overflow-y:auto;
+	align: center
+
+}
+
+
+.topright {
+ float: right;
+ cursor: pointer;
+ font-size: 20px;
+}
+.topright:hover {color: red;}
+			/* Full-width input fields */
+input[type=text], input[type=password] {
+	width: 100%;
+	padding: 12px 20px;
+	margin: 8px 0;
+	display: inline-block;
+	border: 1px solid #ccc;
+	box-sizing: border-box;
+}
+	
+/* Extra styles for the cancel button */
+.cancelbtn {
+	width: auto;
+	padding: 10px 18px;
+	background-color: #f44336;
+}
+.container {
+	padding: 16px;
+}
+span.psw {
+	float: right;
+	padding-top: 16px;
+}
+
+.errmssg {
+	color: rgb(255,0,0);
+	display: none;
+
+
+}
+
+.miniscreen {
+	display: none; /* Hidden by default */
+	position: fixed; /* Stay in place */
+	z-index: 1; /* Sit on top */
+	left: 0;
+	top: 0;
+	width: 100%; /* Full width */
+	height: 100%; /* Full height */
+	overflow: auto; /* Enable scroll if needed 
+	background-color: rgb(0,0,0); /* Fallback color */
+	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+
+}
+
+.miniscreen-content {
+	background-color: gray;
+	margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+	border: 1px solid;
+	border-radius: 20px;
+	width: 400px; /* Could be more or less, depending on screen size */
+	height: 500px;
+	padding: 20px;
+
+
+}
+
+
+.mainbox {
+	background-color: rgb(200,200,200);
+	display: block;
+	width: 350px;
+	height: 400px;
+	border: 1px solid;
+	border-radius: 18px;
+	
+
+}
+
+
+/* The Modal (background) */
+.modal {
+	display: none; /* Hidden by default */
+	position: fixed; /* Stay in place */
+	z-index: 1; /* Sit on top */
+	left: 0;
+	top: 0;
+	width: 100%; /* Full width */
+	height: 100%; /* Full height */
+	overflow: auto; /* Enable scroll if needed 
+	background-color: rgb(0,0,0); /* Fallback color */
+	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+	padding-top: 60px;
+}
+/* Modal Content/Box */
+.modal-content {
+	background-color: #fefefe;
+	margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+	border: 1px solid #888;
+	width: 500px; /* Could be more or less, depending on screen size */
+}
+/* The Close Button (x) */
+.close {
+	position: absolute;
+	right: 25px;
+	top: 0;
+	color: #000;
+	font-size: 35px;
+	font-weight: bold;
+}
+.close:hover,
+.close:focus {
+	color: red;
+	cursor: pointer;
+}
+/* Add Zoom Animation */
+.animate {
+	-webkit-animation: animatezoom 0.6s;
+	animation: animatezoom 0.6s
+}
+@-webkit-keyframes animatezoom {
+	from {-webkit-transform: scale(0)} 
+	to {-webkit-transform: scale(1)}
+}
+	
+@keyframes animatezoom {
+	from {transform: scale(0)} 
+	to {transform: scale(1)}
+}
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+	span.psw {
+	display: block;
+	float: none;
+	}
+	.cancelbtn {
+	width: 100%;
+	}
+}
+</style>
+
+
+<p></p>
+<br>
+<div id="page-break" class="page-break"></div>
+<table border ="0" width = "100%" height = "100%" style = "font-size: 18pt">
+
+<th colspan = "4">
+<center><p style="font-size:42pt">Carrom - Fun, Addicting, Engrossing</p></center>
+</th>
+
+<tr>
+<td width = "15%">
+<td valign = "top" rowspan = "2" width = "15%">
+
+<b><p style = "font-size: 25pt">Recent updates:</p></b>
+
+<a>3/4/2017:</a>
+<br>
+<br>
+<a>-New Homepage look</a>
+<br>
+<a>-Game will be finished by 3/14/2017</a>
+
+</td>
+<td width = "40%">
+<center><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/-Insert_image_here-.svg/300px--Insert_image_here-.svg.png" style="width:400px; height:300px"></img></center>
+</td>
+<td width = "30%" valign = "top" rowspan = "2">
+<a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><img src = "ad_banner.png" style = "width: 215px; height: 450px">
+</td>
+</tr>
+
+<tr valign = "top" height = "320px">
+<td>
+</td>
+<td>
+
+<!--<div id="login" class="login-padding"><button id="signup" class="signup">Sign-up</button>-->
+
+<center><button class = "signup" onclick="document.getElementById('sudiv').style.display='block';" style="width:auto;">Sign Up</button></center>
+<div id="sudiv" name ="sudiv" class="modal">
+<form id="suform" name = "suform" class="modal-content animate" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
+
+	<div class="container">
+	
+	<label><b>Email</b></label>
+	<input type="text" placeholder="Enter E-mail" name="email">
+	<div class = "errmssg" id = "suemailinvalid">•Invalid e-mail adress</div>
+	<div class = "errmssg" id = "suemailtaken">•E-mail already in use</div>
+	
+	<label><b>Username</b></label>
+	<input type="text" placeholder="Enter Username" name="uname">
+	
+	<div class = "errmssg" id = "suunamelen">•Invalid length- must be length [5,20]</div>
+	<div class = "errmssg" id = "suunamechar">•Invalid char- must only be numbers and letters (not to be confused with numbersandnumbers, daniel zhu's aops profile</div>
+	<div class = "errmssg" id = "suunametaken">•Username already taken</div>
+	
+	<label><b>Password</b></label>
+	<input type="password" placeholder="Enter Password" name="psw">
+	
+	<div class = "errmssg" id = "supswlen">•Invalid length- must be length [6,30]</div>
+	<div class = "errmssg" id = "supswchar">•Invalid char- must only be numbers and letters and special chars</div>
+	
+	<label><b>Reenter Password</b></label>
+	<input type="password" placeholder="Renter Password" name="repsw">
+	<div class = "errmssg" id = "surepswmatch">•Passwords must match</div>
+		
+	<button type="submit" onclick='return checkSignUp();'>Sign Up</button>
+	<input type="checkbox" checked="checked"> Remember me
+	</div>
+
+	<div class="container" style="background-color:#f1f1f1">
+	<button type="button" onclick="document.getElementById('sudiv').style.display='none'; clearErrs();" class="cancelbtn">Cancel</button>
+	</div>
+</form>
+</div>
+<center><button class="login" onclick="document.getElementById('lidiv').style.display='block';" style="width:auto;">Login</button></center>
+<div id="lidiv" name = "lidiv" class="modal">
+<form id="liform" name = "liform" class="modal-content animate" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
+
+	<div class="container">
+	<label><b>Username</b></label>
+	<input type="text" placeholder="Enter Username" name="liuname" id="loginuser">
+
+	<label><b>Password</b></label>
+	<input type="password" placeholder="Enter Password" name="lipsw" id="loginpswd">
+	
+	<div class = "errmssg" id = "lipswinc">•Incorrect password</div>
+	
+	<button type="submit" onclick = 'return checkLogIn();'>Login</button>
+	<input type="checkbox" checked="checked"> Remember me
+	</div>
+
+	<div class="container" style="background-color:#f1f1f1">
+	<button type="button" onclick="document.getElementById('lidiv').style.display='none'; clearErrs();" class="cancelbtn">Cancel</button>
+	<span class="psw">Forgot <a href="#">password?</a></span>
+	</div>
+</form>
+</div>
+
+<!--<button id="login">Log in!</button></div>-->
+<br>
+<br>
+<center><a href="http://google.com">Continue as guest >>> </a></center>
+</td>
+
+</tr>
+
+<tr>
+<td colspan = "4">
+<center>&copy; 2050 ADS Carrom | Site Map | Help</center>
+</td>
+</tr>
+
+
+</table>
+
+<script>
+function clearErrs() {
+	var errs = document.getElementsByClassName("errmssg");
+	for (err in errs) {
+		errs[err].style.display = 'none';
+		
+	}	
+}
+
+function checkEmail(email) {
+ 	var emailre = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+ 	var errors = [];
+ 	if (! emailre.test(email)) {
+ 		errors.push('emailinvalid');
+	}
+ 
+	return errors;
+}
+
+function checkPsw(psw) {
+	var pswre = /^[a-zA-Z0-9!@#$%^&*()+=_-]+$/;
+	var errors = [];
+	if (psw.length > 30 || psw.length < 6) {
+ 	errors.push('pswlen');
+ 	}
+	if ((! pswre.test(psw)) && (psw.length > 0)) {
+		errors.push('pswchar');
+	}
+ 
+	return errors;
+
+
+}
+
+function checkUname(uname) {
+	var unamere = /^[a-zA-Z0-9]+$/;
+	var errors = [];
+	if (uname.length > 20 || uname.length < 5) {
+ 	errors.push('unamelen');
+ }
+ 
+ 
+ 	if ((! unamere.test(uname)) && (uname.length > 0)) {
+ 		errors.push('unamechar');
+	}
+ 
+ 	return errors;
+}
+
+
+function checkSignUp() {
+	var errors = [];
+	var allErrors = ['unamelen', 'unamechar', 'pswlen', 'pswchar', 'repswmatch', 'emailinvalid', 'emailtaken', 'unametaken'];
+	var email = document.suform.email.value;
+	var uname = document.suform.uname.value;
+	var psw = document.suform.psw.value;
+	var repsw = document.suform.repsw.value;
+ 
+	errors = errors.concat(checkUname(uname));
+	errors = errors.concat(checkPsw(psw));
+	errors = errors.concat(checkEmail(email));
+ 
+ 
+ 
+ 	/* repsw test */
+	if (psw != repsw) {
+ 		errors.push('repswmatch');
+ 	}
+ 
+ /* show and hide */
+	for (var count in allErrors) {
+ 		document.getElementById('su' + allErrors[count]).style.display = 'none';
+	}
+	
+	for (count in errors) {
+ 	document.getElementById('su' + errors[count]).style.display = 'block';
+	}
+ 
+ /* cancel if errors */
+	if (errors.length > 0) {
+ 		return false;
+	}
+	
+	return true;
+}
+
+function checkLogIn() {
+	var errors = [];
+	var allErrors = ['pswinc'];
+	var uname = document.liform.uname.value;
+	var psw = document.liform.psw.value;
+ 
+ /* show and hide */
+	for (var count in allErrors) {
+ 		document.getElementById('li' + allErrors[count]).style.display = 'none';
+ 	}
+	for (count in errors) {
+ 		document.getElementById('li' + errors[count]).style.display = 'block';
+	}
+ 
+ 	/*if combo is right return true*/
+	if (errors.length > 0) {
+		return false;
+ 	}
+ 
+	return true;
+ 	/*if combo is right return true*/
+}	
+
+function checkChangeEmail() {
+ 
+	var errors = [];
+	var allErrors = ['pswinc', 'emailinvalid'];
+	var email = document.ceform.email.value;
+	var psw = document.ceform.psw.value;
+ 
+	errors = errors.concat(checkEmail(email));
+ 
+	 /* show and hide */
+	for (var count in allErrors) {
+ 		document.getElementById('ce' + allErrors[count]).style.display = 'none';
+	}
+ 	for (count in errors) {
+ 	
+ 		document.getElementById('ce' + errors[count]).style.display = 'block';
+ 	}
+ 
+	/*if combo is right return true*/
+	if (errors.length > 0) {
+ 		return false;
+	}
+ 
+	return true;
+}
+
+function checkChangePsw() {
+ 
+	var errors = [];
+	var allErrors = ['opswinc', 'pswchar', 'pswlen', 'repswmatch'];
+	var opsw = document.cpform.opsw.value;
+	var psw = document.cpform.psw.value;
+	var repsw = document.cpform.repsw.value;
+ 
+	errors = errors.concat(checkPsw(psw));
+ 
+	/* repsw test */
+	if (psw != repsw) {
+ 		errors.push('repswmatch');
+	}
+ 
+ /* show and hide */
+	for (var count in allErrors) {
+ 		document.getElementById('cp' + allErrors[count]).style.display = 'none';
+	}
+ 
+	for (count in errors) {
+ 		document.getElementById('cp' + errors[count]).style.display = 'block';
+ 	}
+ 
+ /*if combo is right return true*/
+	if (errors.length > 0) {
+ 		return false;
+	}
+ 
+ 
+return true;
+
+}
+
+
+//--------------------------------------------------------------
+
+var SZ, elem, two, circle, rect, group, game;
+
+
+
+class Game {
+	constructor () {
+		SZ = 500;
+		elem = document.getElementById('gamediv');
+		
+		elem.innerHTML = "";
+		two = new Two({ width: this.SZ, height: this.SZ });
+		two.appendTo(elem);
+		circle = two.makeCircle(-70, 0, 50);
+		rect = two.makeRectangle(70, 0, 100, 100);
+		circle.fill = '#FF8000';
+		rect.fill = 'rgba(0, 200, 255, 0.75)';
+		group = two.makeGroup(circle, rect);
+		group.translation.set(SZ / 2, SZ / 2);
+		group.scale = 0;
+		group.noStroke();
+		
+	}
+	
+	run () {
+		two.bind('update', function(frameCount) {
+			console.log()
+			
+			
+			// This code is called everytime two.update() is called.
+			// Effectively 60 times per second.
+			if (group.scale > 0.9999) {
+				group.scale = group.rotation = 0;
+			}
+			var t = (1 - group.scale) * 0.125;
+			group.scale += t;
+			group.rotation += t * 4 * Math.PI;
+		}).play();
+		
+	}
+	
+	tick () {
+		
+		
+	}
+	
+	
+}
+
+
+
+function run() {
+	var game = new Game();
+	game.run();
+	
+	
+	
+}
+
+</script>
+
+
+</body>
+
+</html>
\ No newline at end of file

+ Carrom - Fun, Addicting, Engrossing +
+	+ +Recent updates: + +3/4/2017: + + +-New Homepage look + +-Game will be finished by 3/14/2017 + +	+ +	+ +
+		+ + + + + + + + + + Email + + •Invalid e-mail adress + •E-mail already in use + + Username + + + •Invalid length- must be length [5,20] + •Invalid char- must only be numbers and letters (not to be confused with numbersandnumbers, daniel zhu's aops profile + •Username already taken + + Password + + + •Invalid length- must be length [6,30] + •Invalid char- must only be numbers and letters and special chars + + Reenter Password + + •Passwords must match + + + Remember me + + + + + + + + + + + + + Username + + + Password + + + •Incorrect password + + + Remember me + + + + + Forgot password? + + + + + + + +Continue as guest >>> +	+ +
+© 2050 ADS Carrom \| Site Map \| Help +