v2.0.4-beta

public/assets/scripts/main.js

@@ -9,31 +9,31 @@ let available_colors = {
   },
   blue: {
     name: 'azul',
-    rgb: 'rgb(0, 0, 255)'
+    rgb: 'rgb(0, 110, 230)'
   },
   petrol: {
-    name: 'petroleo',
-    rgb: 'rgb(0, 0, 150)'
+    name: 'azul_petroleo',
+    rgb: 'rgb(0, 80, 120)'
   },
   cyan: {
     name: 'celeste',
-    rgb: 'rgb(150, 150, 255)'
+    rgb: 'rgb(80, 200, 255)'
   },
   green: {
     name: 'verde',
-    rgb: 'rgb(0, 255, 0)'
+    rgb: 'rgb(10, 200, 100)'
   },
   yellow: {
     name: 'amarillo',
-    rgb: 'rgb(255, 255, 0)'
+    rgb: 'rgb(255, 240, 70)'
   },
   orange: {
     name: 'naranjo',
-    rgb: 'rgb(255, 130, 0)'
+    rgb: 'rgb(255, 130, 70)'
   },
   red: {
     name: 'rojo',
-    rgb: 'rgb(255, 0, 0)'
+    rgb: 'rgb(255, 20, 50)'
   }
 }
 
@@ -115,7 +115,7 @@ class Colors {
     this.input = elem.find('input[name="color"]')
     this.changing = null
     if (changing) {
-      this.changing = elem.parent().parent().find('.column2 img')
+      this.changing = elem.parent().parent().find('.column img')
     }
     this.setup()
   }
@@ -143,7 +143,7 @@ class Colors {
     })
     this.elem.find('.' + color + '.circle').addClass('selected')
     if (this.changing != null) {
-      this.changing.attr('src', './assets/images/' + this.picked + '.png')
+      this.changing.attr('src', './assets/images/fotos/' + this.picked + '/left.jpg')
     }
   }
 }
