Falta responsive y boton para subir

2021-01-04 01:06:50 -03:00
parent a212e7567e
commit a434feb0f0
13 changed files with 304 additions and 31 deletions
--- a/assets/index.html
+++ b/assets/index.html
@ -8,7 +8,8 @@
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

-  <link rel="stylesheet" href="./assets/styles/main.min.css" />
+  <link rel="icon" type="image/png" href="./assets/images/favicon.png" />
+  <link rel="stylesheet" type="text/css" href="./assets/styles/main.min.css" />
 </head>
 <body>
  <div id="backgrounds">
@ -124,7 +125,9 @@
      </section>

      <section id="construido" class="ui simple segment">
-        CONSTRUIDOS EN IMPRESI&Oacute;N 3D
+        <div class="header">
+          CONSTRUIDOS EN IMPRESI&Oacute;N 3D
+        </div>
      </section>
    </div>
    <div class="column2 column fondo-blanco">
@ -274,7 +277,15 @@
    </section>

    <section id="felices" class="ui simple segment">
-      CLIENTES FELICES
+      <div class="header">
+        CLIENTES FELICES
+      </div>
+      <div class="testimonios">
+        <div class="testimonio"></div>
+        <div class="testimonio"></div>
+        <div class="testimonio"></div>
+      </div>
+      <div class="nav"></div>
    </section>

    <section id="formulario" class="ui simple segment">
@ -340,6 +351,17 @@
    </section>
  </div>

