Initial
This commit is contained in:
Araozu
commit
c88a442eaa
22
.htaccess
Normal file
22
.htaccess
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
# redirigir y eliminar php (Yay! Funciona c:)
|
||||||
|
RewriteCond %{THE_REQUEST} /([^.]+)\.php [NC]
|
||||||
|
RewriteRule ^ /%1 [NC,L,R=301]
|
||||||
|
|
||||||
|
RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
|
||||||
|
RewriteRule ^ /%1 [NC,L,R=301]
|
||||||
|
|
||||||
|
RewriteCond %{REQUEST_FILENAME}.php -f
|
||||||
|
RewriteRule ^ %{REQUEST_URI}.php [NC,L]
|
||||||
|
|
||||||
|
## Desabilitar cache de Apache
|
||||||
|
<FilesMatch "\.(html|htm|js|css)$">
|
||||||
|
FileETag None
|
||||||
|
<IfModule mod_headers.c>
|
||||||
|
Header unset ETag
|
||||||
|
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
|
||||||
|
Header set Pragma "no-cache"
|
||||||
|
Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
|
||||||
|
</IfModule>
|
||||||
|
</FilesMatch>
|
||||||
428
css/base.css
Normal file
428
css/base.css
Normal file
@ -0,0 +1,428 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css?family=Muli|Open+Sans");
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: #44A;
|
||||||
|
box-shadow: 0 5px 5px #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background-color: #3d3d7c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 150ms ease-out;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #333;
|
||||||
|
color: #EEE;
|
||||||
|
box-shadow: inset 0 5px 5px #999999;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contenedor {
|
||||||
|
max-width: 1200px;
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1 {
|
||||||
|
width: 8.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-2 {
|
||||||
|
width: 16.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-4 {
|
||||||
|
width: 33.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-5 {
|
||||||
|
width: 41.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-6 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-7 {
|
||||||
|
width: 58.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-8 {
|
||||||
|
width: 66.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-9 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-10 {
|
||||||
|
width: 83.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-11 {
|
||||||
|
width: 91.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-12 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*=col-] {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row::after {
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tituloP {
|
||||||
|
padding: 30px;
|
||||||
|
color: white;
|
||||||
|
font-size: 50px;
|
||||||
|
font-family: "Muli";
|
||||||
|
}
|
||||||
|
|
||||||
|
#tituloP--descripcion {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: large;
|
||||||
|
font-family: "Open Sans";
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boton {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 20px;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 1px 1px 3px #090909;
|
||||||
|
padding: 10px 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mySeccion {
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 150ms ease-out;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#botonRegistro {
|
||||||
|
background-color: green;
|
||||||
|
color: white;
|
||||||
|
font-size: large;
|
||||||
|
transition: transform 200ms, box-shadow 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
#botonRegistro:hover {
|
||||||
|
transform: translate(-1px, -1px);
|
||||||
|
box-shadow: 2px 2px 7px #050505;
|
||||||
|
}
|
||||||
|
|
||||||
|
#botonInicioSesion {
|
||||||
|
background-color: white;
|
||||||
|
transition: transform 200ms, box-shadow 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
#botonInicioSesion:hover {
|
||||||
|
transform: translate(-1px, -1px);
|
||||||
|
box-shadow: 2px 2px 7px #050505;
|
||||||
|
}
|
||||||
|
|
||||||
|
#botonInicioSesion:visited {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contenido {
|
||||||
|
margin: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
padding: 0 20px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.descripcionComida {
|
||||||
|
padding: 0 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inicio_registro {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
min-width: 80%;
|
||||||
|
min-height: 40px;
|
||||||
|
padding: 10px;
|
||||||
|
color: #44A;
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botonEnviarForm {
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 1px 1px 2px gray;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botonEnviarForm:hover {
|
||||||
|
background-color: #4949e2;
|
||||||
|
color: white;
|
||||||
|
transform: translate(-1px, -1px);
|
||||||
|
box-shadow: 2px 2px 2px gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.google-button {
|
||||||
|
height: 40px;
|
||||||
|
border-width: 0;
|
||||||
|
background: white;
|
||||||
|
color: #737373;
|
||||||
|
border-radius: 5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05);
|
||||||
|
transition-property: background-color, box-shadow;
|
||||||
|
transition-duration: 150ms;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.google-button:focus, .google-button:hover {
|
||||||
|
box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.google-button:active {
|
||||||
|
background-color: #e5e5e5;
|
||||||
|
box-shadow: none;
|
||||||
|
transition-duration: 10ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.google-button__icon {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 8px 0 8px 8px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.google-button__text {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 0 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: "Roboto", arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unseen {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botonAddCart {
|
||||||
|
background-color: white;
|
||||||
|
padding: 5px;
|
||||||
|
color: #4444aa;
|
||||||
|
box-shadow: 0.1px 0.1px grey;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: large;
|
||||||
|
transition: background-color 250ms, color 250ms;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botonAddCart:hover {
|
||||||
|
background-color: #4444AA;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caja {
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 1px 1px 2px gray;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botonPayPal, .botonVisa {
|
||||||
|
background-color: #0070ba;
|
||||||
|
color: white;
|
||||||
|
font-size: large;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botonVisa {
|
||||||
|
background-color: #1a1f5e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linksNavBar {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.linksNavBar li {
|
||||||
|
list-style: none;
|
||||||
|
float: left;
|
||||||
|
transition: background-color 250ms;
|
||||||
|
}
|
||||||
|
.linksNavBar li a {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 15px;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.linksNavBar li:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.linksNavBar li:hover {
|
||||||
|
background-color: #35356a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plato--Titulo {
|
||||||
|
font-size: x-large;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: "Muli";
|
||||||
|
color: #3d3d7c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plato--Descripcion {
|
||||||
|
font-size: large;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plato--Precio {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
.plato--Precio:before {
|
||||||
|
color: green;
|
||||||
|
content: "Precio unitario: ";
|
||||||
|
}
|
||||||
|
.plato--Precio:after {
|
||||||
|
content: " S/.";
|
||||||
|
}
|
||||||
|
|
||||||
|
.plato--Cantidad {
|
||||||
|
font-size: large;
|
||||||
|
font-weight: bold;
|
||||||
|
display: inline-table;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plato--Cantidad--Icon {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 250ms;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.plato--Cantidad--Icon:hover {
|
||||||
|
color: #4444aa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carrito {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carrito--elementos, #carrito--precio {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carritoElem:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carritoElem--img {
|
||||||
|
float: left;
|
||||||
|
margin: 10px 20px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carrito--subTotal {
|
||||||
|
text-align: right;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: "Muli", sans-serif;
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
.carrito--subTotal:before {
|
||||||
|
content: "Subtotal: ";
|
||||||
|
}
|
||||||
|
.carrito--subTotal:after {
|
||||||
|
content: " S/.";
|
||||||
|
}
|
||||||
|
|
||||||
|
.carrito--precio--contenido--titulo {
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Muli", sans-serif;
|
||||||
|
font-size: x-large;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carrito--precio--contenido--botonPagar {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #4444aa;
|
||||||
|
color: white;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.carrito--precio--contenido--botonPagar:hover {
|
||||||
|
background-color: #3d3d7c;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carrito--boton--seguircomprando {
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: green;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
#carrito--boton--seguircomprando:visited {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#carrito--tituloprincipal {
|
||||||
|
text-align: center;
|
||||||
|
font-size: xx-large;
|
||||||
|
font-family: "Muli", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=base.css.map */
|
||||||
1
css/base.css.map
Normal file
1
css/base.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["base.sass"],"names":[],"mappings":"AAAQ;AAKR;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EAEE;EACA,aAvFY;;;AAyFhB;EACE;EAEE;EACA,aA5Fc;;;AA8FlB;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EAEE;;;AAEF;EACE;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;;;AAEN;EAEI;EACA;EACA,aAzQY;EA0Qd;;;AAEF;EAEI;EACF;;;AAEF;EACE;;AACA;EACE;EACA;;AACF;EACE;;;AAEJ;EAEI;EACA;EACF;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAEJ;EACE;;;AAEF;EACE;;;AAGA;EACE;;;AAEJ;EACE;EACA;EACA;;;AAEF;EACE;EAEE;EACA;EACA;;AACF;EACE;;AACF;EACE;;;AAEJ;EACE;EAEE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAEJ;EACE;EAEE;EACA;EACA;EACF","file":"base.css"}
|
||||||
366
css/base.sass
Normal file
366
css/base.sass
Normal file
@ -0,0 +1,366 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Muli|Open+Sans')
|
||||||
|
|
||||||
|
$fuenteTitulos: 'Muli'
|
||||||
|
$fuentePrincipal: 'Open Sans'
|
||||||
|
|
||||||
|
*
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
html, body
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
font-family: $fuentePrincipal, sans-serif
|
||||||
|
|
||||||
|
header
|
||||||
|
background-color: #44A
|
||||||
|
box-shadow: 0 5px 5px #999999
|
||||||
|
|
||||||
|
nav
|
||||||
|
background-color: #3d3d7c
|
||||||
|
color: white
|
||||||
|
|
||||||
|
section
|
||||||
|
overflow: hidden
|
||||||
|
transition: height 150ms ease-out
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
footer
|
||||||
|
background-color: #333
|
||||||
|
color: #EEE
|
||||||
|
box-shadow: inset 0 5px 5px #999999
|
||||||
|
padding: 40px
|
||||||
|
|
||||||
|
.contenedor
|
||||||
|
max-width: 1200px
|
||||||
|
width: 80%
|
||||||
|
margin: auto
|
||||||
|
|
||||||
|
.col-1
|
||||||
|
width: 8.33%
|
||||||
|
|
||||||
|
.col-2
|
||||||
|
width: 16.66%
|
||||||
|
|
||||||
|
.col-3
|
||||||
|
width: 25%
|
||||||
|
|
||||||
|
.col-4
|
||||||
|
width: 33.33%
|
||||||
|
|
||||||
|
.col-5
|
||||||
|
width: 41.66%
|
||||||
|
|
||||||
|
.col-6
|
||||||
|
width: 50%
|
||||||
|
|
||||||
|
.col-7
|
||||||
|
width: 58.33%
|
||||||
|
|
||||||
|
.col-8
|
||||||
|
width: 66.66%
|
||||||
|
|
||||||
|
.col-9
|
||||||
|
width: 75%
|
||||||
|
|
||||||
|
.col-10
|
||||||
|
width: 83.33%
|
||||||
|
|
||||||
|
.col-11
|
||||||
|
width: 91.66%
|
||||||
|
|
||||||
|
.col-12
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
[class*="col-"]
|
||||||
|
float: left
|
||||||
|
|
||||||
|
.row::after
|
||||||
|
content: ""
|
||||||
|
clear: both
|
||||||
|
display: table
|
||||||
|
|
||||||
|
.center
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
#tituloP
|
||||||
|
padding: 30px
|
||||||
|
color: white
|
||||||
|
font:
|
||||||
|
size: 50px
|
||||||
|
family: $fuenteTitulos
|
||||||
|
|
||||||
|
#tituloP--descripcion
|
||||||
|
padding: 10px
|
||||||
|
font:
|
||||||
|
size: large
|
||||||
|
family: $fuentePrincipal
|
||||||
|
|
||||||
|
.center
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
.boton
|
||||||
|
display: inline-block
|
||||||
|
margin: 20px
|
||||||
|
border-radius: 3px
|
||||||
|
box-shadow: 1px 1px 3px #090909
|
||||||
|
padding: 10px 30px
|
||||||
|
cursor: pointer
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
.mySeccion
|
||||||
|
overflow: hidden
|
||||||
|
transition: height 150ms ease-out
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
#botonRegistro
|
||||||
|
background-color: green
|
||||||
|
color: white
|
||||||
|
font-size: large
|
||||||
|
transition: transform 200ms, box-shadow 200ms
|
||||||
|
|
||||||
|
#botonRegistro:hover
|
||||||
|
transform: translate(-1px, -1px)
|
||||||
|
box-shadow: 2px 2px 7px #050505
|
||||||
|
|
||||||
|
#botonInicioSesion
|
||||||
|
background-color: white
|
||||||
|
transition: transform 200ms, box-shadow 200ms
|
||||||
|
|
||||||
|
#botonInicioSesion:hover
|
||||||
|
transform: translate(-1px, -1px)
|
||||||
|
box-shadow: 2px 2px 7px #050505
|
||||||
|
|
||||||
|
#botonInicioSesion:visited
|
||||||
|
color: black
|
||||||
|
|
||||||
|
.contenido
|
||||||
|
margin: 40px 0
|
||||||
|
|
||||||
|
.image
|
||||||
|
padding: 0 20px
|
||||||
|
width: 100%
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
.descripcionComida
|
||||||
|
padding: 0 30px
|
||||||
|
text-align: center
|
||||||
|
font-size: large
|
||||||
|
|
||||||
|
.inicio_registro
|
||||||
|
color: white
|
||||||
|
|
||||||
|
input
|
||||||
|
min-width: 80%
|
||||||
|
min-height: 40px
|
||||||
|
padding: 10px
|
||||||
|
color: #44A
|
||||||
|
font-size: large
|
||||||
|
|
||||||
|
.botonEnviarForm
|
||||||
|
background-color: white
|
||||||
|
box-shadow: 1px 1px 2px gray
|
||||||
|
cursor: pointer
|
||||||
|
border: none
|
||||||
|
transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms
|
||||||
|
|
||||||
|
.botonEnviarForm:hover
|
||||||
|
background-color: #4949e2
|
||||||
|
color: white
|
||||||
|
transform: translate(-1px, -1px)
|
||||||
|
box-shadow: 2px 2px 2px gray
|
||||||
|
|
||||||
|
.google-button
|
||||||
|
height: 40px
|
||||||
|
border-width: 0
|
||||||
|
background: white
|
||||||
|
color: #737373
|
||||||
|
border-radius: 5px
|
||||||
|
white-space: nowrap
|
||||||
|
box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05)
|
||||||
|
transition-property: background-color, box-shadow
|
||||||
|
transition-duration: 150ms
|
||||||
|
transition-timing-function: ease-in-out
|
||||||
|
padding: 0
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
.google-button:focus, .google-button:hover
|
||||||
|
box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
|
.google-button:active
|
||||||
|
background-color: #e5e5e5
|
||||||
|
box-shadow: none
|
||||||
|
transition-duration: 10ms
|
||||||
|
|
||||||
|
.google-button__icon
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: middle
|
||||||
|
margin: 8px 0 8px 8px
|
||||||
|
width: 18px
|
||||||
|
height: 18px
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
.google-button__text
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: middle
|
||||||
|
padding: 0 24px
|
||||||
|
font-size: 14px
|
||||||
|
font-weight: bold
|
||||||
|
font-family: 'Roboto', arial, sans-serif
|
||||||
|
|
||||||
|
.unseen
|
||||||
|
visibility: hidden
|
||||||
|
|
||||||
|
.botonAddCart
|
||||||
|
background-color: white
|
||||||
|
padding: 5px
|
||||||
|
color: #4444aa
|
||||||
|
box-shadow: 0.1px 0.1px grey
|
||||||
|
border-radius: 2px
|
||||||
|
cursor: pointer
|
||||||
|
font-size: large
|
||||||
|
transition: background-color 250ms, color 250ms
|
||||||
|
user-select: none
|
||||||
|
|
||||||
|
.botonAddCart:hover
|
||||||
|
background-color: #4444AA
|
||||||
|
color: white
|
||||||
|
|
||||||
|
.caja
|
||||||
|
border-radius: 4px
|
||||||
|
box-shadow: 1px 1px 2px gray
|
||||||
|
padding: 15px
|
||||||
|
|
||||||
|
.botonPayPal
|
||||||
|
background-color: #0070ba
|
||||||
|
color: white
|
||||||
|
font-size: large
|
||||||
|
padding: 10px
|
||||||
|
border: none
|
||||||
|
border-radius: 5px
|
||||||
|
cursor: pointer
|
||||||
|
margin: 0 5px
|
||||||
|
|
||||||
|
.botonVisa
|
||||||
|
@extend .botonPayPal
|
||||||
|
background-color: #1a1f5e
|
||||||
|
|
||||||
|
.linksNavBar
|
||||||
|
margin: 0
|
||||||
|
li
|
||||||
|
list-style: none
|
||||||
|
float: left
|
||||||
|
transition: background-color 250ms
|
||||||
|
a
|
||||||
|
cursor: pointer
|
||||||
|
display: inline-block
|
||||||
|
padding: 15px
|
||||||
|
color: white
|
||||||
|
text-decoration: none
|
||||||
|
&:after
|
||||||
|
clear: both
|
||||||
|
&:hover
|
||||||
|
background-color: #35356a
|
||||||
|
|
||||||
|
.plato--Titulo
|
||||||
|
font:
|
||||||
|
size: x-large
|
||||||
|
weight: bold
|
||||||
|
family: $fuenteTitulos
|
||||||
|
color: #3d3d7c
|
||||||
|
|
||||||
|
.plato--Descripcion
|
||||||
|
font:
|
||||||
|
size: large
|
||||||
|
color: #333333
|
||||||
|
|
||||||
|
.plato--Precio
|
||||||
|
font-size: large
|
||||||
|
&:before
|
||||||
|
color: green
|
||||||
|
content: "Precio unitario: "
|
||||||
|
&:after
|
||||||
|
content: " S/."
|
||||||
|
|
||||||
|
.plato--Cantidad
|
||||||
|
font:
|
||||||
|
size: large
|
||||||
|
weight: bold
|
||||||
|
display: inline-table
|
||||||
|
padding: 15px
|
||||||
|
|
||||||
|
.plato--Cantidad--Icon
|
||||||
|
display: table-cell
|
||||||
|
vertical-align: top
|
||||||
|
cursor: pointer
|
||||||
|
transition: color 250ms
|
||||||
|
-webkit-user-select: none
|
||||||
|
-moz-user-select: none
|
||||||
|
-ms-user-select: none
|
||||||
|
user-select: none
|
||||||
|
&:hover
|
||||||
|
color: #4444aa
|
||||||
|
|
||||||
|
.carrito
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
#carrito--elementos, #carrito--precio
|
||||||
|
padding: 0 10px
|
||||||
|
|
||||||
|
.carritoElem
|
||||||
|
&:after
|
||||||
|
clear: both
|
||||||
|
|
||||||
|
.carritoElem--img
|
||||||
|
float: left
|
||||||
|
margin: 10px 20px
|
||||||
|
width: 200px
|
||||||
|
|
||||||
|
.carrito--subTotal
|
||||||
|
text-align: right
|
||||||
|
font:
|
||||||
|
weight: bold
|
||||||
|
family: $fuenteTitulos, sans-serif
|
||||||
|
size: x-large
|
||||||
|
&:before
|
||||||
|
content: "Subtotal: "
|
||||||
|
&:after
|
||||||
|
content: " S/."
|
||||||
|
|
||||||
|
.carrito--precio--contenido--titulo
|
||||||
|
text-align: center
|
||||||
|
font:
|
||||||
|
family: $fuenteTitulos, sans-serif
|
||||||
|
size: x-large
|
||||||
|
weight: 900
|
||||||
|
|
||||||
|
.carrito--precio--contenido--botonPagar
|
||||||
|
display: inline-block
|
||||||
|
width: 100%
|
||||||
|
text-align: center
|
||||||
|
padding: 10px
|
||||||
|
background-color: #4444aa
|
||||||
|
color: white
|
||||||
|
border-radius: 3px
|
||||||
|
cursor: pointer
|
||||||
|
&:hover
|
||||||
|
background-color: #3d3d7c
|
||||||
|
|
||||||
|
#carrito--boton--seguircomprando
|
||||||
|
margin: 10px 0
|
||||||
|
padding: 10px 20px
|
||||||
|
background-color: green
|
||||||
|
color: white
|
||||||
|
text-decoration: none
|
||||||
|
border-radius: 4px
|
||||||
|
&:visited
|
||||||
|
color: white
|
||||||
|
|
||||||
|
#carrito--tituloprincipal
|
||||||
|
text-align: center
|
||||||
|
font:
|
||||||
|
size: xx-large
|
||||||
|
family: $fuenteTitulos, sans-serif
|
||||||
|
weight: 900
|
||||||
|
margin: 10px 0
|
||||||
|
|
||||||
|
|
||||||
192
index.php
Normal file
192
index.php
Normal file
@ -0,0 +1,192 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<title>Cocina Francesa</title>
|
||||||
|
<link rel="stylesheet" href="./css/base.css" type="text/css"/>
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
|
rel="stylesheet">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script src="./js/topbar.js"></script>
|
||||||
|
|
||||||
|
<header id="header">
|
||||||
|
<div class="contenedor">
|
||||||
|
<div id="tituloP" class="center">
|
||||||
|
<a href="./#" style="color: white; text-decoration: none">Cocina Francesa</a>
|
||||||
|
<div id="tituloP--descripcion">
|
||||||
|
Descubre un nuevo sabor
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
|
||||||
|
<a href="./#registro" id="botonRegistro" class="boton">
|
||||||
|
Registrarse
|
||||||
|
</a>
|
||||||
|
<a href="./#iniciar-sesion" id="botonInicioSesion" class="boton">
|
||||||
|
Iniciar Sesion
|
||||||
|
</a>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
|
<div id="inicio_registro" class="mySeccion" data-collapsed="true" style="height: 0"></div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav id="navBar" class="mySeccion" data-collapsed="true">
|
||||||
|
<ul class="linksNavBar">
|
||||||
|
<li><a href="./#">Inicio</a></li>
|
||||||
|
<li><a href="./#usuarios/">Comprar</a></li>
|
||||||
|
<li><a href="./#usuarios/mi-cuenta">Mi cuenta</a></li>
|
||||||
|
<li><a href="./#usuarios/pagos">Carrito</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section id="sectionP" class="contenedor mySeccion" data-collapsed="false">
|
||||||
|
<div class="row contenido">
|
||||||
|
<div class="col-5">
|
||||||
|
<img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
|
||||||
|
alt="Plato Francés"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="descripcionComida">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur 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
|
||||||
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||||
|
deserunt mollit anim id est laborum.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-7 center">
|
||||||
|
<div class="descripcionComida">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||||
|
dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
|
||||||
|
malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
|
||||||
|
gravida
|
||||||
|
cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
|
||||||
|
sagittis.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-5">
|
||||||
|
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
|
||||||
|
alt="Plato Francés" class="image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="sectionS" class="contenedor mySeccion">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="sectionCarrito" class="contenedor mySeccion" data-collapsed="true" style="height: 0">
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<div class="center">
|
||||||
|
<div id="carrito--tituloprincipal">
|
||||||
|
Carrito de compras
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<a id="carrito--boton--seguircomprando" href="./#usuarios/">Seguir comprando</a>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<div id="carrito" class="row carrito">
|
||||||
|
|
||||||
|
<div id="carrito--elementos" class="col-8">
|
||||||
|
<div id="carrito--elementos--contenido" class="caja">
|
||||||
|
<template v-if="noEstaVacio">
|
||||||
|
<template v-for="producto in item">
|
||||||
|
<div class="carritoElem">
|
||||||
|
<img class="carritoElem--img" v-bind:src="producto.imgUrl">
|
||||||
|
<div class="plato--Titulo">{{ producto.nombre }}</div>
|
||||||
|
<br>
|
||||||
|
<div class="plato--Precio">{{ producto.precio }}</div>
|
||||||
|
<div class="plato--Cantidad">Cantidad:
|
||||||
|
<i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
|
||||||
|
<span>{{ producto.cantidad }}</span>
|
||||||
|
<i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
No hay nada en tu carrito de compras :c
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="carrito--precio" class="col-4">
|
||||||
|
|
||||||
|
<div id="carrito--precio--contenido" class="caja">
|
||||||
|
<template v-if="noEstaVacio">
|
||||||
|
<div id="pagos">
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
{{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; float: right; clear: both">
|
||||||
|
{{ subTotal }} S/.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
Descuentos:
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; float: right; clear: both">
|
||||||
|
{{ descuento }} S/.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div>
|
||||||
|
<div class="carrito--precio--contenido--titulo" style="display: inline-block;">
|
||||||
|
Total:
|
||||||
|
</div>
|
||||||
|
<div class="carrito--precio--contenido--titulo"
|
||||||
|
style="display: inline-block; float: right; clear: both">
|
||||||
|
{{ total }} S/.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a class="carrito--precio--contenido--botonPagar">
|
||||||
|
Completar Transaccion
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
No hay nada en tu carrito de compras :c
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer id="footer">
|
||||||
|
<div class="contenedor">
|
||||||
|
Cocina Francesa.<br/>
|
||||||
|
Una Single Page Application para el curso de IHC, UNSA, 2018.<br/>
|
||||||
|
Se utilizaron: Vue.js, BEM, Sass, npm, y PHP.<br>
|
||||||
|
<br/>
|
||||||
|
Desarrollado por Fernando Araoz, 20173373.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Vue -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||||
|
|
||||||
|
<!-- Logica principal -->
|
||||||
|
<script src="./js/base.js?v=2"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
67
iniciar-sesion.php
Normal file
67
iniciar-sesion.php
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<div class="contenedor inicio_registro">
|
||||||
|
<div class="center">
|
||||||
|
Inicia Sesión.
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-7 center">
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<img src="https://www.sbs.com.au/food/sites/sbs.com.au.food/files/styles/full/public/nicoise-salad.jpg?itok=MK0Y7QKN&mtime=1499834368"
|
||||||
|
alt="plato de comida" class="image">
|
||||||
|
</div>
|
||||||
|
<div class="col-5 center">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<button type="button" class="google-button" style="width: 213px">
|
||||||
|
<span class="google-button__icon">
|
||||||
|
<svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="google-button__text">Iniciar con Google</span>
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<button style="background-color: #4064ad; height: 40px; border: none; box-shadow: 1px 1px 2px black;
|
||||||
|
border-radius: 3px">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
|
||||||
|
id="Capa_1" x="0px" y="0px" width="20px" viewBox="0 0 96.124 96.123"
|
||||||
|
style="max-height: 18px" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803 c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654 c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246 c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z" style="fill: rgb(255, 255, 255);"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<span class="google-button__text" style="color: white; padding: 0 13px">Iniciar con Facebook</span>
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
O inicia sesión con tu correo:<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<form method="post" onsubmit="return false">
|
||||||
|
Correo Electrónico:<br />
|
||||||
|
<input type="text" placeholder="Tu correo Electrónico"><br />
|
||||||
|
<br />
|
||||||
|
Contraseña:<br />
|
||||||
|
<input type="password" placeholder="Contraseña"><br />
|
||||||
|
<br />
|
||||||
|
<input class="botonEnviarForm" type="submit" value="Iniciar Sesión">
|
||||||
|
</form>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
¿No tienes una cuenta?<br />
|
||||||
|
<a href="./#registro" id="botonRegistro" class="boton">
|
||||||
|
Regístrate
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
603
js/Router.js
Normal file
603
js/Router.js
Normal file
@ -0,0 +1,603 @@
|
|||||||
|
/* global window, module */
|
||||||
|
|
||||||
|
;(function (global, factory) {
|
||||||
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||||
|
typeof define === 'function' && define.amd ? define(factory) :
|
||||||
|
global.Router = factory()
|
||||||
|
}(this, (function () {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Router
|
||||||
|
*
|
||||||
|
* @version: 1.2.7
|
||||||
|
* @author Graidenix
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
*
|
||||||
|
* @param {object} options
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
function Router(options) {
|
||||||
|
var settings = this._getSettings(options);
|
||||||
|
|
||||||
|
|
||||||
|
this.notFoundHandler = settings.page404;
|
||||||
|
this.mode = (!window.history || !window.history.pushState) ? "hash" : settings.mode;
|
||||||
|
this.root = settings.root === "/" ? "/" : "/" + this._trimSlashes(settings.root) + "/";
|
||||||
|
this.beforeHook = settings.hooks.before;
|
||||||
|
this.securityHook = settings.hooks.secure;
|
||||||
|
|
||||||
|
this.routes = [];
|
||||||
|
if (settings.routes && settings.routes.length > 0) {
|
||||||
|
var _this = this;
|
||||||
|
settings.routes.forEach(function (route) {
|
||||||
|
_this.add(route.rule, route.handler, route.options);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this._pageState = null;
|
||||||
|
this._currentPage = null;
|
||||||
|
this._skipCheck = false;
|
||||||
|
this._action = null;
|
||||||
|
|
||||||
|
if (this.mode === "hash") {
|
||||||
|
this._historyStack = [];
|
||||||
|
this._historyIdx = 0;
|
||||||
|
this._historyState = "add"
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Define Router Page
|
||||||
|
*
|
||||||
|
* @param {string} uri
|
||||||
|
* @param {object} query
|
||||||
|
* @param {Array} params
|
||||||
|
* @param {object} state
|
||||||
|
* @param {object} options
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
*/
|
||||||
|
Router.Page = function (uri, query, params, state, options) {
|
||||||
|
this.uri = uri || "";
|
||||||
|
this.query = query || {};
|
||||||
|
this.params = params || [];
|
||||||
|
this.state = state || null;
|
||||||
|
this.options = options || {};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sanitize options and add default values
|
||||||
|
*
|
||||||
|
* @param {object} options
|
||||||
|
* @returns {object}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._getSettings = function (options) {
|
||||||
|
var settings = {};
|
||||||
|
var defaults = {
|
||||||
|
routes: [],
|
||||||
|
mode: "history",
|
||||||
|
root: "/",
|
||||||
|
hooks: {
|
||||||
|
"before": function () {
|
||||||
|
},
|
||||||
|
"secure": function () {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
page404: function (page) {
|
||||||
|
console.error({
|
||||||
|
page: page,
|
||||||
|
message: "404. Page not found"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
options = options || {};
|
||||||
|
["routes", "mode", "root", "page404"].forEach(function (key) {
|
||||||
|
settings[key] = options[key] || defaults[key];
|
||||||
|
});
|
||||||
|
|
||||||
|
settings.hooks = Object.assign({}, defaults.hooks, options.hooks || {});
|
||||||
|
|
||||||
|
return settings;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get URI for Router "history" mode
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
Router.prototype._getHistoryFragment = function () {
|
||||||
|
var fragment = decodeURI(window.location.pathname);
|
||||||
|
if (this.root !== "/") {
|
||||||
|
fragment = fragment.replace(this.root, "");
|
||||||
|
}
|
||||||
|
return this._trimSlashes(fragment);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get URI for router "hash" mode
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
Router.prototype._getHashFragment = function () {
|
||||||
|
var hash = window.location.hash.substr(1).replace(/(\?.*)$/, "");
|
||||||
|
return this._trimSlashes(hash);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get current URI
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
Router.prototype._getFragment = function () {
|
||||||
|
if (this.mode === "history") {
|
||||||
|
return this._getHistoryFragment();
|
||||||
|
} else {
|
||||||
|
return this._getHashFragment();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Trim slashes for path
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @param {string} path
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
Router.prototype._trimSlashes = function (path) {
|
||||||
|
if (typeof path !== "string") {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
return path.toString().replace(/\/$/, "").replace(/^\//, "");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 404 Page Handler
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._page404 = function (path) {
|
||||||
|
this._currentPage = new Router.Page(path);
|
||||||
|
this.notFoundHandler(path);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert the string route rule to RegExp rule
|
||||||
|
*
|
||||||
|
* @param {string} route
|
||||||
|
* @returns {RegExp}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._parseRouteRule = function (route) {
|
||||||
|
if (typeof route !== "string") {
|
||||||
|
return route;
|
||||||
|
}
|
||||||
|
var uri = this._trimSlashes(route);
|
||||||
|
var rule = uri
|
||||||
|
.replace(/([\\\/\-\_\.])/g, "\\$1")
|
||||||
|
.replace(/\{[a-zA-Z]+\}/g, "(:any)")
|
||||||
|
.replace(/\:any/g, "[\\w\\-\\_\\.]+")
|
||||||
|
.replace(/\:word/g, "[a-zA-Z]+")
|
||||||
|
.replace(/\:num/g, "\\d+");
|
||||||
|
|
||||||
|
return new RegExp("^" + rule + "$", "i");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse query string and return object for it
|
||||||
|
*
|
||||||
|
* @param {string} query
|
||||||
|
* @returns {object}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._parseQuery = function (query) {
|
||||||
|
var _query = {};
|
||||||
|
if (typeof query !== "string") {
|
||||||
|
return _query;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (query[0] === "?") {
|
||||||
|
query = query.substr(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._queryString = query;
|
||||||
|
query.split("&").forEach(function (row) {
|
||||||
|
var parts = row.split("=");
|
||||||
|
if (parts[0] !== "") {
|
||||||
|
if (parts[1] === undefined) {
|
||||||
|
parts[1] = true;
|
||||||
|
}
|
||||||
|
_query[decodeURIComponent(parts[0])] = parts[1];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return _query;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get query for `history` mode
|
||||||
|
*
|
||||||
|
* @returns {Object}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._getHistoryQuery = function () {
|
||||||
|
return this._parseQuery(window.location.search);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get query for `hash` mode
|
||||||
|
*
|
||||||
|
* @returns {Object}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._getHashQuery = function () {
|
||||||
|
var index = window.location.hash.indexOf("?");
|
||||||
|
var query = (index !== -1) ? window.location.hash.substr(index) : "";
|
||||||
|
return this._parseQuery(query);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get query as object
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
Router.prototype._getQuery = function () {
|
||||||
|
if (this.mode === "history") {
|
||||||
|
return this._getHistoryQuery();
|
||||||
|
} else {
|
||||||
|
return this._getHashQuery();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add route to routes list
|
||||||
|
*
|
||||||
|
* @param {string|RegExp} rule
|
||||||
|
* @param {function} handler
|
||||||
|
* @param {{}} options
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.add = function (rule, handler, options) {
|
||||||
|
this.routes.push({
|
||||||
|
rule: this._parseRouteRule(rule),
|
||||||
|
handler: handler,
|
||||||
|
options: options
|
||||||
|
});
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove a route from routes list
|
||||||
|
*
|
||||||
|
* @param param
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.remove = function (param) {
|
||||||
|
var _this = this;
|
||||||
|
if (typeof param === "string") {
|
||||||
|
param = this._parseRouteRule(param).toString();
|
||||||
|
}
|
||||||
|
this.routes.some(function (route, i) {
|
||||||
|
if (route.handler === param || route.rule.toString() === param) {
|
||||||
|
_this.routes.splice(i, 1);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset the state of Router
|
||||||
|
*
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.reset = function () {
|
||||||
|
this.routes = [];
|
||||||
|
this.mode = null;
|
||||||
|
this.root = "/";
|
||||||
|
this._pageState = {};
|
||||||
|
this.removeUriListener();
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add current page in history stack
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._pushHistory = function () {
|
||||||
|
var _this = this,
|
||||||
|
fragment = this._getFragment();
|
||||||
|
|
||||||
|
if (this.mode === "hash") {
|
||||||
|
if (this._historyState === "add") {
|
||||||
|
if (this._historyIdx !== this._historyStack.length - 1) {
|
||||||
|
this._historyStack.splice(this._historyIdx + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._historyStack.push({
|
||||||
|
path: fragment,
|
||||||
|
state: _this._pageState
|
||||||
|
});
|
||||||
|
|
||||||
|
this._historyIdx = this._historyStack.length - 1;
|
||||||
|
}
|
||||||
|
this._historyState = "add";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param asyncRequest boolean
|
||||||
|
* @returns {PromiseResult<boolean> | boolean}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._unloadCallback = function (asyncRequest) {
|
||||||
|
var result;
|
||||||
|
|
||||||
|
if (this._skipCheck) {
|
||||||
|
return asyncRequest ? Promise.resolve(true) : true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._currentPage && this._currentPage.options && this._currentPage.options.unloadCb) {
|
||||||
|
result = this._currentPage.options.unloadCb(this._currentPage, asyncRequest);
|
||||||
|
if (!asyncRequest || result instanceof Promise) {
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
return result ? Promise.resolve(result) : Promise.reject(result);
|
||||||
|
} else {
|
||||||
|
return asyncRequest ? Promise.resolve(true) : true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if router has the action for current path
|
||||||
|
*
|
||||||
|
* @returns {boolean}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._findRoute = function () {
|
||||||
|
var _this = this,
|
||||||
|
fragment = this._getFragment();
|
||||||
|
|
||||||
|
return this.routes.some(function (route) {
|
||||||
|
var match = fragment.match(route.rule);
|
||||||
|
if (match) {
|
||||||
|
match.shift();
|
||||||
|
var query = _this._getQuery();
|
||||||
|
var page = new Router.Page(fragment, query, match, _this._pageState, route.options);
|
||||||
|
|
||||||
|
if (!_this.securityHook(page)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
_this._currentPage = page;
|
||||||
|
if (_this._skipCheck) {
|
||||||
|
_this._skipCheck = false;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
_this.beforeHook(page);
|
||||||
|
route.handler.apply(page, match);
|
||||||
|
_this._pageState = null;
|
||||||
|
|
||||||
|
window.onbeforeunload = function (ev) {
|
||||||
|
if (_this._unloadCallback(false)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ev.returnValue = true;
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
Router.prototype._treatAsync = function () {
|
||||||
|
var result;
|
||||||
|
|
||||||
|
result = this._currentPage.options.unloadCb(this._currentPage, true);
|
||||||
|
if (!(result instanceof Promise)) {
|
||||||
|
result = result ? Promise.resolve(result) : Promise.reject(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
result
|
||||||
|
.then(this._processUri.bind(this))
|
||||||
|
.catch(this._resetState.bind(this));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Router.prototype._resetState = function () {
|
||||||
|
this._skipCheck = true;
|
||||||
|
this.navigateTo(this._current, this._currentPage.state, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Replace current page with new one
|
||||||
|
*/
|
||||||
|
Router.prototype._processUri = function () {
|
||||||
|
var fragment = this._getFragment(),
|
||||||
|
found;
|
||||||
|
|
||||||
|
this._current = fragment;
|
||||||
|
this._pushHistory();
|
||||||
|
|
||||||
|
found = this._findRoute.call(this);
|
||||||
|
if (!found) {
|
||||||
|
this._page404(fragment);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check the URL and execute handler for its route
|
||||||
|
*
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.check = function () {
|
||||||
|
if (this._skipCheck) return this;
|
||||||
|
|
||||||
|
// if page has unload cb treat as promise
|
||||||
|
if (this._currentPage && this._currentPage.options && this._currentPage.options.unloadCb) {
|
||||||
|
this._treatAsync();
|
||||||
|
} else {
|
||||||
|
this._processUri();
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the URI listener
|
||||||
|
*
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.addUriListener = function () {
|
||||||
|
if (this.mode === "history") {
|
||||||
|
window.onpopstate = this.check.bind(this);
|
||||||
|
} else {
|
||||||
|
window.onhashchange = this.check.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the URI listener
|
||||||
|
*
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.removeUriListener = function () {
|
||||||
|
window.onpopstate = null;
|
||||||
|
window.onhashchange = null;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Redirect to a page with replace state
|
||||||
|
*
|
||||||
|
* @param {string} path
|
||||||
|
* @param {object} state
|
||||||
|
* @param {boolean} silent
|
||||||
|
*
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.redirectTo = function (path, state, silent) {
|
||||||
|
path = this._trimSlashes(path) || "";
|
||||||
|
this._pageState = state || null;
|
||||||
|
this._skipCheck = !!silent;
|
||||||
|
|
||||||
|
if (this.mode === "history") {
|
||||||
|
history.replaceState(state, null, this.root + this._trimSlashes(path));
|
||||||
|
return this.check();
|
||||||
|
} else {
|
||||||
|
this._historyIdx--;
|
||||||
|
window.location.hash = path;
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Navigate to a page
|
||||||
|
*
|
||||||
|
* @param {string} path
|
||||||
|
* @param {object} state
|
||||||
|
* @param {boolean} silent
|
||||||
|
*
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.navigateTo = function (path, state, silent) {
|
||||||
|
path = this._trimSlashes(path) || "";
|
||||||
|
this._pageState = state || null;
|
||||||
|
this._skipCheck = !!silent;
|
||||||
|
|
||||||
|
if (this.mode === "history") {
|
||||||
|
history.pushState(state, null, this.root + this._trimSlashes(path));
|
||||||
|
return this.check();
|
||||||
|
} else {
|
||||||
|
window.location.hash = path;
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh page with recall route handler
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.refresh = function () {
|
||||||
|
if (!this._currentPage) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
var path = this._currentPage.uri + "?" + this._queryString;
|
||||||
|
return this.navigateTo(path, this._currentPage.state);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Go Back in browser history
|
||||||
|
* Simulate "Back" button
|
||||||
|
*
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.back = function () {
|
||||||
|
if (this.mode === "history") {
|
||||||
|
window.history.back();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.go(this._historyIdx - 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Go Forward in browser history
|
||||||
|
* Simulate "Forward" button
|
||||||
|
*
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.forward = function () {
|
||||||
|
if (this.mode === "history") {
|
||||||
|
window.history.forward();
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.go(this._historyIdx + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Go to a specific history page
|
||||||
|
*
|
||||||
|
* @param {number} count
|
||||||
|
* @returns {Router}
|
||||||
|
*/
|
||||||
|
Router.prototype.go = function (count) {
|
||||||
|
if (this.mode === "history") {
|
||||||
|
window.history.go(count);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
var page = this._historyStack[count];
|
||||||
|
if (!page) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._historyIdx = count;
|
||||||
|
this._historyState = "hold";
|
||||||
|
return this.navigateTo(page.path, page.state);
|
||||||
|
};
|
||||||
|
|
||||||
|
return Router;
|
||||||
|
})));
|
||||||
563
js/base.js
Normal file
563
js/base.js
Normal file
@ -0,0 +1,563 @@
|
|||||||
|
let navBar = new Vue({
|
||||||
|
el: '#navBar',
|
||||||
|
data: {
|
||||||
|
visible: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const carritoUsuario = [];
|
||||||
|
|
||||||
|
window.addEventListener("hashchange", () => {
|
||||||
|
render(decodeURI(window.location.hash));
|
||||||
|
});
|
||||||
|
|
||||||
|
const render = url => {
|
||||||
|
switch (url) {
|
||||||
|
case "#registro":
|
||||||
|
abrirRegistro();
|
||||||
|
break;
|
||||||
|
case "#iniciar-sesion":
|
||||||
|
abrirInicioSesion();
|
||||||
|
break;
|
||||||
|
case "#usuarios/":
|
||||||
|
abrirUsuarios();
|
||||||
|
break;
|
||||||
|
case "#usuarios/mi-cuenta":
|
||||||
|
abrirMiCuenta();
|
||||||
|
break;
|
||||||
|
case "#usuarios/pagos":
|
||||||
|
abrirCarrito();
|
||||||
|
break;
|
||||||
|
case "#staff/":
|
||||||
|
abrirStaff();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
abrirPagPrin();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sectionP = document.getElementById("sectionP");
|
||||||
|
const contenedorInicioRegistro = document.getElementById("contenedorInicio-Registro");
|
||||||
|
const formInicioRegistro = document.getElementById("inicio_registro");
|
||||||
|
const sectionS = document.getElementById("sectionS");
|
||||||
|
const sectionCarrito = document.getElementById("sectionCarrito");
|
||||||
|
|
||||||
|
const manipularTopBar = status => {
|
||||||
|
switch (status) {
|
||||||
|
case 1:
|
||||||
|
cambiarProgreso(25);
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
cancelarTransicion();
|
||||||
|
cambiarProgreso(50);
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
cancelarTransicion();
|
||||||
|
cambiarProgreso(75);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
cancelarTransicion();
|
||||||
|
reiniciarTopBar();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const abrirUsuarios = () => {
|
||||||
|
|
||||||
|
const crearPlatos = () => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const ajax = new XMLHttpRequest();
|
||||||
|
ajax.onreadystatechange = () => {
|
||||||
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||||||
|
|
||||||
|
const data = JSON.parse(ajax.responseText);
|
||||||
|
const divR = document.getElementById("productos");
|
||||||
|
|
||||||
|
let contenedor = document.createElement("div");
|
||||||
|
contenedor.className = "row";
|
||||||
|
let contador = 0;
|
||||||
|
for (const itemI in data) {
|
||||||
|
if (data.hasOwnProperty(itemI)) {
|
||||||
|
const item = data[itemI];
|
||||||
|
contador++;
|
||||||
|
if (contador >= 4) {
|
||||||
|
divR.appendChild(contenedor);
|
||||||
|
divR.appendChild(document.createElement("br"));
|
||||||
|
contenedor = document.createElement("div");
|
||||||
|
contenedor.className = "row";
|
||||||
|
contador = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemDiv = document.createElement("div");
|
||||||
|
itemDiv.className = "col-4 caja plato";
|
||||||
|
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.className = "image";
|
||||||
|
img.src = item["imgUrl"];
|
||||||
|
itemDiv.appendChild(img);
|
||||||
|
|
||||||
|
const nombre = document.createElement("div");
|
||||||
|
nombre.className = "plato--Titulo";
|
||||||
|
nombre.innerText = item["nombre"];
|
||||||
|
itemDiv.appendChild(nombre);
|
||||||
|
|
||||||
|
itemDiv.appendChild(document.createElement("br"));
|
||||||
|
|
||||||
|
const descripcion = document.createElement("div");
|
||||||
|
descripcion.className = "plato--Descripcion";
|
||||||
|
descripcion.innerText = item["descripcion"];
|
||||||
|
itemDiv.appendChild(descripcion);
|
||||||
|
itemDiv.appendChild(document.createElement("br"));
|
||||||
|
|
||||||
|
const precioUnitario = document.createElement("div");
|
||||||
|
precioUnitario.className = "plato--Precio";
|
||||||
|
precioUnitario.innerText = `${item["precio"]}`;
|
||||||
|
itemDiv.appendChild(precioUnitario);
|
||||||
|
|
||||||
|
const cantidad = document.createElement("div");
|
||||||
|
cantidad.className = "plato--Cantidad";
|
||||||
|
cantidad.appendChild(document.createTextNode("Cantidad: "));
|
||||||
|
const unidades = document.createElement("span");
|
||||||
|
const botonMenos = document.createElement("i");
|
||||||
|
botonMenos.className = "material-icons plato--Cantidad--Icon";
|
||||||
|
botonMenos.innerText = "remove";
|
||||||
|
botonMenos.addEventListener("click",() => {
|
||||||
|
const valorActual = parseInt(unidades.innerText);
|
||||||
|
if (valorActual > 1) {
|
||||||
|
unidades.innerText = valorActual-1;
|
||||||
|
} else {
|
||||||
|
unidades.innerText = "1";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
cantidad.appendChild(botonMenos);
|
||||||
|
unidades.innerText = "1";
|
||||||
|
cantidad.appendChild(unidades);
|
||||||
|
const botonMas = document.createElement("i");
|
||||||
|
botonMas.className = "material-icons plato--Cantidad--Icon";
|
||||||
|
botonMas.innerText = "add";
|
||||||
|
botonMas.addEventListener("click",() => {
|
||||||
|
const valorActual = parseInt(unidades.innerText);
|
||||||
|
if (valorActual > 0) {
|
||||||
|
unidades.innerText = valorActual+1;
|
||||||
|
} else {
|
||||||
|
unidades.innerText = "1";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
cantidad.appendChild(botonMas);
|
||||||
|
|
||||||
|
itemDiv.appendChild(cantidad);
|
||||||
|
itemDiv.appendChild(document.createElement("br"));
|
||||||
|
|
||||||
|
const botonAddCart = document.createElement("button");
|
||||||
|
botonAddCart.className = "botonAddCart";
|
||||||
|
botonAddCart.addEventListener("click",() => {
|
||||||
|
const cantidad = parseInt(unidades.innerText);
|
||||||
|
if (cantidad > 0) {
|
||||||
|
const item = data[itemI];
|
||||||
|
item["cantidad"] = cantidad;
|
||||||
|
|
||||||
|
// carritoUsuario[itemI] = item;
|
||||||
|
|
||||||
|
carritoUsuario.push(item);
|
||||||
|
console.log(`JSON del usuario|>\n${JSON.stringify(carritoUsuario)}`);
|
||||||
|
window.location.replace("./#usuarios/pagos");
|
||||||
|
} else {
|
||||||
|
alert("");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
botonAddCart.innerHTML = "<i class='material-icons'>add_shopping_cart</i> Añadir al carrito";
|
||||||
|
itemDiv.appendChild(botonAddCart);
|
||||||
|
|
||||||
|
contenedor.appendChild(itemDiv);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
divR.appendChild(contenedor);
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ajax.open("POST", "./usuarios/platos.json", true);
|
||||||
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||||
|
ajax.send();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const ajax = new XMLHttpRequest();
|
||||||
|
|
||||||
|
reiniciarTopBar();
|
||||||
|
cerrarElemF(contenedorInicioRegistro);
|
||||||
|
cerrarElemF(formInicioRegistro);
|
||||||
|
cerrarElemF(sectionP);
|
||||||
|
cerrarElemF(sectionCarrito);
|
||||||
|
|
||||||
|
ajax.onreadystatechange = () => {
|
||||||
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||||||
|
|
||||||
|
cambiarProgreso(100).then(ocultarTopBar);
|
||||||
|
|
||||||
|
abrirElemF(sectionS, () => {
|
||||||
|
sectionS.innerHTML = ajax.responseText;
|
||||||
|
crearPlatos();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
manipularTopBar(ajax.readyState);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ajax.open("POST", "./usuarios/index.php", true);
|
||||||
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||||
|
ajax.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
const abrirMiCuenta = () => {
|
||||||
|
const ajax = new XMLHttpRequest();
|
||||||
|
|
||||||
|
reiniciarTopBar();
|
||||||
|
cerrarElemF(contenedorInicioRegistro);
|
||||||
|
cerrarElemF(formInicioRegistro);
|
||||||
|
cerrarElemF(sectionP);
|
||||||
|
cerrarElemF(sectionCarrito);
|
||||||
|
|
||||||
|
ajax.onreadystatechange = () => {
|
||||||
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||||||
|
|
||||||
|
cambiarProgreso(100).then(ocultarTopBar);
|
||||||
|
|
||||||
|
abrirElemF(sectionS, () => {
|
||||||
|
sectionS.innerHTML = ajax.responseText;
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
manipularTopBar(ajax.readyState);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ajax.open("POST", "./usuarios/mi-cuenta.php", true);
|
||||||
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||||
|
ajax.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
const abrirCarrito = () => {
|
||||||
|
|
||||||
|
reiniciarTopBar();
|
||||||
|
cerrarElemF(contenedorInicioRegistro);
|
||||||
|
cerrarElemF(formInicioRegistro);
|
||||||
|
cerrarElemF(sectionP);
|
||||||
|
cerrarElemF(sectionS);
|
||||||
|
|
||||||
|
/* Metodo antiguo
|
||||||
|
const ajax = new XMLHttpRequest();
|
||||||
|
|
||||||
|
ajax.onreadystatechange = () => {
|
||||||
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||||||
|
|
||||||
|
cambiarProgreso(100).then(ocultarTopBar);
|
||||||
|
|
||||||
|
abrirElemF(sectionCarrito, () => {
|
||||||
|
sectionCarrito.innerHTML = ajax.responseText;
|
||||||
|
crearCarrito();
|
||||||
|
});
|
||||||
|
|
||||||
|
sectionCarrito.setAttribute("vacio","false");
|
||||||
|
} else {
|
||||||
|
manipularTopBar(ajax.readyState);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ajax.open("POST", "./usuarios/pagos.php", true);
|
||||||
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||||
|
ajax.send();
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Metodo con Vue */
|
||||||
|
abrirElemF(sectionCarrito);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const abrirStaff = () => {
|
||||||
|
const ajax = new XMLHttpRequest();
|
||||||
|
|
||||||
|
reiniciarTopBar();
|
||||||
|
cerrarElemF(contenedorInicioRegistro);
|
||||||
|
cerrarElemF(formInicioRegistro);
|
||||||
|
cerrarElemF(sectionP);
|
||||||
|
cerrarElemF(sectionCarrito);
|
||||||
|
|
||||||
|
ajax.onreadystatechange = () => {
|
||||||
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||||||
|
|
||||||
|
cambiarProgreso(100).then(ocultarTopBar);
|
||||||
|
|
||||||
|
abrirElemF(sectionS, () => {
|
||||||
|
sectionS.innerHTML = ajax.responseText;
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
manipularTopBar(ajax.readyState);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ajax.open("POST", "./staff/", true);
|
||||||
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||||
|
ajax.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
const abrirInicioSesion = () => {
|
||||||
|
const ajax = new XMLHttpRequest();
|
||||||
|
|
||||||
|
reiniciarTopBar();
|
||||||
|
cerrarElemF(contenedorInicioRegistro);
|
||||||
|
cerrarElemF(sectionP);
|
||||||
|
cerrarElemF(sectionCarrito);
|
||||||
|
|
||||||
|
ajax.onreadystatechange = () => {
|
||||||
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||||||
|
|
||||||
|
cambiarProgreso(100).then(ocultarTopBar);
|
||||||
|
|
||||||
|
const elem = document.getElementById("inicio_registro");
|
||||||
|
abrirElemF(elem, () => {
|
||||||
|
elem.innerHTML = ajax.responseText
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
manipularTopBar(ajax.readyState);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ajax.open("POST", "./iniciar-sesion.php", true);
|
||||||
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||||
|
ajax.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
const abrirRegistro = () => {
|
||||||
|
const ajax = new XMLHttpRequest();
|
||||||
|
|
||||||
|
reiniciarTopBar();
|
||||||
|
|
||||||
|
cerrarElemF(contenedorInicioRegistro);
|
||||||
|
cerrarElemF(sectionP);
|
||||||
|
cerrarElemF(sectionCarrito);
|
||||||
|
|
||||||
|
ajax.onreadystatechange = () => {
|
||||||
|
if (ajax.status === 200 && ajax.readyState === 4) {
|
||||||
|
|
||||||
|
cambiarProgreso(100).then(ocultarTopBar);
|
||||||
|
|
||||||
|
const elem = document.getElementById("inicio_registro");
|
||||||
|
abrirElemF(elem, () => {
|
||||||
|
elem.innerHTML = ajax.responseText
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
manipularTopBar(ajax.readyState);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ajax.open("POST", "./registro.php", true);
|
||||||
|
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||||
|
ajax.send();
|
||||||
|
};
|
||||||
|
|
||||||
|
const abrirPagPrin = () => {
|
||||||
|
const inicio_registro = document.getElementById("inicio_registro");
|
||||||
|
cerrarElemF(inicio_registro, () => inicio_registro.innerHTML = "");
|
||||||
|
cerrarElemF(sectionS, () => sectionS.innerHTML = "");
|
||||||
|
cerrarElemF(sectionCarrito);
|
||||||
|
abrirElemF(contenedorInicioRegistro);
|
||||||
|
abrirElemF(sectionP);
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Height Transition by CSS Tricks. Returns a Promise */
|
||||||
|
const collapseSection = element => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
// get the height of the element's inner content, regardless of its actual size
|
||||||
|
let sectionHeight = element.scrollHeight;
|
||||||
|
|
||||||
|
// temporarily disable all css transitions
|
||||||
|
let elementTransition = element.style.transition;
|
||||||
|
element.style.transition = '';
|
||||||
|
|
||||||
|
// on the next frame (as soon as the previous style change has taken effect),
|
||||||
|
// explicitly set the element's height to its current pixel height, so we
|
||||||
|
// aren't transitioning out of 'auto'
|
||||||
|
|
||||||
|
|
||||||
|
requestAnimationFrame(function () {
|
||||||
|
element.style.height = sectionHeight + 'px';
|
||||||
|
element.style.transition = elementTransition;
|
||||||
|
|
||||||
|
// on the next frame (as soon as the previous style change has taken effect),
|
||||||
|
// have the element transition to height: 0
|
||||||
|
requestAnimationFrame(function () {
|
||||||
|
element.style.height = 0 + 'px';
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve("Termine de ocultar we v':");
|
||||||
|
}, 160);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// mark the section as "currently collapsed"
|
||||||
|
element.setAttribute('data-collapsed', 'true');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const expandSection = element => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// get the height of the element's inner content, regardless of its actual size
|
||||||
|
let sectionHeight = element.scrollHeight;
|
||||||
|
|
||||||
|
// have the element transition to the height of its inner content
|
||||||
|
element.style.height = sectionHeight + 'px';
|
||||||
|
|
||||||
|
// when the next css transition finishes (which should be the one we just triggered)
|
||||||
|
element.addEventListener('transitionend', function (e) {
|
||||||
|
// remove this event listener so it only gets triggered once
|
||||||
|
element.removeEventListener('transitionend', arguments.callee);
|
||||||
|
|
||||||
|
// remove "height" from the element's inline styles, so it can return to its initial value
|
||||||
|
element.style.height = null;
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve("Termine de ampliar we v':");
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// mark the section as "currently not collapsed"
|
||||||
|
element.setAttribute('data-collapsed', 'false');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const abrirElemF = (element, midF, postF) => {
|
||||||
|
if (element.getAttribute("data-collapsed") === "true") {
|
||||||
|
if (midF !== undefined)
|
||||||
|
midF();
|
||||||
|
expandSection(element).then(() => {
|
||||||
|
if (postF !== undefined)
|
||||||
|
postF();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
collapseSection(element).then(() => {
|
||||||
|
if (midF !== undefined)
|
||||||
|
midF();
|
||||||
|
expandSection(element).then(() => {
|
||||||
|
if (postF !== undefined)
|
||||||
|
postF();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const cerrarElemF = (element, postF) => {
|
||||||
|
if (element.getAttribute("data-collapsed") === "false") {
|
||||||
|
collapseSection(element).then(() => {
|
||||||
|
if (postF !== undefined)
|
||||||
|
postF();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render(decodeURI(window.location.hash));
|
||||||
|
|
||||||
|
|
||||||
|
const carrito = new Vue({
|
||||||
|
el: "#carrito",
|
||||||
|
data: {
|
||||||
|
item: carritoUsuario,
|
||||||
|
descuento: 0
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
cantidadItems: function () {
|
||||||
|
let items = 0;
|
||||||
|
for (const i in this.item)
|
||||||
|
items++;
|
||||||
|
return items;
|
||||||
|
},
|
||||||
|
subTotal: function () {
|
||||||
|
let subT = 0;
|
||||||
|
for (const itemI in this.item ) {
|
||||||
|
if (this.item.hasOwnProperty(itemI)){
|
||||||
|
const item = this.item[itemI];
|
||||||
|
subT += (item["precio"] * item["cantidad"]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return subT;
|
||||||
|
},
|
||||||
|
total: function () {
|
||||||
|
return this.subTotal - this.descuento;
|
||||||
|
},
|
||||||
|
noEstaVacio: function () {
|
||||||
|
for (const i in this.item) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
restarCantidad: function (elem) {
|
||||||
|
const cantidad = parseInt(elem.cantidad);
|
||||||
|
if (cantidad > 0)
|
||||||
|
elem.cantidad = cantidad -1;
|
||||||
|
},
|
||||||
|
aumentarCantidad: function (elem) {
|
||||||
|
const cantidad = parseInt(elem.cantidad);
|
||||||
|
if (cantidad >= 0)
|
||||||
|
elem.cantidad = cantidad+1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Metodo con Antiguo
|
||||||
|
const crearCarrito = () => {
|
||||||
|
carrito = new Vue({
|
||||||
|
el: "#carrito",
|
||||||
|
data: {
|
||||||
|
item: carritoUsuario,
|
||||||
|
descuento: 0
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
cantidadItems: function () {
|
||||||
|
let items = 0;
|
||||||
|
for (const i in this.item)
|
||||||
|
items++;
|
||||||
|
return items;
|
||||||
|
},
|
||||||
|
subTotal: function () {
|
||||||
|
let subT = 0;
|
||||||
|
for (const itemI in this.item ) {
|
||||||
|
if (this.item.hasOwnProperty(itemI)){
|
||||||
|
const item = this.item[itemI];
|
||||||
|
subT += (item["precio"] * item["cantidad"]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return subT;
|
||||||
|
},
|
||||||
|
total: function () {
|
||||||
|
return this.subTotal - this.descuento;
|
||||||
|
},
|
||||||
|
noEstaVacio: function () {
|
||||||
|
for (const i in this.item) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
restarCantidad: function (elem) {
|
||||||
|
const cantidad = parseInt(elem.cantidad);
|
||||||
|
if (cantidad > 0)
|
||||||
|
elem.cantidad = cantidad -1;
|
||||||
|
},
|
||||||
|
aumentarCantidad: function (elem) {
|
||||||
|
const cantidad = parseInt(elem.cantidad);
|
||||||
|
if (cantidad >= 0)
|
||||||
|
elem.cantidad = cantidad+1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
46
js/topbar.js
Normal file
46
js/topbar.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
const topBar = document.createElement("div");
|
||||||
|
topBar.style.position = "fixed";
|
||||||
|
topBar.style.minHeight = "3px";
|
||||||
|
topBar.style.backgroundColor = "red";
|
||||||
|
topBar.style.zIndex = "1";
|
||||||
|
|
||||||
|
const transitionD = 500;
|
||||||
|
topBar.style.transition = `min-width ${transitionD}ms, opacity 250ms`;
|
||||||
|
topBar.style.minWidth = "0";
|
||||||
|
|
||||||
|
let widthDestino = 0;
|
||||||
|
|
||||||
|
document.body.appendChild(topBar);
|
||||||
|
|
||||||
|
let promesaActual;
|
||||||
|
|
||||||
|
const cambiarProgreso = progreso => {
|
||||||
|
widthDestino = progreso;
|
||||||
|
promesaActual = new Promise((resolve, reject) => {
|
||||||
|
topBar.style.minWidth = `${progreso}%`;
|
||||||
|
setTimeout(() => resolve(),transitionD);
|
||||||
|
});
|
||||||
|
return promesaActual;
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelarTransicion = () => {
|
||||||
|
const transiciones = topBar.style.transition;
|
||||||
|
topBar.style.transition = "";
|
||||||
|
topBar.style.minWidth = `${widthDestino}%`;
|
||||||
|
topBar.style.transition = transiciones;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ocultarTopBar = () => {
|
||||||
|
topBar.style.opacity = "0";
|
||||||
|
setTimeout(() => {
|
||||||
|
topBar.style.minWidth = "0%";
|
||||||
|
},250);
|
||||||
|
};
|
||||||
|
|
||||||
|
const reiniciarTopBar = () => {
|
||||||
|
const transiciones = topBar.style.transition;
|
||||||
|
topBar.style.transition = "";
|
||||||
|
topBar.style.minWidth = `0`;
|
||||||
|
topBar.style.opacity = "1";
|
||||||
|
topBar.style.transition = transiciones;
|
||||||
|
};
|
||||||
69
registro.php
Normal file
69
registro.php
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<div class="contenedor inicio_registro">
|
||||||
|
<div class="center">
|
||||||
|
Registrate para tener lo mejor de la cocina francesa en la comodida de tu casa.<br />
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-7 center">
|
||||||
|
|
||||||
|
<br />
|
||||||
|
<button type="button" class="google-button" style="width: 213px">
|
||||||
|
<span class="google-button__icon">
|
||||||
|
<svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="google-button__text">Regístrate con Google</span>
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<button style="background-color: #4064ad; height: 40px; border: none; box-shadow: 1px 1px 2px black;
|
||||||
|
border-radius: 3px">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
|
||||||
|
id="Capa_1" x="0px" y="0px" width="20px" viewBox="0 0 96.124 96.123"
|
||||||
|
style="max-height: 18px" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803 c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654 c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246 c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z" style="fill: rgb(255, 255, 255);"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<span class="google-button__text" style="color: white; padding: 0 13px">Regístrate con Facebook</span>
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
O crea tu cuenta con tu correo electrónico:
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<form method="post" onsubmit="return false">
|
||||||
|
Nombre:<br />
|
||||||
|
<input placeholder="Tu nombre" name="userName"><br />
|
||||||
|
<br />
|
||||||
|
Correo Electrónico:<br />
|
||||||
|
<input placeholder="Tu correo Electrónico" name="userEmail"><br />
|
||||||
|
<br />
|
||||||
|
Contraseña<br />
|
||||||
|
<input type="password" placeholder="Contraseña" name="userPass"><br />
|
||||||
|
<br />
|
||||||
|
<input class="botonEnviarForm" type="submit" value="¡Crear mi cuenta!">
|
||||||
|
</form>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
¿Ya tienes una cuenta?<br />
|
||||||
|
<a href="./#iniciar-sesion" id="botonInicioSesion" class="boton">
|
||||||
|
Inicia Sesion
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-5 center">
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<img class="image" alt="Torre Eiffel" src="https://kids.nationalgeographic.com/content/dam/kids/photos/Countries/A-G/france-eiffel-tower.ngsversion.1396531559251.adapt.1900.1.jpg">
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<img class="image" src="https://www.slh.com/globalassets/country-pages/hero-images/france3.jpg" alt="Vista de francia">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
13
staff/index.php
Normal file
13
staff/index.php
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div class="center">
|
||||||
|
Personal<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<a href="./#usuarios/">Volver a la carta</a>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
13
usuarios/index.php
Normal file
13
usuarios/index.php
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div class="center">
|
||||||
|
Pedidos<br />
|
||||||
|
<br />
|
||||||
|
<a href="./#usuarios/mi-cuenta">Ver mi cuenta</a><br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div id="productos">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
53
usuarios/mi-cuenta.php
Normal file
53
usuarios/mi-cuenta.php
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<div class="center" style="font-size: large">
|
||||||
|
Mi cuenta<br/>
|
||||||
|
<br/>
|
||||||
|
<a href="./#usuarios/">Seguir comprando</a>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
Mis datos:<br/>
|
||||||
|
<br/>
|
||||||
|
<div style="text-align: left">
|
||||||
|
Nombre: {{ userName }}<br/>
|
||||||
|
Correo electrónico: {{ userEmail }}<br/>
|
||||||
|
Métodos de pago: {{ userPaymentMethods }}<br/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
Historial de compras:<br/>
|
||||||
|
<br/>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3 unseen">.</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<img class="image" src="https://www.expatica.com/media/upload/714571.jpg">
|
||||||
|
<div>Soupe à l'oignon</div>
|
||||||
|
<br>
|
||||||
|
<div>Sopa tradicional hecha con cebolla y carne.</div>
|
||||||
|
<div class="center">20 S/.</div>
|
||||||
|
<div>Fecha de compra: 17/09/18</div>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div class="col-3 unseen">.</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3 unseen">.</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<img class="image" src="https://www.expatica.com/media/upload/714573.jpg">
|
||||||
|
<div>Cassoulet</div>
|
||||||
|
<br>
|
||||||
|
<div>Plato de habas con carne y especies.</div>
|
||||||
|
<div class="center">5 S/.</div>
|
||||||
|
<div>Fecha de compra: 15/09/18</div>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div class="col-3 unseen">.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
84
usuarios/pagos.php
Normal file
84
usuarios/pagos.php
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<div class="center">
|
||||||
|
<div id="carrito--tituloprincipal">
|
||||||
|
Carrito de compras
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<a id="carrito--boton--seguircomprando" href="./#usuarios/">Seguir comprando</a>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<div id="carrito" class="row carrito">
|
||||||
|
|
||||||
|
<div id="carrito--elementos" class="col-8">
|
||||||
|
<div id="carrito--elementos--contenido" class="caja">
|
||||||
|
<template v-if="noEstaVacio">
|
||||||
|
<template v-for="producto in item">
|
||||||
|
<div class="carritoElem">
|
||||||
|
<img class="carritoElem--img" v-bind:src="producto.imgUrl">
|
||||||
|
<div class="plato--Titulo">{{ producto.nombre }}</div>
|
||||||
|
<br>
|
||||||
|
<div class="plato--Precio">{{ producto.precio }}</div>
|
||||||
|
<div class="plato--Cantidad">Cantidad:
|
||||||
|
<i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
|
||||||
|
<span>{{ producto.cantidad }}</span>
|
||||||
|
<i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
No hay nada en tu carrito de compras :c
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="carrito--precio" class="col-4">
|
||||||
|
|
||||||
|
<div id="carrito--precio--contenido" class="caja">
|
||||||
|
<template v-if="noEstaVacio">
|
||||||
|
<div id="pagos">
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
{{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; float: right; clear: both">
|
||||||
|
{{ subTotal }} S/.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
Descuentos:
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; float: right; clear: both">
|
||||||
|
{{ descuento }} S/.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div>
|
||||||
|
<div class="carrito--precio--contenido--titulo" style="display: inline-block;">
|
||||||
|
Total:
|
||||||
|
</div>
|
||||||
|
<div class="carrito--precio--contenido--titulo"
|
||||||
|
style="display: inline-block; float: right; clear: both">
|
||||||
|
{{ total }} S/.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a class="carrito--precio--contenido--botonPagar">
|
||||||
|
Completar Transaccion
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
No hay nada en tu carrito de compras :c
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
50
usuarios/platos.json
Normal file
50
usuarios/platos.json
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"nombre": "Soupe à l'oignon",
|
||||||
|
"descripcion": "Sopa tradicional hecha con cebolla y carne.",
|
||||||
|
"imgUrl": "https://www.expatica.com/media/upload/714571.jpg",
|
||||||
|
"precio": 20
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Coq au vin",
|
||||||
|
"descripcion": "Pollo cocinado con vino, hongos, carne de cerdo y ajo",
|
||||||
|
"imgUrl": "https://www.expatica.com/media/upload/714572.jpg",
|
||||||
|
"precio": 50
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Beef bourguignon",
|
||||||
|
"descripcion": "Filete cocinado en vino, sasonado con especias",
|
||||||
|
"imgUrl": "https://www.expatica.com/media/upload/714573.jpg",
|
||||||
|
"precio": 30
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Cassoulet",
|
||||||
|
"descripcion": "Guiso parecido a las habichuelas típicas españolas que se hace con alubias blancas o frijoles acompañadas de carne de diferentes animales",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Cassoulet-570x320.jpg",
|
||||||
|
"precio": 22
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Fondue de queso",
|
||||||
|
"descripcion": "Crema que se puede tomar bien como acompañante de otros ingredientes o bien mojando trozos de pan en él.",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Fondue-570x321.jpg",
|
||||||
|
"precio": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Ratatouille",
|
||||||
|
"descripcion": "Elaborado con diversas hortalizas, es un plato natural de Niza y la región de Provenza, al sureste de Francia.",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Ratatouille-570x320.jpg",
|
||||||
|
"precio": 35
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Magret de canard",
|
||||||
|
"descripcion": "Un filete de carne magra, que suele provenir de un ganso o pato cebado",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Magret-de-Canard-570x320.jpg",
|
||||||
|
"precio": 17
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"nombre": "Merluza al beurre blanc",
|
||||||
|
"descripcion": "Este plato consiste en troncos o lomos de merluza que se sirven en salsa beurre blanc.",
|
||||||
|
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Merluza-a-la-beurre-blanc-570x320.jpg",
|
||||||
|
"precio": 22
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
Reference in New Issue
Block a user