<!
DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”utf-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1”>
<title>Gestión de Tareas – Colegio San Francisco de Asís</title>
<link rel=”stylesheet”
href=[Link]
[Link]>
<script
src=[Link]
/script>
<script
src=[Link]
[Link]></script>
<style>
.jumbotron {
Background-color: #f8f9fa;
.task-container {
Margin-top: 20px;
.task-card {
Margin-bottom: 10px;
Padding: 15px;
Border: 1px solid #ccc;
Border-radius: 8px;
.task-header {
Font-weight: bold;
}
.task-actions {
Text-align: right;
.task-actions button {
Margin-left: 10px;
.form-group label {
Font-weight: bold;
.back-button {
Margin-bottom: 20px;
</style>
</head>
<body>
<!—Página de Login
<div id=”loginPage”>
<div class=”jumbotron text-center”>
<h3>Colegio San Francisco de Asís</h3>
<h3>Gestión de Tareas</h3>
<h2>Inicio de sesión</h2>
<p>¿Eres Estudiante o Profesor?</p>
<button class=”btn btn-primary”
onclick=”showLoginForm(‘estudiante’)”>Estudiante</button>
<button class=”btn btn-success”
onclick=”showLoginForm(‘profesor’)”>Profesor</button>
</div>
</div>
<!—Página de Login – Formulario
<div id=”loginFormPage” style=”display: none;”>
<div class=”container”>
<button class=”btn btn-info back-button” onclick=”goBack()”>←
Volver</button>
<h3 id=”loginTitle”></h3>
<div class=”form-group”>
<label for=”username”>Nombre de Usuario:</label>
<input type=”text” class=”form-control” id=”username”
placeholder=”Nombre de Usuario”>
</div>
<div class=”form-group”>
<label for=”password”>Contraseña:</label>
<input type=”password” class=”form-control” id=”password”
placeholder=”Contraseña”>
</div>
<button class=”btn btn-primary” onclick=”login()”>Iniciar
sesión</button>
</div>
</div>
<!—Página de Gestión de Tareas
<div id=”taskPage” style=”display: none;”>
<!—Barra de Navegación
<div class=”navbar navbar-default”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<a class=”navbar-brand” href=”#”>Gestión de Tareas</a>
</div>
<ul class=”nav navbar-nav navbar-right”>
<li><a href=”#” onclick=”logout()”>Cerrar sesión</a></li>
</ul>
</div>
</div>
<!—Contenedor de Tareas
<div class=”container task-container”>
<div id=”taskHeader” class=”text-center”></div>
<div id=”taskList” class=”row”>
<!—Aquí se mostrarán las tareas
</div>
<!—Modal para crear/editar tarea
<div id=”taskModal” class=”modal fade” role=”dialog”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-
dismiss=”modal”>×</button>
<h4 id=”taskModalTitle” class=”modal-title”>Crear Nueva
Tarea</h4>
</div>
<div class=”modal-body”>
<form id=”taskForm”>
<div class=”form-group”>
<label for=”taskTitle”>Título</label>
<input type=”text” class=”form-control” id=”taskTitle”
required>
</div>
<div class=”form-group”>
<label for=”taskDescription”>Descripción</label>
<textarea class=”form-control” id=”taskDescription”
rows=”3” required></textarea>
</div>
<div class=”form-group”>
<label for=”taskDueDate”>Fecha de Entrega</label>
<input type=”date” class=”form-control”
id=”taskDueDate” required>
</div>
<div class=”form-group”>
<label for=”taskSubject”>Asignatura</label>
<input type=”text” class=”form-control” id=”taskSubject”
required>
</div>
<button type=”submit” class=”btn btn-
primary”>Guardar</button>
</form>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-
dismiss=”modal”>Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Datos simulados de tareas
Const tareas = [
{ title: “Tarea 1”, description: “Descripción de la tarea 1”, dueDate:
“2025-03-01”, subject: “Matemáticas”, state: “Pendiente” },
{ title: “Tarea 2”, description: “Descripción de la tarea 2”, dueDate:
“2025-02-28”, subject: “Lengua”, state: “En progreso” }
];
// Datos simulados de usuarios
Const usuarios = {
Estudiante: { username: “estudiante”, password: “12345” },
Profesor: { username: “profesor”, password: “67890” }
};
Let currentUser = null; // Puede ser “estudiante” o “profesor”
Let taskToEditIndex = null; // Para almacenar la tarea que se edita
// Función para mostrar el formulario de login
Function showLoginForm(role) {
// Mostrar formulario de login
[Link](“loginPage”).[Link] = “none”;
[Link](“loginFormPage”).[Link] = “block”;
Const loginTitle = [Link](“loginTitle”);
If (role === “estudiante”) {
[Link] = “Iniciar sesión como Estudiante”;
} else if (role === “profesor”) {
[Link] = “Iniciar sesión como Profesor”;
}
// Guardar el rol seleccionado
currentUser = role;
// Función para volver al inicio
Function goBack() {
[Link](“loginFormPage”).[Link] = “none”;
[Link](“loginPage”).[Link] = “block”;
// Función para validar el login
Function login() {
Const username = [Link](“username”).value;
Const password = [Link](“password”).value;
// Comprobar si el nombre de usuario y contraseña coinciden
If (usuarios[currentUser] && usuarios[currentUser].username ===
username && usuarios[currentUser].password === password) {
[Link](“loginFormPage”).[Link] =
“none”;
[Link](“taskPage”).[Link] = “block”;
showTaskManagementPage();
} else {
Alert(“Credenciales incorrectas. Intenta de nuevo.”);
// Mostrar gestión de tareas según el rol
Function showTaskManagementPage() {
If (currentUser === “profesor”) {
[Link](“taskHeader”).innerHTML =
‘<h2>Gestión de Tareas (Profesor)</h2>’;
showTaskList(true); // Permitir editar y eliminar tareas
} else if (currentUser === “estudiante”) {
[Link](“taskHeader”).innerHTML =
‘<h2>Tareas Asignadas (Estudiante)</h2>’;
showTaskList(false); // No permitir edición ni eliminación de tareas
// Mostrar lista de tareas
Function showTaskList(isProfesor) {
Const taskListContainer = [Link](“taskList”);
[Link] = “”; // Limpiar tareas previas
[Link]((task, index) => {
let taskCard = `
<div class=”col-sm-6”>
<div class=”task-card”>
<div class=”task-header”>${[Link]}</div>
<div><strong>Descripción:</strong>
${[Link]}</div>
<div><strong>Fecha de Entrega:</strong> $
{[Link]}</div>
<div><strong>Asignatura:</strong> ${[Link]}</div>
<div><strong>Estado:</strong> ${[Link]}</div>
<div class=”task-actions”>
`;
// Solo el profesor puede editar y eliminar tareas
If (isProfesor) {
taskCard += `
<button class=”btn btn-warning btn-sm” onclick=”editTask($
{index})”>Editar</button>
<button class=”btn btn-danger btn-sm” onclick=”deleteTask($
{index})”>Eliminar</button>
`;
taskCard += `</div></div></div>`;
[Link] += taskCard;
});
// Si el profesor tiene tareas, agregar un botón para crear nuevas
tareas
If (isProfesor) {
[Link] += `
<div class=”col-sm-12”>
<button class=”btn btn-success btn-block”
onclick=”openTaskModal()”>Crear Nueva Tarea</button>
</div>
`;
// Función para abrir el modal para crear/editar tarea
Function openTaskModal(taskIndex = null) {
taskToEditIndex = taskIndex; // Asignar la tarea a editar
if (taskIndex ¡== null) {
const task = tareas[taskIndex];
[Link](“taskModalTitle”).textContent = “Editar
Tarea”;
[Link](“taskTitle”).value = [Link];
[Link](“taskDescription”).value =
[Link];
[Link](“taskDueDate”).value = [Link];
[Link](“taskSubject”).value = [Link];
[Link](“taskForm”).onsubmit = function € {
[Link]();
updateTask(taskIndex);
};
} else {
[Link](“taskModalTitle”).textContent = “Crear
Nueva Tarea”;
[Link](“taskForm”).onsubmit = function € {
[Link]();
createTask();
};
$(‘#taskModal’).modal(‘show’);
// Crear una nueva tarea
Function createTask() {
Const title = [Link](“taskTitle”).value;
Const description =
[Link](“taskDescription”).value;
Const dueDate = [Link](“taskDueDate”).value;
Const subject = [Link](“taskSubject”).value;
[Link]({ title, description, dueDate, subject, state:
“Pendiente” });
$(‘#taskModal’).modal(‘hide’);
showTaskManagementPage();
// Editar una tarea existente
Function updateTask(taskIndex) {
Const title = [Link](“taskTitle”).value;
Const description =
[Link](“taskDescription”).value;
Const dueDate = [Link](“taskDueDate”).value;
Const subject = [Link](“taskSubject”).value;
Tareas[taskIndex] = { title, description, dueDate, subject, state:
tareas[taskIndex].state };
$(‘#taskModal’).modal(‘hide’);
showTaskManagementPage();
// Eliminar una tarea
Function deleteTask(taskIndex) {
[Link](taskIndex, 1);
showTaskManagementPage();
// Cerrar sesión
Function logout() {
currentUser = null;
[Link](“loginPage”).[Link] = “block”;
[Link](“taskPage”).[Link] = “none”;
</script>
</body>
</html>