KeyMaster/index.php at master · DarielsMtz/KeyMaster · 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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<?php
// Inicialisamos la sesion
session_start();
?>

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- SEO = Básico -->
    <!-- Cada página del sitio tiene que ser diferente el título y la descripción -->
    <title>KeyMaster - Generador</title>
    <meta name="description" content="Descripción de la página Generador-Pro de KeyMaster." />
    <meta name="keywords" content="KeyMaster, Generador-Pro, herramienta, generador de contenido" />
    <!-- Etiquetas Open Graph y Twitter Card, para crear el SEO de Redes Sociales -->
    <meta property="og:title" content="KeyMaster - Generador-Pro" />
    <meta property="og:description" content="Descripción de la página Generador-Pro de KeyMaster." />
    <meta property="og:image" content="URL de la imagen que quieres mostrar en las redes sociales" />
    <meta property="og:url" content="URL de tu página" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="KeyMaster - Generador-Pro" />
    <meta name="twitter:description" content="Descripción de la página Generador-Pro de KeyMaster." />
    <meta name="twitter:image" content="URL de la imagen que quieres mostrar en Twitter" />
    <!-- App Web, indicar al navegador qué elementos mostrar en un JSON -->
    <link rel="manifest" href="site.webmanifest" />
    <!-- Icono de acceso para iOS -->
    <link rel="apple-touch-icon" href="icon.png" />
    <!-- Recordar que favicon.ico tiene que estar en el directorio inicial -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- Enlace de íconos de interfaz -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <!-- Links de estilos -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- Se cambia el tema de algunos navegadores -->
    <meta name="theme-color" content="#fafafa" />
    <!-- Scripts de diseño de alertas (JS) -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>


