<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	<title>BrainDensitometry</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
	<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link href="stylesheets/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>

<body class="blue-grey lighten-4">

	<div class="navbar-fixed">
	<nav class="blue-grey" role="navigation">
    <div class="nav-wrapper container">
			<a id="logo-container" href="/" class="brand-logo right">
    		BrainDensitometry
			</a>
      <ul class="left hide-on-med-and-down">
        <li><a href="#introduction">Acerca De</a></li>
        <li><a href="#Contacto">Contacto</a></li>
				<li><a href="#CalcDens">Calcular Densidad</a></li>
      </ul>

      <ul id="nav-mobile" class="side-nav">
        <li><a href="#About">Acerca De</a></li>
        <li><a href="#Contacto">Contacto</a></li>
				<li><a href="#CalcDens">Calcular Densidad</a></li>
      </ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
  	</nav>
  	</div>

	<div class="parallax-container">
    <div class="parallax"><img src="images/brain2.jpg" /></div>
		<a href="#introduction" class="btn-floating btn-large waves-effect orange darken-1 centered">
			<i class="material-icons">expand_more</i>
		</a>
  </div>

  <div class="section white">
    <div id="introduction" class="row container section scrollspy">
      <h2 class="header">Densitometría Cerebral</h2>
			<div class="info">
	      <p class="grey-text text-darken-3 lighten-3 letra">
				  Este proyecto tiene como objetivo implementar una herramienta que permita
					cuantificar la densidad de regiones de interés en tejidos cerebrales a partir
					de imágenes médicas de tomografía axial computarizada.
				</p>
				<p class="grey-text text-darken-3 lighten-3 letra">
					Específicamente, se desea analizar las variaciones en la densidad de los
					tejidos en pacientes que han sufrido traumatismos cerebrales.
				</p>
			</div>
    </div>
  </div>
  <div class="parallax-container">
    <div class="parallax"><img src="images/brain.jpg" /></div>
  </div>

	<div id ="CalcDens" class="section white">
    <div class="row container">
      <h2 class="header">Cálculo de la densidad cerebral</h2>
			<div class="container">
			  <div class="section">
			    <div class="row">

			      <div class="col s6">
			        <div class="icon-block">
			          <h2 class="center orange-text"><i class="material-icons">perm_media</i></h2>
			          <h5 class="center">Ingresar TAC</h5>
			          <p class="light">
									Debes ingresar tu carpeta con las imágenes a calcular en formato .zip
								</p>
			        </div>
			      </div>

						<div class="col s6 center-text" style="margin-top:90px;">
							<p><%= answere1 %></p>
							<p><%= answere2 %></p>
						</div>

						<form id="imageForm" class="" method="post" action="/upload" enctype="multipart/form-data">
							<div class="row">
			           <label>Ingrese un archivo</label>
			           	<div class="file-field input-field">
			              <div class="btn orange">
			                 <span>Buscar</span>
											 <input type="file" name="file" id="img" accept="application/zip">
			              </div>

										<div class="file-path-wrapper">
			                 <input class="file-path validate" type="text" placeholder="Upload file">
			              </div>
			           	</div>

								 	<div class="row">
										<button id="btn_index" class="btn-floating btn-large orange darken-1" type="submit" name="action" data-action="upload">
											<i class="material-icons right">send</i>
										</button>

										<div id="btn-loader" class="preloader-wrapper big active hidden">
											<div class="spinner-layer spinner-red">
												<div class="circle-clipper left">
													<div class="circle"></div>
												</div><div class="gap-patch">
													<div class="circle"></div>
												</div><div class="circle-clipper right">
													<div class="circle"></div>
												</div>
											</div>
										</div>
									</div>

							</div>
						</form>

						</div>

					<div id="crearGrafico" class="row">

						<!--
						<div class="row">
							<div id="grafico">
								<canvas id="myChart"></canvas>
							</div>
						</div>
						-->
					</div>

					<div class="row center-text">
							<form id="downloadForm" class="hidden" method="get" action="" enctype="multipart/form-data">
								<label style="font-size:15px;">Descargar archivos de la gráfica</label>
								<button class="btn-floating btn-large orange darken-1" type="submit">
									<i class="material-icons">vertical_align_bottom</i>
								</button>
							</form>
					</div>

			  </div>

	    <br><br>
	  </div>
    </div>
  </div>

  <footer id="Contacto" class="page-footer grey">

		<div class="container">
      <div class="row">
        <div class="col s12">

					<div class="row">
				    <form id="form_contact-us" class="col s12 grey lighten-1 bordered formValidate" action="/send-email" method="POST" enctype="multipart/form-data">
							<div class="row">
								<h5 class="black-text center">Contacto</h5>
							</div>
				      <div class="row">
				        <div class="input-field col s6">
				          <i class="material-icons prefix">account_circle</i>
									<label class="" for="uname">Nombre y Apellido</label>
									<input id="uname" for="icon_prefix active" class="validate" type="text" name="uname"></input>
				        </div>
				        <div class="input-field col s6">
				          <i class="material-icons prefix">email</i>
									<label class="" for="cmail">Email</label>
									<input id="cmail" for="icon_prefix active" class="validate" type="email" name="cmail"></input>
				        </div>
				      </div>
						  <div class="row">
				        <div class="input-field col s12">
									<i class="material-icons prefix">message</i>
									<textarea id="ccoment" class="materialize-textarea validate" name="ccoment"></textarea>
				          <label class="" for="ccoment">Mensaje</label>
				        </div>
						  </div>
							<div class="row">
								<div class="col s12 center-text">
									<button id="btn_contact-us" class="btn waves-effect waves-light orange darken-3 center-btn bordered" type="submit" name="action">Enviar
									  <i class="material-icons right">send</i>
									</button>
								</div>
							</div>
				    </form>
				  </div>
        </div>
			</div>
		</div>

		<div class="container">
			<div class="section">

				<div class="row">
					<div class="col s6 center-text">
						<a href="http://sirius.utp.edu.co/sirius/" target="_blank"><img class="logo" src="images/sirius.png"></img></a>
					</div>
					<div class="col s6 center-text" style="margin-top:20px;">
						<a href="http://neurocentro.com.co/" target="_blank"><img class="logo" src="images/neurocentro.png"></img></a>
					</div>
				</div>

				<div class="row">

					<div class="col s6">
						<div class="icon-block">
							<h5 class="center">Sirius</h5>
							<p class="light">
								El Laboratorio Sirius HPC (High Performance Computing), ubicado en la Universidad
								Tecnológica de Pereira en la oficina R-003, es el pilar de la línea de electrónica
								digital del Programa de Ingeniería de Sistemas y Computación de la Universidad
								Tecnológica de Pereira.
							</p>
						</div>
					</div>

					<div class="col s6">
						<div class="icon-block">
							<h5 class="center">Neurocentro</h5>
							<p class="light">
								"Neurocentro nació en el corazón El Neurocirujano Funcional, Hans Carmona Villada, un
								hombre que soñó con dejar huella en el mundo.Como herramienta usó las Neurociencias, y
								como motor, la pasión por ver cientos de vidas cambiadas mediante tratamientos
								innovadores de la mano de la tecnología".
							</p>
						</div>
					</div>

				</div>
				<br><br>
			</div>
		</div>

    <div class="footer-copyright" style="background-color:orange;color:darken-3">
      <div class="container">
      	&copy; Todos los derechos reservados.
      </div>
    </div>

  </footer>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
	<script src="js/init.js"></script>
	<script src='js/Chart.min.js'></script>
	<script src="js/bundle.js"></script>
	<script src="js/validar-email.js"></script>
</body>
</html>
