Falta corporativos, carro de compras y testimonios

assets/index.html

@@ -65,9 +65,9 @@
     <div class="column1 column" id="column">
       <section id="seccion1" class="ui simple segment">
         <div class="image-container">
-          <img src="./assets/images/tablet-front.png" />
+          <img src="./assets/images/seccion11.png" />
-          <img src="./assets/images/tablet-back.png" />
+          <img src="./assets/images/seccion12.png" />
-          <img src="./assets/images/phone.png" />
+          <img src="./assets/images/seccion13.png" />
         </div>
         <div class="paragraph">
           <div class="header">
@@ -79,7 +79,7 @@
 
       <section id="seccion2" class="ui simple segment">
         <div class="column1 column">
-          <img src="./assets/images/phone-pc.png" />
+          <img src="./assets/images/foto1.jpg" />
         </div>
         <div class="column2 column">
           <div class="row">
@@ -94,10 +94,10 @@
             </ul>
           </div>
           <div class="row">
-            <img src="./assets/images/ventajas1.png" />
+            <img src="./assets/images/foto2.jpg" />
-            <img src="./assets/images/ventajas2.png" />
+            <img src="./assets/images/foto3.jpg" />
-            <img src="./assets/images/ventajas3.png" />
+            <img src="./assets/images/foto1.jpg" />
-            <img src="./assets/images/ventajas4.png" />
+            <img src="./assets/images/foto2.jpg" />
           </div>
         </div>
       </section>
@@ -107,8 +107,19 @@
           <span class="bigger">DIMENSIONES</span> y colores
         </div>
         <div class="images">
-          <img src="./assets/images/variedades.png" />
+          <div class="column">
-          <img src="./assets/images/dimensiones.svg" />
+            <img src="./assets/images/variedades.png" />
+            <div>
+              <img src="./assets/images/bandera.svg" />
+              DISE&Ntilde;ADO Y FABRICADO EN CHILE
+            </div>
+          </div>
+          <div class="column">
+            <img src="./assets/images/dimensiones.svg" />
+            <div>
+              Fabricado en pl&aacute;stico de origen vegetal sin derivados del petr&oacute;leo
+            </div>
+          </div>
         </div>
       </section>
 
@@ -128,6 +139,7 @@
                 $ 5.990
               </div>
               <div class="colores linea">
+                <input type="hidden" name="color" value="azul" />
                 <span class="text">COLOR</span>
                 <div class="white circle"></div>
                 <div class="black circle"></div>
@@ -138,11 +150,15 @@
                 <div class="red circle"></div>
               </div>
               <div class="input">
-                <button class="minus" type="button">-</button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">+</button>
+                <button class="minus" type="button">
+                  <i class="minus icon"></i>
+                </button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">
+                  <i class="plus icon"></i>
+                </button>
               </div>
             </div>
             <div class="column2 column">
-              <img src="./assets/images/stand.png" />
+              <img src="./assets/images/azul.png" />
             </div>
           </div>
           <div class="row">
@@ -160,37 +176,41 @@
         <div class="opciones">
           <div class="opcion">
             <div class="img-grande">
-              <img src="./assets/images/logo_abajo.png" />
+              <img src="./assets/images/foto2.jpg" />
             </div>
             <div class="descripcion">
-              <div class="header">
+              <div class="content">
-                LOGO ABAJO
+                <div class="header">
+                  LOGO ABAJO
+                </div>
+                <ul>
+                  <li>Siempre visible</li>
+                  <li>Menor tamaño</li>
+                </ul>
               </div>
-              <ul>
-                <li>Siempre visible</li>
-                <li>Menor tamaño</li>
-              </ul>
               <div class="images">
-                <img src="./assets/images/logo_abajo1.png" />
+                <img src="./assets/images/foto3.jpg" />
-                <img src="./assets/images/logo_abajo2.png" />
+                <img src="./assets/images/foto1.jpg" />
               </div>
             </div>
           </div>
           <div class="opcion">
             <div class="img-grande">
-              <img src="./assets/images/logo_arriba.png" />
+              <img src="./assets/images/foto3.jpg" />
             </div>
             <div class="descripcion">
-              <div class="header">
+              <div class="content">
-                LOGO ARRIBA
+                <div class="header">
+                  LOGO ARRIBA
+                </div>
+                <ul>
+                  <li>No se ve al apoyar el tel&eacute;fono</li>
+                  <li>Mayor tamaño</li>
+                </ul>
               </div>
-              <ul>
-                <li>No se ve al apoyar el tel&eacute;fono</li>
-                <li>Mayor tamaño</li>
-              </ul>
               <div class="images">
-                <img src="./assets/images/logo_arriba1.png" />
+                <img src="./assets/images/foto1.jpg" />
-                <img src="./assets/images/logo_arriba2.png" />
+                <img src="./assets/images/foto2.jpg" />
               </div>
             </div>
           </div>