+  <div id="subir" class="ui fixed bottom segment">
+    <div class="ui container">
+      <a href="#backgrounds">
+        <i class="icons">
+          <i class="large circle outline icon"></i>
+          <i class="arrow up icon"></i>
+        </i>
+      </a>
+    </div>
+  </div>
+
  <!-- Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js" integrity="sha512-1Nyd5H4Aad+OyvVfUOkO/jWPCrEvYIsQENdnVXt1+Jjc4NoJw28nyRdrpOCyFH4uvR3JmH/5WmfX1MJk2ZlhgQ==" crossorigin="anonymous"></script>
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -1,10 +1,38 @@
-function resize() {
-  let p = 400 / 944
-  $('.container').each(function(i, el) {
-    let height = $(this).height
-    let width = $(this).width
+var proportionals = []
+var widths = []
+var heights = []
+var changeables = []
+function register_resizeables() {
+  proportionals.push($('img'))
+  //widths.push()
+  heights.push($('#backgrounds div'))
+  changeables.push($('.sticky'))
+}

-    $(this).width = height * p;
+const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
+
+function mod_height(elem, p) {
+  elem.height = (elem.height * p)
+}
+function mod_width(elem, p) {
+  elem.width = (elem.width * p)
+}
+function mod_dim(elem, p) {
+  mod_width(elem, p)
+  mod_height(elem, p)
+}
+function resize() {
+  let p = 400 / 1080
+
+  $.each(proportionals, (i, el) => {
+    mod_dim(el, p)
+  })
+  $.each(widths, (i, el) => {
+    mod_width(el, p)
+  })
+  $.each(heights, (i, el) => {
+    mod_height(el, p)
  })
 }

@ -216,11 +244,68 @@ let conversemos_form = {
  }
 }

+let testimonios = {
+  testimonios: [
+    "Este soporte que compré en @Stand-cl me cambió la vida, me sirve para el teléfono y el ipad, y ya no tengo que andar acomodando los aparatos en cualquier parte para las videollamadas",
+    "Siiii todo mi gusto.. me encantó lo completo que es. Gracias",
+    "Está super cool se ve de buena calidad",
+    "Llego el mío, y es excelente, estoy feliz con mi compra",
+    "Hola!!Me llegó el pedido, Muchas gracias muy bello. Me salvaste la vida",
+    "Perfecto el producto, funciona impecable, muchas gracias",
+    "Están bacanes! muchísimas gracias. Le regalé a mis viejos y lo aman",
+    "Hola! Quería decirte que me encantaron los soportes, Muy útiles!",
+    "Compré 3 y olvidé decirte que los encontré geniales! Me encantaron",
+    "Diseño simple y funcional, minimalista y excelente precio, despacho súper Rápido.. gracias!"
+  ],
+  elem: $('#felices .testimonios'),
+  page: 0,
+  setup: function() {
+    this.draw()
+  },
+  draw: function() {
+    var n = this.page * 3
+    this.elem.find('.testimonio').each((i, el) => {
+      if (n >= this.testimonios.length) {
+        $(el).html('')
+        return
+      }
+      $(el).html(this.testimonios[n])
+      n += 1
+    })
+    this.draw_nav()
+  },
+  draw_nav: function() {
+    let N = Math.ceil(this.testimonios.length / 3)
+    let k = this.page
+    let nav = this.elem.parent().find('.nav')
+    let tests = this
+    nav.html('')
+    for (var i = 0; i < N; i ++) {
+      var circle = $('<i></i>').attr('class', 'small circle outline icon').css('cursor', 'pointer').attr('data-page', i)
+      if (i == k) {
+        circle.removeClass('outline')
+      }
+      circle.click(function(e) {
+        tests.page = parseInt($(this).attr('data-page'))
+        tests.draw()
+      })
+      nav.append(circle)
+    }
+  }
+}
+
 $(document).ready(function() {
+  register_resizeables()
+
+  if (vw < 1080) {
+    resize()
+  }
+
  $('.menu.sticky').sticky()
  $('.column2 .sticky').sticky({
    context: '#column'
  })
+  $('#subir').sticky()

  $('.shopping.cart').innerText = 0

@ -233,4 +318,5 @@ $(document).ready(function() {
  let cotiza_color = new Colors($('#corporativos .colores'))
  cotiza_form.setup()
  conversemos_form.setup()
+  testimonios.setup()
 })
--- a/assets/sass/_main-phone.scss
+++ b/assets/sass/_main-phone.scss
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -85,6 +85,7 @@ $heights: (
    background-size: rem(1600);
    background-position: top center;
    background-color: rgba(0, 0, 0, .4);
+    background-blend-mode: multiply;
  }
  .seccion1 {
    height: (map.get($heights, "seccion1"))+rem;
@ -118,8 +119,7 @@ $heights: (
  .construido {
    height: (map.get($heights, "construido"))+rem;

-    //background-image: url('../images/fondo4.png');
-    background-color: rgb(100, 200, 255);
+    background-image: url('../images/fondo4.jpg');
  }
  .corporativos {
    height: (map.get($heights, "corporativos"))+rem;
@ -130,8 +130,8 @@ $heights: (
    height: (map.get($heights, "felices"))+rem;

    background-image: linear-gradient($gris, $gris);
-    background-position: left 3rem;
-    background-size: 100% 5rem;
+    background-position: left rem(115);
+    background-size: 100% rem(118);
    background-repeat: no-repeat;
  }
  .formulario {
@ -353,9 +353,12 @@ body {

    #construido {
      height: (map.get($heights, "construido"))+rem;
+      padding-top: rem(23) !important;

-      .column2 {
-        height: 100%;
+      .header {
+        font-size: font_size(22);
+        padding: rem(10) rem(43);
+        background-color: rgba(255, 255, 255, .6);
      }
    }
  }
@ -597,6 +600,31 @@ body {
    height: (map.get($heights, "felices"))+rem;

    padding: 0 1rem !important;
+    padding-top: rem(60) !important;
+
+    .header {
+      //margin-top: rem(60);
+      font-size: font_size(22);
+    }
+    .testimonios {
+      margin-top: rem(25);
+      display: flex;
+      justify-content: space-between;
+      text-align: center;
+
+      .testimonio {
+        height: rem(80);
+        color: #666667;
+        margin-top: rem(20);
+        width: percentage(30/100);
+        text-align: center;
+      }
+    }
+    .nav {
+      display: block;
+      text-align: center;
+      color: #666667;
+    }
  }

  #formulario {
@ -751,3 +779,17 @@ body {
    background-color: rgba(255, 255, 255, .5);
  }
 }
+
+#subir {
+  width: 100%;
+
+  .container {
+    text-align: right;
+    padding: 0 1rem !important;
+    
+    i.icons {
+      cursor: pointer;
+    }
+  }
+
+}