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

v2.0.0-beta

Browse Source
This commit is contained in:
Aldarien
2021-01-12 11:44:15 -03:00
parent 81f6ae876e
commit 47c3e3924f
78 changed files with 1165 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
assets/html/001_head.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Stand Chile</title>
<meta name="keywords" content="stand, chile, celular, smartphone, telefono" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<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>

39
assets/html/002_banner.html Normal file
View File

@ -0,0 +1,39 @@
<header id="header">
<div class="ui container">
<nav id="menu" class="ui borderless sticky menu" role="navigation" aria-label="navigation">
<div class="left menu item">
<div class="ui simple dropdown">
<div class="text">
<i class="bars icon"></i>
</div>
<div class="menu">
<a class="item" href="./">Inicio</a>
<a class="item" href="#ventajas">Ventajas</a>
<a class="item" href="#dimensiones">Dimensiones</a>
<a class="item" href="#corporativos">Corporativos</a>
<a class="item" href="#testimonios">Testimonios</a>
<a class="item" href="#contacto">Contacto</a>
</div>
</div>
</div>
<div class="right menu">
<a class="item" href="#contacto">
<i class="shopping cart icon">
<div class="cantidad">0</div>
</i>
</a>
</div>
</nav>
<div class="ui center aligned basic segment">
<div id="logo">
<img src="./assets/images/logo.svg" />
</div>
<div class="paragraph">
<div class="header">
SOPORTES PARA SMARTPHONE Y TABLETS
</div>
Diseñado y Fabricado en Chile
</div>
</div>
</div>
</header>

23
assets/html/003_descripcion.html Normal file
View File

@ -0,0 +1,23 @@
<section id="descripcion">
<div class="ui container">
<div class="left column">
<div class="images">
<div class="ui medium image">
<img src="./assets/images/seccion11.png" />
</div>
<div class="ui medium image">
<img src="./assets/images/seccion12.png" />
</div>
<div class="ui medium image">
<img src="./assets/images/seccion13.png" />
</div>
</div>
<div class="paragraph">
<div class="header">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
</div>
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
</div>
</div>
</div>
</section>

61
assets/html/004_ventajas.html Normal file
View File

@ -0,0 +1,61 @@
<section id="ventajas">
<div class="diagonal"></div>
<div class="ui container">
<div class="left column">
<div class="titulo">
VENTAJAS
</div>
<div class="ui two columns stackable grid">
<div class="column">
<div class="gallery">
<div class="ui large image">
<img src="./assets/images/foto1.jpg" />
</div>
<div class="nav left">
<i class="angle left icon"></i>
</div>
<div class="nav right">
<i class="angle right icon"></i>
</div>
</div>
</div>
<div class="column">
<div class="ui two columns grid">
<div class="row">
<div class="column">
<div class="ui center aligned basic segment">
<i class="pallet icon"></i>
<br />
Apoyo estable para el dispositivo
</div>
</div>
<div class="column">
<div class="ui center aligned basic segment">
<i class="angle icon"></i>
<br />
&Aacute;ngulo preciso de inclinaci&oacute;n para usar en conferencias
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui center aligned basic segment">
<i class="bolt icon"></i>
<br />
Compatible con tablets, permite cargar mientras se usa
</div>
</div>
<div class="column">
<div class="ui center aligned basic segment">
<i class="thumbs up icon"></i>
<br />
Dise&ntilde;o moderno y minimalista
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

53
assets/html/005_dimensiones.html Normal file
View File

@ -0,0 +1,53 @@
<section id="dimensiones">
<div class="fondo-gris"></div>
<div class="ui container">
<div class="left column">
<div class="titulo">
DIMENSIONES Y COLORES
</div>
<div class="ui stackable grid">
<div class="column">
<div class="ui medium image">
<img src="./assets/images/dimensiones.svg" />
</div>
</div>
<div class="column">
<div class="ui grid">
<div class="row">
<div class="sixteen wide column">
<div class="colores">
<div class="white circle"></div>
<div class="black circle"></div>
<div class="blue selected 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>
<div class="row fotos">
<div class="five wide column">
<div class="ui image">
<img src="./assets/images/fotos/azul/left-small.jpg" class="left-small" />
</div>
</div>
<div class="five wide column">
<div class="ui image">
<img src="./assets/images/fotos/azul/left.jpg" class="left" />
</div>
</div>
<div class="five wide column">
<div class="ui image">
<img src="./assets/images/fotos/azul/right.jpg" class="right" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

