ProVM/stand
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v2.0.1-beta

Browse Source
This commit is contained in:
Aldarien
2021-01-12 18:36:10 -03:00
parent 47c3e3924f
commit daab2b65f5
37 changed files with 576 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/html/003_descripcion.html
View File

@ -3,13 +3,13 @@
<div class="left column">
<div class="images">
<div class="ui medium image">
<img src="./assets/images/seccion11.png" />
<img src="./assets/images/descripcion1.png" />
</div>
<div class="ui medium image">
<img src="./assets/images/seccion12.png" />
<img src="./assets/images/descripcion2.png" />
</div>
<div class="ui medium image">
<img src="./assets/images/seccion13.png" />
<img src="./assets/images/descripcion3.png" />
</div>
</div>
<div class="paragraph">

2
assets/html/004_ventajas.html
View File

@ -9,7 +9,7 @@
<div class="column">
<div class="gallery">
<div class="ui large image">
<img src="./assets/images/foto1.jpg" />
<img src="./assets/images/galeria/foto1.jpg" />
</div>
<div class="nav left">
<i class="angle left icon"></i>

18
assets/html/006_construido.html
View File

@ -1,18 +0,0 @@
<section id="construidos">
<div class="ui container">
<div class="left column">
<div class="titulo">
CONSTRUIDOS CON IMPRESI&Oacute;N 3D
</div>
<div class="content">
<i class="chile icon"></i>
<br />
Dise&ntilde;ado y fabricado en Chile
<br />
<i class="recycle icon"></i>
<br />
Fabricado en pl&aacute;stico de orien vegetal sin derivados del petr&oacute;leo
</div>
</div>
</div>
</section>

22
assets/html/006_construidos.html Normal file
View File

@ -0,0 +1,22 @@
<section id="construidos">
<div class="ui container">
<div class="left column">
<div class="titulo">
CONSTRUIDOS CON IMPRESI&Oacute;N 3D
</div>
<div class="ui grid">
<div class="doubling two columns row">
<div class="content column">
<i class="chile icon"></i>
<br />
Dise&ntilde;ado y fabricado en Chile
<br /><br />
<i class="recycle icon"></i>
<br />
Fabricado en pl&aacute;stico de orien vegetal sin derivados del petr&oacute;leo
</div>
</div>
</div>
</div>
</div>
</section>

176
assets/html/007_corporativos.html
View File

@ -1,96 +1,104 @@
<section id="corporativos">
<div class="ui container">
<div class="left column">
<div class="titulo">
CORPORATIVOS
</div>
<div class="two columns stackable grid">
<div class="column">
<div class="ui large image">
<img src="./assets/images/logo_abajo.jpg" />
</div>
<div class="content">
<div class="header">
LOGO ABAJO
<div class="ui stackable grid">
<div class="left column">
<div class="titulo">
CORPORATIVOS
</div>
<div class="ui two columns stackable grid">
<div class="column">
<div class="ui basic segment">
<div class="ui large image">
<img src="./assets/images/logo_abajo.jpg" />
</div>
<div class="content">
<div class="header">
LOGO ABAJO
</div>
<ul>
<li class="plus"><i class="small grey plus icon"></i> Siempre visible</li>
<li class="minus"><i class="small grey minus icon"></i> Menor tama&ntilde;o</li>
</ul>
</div>
</div>
<ul>
<li class="plus">Siempre visible</li>
<li class="minus">Menor tama&ntilde;o</li>
</ul>
</div>
</div>
<div class="column">
<div class="ui large image">
<img src="./assets/images/logo_arriba.jpg" />
</div>
<div class="content">
<div class="header">
LOGO ARRIBA
<div class="column">
<div class="ui basic segment">
<div class="ui large image">
<img src="./assets/images/logo_arriba.jpg" />
</div>
<div class="content">
<div class="header">
LOGO ARRIBA
</div>
<ul>
<li class="plus"><i class="small grey plus icon"></i> Mayor tama&ntilde;o</li>
<li class="minus"><i class="small grey minus icon"></i> No se ve al apoyar el tel&eacute;fono</li>
</ul>
</div>
</div>
<ul>
<li class="plus">Mayor tama&ntilde;o</li>
<li class="minus">No se ve al apoyar el tel&eacute;fono</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right column">
<div class="titulo">
COTIZA CON NOSOTROS
<div class="right column">
<div class="titulo">
COTIZA CON NOSOTROS
</div>
<form>
<div class="row">
<div class="input">
LOGO
<input type="file" name="archivo" placeholder="Cargar archivo" />
<div class="file"><i class="upload icon"></i></div>
</div>
</div>
<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>
<div class="blue circle"></div>
<div class="petrol circle"></div>
<div class="cyan circle"></div>
<div class="green circle"></div>
<div class="yellow circle"></div>
<div class="orange circle"></div>
<div class="red circle"></div>
</div>
</div>
<div class="row">
<div class="input cantidad">
<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">
<div class="input">
<input type="text" name="nombre" placeholder="NOMBRE" />
</div>
</div>
<div class="row">
<div class="input">
<input type="text" name="email" placeholder="E-MAIL" />
</div>
</div>
<div class="row">
<div class="input">
<input type="text" name="telefono" placeholder="TELÉFONO" />
</div>
</div>
<div class="row">
<div class="input">
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
</div>
</div>
<button class="ui button" type="submit">COTIZAR</button>
</form>
</div>
<form class="ui form">
<div class="row">
<div class="input">
LOGO
<input type="file" name="archivo" placeholder="Cargar archivo" />
<div class="file"><i class="upload icon"></i></div>
</div>
</div>
<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>
<div class="blue circle"></div>
<div class="green circle"></div>
<div class="yellow circle"></div>
<div class="orange circle"></div>
<div class="red circle"></div>
</div>
</div>
<div class="row">
<div class="input cantidad">
<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">
<div class="input">
<input type="text" name="nombre" placeholder="NOMBRE" />
</div>
</div>
<div class="row">
<div class="input">
<input type="text" name="email" placeholder="E-MAIL" />
</div>
</div>
<div class="row">
<div class="input">
<input type="text" name="telefono" placeholder="TELÉFONO" />
</div>
</div>
<div class="row">
<div class="input">
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
</div>
</div>
<button class="ui button" type="submit">COTIZAR</button>
</form>
</div>
</div>
</section>

