193 lines
7.7 KiB
PHP
193 lines
7.7 KiB
PHP
|
<!DOCTYPE HTML>
|
||
|
|
<html lang="es">
|
||
|
|
<head>
|
||
|
|
<title>Cocina Francesa</title>
|
||
|
|
<link rel="stylesheet" href="./css/base.css" type="text/css"/>
|
||
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||
|
|
rel="stylesheet">
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<script src="./js/topbar.js"></script>
|
||
|
|
|
||
|
|
<header id="header">
|
||
|
|
<div class="contenedor">
|
||
|
|
<div id="tituloP" class="center">
|
||
|
|
<a href="./#" style="color: white; text-decoration: none">Cocina Francesa</a>
|
||
|
|
<div id="tituloP--descripcion">
|
||
|
|
Descubre un nuevo sabor
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
|
||
|
|
<a href="./#registro" id="botonRegistro" class="boton">
|
||
|
|
Registrarse
|
||
|
|
</a>
|
||
|
|
<a href="./#iniciar-sesion" id="botonInicioSesion" class="boton">
|
||
|
|
Iniciar Sesion
|
||
|
|
</a>
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
</div>
|
||
|
|
<div id="inicio_registro" class="mySeccion" data-collapsed="true" style="height: 0"></div>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<nav id="navBar" class="mySeccion" data-collapsed="true">
|
||
|
|
<ul class="linksNavBar">
|
||
|
|
<li><a href="./#">Inicio</a></li>
|
||
|
|
<li><a href="./#usuarios/">Comprar</a></li>
|
||
|
|
<li><a href="./#usuarios/mi-cuenta">Mi cuenta</a></li>
|
||
|
|
<li><a href="./#usuarios/pagos">Carrito</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<section id="sectionP" class="contenedor mySeccion" data-collapsed="false">
|
||
|
|
<div class="row contenido">
|
||
|
|
<div class="col-5">
|
||
|
|
<img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
|
||
|
|
alt="Plato Francés"/>
|
||
|
|
</div>
|
||
|
|
<div class="col-7">
|
||
|
|
<div class="descripcionComida">
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||
|
|
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||
|
|
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||
|
|
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||
|
|
deserunt mollit anim id est laborum.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br/>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-7 center">
|
||
|
|
<div class="descripcionComida">
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||
|
|
dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
|
||
|
|
malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
|
||
|
|
gravida
|
||
|
|
cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
|
||
|
|
sagittis.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-5">
|
||
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
|
||
|
|
alt="Plato Francés" class="image">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br/>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="sectionS" class="contenedor mySeccion">
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="sectionCarrito" class="contenedor mySeccion" data-collapsed="true" style="height: 0">
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
<div class="center">
|
||
|
|
<div id="carrito--tituloprincipal">
|
||
|
|
Carrito de compras
|
||
|
|
</div>
|
||
|
|
<br/>
|
||
|
|
<a id="carrito--boton--seguircomprando" href="./#usuarios/">Seguir comprando</a>
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
<div id="carrito" class="row carrito">
|
||
|
|
|
||
|
|
<div id="carrito--elementos" class="col-8">
|
||
|
|
<div id="carrito--elementos--contenido" class="caja">
|
||
|
|
<template v-if="noEstaVacio">
|
||
|
|
<template v-for="producto in item">
|
||
|
|
<div class="carritoElem">
|
||
|
|
<img class="carritoElem--img" v-bind:src="producto.imgUrl">
|
||
|
|
<div class="plato--Titulo">{{ producto.nombre }}</div>
|
||
|
|
<br>
|
||
|
|
<div class="plato--Precio">{{ producto.precio }}</div>
|
||
|
|
<div class="plato--Cantidad">Cantidad:
|
||
|
|
<i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
|
||
|
|
<span>{{ producto.cantidad }}</span>
|
||
|
|
<i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
|
||
|
|
<hr>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
No hay nada en tu carrito de compras :c
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="carrito--precio" class="col-4">
|
||
|
|
|
||
|
|
<div id="carrito--precio--contenido" class="caja">
|
||
|
|
<template v-if="noEstaVacio">
|
||
|
|
<div id="pagos">
|
||
|
|
<div style="display: inline-block;">
|
||
|
|
{{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
|
||
|
|
</div>
|
||
|
|
<div style="display: inline-block; float: right; clear: both">
|
||
|
|
{{ subTotal }} S/.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div style="display: inline-block;">
|
||
|
|
Descuentos:
|
||
|
|
</div>
|
||
|
|
<div style="display: inline-block; float: right; clear: both">
|
||
|
|
{{ descuento }} S/.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<div>
|
||
|
|
<div class="carrito--precio--contenido--titulo" style="display: inline-block;">
|
||
|
|
Total:
|
||
|
|
</div>
|
||
|
|
<div class="carrito--precio--contenido--titulo"
|
||
|
|
style="display: inline-block; float: right; clear: both">
|
||
|
|
{{ total }} S/.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<a class="carrito--precio--contenido--botonPagar">
|
||
|
|
Completar Transaccion
|
||
|
|
</a>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
No hay nada en tu carrito de compras :c
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer id="footer">
|
||
|
|
<div class="contenedor">
|
||
|
|
Cocina Francesa.<br/>
|
||
|
|
Una Single Page Application para el curso de IHC, UNSA, 2018.<br/>
|
||
|
|
Se utilizaron: Vue.js, BEM, Sass, npm, y PHP.<br>
|
||
|
|
<br/>
|
||
|
|
Desarrollado por Fernando Araoz, 20173373.
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<!-- Vue -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
|
|
|
||
|
|
<!-- Logica principal -->
|
||
|
|
<script src="./js/base.js?v=2"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|