index.html

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Organizador de Materias FIUBA</title>
  <meta name="description" content="Te ayuda a organizar los horarios en un calendario semanal, mostrando superposiciones y permitiendo probar distintas combinaciones de cursos rápidamente.">

   <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Organizador de Materias FIUBA">
  <meta property="og:description" content="Te ayuda a organizar los horarios en un calendario semanal, mostrando superposiciones y permitiendo probar distintas combinaciones de cursos rápidamente.">
  <meta property="og:url" content="https://lugfi.github.io/organizador-fiuba/">
  <meta property="og:image" content="https://lugfi.github.io/organizador-fiuba/images/vista-previa.png">
  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">

  <link rel="stylesheet" href="css/main.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/organizador.js"></script>
</head>

<body>

  <input type="file" class="hidden" id="fileinp" onchange="cargarEstado(event)">

  <svg id="site-background">
    <rect width="100%" height="100%" fill="rgb(45,45,45)" style="stroke-width:2px;stroke-color:rgb(9,153,201)" />
    <rect x="0%" y="0%" rx="32" ry="32" width="100%" height="100%" fill="rgb(250,250,250)" style="stroke-width:2px;stroke-color:rgb(9,153,201)" />
    <text x="93%" y="2%" style="writing-mode:tb;glyph-orientation-vertical:0;fill:rgb(19,163,236);stroke:#000000;stroke-width:2px;font-size: 34px;letter-spacing:1;word-spacing:0.1;">Organizador FIUBA</text>
  </svg>

  <div id="app-info">
    <span class="dark-red">Actualizado para 2do Cuatrimestre 2017</span><br>
    <span class="text-dark-gray">En fase de prueba. Bugs, ideas y consultas a <i>fspadave@fi.uba.ar</i></span><br>
    <a href="https://github.com/lugfi/organizador-fiuba">GitHub - Organizador Fiuba</a>
  </div>

  <div class="text-dark-gray" id="divComb">
    <input type="submit" value="<" class="invisible" id="subIzquierda" onclick="siguienteComb(0);">
    <input type="submit" value="Calcular combinaciones" onclick="calcularCombinaciones();">
    <input type="submit" value=">" class="invisible" id="subDerecha" onclick="siguienteComb(1);"><br>
    <i>Con al menos </i>
    <input id="combMinMat" type="number" min="0" max="10" value="0">
    <i>materias</i><br>
    <i>Permitir hasta </i>
    <input id="combMaxSup" type="number" min="0" max="50" step="0.5" value="0">
    <i>horas de superposición</i><br>
  </div>

  <div id="msgBox" onclick="document.getElementById('msgBox').style.visibility = 'hidden';">
    <div id="msg"></div>
  </div>

  <div id="cellDesc">
    <span id="descText"></span>
  </div>

  <div id="box2">
    <object class="tab" type="image/svg+xml" data="images/BuscarMateria.svg"></object>

    <div id="buscar-materia-content">
      <h3>Buscar materia</h3>
      <span id="textCuatri">(Primero tenes que cargar los datos.)</span><br>
      Agregar cursos solo de:<br>
      <input type="checkbox" id="car1"> <label for="car1">Civil</label> -
      <input type="checkbox" id="car2"> <label for="car2">Industrial</label> -
      <input type="checkbox" id="car3"> <label for="car3">Naval</label> -
      <input type="checkbox" id="car4"> <label for="car4">Agrimensura</label> <br>
      <input type="checkbox" id="car5"> <label for="car5">Mecánica</label> -
      <input type="checkbox" id="car6"> <label for="car6">Electricista</label> -
      <input type="checkbox" id="car7"> <label for="car7">Electrónica</label> -
      <input type="checkbox" id="car8"> <label for="car8">Química</label> <br>
      <input type="checkbox" id="car9"> <label for="car9">Sistemas</label> -
      <input type="checkbox" id="car10"> <label for="car10">Informática</label> -
      <input type="checkbox" id="car11"> <label for="car11">Alimentos</label> <br>
      <input type="checkbox" id="car12"> <label for="car12">Ing. Agrimensura</label> -
      <input type="checkbox" id="car13"> <label for="car13">Tecnicatura Naval</label> -
      <input type="checkbox" id="car14"> <label for="car14">Petróleo</label>
      <input id="buscar" oninput="buscarPrecargadas();" onclick="clickBuscar();" value="Ingresá la materia que queres buscar">
      <div id="buscadas"></div>
    </div>
  </div>

  <div id="lista">
    <object class="tab" type="image/svg+xml" data="images/AgregarCurso.svg"></object>
    <div id="listaInfo"></div>
  </div>

