cart.html

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
		<link rel="icon" href="img/favicon.svg" type="image/svg+xml" />
		<title>eMercado - Todo lo que busques está aquí</title>
		<link href="https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link href="css/font-awesome.min.css" rel="stylesheet" />
		<link href="css/styles.css" rel="stylesheet" />
		<link href="css/cart.css" rel="stylesheet" />
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-dark bg-dark p-1">
			<div class="container">
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav w-100 justify-content-between">
						<li class="nav-item">
							<a class="nav-link" href="main.html">Inicio</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="categories.html">Categorías</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="sell.html">Vender</a>
						</li>
						<li class="nav-item">
							<div id="navbarNavDarkDropdown">
								<ul class="navbar-nav">
									<li class="nav-item dropdown">
										<a class="nav-link dropdown-toggle" id="nav-userInfo" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a>
										<ul class="dropdown-menu dropdown-menu-dark">
											<li><a class="dropdown-item" href="cart.html">Mi Carrito</a></li>
											<li><a class="dropdown-item" href="my-profile.html">Mi Perfil</a></li>
											<li><a class="dropdown-item" id="closeSession">Cerrar sesión</a></li>
										</ul>
									</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<main>
			<div class="container py-4">
				<h2 class="text-center mb-5">Carrito de Compras</h2>
				<table class="table">
					<thead>
						<tr>
							<th scope="col"></th>
							<th scope="col">Nombre</th>
							<th scope="col">Costo</th>
							<th scope="col">Cantidad</th>
							<th scope="col">SubTotal</th>
						</tr>
					</thead>
					<tbody id="cartProducts"></tbody>
				</table>
				<form id="cartForm" class="needs-validation" novalidate>
					<fieldset class="form-group border p-3 mb-3" id="shippingType">
						<div class="row">
							<legend class="col-form-label pt-0 fs-4">Tipo de Envío</legend>
							<div class="">
								<div class="form-check">
									<input class="form-check-input" type="radio" name="shippingType" id="premium" value="premium" checked="" />
									<label class="form-check-label" for="premium"> Premium 2 a 5 dias (15%) </label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" name="shippingType" id="express" value="express" />
									<label class="form-check-label" for="express"> Express 5 a 8 dias (7%) </label>
								</div>
								<div class="form-check">
									<input class="form-check-input" type="radio" name="shippingType" id="standard" value="standard" />
									<label class="form-check-label" for="standard"> Standard 12 a 15 dias (5%) </label>
								</div>
							</div>
						</div>
					</fieldset>

					<fieldset class="form-group border p-3 mb-3">
						<div class="row">
							<legend class="col-form-label pt-0 fs-4">Dirección de Envío</legend>
							<div>
								<div class="form-row row">
									<div class="form-group col-md-6 mb-3">
										<label for="inputStreet">Calle</label>
										<input type="text" pattern="[A-Za-z]+" class="form-control col-4" id="inputStreet" placeholder="Calle" required="" />
										<div class="invalid-feedback">Debe de ingresar una calle.</div>
									</div>
									<div class="form-group col-md-6 mb-3">
										<label for="inputNumber">Número</label>
										<input type="number" min="0" class="form-control col-4" id="inputNumber" placeholder="Número" required="" />
										<div class="invalid-feedback">Debe de ingresar un número de calle.</div>
									</div>
								</div>
								<div class="form-group">
									<label for="inputStInt">Esquina</label>
									<input type="text" class="form-control" id="inputStInt" placeholder="Esquina" required="" />
									<div class="invalid-feedback">Debe de ingresar una esquina.</div>
								</div>
							</div>
						</div>
					</fieldset>

					<fieldset class="form-group border p-3 mb-3" id="costs">
						<div class="row">
							<legend class="col-form-label pt-0 fs-4">Costos</legend>
							<div class="">
								<div class="mb-3 d-flex justify-content-between border-bottom align-items-center">
									<div>
										<p class="p-0 m-0">Subtotal</p>
										<small class="text-muted font-italic">Costo unitario del producto por cantidad</small>
									</div>
									<div>
										<p id="subTotal">UYU 0</p>
									</div>
								</div>
								<div class="mb-3 d-flex justify-content-between border-bottom align-items-center">
									<div>
										<p class="p-0 m-0">Costo de Envío</p>
										<small class="text-muted font-italic">Según el tipo de Envío</small>
									</div>
									<div>
										<p id="shoppingCost">UYU 0</p>
									</div>
								</div>
								<div class="d-flex justify-content-between align-items-center">
									<div>
										<p class="p-0 m-0 font-weight-bold">Total ($)</p>
									</div>
									<div>
										<p id="total" class="fw-bold mb-0">UYU 0</p>
									</div>
								</div>
							</div>
						</div>
					</fieldset>

					<fieldset class="form-group border p-3 mb-3" id="form">
						<div class="row">
							<legend class="col-form-label pt-0 fs-4">Forma de Pago</legend>
							<div class="">
								<div class="">
									<div class="">
										<p class="p-0 me-2 d-inline" id="paymentSelection">No ha sido seleccionado</p>
										<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal">Seleccionar</a>
									</div>
									<p class="invalidFeedback">Debe seleccionar una forma de pago.</p>
								</div>
							</div>
						</div>
					</fieldset>

					<button class="btn btn-primary col-12" id="submitForm" type="submit">Finalizar Compra</button>

					<div class="alert alert-success alert-dismissible fade show" role="alert">
						<p class="mb-0">¡Has comprado con éxito!</p>
						<button type="button" class="btn-close" aria-label="Close"></button>
					</div>

					<!-- Modal -->
					<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Forma de Pago</h5>
									<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
								</div>
								<div class="modal-body">
									<div class="border-bottom pb-3 mb-3">
										<input type="radio" id="paymentMethod1" name="paymentMethod" />
										<label for="paymentMethod1">Tarjeta de Crédito</label>
									</div>

									<div class="row g-3 mb-3">
										<div class="col-sm-6">
											<label for="cardNumber" class="form-label">Número de Tarjeta</label>
											<input type="number" class="form-control" id="cardNumber" required />
											<div class="invalid-feedback">Ingrese el número de su tarjeta.</div>
										</div>

										<div class="col-sm-6">
											<label for="securityCode" class="form-label">Código de Seguridad</label>
											<input type="number" class="form-control" id="securityCode" required />
											<div class="invalid-feedback">Ingrese el código de seguridad de su tarjeta.</div>
										</div>

										<div class="col-sm-6">
											<label for="expiration" class="form-label">Vencimiento (MM/AA)</label>
											<input type="text" pattern="^[0-9]{1,2}\/[0-9]{4}$" class="form-control" id="expiration" required />
											<div class="invalid-feedback">Ingrese el vencimiento de su tarjeta.</div>
										</div>
									</div>

									<div class="border-bottom pb-3 mb-3">
										<input type="radio" id="paymentMethod2" name="paymentMethod" />
										<label for="paymentMethod2">Transferencia Bancaria</label>
									</div>

									<div class="row g-3">
										<div class="col-sm-6">
											<label for="accountNumber" class="form-label">Número de Cuenta</label>
											<input type="number" class="form-control" id="accountNumber" required />
											<div class="invalid-feedback">Ingrese un número de cuenta.</div>
										</div>
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cerrar</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Modal -->
				</form>
			</div>
		</main>
		<footer class="text-muted">
			<div class="container">
				<p class="float-end">
					<a href="#">Volver arriba</a>
				</p>
				<p>Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a> - 2022</p>
				<p>Clickea <a target="_blank" href="Letra.pdf">aquí</a> para descargar la letra del obligatorio.</p>
			</div>
		</footer>
		<div id="spinner-wrapper">
			<div class="lds-ring">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>

		<script src="js/bootstrap.bundle.min.js"></script>
		<script src="js/init.js"></script>
		<script src="js/cart.js"></script>
	</body>
</html>