44
assets/js/main.js
View File

@ -109,15 +109,7 @@ class Amount {
class Colors {
constructor(elem, changing = false) {
this.color = {
white: 'blanco',
black: 'negro',
blue: 'azul',
green: 'verde',
yellow: 'amarillo',
orange: 'naranjo',
red: 'rojo'
}
this.colors = available_colors
this.picked = 'blue'
this.elem = elem
this.input = elem.find('input[name="color"]')
@ -129,8 +121,12 @@ class Colors {
}
setup() {
this.elem.find('.circle').each((i, el) => {
let color = $(el).attr('class').split(' ')[0]
let cssColor = $(el).css('background-color')
if (cssColor != this.colors[color]['rgb']) {
$(el).css('background-color', this.colors[color]['rgb'])
}
$(el).click((e) => {
let color = $(el).attr('class').split(' ')[0]
this.change_color(color)
})
})
@ -140,7 +136,7 @@ class Colors {
$(el).removeClass('selected')
}
change_color(color) {
this.picked = this.color[color]
this.picked = this.colors[color]['name']
this.input.val(this.picked)
this.elem.find('.circle').each((i, el) => {
this.default_color_format(el)
@ -154,17 +150,41 @@ class Colors {
let ventajas = {
elem: $('#ventajas'),
fotos: 6,
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)
this.elem.find('.nav.left').click((e) => {
this.prev()
})
this.elem.find('.nav.right').click((e) => {
this.next()
})
},
current: 1,
next: function() {
var n = this.current + 1
if (n > this.fotos) {
n = 1
}
this.elem.find('.gallery .image img').attr('src', './assets/images/galeria/foto' + n + '.jpg')
this.current = n
},
prev: function() {
var n = this.current - 1
if (n < 1) {
n = this.fotos
}
this.elem.find('.gallery .image img').attr('src', './assets/images/galeria/foto' + n + '.jpg')
this.current = n
}
}
let dimensiones = {
colors: available_colors,
picked: 'blue',
elem: $('#dimensiones'),
setup: function() {
this.elem.find('.colores .circle').each((i, el) => {

2
assets/sass/_common.scss
View File

@ -2,3 +2,5 @@
@import 'descripcion';
@import 'ventajas';
@import 'dimensiones';
@import 'construidos';
@import 'corporativos';

7
assets/sass/_construidos.scss Normal file
View File

@ -0,0 +1,7 @@
#construidos {
background-image: $fondo_construidos;
background-color: linear-gradient(to right, rgb(0, 0, 0, .6), rgb(0, 0, 0, 0));
color: $blanco;
padding-bottom: 1.25rem;
}

18
assets/sass/_corporativos.scss Normal file
View File

@ -0,0 +1,18 @@
#corporativos {
background-image: $fondo_corporativos;
.segment {
.content {
.header {
padding-top: 2rem;
padding-bottom: 1rem;
}
ul {
list-style: none;
margin-left: 0;
padding-left: 1rem;
text-indent: -1rem;
}
}
}
}

6
assets/sass/_phone.scss
View File

@ -4,6 +4,8 @@
@import 'phone/descripcion';
@import 'phone/ventajas';
@import 'phone/dimensiones';
@import 'phone/construidos';
@import 'phone/corporativos';
.left.column {
width: 75%;
@ -52,12 +54,12 @@
.construido {
height: (map.get($heights, "construido"))+rem;
background-image: $fondo_construido;
background-image: $fondo_construidos;
}
.corporativos {
height: (map.get($heights, "corporativos"))+rem;
background-image: $fondo_corporativo;
background-image: $fondo_corporativos;
}
.testimonios {
height: (map.get($heights, "felices"))+rem;

4
assets/sass/_variables.scss
View File

@ -13,5 +13,5 @@ $font_family: Roboto, sans;
// Fondos
$fondo_cabezal: url('../images/banner.jpg');
$fondo_ventajas_dimensiones: url('../images/tripode.png');
$fondo_construido: url('../images/construido.jpg');
$fondo_corporativo: url('../images/corporativo.png');
$fondo_construidos: url('../images/construido.jpg');
$fondo_corporativos: url('../images/corporativo.png');

3
assets/sass/_ventajas.scss
View File

@ -23,6 +23,9 @@
.nav {
position: absolute;
cursor: pointer;
background-color: rgb(255, 255, 255, .5);
}
.nav.left {
top: 50%;

11
assets/sass/_wide.scss
View File

@ -4,10 +4,15 @@
@import 'wide/ventajas';
@import 'wide/dimensiones';
@import 'wide/corporativos';
.left.column {
width: 67%;
width: 67% !important;
padding-left: rem(5) !important;
}
.right.column {
width: 33% !important;
}
section .titulo {
font-size: font_size(22);
@ -39,12 +44,12 @@ section .titulo {
.construido {
height: (map.get($heights, "construido"))+rem;
background-image: $fondo_construido;
background-image: $fondo_construidos;
}
.corporativos {
height: (map.get($heights, "corporativos"))+rem;
background-image: $fondo_corporativo;
background-image: $fondo_corporativos;
}
.testimonios {
height: (map.get($heights, "felices"))+rem;

3
assets/sass/phone/_construidos.scss Normal file
View File

@ -0,0 +1,3 @@
#construidos {
margin-top: 1rem;
}

3
assets/sass/phone/_corporativos.scss Normal file
View File

@ -0,0 +1,3 @@
#corporativos {
margin-top: 1rem !important;
}

3
assets/sass/phone/_descripcion.scss
View File

@ -1,4 +1,6 @@
#descripcion {
padding-bottom: rem(5);
.paragraph {
padding-top: rem(18);
line-height: rem(14);
@ -9,5 +11,4 @@
font-size: font_size(18);
}
}
padding-bottom: rem(5);
}

74
assets/sass/wide/_corporativos.scss Normal file
View File

@ -0,0 +1,74 @@
#corporativos {
form {
@include colors;
.row {
margin-bottom: rem(9);
}
.colores.linea {
//margin-bottom: rem(25-9);
}
.input.cantidad {
width: 4.5rem;
background: rgb(255, 255, 255);
text-align: center;
padding: .5rem 0.05rem;
font-size: font_size(10);
color: rgba(191, 191, 191, .87) !important;
button {
background: none;
border: none;
width: 1rem;
margin: 0;
padding: 0;
cursor: pointer;
color: rgba(191, 191, 191, .87) !important;
}
input {
width: 2rem;
background: none;
margin: 0;
border: 0;
padding: 0;
text-align: center;
color: rgba(191, 191, 191, .87) !important;
}
}
.input [type="file"] {
display: none;
}
.input .file {
display: inline-block;
height: rem(20*12/10);
//width: rem(150);
padding-top: rem(3);
margin-left: rem(5);
//background-color: #cccccb;
//border: thin solid #333;
font-size: font_size(16);
text-align: center;
cursor: pointer;
}
.input [type="text"] {
height: rem(18);
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;
}
}
}

4
assets/sass/wide/_descripcion.scss
View File

@ -2,9 +2,11 @@
height: (map.get($heights, "descripcion"))+rem;
background-position: left rem(112);
background-size: 100% rem(128);
background-size: 100% rem(110);
background-repeat: no-repeat;
padding-top: rem(100);
.images {
.image {
max-width: 33%;