-
Notifications
You must be signed in to change notification settings - Fork 1
/
compras.html
152 lines (151 loc) · 6.85 KB
/
compras.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Metadatos y enlaces a recursos externos -->
<link rel="stylesheet" href="./css/style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="icon" href="icono.jpg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resumen De Compras</title>
<script src="https://kit.fontawesome.com/eb496ab1a0.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- barra de navegación -->
<nav class=" bg-dark border-bottom border-body" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg bg-body-tertiary ">
<div class="container-fluid">
<!-- Logotipo y elemento de navegación -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<img src="icono.jpg" class="img-thumbnail" width="90" alt="...">
<a class="navbar-brand" href="index.html"> TekoWave</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<!-- Elementos de navegación y formulario de búsqueda -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Iniciar Sesión</a>
</li>
</ul>
<!-- Consulta a api de divisas -->
<span id="divisas-navbar" class="text-light mx-auto"></span>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="buscar" aria-label="buscar">
<button class="btn btn-outline-success" type="submit">Buscar</button>
</form>
<!-- Icono de carrito de compras -->
<a href="..." class="btn btn-outline-secondary me-2 button">
<i class="fas fa-shopping-cart"></i> Carrito <span id="num_cart" class="badge bg-secondary"></span>
</a>
</div>
</div>
</nav>
</nav>
<!-- Contenido principal -->
<main class="flex-shrink-0">
<div class="container">
<div class="table-responsive">
<!-- Tabla de compras -->
<table class="table">
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Subtotal</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Smart TV Marca '''Premier</td>
<td>$200.000</td>
<td><input type="number" id="cantidad_5" min="1" max="10" step="1" value="1" size="5" onchange="actualizaCantidad(this.value, 5)"></td>
<td>
<div id="subtotal_5" name="subtotal[]">$200.000</div>
</td>
<td><a id="eliminar" class="btn btn-warning btn-sm" data-bs-id="5" data-bs-toggle="modal" data-bs-target="#eliminaModal"><i class="fas fa-trash-alt"></i></a></td>
</tr>
<tr>
<td>PC Gamer Marca Xpg</td>
<td>$1.350.000</td>
<td><input type="number" id="cantidad_2" min="1" max="10" step="1" value="1" size="5" onchange="actualizaCantidad(this.value, 2)"></td>
<td>
<div id="subtotal_2" name="subtotal[]">$1.350.000</div>
</td>
<td><a id="eliminar" class="btn btn-warning btn-sm" data-bs-id="2" data-bs-toggle="modal" data-bs-target="#eliminaModal"><i class="fas fa-trash-alt"></i></a></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2">
<p class="h3" id="total" data-total="1550000">1.550.000 CLP</p>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Tabla de divisas -->
<div class="container">
<h5>Divisas</h5>
<div id="divisa-container" class="divisa-container"></div>
</div>
<div class="row">
<div class="col-md-5 offset-md-7 d-grid gap-2">
<a href="pago.html" class="btn btn-primary btn-lg">Realizar pago</a>
</div>
</div>
<div class="row">
<div class="col">
<select id="divisa" class="form-select" onchange="calcularTotal()">
<option value="peso">Peso Chileno</option>
<option value="dolar">Dólar</option>
<option value="uf">UF</option>
<option value="bitcoin">Bitcoin</option>
</select>
</div>
<div class="col">
<p class="h5" id="total">$1.550.000 CLP</p>
</div>
</div>
</div>
</main>
<!-- Pie de pagina -->
<footer class="pie-pagina">
<div class="grupo-1">
<div class="box">
<figure>
<a href="#">
<img src="icono.jpg" alt="...">
</a>
</figure>
</div>
<div class="box">
<h2>SOBRE NOSOTROS</h2>
<p>Nos Ubicamos en Av. Mall #1002, Providencia</p>
<p>CONTACTOS:</p>
<p>número: 2 3948 0193</p>
<p>Email: [email protected]</p>
</div>
<div class="box">
<h2>SIGUENOS</h2>
<div class="red-social">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-youtube"></a>
</div>
</div>
</div>
<div class="grupo-2">
<small>© 2023 <b>TekoWave</b> - Todos los Derechos Reservados.</small>
</div>
</footer>
<!-- Archivos JavaScript -->
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>