index.php 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <?php
  2. header('Content-Type: text/html; charset=UTF-8');
  3. ?>
  4. <html>
  5. <!doctype html>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <head>
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
  9. </script>
  10. <script type="text/javascript">
  11. $(document).ready(function () {
  12. $('.basic-grey, #overlay-contact').hide();
  13. var clickExit=false;
  14. var clickOutside=false;
  15. $('.contact').click(function(event){
  16. var tempScrollTop = $(window).scrollTop();
  17. event.preventDefault();
  18. $('.basic-grey, #overlay-contact').toggle();
  19. if($('.basic-grey').is(':visible')){
  20. $('#overlay-contact').click(function(){
  21. $('.basic-grey, #overlay-contact').hide();
  22. $(window).scrollTop(tempScrollTop);
  23. //clickOutside=true;
  24. });
  25. $('#exit').click(function(){
  26. $('.basic-grey, #overlay-contact').hide();
  27. $(window).scrollTop(tempScrollTop);
  28. //clickExit=true;
  29. });
  30. //if( clickOutside==true ){
  31. // $('.basic-grey, #overlay-contact').hide(); TODO: SIMPLIFICAR
  32. // $(window).scrollTop(tempScrollTop);
  33. // }
  34. }
  35. });
  36. $('li a').click(function () {
  37. $('html, body').animate({ scrollTop: $($(this).attr('href')).position().top }, 'slow');
  38. return false;
  39. });
  40. $('.menu').hide();
  41. $('#responsive-menu').click(function(){
  42. $('.menu').slideToggle(300);
  43. });
  44. var startY= $('#top_wrapper').position().top + $('#top_wrapper').outerHeight();
  45. $('#logo').css('opacity','0');
  46. $('#navlist').css('height','55px');
  47. $(window).scroll(function () {
  48. if($(this).scrollTop() > startY ){
  49. $('#logo').css({'opacity':'1', 'transition': 'opacity 0.5s ease-in-out'});
  50. }else{
  51. $('#logo').css({'opacity':'0', 'transition': 'opacity 0.5s ease-in-out'});
  52. }
  53. });
  54. });
  55. </script>
  56. <link href='http://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
  57. <link type="text/css" rel="Stylesheet" href="css/especificos.css" />
  58. <title>Especificos Buenos Aires</title>
  59. </head>
  60. <body>
  61. <div id="overlay-contact">
  62. </div>
  63. <div class="basic-grey">
  64. <div id="exit"><h5>X</h5></div>
  65. <form action="" method="post" class="STYLE-NAME">
  66. <h5>Contacto</h5><br>
  67. Un equipo de profesionales está a su servicio para responder sus consultas
  68. <br><br>
  69. <label>
  70. <span>Nombre :</span>
  71. <input id="name" type="text" name="name" />
  72. </label>
  73. <br>
  74. <label>
  75. <span>Email :</span>
  76. <input id="email" type="email" name="email" />
  77. </label>
  78. <br>
  79. <label>
  80. <span>Mensaje :</span>
  81. <textarea id="message" name="message" ></textarea>
  82. </label>
  83. <br>
  84. <label>
  85. <span>&nbsp;</span>
  86. <input type="button" class="button" value="Send" />
  87. </label>
  88. </form>
  89. </div>
  90. <div id="top_wrapper">
  91. <div id="navbar">
  92. <ul id="navlist">
  93. <li><a href="#nosotros">nosotros</a></li>
  94. <li><a href="#productos">productos</a></li>
  95. <li><a href="#actividades">actividades</a></li>
  96. <li><a href="#top_wrapper"><img src="Images/icons/logo.png" id="logo" style="width: 51px; height: 50px;" /></a></li>
  97. <li><a href="#cursos">cursos</a></li>
  98. <li><a href="#distribuidoras">donde comprar</a></li>
  99. <li class="contact"><a href="#">contacto</a></li>
  100. </ul>
  101. <ul id="responsive">
  102. <li><a href="#nosotros"><img src="Images/icons/Us.png" /></a></li>
  103. <li><a href="#productos"><img src="Images/icons/productos.png" /></a></li>
  104. <li><a href="#actividades"><img src="Images/icons/actividades.png" /></a></li>
  105. <li><a href="#top_wrapper"><img src="Images/icons/logo.png" /></a></li>
  106. <li><a href="#cursos"><img src="Images/icons/cursos.png" /></a></li>
  107. <li><a href="#distribuidoras"><img src="Images/icons/dondecomprar.png" /></a></li>
  108. <li><a href="#contacto"><img src="Images/icons/contacto.png" class="contact" /></a></li>
  109. </ul>
  110. </div>
  111. </div>
  112. <div id="banner">
  113. <img src="Images/blanco.png"/><br />
  114. <br /><br/>
  115. <h2>Lujo, ciencia, tecnología y belleza al cuidado de tu piel</h2>
  116. </div>
  117. <div class="seccion" id="nosotros">
  118. <br /><br />
  119. <h1><span>NOSOTROS</span></h1>
  120. <p>
  121. La línea profesional ESPECIFICOS Buenos Aires, fue creada hace diez años por iniciativa de
  122. un matrimonio de químicos cosméticos, con más de 25 años de experiencia en la industria del
  123. cuidado de la piel. Quienes han unido su pasión por la cosmética y experiencia para desarrollar
  124. y perfeccionar una extensa gama de productos que podrán dar solución a las demandas y expectativas
  125. de sus clientas más exigentes.<br/><br/>Tratamientos pensados desde una profesional de la estética
  126. hacia sus colegas, consciente de la problemática a la que cada una de las profesionales se enfrenta
  127. cada día. Combinando un enfoque personalizado de tratamientos con métodos no invasivos, basados en
  128. sistemas específicos para cada instancia de la piel.<br/><br/> Tratando y compensando los distintos
  129. biotipos cutáneos en cada necesidad en particular, con sistemas de vanguardia, siempre basados en
  130. el profundo estudio de la piel. Hoy, la Metodología Específica, combinando un enfoque personalizado
  131. de tratamientos estéticos, ingredientes puros concentrados, vehículos de alto desarrollo,
  132. protocolos de procedimiento innovadores, como también estrictos controles de calidad internacional,
  133. goza de una incuestionable reputación de excelencia.<br/><br/>La ética, el apoyo profesional
  134. constante y la formulación constituyen los valores fundamentales de ESPECIFICOS Buenos Aires. </p>
  135. </div>
  136. <div class="seccion" id="productos">
  137. <h1><span>PRODUCTOS</span></h1>
  138. <p> <b>Cuidado específico para cada tipo de piel </b> <br/>
  139. El diagnóstico previo personalizado y seguimiento por una profesional formada en
  140. tratamientos ESPECIFICOS Buenos Aires es nuestra filosofía de excelencia, ética,
  141. seriedad y apoyo constante para un perfecto resultado.<br/><br/>
  142. Un producto ESPECIFICOS Buenos Aires responde a cuatro principios fundamentales:</p>
  143. <div class="descripciones">
  144. <div id="pureza" class="descripcion">
  145. <img src="Images/icons/pure.png"><br/><br/>
  146. Principios activos seleccionados de máximo grado de pureza.
  147. </div>
  148. <div id="ciencia" class="descripcion">
  149. <img src="Images/icons/cience.png"><br/><br/>
  150. Formulaciones únicas, concebidas en combinación con técnicas de aplicación
  151. sinérgica, que aportan resultados inmediatos y duraderos.
  152. </div>
  153. </div>
  154. <div class="descripciones">
  155. <div id="control" class="descripcion">
  156. <img src="Images/icons/control.png"><br/><br/>
  157. Estrictos controles bajo normas de calidad internacional GMP son garantía de los productos ESPECIFICOS Buenos Aires.
  158. </div>
  159. <div id="integridad" class="descripcion">
  160. <img src="Images/icons/integridad.png"><br/><br/>
  161. Vehículos especializados para preservar la integridad de las fórmulas y evitar procesos de sensibilización.
  162. </div>
  163. </div>
  164. </div>
  165. <div class="seccion" id="actividades">
  166. <br /><br />
  167. <h1><span>ACTIVIDADES</span></h1>
  168. <div class="descripciones">
  169. <div id="congresos" class="descripcion">
  170. <img src="Images/icons/congreso.png"><br/><br/>
  171. Congresos
  172. </div>
  173. <div id="noticias" class="descripcion">
  174. <img src="Images/icons/noticias.png"><br/><br/>
  175. Novedades
  176. </div>
  177. <div id="noticias" class="descripcion">
  178. <img src="Images/icons/notas.png"><br/><br/>
  179. Notas
  180. </div>
  181. </div>
  182. </div>
  183. <div class="seccion" id="cursos">
  184. <br /><br />
  185. <h1><span>CURSOS</span></h1>
  186. <div class="descripciones">
  187. <div id="congresos" class="descripcion">
  188. <img src="Images/icons/elearning.png"><br/><br/>
  189. Elearning
  190. </div>
  191. </div>
  192. </div>
  193. <div class="seccion" id="distribuidoras">
  194. <br /><br />
  195. <h1><span>DONDE COMPRAR</span></h1>
  196. <?php
  197. header('Content-Type: text/html; charset=UTF-8');
  198. include('db.php');
  199. $statement = $db->prepare("SELECT z.categoria, z.id
  200. FROM categorias_distribuidoras z");
  201. $statement->execute();
  202. $statement->store_result();
  203. $statement->bind_result($zona, $id);
  204. while( $statement->fetch() ){
  205. echo " <div class='tabla' id='$zona'>
  206. <h3>$zona</h3>
  207. <table class='capital-tabla'>
  208. <thead>
  209. <tr>
  210. <th>Provincia</th>
  211. <th>Localidad</th>
  212. <th>Distribuidor</th>
  213. <th>Domicilio</th>
  214. <th>Teléfono</th>
  215. </tr>
  216. </thead>
  217. <tbody>";
  218. $contenido = $db->prepare("SELECT d.nombre, d.telefono, d.direccion, d.localidad, d.provincia
  219. FROM distribuidoras d
  220. left join categorias_distribuidoras c
  221. on d.categoria = c.id
  222. where d.categoria = ?");
  223. $contenido->bind_param('s', $id);
  224. $contenido->execute();
  225. $contenido->store_result();
  226. $contenido->bind_result($nombre, $telefono, $direccion, $localidad, $provincia );
  227. while ( $contenido->fetch() ) {
  228. echo "
  229. <tr>
  230. <td>$provincia</td>
  231. <td>$localidad</td>
  232. <td>$nombre</td>
  233. <td>$direccion</td>
  234. <td>$telefono</td>
  235. </tr>";
  236. }
  237. echo "</tbody></table></div>";
  238. }
  239. ?>
  240. </div>
  241. <div id="footer-outer">
  242. <div id="footer-inner-left">
  243. <h5> MANTENERSE INFORMADO </h5> <br />
  244. Para recibir el newsletter de informaciones de ESPECIFICOS Buenos Aires,
  245. complete los campos “ correo electrónico” y haga clic en “inscribirse”.
  246. <br />
  247. <div id="input-footer">
  248. <input id="suscribe" type="text" />
  249. <input id="ok" type="submit" value="Inscribirse" />
  250. </div>
  251. </div>
  252. <div id="footer-inner-right">
  253. <h4> FACEBOOK </h4> <br />
  254. En esta página encontrará todo tipo de informaciones acerca de
  255. ESPECIFICOS Buenos Aires, consejos, exclusividades, notas, cursos,
  256. charlas de capacitación, novedades, eventos.
  257. <br/>
  258. Para acceder a la página, haga clic aquí.<br/><br/>
  259. <a href="https://es-la.facebook.com/EspecificosBuenosAires‎"><img src="Images/fb.png" style="width:50px"></a>
  260. </div>
  261. </div>
  262. </body>
  263. </html>