mirror of
https://github.com/FranP-code/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND.git
synced 2025-10-12 23:52:33 +00:00
217 lines
7.5 KiB
HTML
217 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<title>Columbus</title>
|
|
</head>
|
|
<body>
|
|
<!--
|
|
<div class="menu-lateral">
|
|
<img src="./img/three lines menu-min.png" alt="three lines menu" class="button"> <!--Source: https://www.flaticon.com/premium-icon/menu_3502458?term=three%20lines&page=1&position=4&page=1&position=4&related_id=3502458&origin=search
|
|
</div>
|
|
-->
|
|
<div class="pagina-principal">
|
|
|
|
<header>
|
|
<div class="logo">
|
|
<h1>Columbus</h1>
|
|
<h3>Bakery Wholesale</h3>
|
|
</div>
|
|
<!-- <div class="perfil">
|
|
|
|
<div class="informacion-personal">
|
|
|
|
<div class="text">
|
|
<span id="perfil-nombre">Ana María</span>
|
|
<span id="nacionalidad">ARG</span>
|
|
</div>
|
|
|
|
<img src="./img/perfil.png" alt="profile image" class="profile-img button">
|
|
</div>
|
|
|
|
<img src="./img/menu-min.png" alt="menu image" class="profile-menu button"> <!-- Source: https://www.flaticon.es/icono-gratis/menu_483345?term=menu%20vertical&page=1&position=10&page=1&position=10&related_id=483345&origin=search
|
|
</div> -->
|
|
</header>
|
|
|
|
<div class="tienda">
|
|
|
|
|
|
<div class="primer-columna">
|
|
<div class="checkout">
|
|
<div class="table-container">
|
|
|
|
|
|
<table id="products-display-checkout">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Quantity
|
|
</th>
|
|
<th>
|
|
Product
|
|
</th>
|
|
<th>
|
|
Tax
|
|
</th>
|
|
<th>
|
|
Total
|
|
</th>
|
|
<th id="blank-space">
|
|
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<!--! Template -->
|
|
<!-- <tr>
|
|
<td>
|
|
1
|
|
<button class="button">
|
|
+
|
|
</button>
|
|
<button class="button">
|
|
-
|
|
</button>
|
|
</td>
|
|
<td>
|
|
Coca Cola
|
|
</td>
|
|
|
|
<td>
|
|
15
|
|
</td>
|
|
<td>
|
|
15
|
|
</td>
|
|
<td>
|
|
<img src="./img/eliminar.png" alt="trash-icon" class="button">
|
|
</td>
|
|
</tr> -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="total-container">
|
|
<span class="total">TOTAL</span>
|
|
<span class="precio" id="precio">0</span>
|
|
<span class="moneda">$</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="botones-de-descuento">
|
|
|
|
<button class="button">
|
|
EMPLOYEE DISCOUNT
|
|
</button>
|
|
|
|
<button class="button">
|
|
CUSTOMER VIEW
|
|
</button>
|
|
|
|
<button class="button">
|
|
CUPPON
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="segunda-columna">
|
|
|
|
<div class="exposicion-de-productos">
|
|
|
|
<nav>
|
|
<ul>
|
|
<li class="button">
|
|
DRINKS
|
|
</li>
|
|
<li class="button">
|
|
FOODS
|
|
</li>
|
|
<li class="button">
|
|
PASTRY AND BAKERY
|
|
</li>
|
|
<li class="button">
|
|
REFRIGERATED
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="productos">
|
|
|
|
<!-- !TEMPLATE:
|
|
<div class="producto button">
|
|
<img src="./img/cocacola-lata.jpg" alt="coca cola">
|
|
|
|
<div class="text">
|
|
<span class="name">COCA-COLA</span>
|
|
<span class="price">15 USD</span>
|
|
</div>
|
|
</div>
|
|
!-->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sub-menu">
|
|
|
|
<div class="opciones-de-pago">
|
|
|
|
<div class="opcion">
|
|
<img src="./img/pngwing.com.png" alt="cash icon">
|
|
</div>
|
|
|
|
<div class="opcion">
|
|
<img src="./img/visa.png" alt="Visa icon">
|
|
</div>
|
|
|
|
<div class="opcion">
|
|
<img src="./img/mastercard.png" alt="Mastercard icon">
|
|
</div>
|
|
|
|
<div class="opcion">
|
|
<img src="./img/uber-eats.jpg" alt="Uber Eats icon">
|
|
</div>
|
|
|
|
<div class="opcion">
|
|
<span class="text">
|
|
DEBIT
|
|
</span>
|
|
</div>
|
|
|
|
<div class="opcion">
|
|
<span class="text">
|
|
+
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pagar button">
|
|
|
|
<span>PAY</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- !Template:
|
|
<div id="mensaje-compra-container">
|
|
<div id="mensaje-compra">
|
|
<h2></h2>
|
|
</div>
|
|
</div> -->
|
|
|
|
</body>
|
|
<script src="./scripts/script.js" type="module"></script>
|
|
</html> |