Cambio en la estructura de js, css y otros.

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+**.map

dist/css/anuma.css

@@ -0,0 +1 @@
+.anuma-we{font-family:sans-serif;font-size:30px}.anuma-we--alv{color:#23bf87}/*# sourceMappingURL=anuma.css.map */

index.php

@@ -36,7 +36,6 @@
     <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>
@@ -76,7 +75,7 @@
         </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">
+            alt="Plato Francés" class="image">
         </div>
     </div>
     <br/>
@@ -183,7 +182,8 @@
 </footer>
 
 <!-- Vue -->
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
+<script src="./js/vue.js"></script>
 
 <!-- Logica principal -->
 <script src="./js/base.js?v=2"></script>

src/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> | 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;
+})));

src/js/base.js

@@ -0,0 +1,560 @@
+    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;
+            }
+        }
+    });
+};
+*/

src/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;
+};

src/sass/anuma.sass

@@ -0,0 +1,7 @@
+.anuma-we
+    font:
+        family: sans-serif
+        size: 30px
+
+.anuma-we--alv
+    color: #23bf87

src/sass/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
+
+