<svg class="ui-widget-content" id="backCalendar" viewBox="0 0 1000 580" preserveAspectRatio="none" width="85%" height="90%" style="position: absolute; left:5%; top:10px;border-style:solid;border-color:rgb(9,153,201);border-width:1px;background-repeat: no-repeat;background-position: center;border-radius: 25px 0px 0px 0px;z-index:-3;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
	<defs>
		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
			<stop offset="0%" style="stop-color:rgb(230,230,230);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgb(251,251,251);stop-opacity:1" />
		</linearGradient>
	</defs>
	<rect width="100%" height="100%" fill="url(#grad1)" style="stroke-width:2px;stroke-color:rgb(9,153,201)" />
	<line x1="6.3%" y1="0" x2="6.3%" y2="100%" style="stroke:rgb(0,0,0);stroke-width:2;" opacity="0.1" />
	<text text-anchor="middle" x="14%" y="5.2%" style="font-size:30px;fill:rgb(9,153,201);">Lunes</text>
	<line x1="21.9%" y1="0" x2="21.9%" y2="100%" style="stroke:rgb(0,0,0);stroke-width:2;" opacity="0.1" />
	<text text-anchor="middle" x="29.6%" y="5.2%" style="font-size:30px;fill:rgb(9,153,201);">Martes</text>
	<line x1="37.5%" y1="0" x2="37.5%" y2="100%" style="stroke:rgb(0,0,0);stroke-width:2;" opacity="0.1"/>
	<text text-anchor="middle" x="45.3%" y="5.2%" style="font-size:30px;fill:rgb(9,153,201);">Miércoles</text>
	<line x1="53.1%" y1="0" x2="53.1%" y2="100%" style="stroke:rgb(0,0,0);stroke-width:2;" opacity="0.1"/>
	<text text-anchor="middle" x="60.9%" y="5.2%" style="font-size:30px;fill:rgb(9,153,201);">Jueves</text>
	<line x1="68.8%" y1="0" x2="68.8%" y2="100%" style="stroke:rgb(0,0,0);stroke-width:2;" opacity="0.1"/>
	<text text-anchor="middle" x="76.5%" y="5.2%" style="font-size:30px;fill:rgb(9,153,201);">Viernes</text>
	<line x1="84.3%" y1="0" x2="84.3%" y2="100%" style="stroke:rgb(0,0,0);stroke-width:2;" opacity="0.1"/>
	<text text-anchor="middle" x="92.1%" y="5.2%" style="font-size:30px;fill:rgb(9,153,201);">Sábado</text>
	<line x1="0" y1="6.2%" x2="100%" y2="6.2%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="49" style="fill:rgb(35,99,20)">7:00</text>
	<line x1="0" y1="8.9%" x2="100%" y2="8.9%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="65" style="fill:rgb(35,99,20)">7:30</text>
	<line x1="0" y1="11.7%" x2="100%" y2="11.7%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="81" style="fill:rgb(35,99,20)">8:00</text>
	<line x1="0" y1="14.5%" x2="100%" y2="14.5%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="97" style="fill:rgb(35,99,20)">8:30</text>
	<line x1="0" y1="17.2%" x2="100%" y2="17.2%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="113" style="fill:rgb(35,99,20)">9:00</text>
	<line x1="0" y1="20%" x2="100%" y2="20%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="129" style="fill:rgb(35,99,20)">9:30</text>
	<line x1="0" y1="22.75%" x2="100%" y2="22.75%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="145" style="fill:rgb(35,99,20)">10:00</text>
	<line x1="0" y1="25.5%" x2="100%" y2="25.5%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="161" style="fill:rgb(35,99,20)">10:30</text>
	<line x1="0" y1="28.26%" x2="100%" y2="28.26%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="177" style="fill:rgb(35,99,20)">11:00</text>
	<line x1="0" y1="31%" x2="100%" y2="31%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="193" style="fill:rgb(35,99,20)">11:30</text>
	<line x1="0" y1="33.8%" x2="100%" y2="33.8%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="209" style="fill:rgb(35,99,20)">12:00</text>
	<line x1="0" y1="36.5%" x2="100%" y2="36.5%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="225" style="fill:rgb(35,99,20)">12:30</text>
	<line x1="0" y1="39.3%" x2="100%" y2="39.3%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="241" style="fill:rgb(35,99,20)">13:00</text>
	<line x1="0" y1="42%" x2="100%" y2="42%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="257" style="fill:rgb(35,99,20)">13:30</text>
	<line x1="0" y1="44.8%" x2="100%" y2="44.8%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="273" style="fill:rgb(35,99,20)">14:00</text>
	<line x1="0" y1="47.6%" x2="100%" y2="47.6%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="289" style="fill:rgb(35,99,20)">14:30</text>
	<line x1="0" y1="50.3%" x2="100%" y2="50.3%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="305" style="fill:rgb(35,99,20)">15:00</text>
	<line x1="0" y1="53.1%" x2="100%" y2="53.1%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="321" style="fill:rgb(35,99,20)">15:30</text>
	<line x1="0" y1="55.85%" x2="100%" y2="55.85%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="337" style="fill:rgb(35,99,20)">16:00</text>
	<line x1="0" y1="58.6%" x2="100%" y2="58.6%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="353" style="fill:rgb(35,99,20)">16:30</text>
	<line x1="0" y1="61.4%" x2="100%" y2="61.4%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="369" style="fill:rgb(35,99,20)">17:00</text>
	<line x1="0" y1="64.13%" x2="100%" y2="64.13%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="385" style="fill:rgb(35,99,20)">17:30</text>
	<line x1="0" y1="66.89%" x2="100%" y2="66.89%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="401" style="fill:rgb(35,99,20)">18:00</text>
	<line x1="0" y1="69.6%" x2="100%" y2="69.6%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="417" style="fill:rgb(35,99,20)">18:30</text>
	<line x1="0" y1="72.4%" x2="100%" y2="72.4%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="433" style="fill:rgb(35,99,20)">19:00</text>
	<line x1="0" y1="75.2%" x2="100%" y2="75.2%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="449" style="fill:rgb(35,99,20)">19:30</text>
	<line x1="0" y1="77.9%" x2="100%" y2="77.9%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="465" style="fill:rgb(35,99,20)">20:00</text>
	<line x1="0" y1="80.7%" x2="100%" y2="80.7%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="481" style="fill:rgb(35,99,20)">20:30</text>
	<line x1="0" y1="83.4%" x2="100%" y2="83.4%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="497" style="fill:rgb(35,99,20)">21:00</text>
	<line x1="0" y1="86.2%" x2="100%" y2="86.2%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="513" style="fill:rgb(35,99,20)">21:30</text>
	<line x1="0" y1="88.95%" x2="100%" y2="88.95%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="529" style="fill:rgb(35,99,20)">22:00</text>
	<line x1="0" y1="91.7%" x2="100%" y2="91.7%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="545" style="fill:rgb(35,99,20)">22:30</text>
	<line x1="0" y1="94.47%" x2="100%" y2="94.47%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="561" style="fill:rgb(35,99,20)">23:00</text>
	<line x1="0" y1="97.23%" x2="100%" y2="97.23%" style="stroke:rgb(100,100,100);stroke-width:1" />
	<text text-anchor="end" x="5%" y="577" style="fill:rgb(35,99,20)">23:30</text>
