productos.php 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <?php header('Content-Type: text/html; charset=utf-8'); ?>
  2. <!DOCTYPE html>
  3. <head>
  4. <title>ESPECIFICOS Buenos Aires</title>
  5. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
  6. <link type="text/css" rel="Stylesheet" href="css/productos.css" />
  7. <link type="text/css" rel="Stylesheet" href="css/especificos.css" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9. <script src="js/jquery-2.1.3.min.js"></script>
  10. <script>
  11. jQuery.fn.center = function () {
  12. this.css("position","absolute");
  13. this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
  14. $(window).scrollTop()) + "px");
  15. this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
  16. $(window).scrollLeft()) + "px");
  17. return this;
  18. }
  19. $(document).ready(function() {
  20. curpag=0;
  21. var cat = 'Limpieza';
  22. $(".cambiarcat").click(function() {
  23. cat = $(this).attr('val');
  24. $(".cambiarcat.selected").removeClass('selected');
  25. $(this).addClass('selected');
  26. getData();
  27. });
  28. function getData() {
  29. $.get('listaprod.php', { cat : cat }).done(function(data) {
  30. $("#paginas_wrapper").html(data);
  31. curpag=0;
  32. $("#flechaatras").hide();
  33. $("#flechafwd").click(function() {
  34. if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
  35. return;
  36. $(".pagina").hide();
  37. curpag++;
  38. if ( ! $(".pagina[num='"+(curpag+1)+"']").length )
  39. $("#flechafwd").hide();
  40. $("#flechaatras").show();
  41. $(".pagina[num='"+curpag+"']").show();
  42. $("#paginas_list li").css("opacity",0.5);
  43. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  44. });
  45. $("#flechaatras").click(function() {
  46. $(".pagina[num='"+curpag+"']").hide();
  47. curpag--;
  48. if ( curpag < 0 )
  49. curpag=0;
  50. if(curpag==0)
  51. $("#flechaatras").hide();
  52. $("#flechafwd").show();
  53. $(".pagina[num='"+curpag+"']").show();
  54. $("#paginas_list li").css("opacity",0.5);
  55. $("#paginas_list li[num='"+curpag+"']").css("opacity",1);
  56. });
  57. $(".texto p").click(function(){
  58. expand = $(this).attr('prodid');
  59. getDesc();
  60. });
  61. });
  62. } //getData
  63. var expand="";
  64. getData();
  65. $(window).resize(function() {
  66. $("#descripcion_completa").center();
  67. });
  68. function getDesc(){
  69. $.get('vermas.php', {id : expand}).done(function(data){
  70. $("#descripcion_completa").html(data);
  71. $("#overlay-contact").css("display","block");
  72. $("#descripcion_completa").css("display", "block");
  73. $("#descripcion_completa").center();
  74. $("#overlay-contact").css("height",$(document).height()+"px");
  75. $('#overlay-contact').click(function(){
  76. $('#descripcion_completa, #overlay-contact').hide();
  77. });
  78. $('#exit').click(function(){
  79. $('#descripcion_completa, #overlay-contact').hide();
  80. });
  81. });
  82. }
  83. $("#paginas_list li").click(function() {
  84. $("#paginas_list li").css("opacity",0.5);
  85. $(this).css("opacity",1);
  86. $(".pagina").hide();
  87. $(".pagina[num='"+$(this).attr('num')+"']").show();
  88. curpag=$(this).attr('num');
  89. alert(curpag);
  90. });
  91. });
  92. </script>
  93. </head>
  94. <body>
  95. <div id="top_wrapper">
  96. <div id="navbar" font-family="champagne">
  97. <ul id="navlist">
  98. <li><a href="index.php#nosotros">nosotros</a></li>
  99. <li><a href="index.php#actividades">actividades</a></li>
  100. <li><a href="index.php#top_wrapper"><img src="Images/icons/logo.png" style="width: 51px; height: 50px;" /></a></li>
  101. <li><a href="index.php#cursos">cursos</a></li>
  102. <li><a href="index.php#distribuidoras">donde comprar</a></li>
  103. </ul>
  104. </div>
  105. </div>
  106. <div id="productos_descripcion" class="seccion">
  107. <h1><span>NUESTRO COMPROMISO</span></h1>
  108. <p>
  109. ESPECIFICOS Buenos Aires se compromete a garantizar productos de confianza,
  110. ultra-eficaces, tecnología de avanzada y control de calidad permanente bajo
  111. normas internacionales de bioseguridad. Texturas aterciopeladas, principios
  112. activos de gran pureza, vehículos especializados que conforman productos
  113. vanguardistas con delicadas fragancias.
  114. <br/><br/>
  115. <img src="Images/icons/compromiso.png">
  116. </p>
  117. </div>
  118. <div id="productos_wrapper">
  119. <br />
  120. <div id="productosbar">
  121. <ul id ="categorias">
  122. <li class="cambiarcat selected" val="limpieza"><h3>HIGIENE</h3></li>
  123. <li class="cambiarcat" val="mascaras"><h3>MÁSCARAS</h3></li>
  124. <li class="cambiarcat" val="acido hialuronico"><h3>ÁCIDO<br />HIALURÓNICO</h3></li>
  125. <li class="cambiarcat" val="peeling"><h3>PEELING</h3></li>
  126. <li class="cambiarcat" val="corporales"><h3>CORPORALES</h3></li>
  127. <li class="cambiarcat" val="hombres"><h3>HOMBRES</h3></li>
  128. <li class="cambiarcat" val="proteccion intensiva"><h3>PROTECCIÓN<br />INTENSIVA</h3></li>
  129. <li class="cambiarcat" val="monodosis"><h3>MONODOSIS</h3></li>
  130. <li class="cambiarcat" val="activos concentrados"><h3>ACTIVOS<br />CONCENTRADOS</h3></li>
  131. <li><a href='vademecum2015.pdf'><h3 class="grande" style="height:60px; color: white;">DESCARGAR<br />CATALOGO</h3></a></li>
  132. <li class="cambiarcat grande" val="tratamientos"><h3 style="height:140px; color: white;">TRATAMIENTOS<br />ESPECIFICOS</h3></li>
  133. </ul>
  134. </div>
  135. <div id ="paginas_wrapper">
  136. </div>
  137. <div id="overlay-contact">
  138. </div>
  139. <div id="descripcion_completa" >
  140. </div>
  141. </div>
  142. <?php include('piwik.html'); ?>
  143. </body>
  144. </html>