DeVortex/registroCompleto.html at main · NAML26/DeVortex · 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
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="./styles/style.css">
        <link rel="stylesheet" href="./styles/index.css">
        <link rel="stylesheet" href="./styles/modal.css">
        <link rel="stylesheet" href="./styles/anfitrion.css">
        <link rel="shortcut icon" href="./assets/multimedia/icon2.svg" type="image/x-icon">
        <link async href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
            integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
            crossorigin="anonymous" referrerpolicy="no-referrer" />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
        <!-- <script defer src="ruta/a/bootstrap.bundle.min.js"></script> -->
        <script defer src="./js/main.js"></script>
        <script defer src="./js/modal.js"></script>
        <script defer src="./js/anfitrion.js"></script>
        <!-- Style de la pagina -->
        <link rel="stylesheet" href="./styles/registroCompleto.css">
        <!--  -->
        <script defer src="./js/registro.js"></script>
        <title>Registro largo</title>
</head>
<body>
    <header>
        <!------------------------ NAVBAR ----------------------->
        <a href="./index.html"> <img class="logo" src="./assets/multimedia/lokl-logo.png" alt="log"/> </a>
        <button class="abrir-menu" id="abrir">Abrir</button>
        <nav class="nav" id="nav">
        <button class="cerrar-menu" id="cerrar">Cerrar</button>
            <ul class="nav-list">
                <li><a href="./lugares.html">Lugares</a></li>
                <li><a href="./eventos.html">Eventos</a></li>
                <li><a href="./invitaciones.html">Invitaciones</a></li>
                <li><a href="./miespacio.html">Mi Lok'l</a></li>
                <li><a href="./login.html" class="especial2" data-bs-toggle="modal" data-bs-target="#exampleModal"><span class="color-white">Acceso</span></a></li>
                <li><a href="./login.html"><i class="material-icons">logout</i></a></li>
            </ul>
        </nav>
        <!------------------------ NAVBAR ----------------------->
    </header>

