proyectoJAP/index.html at master · Manu-Developer/proyectoJAP · GitHub

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
<!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/styles.css" rel="stylesheet" />
		<link href="css/login.css" rel="stylesheet" />
	</head>

	<body class="text-center min-vh-100">
		<main class="form-signin">
			<form id="loginForm" class="needs-validation" novalidate>
				<img class="mb-4 login-img" src="img/login.png" alt="Imagen de Login" />
				<h1 class="h3 mb-3 font-weight-normal">Iniciar Sesión</h1>
				<div>
					<label for="email" class="sr-only form-label">Email</label>
					<input type="email" id="email" class="form-control" placeholder="Email" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$" required autofocus />
					<div class="invalid-feedback">Debe ingresar un email válido.</div>
				</div>
				<div class="mt-3">
					<label for="password" class="sr-only form-label">Contraseña</label>
					<input type="password" id="password" class="form-control" placeholder="Contraseña" pattern="^[(a-zA-Z0-9!@#$%^&*_)]{8,}$" required />
					<div class="invalid-feedback">Debe ingresar una contraseña válida.</div>
				</div>
				<button class="btn w-100 btn-primary btn-block mt-3" id="btnSubmit" type="submit">Ingresar</button>
				<p class="mb-0">o</p>
				<div class="google-auth" id="google-auth" role="button" tabindex="0" style="user-select: none; transition: background 20ms ease-in 0s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; height: 36px; border-radius: 4px; color: rgb(17, 17, 17); font-size: 14px; line-height: 1; padding-left: 12px; padding-right: 12px; font-weight: 500; background: white; border: 1px solid rgba(15, 15, 15, 0.15); width: 100%; box-shadow: rgba(15, 15, 15, 0.05) 0px 1px 2px; margin-bottom: 4px">
					<svg viewBox="0 0 20 20" class="googleLogo" style="width: 14px; height: 14px; display: block; fill: inherit; flex-shrink: 0; backface-visibility: hidden; margin-right: 6px">
						<g>
							<path d="M19.9996 10.2297C19.9996 9.54995 19.9434 8.8665 19.8234 8.19775H10.2002V12.0486H15.711C15.4823 13.2905 14.7475 14.3892 13.6716 15.0873V17.586H16.9593C18.89 15.8443 19.9996 13.2722 19.9996 10.2297Z" fill="#4285F4"></path>
							<path d="M10.2002 20.0003C12.9518 20.0003 15.2723 19.1147 16.963 17.5862L13.6753 15.0875C12.7606 15.6975 11.5797 16.0429 10.2039 16.0429C7.54224 16.0429 5.28544 14.2828 4.4757 11.9165H1.08301V14.4923C2.81497 17.8691 6.34261 20.0003 10.2002 20.0003Z" fill="#34A853"></path>
							<path d="M4.47227 11.9163C4.04491 10.6743 4.04491 9.32947 4.47227 8.0875V5.51172H1.08333C-0.363715 8.33737 -0.363715 11.6664 1.08333 14.4921L4.47227 11.9163Z" fill="#FBBC04"></path>
							<path d="M10.2002 3.95756C11.6547 3.93552 13.0605 4.47198 14.1139 5.45674L17.0268 2.60169C15.1824 0.904099 12.7344 -0.0292099 10.2002 0.000185607C6.34261 0.000185607 2.81497 2.13136 1.08301 5.51185L4.47195 8.08764C5.27795 5.71762 7.53849 3.95756 10.2002 3.95756Z" fill="#EA4335"></path>
						</g>
					</svg>
					Continuar con Google
				</div>
			</form>
		</main>
		<script src="./js/login.js"></script>
		<script src="./js/init.js"></script>
		<script src="./js/google-login.js" type="module"></script>
	</body>
</html>