@@ -198,11 +218,12 @@
       </div>
       <div class="column2 column fondo-blanco">
         <div class="header">
-          COTIZA CON NOSOSTROS
+          COTIZA CON NOSOTROS
         </div>
         <form class="ui form">
           <div class="row">
             <div class="colores linea">
+              <input type="hidden" name="color" value="azul" />
               <span class="text">COLOR</span>
               <div class="white circle"></div>
               <div class="black circle"></div>
@@ -213,12 +234,16 @@
               <div class="red circle"></div>
             </div>
             <div class="input cantidad">
-              <button class="minus" type="button">-</button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">+</button>
+              <button class="minus" type="button">
+                <i class="minus icon"></i>
+              </button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">
+                <i class="plus icon"></i>
+              </button>
             </div>
           </div>
           <div class="row">
-            LOGO
             <div class="input">
+              LOGO
               <input type="file" name="archivo" placeholder="Cargar archivo" />
               <div class="file">Cargar archivo</div>
             </div>
@@ -240,10 +265,10 @@
           </div>
           <div class="row">
             <div class="input">
-              <textarea name="mensaje" placeholder="MENSAJE">
+              <textarea name="mensaje" placeholder="MENSAJE"></textarea>
-              </textarea>
             </div>
           </div>
+          <button class="ui button" type="submit">COTIZAR</button>
         </form>
       </div>
     </section>
@@ -318,5 +343,6 @@
   <!-- 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>
+  <script type="text/javascript" src="https://smtpjs.com/v3/smtp.js"></script>
   <script type="text/javascript" src="./assets/scripts/main.min.js"></script>
 </body>

assets/js/main.js

@@ -8,6 +8,214 @@ function resize() {
   })
 }
 
