149 lines
4.7 KiB
HTML
149 lines
4.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="es">
|
||
|
|
<head>
|
||
|
|
<title>Sistema de Horarios</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="./style.css?v=2">
|
||
|
|
</head>
|
||
|
|
<body style="margin: 0; background-color: #FAFAFA">
|
||
|
|
<nav>
|
||
|
|
<div id="nav-bar">
|
||
|
|
Sistema de horarios
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<div id="mainDiv" class="container">
|
||
|
|
|
||
|
|
Un sistema para la creación de horarios básico. La propia UNSA debería tener uno de estos...
|
||
|
|
<br />
|
||
|
|
Puedes <a onclick="crearDatos(undefined,true,1,2,3,4,5)">usar nombres completos</a> de los cursos (no lo recomiendo)
|
||
|
|
o <a onclick="modoNocturno()">activar el modo nocturno</a>.<br />
|
||
|
|
<br />
|
||
|
|
Parametros:<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div style="display: inline-block">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" checked/>
|
||
|
|
<span>Ocultar los cursos que se solapan.</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div style="display: inline-block">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" checked/>
|
||
|
|
<span>Escribir los cursos seleccionados en todas las tablas.</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div style="display: inline-block">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" checked/>
|
||
|
|
<span>Ocultar otros grupos al seleccionar uno.</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<div style="padding: 3px; border: solid 1px lightgray; border-radius: 2px">
|
||
|
|
Mi horario:
|
||
|
|
<div onclick="ocultarTabla(0)" class="expandOccultButton">
|
||
|
|
<i class="material-icons" style="font-size: 30px;">keyboard_arrow_down</i>
|
||
|
|
</div>
|
||
|
|
<div id="Horario0anio" class="tablasHorarios">
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="padding: 3px; border: solid 1px lightgray; border-radius: 2px">
|
||
|
|
Primer Año
|
||
|
|
<div onclick="ocultarTabla(1)" class="expandOccultButton">
|
||
|
|
<i class="material-icons" style="font-size: 30px;">keyboard_arrow_down</i>
|
||
|
|
</div>
|
||
|
|
<div id="Horario1anio" class="tablasHorarios">
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="padding: 3px; border: solid 1px lightgray; border-radius: 2px">
|
||
|
|
Segundo Año
|
||
|
|
<div onclick="ocultarTabla(2)" class="expandOccultButton">
|
||
|
|
<i class="material-icons" style="font-size: 30px;">keyboard_arrow_down</i>
|
||
|
|
</div>
|
||
|
|
<div id="Horario2anio" class="tablasHorarios">
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="padding: 3px; border: solid 1px lightgray; border-radius: 2px">
|
||
|
|
Tercer Año
|
||
|
|
<div onclick="ocultarTabla(3)" class="expandOccultButton">
|
||
|
|
<i class="material-icons" style="font-size: 30px;">keyboard_arrow_down</i>
|
||
|
|
</div>
|
||
|
|
<div id="Horario3anio" class="tablasHorarios">
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="padding: 3px; border: solid 1px lightgray; border-radius: 2px">
|
||
|
|
Cuarto Año
|
||
|
|
<div onclick="ocultarTabla(4)" class="expandOccultButton">
|
||
|
|
<i class="material-icons" style="font-size: 30px;">keyboard_arrow_down</i>
|
||
|
|
</div>
|
||
|
|
<div id="Horario4anio" class="tablasHorarios">
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="padding: 3px; border: solid 1px lightgray; border-radius: 2px">
|
||
|
|
Quinto Año
|
||
|
|
<div onclick="ocultarTabla(5)" class="expandOccultButton">
|
||
|
|
<i class="material-icons" style="font-size: 30px;">keyboard_arrow_down</i>
|
||
|
|
</div>
|
||
|
|
<div id="Horario5anio" class="tablasHorarios">
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<script src="./process.js?v=2"></script>
|
||
|
|
<script>
|
||
|
|
const modoNocturno = () => {
|
||
|
|
|
||
|
|
const cambiarClase = (nombre,reemplazo) => {
|
||
|
|
const lista = document.querySelectorAll(`.${nombre}`);
|
||
|
|
for (let i = 0; i<lista.length; i++){
|
||
|
|
const elem = lista[i];
|
||
|
|
elem.className = elem.className.replace(nombre,reemplazo);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
document.body.style.backgroundColor = "#111111";
|
||
|
|
document.getElementById("mainDiv").style.backgroundColor = "#282c34";
|
||
|
|
document.getElementById("mainDiv").style.color = "#bbbbbb";
|
||
|
|
|
||
|
|
cambiarClase("striped","stripedD");
|
||
|
|
cambiarClase("trDescansoLight","trDescansoDark");
|
||
|
|
cambiarClase("nombreCursoTeoriaLight","nombreCursoTeoriaDark");
|
||
|
|
cambiarClase("nombreCursoLabLight","nombreCursoLabDark");
|
||
|
|
cambiarClase("descrCurso--Light--On","descrCurso--Dark--On");
|
||
|
|
cambiarClase("descrCurso--Light--Off","descrCurso--Dark--Off");
|
||
|
|
};
|
||
|
|
|
||
|
|
//modoNocturno();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|