???

contacto.php

@@ -3,14 +3,12 @@ include('db.php');
 
 if (!isset($_POST['nombre'])||!isset($_POST['mail'])||!isset($_POST['consulta'])) die ("Completa todos los campos.");
 if (strpos($_POST['mail'], "@") === false || strlen($_POST['mail']) < 5) die ("Mail invalido");
+#TODO checkear por duplicados
 if (!$statement = $db->prepare("INSERT INTO consultas(nombre,email,consulta,fecha) VALUES (?,?,?,NOW())")) die("Hubo un error con la base de datos");
 $statement->bind_param("sss",$_POST['nombre'],$_POST['mail'],$_POST['consulta']);
 $statement->execute();
-//TODO mail
-
 
 include("mailer.php");
 
 $body="Mensaje de ".$_POST['nombre']. " ( ". $_POST['mail']." ) "."<br/><br/>".$_POST['consulta'];
 sendmail("Consulta en la pagina", $_POST['mail'], $body);
-echo "Consulta enviada correctamente.";

css/protector.css

@@ -1,136 +1,129 @@
-html, body
-{
-    margin: 0px auto;
-    font-family: 'Open Sans';    
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-stroke: 0.50px;
-    position: relative;
-	letter-spacing: 0.5px;
-}       
-
-#protector-slide{
-	position: relative;
-	background: url(../Images/beach.jpg) no-repeat bottom ;
-	background-size: cover;
-	-webkit-background-size: cover;
-  	-moz-background-size: cover;
-  	-o-background-size: cover;
-	min-height: 800px;
-	width: 100%;
-}
-
-#imgp{
-	width: 120%;
-}
-
-h1{
-	text-transform: uppercase;
-}
-
-.imageIcon{
-	height: 115px;
-	width: 115px;
-	margin: 0px auto;
-	margin-bottom: 25px;
-}
-
-#timeIcon {
-	background:url(../Images/icons/protector.png) 0 0px;
-}
-
-#extendIcon {
-	background:url(../Images/icons/protector.png) 0 -115px;
-}
-
-#waterIcon {
-	background:url(../Images/icons/protector.png) 0 -230px;
-}
-
-#hatIcon {
-	background:url(../Images/icons/protector.png) 0 -345px;
-}
-
-#drinkIcon{
-	background:url(../Images/icons/protector.png) 0 -460px;
-}
-
-#cloudIcon{
-	background:url(../Images/icons/protector.png) 0 -575px;
-}
-
-
-#direccion{
-    width: 50%;
-    display: block;
-    margin: 0px auto 40px;
-    text-align: center;
-}
-
-#app{
-	border: 1px solid #55707F;
-	height: 150px;
-	width: 60%;
-	margin: 0px auto;
-	margin-bottom: 20px;
-	padding: 20px;
-}
-
-#title{
-	margin: 90px auto 0px;
-	text-align: center;
-	z-index: 3;
-	width: 100%;
-	position: absolute;
-	color: white;
-	text-shadow: 0 0 0.2em #000;
-
-}
-
-#prod-image{
-	float: left;
-	width: 40%;
-}
-
-#prod-description{
-	float: right;
-width: 46%;
-right: 110px;
-position: absolute;
-background-color: rgba(255,255,255,0.5);
-padding: 30px;
-}
-
-#space{
-	clear:both;
-}
-
-#slide-wrapper{
-	position: absolute;
-	bottom: 90px;
-}
-
-#slider-bottom{
-	position: absolute;
-	bottom: 30px;
-	width: 100%;
-	margin: 0px auto;
-	text-align: center;
-	font-size: 28px;
-	letter-spacing: 30px;
-	color: white;
-	cursor: pointer;
-}
-
-#prod-title{
-	font-size: 20px;
-	font-variant: small-caps;
-	border-bottom: 1px solid;
-	margin-bottom: 20px;
-}
-
-@media screen and (min-width:1130px){
-	#prod-description{
-		bottom: 220px !important;
-	}
-
-}
+html, body
+{
+    margin: 0px auto;
+    font-family: 'Open Sans';    
+    position: relative;
+	letter-spacing: 0.5px;
+}       
+
+#protector-slide{
+	position: relative;
+	background: url(../Images/beach.jpg) no-repeat bottom ;
+	background-size: cover;
+	min-height: 730px;
+	width: 100%;
+	margin-top:77px;
+}
+
+
+h1{ text-transform: uppercase; }
+
+.imageIcon{
+	height: 115px;
+	width: 115px;
+	margin: 0px auto;
+	margin-bottom: 25px;
+}
+
+#timeIcon {
+	background:url(../Images/icons/protector.png) 0 0px;
+}
+
+#extendIcon {
+	background:url(../Images/icons/protector.png) 0 -115px;
+}
+
+#waterIcon {
+	background:url(../Images/icons/protector.png) 0 -230px;
+}
+
+#hatIcon {
+	background:url(../Images/icons/protector.png) 0 -345px;
+}
+
+#drinkIcon{
+	background:url(../Images/icons/protector.png) 0 -460px;
+}
+
+#cloudIcon{
+	background:url(../Images/icons/protector.png) 0 -575px;
+}
+
+
+#direccion{
+    width: 50%;
+    display: block;
+    margin: 0px auto 40px;
+    text-align: center;
+}
+
+#app{
+	border: 1px solid #55707F;
+	height: 150px;
+	width: 60%;
+	margin: 0px auto;
+	margin-bottom: 20px;
+	padding: 20px;
+}
+
+#title{
+	margin-top: 15px ;
+	z-index: 3;
+	left: 50%;
+	transform: translate(-50%, 0);
+	position: absolute;
+	color: white;
+	text-shadow: 0 0 0.2em #000;
+
+}
+
+#prod-image{
+	width: 22%;
+	display:block;
+	margin-left:10%;
+}
+
+#prod-description{
+	float: right;
+	width: 46%;
+	right: 110px;
+	position: absolute;
+	background-color: rgba(255,255,255,0.5);
+	padding: 30px;
+}
+
+#space{ clear:both; }
+
+#slide-wrapper{
+	position: absolute;
+	right:0px;
+	bottom: 90px;
+	width:100%;
+}
+
+#slider-bottom{
+	position: absolute;
+	bottom: 30px;
+	width: 100%;
+	margin: 0px auto;
+	text-align: center;
+	font-size: 28px;
+	letter-spacing: 30px;
+	color: white;
+	cursor: pointer;
+}
+
+#prod-title{
+	font-size: 20px;
+	font-variant: small-caps;
+	border-bottom: 1px solid;
+	margin-bottom: 20px;
+}
+#switcher { width:100%; z-index:5;text-align:center;}
+#switcher div { color:white; margin:0px 10px; max-height:160px; display:inline; z-index:5;cursor:pointer;}
+@media screen and (min-width:1130px){
+	#prod-description{
+		bottom: 200px !important;
+	}
+
+}

