<!DOCTYPE html>
<html doctype>
<head>
	<meta charset="utf-8" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <title></title>
	<style>
		*{ margin: 0; }
		
		p{ margin-bottom: 1.4em; }
		body{ 
			background-color: #EEEEEE; 
			font-family:arial; 
			font-size:100%;			
		}
		
		header{
			background-color:#173154;
			height: 50px;
			color: white;
			padding-top:30px;
			text-align:center;
		}
		
		main{
			margin:auto;
			width: 500px;
			padding-top: 30px;
		}
		
		h1{ font-weight:normal; }
		
		h2{ text-align:center; 
			font-size: 300%;
			color: #173154;
		}
		
		.ani{ opacity:0; }
		
		.date{ text-align:center; }
		
		.center {
			text-align:center;
		}
		
		
		
	</style>
</head>
<body style="background-color: #EEEEEE; font-family:sans-serif; font-size:14px; margin:0px;">
    <header>
		<h1>Welcome to Your Site</h1>
	</header>	
    <main>
		<h2>HELLO THERE!</h2>
		<p class="date"></p>
		<p class="center">Welcome to VCDA&apos;s Scoring App -In Development-</p>
				
		
		
		
		
		
		
	</main>
	<script>
		var timestamp = <?php echo strtotime("now") * 1000; ?>;
		var day = "<?php echo date('l'); ?>";
		var month = "<?php echo date('F'); ?>";
		
		timestamp -= 1000;
		
		var makeDate = function(){
			timestamp += 1000;
			var d = new Date(timestamp);
			var hour = d.getHours();
			var minutes = d.getMinutes();
			var seconds = d.getSeconds();
			var dateNum = d.getDate();
			var ampm = "AM";
			if (hour > 12){
				ampm = "PM";
				hour -= 12;
			}
			
			if (seconds <= 9){
				seconds = "0"+seconds;
			}
			
			if (minutes <= 9){
				minutes = "0" + minutes;
			}
			
			if (hour <= 9){
				hour = "0" + hour;
			}
			
			$('.date').html(`Server Time: ${day}, ${month} ${dateNum} - ${hour}:${minutes}:${seconds} ${ampm}`);
		}
		
		makeDate();
		
		setInterval(function(){
			makeDate();
		}, 1000);
		
		
	
	
		var letters = $('h2').html().split("");
		console.log(letters);
		$('h2').html('');		
		
		
		for (i=0; i<letters.length; i++){
			$('h2').append('<span class="ani">'+letters[i]+'</span>');			
		}
			
		
		var i = 0;
		var makeMessage = setInterval(function(){
			$('h2').children().eq(i).fadeTo(500, 1);
			i++;
			if (i>= letters.length){			
				clearInterval(makeMessage);
			}
		}, 100);	
	</script>
</body>
</html>
