Docs GitHub page

docs/index.html

@@ -159,8 +159,11 @@ <h2 id="inicio-de-sesión"><span>🔑</span> Inicio de Sesión</h2>
 <h3>¿Cómo acceder?</h3>
 <ol>
   <li>Ingresar a la URL del backoffice: <code>https://classconnect-backoffice.vercel.app/</code></li>
+  <img src="images/login.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />  
   <li>Completar los campos de correo electrónico y contraseña.</li>
-  <li>Hacer clic en <strong>Iniciar Sesión</strong>.</li>
+  <img src="images/login-data.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />  
+  <li>Hacer clic en el botón <strong>Login</strong>, marcado en rojo, como se ve en la imágen.</li>
+  <img src="images/login-button.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />  
 </ol>
 
 <h3>Mensajes posibles</h3>
@@ -179,8 +182,11 @@ <h3>¿Cómo registrar a un nuevo administrador?</h3>
 <ol>
   <li>Ingresar con una cuenta de administrador.</li>
   <li>Hacer clic donde dice "Register an Admin here".</li>
+  <img src="images/register-admin.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
   <li>Completar el formulario con los datos requeridos.</li>
-  <li>Hacer clic en <strong>Register</strong>.</li>
+  <img src="images/register-admin-fields.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
+  <li>Hacer clic en <strong>Register</strong>, como se ve en la imágen, marcado con rojo.</li>
+  <img src="images/register-red.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
 </ol>
 
 <h3>Resultados esperados</h3>
@@ -203,16 +209,22 @@ <h3>Visualización del listado de usuarios</h3>
 
 <h3>Edición de roles y permisos</h3>
 <ol>
-  <li>Para cada usuario, se visualizará la opción de modificar su rol según corresponda.</li>
+  <li>Para cada usuario, se visualizará la opción de modificar su rol según corresponda, tocando el botón desplegable que aparece junto al nombre del curso, como se ve en la imágen, marcado con rojo.</li>
+  <img src="images/button-update-role.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
   <li>Se mostrará una opción para confirmar los cambios realizados.</li>
+  <img src="images/confirmation-role-msg.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
   <li>El sistema confirmará que la actualización fue realizada con éxito.</li>
+  <img src="images/updated_role.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
 </ol>
 
 <h3>Bloqueo y desbloqueo de usuarios</h3>
 <ol>
-  <li>Desde el listado, para cada usuario se podrá utilizar el botón correspondiente para <strong>Block</strong> o <strong>Unblock</strong>.</li>
+  <li>Desde el listado, para cada usuario se podrá utilizar el botón correspondiente para <strong>Block</strong> o <strong>Unblock</strong>, como se ve en la imágen, marcado con rojo.</li>
+  <img src="images/block.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
   <li>Se mostrará una opción para confirmar los cambios realizados.</li>
+  <img src="images/confirmation-block-msg.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
   <li>El sistema confirmará que la actualización fue realizada con éxito.</li>
+  <img src="images/blocked_user.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
 </ol>
 
 <h3>Registro de auditoría</h3>
@@ -233,9 +245,12 @@ <h2 id="configuración-de-reglas-y-normativas"><span>📋</span> Configuración
 
 <h3>Creación y modificación de reglas</h3>
 <ol>
-  <li>En la página de inicio, estará disponible un botón "Add rules" para acceder a configuración de las reglas.</li>
-  <li>Para crear una nueva regla, completar el formulario con todos los datos pedidos y hacer clic en "Add rule".</li>
-  <li>Para editar una existente, seleccionarla del listado, haciendo clic en "Edit".</li>
+  <li>En la página de inicio, estará disponible un botón "Add rules" como se ve en la imágen, marcado con rojo, para acceder a configuración de las reglas.</li>
+  <img src="images/add-rules-button.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
+  <li>Para crear una nueva regla, completar el formulario con todos los datos pedidos y hacer clic en el botón "Add rule" como se ve en la imágen, marcado con rojo.</li>
+  <img src="images/add-rules-form.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
+  <li>Para editar una existente, seleccionarla del listado, haciendo clic en el botón "Edit" como se ve en la imágen, marcado con rojo.</li>
+  <img src="images/edit-rule.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
   <li>Completar o modificar los campos requeridos:
     <ul>
       <li>Título</li>
@@ -244,6 +259,8 @@ <h3>Creación y modificación de reglas</h3>
       <li>Condiciones de aplicación</li>
     </ul>
   </li>
+  <li>Finalmente hacer clic en el botón "Update rule", como se ve en la imágen, marcado con rojo.</li>
+  <img src="images/update-rule-button.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
 </ol>
 
 <h3>Validaciones</h3>
@@ -253,7 +270,8 @@ <h3>Validaciones</h3>
 
 <h3>Publicación y notificaciones</h3>
 <ul>
-  <li>Una vez guardadas, las normativas se publicarán y se notificará a los usuarios relevantes mediante correo electrónico y/o notificaciones push.</li>
+  <li>Una vez guardadas, las normativas se publicarán y se notificará a los usuarios relevantes mediante correo electrónico y/o notificaciones push al hacer click en el botón "Notify users", como se ve en la imágen, marcado con rojo.</li>
+  <img src="images/notify-users.png" style="max-width: 100%; border-radius: 12px; margin: 1rem 0;" />
 </ul>
 
 <h3>Registro de cambios</h3>