agregada encuesta de satisfaccion y coreccion de ortografia

app/contrasena.php

@@ -7,7 +7,7 @@
         <p class="fs-1">👀🔒</p>
     </header>
     <article class="container-sm d-flex flex-column align-items-center">
-        <p class="fs-4 pt-serif-regular-italic">Pulsa el boton verde</p>
+        <p class="fs-4 pt-serif-regular-italic">Pulsa el botón verde</p>
         <button id="generarContraseña" type="button" class="btn btn-success btn-lg">Generar contraseña
             ✍️</button>
         <div class="input-group alert alert-success my-3 pb-0 ancho-password" role="alert">
@@ -18,18 +18,17 @@
 
         <!-- Modal -->
         <div class="modal fade" id="copiado" tabindex="-1" aria-labelledby="copiadoLabel" aria-hidden="true">
-            <div class="modal-dialog">
+            <div class="modal-dialog modal-dialog-centered">
                 <div class="modal-content bg-black border-white">
                     <div class="modal-header">
-                        <h1 class="modal-title fs-5" id="copiadoLabel">Exito</h1>
+                        <h1 class="modal-title fs-5" id="copiadoLabel">Éxito</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         Su contraseña ha sido copiada al portapapeles
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                        <button type="button" class="btn btn-primary">Save changes</button>
+                        <button type="button" class="btn btn-primary">Ok</button>
                     </div>
                 </div>
             </div>
@@ -37,8 +36,47 @@
 
         <button id="downloadBtn" type="button" class="btn btn-warning btn-lg" disabled>Guardar en
             dispositivo 💾</button>
+
+        <link rel="stylesheet" href="./app/css/formulario.css">
+        <!-- Modal -->
+        <div class="modal fade" id="form" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+            aria-labelledby="formLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content bg-black border-white">
+                    <div class="modal-header">
+                        <h1 class="text-center fs-5" id="formLabel">Encuesta de satisfacción</h1>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form id="formulario-satisfaccion" class="container-fluid" action="/" method="post">
+                            <div>
+                                <p class="m-0 p-0 ">¿Qué tan satisfecho te sientes con el servicio?</p>
+                                <p class="clasificacion">
+                                    <input id="radio1" type="radio" name="estrellas" value="5">
+                                    <label for="radio1">★</label>
+                                    <input id="radio2" type="radio" name="estrellas" value="4"><label
+                                        for="radio2">★</label>
+                                    <input id="radio3" type="radio" name="estrellas" value="3">
+                                    <label for="radio3">★</label>
+                                    <input id="radio4" type="radio" name="estrellas" value="2">
+                                    <label for="radio4">★</label>
+                                    <input id="radio5" type="radio" name="estrellas" value="1" checked>
+                                    <label for="radio5">★</label>
+                                </p>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button id="no-opinion" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Sin
+                            opinion</button>
+                        <button id="enviar-form" class="btn btn-primary">Enviar</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </article>
 </section>
 <script src="/js/contrasena.js?i=12"></script>
+<script src="/js/formulario.js?i=12"></script>
 
 <?php include_once "./inc/footer.php" ?>

app/css/formulario.css

@@ -0,0 +1,35 @@
+form {
+    width: 250px;
+    margin: 0 auto;
+    height: 50px;
+}
+
+form p {
+    text-align: center;
+}
+
+form label {
+    font-size: 20px;
+}
+
+input[type="radio"] {
+    display: none;
+}
+
+label {
+    color: grey;
+}
+
+.clasificacion {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+}
+
+label:hover,
+label:hover~label {
+    color: orange;
+}
+
+input[type="radio"]:checked~label {
+    color: orange;
+}

app/inc/footer.php

@@ -3,13 +3,13 @@
 <footer class="container-lg card text-center bg-black text-white">
     <hr>
     <div class="card-header fw-bold">
-        Instituto Tecnologico Superior de Zongolica
+        Instituto Tecnológico Superior de Zongolica
     </div>
     <hr>
     <div class="card-body">
-        <h5 class="card-title">Generardor de contraseñas</h5>
-        <p class="card-text">Todos los derechos reservados para el ITSZ extencion Tezonapa</p>
-        <a href="https://zongolica.tecnm.mx/" target="_blank" class="btn btn-primary">Pagina del Tecnologico</a>
+        <h5 class="card-title">Generador de contraseñas</h5>
+        <p class="card-text">Todos los derechos reservados para el ITSZ extensión Tezonapa</p>
+        <a href="https://zongolica.tecnm.mx/" target="_blank" class="btn btn-primary">Página del Tecnológico</a>
     </div>
     <hr>
     <div class="card-footer fw-bold">

