v2.0.0-beta

public/assets/scripts/main.js

@@ -1,3 +1,42 @@
+let available_colors = {
+  white: {
+    name: 'blanco',
+    rgb: 'rgb(255, 255, 255)'
+  },
+  black: {
+    name: 'negro',
+    rgb: 'rgb(0, 0, 0)'
+  },
+  blue: {
+    name: 'azul',
+    rgb: 'rgb(0, 0, 255)'
+  },
+  petrol: {
+    name: 'petroleo',
+    rgb: 'rgb(0, 0, 150)'
+  },
+  cyan: {
+    name: 'celeste',
+    rgb: 'rgb(150, 150, 255)'
+  },
+  green: {
+    name: 'verde',
+    rgb: 'rgb(0, 255, 0)'
+  },
+  yellow: {
+    name: 'amarillo',
+    rgb: 'rgb(255, 255, 0)'
+  },
+  orange: {
+    name: 'naranjo',
+    rgb: 'rgb(255, 130, 0)'
+  },
+  red: {
+    name: 'rojo',
+    rgb: 'rgb(255, 0, 0)'
+  }
+}
+
 class Amount {
   constructor(elem) {
     this.elem = elem
@@ -113,6 +152,47 @@ class Colors {
   }
 }
 
+let ventajas = {
+  elem: $('#ventajas'),
+  setup: function() {
+    let h = this.elem.css('height')
+    let w = this.elem.css('width')
+
+    this.elem.find('.diagonal').css('borderBottomWidth', h)
+    this.elem.find('.diagonal').css('borderRightWidth', w)
+  }
+}
+let dimensiones = {
+  colors: available_colors,
+  picked: 'blue',
+  elem: $('#dimensiones'),
+  setup: function() {
+    this.elem.find('.colores .circle').each((i, el) => {
+      let color = $(el).attr('class').split(' ')[0]
+      if (color == 'petrol' || color == 'cyan') {
+        $(el).css('background-color', this.colors[color]['rgb'])
+      }
+      $(el).click((e) => {
+        this.change_color(color)
+      })
+    })
+  },
+  change_color: function(color) {
+    this.picked = this.colors[color]['name']
+    this.elem.find('.colores .circle').each((i, el) => {
+      $(el).removeClass('selected')
+    })
+    this.elem.find('.colores .' + color + '.circle').addClass('selected')
+    this.change_images(this.colors[color]['name'])
+  },
+  change_images: function(color) {
+    this.elem.find('.fotos img').each((i, el) => {
+      let pos = $(el).attr('class')
+      $(el).attr('src', './assets/images/fotos/' + color + '/' + pos + '.jpg')
+    })
+  }
+}
+
 let smtp = {
   SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
   From: 'contacto@3dstand.cl'
@@ -252,7 +332,7 @@ let testimonios = {
 
 $(document).ready(function() {
 
-  $('.menu.sticky').sticky()
+  $('#menu.sticky').sticky()
   $('.column2 .sticky').sticky({
     context: '#column'
   })
@@ -260,6 +340,8 @@ $(document).ready(function() {
 
   $('.shopping.cart').innerText = 0
 
+  ventajas.setup()
+  dimensiones.setup()
   let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
   let sticky_color = new Colors($('.sticky .colores'), true)
   sticky_form.setup()

public/assets/styles/main.css

@@ -45,7 +45,182 @@ input {
   border-radius: 0;
 }
 
+html {
+  font-family: Roboto, sans;
+}
+
+#header {
+  background-image: url("../images/banner.jpg");
+  background-repeat: no-repeat;
+  background-color: rgba(0, 0, 0, 0.4);
+  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;
+}
+#header .container .segment #logo img {
+  width: 50%;
+}
+
+#descripcion {
+  background-image: linear-gradient(#cccccc, #cccccc);
+}
+#descripcion .images {
+  text-align: center;
+}
+
+#ventajas {
+  position: relative;
+  background-image: url("../images/tripode.png");
+}
+#ventajas .diagonal {
+  position: absolute;
+  background-blend-mode: color;
+}
+#ventajas .gallery {
+  position: relative;
+  text-align: center;
+}
+#ventajas .gallery .image {
+  max-height: inherit;
+}
+#ventajas .gallery .image img {
+  max-height: inherit;
+  margin: auto;
+}
+#ventajas .gallery .nav {
+  position: absolute;
+}
+#ventajas .gallery .nav.left {
+  top: 50%;
+  left: 0;
+}
+#ventajas .gallery .nav.right {
+  top: 50%;
+  right: 0;
+}
+#ventajas .gallery::after {
+  clear: both;
+}
+
+#dimensiones {
+  position: relative;
+  background-image: url("../images/tripode.png");
+}
+#dimensiones .fondo-gris {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(204, 204, 204, 0.5);
+}
+#dimensiones .left.column > .grid > .column:first-child {
+  min-width: 33% !important;
+}
+#dimensiones .left.column > .grid > .column:last-child {
+  min-width: 67% !important;
+}
+
 @media screen and (max-width: 800px) {
+  #header {
+    height: 25rem;
+    background-size: 160%;
+    background-position: bottom -0.9375rem center;
+  }
+  #header .container #menu {
+    font-size: 1.3333333333rem;
+  }
+  #header .container #menu .right.menu .item .shopping.cart .cantidad {
+    top: -1.875rem;
+    left: 0.15rem;
+    font-size: 0.6666666667rem;
+  }
+  #header .container .segment #logo img {
+    max-width: 56.25rem;
+  }
+
+  #descripcion {
+    padding-bottom: 0.46875rem;
+  }
+  #descripcion .paragraph {
+    padding-top: 1.6875rem;
+    line-height: 1.3125rem;
+    text-align: justify;
+  }
+  #descripcion .paragraph .header {
+    margin-bottom: 0.5625rem;
+    font-size: 1.5rem;
+  }
+
+  #ventajas .diagonal {
+    border-bottom: 100% solid rgba(204, 204, 204, 0.5);
+    border-right: 100% solid transparent;
+  }
+  #ventajas .gallery {
+    max-height: 25.5rem;
+  }
+
+  #dimensiones .header {
+    font-size: 1.8333333333rem;
+    padding-top: 5.0625rem;
+    padding-bottom: 2.34375rem;
+  }
+  #dimensiones .colores {
+    vertical-align: center;
+  }
+  #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;
+    height: 1.40625rem;
+    border-radius: 8000px;
+    margin: auto 0.09375rem;
+    cursor: pointer;
+  }
+  #dimensiones .colores .circle.selected {
+    width: 1.59375rem;
+    height: 1.59375rem;
+    cursor: default;
+  }
+
+  .left.column {
+    width: 75%;
+    padding-left: 0.46875rem !important;
+  }
+
   #backgrounds .cabezal {
     height: 25rem;
     background-image: url("../images/banner.jpg");
