Hugging Face's logo

Spaces:
chartManD
/
pageRed
Sleeping

App Files Community
chartManD commited on
Commit
d26abee
·
1 Parent(s): 20f1a18

agreagado generador de contrasenas

Browse files
Files changed (8) hide show
  1. app/contrasena.php +44 -0
  2. app/css/text-fonts.css +8 -0
  3. app/inc/footer.php +0 -1
  4. app/inc/header.php +1 -0
  5. app/inc/nav.php +19 -0
  6. app/inc/welcome.php +11 -0
  7. app/index.php +3 -13
  8. app/js/contrasena.js +59 -1
app/contrasena.php ADDED
@@ -0,0 +1,44 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php include_once "./inc/header.php" ?>
2
+ <?php include_once "./inc/welcome.php" ?>
3
+
4
+ <section class="container-sm">
5
+ <header class="container-sm">
6
+ <h4 class="fs-1 pt-serif-bold" style="letter-spacing: 2px;">Genera tu contraseña aquí</h4>
7
+ <p class="fs-1">👀🔒</p>
8
+ </header>
9
+ <article class="container-sm d-flex flex-column align-items-center">
10
+ <p class="fs-4 pt-serif-regular-italic">Pulsa el boton verde</p>
11
+ <button id="generarContraseña" type="button" class="btn btn-success btn-lg">Generar contraseña
12
+ ✍️</button>
13
+ <div class="input-group alert alert-success my-3 pb-0 ancho-password" role="alert">
14
+ <p id="showPassword" class="fs-4 pt-serif-regular form-control">Aquí tu contraseña</p>
15
+ <button id="copy-contra" class="btn btn-danger pt-serif-regular mb-3" type="button" data-bs-toggle="modal"
16
+ data-bs-target="#copiado" disabled>Copiar</button>
17
+ </div>
18
+
19
+ <!-- Modal -->
20
+ <div class="modal fade" id="copiado" tabindex="-1" aria-labelledby="copiadoLabel" aria-hidden="true">
21
+ <div class="modal-dialog">
22
+ <div class="modal-content bg-black border-white">
23
+ <div class="modal-header">
24
+ <h1 class="modal-title fs-5" id="copiadoLabel">Exito</h1>
25
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
26
+ </div>
27
+ <div class="modal-body">
28
+ Su contraseña ha sido copiada al portapapeles
29
+ </div>
30
+ <div class="modal-footer">
31
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
32
+ <button type="button" class="btn btn-primary">Save changes</button>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </div>
37
+
38
+ <button id="downloadBtn" type="button" class="btn btn-warning btn-lg" disabled>Guardar en
39
+ dispositivo 💾</button>
40
+ </article>
41
+ </section>
42
+ <script src="/js/contrasena.js?i=12"></script>
43
+
44
+ <?php include_once "./inc/footer.php" ?>
app/css/text-fonts.css CHANGED
@@ -35,9 +35,17 @@
35
  height: 600px;
36
  }
37
 
 
 
 
 
38
  @media (max-width: 768px) {
39
  .tamano-mapa {
40
  width: 100%;
41
  height: 300px;
42
  }
 
 
 
 
43
  }
 
35
  height: 600px;
36
  }
37
 
38
+ .ancho-password {
39
+ width: 500px;
40
+ }
41
+
42
  @media (max-width: 768px) {
43
  .tamano-mapa {
44
  width: 100%;
45
  height: 300px;
46
  }
47
+
48
+ .ancho-password {
49
+ width: 100%;
50
+ }
51
  }
app/inc/footer.php CHANGED
@@ -20,7 +20,6 @@
20
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
21
  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
22
  crossorigin="anonymous"></script>
23
- <script src="../js/contrasena.js?i=12"></script>
24
  </body>
25
 
26
  </html>
 
20
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
21
  integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
22
  crossorigin="anonymous"></script>
 
23
  </body>
24
 
25
  </html>
app/inc/header.php CHANGED
@@ -16,5 +16,6 @@
16
  </head>
17
 
18
  <body class=" text-center bg-secondary p-0 m-0 text-white" style="min-height: 100vh; overflow-x: hidden;">
 
19
  <?php include_once "./inc/pageHeader.php" ?>
20
  <main class="container-lg pt-serif-regular pt-4 pb-2 bg-black">
 
16
  </head>
17
 
18
  <body class=" text-center bg-secondary p-0 m-0 text-white" style="min-height: 100vh; overflow-x: hidden;">
19
+ <?php include_once "./inc/nav.php" ?>
20
  <?php include_once "./inc/pageHeader.php" ?>
21
  <main class="container-lg pt-serif-regular pt-4 pb-2 bg-black">
app/inc/nav.php ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <nav class="container-lg navbar-expand-lg navbar bg-dark border-bottom border-body" data-bs-theme="dark">
2
+ <div class="container-fluid">
3
+ <a class="navbar-brand" href="/">ITSZ</a>
4
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
5
+ aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
6
+ <span class="navbar-toggler-icon"></span>
7
+ </button>
8
+ <div class="collapse navbar-collapse" id="navbarNav">
9
+ <ul class="navbar-nav">
10
+ <li class="nav-item">
11
+ <a class="nav-link active" aria-current="page" href="/">INICIO</a>
12
+ </li>
13
+ <li class="nav-item">
14
+ <a class="nav-link" href="/contrasena.php">GENERAR CONTRASEÑA</a>
15
+ </li>
16
+ </ul>
17
+ </div>
18
+ </div>
19
+ </nav>
app/inc/welcome.php ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <hr>
2
+ <section class="container-fluid d-flex justify-content-center">
3
+ <p class="text-center pt-serif-bold m-0" style="max-width: 350px;letter-spacing: normal;">
4
+ Hola alumno del ITSZ <br>
5
+ de la extension de Tezonapa <br>
6
+ <span class="fs-1">👋</span><br><br>
7
+ <i style="letter-spacing: 3px;">"Esta es una pagina para generar contraseñas destionada al personal educativo y
8
+ estudiantil de la escuela"</i>
9
+ </p>
10
+ </section>
11
+ <hr>
app/index.php CHANGED
@@ -1,21 +1,11 @@
1
  <?php include_once "./inc/header.php" ?>
 