@@ -198,7 +198,8 @@ let dimensiones = {
   setup: function() {
     this.elem.find('.colores .circle').each((i, el) => {
       let color = $(el).attr('class').split(' ')[0]
-      if (color == 'petrol' || color == 'cyan') {
+      let cssColor = $(el).css('background-color')
+      if (cssColor != this.colors[color]['rgb']) {
         $(el).css('background-color', this.colors[color]['rgb'])
       }
       $(el).click((e) => {
@@ -412,15 +413,49 @@ let testimonios = {
   }
 }
 
+let sticky = {
+  elem: $('#columna_sticky'),
+  setup: function() {
+    var h = 0
+    $('section.columna').each((i, el) => {
+      h += $(el).outerHeight(true)
+    })
+    this.elem.height(h)
+    this.elem.find('#column').height(h)
+
+    $('#columna_sticky .sticky').sticky({
+      context: '#column'
+    })
+  }
+}
+
+let image = {
+  elem: $('.agrandable'),
+  modal: $('#images.modal'),
+  setup: function() {
+    this.modal.modal()
+    this.modal.find('.close.icon').click((e) => {
+      this.modal.modal('hide')
+      this.modal.find('.image').html('')
+    })
+    let p = this
+    this.elem.click(function(e) {
+      let img = $(this).find('img').attr('src')
+      p.modal.find('.image').html('')
+      p.modal.find('.image').append(
+        $('<img />').attr('src', img)
+      )
+      p.modal.modal('show')
+    })
+  }
+}
+
 $(document).ready(function() {
-  $('#menu.sticky').sticky()
-  $('.column2 .sticky').sticky({
-    context: '#column'
-  })
   $('#subir').sticky()
 
   $('.shopping.cart').innerText = 0
 
+  sticky.setup()
   ventajas.setup()
   dimensiones.setup()
   let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
@@ -430,6 +465,7 @@ $(document).ready(function() {
   let cotiza_color = new Colors($('#corporativos .colores'))
   cotiza_form.setup()
   conversemos_form.setup()
+  image.setup()
 
   window.mobileCheck = function() {
     let check = false;

public/assets/styles/main.css

@@ -57,15 +57,6 @@ html {
   background-blend-mode: multiply;
   color: white;
 }
-#header .container #menu {
-  background: none !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-#header .container #menu .right.menu .item .shopping.cart .cantidad {
-  position: relative;
-  color: white;
-}
 #header .container .segment {
   margin: 0 !important;
 }
@@ -209,6 +200,71 @@ html {
   height: 5rem;
 }
 
+#menu {
+  z-index: 100;
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+#menu .right.menu .item .shopping.cart .cantidad {
+  position: relative;
+  color: white;
+}
+
+#images.modal {
+  text-align: center;
+}
+#images.modal .header {
+  text-align: right;
+}
+#images.modal .content {
+  text-align: center;
+}
+#images.modal .content img {
+  margin: auto;
+}
+
+.white.circle {
+  border: thin solid black;
+  background-color: white;
+}
+
+.black.circle {
+  background-color: black;
+}
+
+.blue.circle {
+  background-color: #006ee6;
+}
+
+.petrol.circle {
+  background-color: #005078;
+}
+
+.cyan.circle {
+  background-color: #50c8ff;
+}
+
+.green.circle {
+  background-color: #0ac864;
+}
+
+.yellow.circle {
+  background-color: #fff046;
+}
+
+.orange.circle {
+  background-color: #ff8246;
+}
+
+.red.circle {
+  background-color: #ff1432;
+}
+
+.column:not(.row) {
+  padding-top: 0 !important;
+}
+
 @font-face {
   font-family: "icomoon";
   src: url("../fonts/icomoon.eotiedbpz");
@@ -287,28 +343,6 @@ i.font-icon.chile:before {
   #dimensiones .colores .text {
     margin-right: 0.28125rem;
   }
-  #dimensiones .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #dimensiones .colores .black {
-    background-color: black;
-  }
-  #dimensiones .colores .blue {
-    background-color: blue;
-  }
-  #dimensiones .colores .green {
-    background-color: lime;
-  }
-  #dimensiones .colores .yellow {
-    background-color: yellow;
-  }
-  #dimensiones .colores .orange {
-    background-color: #ff8200;
-  }
-  #dimensiones .colores .red {
-    background-color: red;
-  }
   #dimensiones .colores .circle {
     display: inline-block;
     width: 1.40625rem;
@@ -615,28 +649,6 @@ i.font-icon.chile:before {
   #content > .column2 .sticky .row:first-child .column1 .colores .text {
     margin-right: 0.28125rem;
   }
-  #content > .column2 .sticky .row:first-child .column1 .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .black {
-    background-color: black;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .blue {
-    background-color: blue;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .green {
-    background-color: lime;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .yellow {
-    background-color: yellow;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .orange {
-    background-color: #ff8200;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .red {
-    background-color: red;
-  }
   #content > .column2 .sticky .row:first-child .column1 .colores .circle {
     display: inline-block;
     width: 1.40625rem;
@@ -762,28 +774,6 @@ i.font-icon.chile:before {
   #content #corporativos .column2 form .colores .text {
     margin-right: 0.28125rem;
   }
-  #content #corporativos .column2 form .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #content #corporativos .column2 form .colores .black {
-    background-color: black;
-  }
-  #content #corporativos .column2 form .colores .blue {
-    background-color: blue;
-  }
-  #content #corporativos .column2 form .colores .green {
-    background-color: lime;
-  }
-  #content #corporativos .column2 form .colores .yellow {
-    background-color: yellow;
-  }
-  #content #corporativos .column2 form .colores .orange {
-    background-color: #ff8200;
-  }
-  #content #corporativos .column2 form .colores .red {
-    background-color: red;
-  }
   #content #corporativos .column2 form .colores .circle {
     display: inline-block;
     width: 1.40625rem;
@@ -1025,22 +1015,13 @@ i.font-icon.chile:before {
     background-size: 160%;
     background-position: bottom -2.5rem center;
   }