<body>
    <main class="container-fluid">
        <div class="row">
            <div class="col-12 sccs ">
            </div>
        </div>
    </main>
    <section class="container-fluid section__principal">
        <div class="row">
            <div class="col-4 imagen__formulario">

            </div>
            <div class="col-8 p-3 div__formulario">
            <h1>¡Bienvenido a Lok'l!</h1>
            <h2>Regístrate para ser miembro de esta gran comunidad</h2>
            <form id="myForm">
                  <div class="container-fluid mb-3 div_nombre">
                    <label for="disabledTextInput" class="form-label"></label>
                    <input type="text" id="disabledTextInput" class="form-control" placeholder="Nombre*">
                  </div>
                  <div class="container-fluid mb-3 div_apellido">
                    <label for="disabledTextInput" class="form-label"></label>
                    <input type="text" id="disabledTextInput" class="form-control" placeholder="Apellido*">
                    <legend>Asegúrate que coincida con tu identificación.</legend>
                </div><br>
                  <div class="container-fluid mb-3 div_fecha_de_nacimiento">
                    <label for="disabledSelect" class="form-label">Fecha de nacimiento</label>
                    <input type="date" id="disabledTextInput" class="form-control" placeholder="Nombre*">
                    <legend>Tenemos que asegurarnos que cumples con la mayoría de edad +18.</legend>
                    </div>
                    <div class="container-fluid mb-3 div_rfc">
                    <label for="disabledTextInput" class="form-label"></label>
                    <input type="text" id="disabledTextInput" class="form-control" placeholder="RFC*">
                </div>
                <div class="container-fluid mb-3 div_phone">
                    <label for="disabledTextInput" class="form-label">Teléfono</label>
                    <input type="tel" id="disabledTextInput" class="form-control" placeholder="Teléfono*">
                </div>
                    <h3 class="separador">Ubicación</h3>

                  <div class="container-fluid">
                    <div class="row">
                        <div class=" col-8 mb-3 div_estado">
                        <label for="disabledTextInput" class="form-label"></label>
                        <input type="text" id="disabledTextInput" class="form-control" placeholder="Estado *">
                        </div>
                        <div class=" col-4 mb-3 div_codigo_postal">
                            <label for="disabledTextInput" class="form-label"></label>
                            <input type="text" id="disabledTextInput" class="form-control" placeholder="Código Postal *">
                        </div>
                        <div class="col-6 mb-3 div_alcaldia_municipio">
                            <label for="disabledTextInput" class="form-label"></label>
                            <input type="text" id="disabledTextInput" class="form-control" placeholder="Alcaldía/Municipio">
                        </div>
                        <div class="col-6 mb-3 div_colonia">
                            <label for="disabledTextInput" class="form-label"></label>
                            <input type="text" id="disabledTextInput" class="form-control" placeholder="Colonia">
                          </div>
                          <div class="col-6 mb-3 div_calle">
                            <label for="disabledTextInput" class="form-label"></label>
                            <input type="text" id="disabledTextInput" class="form-control" placeholder="Calle">
                          </div>
                          <div class=" col-3 mb-3 div_numero_exterior">
                            <label for="disabledTextInput" class="form-label"></label>
                            <input type="text" id="disabledTextInput" class="form-control" placeholder="Número exterior">
                          </div>
                          <div class="col-3 mb-3 div_numero_interior">
                            <label for="disabledTextInput" class="form-label"></label>
                            <input type="text" id="disabledTextInput" class="form-control" placeholder="Número interior">
                          </div>
                    </div>

                  </div>


                  <legend>Necesitamos contar con tu ubicación para ponerte en contacto con personas y LOKL’S cerca de ti.</legend>
                 <!--  <h3 class="separador">Correo</h3>
                  <div class="mb-3 div_correo_electronico">
                    <label for="disabledTextInput" class="form-label"></label>
                    <input type="text" id="disabledTextInput" class="form-control" placeholder="Correo electrónico *">
                  </div>
                  <div class="mb-3 div_contraseña">
                    <label for="disabledTextInput" class="form-label"></label>
                    <input type="text" id="disabledTextInput" class="form-control" placeholder="Contraseña *">
                  </div>
                  <legend>- Tu contraseña no puede contener tu nombre o dirección de correo electrónico</legend>
                    <legend>- Al menos 8 caracteres</legend>
                    <legend>- Contiene un número o símbolo</legend> -->


                  <button type="click" id="toRegistroCompleto" class="btn btn-primary">Aceptar y Continuar</button>
                </fieldset>
              </form>
        </div>
    </div>
    </section>
    <div id="modalContainer"></div>
</body>

    <!-------------------------- FOOTER ------------------------>

    <footer class="pie-pagina">
        <div class="grupo-1">
            <div class="box">
                <a href="#">Volver al inicio</a><br>
                <a href="./contactanos.html">Contáctanos</a><br>
                <a href="./acercadenosotros.html" >Acerca de nosotros</a><br>
                <a href="./condiciones.html">Condiciones legales</a>
            </div>
            <div class="box">
                <h2>SÍGUENOS</h2>
                <div class="red-social">
                    <a href="https://www.instagram.com/" target=_blank class="fa"><i class="fa-brands fa-instagram"></i></a>
                    <a href="https://www.facebook.com/" target=_blank class="fa"><i class="fa-brands fa-facebook"></i></a>
                    <a href="https://www.twitter.com/" target=_blank class="fa"><i class="fa-brands fa-x-twitter"></i></a>
                    <a href="https://www.linkedin.com/" target=_blank class="fa"><i class="fa-brands fa-linkedin"></i></a>
                </div>
            </div>
            <div class="box">
                <figure>
                    <a href="#">
                        <img src="./assets/multimedia/logo-blanco.png" alt="Logo de SLee Dw">
                    </a>
                </figure>
            </div>
        </div>
        <div class="grupo-2">
            <small>&copy; 2024 <b></b> - Todos los Derechos Reservados.</small>
        </div>
        <!-------------------------- FOOTER ------------------------>
    </footer>
</body>
</html>