protector.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <!doctype html>
  2. <head>
  3. <title>Protection Time 50+</title>
  4. <link type="text/css" rel="Stylesheet" href="css/protector.css" />
  5. <link type="text/css" rel="Stylesheet" href="css/especificos.css" />
  6. <link type="text/css" rel="Stylesheet" href="css/menu.css" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
  9. <script src="js/anim.js"></script>
  10. <script src="js/aplicacion.js"></script>
  11. <script>
  12. function load(){
  13. var contact = document.querySelectorAll("#switcher div");
  14. var datos = ["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.",
  15. "Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Grosella, antioxidante protector de la piel. Ayuda a prevenir intolerancias solares y manchas pigmentarias foto-inducidas. Textura fluida, no grasa, acabado imperceptible. Sin perfume. Sin parabenos, con color",
  16. "Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Sepicalm S, biovector aminoácido con minerales, mejorando el confort cutáneo. Ayuda a prevenir intolerancias solares. Textura fluida, no graso. Acabado imperceptible. Sin perfume. Sin parabenos",
  17. "Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Aceite de sésamo, rico en acidos grasos esenciales. Ayuda a prevenir intolerancias solares y daño provocado por la accion de rayos UV. Textura fluida, no grasa, acabado imperceptible. Sin perfume. Sin parabenos"];
  18. var titulos = ["PROTECTION TIME FPS 50+ Fluido facial con color + ác Hialurónico",
  19. "PROTECTION TIME FPS 50+ Fluido Corporal con color + Grosella",
  20. "PROTECTION TIME FPS 50+ Fluido Facial + Sepicalm S",
  21. "PROTECTION TIME FPS 50+ Fluido Corporal + Aceite de Sésamo"];
  22. var images = [ "hialuronico.png",
  23. "grosella.png",
  24. "sepicalm.png",
  25. "sesamo.png"];
  26. for(var i =0; i < contact.length; i++)
  27. contact[i].onclick=function() {
  28. document.getElementById("prod-text").innerHTML=datos[this.id];
  29. document.getElementById("prod-title").innerHTML=titulos[this.id];
  30. document.getElementById("prod-image").src="Images/protector/"+images[this.id];
  31. for(var i =0; i < contact.length; i++)
  32. contact[i].style.color="white";
  33. this.style.color="#3696BF";
  34. }
  35. var list = document.getElementsByTagName("li");
  36. for(var i =0; i < list.length; i++) {
  37. if(list[i].firstChild.tagName=="A")
  38. list[i].firstChild.addEventListener("click", function(e) {
  39. if (this.hash=='#home'){
  40. window.location="http://especificosba.com.ar";
  41. return;
  42. }
  43. var target=document.getElementById(this.hash.replace("#",""))
  44. scrollToY(target.offsetTop, 1500, 'easeInOutQuint');
  45. e.preventDefault();
  46. });
  47. }
  48. var pos=0;
  49. setInterval(avanzar, 30000);
  50. function avanzar(){
  51. pos++;
  52. if(pos>=4)
  53. pos=0;
  54. document.getElementById(pos).click();
  55. }
  56. var banner=document.getElementById("protector-slide");
  57. var curImg=1;
  58. function slide() {
  59. banner.className='transp';
  60. setTimeout(transp, 500);
  61. curImg++;
  62. if(curImg>4) curImg=1;
  63. }
  64. function transp() {
  65. banner.style.background="url('Images/protector/slide"+curImg+".jpg') no-repeat bottom";
  66. banner.removeAttribute('class');
  67. }
  68. setInterval(slide, 3000);
  69. }
  70. window.addEventListener('load', load, false);
  71. </script>
  72. </head>
  73. <body>
  74. <div id="top_wrapper">
  75. <div id="navbar">
  76. <ul id="navlist">
  77. <li><a href="#home">volver</a></li>
  78. <li><a href="#protector-slide">elige tu protector</a></li>
  79. <li><a href="#aplicacion">c&oacute;mo aplicar</a></li>
  80. <li><a href="#informacion">m&aacute;s informaci&oacute;n </a></li>
  81. <li><a href="#uv">indice uv en tu zona</a></li>
  82. </ul>
  83. </div>
  84. </div>
  85. <div id="protector-slide">
  86. <img id="title" src="Images/logo-nuevo.png"/>
  87. <div id="image-container">
  88. <img src="Images/protector/hialuronico.png" id="prod-image" />
  89. </div>
  90. <div id="prod-description">
  91. <div id="prod-title">PROTECTION TIME FPS 50+ Fluido facial con color + ác Hialurónico</div>
  92. <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/>
  93. Sin perfume. Sin parabenos, con color.</div>
  94. <div> <b>Testeados en USA bajo normas FDA-COLIPA</b> </div>
  95. </div>
  96. <div id="space"></div>
  97. <div id="switcher">
  98. <div id="0">&#11044;</div><div id="1">&#11044;</div><div id="2">&#11044;</div><div id="3">&#11044;</div>
  99. </div>
  100. </div>
  101. <div id="aplicacion" class="seccion">
  102. <h1> <span>C&oacute;mo Aplicar </span></h1>
  103. <p>
  104. ESPECIFICOS Buenos Aires, te cuida… <br/><br/>
  105. El efecto de las radiaciones UV en la piel es acumulativo, progresivo e irreversible.<br/>
  106. Exponerse al sol sin protección puede ser nocivo para las personas. <br/><br/>
  107. Elige cuidarte del sol este verano…<br/>
  108. </p>
  109. <div class="descripciones">
  110. <div id="time" class="descripcion">
  111. <div id="timeIcon" class="imageIcon"></div>
  112. Aplicar la crema antes de salir a la playa o la piscina, y como mínimo 30 minutos antes de exponerse al sol. <br/>
  113. 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/>
  114. </div>
  115. <div id="extend" class="descripcion">
  116. <div id="extendIcon" class="imageIcon"></div>
  117. Extender PROTECTION TIME 50+ sobre la piel bien seca.<br/>
  118. Aplicar una capa abundante, extendido por toda la piel sin dejar zonas sin protección.
  119. </div>
  120. </div>
  121. <div class="descripciones">
  122. <div id="water" class="descripcion">
  123. <div id="waterIcon" class="imageIcon"></div>
  124. No pulverizar sobre la piel con agua mientras se toma el sol.<br/>
  125. En el caso de haberse humedecido, seque con toalla y aplique foto protector Protection Time 50+. No olvide orejas, nuca y pies.<br/>
  126. </div>
  127. <div id="hat" class="descripcion">
  128. <div id="hatIcon" class="imageIcon"></div>
  129. Proteger la cabeza con un sombrero o gorra con visera; los ojos con gafas adecuadas.<br/>
  130. Evitar la exposición al sol entre las 11 y las 15 horas (horario de máxima radiación ultravioleta).
  131. </div>
  132. </div>
  133. <div class="descripciones">
  134. <div id="cloud" class="descripcion">
  135. <div id="cloudIcon" class="imageIcon"></div>
  136. Utilizar protección solar aunque esté nublado.<br/>
  137. </div>
  138. <div id="hat" class="descripcion">
  139. <div id="drinkIcon" class="imageIcon"></div>
  140. Beber agua o líquidos sin alcohol para evitar la deshidratación.<br/>
  141. </div>
  142. </div>
  143. </div>
  144. <div id="informacion" class="seccion">
  145. <h1> <span>Más información</span></h1>
  146. <p>
  147. PROTECTION TIME 50+ te ayuda prevenir, evitando las exposiciones dañinas a los rayos ultra violetas (UV).<br/><br/>
  148. 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/>
  149. 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>
  150. Si se utiliza una crema de FPS de 5, se tardarán 20 minutos</br>
  151. Utilizando un FPS 50, <b>se tardarán 200 minutos.</b><br/>
  152. <br/><br/>
  153. La intensidad (RUV) depende de:
  154. </p>
  155. <div class="descripciones">
  156. <div class="descripcion">
  157. <b>La elevación del sol: </b><br/>
  158. Cuanto más alto está el sol en el cielo, mayor es la intensidad de las radiaciones UV.
  159. </div>
  160. <div class="descripcion">
  161. <b>Protección de las nubes:</b><br/>
  162. Las radiaciones UV son más intensas cuando el cielo está despejado, pero pueden ser intensas aun cuando el cielo está nublado.
  163. </div>
  164. </div>
  165. <div class="descripciones">
  166. <div class="descripcion">
  167. <b>Latitud:</b><br/>
  168. Cuanto más cerca se está del ecuador, más intensas son las radiaciones UV.
  169. </div>
  170. <div class="descripcion">
  171. <b>Altitud:</b><br/>
  172. La intensidad de las radiaciones UV aumenta un 5% por cada 1000 metros de altitud.
  173. </div>
  174. </div>
  175. <div class="descripciones">
  176. <div class="descripcion">
  177. <b>Reflexión por el suelo:</b><br/>
  178. 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%).
  179. </div>
  180. <div class="descripcion">
  181. <b>Capa de Ozono: </b><br/>
  182. 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.
  183. </div>
  184. </div>
  185. </div>
  186. <div id="uv" class="seccion">
  187. <h1> <span>Indice UV en tu zona</span></h1>
  188. <p>
  189. ESPECIFICOS Buenos Aires desarrolló una aplicación para que puedas consultar el índice UV en tu zona.<br/>
  190. Sólo necesitas ingresar tu ubicación y recibirás dicho índice
  191. </p>
  192. <div id="app">
  193. <input type="text" id="direccion" placeholder="Por favor completa tu direccion">
  194. <div id="result">
  195. <p id="cargando">Cargando...</p>
  196. </div>
  197. </div>
  198. <a href="https://play.google.com/store/apps/details?id=eba.dv.uv"><img src="Images/playstore.png" style="width:50px"></a><br/>
  199. Descargá la aplicación para tu celular<br/>
  200. Accediendo a Google Play y buscando "Indice UV Especificos Buenos Aires"
  201. <br/><br/><br/>
  202. <b>Cómo actuar según el índice ? </b><br/><br/>
  203. <img src="Images/protector/INDICES.png"><br/><br/>
  204. Alcance de la aplicación:<br/><br/>
  205. <b> Para Argentina: </b> <br/>Alcance sobre todo el país
  206. <br/><br/>
  207. <b> Para Ecuador: </b><br/>
  208. <div class="descripciones">
  209. <div class="ciudades">
  210. Ambato<br/>
  211. Bahia de Caraquez<br/>
  212. Canar<br/>
  213. Catamayo<br/>
  214. Cocafrancisco<br/>
  215. Corazon<br/>
  216. Cuenca<br/>
  217. Esmeraldas<br/>
  218. Guayaquil<br/>
  219. </div>
  220. <div class="ciudades">
  221. Ibarra<br/>
  222. Inaquito<br/>
  223. Izobamba<br/>
  224. La Concordia Canton<br/>
  225. Latacunga<br/>
  226. La Tola<br/>
  227. Loja La Argelia<br/>
  228. Macas<br/>
  229. Machala<br/>
  230. </div>
  231. <div class="ciudades">
  232. Manta<br/>
  233. Milagro<br/>
  234. Nueva Loja<br/>
  235. Nuevo Rocafuerte<br/>
  236. Portoviejo<br/>
  237. PuertoIla<br/>
  238. Puyo<br/>
  239. Quero Chaca<br/>
  240. Quito<br/>
  241. </div>
  242. <div class="ciudades">
  243. Riobamba<br/>
  244. Rumipamba<br/>
  245. Salinas<br/>
  246. San Cristobal<br/>
  247. Santa Rosa<br/>
  248. Seymour<br/>
  249. Tena<br/>
  250. Tiputini<br/>
  251. Tulcanel Rosal<br/>
  252. </div>
  253. </div>
  254. <br/>
  255. <b> Para México: </b> <br/>
  256. <div class="descripciones">
  257. <div class="ciudades">
  258. Acapulco<br/>
  259. Chihuahua<br/>
  260. Culiacan<br/>
  261. Culiacan<br/>
  262. Guadalajara<br/>
  263. Hermosillo<br/>
  264. La Paz<br/>
  265. </div>
  266. <div class="ciudades">
  267. Merida<br/>
  268. Mexicali<br/>
  269. Mexico<br/>
  270. Monterrey<br/>
  271. San Luis Potosi<br/>
  272. Torreon<br/>
  273. Tuxtla<br/>
  274. </div>
  275. </div>
  276. </div>
  277. </body>
  278. </html>