-  #header .container #menu i {
-    font-size: 2rem;
-  }
-  #header .container #menu .right.menu .item .shopping.cart .cantidad {
-    font-size: 1rem;
-    font-family: Roboto, sans;
-    top: -1.75rem;
-    left: 0.2rem;
-  }
 
   #descripcion {
-    height: 25rem;
     background-position: left 7rem;
     background-size: 100% 6.875rem;
     background-repeat: no-repeat;
     padding-top: 6.25rem;
+    margin-bottom: 1.5625rem;
   }
   #descripcion .images .image {
     max-width: 33%;
@@ -1072,28 +1053,6 @@ i.font-icon.chile:before {
   #dimensiones .colores .text {
     margin-right: 0.1875rem;
   }
-  #dimensiones .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #dimensiones .colores .black {
-    background-color: black;
-  }
-  #dimensiones .colores .blue {
-    background-color: blue;
-  }
-  #dimensiones .colores .green {
-    background-color: lime;
-  }
-  #dimensiones .colores .yellow {
-    background-color: yellow;
-  }
-  #dimensiones .colores .orange {
-    background-color: #ff8200;
-  }
-  #dimensiones .colores .red {
-    background-color: red;
-  }
   #dimensiones .colores .circle {
     display: inline-block;
     width: 1.25rem;
@@ -1121,28 +1080,6 @@ i.font-icon.chile:before {
   #corporativos form .colores .text {
     margin-right: 0.1875rem;
   }
-  #corporativos form .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #corporativos form .colores .black {
-    background-color: black;
-  }
-  #corporativos form .colores .blue {
-    background-color: blue;
-  }
-  #corporativos form .colores .green {
-    background-color: lime;
-  }
-  #corporativos form .colores .yellow {
-    background-color: yellow;
-  }
-  #corporativos form .colores .orange {
-    background-color: #ff8200;
-  }
-  #corporativos form .colores .red {
-    background-color: red;
-  }
   #corporativos form .colores .circle {
     display: inline-block;
     width: 1.25rem;
@@ -1223,6 +1160,96 @@ i.font-icon.chile:before {
     color: white;
   }
 
