From c88a442eaa0a4cb9af21e11671d3754b355604b5 Mon Sep 17 00:00:00 2001 From: Araozu Date: Mon, 24 Sep 2018 19:16:24 -0500 Subject: [PATCH] Initial --- .htaccess | 22 ++ css/base.css | 428 +++++++++++++++++++++++++++++ css/base.css.map | 1 + css/base.sass | 366 +++++++++++++++++++++++++ index.php | 192 +++++++++++++ iniciar-sesion.php | 67 +++++ js/Router.js | 603 +++++++++++++++++++++++++++++++++++++++++ js/base.js | 563 ++++++++++++++++++++++++++++++++++++++ js/topbar.js | 46 ++++ registro.php | 69 +++++ staff/index.php | 13 + usuarios/index.php | 13 + usuarios/mi-cuenta.php | 53 ++++ usuarios/pagos.php | 84 ++++++ usuarios/platos.json | 50 ++++ 15 files changed, 2570 insertions(+) create mode 100644 .htaccess create mode 100644 css/base.css create mode 100644 css/base.css.map create mode 100644 css/base.sass create mode 100644 index.php create mode 100644 iniciar-sesion.php create mode 100644 js/Router.js create mode 100644 js/base.js create mode 100644 js/topbar.js create mode 100644 registro.php create mode 100644 staff/index.php create mode 100644 usuarios/index.php create mode 100644 usuarios/mi-cuenta.php create mode 100644 usuarios/pagos.php create mode 100644 usuarios/platos.json diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..65b9561 --- /dev/null +++ b/.htaccess @@ -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 + + FileETag None + + 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" + + \ No newline at end of file diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..70a5ae0 --- /dev/null +++ b/css/base.css @@ -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 */ diff --git a/css/base.css.map b/css/base.css.map new file mode 100644 index 0000000..af69bf5 --- /dev/null +++ b/css/base.css.map @@ -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"} \ No newline at end of file diff --git a/css/base.sass b/css/base.sass new file mode 100644 index 0000000..eca6e53 --- /dev/null +++ b/css/base.sass @@ -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 + + diff --git a/index.php b/index.php new file mode 100644 index 0000000..4153bfe --- /dev/null +++ b/index.php @@ -0,0 +1,192 @@ + + + + Cocina Francesa + + + + + + + + + + + + + + +
+
+
+ Plato Francés +
+
+
+ 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. +
+
+
+
+
+
+
+ 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. +
+
+
+ Plato Francés +
+
+
+
+ +
+
+ +
+
+
+
+
+ Carrito de compras +
+
+ Seguir comprando +
+
+
+ +
+
+ + +
+
+ +
+ +
+ + +
+
+
+
+
+
+
+ + + + + + + + + + + diff --git a/iniciar-sesion.php b/iniciar-sesion.php new file mode 100644 index 0000000..fddc1bc --- /dev/null +++ b/iniciar-sesion.php @@ -0,0 +1,67 @@ +
+
+ Inicia Sesión. +
+
+
+
+
+
+
+
+
+
+
+
+ plato de comida +
+
+
+
+ +
+
+ +
+
+ O inicia sesión con tu correo:
+
+
+
+ Correo Electrónico:
+
+
+ Contraseña:
+
+
+ +
+
+
+ ¿No tienes una cuenta?
+ + Regístrate + +
+
+
+
+
\ No newline at end of file diff --git a/js/Router.js b/js/Router.js new file mode 100644 index 0000000..1e1d402 --- /dev/null +++ b/js/Router.js @@ -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} + * @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; +}))); \ No newline at end of file diff --git a/js/base.js b/js/base.js new file mode 100644 index 0000000..47668e9 --- /dev/null +++ b/js/base.js @@ -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 = "add_shopping_cart 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; + } + } + }); +}; +*/ + + diff --git a/js/topbar.js b/js/topbar.js new file mode 100644 index 0000000..a6b170b --- /dev/null +++ b/js/topbar.js @@ -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; +}; diff --git a/registro.php b/registro.php new file mode 100644 index 0000000..e7b88f8 --- /dev/null +++ b/registro.php @@ -0,0 +1,69 @@ +
+
+ Registrate para tener lo mejor de la cocina francesa en la comodida de tu casa.
+
+
+
+
+
+ +
+ +
+
+ +
+
+
+ O crea tu cuenta con tu correo electrónico: +
+
+
+
+ Nombre:
+
+
+ Correo Electrónico:
+
+
+ Contraseña
+
+
+ +
+
+
+ ¿Ya tienes una cuenta?
+ + Inicia Sesion + +
+
+
+
+ Torre Eiffel +
+
+ Vista de francia +
+
+
+
+
\ No newline at end of file diff --git a/staff/index.php b/staff/index.php new file mode 100644 index 0000000..272997e --- /dev/null +++ b/staff/index.php @@ -0,0 +1,13 @@ +
+
+
+ Personal
+
+
+ Volver a la carta +
+
+ +
+
+
\ No newline at end of file diff --git a/usuarios/index.php b/usuarios/index.php new file mode 100644 index 0000000..f24a739 --- /dev/null +++ b/usuarios/index.php @@ -0,0 +1,13 @@ +
+
+
+ Pedidos
+
+ Ver mi cuenta
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/usuarios/mi-cuenta.php b/usuarios/mi-cuenta.php new file mode 100644 index 0000000..3e99a1e --- /dev/null +++ b/usuarios/mi-cuenta.php @@ -0,0 +1,53 @@ +
+
+
+ Mi cuenta
+
+ Seguir comprando +
+
+
+
+ Mis datos:
+
+
+ Nombre: {{ userName }}
+ Correo electrónico: {{ userEmail }}
+ Métodos de pago: {{ userPaymentMethods }}
+
+
+
+ Historial de compras:
+
+
+
.
+
+ +
Soupe à l'oignon
+
+
Sopa tradicional hecha con cebolla y carne.
+
20 S/.
+
Fecha de compra: 17/09/18
+
+
+
.
+
+
+
+
.
+
+ +
Cassoulet
+
+
Plato de habas con carne y especies.
+
5 S/.
+
Fecha de compra: 15/09/18
+
+
+
.
+
+
+
+
+
+
\ No newline at end of file diff --git a/usuarios/pagos.php b/usuarios/pagos.php new file mode 100644 index 0000000..bae17bd --- /dev/null +++ b/usuarios/pagos.php @@ -0,0 +1,84 @@ +
+
+
+
+ Carrito de compras +
+
+ Seguir comprando +
+
+
+ +
+
+ + +
+
+ +
+ +
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/usuarios/platos.json b/usuarios/platos.json new file mode 100644 index 0000000..3385cb9 --- /dev/null +++ b/usuarios/platos.json @@ -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 + } +] \ No newline at end of file