graficas.php

@@ -2,47 +2,12 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <link type="text/css" rel="Stylesheet" href="css/menu.css"/>
 <title>Graficas - Especificos Buenos Aires</title>
-</head/
+</head>
 
 <body>
 <div id="facebook-link">
 	<a href="https://www.facebook.com/EspecificosBuenosAires"><img src="Images/fbmini.png" /></a>
 </div>
-<div id="overlay-contact">
-</div>
-
-    <div class="basic-grey">
-    <h5 id="exit">X</h5>
-    <form action="" method="post" class="STYLE-NAME">
-    <h5>Contacto</h5><br>
-    Un equipo de profesionales está a su servicio para responder sus consultas.<br><br>
-    Av. Rivadavia 5427 3F, CABA (1424), Buenos Aires, Argentina.<br><br>
-    Tel&eacute;fono: +5411 4139-6860/1 +5411 4904-0289.
-    <br><br>
-    <label>
-
-        <span>Nombre :</span>
-        <input id="name" type="text" name="name" />
-    </label>
-    <br>
-    <label>
-        <span>Email :</span>
-        <input id="email" type="email" name="email" />
-    </label>
-    <br>
-    <label>
-        <span>Mensaje :</span>
-        <textarea id="message" name="message" ></textarea>
-    </label>
-    <br> 
-    <label>
-        <span>&nbsp;</span> 
-        <input id="btnconsulta" type="button" class="button" value="Enviar" /> 
-    </label>    
-    <div id="respuestacontacto"></div>
-    </form>
-</div>
-
 
 <div id="top_wrapper">
     <div id="navbar">

js/aplicacion.js