+  #columna_sticky {
+    position: absolute;
+    top: 31.25rem;
+    height: 100%;
+    width: 100%;
+  }
+  #columna_sticky .left.column {
+    pointer-events: none;
+  }
+  #columna_sticky .sticky {
+    background-color: rgba(255, 255, 255, 0.5);
+    z-index: 10;
+    margin-top: 2.5rem;
+    padding-top: 3.375rem;
+  }
+  #columna_sticky .sticky .row {
+    padding-top: 0 !important;
+  }
+  #columna_sticky .sticky .column:first-child {
+    vertical-align: bottom;
+    padding-top: 1.25rem;
+    font-size: 1.1666666667rem;
+  }
+  #columna_sticky .sticky .column:first-child .titulo {
+    font-size: 2.0833333333rem;
+  }
+  #columna_sticky .sticky .column:first-child .precio {
+    font-size: 1.3333333333rem;
+  }
+  #columna_sticky .sticky .column:first-child .colores {
+    vertical-align: center;
+  }
+  #columna_sticky .sticky .column:first-child .colores .text {
+    margin-right: 0.1875rem;
+  }
+  #columna_sticky .sticky .column:first-child .colores .circle {
+    display: inline-block;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 8000px;
+    margin: auto 0.0625rem;
+    cursor: pointer;
+  }
+  #columna_sticky .sticky .column:first-child .colores .circle.selected {
+    width: 1.375rem;
+    height: 1.375rem;
+    cursor: default;
+  }
+  #columna_sticky .sticky .column:first-child .input.cantidad {
+    width: 4.5rem;
+    border: thin solid black;
+    text-align: center;
+    padding: 0.5rem 0.05rem;
+    font-size: 0.8333333333rem;
+  }
+  #columna_sticky .sticky .column:first-child .input.cantidad button {
+    background: none;
+    border: none;
+    width: 1rem;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    font-weight: bold;
+  }
+  #columna_sticky .sticky .column:first-child .input.cantidad input {
+    width: 2rem;
+    background: none;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    text-align: center;
+  }
+  #columna_sticky .sticky .column:first-child .input.cantidad .button {
+    border-radius: 0 !important;
+    width: 100%;
+  }
+  #columna_sticky .sticky .column:first-child .button {
+    width: 100%;
+  }
+
+  #menu i {
+    font-size: 2rem;
+  }
+  #menu .right.menu .item .shopping.cart .cantidad {
+    font-size: 1rem;
+    font-family: Roboto, sans;
+    top: -1.75rem;
+    left: 0.2rem;
+  }
+
   .left.column {
     width: 67% !important;
     padding-left: 0.3125rem !important;
@@ -1241,292 +1268,4 @@ i.font-icon.chile:before {
   body {
     color: #333333;
   }
-
-  #content {
-    max-width: 67.5rem !important;
-    height: 217.5rem;
-    position: relative;
-    top: -217.5rem;
-  }
-  #content > .column {
-    display: inline-block;
-    float: left;
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
-  }
-  #content > .column::after {
-    clear: both;
-  }
-  #content > .column1 {
-    width: 67%;
-  }
-  #content > .column2 {
-    width: 33%;
-    height: 101.875rem;
-  }
-  #content > .column2 .sticky {
-    height: 16.5625rem;
-    width: 19.375rem;
-    margin: auto;
-  }
-  #content > .column2 .sticky .row:first-child {
-    height: 10.625rem;
-    margin-top: 5rem;
-  }
-  #content > .column2 .sticky .row:first-child .column {
-    display: inline-block;
-    float: left;
-  }
-  #content > .column2 .sticky .row:first-child .column::after {
-    clear: both;
-  }
-  #content > .column2 .sticky .row:first-child .column1 {
-    vertical-align: bottom;
-    padding-top: 1.25rem;
-    width: 12.9166666667rem;
-    font-size: 1.1666666667rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .linea {
-    margin-bottom: 0.625rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .titulo {
-    font-size: 2.0833333333rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .precio {
-    font-size: 1.3333333333rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores {
-    vertical-align: center;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .text {
-    margin-right: 0.1875rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .white {
-    border: thin solid black;
-    background-color: white;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .black {
-    background-color: black;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .blue {
-    background-color: blue;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .green {
-    background-color: lime;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .yellow {
-    background-color: yellow;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .orange {
-    background-color: #ff8200;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .red {
-    background-color: red;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .circle {
-    display: inline-block;
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 8000px;
-    margin: auto 0.0625rem;
-    cursor: pointer;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
-    width: 1.375rem;
-    height: 1.375rem;
-    cursor: default;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .input {
-    width: 4.5rem;
-    border: thin solid black;
-    text-align: center;
-    padding: 0.5rem 0.05rem;
-    font-size: 0.8333333333rem;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .input button {
-    background: none;
-    border: none;
-    width: 1rem;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    font-weight: bold;
-  }
-  #content > .column2 .sticky .row:first-child .column1 .input input {
-    width: 2rem;
-    background: none;
-    margin: 0;
-    border: 0;
-    padding: 0;
-    text-align: center;
-  }
-  #content > .column2 .sticky .row:first-child .column2 {
-    width: 6.4583333333rem;
-  }
-  #content > .column2 .sticky .row:first-child .column2 img {
-    width: 6.875rem;
-    height: 10rem;
-  }
-  #content > .column2 .sticky .row:last-child .button {
-    border-radius: 0 !important;
-    width: 100%;
-  }
-  #content #felices {
-    height: 21.875rem;
-    padding: 0 1rem !important;
-    padding-top: 3.75rem !important;
-  }
-  #content #felices .header {
-    font-size: 1.8333333333rem;
-  }
-  #content #felices .testimonios {
-    margin-top: 1.5625rem;
-    display: flex;
-    justify-content: space-between;
-    text-align: center;
-  }
-  #content #felices .testimonios .testimonio {
-    height: 5rem;
-    color: #666667;
-    margin-top: 1.25rem;
-    width: 30%;
-    text-align: center;
-  }
-  #content #felices .nav {
-    display: block;
-    text-align: center;
-    color: #666667;
-  }
-  #content #formulario {
-    height: 30rem;
-    padding: 0 1rem !important;
-  }
-  #content #formulario .whatsapp-link {
-    color: inherit;
-  }
-  #content #formulario > .column {
-    float: left;
-    padding-left: 1rem !important;
-    padding-right: 1rem !important;
-  }
-  #content #formulario > .column::after {
-    clear: both;
-  }
-  #content #formulario > .flotante {
-    position: absolute;
-    top: 11.4375rem;
-    margin: auto;
-    left: 40%;
-    width: 13.5rem;
-    text-align: center;
-  }
-  #content #formulario > .flotante > .content {
-    width: 8.125rem;
-    margin: auto;
-    left: -50%;
-  }
-  #content #formulario > .flotante > .content .item {
-    display: block;
-    padding: 0.3125rem 0;
-  }
-  #content #formulario > .flotante > .content div.whatsapp {
-    height: 1.875rem;
-    background-color: #1a9947;
-    color: #fff;
-    font-size: 0.625rem;
-  }
-  #content #formulario > .flotante > .content div.whatsapp > i {
-    position: relative;
-    font-size: 1.3333333333rem;
-    top: 0.1875rem;
-  }
-  #content #formulario > .flotante > .content .rrss {
-    display: flex;
-    justify-content: space-around;
-    font-size: 1.25rem;
-  }
-  #content #formulario > .flotante > .content .rrss i.inverted.grey {
-    color: white !important;
-  }
-  #content #formulario > .column1 {
-    width: 67%;
-    margin-top: 1.6875rem;
-  }
-  #content #formulario > .column1 > img {
-    width: 33.75rem;
-    height: 21.875rem;
-    float: left;
-  }
-  #content #formulario > .column2 {
-    width: 33%;
-  }
-  #content #formulario > .column2 .header {
-    margin-top: 1.25rem;
-    text-align: center;
-    font-size: 1.8333333333rem;
-  }
-  #content #formulario > .column2 .header .whatsapp-link {
-    display: inline-block;
-    width: 1.5625rem;
-    height: 1.5625rem;
-    font-size: 2.0833333333rem;
-  }
-  #content #formulario > .column2 .paragraph {
-    padding-top: 1rem;
-    padding-bottom: 1.5625rem;
-    justify-content: center;
-  }
-  #content #formulario > .column2 form input {
-    border-radius: 0 !important;
-    height: 1.125rem;
-    margin-bottom: 0.5625rem;
-    background-color: rgba(255, 255, 255, 0.5);
-    font-size: 0.8333333333rem;
-  }
-  #content #formulario > .column2 form input::placeholder {
-    color: #333333;
-  }
-  #content #formulario > .column2 form textarea {
-    border-radius: 0 !important;
-    height: 4.5rem;
-    margin-bottom: 1.5625rem;
-    background-color: rgba(255, 255, 255, 0.5);
-    font-size: 0.8333333333rem;
-  }
-  #content #formulario > .column2 form textarea::placeholder {
-    color: #333333;
-  }
-  #content #formulario > .column2 form .button {
-    width: 100%;
-    border-radius: 0 !important;
-    background-color: white;
-    color: #333333;
-  }
-  #content section {
-    background: none;
-  }
-  #content section.segment > .container {
-    height: 100%;
-  }
-  #content section.segment > .container > .column1 {
-    display: inline-block;
-    width: 67rem;
-  }
-  #content section.segment > .container > .column2 {
-    display: inline-block;
-    width: 33rem;
-  }
-  #content .simple.segment {
-    border: none !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-  #content .simple.segment > .ui.grid {
-    height: 100%;
-  }
-  #content .fondo-blanco {
-    background-color: rgba(255, 255, 255, 0.5);
-  }
 }