+class Amount {
+  constructor(elem) {
+    this.elem = elem
+    this.minus = elem.parent().find('.minus')
+    this.plus = elem.parent().find('.plus')
+    this.n = 0
+    this.setup()
+    this.max = 999
+  }
+  setup() {
+    this.elem.val(0)
+    this.plus.click((e) => {
+      this.increment()
+      this.print()
+    })
+    this.minus.click((e) => {
+      this.decrement()
+      this.print()
+    })
+    this.elem.change((e) => {
+      this.n = parseInt(this.elem.val())
+      this.print()
+    })
+    this.print()
+  }
+  enable_button(name) {
+    this[name].removeClass('disabled')
+    if (name == 'plus') {
+      this[name].html('<i class="plus icon"></i>')
+    }
+    if (name == 'minus') {
+      this[name].html('<i class="minus icon"></i>')
+    }
+  }
+  disable_button(name) {
+    this[name].addClass('disabled')
+    this[name].html('')
+  }
+  check_limits() {
+    this.enable_button('plus')
+    this.enable_button('minus')
+    if (this.n > this.max) {
+      this.n = this.max
+    }
+    if (this.n == this.max) {
+      this.disable_button('plus')
+    }
+
+    if (this.n < 0) {
+      this.n = 0
+    }
+    if (this.n == 0) {
+      this.disable_button('minus')
+    }
+  }
+  increment() {
+    this.n += 1
+  }
+  decrement() {
+    this.n -= 1
+  }
+  get value() {
+    return this.n
+  }
+  print() {
+    this.check_limits()
+    this.elem.val(this.n)
+  }
+}
+
+class Colors {
+  constructor(elem, changing = false) {
+    this.color = {
+      white: 'blanco',
+      black: 'negro',
+      blue: 'azul',
+      green: 'verde',
+      yellow: 'amarillo',
+      orange: 'naranjo',
+      red: 'rojo'
+    }
+    this.picked = 'blue'
+    this.elem = elem
+    this.input = elem.find('input[name="color"]')
+    this.changing = null
+    if (changing) {
+      this.changing = elem.parent().parent().find('.column2 img')
+    }
+    this.setup()
+  }
+  setup() {
+    this.elem.find('.circle').each((i, el) => {
+      $(el).click((e) => {
+        let color = $(el).attr('class').split(' ')[0]
+        this.change_color(color)
+      })
+    })
+    this.change_color('blue')
+  }
+  default_color_format(el) {
+    $(el).removeClass('selected')
+  }
+  change_color(color) {
+    this.picked = this.color[color]
+    this.input.val(this.picked)
+    this.elem.find('.circle').each((i, el) => {
+      this.default_color_format(el)
+    })
+    this.elem.find('.' + color + '.circle').addClass('selected')
+    if (this.changing != null) {
+      this.changing.attr('src', './assets/images/' + this.picked + '.png')
+    }
+  }
+}
+
+let smtp = {
+  Host: 'smtp.google.com',
+  Username: 'rsalinas85@gmail.com',
+  Password: 'salinas1234',
+  From: 'ventas@3dstand.cl'
+}
+
+let sticky_form = {
+  elem: $('.sticky form'),
+  setup: function() {
+    this.elem.submit((e) => {
+      e.preventDefault()
+      this.submit()
+      return false
+    })
+  },
+  submit: function() {
+    console.debug('submit sticky')
+  }
+}
+let cotiza_form = {
+  elem: $('#corporativos form'),
+  setup: function() {
+    this.elem.submit((e) => {
+      e.preventDefault()
+      this.submit()
+      return false
+    })
+    this.file = this.elem.find('input[type="file"]')
+    this.elem.find('.file').click((e) => {
+      this.file.trigger('click')
+    })
+  },
+  submit: function() {
+    let email = this.elem.find('[name="email"]').val()
+    let data = new FormData(this.elem[0])
+    let body = [
+      'Nombre: ' + this.elem.find('[name="nombre"]').val(),
+      'E-mail: ' + email,
+      'Teléfono: ' + this.elem.find('[name="telefono"]').val(),
+      '',
+      'Color: ' + this.elem.find('[name="color"]').val(),
+      'Cantidad: ' + this.elem.find('[name="cantidad"]').val(),
+      this.elem.find('[name="mensaje"]').val()
+    ]
+    let content = {
+      Host: smtp.Host,
+      Username: smtp.Username,
+      Password: smtp.Password,
+      To: email,
+      From: smtp.From,
+      Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
+      Body: body.join('<br />'),
+      Attachments: [
+        {
+          name: "Logo",
+          data: data.get('archivo')
+        }
+      ]
+    }
+    console.debug(email)
+    //Email.send()
+  }
+}
+let conversemos_form = {
+  elem: $('#contacto'),
+  setup: function() {
+    this.elem.submit((e) => {
+      e.preventDefault()
+      this.submit()
+      return false
+    })
+  },
+  submit: function() {
+    let email = this.elem.find('[name="email"]').val()
+    let body = [
+      'Nombre: ' + this.elem.find('[name="nombre"]').val(),
+      'E-mail: ' + email,
+      '',
+      this.elem.find('[name="mensaje"]').val()
+    ]
+    let content = {
+      Host: smtp.Host,
+      Username: smtp.Username,
+      Password: smtp.Password,
+      From: smtp.From,
+      To: email,
+      Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
+      Body: body.join('<br />')
+    }
+  }
+}
+
 $(document).ready(function() {
   $('.menu.sticky').sticky()
   $('.column2 .sticky').sticky({
@@ -16,5 +224,13 @@ $(document).ready(function() {
 
   $('.shopping.cart').innerText = 0
 
-  //window.onresize = resize;
+  window.onresize = resize;
+
+  let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
+  let sticky_color = new Colors($('.sticky .colores'), true)
+  sticky_form.setup()
+  let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
+  let cotiza_color = new Colors($('#corporativos .colores'))
+  cotiza_form.setup()
+  conversemos_form.setup()
 })

assets/sass/main.scss

@@ -15,9 +15,52 @@ $html-font-size: 16px;
 $gris: rgb(204, 204, 204);
 $gris-texto: rgb(51, 51, 51);
 
-body {
+@mixin colors {
-  font-family: Roboto, sans;
+  .colores {
-  color: $gris-texto;
+    vertical-align: center;
+
+    .text {
+      margin-right: rem(3);
+    }
+
+    .white {
+      border: thin solid rgb(0, 0, 0);
+      background-color: rgb(255, 255, 255);
+    }
+    .black {
+      background-color: rgb(0, 0, 0);
+    }
+    .blue {
+      background-color: rgb(0, 0, 255);
+    }
+    .green {
+      background-color: rgb(0, 255, 0);
+    }
+    .yellow {
+      background-color: rgb(255, 255, 0);
+    }
+    .orange {
+      background-color: rgb(255, 130, 0);
+    }
+    .red {
+      background-color: rgb(255, 0, 0);
+    }
+    .circle {
+      display: inline-block;
+      $a: 12;
+      width: rem($a);
+      height: rem($a);
+      border-radius: 8000px;
+      margin: auto rem(1);
+      cursor: pointer;
+
+      &.selected {
+        width: rem($a + 2);
+        height: rem($a + 2);
+        cursor: default;
+      }
+    }
+  }
 }
 
 $full_width: 1080;
@@ -28,7 +71,7 @@ $heights: (
   "seccion2": 27.5,
   "dimensiones": 27.5,
   "construido": 21.875,
-  "corporativos": 25,
+  "corporativos": (520/16),
   "felices": 21.875,
   "formulario": 30
 );
@@ -110,6 +153,12 @@ $column_height1: 0;
   }
 }
 
+body {
+  height: ($content_height)+rem;
+  font-family: Roboto, sans;
+  color: $gris-texto;
+}
+
 #content {
   max-width: rem($full_width) !important;
   height: ($content_height)+rem;
@@ -286,10 +335,18 @@ $column_height1: 0;
       .images {
         display: flex;
 
-        img {
+        .column {
           float: left;
-          width: rem(313);
+
-          height: rem(235);
+          &>img {
+            width: rem(313);
+            height: rem(235);
+          }
+
+          div {
+            width: rem(313);
+            margin-top: rem(25);
+          }
         }
       }
     }
@@ -340,45 +397,7 @@ $column_height1: 0;
           }
           font-size: font_size(14);
 
-          .colores {
+          @include colors;
-            vertical-align: center;
-
-            .text {
-              margin-right: rem(3);
-            }
-
-            .white {
-              border: thin solid rgb(0, 0, 0);
-              background-color: rgb(255, 255, 255);
-            }
-            .black {
-              background-color: rgb(0, 0, 0);
-            }
-            .blue {
-              background-color: rgb(0, 0, 255);
-            }
-            .green {
-              background-color: rgb(0, 255, 0);
-            }
-            .yellow {
-              background-color: rgb(255, 255, 0);
-            }
-            .orange {
-              background-color: rgb(255, 130, 0);
-            }
-            .red {
-              background-color: rgb(255, 0, 0);
-            }
-            .circle {
-              display: inline-block;
-              $a: 12;
-              width: rem($a);
-              height: rem($a);
-              border-radius: 8000px;
-              margin: auto rem(1);
-              cursor: pointer;
-            }
-          }
           .input {
             width: 4.5rem;
             border: thin solid rgb(0, 0, 0);
@@ -393,6 +412,7 @@ $column_height1: 0;
               margin: 0;
               padding: 0;
               cursor: pointer;
+              font-weight: bold;
             }
             input {
               width: 2rem;
@@ -443,9 +463,10 @@ $column_height1: 0;
       width: percentage(67/100);
 
       &>.header {
-        padding: rem(37) 0 !important;
+        margin-top: rem(67);
+        margin-bottom: rem(37);
         .bigger {
-          font-size: font_size(16);
+          font-size: rem(26);
         }
       }
       .opciones {
@@ -465,12 +486,23 @@ $column_height1: 0;
           }
           .descripcion {
             display: inline-block;
+            vertical-align: top;
+            height: rem(200);
+            padding-top: rem(20);
 
-            ul {
+            .content {
-              list-style: disc inside;
+              display: block;
+              .header {
+                font-size: font_size(14);
+                margin-bottom: rem(10);
+              }
+
+              ul {
+                list-style: disc inside;
+              }
             }
-
             .images {
+              margin-top: rem(34);
               img {
                 width: rem(70);
                 height: rem(85);
@@ -484,45 +516,20 @@ $column_height1: 0;
       width: percentage(33/100);
       height: 100%;
 
+      .header {
+        margin-top: rem(46);
+        margin-bottom: rem(24);
+        font-size: rem(26);
+      }
+
       form {
-        .colores {
+        @include colors;
-          vertical-align: center;
 
-          .text {
+        .row {
-            margin-right: rem(3);
+          margin-bottom: rem(9);
-          }
+        }
-
+        .colores.linea {
-          .white {
+          margin-bottom: rem(25-9);
-            border: thin solid rgb(0, 0, 0);
-            background-color: rgb(255, 255, 255);
-          }
-          .black {
-            background-color: rgb(0, 0, 0);
-          }
-          .blue {
-            background-color: rgb(0, 0, 255);
-          }
-          .green {
-            background-color: rgb(0, 255, 0);
-          }
-          .yellow {
-            background-color: rgb(255, 255, 0);
-          }
-          .orange {
-            background-color: rgb(255, 130, 0);
-          }
-          .red {
-            background-color: rgb(255, 0, 0);
-          }
-          .circle {
-            display: inline-block;
-            $a: 12;
-            width: rem($a);
-            height: rem($a);
-            border-radius: 8000px;
-            margin: auto rem(1);
-            cursor: pointer;
-          }
         }
         .input.cantidad {
           width: 4.5rem;
@@ -551,9 +558,35 @@ $column_height1: 0;
         .input [type="file"] {
           display: none;
         }
+        .input .file {
+          display: inline-block;
+          height: rem(20*12/10);
+          width: rem(150);
+          padding-top: rem(3);
+          background-color: #cccccb;
+          border: thin solid #333;
+          font-size: font_size(10);
+          text-align: center;
+          cursor: pointer;
+        }
         .input [type="text"] {
           height: rem(18);
-          background-color: rgba(255, 255, 255, .5);
+          background-color: rgba(255, 255, 255);
+          border: none !important;
+          border-radius: 0 !important;
+        }
+        textarea {
+          height: rem(72);
+          background-color: rgba(255, 255, 255);
+          border: none !important;
+          border-radius: 0 !important;
+          margin-bottom: rem(25-9);
+        }
+        .button {
+          width: 100%;
+          background-color: #666667;
+          color: white;
+          border: none !important;
           border-radius: 0 !important;
         }
       }
@@ -629,8 +662,8 @@ $column_height1: 0;
       margin-top: rem(27);
 
       &>img {
-        width: rem(434);
+        width: rem(540);
-        height: rem(280);
+        height: rem(350);
         float: left;
       }
     }

gulpfile.js

@@ -16,7 +16,9 @@ function js(done) {
     .pipe(concat('main.js'))
     .pipe(dest(path.join(output_dir, 'scripts')))
     .pipe(sourcemaps.init({loadMaps: true}))
-    .pipe(babel())
+    .pipe(babel({
+			presets: ['@babel/preset-env']
+		}))
     .pipe(uglify())
     .pipe(rename('main.min.js'))
     .pipe(sourcemaps.write('./maps'))

package.json

@@ -18,6 +18,8 @@
   "author": "Aldarien",
   "license": "UNLICENSED",
   "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-concat": "^2.6.1",

public/assets/images/bandera.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="22.742px" height="14.125px" viewBox="0 0 22.742 14.125" enable-background="new 0 0 22.742 14.125" xml:space="preserve">
+<g>
+	<g>
+		<rect fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" width="22.742" height="14.125"/>
+		<rect y="7.063" fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" width="22.742" height="7.062"/>
+		<rect fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" width="8.306" height="7.063"/>
+		<polygon fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" points="4.152,4.318 3.243,4.797 3.417,3.783 
+			2.681,3.066 3.698,2.918 4.152,1.996 4.607,2.918 5.625,3.066 4.889,3.783 5.063,4.797 		"/>
+	</g>
+</g>
+</svg>

public/assets/scripts/main.js

@@ -8,6 +8,214 @@ function resize() {
   })
 }
 
+class Amount {
+  constructor(elem) {
+    this.elem = elem
+    this.minus = elem.parent().find('.minus')
+    this.plus = elem.parent().find('.plus')
+    this.n = 0
+    this.setup()
+    this.max = 999
+  }
+  setup() {
+    this.elem.val(0)
+    this.plus.click((e) => {
+      this.increment()
+      this.print()
+    })
+    this.minus.click((e) => {
+      this.decrement()
+      this.print()
+    })
+    this.elem.change((e) => {
+      this.n = parseInt(this.elem.val())
+      this.print()
+    })
+    this.print()
+  }
+  enable_button(name) {
+    this[name].removeClass('disabled')
+    if (name == 'plus') {
+      this[name].html('<i class="plus icon"></i>')
+    }
+    if (name == 'minus') {
+      this[name].html('<i class="minus icon"></i>')
+    }
+  }
+  disable_button(name) {
+    this[name].addClass('disabled')
+    this[name].html('')
+  }
+  check_limits() {
+    this.enable_button('plus')
+    this.enable_button('minus')
+    if (this.n > this.max) {
+      this.n = this.max
+    }
+    if (this.n == this.max) {
+      this.disable_button('plus')
+    }
+
+    if (this.n < 0) {
+      this.n = 0
+    }
+    if (this.n == 0) {
+      this.disable_button('minus')
+    }
+  }
+  increment() {
+    this.n += 1
+  }
+  decrement() {
+    this.n -= 1
+  }
+  get value() {
+    return this.n
+  }
+  print() {
+    this.check_limits()
+    this.elem.val(this.n)
+  }
+}
+
+class Colors {
+  constructor(elem, changing = false) {
+    this.color = {
+      white: 'blanco',
+      black: 'negro',
+      blue: 'azul',
+      green: 'verde',
+      yellow: 'amarillo',
+      orange: 'naranjo',
+      red: 'rojo'
+    }
+    this.picked = 'blue'
+    this.elem = elem
+    this.input = elem.find('input[name="color"]')
+    this.changing = null
+    if (changing) {
+      this.changing = elem.parent().parent().find('.column2 img')
+    }
+    this.setup()
+  }
+  setup() {
+    this.elem.find('.circle').each((i, el) => {
+      $(el).click((e) => {
+        let color = $(el).attr('class').split(' ')[0]
+        this.change_color(color)
+      })
+    })
+    this.change_color('blue')
+  }
+  default_color_format(el) {
+    $(el).removeClass('selected')
+  }
+  change_color(color) {
+    this.picked = this.color[color]
+    this.input.val(this.picked)
+    this.elem.find('.circle').each((i, el) => {
+      this.default_color_format(el)
+    })
+    this.elem.find('.' + color + '.circle').addClass('selected')
+    if (this.changing != null) {
+      this.changing.attr('src', './assets/images/' + this.picked + '.png')
+    }
+  }
+}
+
+let smtp = {
+  Host: 'smtp.google.com',
+  Username: 'rsalinas85@gmail.com',
+  Password: 'salinas1234',
+  From: 'ventas@3dstand.cl'
+}
+
+let sticky_form = {
+  elem: $('.sticky form'),
+  setup: function() {
+    this.elem.submit((e) => {
+      e.preventDefault()
+      this.submit()
+      return false
+    })
+  },
+  submit: function() {
+    console.debug('submit sticky')
+  }
+}
+let cotiza_form = {
+  elem: $('#corporativos form'),
+  setup: function() {
+    this.elem.submit((e) => {
+      e.preventDefault()
+      this.submit()
+      return false
+    })
+    this.file = this.elem.find('input[type="file"]')
+    this.elem.find('.file').click((e) => {
+      this.file.trigger('click')
+    })
+  },
+  submit: function() {
+    let email = this.elem.find('[name="email"]').val()
+    let data = new FormData(this.elem[0])
+    let body = [
+      'Nombre: ' + this.elem.find('[name="nombre"]').val(),
+      'E-mail: ' + email,
+      'Teléfono: ' + this.elem.find('[name="telefono"]').val(),
+      '',
+      'Color: ' + this.elem.find('[name="color"]').val(),
+      'Cantidad: ' + this.elem.find('[name="cantidad"]').val(),
+      this.elem.find('[name="mensaje"]').val()
+    ]
+    let content = {
+      Host: smtp.Host,
+      Username: smtp.Username,
+      Password: smtp.Password,
+      To: email,
+      From: smtp.From,
+      Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
+      Body: body.join('<br />'),
+      Attachments: [
+        {
+          name: "Logo",
+          data: data.get('archivo')
+        }
+      ]
+    }
+    console.debug(email)
+    //Email.send()
+  }
+}
+let conversemos_form = {
+  elem: $('#contacto'),
+  setup: function() {
+    this.elem.submit((e) => {
+      e.preventDefault()
+      this.submit()
+      return false
+    })
+  },
+  submit: function() {
+    let email = this.elem.find('[name="email"]').val()
+    let body = [
+      'Nombre: ' + this.elem.find('[name="nombre"]').val(),
+      'E-mail: ' + email,
+      '',
+      this.elem.find('[name="mensaje"]').val()
+    ]
+    let content = {
+      Host: smtp.Host,
+      Username: smtp.Username,
+      Password: smtp.Password,
+      From: smtp.From,
+      To: email,
+      Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
+      Body: body.join('<br />')
+    }
+  }
+}
+
 $(document).ready(function() {
   $('.menu.sticky').sticky()
   $('.column2 .sticky').sticky({
@@ -16,5 +224,13 @@ $(document).ready(function() {
 
   $('.shopping.cart').innerText = 0
 
-  //window.onresize = resize;
+  window.onresize = resize;
+
+  let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
+  let sticky_color = new Colors($('.sticky .colores'), true)
+  sticky_form.setup()
+  let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
+  let cotiza_color = new Colors($('#corporativos .colores'))
+  cotiza_form.setup()
+  conversemos_form.setup()
 })

public/assets/scripts/main.min.js

@@ -1,2 +1,2 @@
-function resize(){$(".container").each(function(t,i){var n=$(this).height;$(this).width;$(this).width=n*(400/944)})}$(document).ready(function(){$(".menu.sticky").sticky(),$(".column2 .sticky").sticky({context:"#column"}),$(".shopping.cart").innerText=0});
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,t,i){return t&&_defineProperties(e.prototype,t),i&&_defineProperties(e,i),e}function resize(){$(".container").each(function(e,t){var i=$(this).height;$(this).width;$(this).width=i*(400/944)})}var Amount=function(){function t(e){_classCallCheck(this,t),this.elem=e,this.minus=e.parent().find(".minus"),this.plus=e.parent().find(".plus"),this.n=0,this.setup(),this.max=999}return _createClass(t,[{key:"setup",value:function(){var t=this;this.elem.val(0),this.plus.click(function(e){t.increment(),t.print()}),this.minus.click(function(e){t.decrement(),t.print()}),this.elem.change(function(e){t.n=parseInt(t.elem.val()),t.print()}),this.print()}},{key:"enable_button",value:function(e){this[e].removeClass("disabled"),"plus"==e&&this[e].html('<i class="plus icon"></i>'),"minus"==e&&this[e].html('<i class="minus icon"></i>')}},{key:"disable_button",value:function(e){this[e].addClass("disabled"),this[e].html("")}},{key:"check_limits",value:function(){this.enable_button("plus"),this.enable_button("minus"),this.n>this.max&&(this.n=this.max),this.n==this.max&&this.disable_button("plus"),this.n<0&&(this.n=0),0==this.n&&this.disable_button("minus")}},{key:"increment",value:function(){this.n+=1}},{key:"decrement",value:function(){--this.n}},{key:"print",value:function(){this.check_limits(),this.elem.val(this.n)}},{key:"value",get:function(){return this.n}}]),t}(),Colors=function(){function i(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1];_classCallCheck(this,i),this.color={white:"blanco",black:"negro",blue:"azul",green:"verde",yellow:"amarillo",orange:"naranjo",red:"rojo"},this.picked="blue",this.elem=e,this.input=e.find('input[name="color"]'),this.changing=null,t&&(this.changing=e.parent().parent().find(".column2 img")),this.setup()}return _createClass(i,[{key:"setup",value:function(){var n=this;this.elem.find(".circle").each(function(e,i){$(i).click(function(e){var t=$(i).attr("class").split(" ")[0];n.change_color(t)})}),this.change_color("blue")}},{key:"default_color_format",value:function(e){$(e).removeClass("selected")}},{key:"change_color",value:function(e){var i=this;this.picked=this.color[e],this.input.val(this.picked),this.elem.find(".circle").each(function(e,t){i.default_color_format(t)}),this.elem.find("."+e+".circle").addClass("selected"),null!=this.changing&&this.changing.attr("src","./assets/images/"+this.picked+".png")}}]),i}(),smtp={Host:"smtp.google.com",Username:"rsalinas85@gmail.com",Password:"salinas1234",From:"ventas@3dstand.cl"},sticky_form={elem:$(".sticky form"),setup:function(){var t=this;this.elem.submit(function(e){return e.preventDefault(),t.submit(),!1})},submit:function(){console.debug("submit sticky")}},cotiza_form={elem:$("#corporativos form"),setup:function(){var t=this;this.elem.submit(function(e){return e.preventDefault(),t.submit(),!1}),this.file=this.elem.find('input[type="file"]'),this.elem.find(".file").click(function(e){t.file.trigger("click")})},submit:function(){var e=this.elem.find('[name="email"]').val(),t=new FormData(this.elem[0]),i=["Nombre: "+this.elem.find('[name="nombre"]').val(),"E-mail: "+e,"Teléfono: "+this.elem.find('[name="telefono"]').val(),"","Color: "+this.elem.find('[name="color"]').val(),"Cantidad: "+this.elem.find('[name="cantidad"]').val(),this.elem.find('[name="mensaje"]').val()];smtp.Host,smtp.Username,smtp.Password,smtp.From,(new Date).toLocaleString("es-CL",{timezone:"UTC-3"}),i.join("<br />"),t.get("archivo");console.debug(e)}},conversemos_form={elem:$("#contacto"),setup:function(){var t=this;this.elem.submit(function(e){return e.preventDefault(),t.submit(),!1})},submit:function(){var e=this.elem.find('[name="email"]').val(),t=["Nombre: "+this.elem.find('[name="nombre"]').val(),"E-mail: "+e,"",this.elem.find('[name="mensaje"]').val()];smtp.Host,smtp.Username,smtp.Password,smtp.From,(new Date).toLocaleString("es-CL",{timezone:"UTC-3"}),t.join("<br />")}};$(document).ready(function(){$(".menu.sticky").sticky(),$(".column2 .sticky").sticky({context:"#column"}),$(".shopping.cart").innerText=0,window.onresize=resize;new Amount($('.sticky .input input[name="cantidad"]')),new Colors($(".sticky .colores"),!0);sticky_form.setup();new Amount($('#corporativos .input input[name="cantidad"]')),new Colors($("#corporativos .colores"));cotiza_form.setup(),conversemos_form.setup()});
 //# sourceMappingURL=maps/main.min.js.map

public/assets/styles/main.css

@@ -45,11 +45,6 @@ input {
   border-radius: 0;
 }
 
-body {
-  font-family: Roboto, sans;
-  color: #333333;
-}
-
 #backgrounds .cabezal {
   height: 25rem;
   background-image: url("../images/banner.jpg");
@@ -87,7 +82,7 @@ body {
   background-color: #64c8ff;
 }
 #backgrounds .corporativos {
-  height: 25rem;
+  height: 32.5rem;
   background-image: url("../images/fondo5.png");
 }
 #backgrounds .testimonios {
@@ -103,11 +98,17 @@ body {
   clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
 }
 
+body {
+  height: 211.25rem;
+  font-family: Roboto, sans;
+  color: #333333;
+}
+
 #content {
   max-width: 67.5rem !important;
-  height: 203.75rem;
+  height: 211.25rem;
   position: relative;
-  top: -203.75rem;
+  top: -211.25rem;
 }
 #content #header {
   color: white;
@@ -254,11 +255,17 @@ body {
 #content > .column1 #dimensiones .images {
   display: flex;
 }
-#content > .column1 #dimensiones .images img {
+#content > .column1 #dimensiones .images .column {
   float: left;
+}
+#content > .column1 #dimensiones .images .column > img {
   width: 19.5625rem;
   height: 14.6875rem;
 }
+#content > .column1 #dimensiones .images .column div {
+  width: 19.5625rem;
+  margin-top: 1.5625rem;
+}
 #content > .column1 #construido {
   height: 21.875rem;
 }
@@ -336,6 +343,11 @@ body {
   margin: auto 0.0625rem;
   cursor: pointer;
 }
+#content > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
+  width: 0.875rem;
+  height: 0.875rem;
+  cursor: default;
+}
 #content > .column2 .sticky .row:first-child .column1 .input {
   width: 4.5rem;
   border: thin solid black;
@@ -350,6 +362,7 @@ body {
   margin: 0;
   padding: 0;
   cursor: pointer;
+  font-weight: bold;
 }
 #content > .column2 .sticky .row:first-child .column1 .input input {
   width: 2rem;
@@ -372,7 +385,7 @@ body {
 }
 #content #corporativos {
   width: 100%;
-  height: 25rem;
+  height: 32.5rem;
   margin-top: 101.875rem !important;
 }
 #content #corporativos > .column {
@@ -388,10 +401,11 @@ body {
   width: 67%;
 }
 #content #corporativos .column1 > .header {
-  padding: 2.3125rem 0 !important;
+  margin-top: 4.1875rem;
+  margin-bottom: 2.3125rem;
 }
 #content #corporativos .column1 > .header .bigger {
