horarios-v1/index.html

149 lines
4.7 KiB
HTML
Raw Normal View History

2018-10-12 15:50:46 +00:00
<!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>