@@ -56,23 +231,23 @@ input {
     background-blend-mode: multiply;
   }
   #backgrounds .seccion1 {
-    height: 25rem;
+    height: rem;
     background-image: linear-gradient(#cccccc, #cccccc);
     background-position: left 10.5rem;
     background-size: 100% 12rem;
     background-repeat: no-repeat;
   }
   #backgrounds .seccion2 {
-    height: 27.5rem;
-    background-image: url("../images/fondo23.png");
+    height: rem;
+    background-image: url("../images/tripode.png");
   }
   #backgrounds .seccion2 .diagonal {
-    border-bottom: 27.5rem solid rgba(204, 204, 204, 0.5);
+    border-bottom: rem solid rgba(204, 204, 204, 0.5);
     border-right: 178.125rem solid transparent;
   }
   #backgrounds .dimensiones {
     height: 27.5rem;
-    background-image: url("../images/fondo23.png");
+    background-image: url("../images/tripode.png");
   }
   #backgrounds .dimensiones .fondo-gris {
     width: 100%;
@@ -81,11 +256,11 @@ input {
   }
   #backgrounds .construido {
     height: 21.875rem;
-    background-image: url("../images/fondo4.jpg");
+    background-image: url("../images/construido.jpg");
   }
   #backgrounds .corporativos {
     height: 32.5rem;
-    background-image: url("../images/fondo5.png");
+    background-image: url("../images/corporativo.png");
   }
   #backgrounds .testimonios {
     height: 21.875rem;