app/inc/nav.php

@@ -1,16 +1,16 @@
 <nav class="container-lg navbar-expand-lg navbar bg-dark border-bottom border-body" data-bs-theme="dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="/">ITSZ</a>
+        <a class="navbar-brand fs-1 pt-serif-bold p-2" style="letter-spacing: 3px;" href="/">ITSZ</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
             aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav">
-                <li class="nav-item">
+        <div class="collapse navbar-collapse fs-5" style="letter-spacing: 2px;" id="navbarNav">
+            <ul class="navbar-nav gap-3">
+                <li class="nav-item border">
                     <a class="nav-link active" aria-current="page" href="/">INICIO</a>
                 </li>
-                <li class="nav-item">
+                <li class="nav-item border">
                     <a class="nav-link" href="/contrasena.php">GENERAR CONTRASEÑA</a>
                 </li>
             </ul>

app/inc/welcome.php

@@ -2,9 +2,9 @@
 <section class="container-fluid d-flex justify-content-center">
     <p class="text-center pt-serif-bold m-0" style="max-width: 350px;letter-spacing: normal;">
         Hola alumno del ITSZ <br>
-        de la extension de Tezonapa <br>
-        <span class="fs-1">👋</span><br><br>
-        <i style="letter-spacing: 3px;">"Esta es una pagina para generar contraseñas destionada al personal educativo y
+        de la extensión de Tezonapa <br>
+        <span class="fs-1">👋</span><br>
+        <i style="letter-spacing: 3px;">"Esta es una página para generar contraseñas destinada al personal educativo y
             estudiantil de la escuela"</i>
     </p>
 </section>

app/index.php

@@ -2,6 +2,9 @@
 <?php include_once "./inc/welcome.php" ?>
 
 <section class="container-sm">
+    <header>
+        <h2>Mapa del Tecnologico Tezonapa</h2>
+    </header>
     <iframe
         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"
         class="tamano-mapa p-0 m-0" allowfullscreen="" loading="lazy"

app/js/contrasena.js

@@ -1,5 +1,9 @@
 let contrasnaUsuario = "";
 
+const buttonDonwland = new CustomEvent("button-donwland", {
+  detail: { message: "Evento boton de descarga" },
+});
+
 document
   .getElementById("generarContraseña")
   .addEventListener("click", getPassword);
@@ -44,10 +48,8 @@ function autoCreate(plength) {
 function downloadPassword() {
   let fecha = getTimeNow();
 
-  // El contenido del archivo
   const contenido = `Creado a: ${fecha}\nContraseña: ${contrasnaUsuario}`;
 
-  // Crear un blob con el contenido
   const archivo = new Blob([contenido], { type: "text/plain" });
 
   // Crear un enlace temporal para la descarga
@@ -55,18 +57,16 @@ function downloadPassword() {
   enlace.href = URL.createObjectURL(archivo);
   enlace.download = "password.txt";
 
-  // Simular un clic para iniciar la descarga
   enlace.click();
 
-  // Liberar la URL del objeto
   URL.revokeObjectURL(enlace.href);
+
+  document.getElementById("downloadBtn").dispatchEvent(buttonDonwland);
 }
 
 function copiarPorta() {
-  // Obtener el texto del párrafo
   const texto = document.getElementById("showPassword").innerText;
 
-  // Usar la API de portapapeles para copiar el texto
   navigator.clipboard
     .writeText(texto)
     .then(function () {})

app/js/formulario.js

@@ -0,0 +1,23 @@
+document
+  .getElementById("downloadBtn")
+  .addEventListener("button-donwland", showModalForm);
+
+document
+  .getElementById("enviar-form")
+  .addEventListener("click", enviarFormulario);
+
+document.getElementById("no-opinion").addEventListener("click", noOpinion);
+
+function enviarFormulario() {
+  console.log("Aaaaaaaaaaaaa");
+  document.getElementById("formulario-satisfaccion").submit();
+}
+
+function noOpinion() {
+  window.location.replace("/");
+}
+
+function showModalForm() {
+  const form = new bootstrap.Modal(document.getElementById("form"));
+  form.show();
+}