<body id="body__generador">
    <div id="generador">
        <!-- Apartado del encabezado -->
        <header class="container__main-header">
            <nav class="container__main-nav">
                <a href="" target="_self" class="container__main-nav-logo">
                    <img src="svg/Logotipo.svg" alt="Logo de KeyMaster" />
                </a>
                <ul class="container__main-nav-menu">
                    <li class="menu_item">
                        <a href="#generador_app" class="active anchor-link">Generador</a>
                    </li>
                    <li class="menu_item">
                        <a href="#conjeso_info" class="anchor-link">Consejos</a>
                    </li>

                    <?php if (!isset($_SESSION['loggedin'])) { ?>
                        <li class="menu_item">
                            <a href="registro.php">Registrarse</a>
                        </li>

                        <li class="menu_item">
                            <a href="inicio_sesion.php">Iniciar Sesion</a>
                        </li>
                    <?php
                    }
                    ?>

                    <?php
                    if (isset($_SESSION['loggedin'])) {  ?>
                        <li class="generador__main-sesion">
                            Hola, <b> <?php echo $_SESSION['nombre']; ?></b><i class="fa-regular fa-user"></i>
                            <ul class="submenu">
                                <li><a href="php/acciones_listado.php"><i class="fa-solid fa-vault"></i> Caja Fuerte</a>
                                </li>
                                <li><a href="php/cierre_sesion.php"><i class="fa-solid fa-right-from-bracket"></i> Cerrar
                                        Sesion</a></li>
                            </ul>
                        </li>
                    <?php
                    }
                    ?>

                </ul>
            </nav>
        </header>

        <!-- Apartado de la cabecera -->
        <section class="generador__cabecera">
            <article class="generador__cabecera-titulo">
                <section>
                    <h1>Generador de contraseñas seguras</h1>
                    <h2>Crea contraseñas robustas, guárdalas de manera segura, gestiónalas cómodamente y compártelas con
                        seguridad usando KeyMaster.</h2>
                    <p class="generador__cabecera-titulo-btn">
                        <?php
                        if (!isset($_SESSION['loggedin'])) {  ?>
                            <a href="registro.php" class="crear_cuenta">Crea una cuenta de KeyMaster</a>
                            <a href="#generador_app" class="comenzar anchor-link">Comenzar la experiencia</a>
                        <?php
                        }
                        ?>
                    </p>
                </section>
                <!-- Imagen de la cabecera -->
                <picture class="generador__cabecera-img">
                    <source srcset="img/desktop/img_encabrzado.webp 320w" sizes="(max-width: 320px)" type="image/webp">
                    <source srcset="img/desktop/img_encabrzado@2x.webp 800w" sizes="(max-width: 800px)" type="image/webp">
                    <source srcset="img/desktop/img_encabrzado@3x.webp 1280w" sizes="(max-width: 1280px)" type="image/webp">
                    <!-- Cantidad de source dependiendo su necesidad -->
                    <img src="casa-roja-enorme.jpg" title="Ilustracion" alt="Ilustracion de la seguridad de una contraseña" loading="lazy">
                </picture>
            </article>
        </section>
        <!-- Apartado del main -->
        <main class="generador__main">
            <!-- Apartado de la carta principal -->
            <section class="generador__main-carta">
                <!-- Apartado del encabezado de main -->
                <section class="generador__main-header">
                    <h1>Generador de contraseñas gratuito</h1>
                    <h5>¿Necesitas una contraseña segura? Pruebe el generador de contraseñas de Bitwarden para crear
                        contraseñas complejas que mantendrán su información segura.</h5>
                </section>

                <?php if (isset($_SESSION['loggedin'])) {  ?>
                    <section class="generador__main-app anchor-link" id="generador_app">

                        <!-- Apartado del campo de la contraseña -->
                        <section class="generador__main-contrasena">
                            <article class="generador__main-contrasena-texto">
                                <input type="text" id="password_vip" placeholder="1QW3780$%$(mXASD" readonly />
                            </article>

                            <!-- Boton de copiar -->
                            <button id="copiar_contrasena" type="button" class="genarador__main-contrasena-btn_copiar">
                                <img src="svg/Btn-copiar.svg" alt="Icono de copiar" />
                            </button>
                        </section>


                        <!-- Apartado de botones -->
                        <section class="generador__main-botones">
                            <!-- Boton de guardar contraseñas -->
                            <button type="button" id="guardar_contrasena" class="guardar">
                                Almacenar en caja fuerte
                            </button>

                            <!-- Boton de generar -->
                            <button type="button" id="generar_vip" class="generar">
                                Regenerar
                            </button>
                        </section>


                        <!-- Apartado de las longitudes de la contraseña -->
                        <section class="generador__main-longitudes">
                            <article>
                                <label>
                                    <h4>Caracteres: </h4>
                                    <span id="valor_rango">10</span>
                                </label>
                                <input type="range" name="Longitud" id="longitud" class="slider" value="10" min="8" max="16" />
                            </article>
                        </section>


                        <!-- Apartado de opciones -->
                        <section class="generador__main-opciones">
                            <h4>Opciones adicionales</h4>

                            <article class="generador__main-opciones-lista">
                                <!-- Todas la opciones -->
                                <label>
                                    <input type="checkbox" name="todas_opciones" id="todas_opciones" checked />
                                    Todas
                                </label>

                                <!-- Mayusculas -->
                                <label>
                                    <input type="checkbox" name="mayusculas" id="mayusculas" />
                                    A-Z
                                </label>

                                <!-- Minusculas -->
                                <label>
                                    <input type="checkbox" name="minusculas" id="minusculas" />
                                    a-z
                                </label>

                                <!-- Numeros -->
                                <label>
                                    <input type="checkbox" name="numeros" id="numeros" />
                                    0-9
                                </label>

                                <!-- Simbolos -->
                                <label class="generador__main__opciones-simbolos">
                                    <input type="checkbox" name="simbolos" id="simbolos" />
                                    <span>
                                        !@#$*%^&
                                    </span>
                                </label>
                            </article>
                        </section>


                        <p class="generador__main_subtitulo">¿Quieres probar la seguridad de tu contraseña? <a href="https://password.es/comprobador/" target="_blank">Prueba esta herramienta de
                                seguridad</a></p>
                    </section>
                <?php
                }
                ?>

                <?php if (!isset($_SESSION['loggedin'])) {  ?>
                    <!-- Apartado de no estar logeado -->
                    <section class="generador__main-app anchor-lin" id="generador_app">
                        <!-- Apartado del campo de la contraseña -->
                        <section class="generador__main-contrasena">
                            <article class="generador__main-contrasena-texto">
                                <input type="text" id="contrasena" readonly placeholder="1W8mX0sD" />
                            </article>
                        </section>
                        <h6></h6>
                        <small class="msg-pass">La contraseña generada está compuesta de 8 caracteres *</small>

                        <!-- Apartado del botón de generar y la barra de nivel de seguridad de la contraseña -->
                        <section class="invitado__main-accion">
                            <!-- Apartado de botones -->
                            <section class="generador__main-botones">
                                <button type="button" id="invitado__generar" class="generar">
                                    Generar
                                </button>
                                <button type="button" id="invitado__copiar" class="copiar">
                                    Copiar
                                </button>
                            </section>
                        </section>
                    </section>
                <?php
                }
                ?>
            </section>

            <!-- Apartado de la carta secundaria -->
            <section class="generador__main-informacion anchor-link" id="conjeso_info">
                <!-- Imagen de la cabecera -->
                <picture class="generador__main-informacion-img">
                    <source srcset="img/desktop/mockup_movil.webp 320w" sizes="(max-width: 320px)" type="image/webp">
                    <source srcset="img/desktop/mockup_movil@2x.webp 800w" sizes="(max-width: 800px)" type="image/webp">
                    <source srcset="img/desktop/mockup_movil@3x.webp 1280w" sizes="(max-width: 1280px)" type="image/webp">
                    <!-- Cantidad de source dependiendo su necesidad -->
                    <img src="casa-roja-enorme.jpg" title="Ilustracion" alt="Ilustracion de la seguridad de una contraseña" loading="lazy">
                </picture>

                <!-- Texto de la carta secundaria -->
                <article class="generador__main-informacion-texto">
                    <h2>Principios para Generar una Contraseña Segura</h2>
                    <h3>Hazla Única</h3>
                    <p>Las contraseñas deben ser diferentes para cada cuenta. Esto disminuye la probabilidad de que
                        múltiples cuentas sean comprometidas si una de tus contraseñas se expone en una filtración de
                        datos.</p>

                    <h3>Hazla Aleatoria</h3>
                    <p>La contraseña debe incluir una combinación de letras mayúsculas y minúsculas, números, caracteres
                        especiales y palabras sin un patrón discernible. No debe estar relacionada con tu información
                        personal.</p>

                    <h3>Hazla Larga</h3>
                    <p>La contraseña debe tener al menos 14 caracteres. Un hacker puede tardar 39 minutos en descifrar
                        una contraseña de 8 caracteres, mientras que una de 16 caracteres podría tardar mil millones de
                        años en descifrarla.</p>
                </article>
            </section>

            <section class="generador__main_texto">
                <article class="generador__main_texto-caja">
                    <h2>¿Qué es un generador de contraseñas?</h2>
                    <p>Un generador de contraseñas es una herramienta que crea contraseñas seguras y aleatorias. Al usar
                        un
                        generador de contraseñas, puedes elegir la longitud y complejidad que deseas para tu nueva
                        contraseña. El generador producirá una contraseña segura que cumpla con tus especificaciones.
                    </p>
                    <p>Consejo Profesional: Con el generador de contraseñas gratuito de Bitwarden, puedes ajustar la
                        opción
                        "Tipo" para crear una frase de contraseña en lugar de una contraseña tradicional. Las frases de
                        contraseña combinan palabras generadas aleatoriamente a partir de un diccionario estandarizado,
                        como
                        panda-lunchroom-uplifting-resisting. Estas frases son seguras y más fáciles de recordar.</p>

                    <h2>¿Por qué necesitas un generador de contraseñas?</h2>
                    <p>Todos hemos pasado por el proceso de configurar una cuenta en un nuevo sitio web: se nos pide
                        crear
                        una contraseña que incluya letras mayúsculas y minúsculas, números y uno o dos caracteres
                        especiales
                        (o incluso tres o cuatro). Reflexionas un momento y escribes una contraseña que cumple con estas
                        reglas. Te sientes bien contigo mismo, pensando que nadie podría adivinar esa contraseña. Pero,
                        ¿estás seguro de que es lo suficientemente segura como para proteger tu información privada?
                    </p>
                    <p>El problema es que, incluso si diseñas tu contraseña para que sea larga y compleja, la mayoría de
                        las
                        personas tienden a usar caracteres o patrones fáciles de recordar, como tu cumpleaños o el
                        nombre de
                        tu mascota. Esto es arriesgado porque los hackers pueden utilizar la información pública sobre
                        ti en
                        redes sociales u otros sitios para intentar acceder a tus cuentas privadas mediante ataques de
                        fuerza bruta. Por eso, es crucial asegurarte de que tus contraseñas no contengan información
                        personal.</p>

                    <p>La buena noticia es que un generador de contraseñas seguras puede hacer el trabajo por ti,
                        creando
                        automáticamente contraseñas seguras, únicas y difíciles de descifrar.</p>
                </article>
            </section>
            <?php
            if (!isset($_SESSION['loggedin'])) {  ?>
                <section class="generador__main_call">
                    <h2>KeyMaster es la forma más segura de generar nuevas contraseñas</h2>
                    <a href="registro.php">Crear una cuenta</a>
                </section>
            <?php
            }
            ?>

        </main>

        <!-- Apartado del pie de pagina -->
        <footer class="generador__footer">
            <section class="generador__footer-main">
                <nav class="generador__footer-nav">
                    <h4>®️ 2024 KeyMaster</h4>
                    <a href="#">Terminos</a>
                    <a href="#">Privacidad</a>
                    <a href="#"> Uso de Cookies</a>
                </nav>
                <section class="generador__footer-redes">
                    <a href=""><img src="svg/instagram.svg" alt=""></a>
                    <a href=""><img src="svg/linkedin.svg" alt=""></a>
                    <a href=""><img src="svg/github.svg" alt=""></a>
                    <a href=""><img src="svg/x.svg" alt=""></a>
                </section>
            </section>
        </footer>
    </div>
    <script src="js/generador_vip.js"></script>
    <script src="js/generardor_contrasenas.js"></script>
</body>


</html>