<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Breizh'OnAir</title>
<link rel="icon" href="/Images/Logo.png" >
<link href="/css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/flexslider.css" rel="stylesheet" >
<link href="/css/styles.css" rel="stylesheet">
<link href="/css/queries.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header id="home">
<section class="hero" id="hero">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div id="Logo" >
<img src="/Images/Logo.png" width="35%" />
</div>
<h1 class="animated fadeInDown">Breizh'<span>OnAir</span></h1>
<p class="animated fadeInUp delay-05s">Notre détecteur de CO2 "Air Lib"</p>
</div>
</div>
</div>
</section>
</header>
<section class="dark-bg text-center section-padding contact-wrap" id="contact">
<a href="#Donnees" class="up-btn"><i class="fa fa-chevron-up"></i></a>
<div class="container" id="Donnees">
<div class="row" >
<div class="col-md-12" >
<h1 class="arrow" >Mes Données</h1>
</div>
</div>
<div class="row contact-details">
<div class="Donnees">
<div class="light-box box-hover">
<div class="Formulaire">
<h1 class="arrow1">CO2</h1>
<div class="Formulaire1" id="co2" class="box-hover"type="text"></div>
<h1 class="arrow2">Température</h1>
<div class="Formulaire2" id="temperature" class="box-hover"type="text"></div>
<h1 class="arrow1">CO</h1>
<div class="Formulaire3" id="co" class="box-hover"type="text"></div>
<h1 class="arrow2">Humidité</h1>
<div class="Formulaire4" id="humidite" class="box-hover"type="text"></div>
<h1 class="arrow1">Ozone</h1>
<div class="Formulaire5" id="ozone" class="box-hover"type="text"></div>
<h1 class="arrow1">Nh3</h1>
<div class="Formulaire6" id="nh3" class="box-hover"type="text"></div>
<h1 class="arrow2">Formaldehyde</h1>
<div class="Formulaire7" id="formaldehyde" class="box-hover"type="text"></div>
<h1 class="arrow2">Méthane ch4</h1>
<div class="Formulaire8" id="methane ch4" class="box-hover"type="text"></div>
<h1 class="arrow2">Particules fines</h1>
<div class="Formulaire9" id="particules fines" class="box-hover"type="text"></div>
<h1 class="arrow2">Dihydrogène</h1>
<div class="Formulaire10" id="dihydrogene" class="box-hover"type="text"></div>
<h1 class="arrow2">Décibelmètre</h1>
<div class="Formulaire11" id="decibelmetre" class="box-hover"type="text"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/waypoints.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/scripts.js"></script>
<script src="/js/jquery.flexslider.js"></script>
<script src="/js/modernizr.js"></script>
<script>
function lancerRequete(){
var maRequete = null; //initialiser l'objet
//déclare l'objet requete
if(window.XMLHttpRequest){
maRequete = new XMLHttpRequest();
}
//url du serveur
var url = "http://sciencesappliquees.com/templates/php/airlib.php";
//Choisir le type de requete
maRequete.open("GET", url, true);
//gestion de la reponse du serveur
maRequete.onreadystatechange = function(){
if(maRequete.readyState == 4){
//affiche la réponse du serveur
//alert(maRequete.responseText);
var data = JSON.parse(maRequete.responseText);
//alert(data.co2);
document.getElementById('co2').innerHTML = data.co2;
document.getElementById('temperature').innerHTML = data.temp;
document.getElementById('co').innerHTML = data.co;
document.getElementById('humidite').innerHTML = data.temp;
document.getElementById('ozone').innerHTML = data.ozo;
document.getElementById('nh3').innerHTML = data.nh3;
document.getElementById('formaldehyde').innerHTML = data.temp;
document.getElementById('methane ch4').innerHTML = data.meth;
document.getElementById('particules fines').innerHTML = data.parti;
document.getElementById('dihydrogene').innerHTML = data.temp;
document.getElementById('decibelmetre').innerHTML = data.deci;
}
}
//envoyer la requete au serveur
maRequete.send();
//relance la fonction au bout de 2 secondes
setTimeout('lancerRequete()', 1000);
}
//lance la fonction
lancerRequete();
</script>
</body>
</html>