@@ -1,73 +1,73 @@
-window.onload=function() {
-		var req = new XMLHttpRequest();
-		var result = document.getElementById("result");
-		var direccion = document.getElementById("direccion");
-		var geo_options = { 
-			enableHighAccuracy: false, 
-			maximumAge        : 0, 
-			timeout           : 5000
-		}
-
-		function doGet(lat,lng){
-			var d = new Date();
-			var time=d.getHours()*100 + d.getMinutes();
-			var params="?lat="+lat+"&long="+lng+"&t="+time;
-			req.open("GET", "http://uv.especificosba.com.ar/back/location.php"+params, true);
-			req.onreadystatechange=function(){
-			if(req.readyState == 4 && req.status == 200)
-				var res=JSON.parse(req.responseText);
-				if(res==undefined) { return; }
-				if(res.errorn==1){
-					result.innerHTML=res.error;
-				} else {
-					result.innerHTML="El indice UV actual en <br/>" +res.provincia + " es " + res.indicet + " ("+ numtolet(res.indicet)  +") <br/>y el m&aacute;ximo esperado para hoy es " + res.indice+ " ("+ numtolet(res.indice)  +")";
-				}
-				resize();
-			}
-			req.send();
-		}
-		function error(e){
-			var cargando=document.getElementById("cargando");
-			cargando.parentNode.removeChild(cargando);
-			initialize();
-			resize();
-		}
-		function numtolet(num){
-			if (num<=2) return "Muy bajo";
-			if (num<=4) return "Bajo";
-			if (num<=6) return "Moderado";
-			if (num<=9) return "Alto";
-			if (num<=14) return "Muy alto";
-			return "Extremo";
-		}
-		var geocoder = null;
-		var markers = new Array();
-		
-		function autocomplete_cb() {
-			direccion = document.getElementById("direccion");
-			geocoder = new google.maps.Geocoder();
-			var address = direccion.value;
-			var callback1 = function(results, status) {
-			    if (status == google.maps.GeocoderStatus.OK) {
-			    	   doGet(results[0].geometry.location.lat(),results[0].geometry.location.lng());
-				  }
-			};
-		    geocoder.geocode( { 'address': address}, callback1);
-		}
-		
-		function initialize() {
-			var autocomplete = new google.maps.places.Autocomplete(document.getElementById("direccion"));
-			google.maps.event.addListener(autocomplete, 'place_changed', function() {
-				autocomplete_cb();
-			});
-				
-		}
-		error();
-
-};
-
-function resize(){
-	var html = document.documentElement;
-	var height = Math.max( html.clientHeight, html.offsetHeight );
-}
-window.onresize=function() { resize(); };
+window.onload=function() {
+		var req = new XMLHttpRequest();
+		var result = document.getElementById("result");
+		var direccion = document.getElementById("direccion");
+		var geo_options = { 
+			enableHighAccuracy: false, 
+			maximumAge        : 0, 
+			timeout           : 5000
+		}
+
+		function doGet(lat,lng){
+			var d = new Date();
+			var time=d.getHours()*100 + d.getMinutes();
+			var params="?lat="+lat+"&long="+lng+"&t="+time;
+			req.open("GET", "http://uv.especificosba.com.ar/back/location.php"+params, true);
+			req.onreadystatechange=function(){
+			if(req.readyState == 4 && req.status == 200)
+				var res=JSON.parse(req.responseText);
+				if(res==undefined) { return; }
+				if(res.errorn==1){
+					result.innerHTML=res.error;
+				} else {
+					result.innerHTML="El indice UV actual en <br/>" +res.provincia + " es " + res.indicet + " ("+ numtolet(res.indicet)  +") <br/>y el m&aacute;ximo esperado para hoy es " + res.indice+ " ("+ numtolet(res.indice)  +")";
+				}
+				resize();
+			}
+			req.send();
+		}
+		function error(e){
+			var cargando=document.getElementById("cargando");
+			cargando.parentNode.removeChild(cargando);
+			initialize();
+			resize();
+		}
+		function numtolet(num){
+			if (num<=2) return "Muy bajo";
+			if (num<=4) return "Bajo";
+			if (num<=6) return "Moderado";
+			if (num<=9) return "Alto";
+			if (num<=14) return "Muy alto";
+			return "Extremo";
+		}
+		var geocoder = null;
+		var markers = new Array();
+		
+		function autocomplete_cb() {
+			direccion = document.getElementById("direccion");
+			geocoder = new google.maps.Geocoder();
+			var address = direccion.value;
+			var callback1 = function(results, status) {
+			    if (status == google.maps.GeocoderStatus.OK) {
+			    	   doGet(results[0].geometry.location.lat(),results[0].geometry.location.lng());
+				  }
+			};
+		    geocoder.geocode( { 'address': address}, callback1);
+		}
+		
+		function initialize() {
+			var autocomplete = new google.maps.places.Autocomplete(document.getElementById("direccion"));
+			google.maps.event.addListener(autocomplete, 'place_changed', function() {
+				autocomplete_cb();
+			});
+				
+		}
+		error();
+
+};
+
+function resize(){
+	var html = document.documentElement;
+	var height = Math.max( html.clientHeight, html.offsetHeight );
+}
+window.onresize=function() { resize(); };

