-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (135 loc) · 5.76 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Proyecto Final :: Curso JavaScript 2022 Coderhouse</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.scss/estilos.css">
</head>
<body>
<!-- NAVEGADOR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html">Gestor de Stock</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="./index.html">Home</a>
</li>
<li id="sessionUser" class="nav-item">
<a class="nav-link" href=""></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- MODAL PARA INICIO DE SESION -->
<section id="bienvenida">
<div id="welcomeUser" class="card mx-auto w-50 mt-4">
<h1 class="title mx-auto">¡BIENVENIDO!</h1>
<h2 class="subtitle mx-auto mt-1 text-center">Inicie sesión para continuar</h2>
<button class="btn btn-primary mx-auto w-50 mt-1 mb-2" data-bs-toggle="modal" data-bs-target="#myModal">INICIAR SESIÓN</button>
<div class="modal" id="myModal">
<div class="modal-dialog p-5">
<div class="modal-content">
<div class="modal-header bg-info">
<h3 class="modal-title">Inicio de sesión</h3>
<button class="btn btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<fieldset>
<form id="inicioSesion">
<div class="form-group">
<input type="text" placeholder="Nombre de usuario" id="usuario" class="form-control mt-1 mb-2" required="required">
</div>
<div class="form-group">
<input type="password" placeholder="Contraseña" id="password" class="form-control mt-1 mb-2" required="required">
</div>
<div class="row m-1">
<div class="col">
</div>
<div class="col">
<input type="button" id="botonLogin" class="btn btn-primary btn-block mt-2" onclick="logIn()" value="INGRESAR">
</div>
<div class="col">
</div>
</div>
</form>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- APLICACION -->
<section id="application">
<div class="container p-3">
<div id="app" class="row pt-1">
<div class="col-md-5">
<div class="card mt-4">
<div class="card-header text-center p-2">
<h4>INGRESE EL PRODUCTO</h4>
</div>
<form id="product-form">
<fieldset>
<div class="form-group">
<input type="text" placeholder="NOMBRE" id="nombre" class="form-control" required="required">
</div>
<div class="form-group">
<input type="number" placeholder="PRECIO" id="precio" class="form-control" step="0.01" min="0.01" required="required">
</div>
<div class="form-group">
<input type="number" placeholder="CANTIDADES" id="cantidades" class="form-control" min="1" required="required">
</div>
<div class="row m-1">
<div class="col">
</div>
<div class="col">
<input type="submit" id="prodButton" class="btn btn-primary btn-block" value="INGRESAR">
</div>
<div class="col">
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="card col-md-7 text-center mx-auto my-3 w-25 bg-light">
<div class="mt-1">
<strong>TOTAL DE ARTÍCULOS INGRESADOS</strong>:
</div>
<div>
<p id="contadorProductos" class="fs-2 mt-2 text-decoration-underline">0</p>
</div>
</div>
<div id="product-list" class="col-md-12 d-flex flex-nowrap justify-content-evenly mt-3">
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="text-white bg-dark mt-auto text-center fixed-bottom">
<div class="my-2 mx-auto text-center">
<div class="form-check-inline">
<a href="https://www.linkedin.com/in/juanps94/" target="_blank" class="btn btn-secondary fa fa-linkedin text-reset"></a>
</div>
<div class="form-check-inline text-center mx-5">
<small>© 2022 Gestor de Stock online - by Juan Pablo Sinkachkuk - <b>Coderhouse Curso JavaScript.</b></small>
</div>
<div class="form-check-inline">
<a href="https://github.com/juan-ps" target="_blank" class="btn btn-secondary fa fa-github text-reset"></a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="./js/main.js"></script>
<script src="https://kit.fontawesome.com/ebbc020d49.js" crossorigin="anonymous"></script>
</body>
</html>