18
assets/html/006_construido.html Normal file
View File

@ -0,0 +1,18 @@
<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>

96
assets/html/007_corporativos.html Normal file
View File

@ -0,0 +1,96 @@
<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>
<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>
<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>
<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>

25
assets/html/008_testimonios.html Normal file
View File

@ -0,0 +1,25 @@
<section id="testimonios">
<div class="ui container">
<div class="titulo">
CLIENTES FELICES
</div>
<div class="ui grid">
<div class="three columns row">
<div class="column">
<div class="testimonio ui card"></div>
</div>
<div class="column">
<div class="testimonio ui card"></div>
</div>
<div class="column">
<div class="testimonio ui card"></div>
</div>
</div>
<div class="row">
<div class="sixteen wide column">
<div class="nav"></div>
</div>
</div>
</div>
</div>
</section>

62
assets/html/009_contacto.html Normal file
View File

@ -0,0 +1,62 @@
<section id="contacto">
<div class="ui container">
<div class="ui stackable grid">
<div class="column">
<div class="ui stackable grid">
<div class="column">
<div class="ui large image">
<img src="./assets/images/conversemos.png" />
</div>
</div>
<div class="column">
<div class="ui center aligned basic segment">
<a href="http://wa.me/56965872558">
<div class="whatsapp">
<i class="whatsapp icon"></i>
CONVERSEMOS
</div>
</a>
<br />
<a href="mailto:contacto@3dstand.cl">
contacto@3dstand.cl
</a>
<br />
<i class="ui icons">
<a href="http://instagram.com/stand">
<i class="ui icons">
<i class="circle icon"></i>
<i class="instagram icon"></i>
</i>
</a>
<a href="http://facebook.com/stand">
<i class="ui icons">
<i class="circle icon"></i>
<i class="facebook f icon"></i>
</i>
</a>
</i>
</div>
</div>
</div>
</div>
<div class="column">
<div class="titulo">
CONVERSEMOS!
<a href="http://wa.me/56965872558">
<i class="green whatsapp icon"></i>
</a>
</div>
<div class="paragraph">
scing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nosventas
</div>
<form class="ui form" id="contacto">
<input type="text" name="nombre" placeholder="NOMBRE" />
<input type="text" name="mail" placeholder="E-MAIL" />
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
<button class="ui button">ENVIAR</button>
</form>
</div>
</div>
</div>
</section>

7
assets/html/101_footer.html Normal file
View File

@ -0,0 +1,7 @@
<!-- 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>
</html>

367
assets/index.html
View File