2
 
3
- <hr>
4
- <div class="container-fluid d-flex justify-content-center">
5
- <p class="text-center pt-serif-bold m-0" style="max-width: 350px;letter-spacing: normal;">
6
- Hola alumno del ITSZ <br>
7
- de la extension de Tezonapa <br>
8
- <span class="fs-1">👋</span><br><br>
9
- <i style="letter-spacing: 3px;">"Esta es una pagina para generar contraseñas destionada al personal educativo y
10
- estudiantil de la escuela"</i>
11
- </p>
12
- </div>
13
- <hr>
14
- <div class="container-sm">
15
  <iframe
16
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4497.20846191439!2d-96.69804321280105!3d18.588168447314914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c466d3cdf128d7%3A0xae1a2e7e88ee9fe4!2sInstituto%20Tecnol%C3%B3gico%20Superior%20de%20Zongolica%20Extensi%C3%B3n%20Tezonapa!5e0!3m2!1ses!2smx!4v1727721554751!5m2!1ses!2smx"
17
  class="tamano-mapa p-0 m-0" allowfullscreen="" loading="lazy"
18
  referrerpolicy="no-referrer-when-downgrade"></iframe>
19
- </div>
20
 
21
  <?php include_once "./inc/footer.php" ?>
 
1
  <?php include_once "./inc/header.php" ?>
2
+ <?php include_once "./inc/welcome.php" ?>
3
 
4
+ <section class="container-sm">
 
 
 
 
 
 
 
 
 
 
 
5
  <iframe
6
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4497.20846191439!2d-96.69804321280105!3d18.588168447314914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c466d3cdf128d7%3A0xae1a2e7e88ee9fe4!2sInstituto%20Tecnol%C3%B3gico%20Superior%20de%20Zongolica%20Extensi%C3%B3n%20Tezonapa!5e0!3m2!1ses!2smx!4v1727721554751!5m2!1ses!2smx"
7
  class="tamano-mapa p-0 m-0" allowfullscreen="" loading="lazy"
8
  referrerpolicy="no-referrer-when-downgrade"></iframe>
9
+ </section>
10
 
11
  <?php include_once "./inc/footer.php" ?>
app/js/contrasena.js CHANGED
@@ -1,5 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
  function getPassword() {
2
- document.getElementById("password").value = autoCreate(12);
 
 
 
 
 
 
 
 
 
 
 
 
3
  }
4
 
5
  function autoCreate(plength) {
@@ -16,3 +40,37 @@ function autoCreate(plength) {
16
 
17
  return password;
18
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ let contrasnaUsuario = "";
2
+
3
+ document
4
+ .getElementById("generarContraseña")
5
+ .addEventListener("click", getPassword);
6
+
7
+ document
8
+ .getElementById("downloadBtn")
9
+ .addEventListener("click", downloadPassword);
10
+
11
+ document.getElementById("copy-contra").addEventListener("click", copiarPorta);
12
+
13
  function getPassword() {
14
+ contrasnaUsuario = autoCreate(12);
15
+ document.getElementById("showPassword").innerText = contrasnaUsuario;
16
+ document.getElementById("downloadBtn").disabled = false;
17
+ document.getElementById("copy-contra").disabled = false;
18
+ }
19
+
20
+ function getTimeNow() {
21
+ let date = new Date();
22
+ let mes = date.getMonth();
23
+ mes = mes.toLocaleString.length == 1 ? `0${mes}` : mes;
24
+ let segundos = date.getSeconds();
25
+ segundos = segundos.toLocaleString().length == 1 ? `0${segundos}` : segundos;
26
+ return `${date.getFullYear()}-${mes}-${date.getDate()} | ${date.getHours()}:${date.getMinutes()}:${segundos}`;
27
  }
28
 
29
  function autoCreate(plength) {
 
40
 
41
  return password;
42
  }
43
+
44
+ function downloadPassword() {
45
+ let fecha = getTimeNow();
46
+
47
+ // El contenido del archivo
48
+ const contenido = `Creado a: ${fecha}\nContraseña: ${contrasnaUsuario}`;
49
+
50
+ // Crear un blob con el contenido
51
+ const archivo = new Blob([contenido], { type: "text/plain" });
52
+
53
+ // Crear un enlace temporal para la descarga
54
+ const enlace = document.createElement("a");
55
+ enlace.href = URL.createObjectURL(archivo);
56
+ enlace.download = "password.txt";
57
+
58
+ // Simular un clic para iniciar la descarga
59
+ enlace.click();
60
+
61
+ // Liberar la URL del objeto
62
+ URL.revokeObjectURL(enlace.href);
63
+ }
64
+
65
+ function copiarPorta() {
66
+ // Obtener el texto del párrafo
67
+ const texto = document.getElementById("showPassword").innerText;
68
+
69
+ // Usar la API de portapapeles para copiar el texto
70
+ navigator.clipboard
71
+ .writeText(texto)
72
+ .then(function () {})
73
+ .catch(function (error) {
74
+ alert("Error al copiar al portapapeles: ", error);
75
+ });
76
+ }