<!DOCTYPE html>
<html lang="fr">

	<head>
			<meta charset="utf-8"/>
			<title>page de connexion</title>
			
	</head>
	<style>
	header
				{
					background:#131d24;
					/*background:-moz-linear-gradient(top, #131d24, #000);*/
					height:60px;
					border-bottom:5px solid blue;
					color:#fff;
					padding:35px;
					font-size:25px;
					text-align:center;
				}
				@font-face
				{
					font-family:know;
					src:url('fonts/Acknowledgement.otf');
				}
				@font-face
				{
					font-family:Gilroy-Light;
					src:url('fonts/Gilroy-Light.otf');
				}
				header img
				{
					position:absolute;
					top:10px;
					width:100px;
					height:100px;
					
				}
				#img1
				{
					left:80px;
				}
				
				#img2
				{
					right:80px;
				}
				
				#utilisateur
				{
					background:-moz-radial-gradient(top,#303032 10%,#000);
					padding:30px 0.2%;
					border-radius:0 0 5px 2px;
					color:#fff;
				}
				
				#utilisateur, #renseignement
				{
					display:inline-block;
					padding-top:5px;
					width:20%;
					text-align:center;
					vertical-align:top;
				}
				#utilisateur img
				{
					width:70%;
					height:180px;
					border-radius:50%;
					border:5px solid #fff;
				}
				
				#renseignement
				{
					position:relative;
					left:30%;
					width:50%;
					height:500px;
					text-align:justify;
				}
				
				#renseignement form
				{
					padding-top:30px;
					padding-bottom:30px;
					background:rgba(78,133,255,0.4);
					margin-top:50px;
					border: 1px solid #4169e1;
				}
				#renseignement form::before
				{
					display:inline-block;
					background:-moz-linear-gradient(top,#4e4aff 25%,#2b26fd);
					position:relative;
					top:-70px;
					left:-1px;
					width:99%;
					content:'Dashboard';
					height:20px;
					padding-top:10px;
					padding-bottom:10px;
					padding-left:1%;
					color:#fff;
					border: 1px solid blue;
					font-family:know;
				}
				
				#renseignement form label,#btn
				{
					display:inline-block;
					margin-left:1%;
					margin-top:3%;
					background:#2b26fd;
					color:#fff;
					padding:5px;
					font-family:Gilroy-Light;
					width:15%;
				}
				
				input
				{
				padding:5px;
				border:3px solid #eee;
				background:#eee;
				}
				
				#boite
				{
					position:relative;
					top:-40px;
					left:150px;
				}
				
				#btn
				{
					border:1px solid #2b26fd;
					position:relative;
					top:5px;
					left:70px;
				}
				
				.data
				{
					border:3px solid rgba(256,0,0,0.5);
					position:relative;
					top:-10px;
					left:90px;
					width:500px;
					text-align:center;
					display:none;
				}
				
				.badthing
				{
				 border:3px solid rgba(256,0,0,0.5);
				}
				.info
				{
					float:right;
					opacity:0.5;
				}
				
				

	</style>
	
	<body>
	<header>
		<img id="img1" src="img/gs.png" alt="" />
		<span>Interface de Notifications (Php Web Server)</span>
		<img id="img2" src="img/iirond.png" alt="" />
	</header>
	<div id="renseignement">
		<form action="index2.php" method="POST" id="form">
			<div id="boite">
				<label for="pseudo">Pseudo </label><input type="text" name="pseudo_admin" id="pseudo"/> <br/>
				
				<label for="pswd">Password</label><input type="password" name="pswd_admin" id="pswd"/><br/>
				
				<input type="button" value="login" id="btn" />
			</div>
			<div class="data"></div>
			<div class="info">Exclusivement réservé à l'administrateur</div>
			
		</form>
		
		
	</div>	
			
	
	<script>
	

	
	document.getElementById("btn").onclick=function(){
		 var pseudo=document.getElementById("pseudo").value, pswd=document.getElementById("pswd").value;
		 
		xhr = new XMLHttpRequest();
		xhr.open("POST", "checklogin.php");
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send("pseudo_admin="+pseudo+"&pswd_admin="+pswd);
	
		
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4 && xhr.status==200)
			 {
				 serveur_result=xhr.responseText;
				 if(serveur_result=="false")
				 {
					document.querySelector('.data').style.display="block";
					document.querySelector('.data').innerHTML="le pseudo ou le mot de passe est incorrecte, veuillez réessayer svp";
					document.querySelector('#pseudo').classList.add("badthing");
					document.querySelector('#pswd').classList.add("badthing");
				 }
				 else
				 {
					 document.querySelector('#form').submit();
					 
				 }
				 
				 
			 }
		};
	}
	
	document.querySelector('#pseudo').onfocus=function(){
		document.querySelector('.data').style.display="none";
		document.querySelector('#pswd').value=null;
	}
	
	document.querySelector('#pswd').onfocus=function(){
		document.querySelector('.data').style.display="none";
	}
	
	  
	</script>
	</body>
</html>