</svg>

  <!-- ¿Se usa el siguiente elemento? -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 580" preserveAspectRatio="none" width="85%" height="90%" opacity="1" style="position: absolute; left:5%;top:10px;z-index:1" id="canvas"></svg>

  <!-- ¿Se usa el siguiente elemento? -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 580" preserveAspectRatio="none" width="85%" height="90%" opacity="1" style="position: absolute; left:5%;top:10px;z-index:2" id="topCanvas"></svg>

  <div id="resizeDiv"></div>

  <!-- ¿Se usa el siguiente elemento? -->
  <div style="position: absolute; left:10px; top:10px">
    <p id="demo"></p>
  </div>

  <div id="cHTab">
    <h3>Horario extracurricular</h3>
    <label for="cHDesc">Descripción:</label> <input id="cHDesc"><br><br>

    <div id="cHClasesDiv"></div>
    <input type="submit" value="Agregar bloque" onclick="cHAgregarBloque();"><br>
    <div id="cHButtons">
      <input type="submit" value="Cerrar" onclick="document.getElementById('cHTab').style.visibility = 'hidden';">
      <input type="submit" value="Aceptar" onclick="cHAceptar();">
    </div>
  </div>

  <ul id="menu">
    <object class="tab" type="image/svg+xml" data="images/Opciones.svg"></object>

    <li id="but1" onclick="cHCrearHorario();">Horario Extracurricular</li>
    <li id="but2" onclick="descargarHorarios();">Descargar Horario</li>
    <li id="but3" onclick="guardarEstado();">Guardar Estado</li>
    <li id="but4" onclick="document.getElementById('fileinp').click();">Cargar Estado</li>
    <li id="but5">
      Usar datos de cuatrimestres pasados
      <ul id="but5_sub">
        <li id="but5_7">2do Cuatrimestre 2017</li>
        <li id="but5_6">1er Cuatrimestre 2017</li>
        <li id="but5_5">2do Cuatrimestre 2016</li>
        <li id="but5_4">1er Cuatrimestre 2016</li>
        <li id="but5_3">2do Cuatrimestre 2015</li>
        <li id="but5_1">1er Cuatrimestre 2015</li>
        <li id="but5_2">2do Cuatrimestre 2014</li>
      </ul>
    </li>
  </ul>

</body>

</html>