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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Login</title>
    <link href="css/normalize.css" rel="stylesheet"/>
    <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=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <link href="css/styles.css" rel="stylesheet"/>
  </head>
  <body>
    <main>
      <section>
	<h1 class="title">Log in</h1>
	<form class="form" name="login" method="post">
	  <label class="form__label" for="username">Usuario</label>
	  <div class="input-container">
	    <input id="username" class="form__input" name="username" type="text" required/>
	    <span id="icon-check__username" class="material-symbols-outlined form__input-icon icon-check">check_circle</span>
	    <span id="icon-cancel__username" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span>
	  </div>
	  <p id="input-error__username" class="form__input-error">El usuario tiene que ser de 4 a 16 digitos y solo puede contener numeros, letras y guion bajo.</p>
	  <label class="form__label" for="password">Contraseña</label>
	  <div class="input-container">
	    <input id="password" class="form__input" name="password" type="password" required/>
	    <span id="icon-check__password" class="material-symbols-outlined form__input-icon icon-check">check_circle</span>
	    <span id="icon-cancel__password" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span>
	  </div>
	  <p id="input-error__password" class="form__input-error">La contraseña tiene que ser de 4 a 12 dígitos</p>
	  <p class="form__error-text"><span class="material-symbols-outlined icon-warning">warning</span> <b>Error:</b> Por favor rellena el formulario correctamente</p>
	  <div class="form__submit">
	    <input class="form__submit__button" type="submit" value="Enviar"/>
	  </div>
	  <p class="form__success-send-text">Formulario enviado exitosamente!</p>
	</form>
      </section>
    </main>
    <script src="js/login.js"></script>
  </body>
</html>