-  font-size: 1.3333333333rem;
+  font-size: 1.625rem;
 }
 #content #corporativos .column1 .opciones {
   display: flex;
@@ -410,10 +424,23 @@ body {
 }
 #content #corporativos .column1 .opciones .opcion .descripcion {
   display: inline-block;
+  vertical-align: top;
+  height: 12.5rem;
+  padding-top: 1.25rem;
 }
-#content #corporativos .column1 .opciones .opcion .descripcion ul {
+#content #corporativos .column1 .opciones .opcion .descripcion .content {
+  display: block;
+}
+#content #corporativos .column1 .opciones .opcion .descripcion .content .header {
+  font-size: 1.1666666667rem;
+  margin-bottom: 0.625rem;
+}
+#content #corporativos .column1 .opciones .opcion .descripcion .content ul {
   list-style: disc inside;
 }
+#content #corporativos .column1 .opciones .opcion .descripcion .images {
+  margin-top: 2.125rem;
+}
 #content #corporativos .column1 .opciones .opcion .descripcion .images img {
   width: 4.375rem;
   height: 5.3125rem;
@@ -422,6 +449,11 @@ body {
   width: 33%;
   height: 100%;
 }
+#content #corporativos .column2 .header {
+  margin-top: 2.875rem;
+  margin-bottom: 1.5rem;
+  font-size: 1.625rem;
+}
 #content #corporativos .column2 form .colores {
   vertical-align: center;
 }
