<?php
session_start();
	if (!isset($_SESSION['nazwa'])) {
		header('Location: login.php');
		exit();
	}
	$nazwa=$_SESSION['nazwa'];
	session_unset();
	session_destroy();
?>
<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Platforma Wirtualny asystent</title>
	<meta name="description" content="Wirtualny asystent" />
    <meta name="keywords" content="asystent, niepełnosprawny intelektualnie, pomoc" />
	<script src="js/jquery.js"></script>
	<script src="js/jquery_e.js"></script>
	<link rel="stylesheet" href="css/style.css" />
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 88%;
  background: #002;
}


#logout_tlo, #logout_litery {
	width: 600px;
	height: 400px;
	margin: 100px auto;
	padding: 10px 10px;
	box-shadow: 5px 3px 8px rgba(0, 0, 80, 0.7);
	border-bottom: 4px outset #007;
	border-radius: 8px 8px 20px 20px;
	background: #000028;
}

#logout_litery {
	width: 470px;
	height: 50px;
	margin: 10px auto;
	border: 2px ridge #004;
}

#litery {
	margin: 5px 5px;
	padding: 0;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size: 3.5em;
	font-weight: bold;
	text-align: center;
	line-height: 30px;
	color: #ee3;
	top: 5px;
	left: -600px;
	position: relative;
	display: inline;
	opacity: 0;
}

#litera_odstep {
	width: 38px;
	border-bottom: 1px ridge #000028;
	float: left;
}

#litery_anim {
	width: 540px;
	height: 200px;
	background: #000048;
	margin: 10px auto;
	border: 6px ridge #004;
	border-bottom: 1px ridge #007;
}

#tekst, #tekst_info {
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size: 1em;
	text-align: center;
	color: #F83;
	margin: 5px 0 0 0;
}

#tekst_info {
	font-size: 1.5em;
	color: #e8E044;
}

#but_menu{
	width: 120px;
	border:1px solid #d22a00;
	-webkit-box-shadow: #A2A3A3 7px 7px 7px  ;-moz-box-shadow: #A2A3A3 7px 7px 7px ; box-shadow: #A2A3A3 7px 7px 7px  ; 
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size:12px;
	font-family:arial, helvetica, sans-serif;
	font-style: normal; 
	padding: 7px 10px 7px 10px; 
	margin: 10px 0 3px 120px;
	text-decoration:none; 
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-weight:bold; 
	color: #FFFFFF;
	background-color: #FF3C0B; background-image: -webkit-gradient(linear, left top, left bottom, from(#FF3C0B), to(#6d0019));
	background-image: -webkit-linear-gradient(top, #FF3C0B, #6d0019);
	background-image: -moz-linear-gradient(top, #FF3C0B, #6d0019);
	background-image: -ms-linear-gradient(top, #FF3C0B, #6d0019);
	background-image: -o-linear-gradient(top, #FF3C0B, #6d0019);
	background-image: linear-gradient(to bottom, #FF3C0B, #6d0019);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF3C0B, endColorstr=#6d0019);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 3px 2px 10px 4px rgba(0,0,0,0.54);
	-moz-box-shadow: 3px 2px 10px 4px rgba(0,0,0,0.54);
	box-shadow: 3px 2px 10px 4px rgba(0,0,0,0.54);
	dispaly: none;
}

#but_menu:hover {
 border:1px solid #21a421;
 padding: 7px 7px 7px 13px; 
 background-color: #2AF738; background-image: -webkit-gradient(linear, left top, left bottom, from(#2AF738), to(#0F2B10));
 background-image: -webkit-linear-gradient(top, #2AF738, #0F2B10);
 background-image: -moz-linear-gradient(top, #2AF738, #0F2B10);
 background-image: -ms-linear-gradient(top, #2AF738, #0F2B10);
 background-image: -o-linear-gradient(top, #2AF738, #0F2B10);
 background-image: linear-gradient(to bottom, #2AF738, #0F2B10);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2AF738, endColorstr=#0F2B10);	
}

</style>
	
<script type="text/javascript">
	var lp=10;
	var lp2=9;
	var start;
	var start2;
	$(document).ready(function(){	
	$('.zaloguj').css("display", "inline");	
	$('.start_a').css("display", "none");	
	animacja();
	animacja2();
	
		function animacja() {
			lp--;
			if (lp==0) {
				clearTimeout(start);
			}
			animacja_tekst('d'+lp);
			start = setTimeout(animacja, 500);
		}
		
		function animacja2() {
			lp2--;
			if (lp2==0) {
				clearTimeout(start2);
			}
			animacja_tekst2('e'+lp2);
			start2 = setTimeout(animacja2, 600);
		}
		
		
		function animacja_tekst(klasa) {
			var m = lp*2;
			$('.'+klasa).animate({
			left: m,
			opacity: '1'}, 
			{
			duration: 1000,
			easing: 'easeOutBounce',
			complete: function() {
				$('.'+klasa).css("color", "#22f");	
			}});
		}
		
		
		function animacja_tekst2(klasa) {
			var m = lp2*1;
			$('.'+klasa).animate({
			left: m,
			opacity: '1'}, 
			{
			duration: 800,
			easing: 'easeInOutCubic',
			complete: function() {
				$('.'+klasa).css("color", "red");
				if (lp2==0) $('.start_a').css("display", "inline");	
			}});
		}
			
		$(".start_a").on("click", function() {
			lp=10;
			lp2=9;
			$('.start_a').css("display", "none");	
			for (var i=0; i<10; i++) {
				$('.d'+i).css("color", "red");	
				$('.d'+i).css("left", "600");
				$('.d'+i).css("opacity", "0");
			}
			for (var i=0; i<9; i++) {
				$('.e'+i).css("color", "#88f");	
				$('.e'+i).css("left", "600");
				$('.e'+i).css("opacity", "0");
			}
			animacja();
			animacja2();
		});	
		
		$(".zaloguj").on("click", function() {
			window.location.href = 'login.php';
		});
 });
</script>	
 </head>
 <body>
	<div id="logout_tlo">
		<div id="litery_anim">
			<div id="logout_litery">

<?php
				$napis1[0]='W'; $napis1[1]='I'; $napis1[2]='R'; $napis1[3]='T';
				$napis1[4]='U'; $napis1[5]='A'; $napis1[6]='L'; $napis1[7]='N';  $napis1[8]='Y';
				$napis2[0]='A'; $napis2[1]='S'; $napis2[2]='Y'; $napis2[3]='S';
				$napis2[4]='T'; $napis2[5]='E'; $napis2[6]='N'; $napis2[7]='T';
				
				for ($i=0; $i<count($napis1); $i++) {
					echo '<div id="litery" class="d'.($i+1).'">'.$napis1[$i].'</div>';	
				}
				echo '</div>';
				echo '<div id="logout_litery">';
					echo '<div id="litera_odstep"></div>';
				for ($i=0; $i<count($napis2); $i++) {
					echo '<div id="litery" class="e'.($i+1).'">'.$napis2[$i].'</div>';	
				}
?>
			</div>
		</div>
		<p id="tekst_info">Zostałeś poprawnie wylogowany</p>
		<p id="tekst">
<?php
	echo $nazwa.': ';
?>
		Dziękuje za spędzenie czasu na Platformie "Wirtualny Asystent"</p>
		<p id="tekst">Zapraszamy ponownie</p><br /><br />
		<input type="button" id="but_menu" value="Zaloguj ponownie" class="zaloguj">
		<input type="button" id="but_menu" value="Start animacji" class="start_a">
	</div>
 
<body>
</html>