seccion protector solar

css/protector.css

@@ -0,0 +1,136 @@
+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;
+	}
+
+}

js/aplicacion.js

@@ -0,0 +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(); };

protector.html

@@ -0,0 +1,247 @@
+<!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>