@ -1,367 +0,0 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Stand</title>
<meta name="keywords" content="stand, chile, celular, smartphone, telefono" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<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">
<div class="cabezal"></div>
<div class="seccion1"></div>
<div class="seccion2">
<div class="diagonal"></div>
</div>
<div class="dimensiones">
<div class="fondo-gris"></div>
</div>
<div class="construido"></div>
<div class="corporativos"></div>
<div class="testimonios"></div>
<div class="formulario"></div>
</div>
<div id="content" class="ui container">
<header id="header">
<nav class="ui borderless sticky menu">
<div class="ui simple dropdown item">
<div class="text">
<i class="bars icon"></i>
</div>
<div class="menu">
<a class="item" href="./">Inicio</a>
<a class="item" href="./#seccion2">Ventajas</a>
<a class="item" href="./#dimensiones">Dimensiones</a>
<a class="item" href="./#corporativos">Corporativos</a>
<a class="item" href="./#felices">Testimonios</a>
<a class="item" href="./#formulario">Contacto</a>
</div>
</div>
<div class="right menu">
<a class="item" href="./#formulario">
<i class="shopping cart icon">
<div>0</div>
</i>
</a>
</div>
</nav>
<div class="logo ui center aligned basic segment">
<img src="./assets/images/logo.svg" />
<div class="frase1">
SOPORTES PARA SMARTPHONE Y TABLETS
</div>
<div class="frase2">
Diseñado y Fabricado en Chile
</div>
</div>
</header>
<div class="column1 column" id="column">
<section id="seccion1" class="ui simple segment">
<div class="image-container">
<div class="corte1">
<img src="./assets/images/seccion11.png" />
<img src="./assets/images/seccion12.png" />
</div>
<div class="corte2">
<img src="./assets/images/seccion13.png" />
</div>
</div>
<div class="paragraph">
<div class="header">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
</div>
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
</div>
</section>
<section id="seccion2" class="ui simple segment">
<div class="column1 column">
<img src="./assets/images/foto1.jpg" />
</div>
<div class="column2 column">
<div class="row">
<div class="header">
VENTAJAS
</div>
<ul>
<li>Apoyo estable del tel&eacute;fono</li>
<li>&Aacute;ngulo preciso de inclinaci&oacute;n para usar en conferencias</li>
<li>Compatible con tablets permite cargar mientras se usa</li>
<li>Dise&ntilde;o moderno y minimalista</li>
</ul>
</div>
<div class="row">
<img src="./assets/images/foto2.jpg" />
<img src="./assets/images/foto3.jpg" />
<img src="./assets/images/foto1.jpg" />
<img src="./assets/images/foto2.jpg" />
</div>
</div>
</section>
<section id="dimensiones" class="ui simple segment">
<div class="header">
<span class="bigger">DIMENSIONES</span> y colores
</div>
<div class="images">
<div class="column">
<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>
<section id="construido" class="ui simple segment">
<div class="header">
CONSTRUIDOS EN IMPRESI&Oacute;N 3D
</div>
</section>
</div>
<div class="column2 column fondo-blanco">
<div class="ui sticky">
<form class="ui form" name="form-sticky">
<div class="row">
<div class="column1 column">
<div class="titulo linea">
STAND
</div>
<div class="precio linea">
$ 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>
<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 class="input">
<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/azul.png" />
</div>
</div>
<div class="row">
<button class="ui grey button" type="submit">AGREGAR AL CARRO</button>
</div>
</form>
</div>
</div>
<section id="corporativos" class="ui simple segment">
<div class="column1 column">
<div class="header">
<span class="bigger">CORPORATIVOS</span> Regalos y m&aacute;s ...
</div>
<div class="opciones">
<div class="opcion">
<div class="img-grande">
<img src="./assets/images/foto2.jpg" />
</div>
<div class="descripcion">
<div class="content">
<div class="header">
LOGO ABAJO
</div>
<ul>
<li>Siempre visible</li>
<li>Menor tamaño</li>
</ul>
</div>
<div class="images">
<img src="./assets/images/foto3.jpg" />
<img src="./assets/images/foto1.jpg" />
</div>
</div>
</div>
<div class="opcion">
<div class="img-grande">
<img src="./assets/images/foto3.jpg" />
</div>
<div class="descripcion">
<div class="content">
<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>
<div class="images">
<img src="./assets/images/foto1.jpg" />
<img src="./assets/images/foto2.jpg" />
</div>
</div>
</div>
</div>
</div>
<div class="column2 column fondo-blanco">
<div class="header">
COTIZA CON NOSOTROS
</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>
</section>
<section id="felices" class="ui simple segment">
<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">
<div class="flotante">
<div class="content">
<a href="https://wa.me/56994450117" class="item">
<div class="whatsapp">
<i class="whatsapp icon"></i>
CONVERSEMOS
</div>
</a>
<a href="mailto:ventas@stand.cl" class="item">
<div>
ventas@3Dstand.cl
</div>
</a>
<div class="rrss item">
<a href="http://www.instagram.com/stand">
<i class="icons">
<i class="inverted grey large circle icon"></i>
<i class="grey instagram icon"></i>
</i>
</a>
<a href="http://www.facebook.com/stand">
<i class="icons">
<i class="inverted grey large circle icon"></i>
<i class="grey facebook f icon"></i>
</i>
</a>
<!--
<a href="http://www.youtube.com/stand">
<i class="icons">
<i class="inverted grey large circle icon"></i>
<i class="grey youtube icon"></i>
</i>
</a>
<a href="http://www.linkedin.com/stand">
<i class="icons">
<i class="inverted grey large circle icon"></i>
<i class="grey linkedin in icon"></i>
</i>
</a>-->
</div>
</div>
</div>
<div class="column1 column">
<img src="./assets/images/conversemos.png" />
</div>
<div class="column2 column">
<div class="header">
CONVERSEMOS! <a href="https://wa.me/56994450117" class="whatsapp-link"><i class="green whatsapp icon"></i></a>
</div>
<div class="paragraph">
scing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nosventas
</div>
<form class="ui form" id="contacto">
<input type="text" name="nombre" placeholder="NOMBRE" />
<input type="text" name="mail" placeholder="E-MAIL" />
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
<button class="ui button">ENVIAR</button>
</form>
</div>
</section>
</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>
<script type="text/javascript" src="https://smtpjs.com/v3/smtp.js"></script>
<script type="text/javascript" src="./assets/scripts/main.min.js"></script>
</body>