@@ -183,7 +358,7 @@ input {
     width: 90%;
   }
   #content > .column1 #seccion1 {
-    height: 25rem;
+    height: rem;
     width: 100%;
   }
   #content > .column1 #seccion1 .image-container {
@@ -205,7 +380,7 @@ input {
     font-size: 2.0625rem;
   }
   #content > .column1 #seccion2 {
-    height: 27.5rem;
+    height: rem;
   }
   #content > .column1 #seccion2 > .column {
     display: inline-block;
@@ -349,15 +524,15 @@ input {
   }
   #content > .column2 .sticky .row:first-child .column1 .colores .circle {
     display: inline-block;
-    width: 0.9375rem;
-    height: 0.9375rem;
+    width: 1.40625rem;
+    height: 1.40625rem;
     border-radius: 8000px;
     margin: auto 0.09375rem;
     cursor: pointer;
   }
   #content > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
-    width: 1.125rem;
-    height: 1.125rem;
+    width: 1.59375rem;
+    height: 1.59375rem;
     cursor: default;
   }
   #content > .column2 .sticky .row:first-child .column1 .input {
@@ -496,15 +671,15 @@ input {
   }
   #content #corporativos .column2 form .colores .circle {
     display: inline-block;
-    width: 0.9375rem;
-    height: 0.9375rem;
+    width: 1.40625rem;
+    height: 1.40625rem;
     border-radius: 8000px;
     margin: auto 0.09375rem;
     cursor: pointer;
   }
   #content #corporativos .column2 form .colores .circle.selected {
-    width: 1.125rem;
-    height: 1.125rem;
+    width: 1.59375rem;
+    height: 1.59375rem;
     cursor: default;
   }
   #content #corporativos .column2 form .row {
@@ -730,33 +905,115 @@ input {
   }
 }
 @media screen and (min-width: 800px) {
-  #backgrounds .cabezal {
+  #header {
     height: 31.25rem;
-    background-image: url("../images/banner.jpg");
-    background-repeat: no-repeat;
-    background-size: 100rem;
+    background-size: 160%;
     background-position: bottom -2.5rem center;
-    background-color: rgba(0, 0, 0, 0.4);
-    background-blend-mode: multiply;
   }
-  #backgrounds .seccion1 {
+  #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-image: linear-gradient(#cccccc, #cccccc);
     background-position: left 7rem;
     background-size: 100% 8rem;
     background-repeat: no-repeat;
   }
+  #descripcion .images .image {
+    max-width: 33%;
+  }
+  #descripcion .paragraph {
+    padding-top: 1.75rem;
+    line-height: 0.875rem;
+    text-align: justify;
+  }
+  #descripcion .paragraph .header {
+    margin-bottom: 1rem;
+    font-size: 1.375rem;
+  }
+
+  #ventajas .diagonal {
+    border-bottom: 27.5rem solid rgba(204, 204, 204, 0.5);
+    border-right: 118.75rem solid transparent;
+  }
+  #ventajas .gallery {
+    max-height: 25.5rem;
+  }
+
+  #dimensiones {
+    margin-top: 0.9375rem;
+  }
+  #dimensiones .colores {
+    vertical-align: center;
+  }
+  #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;
+    height: 1.25rem;
+    border-radius: 8000px;
+    margin: auto 0.0625rem;
+    cursor: pointer;
+  }
+  #dimensiones .colores .circle.selected {
+    width: 1.375rem;
+    height: 1.375rem;
+    cursor: default;
+  }
+
+  .left.column {
+    width: 67%;
+    padding-left: 0.3125rem !important;
+  }
+
+  section .titulo {
+    font-size: 1.8333333333rem;
+    padding-top: 3.375rem;
+    padding-bottom: 1.5625rem;
+  }
+
   #backgrounds .seccion2 {
-    height: 27.5rem;
-    background-image: url("../images/fondo23.png");
+    height: rem;
+    background-image: url("../images/tripode.png");
   }
   #backgrounds .seccion2 .diagonal {
-    border-bottom: 27.5rem solid rgba(204, 204, 204, 0.5);
+    border-bottom: rem solid rgba(204, 204, 204, 0.5);
     border-right: 118.75rem solid transparent;
   }
   #backgrounds .dimensiones {
     height: 27.5rem;