@@ -458,6 +490,17 @@ body {
   margin: auto 0.0625rem;
   cursor: pointer;
 }
+#content #corporativos .column2 form .colores .circle.selected {
+  width: 0.875rem;
+  height: 0.875rem;
+  cursor: default;
+}
+#content #corporativos .column2 form .row {
+  margin-bottom: 0.5625rem;
+}
+#content #corporativos .column2 form .colores.linea {
+  margin-bottom: 1rem;
+}
 #content #corporativos .column2 form .input.cantidad {
   width: 4.5rem;
   border: thin solid black;
@@ -484,9 +527,35 @@ body {
 #content #corporativos .column2 form .input [type=file] {
   display: none;
 }
+#content #corporativos .column2 form .input .file {
+  display: inline-block;
+  height: 1.5rem;
+  width: 9.375rem;
+  padding-top: 0.1875rem;
+  background-color: #cccccb;
+  border: thin solid #333;
+  font-size: 0.8333333333rem;
+  text-align: center;
+  cursor: pointer;
+}
 #content #corporativos .column2 form .input [type=text] {
   height: 1.125rem;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: white;
+  border: none !important;
+  border-radius: 0 !important;
+}
+#content #corporativos .column2 form textarea {
+  height: 4.5rem;
+  background-color: white;
+  border: none !important;
+  border-radius: 0 !important;
+  margin-bottom: 1rem;
+}
+#content #corporativos .column2 form .button {
+  width: 100%;
+  background-color: #666667;
+  color: white;
+  border: none !important;
   border-radius: 0 !important;
 }
 #content #felices {
@@ -549,8 +618,8 @@ body {
   margin-top: 1.6875rem;
 }
 #content #formulario > .column1 > img {
-  width: 27.125rem;
+  width: 33.75rem;
-  height: 17.5rem;
+  height: 21.875rem;
   float: left;
 }
 #content #formulario > .column2 {