84
assets/js/main.js
View File

@ -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()

4
assets/sass/_common.scss Normal file
View File

@ -0,0 +1,4 @@
@import 'header';
@import 'descripcion';
@import 'ventajas';
@import 'dimensiones';

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

@ -0,0 +1,7 @@
#descripcion {
background-image: linear-gradient($gris, $gris);
.images {
text-align: center;
}
}

24
assets/sass/_dimensiones.scss Normal file
View File

@ -0,0 +1,24 @@
#dimensiones {
position: relative;
background-image: $fondo_ventajas_dimensiones;
.fondo-gris {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba($gris, .5);
}
.left.column {
&>.grid {
&>.column:first-child {
min-width: 33% !important;
}
&>.column:last-child {
min-width: 67% !important;
}
}
}
}

35
assets/sass/_header.scss Normal file
View File

@ -0,0 +1,35 @@
#header {
background-image: $fondo_cabezal;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, .4);
background-blend-mode: multiply;
color: $blanco;
.container {
#menu {
background: none !important;
border: none !important;
box-shadow: none !important;
.right.menu {
.item {
.shopping.cart {
.cantidad {
position: relative;
color: $blanco;
}
}
}
}
}
.segment {
margin: 0 !important;
#logo {
img {
width: 50%;
}
}
}
}
}

14
assets/sass/_phone.scss
View File