-    background-image: url("../images/fondo23.png");
+    background-image: url("../images/tripode.png");
   }
   #backgrounds .dimensiones .fondo-gris {
     width: 100%;
@@ -765,11 +1022,11 @@ input {
   }
   #backgrounds .construido {
     height: 21.875rem;
-    background-image: url("../images/fondo4.jpg");
+    background-image: url("../images/construido.jpg");
   }
   #backgrounds .corporativos {
     height: 32.5rem;
-    background-image: url("../images/fondo5.png");
+    background-image: url("../images/corporativo.png");
   }
   #backgrounds .testimonios {
     height: 21.875rem;
@@ -784,14 +1041,7 @@ input {
     clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
   }
 
-  html {
-    height: 217.5rem;
-    overflow: hidden;
-  }
-
   body {
-    height: 217.5rem;
-    font-family: Roboto, sans;
     color: #333333;
   }
 
@@ -801,56 +1051,6 @@ input {
     position: relative;
     top: -217.5rem;
   }
-  #content #header {
-    color: white;
-    width: 100%;
-    height: 31.25rem;
-  }
-  #content #header .ui.menu {
-    border: none !important;
-    background: none !important;
-    box-shadow: none !important;
-    margin: 0 !important;
-    color: black;
-  }
-  #content #header .ui.menu .dropdown .menu {
-    /*background: none !important;
-    border: none !important;
-    box-shadow: none !important;*/
-    color: black;
-    font-size: 1rem;
-  }
-  #content #header .ui.menu .dropdown .menu .item {
-    padding: 1rem !important;
-  }
-  #content #header .ui.menu .item {
-    color: inherit !important;
-    font-size: 2rem;
-    padding: 1.25rem !important;
-  }
-  #content #header .ui.menu .item .shopping.cart div {
-    position: relative;
-    color: white;
-    display: inline-block;
-    top: -2.6rem;
-    left: 0.2rem;
-    font-size: 1rem;
-    font-family: Roboto, sans;
-  }
-  #content #header .logo {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-  #content #header .logo img {
-    width: 50%;
-    max-width: 64.375rem;
-  }
-  #content #header .logo .frase1 {
-    font-size: 1.5rem;
-  }
-  #content #header .logo .frase2 {
-    font-size: 1rem;
-  }
   #content > .column {
     display: inline-block;
     float: left;
@@ -864,7 +1064,7 @@ input {
     width: 67%;
   }
   #content > .column1 #seccion1 {
-    height: 25rem;
+    height: rem;
     width: 100%;
   }
   #content > .column1 #seccion1 .image-container {
@@ -887,7 +1087,7 @@ input {
     font-size: 1.375rem;
   }
   #content > .column1 #seccion2 {
-    height: 27.5rem;
+    height: rem;
   }
   #content > .column1 #seccion2 > .column {
     display: inline-block;
@@ -914,7 +1114,6 @@ input {
     width: 23.75rem;
     padding: 2rem;
     margin-left: -3rem;
-    overflow: hidden;
   }
   #content > .column1 #seccion2 .column2 .row:first-child .header {
     font-weight: bold;
@@ -1031,15 +1230,15 @@ input {
   }
   #content > .column2 .sticky .row:first-child .column1 .colores .circle {
     display: inline-block;
-    width: 0.75rem;
-    height: 0.75rem;
+    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: 0.875rem;
-    height: 0.875rem;
+    width: 1.375rem;
+    height: 1.375rem;
     cursor: default;
   }
   #content > .column2 .sticky .row:first-child .column1 .input {
@@ -1178,15 +1377,15 @@ input {
   }
   #content #corporativos .column2 form .colores .circle {
     display: inline-block;
-    width: 0.75rem;
-    height: 0.75rem;
+    width: 1.25rem;
+    height: 1.25rem;
     border-radius: 8000px;
     margin: auto 0.0625rem;
     cursor: pointer;
   }
   #content #corporativos .column2 form .colores .circle.selected {
-    width: 0.875rem;
-    height: 0.875rem;
+    width: 1.375rem;
+    height: 1.375rem;
     cursor: default;
   }
   #content #corporativos .column2 form .row {