@danielsilva7577 / maps-conect
Code Commits Issues Pulls Sessions CI/CD
main
desvergue-de-alexandro main
html 107 lines 4.58 KB
Raw
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Registro | MAPS Connect</title>
7 <script>try{if(localStorage.getItem('tema-maps')==='oscuro'){document.documentElement.classList.add('dark-mode')}}catch(e){}</script>
8 <script src="js/estilos.js?v=17"></script>
9 <link rel="stylesheet" href="css/base.css?v=8">
10 <link rel="stylesheet" href="css/layout.css?v=5">
11 <link rel="stylesheet" href="css/components.css?v=8">
12 <link rel="stylesheet" href="css/colores.css?v=1">
13 <link rel="stylesheet" href="css/estilos.css?v=26">
14 <style>
15 .rol-selector {
16 display: grid;
17 grid-template-columns: 1fr 1fr;
18 gap: 0.5rem;
19 }
20 .rol-selector label {
21 display: block;
22 padding: 0.75rem 1rem;
23 border: 1px solid var(--gray-300);
24 border-radius: var(--border-radius);
25 cursor: pointer;
26 text-align: center;
27 font-size: 0.95rem;
28 margin-bottom: 0;
29 }
30 .rol-selector label input {
31 margin-right: 0.4rem;
32 }
33 .rol-selector label.rol-activo {
34 border-color: var(--primary-color);
35 background: #eff6ff;
36 }
37 </style>
38 </head>
39 <body class="register-page">
40 <div class="auth-layout">
41 <div class="auth-card card">
42 <h1 class="page-title">Registro</h1>
43 <div id="alert-container"></div>
44 <form id="registro-form">
45 <div class="form-group">
46 <label>Tipo de cuenta</label>
47 <div class="rol-selector" id="rol-selector">
48 <label id="rol-card-estudiante" class="rol-activo">
49 <input type="radio" name="rol" value="estudiante" checked>
50 Estudiante
51 </label>
52 </div>
53 </div>
54 <div class="form-group" id="group-identificador">
55 <label for="matricula" id="label-identificador">Matrícula</label>
56 <input type="text" id="matricula" class="form-control" required placeholder="A12345678">
57 <div class="form-hint" id="hint-identificador">Identificador único institucional</div>
58 </div>
59 <div class="form-group">
60 <label for="nombre">Nombre(s)</label>
61 <input type="text" id="nombre" class="form-control" required>
62 </div>
63 <div class="form-group">
64 <label for="apellido">Apellido(s)</label>
65 <input type="text" id="apellido" class="form-control" required>
66 </div>
67 <div class="form-group">
68 <label for="email">Correo institucional</label>
69 <input type="email" id="email" class="form-control" required placeholder="usuario@tecmilenio.mx">
70 <div class="form-hint">Debe ser un correo @tecmilenio.mx o @servicios.tecmilenio.mx</div>
71 </div>
72 <div class="form-group">
73 <label for="contrasena">Contraseña</label>
74 <input type="password" id="contrasena" class="form-control" required minlength="6">
75 <div class="form-hint">Mínimo 6 caracteres</div>
76 </div>
77 <div class="form-group">
78 <label for="confirmar-contrasena">Confirmar contraseña</label>
79 <input type="password" id="confirmar-contrasena" class="form-control" required minlength="6">
80 </div>
81 <div class="form-group">
82 <div class="terminos-checkbox">
83 <input type="checkbox" id="acepta-terminos" required>
84 <label for="acepta-terminos">
85 He leído y acepto el
86 <a id="link-aviso-registro" role="button">Aviso de Privacidad</a>
87 y los
88 <a id="link-terminos-registro" role="button">Términos y Condiciones</a>.
89 </label>
90 </div>
91 </div>
92 <button type="submit" class="btn btn-primary" style="width:100%">Crear cuenta</button>
93 </form>
94 <p style="margin-top:1rem;text-align:center">
95 <a href="login.html">Ya tengo cuenta</a>
96 </p>
97 </div>
98 </div>
99 <script src="js/api.js?v=5"></script>
100 <script src="js/auth.js?v=7"></script>
101 <script src="js/utils.js?v=5"></script>
102 <script src="js/tema.js?v=2"></script>
103 <script src="js/colores.js?v=1"></script>
104 <script src="js/aviso-privacidad.js?v=1"></script>
105 <script src="js/pages/registro.js?v=6"></script>
106 </body>
107 </html>