@ -1,5 +1,15 @@
@import 'phone_vars';
@import 'phone/header';
@import 'phone/descripcion';
@import 'phone/ventajas';
@import 'phone/dimensiones';
.left.column {
width: 75%;
padding-left: rem(5) !important;
}
#backgrounds {
.cabezal {
height: (map.get($heights, 'cabezal'))+rem;
@ -22,7 +32,7 @@
.seccion2 {
height: (map.get($heights, "seccion2"))+rem;
background-image: $fondo_seccion23;
background-image: $fondo_ventajas_dimensiones;
.diagonal {
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
@ -32,7 +42,7 @@
.dimensiones {
height: (map.get($heights, "dimensiones"))+rem;
background-image: $fondo_seccion23;
background-image: $fondo_ventajas_dimensiones;
.fondo-gris {
width: 100%;
height: 100%;

4
assets/sass/_phone_vars.scss
View File

@ -8,8 +8,8 @@ $full_width: 600;
$heights: (
"cabezal": (400/16),
"seccion1": 25,
"seccion2": 27.5,
"descripcion": 25,
"ventajas": 27.5,
"dimensiones": 27.5,
"construido": 21.875,
"corporativos": (520/16),

6
assets/sass/_variables.scss
View File

@ -12,6 +12,6 @@ $font_family: Roboto, sans;
// Fondos
$fondo_cabezal: url('../images/banner.jpg');
$fondo_seccion23: url('../images/fondo23.png');
$fondo_construido: url('../images/fondo4.jpg');
$fondo_corporativo: url('../images/fondo5.png');
$fondo_ventajas_dimensiones: url('../images/tripode.png');
$fondo_construido: url('../images/construido.jpg');
$fondo_corporativo: url('../images/corporativo.png');

39
assets/sass/_ventajas.scss Normal file
View File

@ -0,0 +1,39 @@
#ventajas {
position: relative;
background-image: $fondo_ventajas_dimensiones;
.diagonal {
position: absolute;
background-blend-mode: color;
}
.gallery {
position: relative;
text-align: center;
.image {
max-height: inherit;
img {
max-height: inherit;
margin: auto;
}
}
.nav {
position: absolute;
}
.nav.left {
top: 50%;
left: 0;
}
.nav.right {
top: 50%;
right: 0;
}
&::after {
clear: both;
}
}
}

107
assets/sass/_pc.scss → assets/sass/_wide.scss
View File

@ -1,28 +1,25 @@
@import 'pc_vars';
@import 'wide_vars';
@import 'wide/header';
@import 'wide/descripcion';
@import 'wide/ventajas';
@import 'wide/dimensiones';
.left.column {
width: 67%;
padding-left: rem(5) !important;
}
section .titulo {
font-size: font_size(22);
padding-top: rem(54);
padding-bottom: rem(25);
}
#backgrounds {
.cabezal {
height: (map.get($heights, 'cabezal'))+rem;
background-image: $fondo_cabezal;
background-repeat: no-repeat;
background-size: rem(1600);
background-position: bottom rem(-40) center;
background-color: rgba(0, 0, 0, .4);
background-blend-mode: multiply;
}
.seccion1 {
height: (map.get($heights, "seccion1"))+rem;
background-image: linear-gradient($gris, $gris);
background-position: left rem(112);
background-size: 100% rem(128);
background-repeat: no-repeat;
}
.seccion2 {
height: (map.get($heights, "seccion2"))+rem;
background-image: $fondo_seccion23;
background-image: $fondo_ventajas_dimensiones;
.diagonal {
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
@ -32,7 +29,7 @@
.dimensiones {
height: (map.get($heights, "dimensiones"))+rem;
background-image: $fondo_seccion23;
background-image: $fondo_ventajas_dimensiones;
.fondo-gris {
width: 100%;
height: 100%;
@ -64,14 +61,7 @@
}
}
html {
height: ($content_height)+rem;
overflow: hidden;
}
body {
height: ($content_height)+rem;
font-family: $font_family;
color: $gris_standard;
}
@ -82,66 +72,6 @@ body {
position: relative;
top: (-$content_height)+rem;
#header {
color: rgb(255, 255, 255);
width: 100%;
height: (map.get($heights, 'cabezal'))+rem;
.ui.menu {
border: none !important;
background: none !important;
//background-color: rgba(100, 100, 100, .3) !important;
box-shadow: none !important;
margin: 0 !important;
color: rgb(0, 0, 0);
.dropdown .menu {
/*background: none !important;
border: none !important;
box-shadow: none !important;*/
color: rgb(0, 0, 0);
font-size: 1rem;
.item {
padding: 1rem !important;
}
}
.item {
color: inherit !important;
font-size: 2rem;
padding: rem(20) !important;
.shopping.cart div {
position: relative;
color: rgb(255, 255, 255);
display: inline-block;
top: -2.6rem;
left: 0.2rem;
font-size: 1rem;
font-family: Roboto, sans;
}
}
}
.logo {
padding: 0 !important;
margin: 0 !important;
img {
width: 50%;
max-width: rem(1030);
}
.frase1 {
font-size: 1.5rem;
}
.frase2 {
font-size: 1rem;
}
}
}
&>.column {
display: inline-block;
float: left;
@ -212,7 +142,6 @@ body {
width: rem(380);
padding: 2rem;
margin-left: -3rem;
overflow: hidden;
.header {
font-weight: bold;

4
assets/sass/_pc_vars.scss → assets/sass/_wide_vars.scss
View File

@ -8,8 +8,8 @@ $full_width: 1080;
$heights: (
"cabezal": (500/16),
"seccion1": 25,
"seccion2": 27.5,
"descripcion": 25,
"ventajas": 27.5,
"dimensiones": 27.5,
"construido": 21.875,
"corporativos": (520/16),

9
assets/sass/main.scss
View File

@ -1,9 +1,16 @@
@use "sass:map";
@import 'reset';
@import 'variables';
html {
font-family: $font_family;
}
@import 'common';
@media screen and (max-width: 800px) {
@import 'phone';
}
@media screen and (min-width: 800px) {
@import 'pc';
@import 'wide';
}

13
assets/sass/phone/_descripcion.scss Normal file
View File

@ -0,0 +1,13 @@
#descripcion {
.paragraph {
padding-top: rem(18);
line-height: rem(14);
text-align: justify;
.header {
margin-bottom: rem(6);
font-size: font_size(18);
}
}
padding-bottom: rem(5);
}

10
assets/sass/phone/_dimensiones.scss Normal file
View File

@ -0,0 +1,10 @@
#dimensiones {
.header {
font-size: font_size(22);
padding-top: rem(54);
padding-bottom: rem(25);
}
$circle_radius: 15;
@include colors;
}

30
assets/sass/phone/_header.scss Normal file
View File

@ -0,0 +1,30 @@
#header {
height: (map.get($heights, 'cabezal'))+rem;
background-size: 160%;
background-position: bottom rem(-10) center;
.container {
#menu {
font-size: font_size(16);
.right.menu {
.item {
.shopping.cart {
.cantidad {
top: rem(-20);
left: rem(1.6);
font-size: font_size(8);
}
}
}
}
}
.segment {
#logo {
img {
max-width: rem($full_width);
}
}
}
}
}

12
assets/sass/phone/_ventajas.scss Normal file
View File

@ -0,0 +1,12 @@
#ventajas {
//height: (map.get($heights, "ventajas"))+rem;
.diagonal {
border-bottom: 100% solid rgba($gris, .5);
border-right: 100% solid transparent;
}
.gallery {
max-height: (map.get($heights, 'ventajas')-32/16)+rem;
}
}

23
assets/sass/wide/_descripcion.scss Normal file
View File

@ -0,0 +1,23 @@
#descripcion {
height: (map.get($heights, "descripcion"))+rem;
background-position: left rem(112);
background-size: 100% rem(128);
background-repeat: no-repeat;
.images {
.image {
max-width: 33%;
}
}
.paragraph {
padding-top: rem(28);
line-height: rem(14);
text-align: justify;
.header {
margin-bottom: rem(16);
font-size: font_size(22/16*12);
}
}
}

6
assets/sass/wide/_dimensiones.scss Normal file
View File

@ -0,0 +1,6 @@
#dimensiones {
margin-top: rem(15);
$circle_radius: 20;
@include colors;
}

26
assets/sass/wide/_header.scss Normal file
View File

@ -0,0 +1,26 @@
#header {
height: (map.get($heights, 'cabezal'))+rem;
background-size: 160%;
background-position: bottom rem(-40) center;
.container {
#menu {
i {
font-size: font-size(24);
}
.right.menu {
.item {
.shopping.cart {
.cantidad {
font-size: font-size(12);
font-family: $font_family;
top: rem(-28);
left: rem(3.2);
}
}
}
}
}
}
}

10
assets/sass/wide/_ventajas.scss Normal file
View File

@ -0,0 +1,10 @@
#ventajas {
.diagonal {
border-bottom: (map.get($heights, 'ventajas'))+rem solid rgba($gris, .5);
border-right: rem(1900) solid transparent;
}
.gallery {
max-height: (map.get($heights, 'ventajas')-32/16)+rem;
}
}