protector.html

@@ -1,247 +1,262 @@
-<!doctype html>
-<head>
-	<title>Protection Time 50+</title>
-	<link type="text/css" rel="Stylesheet" href="css/protector.css" />
-	<link type="text/css" rel="Stylesheet" href="css/especificos.css" />
-	<link type="text/css" rel="Stylesheet" href="css/menu.css" />
-
-	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
-	<script src="js/aplicacion.js"></script>
-	<script>
-//		window.onload = function(){
-//			document.getElementById("imgp").src="Images/protector/sesamo.png"
-//		}
-	</script>
-</head>
-
-<body>
-	<div id="top_wrapper">
-    	<div id="navbar">
-	        <ul id="navlist">
-	        	<li> volver </li>
-	        	<li> elige tu protector </li>
-	        	<li> c&oacute;mo aplicar </li>
-	        	<li> m&aacute;s informaci&oacute;n </li>
-	        	<li> indice uv en tu zona</li>
-	        </ul>
-	    </div>
-	</div>
-
-	<div id="title">
-		<img src="Images/logo-nuevo.png"/>
-
-	</div>
-
-	<div id="protector-slide">
-		<div id="slide-wrapper">
-			<div id="prod-image">
-				<img src="Images/protector/grosella.png" id="imgp"/>
-				<div id="space"></div>
-			</div>
-
-			<div id="prod-description">
-				<div id="prod-title">PROTECTION TIME  FPS 50+ Fluido facial con color + ác Hialurónico</div>
-				<div id="prod-text">Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Acido Hialurónico, hidratante protector de la piel. Ayuda a prevenir intolerancias solares y daño celular provocado por la acción de rayos UV. Textura fluida, no grasa. Acabado imperceptible. <br/>
-				Sin perfume. Sin parabenos, con color.</div>
-				<div id="space"></div>
-			</div>
-			<div id="space"></div>
-		</div>
-		<div id="slider-bottom">
-		 	<div id="1">&#11044;</div><div id="2">&#11044;</div><div id="3">&#11044;</div><div id="4">&#11044;</div>
-	</div>
-	</div>
-
-
-	
-	<div id="aplicacion" class="seccion">
-		<h1> <span>C&oacute;mo Aplicar </span></h1>
-		<p>
-			ESPECIFICOS Buenos Aires, te cuida… <br/><br/>
-
-			El efecto de las radiaciones UV en la piel es acumulativo, progresivo e irreversible.<br/>
-			Exponerse al sol sin protección puede ser nocivo para las personas.  <br/><br/>
-
-			Elige cuidarte del sol este verano…<br/>
-		</p>
-
-		<div class="descripciones">
-			<div id="time" class="descripcion">
-				<div id="timeIcon" class="imageIcon"></div>
-				Aplicar la crema antes de salir a la playa o la piscina, y como mínimo 30 minutos antes de exponerse al sol. <br/>
-				Reaplicar cuando sea necesario de acuerdo a cada fototipo cutáneo. <b>Se recomienda cada dos horas </b>para mantener la protección, especialmente después de un baño o nadar<br/>
-			</div>
-			<div id="extend" class="descripcion">
-				<div id="extendIcon" class="imageIcon"></div>
-				Extender  PROTECTION TIME 50+ sobre la piel bien seca.<br/>
-				Aplicar una capa abundante, extendido por toda la piel sin dejar zonas sin protección.
-			</div>
-		</div>
-	
-		<div class="descripciones">
-			<div id="water" class="descripcion">
-				<div id="waterIcon" class="imageIcon"></div>
-				No pulverizar sobre la piel con agua mientras se toma el sol.<br/> 
-				En el caso de haberse humedecido, seque con toalla y aplique foto protector Protection Time 50+. No olvide orejas, nuca y pies.<br/>
-			</div>
-			<div id="hat" class="descripcion">
-				<div id="hatIcon" class="imageIcon"></div>
-				Proteger la cabeza con un sombrero o gorra con visera; los ojos con gafas adecuadas.<br/>
-				Evitar la exposición al sol entre las 11 y las 15 horas (horario de máxima radiación ultravioleta).
-			</div>
-		</div>
-
-		<div class="descripciones">
-			<div id="cloud" class="descripcion">
-				<div id="cloudIcon" class="imageIcon"></div>
-				Utilizar protección solar aunque esté nublado.<br/>
-			</div>
-			<div id="hat" class="descripcion">
-				<div id="drinkIcon" class="imageIcon"></div>
-				Beber agua o líquidos sin alcohol para evitar la deshidratación.<br/>
-			</div>
-		</div>
-
-	<div id="informacion" class="seccion">
-		<h1> <span>Más información</span></h1>
-		<p>
-
-			PROTECTION TIME 50+ te ayuda prevenir, evitando las exposiciones dañinas a los rayos ultra violetas (UV).<br/><br/>
-
-			Factor de Protección Solar, es un número que mide cuánto tiempo se puede estar expuesto al sol para producir el mismo enrojecimiento o eritema que si no se hubiese utilizado la crema de protección solar.  <br/><br/>
-
-			Es decir: Sin la utilización de un protector, la piel deberá estar expuesta al sol durante 4 minutos para empezar a enrojecerse (eritema)</br>
-			Si se utiliza una crema de FPS de 5, se tardarán 20 minutos</br>
-			Utilizando un FPS 50, <b>se tardarán 200 minutos.</b><br/>
-			<br/><br/>
-			La intensidad (RUV) depende de:
-		</p>
-		<div class="descripciones">
-			<div class="descripcion">
-				<b>La elevación del sol: </b><br/>
-				Cuanto más alto está el sol en el cielo, mayor es la intensidad de las radiaciones UV.
-			</div>
-			<div class="descripcion">
-				<b>Protección de las nubes:</b><br/>
-				Las radiaciones UV son más intensas cuando el cielo está despejado, pero pueden ser intensas aun cuando el cielo está nublado.
-			</div>
-		</div>
-
-		<div class="descripciones">
-			<div class="descripcion">
-				<b>Latitud:</b><br/>
-				Cuanto más cerca se está del ecuador, más intensas son las radiaciones UV.
-			</div>
-			<div class="descripcion">
-				<b>Altitud:</b><br/>
-				La intensidad de las radiaciones UV aumenta un 5% por cada 1000 metros de altitud.
-			</div>
-		</div>
-
-		<div class="descripciones">
-			<div class="descripcion">
-				<b>Reflexión por el suelo:</b><br/>	
-				Muchas superficies reflejan los rayos del sol y aumentan la exposición general a las radiaciones ultravioleta (por ej., el césped, la tierra y el agua reflejan menos de 10%; la nieve recién caída y el hielo, entre 80% y 90%; la arena seca de las playas, entre 20% y 30%; y la espuma del mar, 25%).
-			</div>
-			<div class="descripcion">
-				<b>Capa de Ozono: </b><br/>	
-				Este gas absorbe una parte de las radiaciones UV del sol. A medida que la capa de ozono se adelgaza, aumenta la cantidad de radiaciones UV que llegan a la superficie terrestre.
-			</div>
-		</div>
-	</div>
-	<div id="uv" class="seccion">
-		<h1> <span>Indice UV en tu zona</span></h1>
-		<p>
-			ESPECIFICOS Buenos Aires desarrolló una aplicación para que puedas consultar el índice UV en tu zona.<br/>
-			Sólo necesitas ingresar tu ubicación y recibirás dicho índice
-		</p>
-
-		<div id="app">
-			<input type="text" id="direccion" placeholder="Por favor completa tu direccion">
-			<div id="result">
-				<p id="cargando">Cargando...</p>	
-			</div>
-		</div>
-
-		<a href="https://play.google.com/store/apps/details?id=eba.dv.uv"><img src="Images/playstore.png" style="width:50px"></a><br/>
-		Descargá la aplicación para tu celular<br/>
-		Accediendo a Google Play y buscando "Indice UV Especificos Buenos Aires"
-		<br/><br/><br/>
-
-		<b>Cómo actuar según el índice ? </b><br/><br/>
-		<img src="Images/protector/INDICES.png"><br/><br/>
-			Alcance de la aplicación:<br/><br/>
-			<b> Para Argentina: </b> <br/>Alcance sobre todo el país
-			<br/><br/>
-			<b> Para Ecuador: </b><br/>
-			<div class="descripciones">
-				<div class="descripcion">
-					Ambato<br/>	
-					Bahia de Caraquez<br/>	
-					Canar<br/>	
-					Catamayo<br/>	
-					Cocafrancisco<br/>	
-					Corazon<br/>	
-					Cuenca<br/>	
-					Esmeraldas<br/>	
-					Guayaquil<br/>	
-					Ibarra<br/>	
-					Inaquito<br/>	
-					Izobamba<br/>	
-					La Concordia Canton<br/>	
-					Latacunga<br/>	
-					La Tola<br/>	
-					Loja La Argelia<br/>	
-					Macas<br/>	
-					Machala<br/>	
-					
-				</div>
-				<div class="descripcion">
-					Manta<br/>	
-					Milagro<br/>	
-					Nueva Loja<br/>	
-					Nuevo Rocafuerte<br/>	
-					Portoviejo<br/>	
-					PuertoIla<br/>	
-					Puyo<br/>	
-					Quero Chaca<br/>	
-					Quito<br/>	
-					Riobamba<br/>
-					Rumipamba<br/>	
-					Salinas<br/>	
-					San Cristobal<br/>	
-					Santa Rosa<br/>	
-					Seymour<br/>	
-					Tena<br/>	
-					Tiputini<br/>	
-					Tulcanel Rosal<br/>	
-				</div>
-			</div>
-			<br/>
-			<b> Para México: </b> <br/>
-			<div class="descripciones">
-				<div class="descripcion">
-					Acapulco<br/>
-					Chihuahua<br/>
-					Culiacan<br/>
-					Culiacan<br/>
-					Guadalajara<br/>
-					Hermosillo<br/>
-					La Paz<br/>
-				</div>
-				<div class="descripcion">
-					Merida<br/>
-					Mexicali<br/>
-					Mexico<br/>
-					Monterrey<br/>
-					San Luis Potosi<br/>
-					Torreon<br/>
-					Tuxtla<br/>
-				</div>
-			</div>
-
-
-	</div>
-</body>
-</html>
+<!doctype html>
+<head>
+	<title>Protection Time 50+</title>
+	<link type="text/css" rel="Stylesheet" href="css/protector.css" />
+	<link type="text/css" rel="Stylesheet" href="css/especificos.css" />
+	<link type="text/css" rel="Stylesheet" href="css/menu.css" />
+
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
+<!--	<script src="js/aplicacion.js"></script>-->
+	<script>
+		window.onload = function(){
+			var contact = document.querySelectorAll("#switcher div");
+			var datos = ["1",
+						 "2",
+						 "3",
+						 "4"];
+			var titulos = ["1",
+						   "2",
+						   "3",
+						   "4"];
+			for(var i =0; i < contact.length; i++)
+				contact[i].onclick=function() {
+					document.getElementById("prod-text").innerHTML=datos[this.id];
+					document.getElementById("prod-title").innerHTML=datos[this.id];
+
+					for(var i =0; i < contact.length; i++)
+						contact[i].style.color="white";
+					this.style.color="red";
+				}
+		};
+	</script>
+</head>
+
+<body>
+	<div id="top_wrapper">
+    	<div id="navbar">
+	        <ul id="navlist">
+	        	<li> volver </li>
+	        	<li> elige tu protector </li>
+	        	<li> c&oacute;mo aplicar </li>
+	        	<li> m&aacute;s informaci&oacute;n </li>
+	        	<li> indice uv en tu zona</li>
+	        </ul>
+	    </div>
+	</div>
+
+	<img id="title" src="Images/logo-nuevo.png"/>
+
+	<div id="protector-slide">
+		<div id="slide-wrapper">
+			<img src="Images/protector/grosella.png" id="prod-image" />
+
+			<div id="prod-description">
+				<div id="prod-title">PROTECTION TIME  FPS 50+ Fluido facial con color + ác Hialurónico</div>
+				<div id="prod-text">Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Acido Hialurónico, hidratante protector de la piel. Ayuda a prevenir intolerancias solares y daño celular provocado por la acción de rayos UV. Textura fluida, no grasa. Acabado imperceptible. <br/>
+				Sin perfume. Sin parabenos, con color.</div>
+			</div>
+			<div id="switcher">
+				<div id="0">&#11044;</div><div id="1">&#11044;</div><div id="2">&#11044;</div><div id="3">&#11044;</div>
+<!--				<img id="grosella" 	src="Images/protector/grosella-thumb.png">
+				<img id="sesamo" 	src="Images/protector/sesamo-thumb.png">
+				<img id="sepicalm" 	src="Images/protector/sepicalm-thumb.png">
+				<img id="hialuronico" src="Images/protector/hialuronico-thumb.png">-->
+			</div>
+
+			<div id="space"></div>
+		</div>
+	</div>
+
+
+	
+	<div id="aplicacion" class="seccion">
+		<h1> <span>C&oacute;mo Aplicar </span></h1>
+		<p>
+			ESPECIFICOS Buenos Aires, te cuida… <br/><br/>
+
+			El efecto de las radiaciones UV en la piel es acumulativo, progresivo e irreversible.<br/>
+			Exponerse al sol sin protección puede ser nocivo para las personas.  <br/><br/>
+
+			Elige cuidarte del sol este verano…<br/>
+		</p>
+
+		<div class="descripciones">
+			<div id="time" class="descripcion">
+				<div id="timeIcon" class="imageIcon"></div>
+				Aplicar la crema antes de salir a la playa o la piscina, y como mínimo 30 minutos antes de exponerse al sol. <br/>
+				Reaplicar cuando sea necesario de acuerdo a cada fototipo cutáneo. <b>Se recomienda cada dos horas </b>para mantener la protección, especialmente después de un baño o nadar<br/>
+			</div>
+			<div id="extend" class="descripcion">
+				<div id="extendIcon" class="imageIcon"></div>
+				Extender  PROTECTION TIME 50+ sobre la piel bien seca.<br/>
+				Aplicar una capa abundante, extendido por toda la piel sin dejar zonas sin protección.
+			</div>
+		</div>
+	
+		<div class="descripciones">
+			<div id="water" class="descripcion">
+				<div id="waterIcon" class="imageIcon"></div>
+				No pulverizar sobre la piel con agua mientras se toma el sol.<br/> 
+				En el caso de haberse humedecido, seque con toalla y aplique foto protector Protection Time 50+. No olvide orejas, nuca y pies.<br/>
+			</div>
+			<div id="hat" class="descripcion">
+				<div id="hatIcon" class="imageIcon"></div>
+				Proteger la cabeza con un sombrero o gorra con visera; los ojos con gafas adecuadas.<br/>
+				Evitar la exposición al sol entre las 11 y las 15 horas (horario de máxima radiación ultravioleta).
+			</div>
+		</div>
+
+		<div class="descripciones">
+			<div id="cloud" class="descripcion">
+				<div id="cloudIcon" class="imageIcon"></div>
+				Utilizar protección solar aunque esté nublado.<br/>
+			</div>
+			<div id="hat" class="descripcion">
+				<div id="drinkIcon" class="imageIcon"></div>
+				Beber agua o líquidos sin alcohol para evitar la deshidratación.<br/>
+			</div>
+		</div>
+
+	<div id="informacion" class="seccion">
+		<h1> <span>Más información</span></h1>
+		<p>
+
+			PROTECTION TIME 50+ te ayuda prevenir, evitando las exposiciones dañinas a los rayos ultra violetas (UV).<br/><br/>
+
+			Factor de Protección Solar, es un número que mide cuánto tiempo se puede estar expuesto al sol para producir el mismo enrojecimiento o eritema que si no se hubiese utilizado la crema de protección solar.  <br/><br/>
+
+			Es decir: Sin la utilización de un protector, la piel deberá estar expuesta al sol durante 4 minutos para empezar a enrojecerse (eritema)</br>
+			Si se utiliza una crema de FPS de 5, se tardarán 20 minutos</br>
+			Utilizando un FPS 50, <b>se tardarán 200 minutos.</b><br/>
+			<br/><br/>
+			La intensidad (RUV) depende de:
+		</p>
+		<div class="descripciones">
+			<div class="descripcion">
+				<b>La elevación del sol: </b><br/>
+				Cuanto más alto está el sol en el cielo, mayor es la intensidad de las radiaciones UV.
+			</div>
+			<div class="descripcion">
+				<b>Protección de las nubes:</b><br/>
+				Las radiaciones UV son más intensas cuando el cielo está despejado, pero pueden ser intensas aun cuando el cielo está nublado.
+			</div>
+		</div>
+
+		<div class="descripciones">
+			<div class="descripcion">
+				<b>Latitud:</b><br/>
+				Cuanto más cerca se está del ecuador, más intensas son las radiaciones UV.
+			</div>
+			<div class="descripcion">
+				<b>Altitud:</b><br/>
+				La intensidad de las radiaciones UV aumenta un 5% por cada 1000 metros de altitud.
+			</div>
+		</div>
+
+		<div class="descripciones">
+			<div class="descripcion">
+				<b>Reflexión por el suelo:</b><br/>	
+				Muchas superficies reflejan los rayos del sol y aumentan la exposición general a las radiaciones ultravioleta (por ej., el césped, la tierra y el agua reflejan menos de 10%; la nieve recién caída y el hielo, entre 80% y 90%; la arena seca de las playas, entre 20% y 30%; y la espuma del mar, 25%).
+			</div>
+			<div class="descripcion">
+				<b>Capa de Ozono: </b><br/>	
+				Este gas absorbe una parte de las radiaciones UV del sol. A medida que la capa de ozono se adelgaza, aumenta la cantidad de radiaciones UV que llegan a la superficie terrestre.
+			</div>
+		</div>
+	</div>
+	<div id="uv" class="seccion">
+		<h1> <span>Indice UV en tu zona</span></h1>
+		<p>
+			ESPECIFICOS Buenos Aires desarrolló una aplicación para que puedas consultar el índice UV en tu zona.<br/>
+			Sólo necesitas ingresar tu ubicación y recibirás dicho índice
+		</p>
+
+		<div id="app">
+			<input type="text" id="direccion" placeholder="Por favor completa tu direccion">
+			<div id="result">
+				<p id="cargando">Cargando...</p>	
+			</div>
+		</div>
+
+		<a href="https://play.google.com/store/apps/details?id=eba.dv.uv"><img src="Images/playstore.png" style="width:50px"></a><br/>
+		Descargá la aplicación para tu celular<br/>
+		Accediendo a Google Play y buscando "Indice UV Especificos Buenos Aires"
+		<br/><br/><br/>
+
+		<b>Cómo actuar según el índice ? </b><br/><br/>
+		<img src="Images/protector/INDICES.png"><br/><br/>
+			Alcance de la aplicación:<br/><br/>
+			<b> Para Argentina: </b> <br/>Alcance sobre todo el país
+			<br/><br/>
+			<b> Para Ecuador: </b><br/>
+			<div class="descripciones">
+				<div class="descripcion">
+					Ambato<br/>	
+					Bahia de Caraquez<br/>	
+					Canar<br/>	
+					Catamayo<br/>	
+					Cocafrancisco<br/>	
+					Corazon<br/>	
+					Cuenca<br/>	
+					Esmeraldas<br/>	
+					Guayaquil<br/>	
+					Ibarra<br/>	
+					Inaquito<br/>	
+					Izobamba<br/>	
+					La Concordia Canton<br/>	
+					Latacunga<br/>	
+					La Tola<br/>	
+					Loja La Argelia<br/>	
+					Macas<br/>	
+					Machala<br/>	
+					
+				</div>
+				<div class="descripcion">
+					Manta<br/>	
+					Milagro<br/>	
+					Nueva Loja<br/>	
+					Nuevo Rocafuerte<br/>	
+					Portoviejo<br/>	
+					PuertoIla<br/>	
+					Puyo<br/>	
+					Quero Chaca<br/>	
+					Quito<br/>	
+					Riobamba<br/>
+					Rumipamba<br/>	
+					Salinas<br/>	
+					San Cristobal<br/>	
+					Santa Rosa<br/>	
+					Seymour<br/>	
+					Tena<br/>	
+					Tiputini<br/>	
+					Tulcanel Rosal<br/>	
+				</div>
+			</div>
+			<br/>
+			<b> Para México: </b> <br/>
+			<div class="descripciones">
+				<div class="descripcion">
+					Acapulco<br/>
+					Chihuahua<br/>
+					Culiacan<br/>
+					Culiacan<br/>
+					Guadalajara<br/>
+					Hermosillo<br/>
+					La Paz<br/>
+				</div>
+				<div class="descripcion">
+					Merida<br/>
+					Mexicali<br/>
+					Mexico<br/>
+					Monterrey<br/>
+					San Luis Potosi<br/>
+					Torreon<br/>
+					Tuxtla<br/>
+				</div>
+			</div>
+
+
+	</div>
+</body>
+</html>

syncer.sh

@@ -1,2 +1,2 @@
 #!/bin/ksh
-rsync -azr --exclude=".git" . root@especificos.com.ar:/var/www/eba/
+rsync -vazr --exclude=".git" . root@especificos.com.ar:/var/www/eba/